diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js index 9326b540e9..caaa71e7ae 100644 --- a/ghost/portal/src/components/pages/AccountHomePage.js +++ b/ghost/portal/src/components/pages/AccountHomePage.js @@ -3,7 +3,7 @@ import MemberAvatar from '../common/MemberGravatar'; import ActionButton from '../common/ActionButton'; import CloseButton from '../common/CloseButton'; import Switch from '../common/Switch'; -import {allowCompMemberUpgrade, getMemberSubscription, getMemberTierName, getSiteNewsletters, getSupportAddress, getUpdatedOfferPrice, hasCommentsEnabled, hasMultipleNewsletters, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember, subscriptionHasFreeTrial} from '../../utils/helpers'; +import {allowCompMemberUpgrade, getCompExpiry, getMemberSubscription, getMemberTierName, getSiteNewsletters, getSupportAddress, getUpdatedOfferPrice, hasCommentsEnabled, hasMultipleNewsletters, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember, subscriptionHasFreeTrial} from '../../utils/helpers'; import {getDateString} from '../../utils/date-time'; import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg'; import {ReactComponent as OfferTagIcon} from '../../images/icons/offer-tag.svg'; @@ -230,8 +230,13 @@ const PaidAccountActions = () => { label = `${Intl.NumberFormat('en', {currency, style: 'currency'}).format(amount / 100)}/${interval}`; } let offerLabelStr = getOfferLabel({price, offer, subscriptionStartDate: startDate}); + const compExpiry = getCompExpiry({member}); if (isComplimentary) { - label = label ? `Complimentary (${label})` : `Complimentary`; + if (compExpiry) { + label = `Complimentary - Expires ${compExpiry}`; + } else { + label = label ? `Complimentary (${label})` : `Complimentary`; + } } let oldPriceClassName = ''; if (offerLabelStr) { @@ -475,6 +480,15 @@ const AccountWelcome = () => { } if (subscription) { const currentPeriodEnd = subscription?.current_period_end; + if (isComplimentary && getCompExpiry({member})) { + const expiryDate = getCompExpiry({member}); + const expiryAt = getDateString(expiryDate); + return ( +
+

Your subscription will expire on {expiryAt}

+
+ ); + } if (subscription?.cancel_at_period_end) { return null; } diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js index 5af1a1cd0f..bb1740a177 100644 --- a/ghost/portal/src/utils/helpers.js +++ b/ghost/portal/src/utils/helpers.js @@ -1,3 +1,5 @@ +import {getDateString} from './date-time'; + export function removePortalLinkFromUrl() { const [path] = window.location.hash.substr(1).split('?'); const linkRegex = /^\/portal\/?(?:\/(\w+(?:\/\w+)*))?\/?$/; @@ -88,6 +90,13 @@ export function allowCompMemberUpgrade({member}) { return member?.subscriptions?.[0]?.tier?.expiry_at !== undefined; } +export function getCompExpiry({member}) { + if (member?.subscriptions?.[0]?.tier?.expiry_at) { + return getDateString(member.subscriptions[0].tier.expiry_at); + } + return ''; +} + export function getUpgradeProducts({site, member}) { const activePrice = getMemberActivePrice({member}); const activePriceCurrency = activePrice?.currency;