From 1a25cac7adee0cb354fd7f35a25ea774efcd4dbd Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 5 Jan 2022 15:03:53 +0100
Subject: [PATCH] Updated discount in account home page

---
 ghost/portal/src/App.js                       |  4 +--
 ghost/portal/src/components/Frame.styles.js   |  4 +--
 .../src/components/pages/AccountHomePage.js   | 29 +++++++++++++++----
 ghost/portal/src/utils/fixtures.js            | 10 +++----
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 2aa5684ebf..3bd324c3b1 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -18,8 +18,8 @@ const React = require('react');
 const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
-    member: Fixtures.member.free,
-    page: 'offer',
+    member: Fixtures.member.paid,
+    page: 'accountHome',
     pageData: Fixtures.offer
 };
 
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 5a331e4101..186b632e06 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -250,7 +250,7 @@ const FrameStyles = `
         letter-spacing: 0;
         text-rendering: optimizeLegibility;
         background: var(--white);
-        width: 400px;
+        width: 440px;
         margin: 0 auto;
         border-radius: 5px;
         box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1);
@@ -472,7 +472,7 @@ const FrameStyles = `
         letter-spacing: 0.3px;
         line-height: 1.25em;
         padding: 0;
-        margin: 2px 0 0;
+        margin: 4px 0 0;
         color: var(--grey6);
     }
 
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 3ab76a64d0..97615087dc 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -99,6 +99,25 @@ export const AccountHomePageStyles = `
         margin-right: 12px;
         border-radius: 2px;
     }
+
+    .gh-portal-account-discountcontainer {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+
+    .gh-portal-account-old-price {
+        text-decoration: line-through;
+        color: var(--grey9) !important;
+    }
+
+    .gh-portal-account-tagicon {
+        width: 16px;
+        height: 16px;
+        color: var(--brandcolor);
+        margin-right: 5px;
+        z-index: 999;
+    }
 `;
 
 const UserAvatar = ({avatar, brandColor}) => {
@@ -152,7 +171,7 @@ function getOfferLabel({offer, price, subscriptionStartDate}) {
             let offerEndDate = new Date(offerStartDate.setMonth(offerStartDate.getMonth() + durationInMonths));
             durationLabel = `Ends ${getDateString(offerEndDate)}`;
         }
-        offerLabel = `${getUpdatedOfferPrice({offer, price, useFormatted: true})}/${price.interval} - ${durationLabel}`;
+        offerLabel = `${getUpdatedOfferPrice({offer, price, useFormatted: true})}/${price.interval}${durationLabel ? `— ${durationLabel}` : ``}`;
     }
     return offerLabel;
 }
@@ -191,14 +210,14 @@ const PaidAccountActions = () => {
         }
         let oldPriceClassName = '';
         if (offerLabelStr) {
-            oldPriceClassName = 'old-price';
+            oldPriceClassName = 'gh-portal-account-old-price';
         }
         const OfferLabel = () => {
             if (offerLabelStr) {
                 return (
-                    <p>
-                        <OfferTagIcon style={{width: '12px', height: '9px', marginLeft: '-10px'}}/>
-                        {offerLabelStr}
+                    <p className="gh-portal-account-discountcontainer">
+                        <OfferTagIcon className="gh-portal-account-tagicon" />
+                        <span>{offerLabelStr}</span>
                     </p>
                 );
             }
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 5f1105f796..6665ad310b 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -53,7 +53,7 @@ function getOfferData({
     type = 'percent',
     cadence = 'month',
     amount = 50,
-    duration = 'once',
+    duration = 'repeating',
     durationInMonths = null,
     currencyRestriction = false,
     currency = null,
@@ -86,7 +86,7 @@ function getMemberData({
     email = 'jamie@example.com',
     firstname = 'Jamie',
     subscriptions = [],
-    paid = false,
+    paid = true,
     avatarImage: avatar_image = '',
     subscribed = true
 } = {}) {
@@ -131,7 +131,7 @@ export function getProductsData({numOfProducts = 3} = {}) {
             numOfBenefits: 3
         }),
         getProductData({
-            name: 'Friends of the browser',
+            name: 'Friends of the Blueprint',
             description: 'Get access to everything and lock in early adopter pricing for life + listen to my podcast',
             monthlyPrice: getPriceData({
                 interval: 'month',
@@ -162,7 +162,6 @@ function getProductData({
         monthlyPrice,
         yearlyPrice,
         benefits: getBenefits({numOfBenefits})
-
     };
 }
 
@@ -213,7 +212,7 @@ function getSubscriptionData({
     id = `sub_${objectId()}`,
     status = 'active',
     currency = 'USD',
-    interval = 'month',
+    interval = 'year',
     amount = (interval === 'month' ? 500 : 5000),
     nickname = (interval === 'month' ? 'Monthly' : 'Yearly'),
     cardLast4 = '4242',
@@ -236,6 +235,7 @@ function getSubscriptionData({
             interval,
             currency
         },
+        offer,
         status,
         start_date,
         default_payment_card_last4: cardLast4,