Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Refined free trial UI on account home

Browse source 
refs https://github.com/TryGhost/Team/issues/1757
This commit is contained in:
Rishabh 2022-08-08 17:21:16 +05:30
parent 821ec840b3
commit 2e8fa05bd9
2 changed files with 34 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ghost/portal/src/components/pages/AccountHomePage.js
View file

@ -3,7 +3,7 @@ import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton'; import ActionButton from '../common/ActionButton';
import CloseButton from '../common/CloseButton'; import CloseButton from '../common/CloseButton';
import Switch from '../common/Switch'; import Switch from '../common/Switch';
import {getMemberSubscription, getMemberTierName, getSiteNewsletters, getSupportAddress, getUpdatedOfferPrice, hasCommentsEnabled, hasMultipleNewsletters, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember, subscriptionHasFreeTrial} from '../../utils/helpers'; import {getMemberSubscription, getMemberTierName, getSiteNewsletters, getSubFreeTrialDaysLeft, getSupportAddress, getUpdatedOfferPrice, hasCommentsEnabled, hasMultipleNewsletters, hasMultipleProductsFeature, hasOnlyFreePlan, isComplimentaryMember, subscriptionHasFreeTrial} from '../../utils/helpers';
import {getDateString} from '../../utils/date-time'; import {getDateString} from '../../utils/date-time';
import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg'; import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
import {ReactComponent as OfferTagIcon} from '../../images/icons/offer-tag.svg'; import {ReactComponent as OfferTagIcon} from '../../images/icons/offer-tag.svg';
@ -186,13 +186,16 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
return offerLabel; return offerLabel;
} }
function FreeTrialLabel({subscription}) { function FreeTrialLabel({subscription, priceLabel}) {
if (subscriptionHasFreeTrial({sub: subscription})) { if (subscriptionHasFreeTrial({sub: subscription})) {
const trialEnd = getDateString(subscription.trial_end_at); // const trialEnd = getDateString(subscription.trial_end_at);
return ( return (
<p className="gh-portal-account-discountcontainer"> <p className="gh-portal-account-discountcontainer">
<OfferTagIcon className="gh-portal-account-tagicon" /> <div>
<span>Free Trial till {trialEnd}</span>
{/* <span>Free Trial till {trialEnd}</span> */}
<span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span>
</div>
</p> </p>
); );
} }
@ -247,13 +250,24 @@ const PaidAccountActions = () => {
return null; return null;
}; };
const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
if (hasFreeTrial) {
return (
<>
<FreeTrialLabel subscription={subscription} />
<p className={oldPriceClassName}>
then {label}
</p>
</>
);
}
return ( return (
<> <>
<p className={oldPriceClassName}> <p className={oldPriceClassName}>
{label} {label}
</p> </p>
<OfferLabel /> <OfferLabel />
<FreeTrialLabel subscription={subscription} />
</> </>
); );
}; };
@ -312,6 +326,10 @@ const PaidAccountActions = () => {
if (hasMultipleProductsFeature({site}) && getMemberTierName({member})) { if (hasMultipleProductsFeature({site}) && getMemberTierName({member})) {
planLabel = getMemberTierName({member}); planLabel = getMemberTierName({member});
} }
const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
if (hasFreeTrial) {
planLabel += ' (Free Trial)';
}
return ( return (
<> <>
<section> <section>

10
ghost/portal/src/utils/helpers.js
View file

@ -457,6 +457,16 @@ export function hasOnlyFreeProduct({site}) {
return (products.length === 1 && hasFreeProductPrice({site})); return (products.length === 1 && hasFreeProductPrice({site}));
} }
export function getSubFreeTrialDaysLeft({sub} = {}) {
if (!subscriptionHasFreeTrial({sub})) {
return 0;
}
const today = (new Date()).setHours(0, 0, 0, 0);
const freeTrialEnd = (new Date(sub.trial_end_at)).setHours(0, 0, 0, 0);
const ONE_DAY = 1000 * 60 * 60 * 24;
return Math.ceil(((freeTrialEnd - today) / ONE_DAY));
}
export function subscriptionHasFreeTrial({sub} = {}) { export function subscriptionHasFreeTrial({sub} = {}) {
if (sub?.trial_end_at && !isInThePast(new Date(sub?.trial_end_at))) { if (sub?.trial_end_at && !isInThePast(new Date(sub?.trial_end_at))) {
return true; return true;