Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -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 CloseButton from '../common/CloseButton';
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 {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
import {ReactComponent as OfferTagIcon} from '../../images/icons/offer-tag.svg';
@ -186,13 +186,16 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
return offerLabel;
}
function FreeTrialLabel({subscription}) {
function FreeTrialLabel({subscription, priceLabel}) {
if (subscriptionHasFreeTrial({sub: subscription})) {
const trialEnd = getDateString(subscription.trial_end_at);
// const trialEnd = getDateString(subscription.trial_end_at);
return (
<p className="gh-portal-account-discountcontainer">
<OfferTagIcon className="gh-portal-account-tagicon" />
<span>Free Trial till {trialEnd}</span>
<div>
{/* <span>Free Trial till {trialEnd}</span> */}
<span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span>
</div>
</p>
);
}
@ -247,13 +250,24 @@ const PaidAccountActions = () => {
return null;
};
const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
if (hasFreeTrial) {
return (
<>
<FreeTrialLabel subscription={subscription} />
<p className={oldPriceClassName}>
then {label}
</p>
</>
);
}
return (
<>
<p className={oldPriceClassName}>
{label}
</p>
<OfferLabel />
<FreeTrialLabel subscription={subscription} />
</>
);
};
@ -312,6 +326,10 @@ const PaidAccountActions = () => {
if (hasMultipleProductsFeature({site}) && getMemberTierName({member})) {
planLabel = getMemberTierName({member});
}
const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
if (hasFreeTrial) {
planLabel += ' (Free Trial)';
}
return (
<>
<section>

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

@ -457,6 +457,16 @@ export function hasOnlyFreeProduct({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} = {}) {
if (sub?.trial_end_at && !isInThePast(new Date(sub?.trial_end_at))) {
return true;