From 2e8fa05bd937d396e57f583169594b2a6b54bb13 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 8 Aug 2022 17:21:16 +0530
Subject: [PATCH] Refined free trial UI on account home

refs https://github.com/TryGhost/Team/issues/1757
---
 .../src/components/pages/AccountHomePage.js   | 30 +++++++++++++++----
 ghost/portal/src/utils/helpers.js             | 10 +++++++
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 3a6f8741bb..363b3e32e8 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 {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>
diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js
index e769046d76..d18870adff 100644
--- a/ghost/portal/src/utils/helpers.js
+++ b/ghost/portal/src/utils/helpers.js
@@ -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;