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 ( +
+ +
{benefit.title}
+
+ ); + }); +} + 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 @@ +check-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',