Added benefits to plans section

no refs

ghost/portal/src/components/common/PlansSection.js

@@ -468,6 +468,35 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
     });
 }
 
+function PlanBenefit({benefit}) {
+    if (!benefit?.name) {
+        return null;
+    }
+    return (
+        <div> {benefit.name} </div>
+    );
+}
+
+function PlanBenefits({plans, selectedPlan}) {
+    const plan = plans.find((_plan) => {
+        return _plan.id === selectedPlan;
+    });
+    if (!plan?.benefits?.length) {
+        return null;
+    }
+    const benefits = plan.benefits.map((benefit, idx) => {
+        const key = `${benefit.name}-${idx}`;
+        return (
+            <PlanBenefit benefit={benefit} key={key} />
+        );
+    });
+    return (
+        <div>
+            {benefits}
+        </div>
+    );
+}
+
 function PlanLabel({showLabel}) {
     if (!showLabel) {
         return null;
@@ -524,6 +553,7 @@ function PlansSection({plans, showLabel = true, selectedPlan, onPlanSelect, chan
             <div className={className}>
                 <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} changePlan={changePlan} />
             </div>
+            <PlanBenefits plans={plans} selectedPlan={selectedPlan} />
         </section>
     );
 }

ghost/portal/src/utils/fixtures.js

@@ -46,7 +46,7 @@ const products = [
             active: 1,
             nickname: 'Yearly',
             currency: 'usd',
-            amount: 100000,
+            amount: 20000,
             type: 'recurring',
             interval: 'year'
         },
@@ -246,7 +246,7 @@ export const site = {
         currency: 'USD'
     },
     portal_products: ['product_1', 'product_2', 'product_3'],
-    products,
+    products: [products[0]],
     prices,
     allow_self_signup: true,
     members_signup_access: 'all',

ghost/portal/src/utils/helpers.js

@@ -1,3 +1,5 @@
+import calculateDiscount from './discount';
+
 export function removePortalLinkFromUrl() {
     const [path] = window.location.hash.substr(1).split('?');
     const linkRegex = /^\/portal\/?(?:\/(\w+(?:\/\w+)?))?\/?$/;
@@ -223,8 +225,22 @@ export function getPricesFromProducts({site}) {
     const products = getAvailableProducts({site}) || [];
     const prices = products.reduce((accumPrices, product) => {
         if (product.monthlyPrice && product.yearlyPrice) {
-            accumPrices.push(product.monthlyPrice);
-            accumPrices.push(product.yearlyPrice);
+            const yearlyDiscount = calculateDiscount(product.monthlyPrice.amount, product.yearlyPrice.amount);
+            const showBenefits = product.benefits?.length > 0;
+            const yearlyBenefits = showBenefits ? [...product.benefits] : null;
+            if (showBenefits && yearlyDiscount > 0) {
+                yearlyBenefits.push({
+                    name: `${yearlyDiscount}% discount`
+                });
+            }
+            accumPrices.push({
+                ...product.monthlyPrice,
+                ...(showBenefits ? {benefits: product.benefits} : {})
+            });
+            accumPrices.push({
+                ...product.yearlyPrice,
+                ...(showBenefits ? {benefits: yearlyBenefits} : {})
+            });
         }
         return accumPrices;
     }, []);