From 12500c3b9519c0fc7471428005cda2f27008bce6 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 10 May 2021 15:52:39 +0530
Subject: [PATCH] Added fallback discount description

refs https://github.com/TryGhost/Team/issues/671

When turning on custom products, existing sites should have default price description that retains current behaviour. This change adds custom description with discount value for Yearly Plans to keep the existing behavior for sites that mimic the old setup.
---
 .../src/components/common/PlansSection.js     | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 8f4c2fc7e8..f5cdbdd9ab 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -1,5 +1,6 @@
-import React, { useContext } from 'react';
+import React, {useContext} from 'react';
 import AppContext from '../../AppContext';
+import calculateDiscount from '../../utils/discount';
 import {isCookiesDisabled, formatNumber, hasOnlyFreePlan} from '../../utils/helpers';
 
 export const PlanSectionStyles = `
@@ -314,7 +315,7 @@ export const PlanSectionStyles = `
     }
 `;
 
-function Checkbox({name, id, onPlanSelect, isChecked, disabled}) {
+function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) {
     if (isCookiesDisabled()) {
         disabled = true;
     }
@@ -345,9 +346,25 @@ function PriceLabel({currencySymbol, price}) {
     );
 }
 
+function addDiscountToPlans(plans) {
+    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);
+        yearlyPlan.description = discount > 0 ? `${discount}% discount` : '';
+    }
+}
+
 function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
     const {site} = useContext(AppContext);
     const {free_price_name: freePriceName, free_price_description: freePriceDescription} = site;
+    addDiscountToPlans(plans);
     return plans.map(({name, currency_symbol: currencySymbol, price, description, id}) => {
         const isChecked = selectedPlan === id;
         const classes = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
@@ -369,7 +386,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
             <div className={classes} key={id} onClick={e => onPlanSelect(e, id)}>
                 <Checkbox name={name} id={id} isChecked={isChecked} onPlanSelect={onPlanSelect} />
                 <h4 className={planNameClass}>{displayName}</h4>
-                <PriceLabel name={name} currencySymbol={currencySymbol} price={price} />
+                <PriceLabel currencySymbol={currencySymbol} price={price} />
                 <div className='gh-portal-plan-featurewrapper'>
                     <div className='gh-portal-plan-feature'>
                         {planDetails.feature}