From ef38ff11324f96c64d44733a7ed9a78033e0b515 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 18 Aug 2021 16:21:11 +0200
Subject: [PATCH] Added more discoverable discount label

---
 .../src/components/common/PlansSection.js     | 28 +++++-
 .../src/components/common/ProductsSection.js  | 99 +++++++++++++++++--
 2 files changed, 115 insertions(+), 12 deletions(-)

diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 602756cfae..dff7491b3f 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -69,6 +69,15 @@ export const PlanSectionStyles = `
         border-bottom-right-radius: 0;
     }
 
+    .gh-portal-plans-container.has-multiple-products.has-discount {
+        margin-top: 40px;
+    }
+
+    .gh-portal-plans-container.has-multiple-products.has-discount,
+    .gh-portal-plans-container.has-multiple-products.has-discount .gh-portal-plan-section:last-of-type::before {
+        border-top-right-radius: 0;
+    }
+
     .gh-portal-plans-container.is-change-plan.has-multiple-products .gh-portal-plan-section::before {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
@@ -498,16 +507,16 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
             break;
         }
 
-        const planClass = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
+        let planClass = isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section';
         const planNameClass = planDetails.feature ? 'gh-portal-plan-name' : 'gh-portal-plan-name no-description';
         const featureClass = hasMultipleProductsFeature({site}) ? 'gh-portal-plan-featurewrapper hidden' : 'gh-portal-plan-featurewrapper';
 
         return (
             <div className={planClass} key={id} onClick={e => onPlanSelect(e, id)}>
+                {(hasMultipleProductsFeature({site}) ? <PlanDiscount discount={description} /> : ``)}
                 <Checkbox name={name} id={id} isChecked={isChecked} onPlanSelect={onPlanSelect} />
                 <h4 className={planNameClass}>{displayName}</h4>
                 <PriceLabel currencySymbol={currencySymbol} price={price} interval={interval} />
-                {(hasMultipleProductsFeature({site}) ? <PlanDiscount discount={description} /> : ``)}
                 <div className={featureClass}>
                     <PlanFeature feature={planDetails.feature} />
                     {(changePlan && selectedPlan === id ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
@@ -605,6 +614,21 @@ function getPlanClassNames({changePlan, cookiesDisabled, plans = [], showVertica
     }
     if (hasMultipleProductsFeature({site})) {
         className += ' has-multiple-products';
+
+        const filteredPlans = plans.filter(d => d.id !== 'free');
+        const monthlyPlan = plans.find((d) => {
+            return d.name === 'Monthly' && !d.description && d.interval === 'month';
+        });
+        const yearlyPlan = plans.find((d) => {
+            return d.name === 'Yearly' && !d.description && d.interval === 'year';
+        });
+
+        if (filteredPlans.length === 2 && monthlyPlan && yearlyPlan) {
+            const discount = calculateDiscount(monthlyPlan.amount, yearlyPlan.amount);
+            if (discount) {
+                className += ' has-discount';
+            }
+        }
     }
     return className;
 }
diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index e35dbf6d87..a59453cab8 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -4,6 +4,7 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg'
 import {getSiteProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled, getMemberActivePrice, getProductFromPrice} from '../../utils/helpers';
 import AppContext from '../../AppContext';
 import ActionButton from './ActionButton';
+import calculateDiscount from '../../utils/discount';
 
 export const ProductsSectionStyles = ({site}) => {
     const products = getSiteProducts({site});
@@ -30,6 +31,11 @@ export const ProductsSectionStyles = ({site}) => {
             letter-spacing: 0.3px;
             text-transform: uppercase;
             margin: 0 6px;
+            min-width: 180px;
+        }
+
+        .gh-portal-priceoption-label.monthly {
+            text-align: right;
         }
 
         .gh-portal-products-priceswitch .gh-portal-for-switch label, .gh-portal-for-switch .container {
@@ -59,6 +65,48 @@ export const ProductsSectionStyles = ({site}) => {
             transform: translateX(19px);
         }
 
+        .gh-portal-discount-label {
+            position: absolute;
+            top: -19px;
+            left: -1px;
+            right: -1px;
+            color: var(--brandcolor);
+            font-size: 1.1rem;
+            font-weight: 600;
+            letter-spacing: 0.3px;
+            text-transform: uppercase;
+            padding: 0px 4px;
+            text-align: center;
+        }
+        
+        .gh-portal-discount-label:before {
+            position: absolute;
+            content: "";
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: var(--brandcolor);
+            opacity: 0.15;
+            border-radius: 2px 2px 0 0;
+        }
+
+        .gh-portal-products-priceswitch .gh-portal-discount-label {
+            position: relative;
+            font-size: 1.3rem;
+            letter-spacing: 0.3px;
+            margin: 0 0 0 4px;
+            padding: 2px 6px;
+            top: unset;
+            left: unset;
+            right: unset;
+            width: unset;
+        }
+
+        .gh-portal-products-priceswitch. gh-portal-discount-label:before {
+            border-radius: 5px;
+        }
+
         .gh-portal-products-grid {
             display: grid;
             grid-template-columns: repeat(${productColumns(noOfProducts)}, minmax(0, ${(productColumns(noOfProducts) <= 3 ? `360px` : `300px`)}));
@@ -85,6 +133,13 @@ export const ProductsSectionStyles = ({site}) => {
             }
         }
 
+        @media (max-width: 360px) {
+            div:not(.gh-portal-products-priceswitch) .gh-portal-discount-label {
+                font-size: 0.9rem;
+                white-space: nowrap;
+            }
+        }
+
 
         .gh-portal-product-card {
             position: relative;
@@ -242,13 +297,6 @@ export const ProductsSectionStyles = ({site}) => {
             padding: 0;
         }
 
-        .gh-portal-discount-label {
-            color: var(--brandcolor);
-            font-size: 1.2rem;
-            margin-top: 4px;
-            margin-bottom: -12px;
-        }
-
         @media (max-width: 480px) {
             .gh-portal-products {
                 margin: 0 -32px;
@@ -295,6 +343,12 @@ export const ProductsSectionStyles = ({site}) => {
             .gh-portal-product-description {
                 grid-column: 2 / 3;
                 margin-bottom: 0px;
+                text-align: left;
+            }
+
+            .gh-portal-singleproduct-benefits .gh-portal-product-description {
+                text-align: center;
+                padding-bottom: 12px;
             }
 
             .gh-portal-product-price {
@@ -632,20 +686,44 @@ function FreeProductCard() {
     );
 }
 
-function ProductPriceSwitch({selectedInterval, setSelectedInterval}) {
+function YearlyDiscount({discount}) {
+    if (discount === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <span className="gh-portal-discount-label">{discount}% discount</span>
+        </>
+    );
+}
+
+function ProductPriceSwitch({products, selectedInterval, setSelectedInterval}) {
     const {site} = useContext(AppContext);
+    const {selectedProduct} = useContext(ProductsContext);
     const {portal_plans: portalPlans} = site;
     if (!portalPlans.includes('monthly') || !portalPlans.includes('yearly')) {
         return null;
     }
+
+    let yearlyDiscount = 0;
+
+    if (selectedProduct !== 'free') {
+        const product = products.find(prod => prod.id === selectedProduct);
+        yearlyDiscount = calculateDiscount(product.monthlyPrice.amount, product.yearlyPrice.amount);
+    }
+
     return (
         <div className="gh-portal-products-priceswitch">
-            <span className="gh-portal-priceoption-label">Monthly</span>
+            <span className="gh-portal-priceoption-label monthly">Monthly</span>
             <Switch id='product-interval' onToggle={(e) => {
                 const interval = selectedInterval === 'month' ? 'year' : 'month';
                 setSelectedInterval(interval);
             }} checked={selectedInterval === 'year'} />
-            <span className="gh-portal-priceoption-label">Yearly</span>
+            <span className="gh-portal-priceoption-label">
+                Yearly
+                <YearlyDiscount discount={yearlyDiscount} />
+            </span>
         </div>
     );
 }
@@ -719,6 +797,7 @@ function ProductsSection({onPlanSelect, products, type = null}) {
         }}>
             <section className={className}>
                 <ProductPriceSwitch
+                    products={products}
                     selectedInterval={activeInterval}
                     setSelectedInterval={setSelectedInterval}
                 />