diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js
index 3ce4c2c249..86994915f5 100644
--- a/ghost/portal/src/components/common/ProductsSection.js
+++ b/ghost/portal/src/components/common/ProductsSection.js
@@ -1,5 +1,6 @@
import React, {useContext, useEffect, useState} from 'react';
import Switch from '../common/Switch';
+import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
import {getAllProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled} from '../../utils/helpers';
import AppContext from '../../AppContext';
@@ -140,8 +141,8 @@ export const ProductsSectionStyles = ({site}) => {
}
.gh-portal-product-description {
- font-size: 1.4rem;
- line-height: 1.5em;
+ font-size: 1.3rem;
+ line-height: 1.45em;
text-align: center;
color: var(--grey5);
margin-bottom: 24px;
@@ -168,7 +169,7 @@ export const ProductsSectionStyles = ({site}) => {
align-self: flex-end;
font-size: 1.3rem;
line-height: 1.6em;
- color: var(--grey7);
+ color: var(--grey4);
letter-spacing: 0.3px;
margin-left: 2px;
}
@@ -183,6 +184,37 @@ export const ProductsSectionStyles = ({site}) => {
height: 18px;
}
+ .gh-portal-product-benefits {
+ font-size: 1.3rem;
+ line-height: 1.45em;
+ margin: -8px 0 0;
+ padding: 20px 8px;
+ border-top: 1px solid var(--grey12);
+ color: var(--grey3);
+ }
+
+ .gh-portal-product-benefit {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 20px;
+ }
+
+ .gh-portal-benefit-checkmark {
+ width: 12px;
+ height: 12px;
+ min-width: 12px;
+ margin: 3px 6px 0 0;
+ overflow: visible;
+ }
+
+ .gh-portal-benefit-checkmark path {
+ stroke-width: 2.5px;
+ }
+
+ .gh-portal-benefit-title {
+ flex-grow: 1;
+ }
+
@media (max-width: 480px) {
.gh-portal-products {
margin: 0 -32px;
@@ -300,6 +332,21 @@ function Checkbox({name, id, onProductSelect, isChecked, disabled = false}) {
);
}
+function ProductBenefits({product}) {
+ if (!product.benefits || !product.benefits.length) {
+ return null;
+ }
+
+ return product.benefits.map((benefit) => {
+ return (
+
+ );
+ });
+}
+
function ProductCardFooterAlternatePrice({price}) {
const {site} = useContext(AppContext);
const {portal_plans: portalPlans} = site;
@@ -350,6 +397,7 @@ function ProductCard({product}) {
}} />
{product.name}
{product.description}
+
diff --git a/ghost/portal/src/images/icons/checkmark.svg b/ghost/portal/src/images/icons/checkmark.svg
new file mode 100644
index 0000000000..e8a8455b33
--- /dev/null
+++ b/ghost/portal/src/images/icons/checkmark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 8bc0c02031..da6ec9cc70 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -73,6 +73,28 @@ const products = [
type: 'recurring',
interval: 'year'
}
+ ],
+ benefits: [
+ {
+ id: 'a1',
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+ },
+ {
+ id: 'a2',
+ title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+ },
+ {
+ id: 'a3',
+ title: 'Nullam hendrerit accumsan facilisis'
+ },
+ {
+ id: 'a4',
+ title: 'Vivamus vel elit lectus'
+ },
+ {
+ id: 'a5',
+ title: 'Maecenas tempus cursus metus'
+ }
]
},
{
@@ -124,6 +146,24 @@ const products = [
type: 'recurring',
interval: 'year'
}
+ ],
+ benefits: [
+ {
+ id: 'b1',
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+ },
+ {
+ id: 'b2',
+ title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+ },
+ {
+ id: 'b3',
+ title: 'Nullam hendrerit accumsan facilisis'
+ },
+ {
+ id: 'b4',
+ title: 'Vivamus vel elit lectus'
+ }
]
},
{
@@ -175,6 +215,20 @@ const products = [
type: 'recurring',
interval: 'year'
}
+ ],
+ benefits: [
+ {
+ id: 'c1',
+ title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec maximus odio'
+ },
+ {
+ id: 'c2',
+ title: 'Aliquam nec condimentum libero. In in turpis quis nibh faucibus bibendum mollis et elit'
+ },
+ {
+ id: 'c3',
+ title: 'Nullam hendrerit accumsan facilisis'
+ }
]
}
];
@@ -194,7 +248,7 @@ export const site = {
portal_products: ['product_1', 'product_2', 'product_3'],
products,
prices,
- allow_self_signup: false,
+ allow_self_signup: true,
members_signup_access: 'all',
free_price_name: 'Free',
free_price_description: 'Free preview',