From 05e515ce2c1db2682e77929602658c3d78373564 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 8 Aug 2022 14:56:06 +0200
Subject: [PATCH] Updated free trial design on account home

refs https://github.com/TryGhost/Team/issues/1757
---
 .../src/components/pages/AccountHomePage.js   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 363b3e32e8..47a7feab01 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -188,13 +188,12 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
 
 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">
                 <div>
-
-                    {/* <span>Free Trial till {trialEnd}</span> */}
-                    <span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span>
+                    <span>Free Trial – Ends {trialEnd}</span>
+                    {/* <span>{getSubFreeTrialDaysLeft({sub: subscription})} days left</span> */}
                 </div>
             </p>
         );
@@ -251,13 +250,16 @@ const PaidAccountActions = () => {
         };
 
         const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
+        if (hasFreeTrial) {
+            oldPriceClassName = 'gh-portal-account-old-price';
+        }
         if (hasFreeTrial) {
             return (
                 <>
-                    <FreeTrialLabel subscription={subscription} />
                     <p className={oldPriceClassName}>
-                        then {label}
+                        {label}
                     </p>
+                    <FreeTrialLabel subscription={subscription} />
                 </>
             );
         }
@@ -327,9 +329,9 @@ const PaidAccountActions = () => {
             planLabel = getMemberTierName({member});
         }
         const hasFreeTrial = subscriptionHasFreeTrial({sub: subscription});
-        if (hasFreeTrial) {
-            planLabel += ' (Free Trial)';
-        }
+        // if (hasFreeTrial) {
+        //     planLabel += ' (Free Trial)';
+        // }
         return (
             <>
                 <section>