Removed automatic benefits

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

@@ -417,7 +417,7 @@ export const PlanSectionStyles = `
         margin-bottom: 12px;
     }
 
-    .gh-portal-singleproduct-benefits:not(.free) .gh-portal-product-description {
+    .gh-portal-singleproduct-benefits:not(.no-benefits) .gh-portal-product-description {
         border-bottom: 1px solid var(--grey12);
         padding-bottom: 20px;
         margin-bottom: 16px;
@@ -555,11 +555,11 @@ function PlanBenefits({product, plans, selectedPlan}) {
     let planBenefits = [];
     let planDescription = product.description;
     if (!product.description) {
-        planDescription = `Get full access to ` + site.title;
+        planDescription = `Full access to ` + site.title;
     }
     if (selectedPlan === 'free') {
         planBenefits = [];
-        planDescription = `Get a free preview of ` + site.title;
+        planDescription = `Free preview of ` + site.title;
     } else if (plan?.interval === 'month') {
         planBenefits = productBenefits.monthly;
     } else if (plan?.interval === 'year') {
@@ -572,7 +572,8 @@ function PlanBenefits({product, plans, selectedPlan}) {
         );
     });
 
-    const benefitsClass = (selectedPlan === 'free') ? `free` : ``;
+    let benefitsClass = (selectedPlan === 'free') ? `no-benefits` : ``;
+    benefitsClass = benefits.length === 0 ? `no-benefits` : ``;
 
     return (
         <div className={'gh-portal-singleproduct-benefits gh-portal-product-benefits ' + benefitsClass}>
@@ -620,9 +621,7 @@ export function MultipleProductsPlansSection({products, selectedPlan, onPlanSele
             <section className="gh-portal-plans">
                 <div>
                     <ChangeProductSection
-                        type='changePlan'
                         products={products}
-                        selectedPlan={selectedPlan}
                         onPlanSelect={onPlanSelect}
                     />
                 </div>

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

@@ -161,6 +161,7 @@ export const ProductsSectionStyles = ({site}) => {
 
         .gh-portal-product-price {
             display: flex;
+            justify-content: center;
         }
 
         .gh-portal-product-price .currency-sign {
@@ -188,7 +189,7 @@ export const ProductsSectionStyles = ({site}) => {
         .gh-portal-product-alternative-price {
             font-size: 1.2rem;
             line-height: 1.6em;
-            color: var(--grey7);
+            color: var(--grey3);
             text-align: center;
             margin-top: 4px;
             letter-spacing: 0.3px;
@@ -603,6 +604,7 @@ function ProductCards({products}) {
 }
 
 function FreeProductCard() {
+    const {site} = useContext(AppContext);
     const {selectedProduct, setSelectedProduct} = useContext(ProductsContext);
 
     const cardClass = selectedProduct === 'free' ? 'gh-portal-product-card free checked' : 'gh-portal-product-card free';
@@ -617,7 +619,7 @@ function FreeProductCard() {
                     setSelectedProduct('free');
                 }} />
                 <h4 className="gh-portal-product-name">Free</h4>
-                <div className="gh-portal-product-description">Free preview</div>
+                <div className="gh-portal-product-description">Free preview of {(site.title)}</div>
             </div>
             <div className="gh-portal-product-card-footer">
                 <div className="gh-portal-product-price">

ghost/portal/src/utils/fixtures.js

@@ -46,10 +46,11 @@ const products = [
             active: 1,
             nickname: 'Yearly',
             currency: 'usd',
-            amount: 20000,
+            amount: 17000,
             type: 'recurring',
             interval: 'year'
         },
+        // benefits: []
         benefits: [
             {
                 id: 'a1',
@@ -132,7 +133,7 @@ const products = [
             active: 1,
             nickname: 'Yearly',
             currency: 'usd',
-            amount: 7000,
+            amount: 8000,
             type: 'recurring',
             interval: 'year'
         },

ghost/portal/src/utils/helpers.js

@@ -1,4 +1,4 @@
-import calculateDiscount from './discount';
+// import calculateDiscount from './discount';
 
 export function removePortalLinkFromUrl() {
     const [path] = window.location.hash.substr(1).split('?');
@@ -254,19 +254,17 @@ export function getFreeBenefits() {
 
 export function getProductBenefits({product, site = null}) {
     if (product?.monthlyPrice && product?.yearlyPrice) {
-        const availablePrices = getAvailablePrices({site, products: [product]});
-        const yearlyDiscount = calculateDiscount(product.monthlyPrice.amount, product.yearlyPrice.amount);
         const productBenefits = product?.benefits || [];
-        const monthlyBenefits = product?.benefits?.length > 0 ? [...productBenefits] : [{
-            name: 'Access to all articles'
-        }];
-        const yearlyBenefits = [...monthlyBenefits];
-        if (yearlyDiscount > 0 && availablePrices.length > 1) {
-            yearlyBenefits.push({
-                name: `${yearlyDiscount}% annual discount`,
-                className: `gh-portal-strong`
-            });
-        }
+        const monthlyBenefits = productBenefits;
+        const yearlyBenefits = productBenefits;
+        // const availablePrices = getAvailablePrices({site, products: [product]});
+        // const yearlyDiscount = calculateDiscount(product.monthlyPrice.amount, product.yearlyPrice.amount);
+        // if (yearlyDiscount > 0 && availablePrices.length > 1) {
+        //     yearlyBenefits.push({
+        //         name: `${yearlyDiscount}% annual discount`,
+        //         className: `gh-portal-strong`
+        //     });
+        // }
         return {
             monthly: monthlyBenefits,
             yearly: yearlyBenefits