From 5d4e5aa4c8581c52871988da46d9b9cbfcb7bfbc Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 28 Jun 2021 18:43:12 +0530
Subject: [PATCH] Added `hasBenefits` helper to manage UI

no refs
---
 .../src/components/common/PlansSection.js      | 18 ++++++++++++++----
 ghost/portal/src/utils/helpers.js              |  9 +++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 556ad413a7..bd780e8dd0 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import AppContext from '../../AppContext';
 import calculateDiscount from '../../utils/discount';
-import {isCookiesDisabled, formatNumber, hasOnlyFreePlan} from '../../utils/helpers';
+import {isCookiesDisabled, formatNumber, hasOnlyFreePlan, hasBenefits} from '../../utils/helpers';
 
 export const PlanSectionStyles = `
     .gh-portal-plans-container {
@@ -433,6 +433,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
     const {site} = useContext(AppContext);
     const {free_price_name: freePriceName, free_price_description: freePriceDescription} = site;
     addDiscountToPlans(plans);
+    const _hasBenefits = hasBenefits({prices: plans});
     return plans.map(({name, currency_symbol: currencySymbol, amount, description, interval, id}) => {
         const price = amount / 100;
         const isChecked = selectedPlan === id;
@@ -458,9 +459,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
                 <h4 className={planNameClass}>{displayName}</h4>
                 <PriceLabel currencySymbol={currencySymbol} price={price} interval={interval} />
                 <div className='gh-portal-plan-featurewrapper'>
-                    <div className='gh-portal-plan-feature'>
-                        {planDetails.feature}
-                    </div>
+                    <PlanFeature feature={planDetails.feature} hide={_hasBenefits} />
                     {(changePlan && selectedPlan === id ? <span className='gh-portal-plan-current'>Current plan</span> : '')}
                 </div>
             </div>
@@ -468,6 +467,17 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
     });
 }
 
+function PlanFeature({feature, hide}) {
+    if (hide) {
+        return null;
+    }
+    return (
+        <div className='gh-portal-plan-feature'>
+            {feature}
+        </div>
+    );
+}
+
 function PlanBenefit({benefit}) {
     if (!benefit?.name) {
         return null;
diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js
index 7de8a3938c..c2602fb287 100644
--- a/ghost/portal/src/utils/helpers.js
+++ b/ghost/portal/src/utils/helpers.js
@@ -211,6 +211,15 @@ export function getAvailableProducts({site}) {
     });
 }
 
+export function hasBenefits({prices}) {
+    if (!prices?.length) {
+        return false;
+    }
+    return prices.some((price) => {
+        return price?.benefits?.length;
+    });
+}
+
 export function getSiteProducts({site}) {
     const products = getAvailableProducts({site});
     if (hasFreeProductPrice({site}) && products.length > 0) {