mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Refactored change plan page to new design
refs https://github.com/TryGhost/Team/issues/877 Refactors the change plan UI when a site has more than one product, using the Monthly/Yearly switch and the plan selection exactly how it's on the signup screen. To show the current plan, the M/Y switch is selected according to the user's subscription which lets us indicate the current price. To make the stacked prices lightweight, we also show benefits only for the price that is currently selected.
This commit is contained in:
Rishabh
parent
421654e491
commit
25971cf9b7
4 changed files with 126 additions and 44 deletions
|
|
@ -71,7 +71,7 @@ const Styles = ({brandColor, retry, disabled, style = {}, isPrimary}) => {
|
|||
};
|
||||
};
|
||||
|
||||
function ActionButton({label, type, onClick, disabled, retry, brandColor, isRunning, isPrimary = true, isDestructive = false, style, tabindex}) {
|
||||
function ActionButton({label, type = undefined, onClick, disabled = false, retry = false, brandColor, isRunning, isPrimary = true, isDestructive = false, style = {}, tabindex = undefined}) {
|
||||
let Style = Styles({disabled, retry, brandColor, style, isPrimary});
|
||||
|
||||
let className = 'gh-portal-btn';
|
||||
|
|
|
|||
|
|
@ -620,7 +620,9 @@ export function MultipleProductsPlansSection({products, selectedPlan, onPlanSele
|
|||
<section className="gh-portal-plans">
|
||||
<div>
|
||||
<ChangeProductSection
|
||||
type='changePlan'
|
||||
products={products}
|
||||
selectedPlan={selectedPlan}
|
||||
onPlanSelect={onPlanSelect}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import Switch from '../common/Switch';
|
||||
import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark.svg';
|
||||
import {getSiteProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled, getMemberActivePrice, getAvailablePrices} from '../../utils/helpers';
|
||||
import {getSiteProducts, getCurrencySymbol, getPriceString, getStripeAmount, isCookiesDisabled, getMemberActivePrice, getProductFromPrice} from '../../utils/helpers';
|
||||
import AppContext from '../../AppContext';
|
||||
import {ChangeProductPlansSection} from './PlansSection';
|
||||
import ActionButton from './ActionButton';
|
||||
|
||||
export const ProductsSectionStyles = ({site}) => {
|
||||
const products = getSiteProducts({site});
|
||||
|
|
@ -465,6 +465,7 @@ export const ProductsSectionStyles = ({site}) => {
|
|||
const ProductsContext = React.createContext({
|
||||
selectedInterval: 'month',
|
||||
selectedProduct: 'free',
|
||||
selectedPlan: null,
|
||||
setSelectedProduct: null
|
||||
});
|
||||
|
||||
|
|
@ -514,8 +515,8 @@ function ProductBenefits({product}) {
|
|||
});
|
||||
}
|
||||
|
||||
function ProductBenefitsContainer({product, showVertical = false}) {
|
||||
if (!product.benefits || !product.benefits.length) {
|
||||
function ProductBenefitsContainer({product, showVertical = false, hide = false}) {
|
||||
if (!product.benefits || !product.benefits.length || hide) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -708,7 +709,6 @@ function ProductsSection({onPlanSelect, products, type = null}) {
|
|||
if (type === 'upgrade') {
|
||||
className += ' gh-portal-upgrade-product';
|
||||
}
|
||||
|
||||
return (
|
||||
<ProductsContext.Provider value={{
|
||||
selectedInterval: activeInterval,
|
||||
|
|
@ -729,57 +729,137 @@ function ProductsSection({onPlanSelect, products, type = null}) {
|
|||
);
|
||||
}
|
||||
|
||||
function ChangeProductCard({product, onPlanSelect}) {
|
||||
const {member} = useContext(AppContext);
|
||||
const cardClass = 'gh-portal-product-card';
|
||||
const {site} = useContext(AppContext);
|
||||
const plans = getAvailablePrices({site, products: [product]});
|
||||
const selectedPlan = getMemberActivePrice({member});
|
||||
export function ChangeProductSection({onPlanSelect, selectedPlan, products, type = null}) {
|
||||
const {site, member, brandColor} = useContext(AppContext);
|
||||
const {portal_plans: portalPlans} = site;
|
||||
const activePrice = getMemberActivePrice({member});
|
||||
const activeMemberProduct = getProductFromPrice({site, priceId: activePrice.id});
|
||||
const defaultInterval = getActiveInterval({portalPlans, selectedInterval: activePrice.interval});
|
||||
const defaultProductId = activeMemberProduct?.id || products?.[0]?.id;
|
||||
const [selectedInterval, setSelectedInterval] = useState(defaultInterval);
|
||||
const [selectedProduct, setSelectedProduct] = useState(defaultProductId);
|
||||
|
||||
const selectedPrice = getSelectedPrice({products, selectedInterval, selectedProduct});
|
||||
const activeInterval = getActiveInterval({portalPlans, selectedInterval});
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedProduct(defaultProductId);
|
||||
}, [defaultProductId]);
|
||||
|
||||
if (!portalPlans.includes('monthly') && !portalPlans.includes('yearly')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (products.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let className = 'gh-portal-products';
|
||||
if (type === 'upgrade') {
|
||||
className += ' gh-portal-upgrade-product';
|
||||
}
|
||||
if (type === 'changePlan') {
|
||||
className += ' gh-portal-upgrade-product gh-portal-change-plan';
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cardClass} key={product.id}>
|
||||
<div className="gh-portal-product-card-header">
|
||||
<h4 className="gh-portal-product-name">{product.name}</h4>
|
||||
<div className="gh-portal-product-description" style={{
|
||||
gridColumn: '1/2'
|
||||
}}>{product.description}</div>
|
||||
<ProductBenefitsContainer product={product} />
|
||||
<ProductsContext.Provider value={{
|
||||
selectedInterval: activeInterval,
|
||||
selectedProduct,
|
||||
selectedPlan,
|
||||
setSelectedProduct
|
||||
}}>
|
||||
<section className={className}>
|
||||
<ProductPriceSwitch
|
||||
selectedInterval={activeInterval}
|
||||
setSelectedInterval={setSelectedInterval}
|
||||
/>
|
||||
|
||||
<div className="gh-portal-products-grid">
|
||||
<ChangeProductCards products={products} />
|
||||
</div>
|
||||
{/* <ProductCardFooter product={product} /> */}
|
||||
<ProductBenefitsContainer product={product} showVertical={true} />
|
||||
<ActionButton
|
||||
onClick={e => onPlanSelect(null, selectedPrice.id)}
|
||||
isRunning={false}
|
||||
disabled={activePrice.id === selectedPrice.id}
|
||||
isPrimary={true}
|
||||
brandColor={brandColor}
|
||||
label={'Continue'}
|
||||
style={{height: '40px', width: '100%', marginTop: '24px'}}
|
||||
/>
|
||||
</section>
|
||||
</ProductsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function CurrentPlanLabel({selectedPrice, activePrice}) {
|
||||
const {brandColor} = useContext(AppContext);
|
||||
if (selectedPrice.id === activePrice.id) {
|
||||
return (
|
||||
<div style={{marginTop: '6px'}}>
|
||||
<span style={{
|
||||
color: 'black',
|
||||
border: `1px solid ${brandColor}`,
|
||||
background: brandColor,
|
||||
borderRadius: '6px',
|
||||
padding: '3px'
|
||||
}}>Current Plan</span>
|
||||
</div>
|
||||
<ChangeProductPlansSection
|
||||
product={product}
|
||||
plans={plans}
|
||||
selectedPlan={selectedPlan?.id}
|
||||
changePlan={true}
|
||||
onPlanSelect={onPlanSelect}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function ProductDescription({product, selectedPrice, activePrice}) {
|
||||
if (product?.description) {
|
||||
return (
|
||||
<div className="gh-portal-product-description">
|
||||
{product.description}
|
||||
<CurrentPlanLabel selectedPrice={selectedPrice} activePrice={activePrice} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function ChangeProductCard({product}) {
|
||||
const {member} = useContext(AppContext);
|
||||
const {selectedProduct, setSelectedProduct, selectedInterval} = useContext(ProductsContext);
|
||||
const cardClass = selectedProduct === product.id ? 'gh-portal-product-card checked' : 'gh-portal-product-card';
|
||||
const monthlyPrice = product.monthlyPrice;
|
||||
const yearlyPrice = product.yearlyPrice;
|
||||
const memberActivePrice = getMemberActivePrice({member});
|
||||
|
||||
const selectedPrice = selectedInterval === 'month' ? monthlyPrice : yearlyPrice;
|
||||
|
||||
return (
|
||||
<div className={cardClass} key={product.id} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedProduct(product.id);
|
||||
}}>
|
||||
<div className="gh-portal-product-card-header">
|
||||
<Checkbox name={product.id} id={`${product.id}-checkbox`} isChecked={selectedProduct === product.id} onProductSelect={() => {
|
||||
setSelectedProduct(product.id);
|
||||
}} />
|
||||
<h4 className="gh-portal-product-name">{product.name}</h4>
|
||||
<ProductDescription product={product} selectedPrice={selectedPrice} activePrice={memberActivePrice} />
|
||||
<ProductBenefitsContainer product={product} hide={selectedProduct !== product.id} />
|
||||
</div>
|
||||
<ProductCardFooter product={product} />
|
||||
<ProductBenefitsContainer product={product} showVertical={true} hide={selectedProduct !== product.id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChangeProductCards({products, onPlanSelect}) {
|
||||
function ChangeProductCards({products}) {
|
||||
return products.map((product) => {
|
||||
if (product.id === 'free') {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ChangeProductCard product={product} key={product.id} onPlanSelect={onPlanSelect} />
|
||||
<ChangeProductCard product={product} key={product.id} />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function ChangeProductSection({products, onPlanSelect}) {
|
||||
let className = 'gh-portal-products gh-portal-upgrade-product';
|
||||
|
||||
return (
|
||||
<section className={className}>
|
||||
<div className="gh-portal-products-grid change-plan">
|
||||
<ChangeProductCards products={products} onPlanSelect={onPlanSelect} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductsSection;
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ const ChangePlanSection = ({plans, selectedPlan, onPlanSelect, onCancelSubscript
|
|||
);
|
||||
};
|
||||
|
||||
function PlansOrProductSection({showLabel, plans, selectedPlan, onPlanSelect, changePlan}) {
|
||||
function PlansOrProductSection({showLabel, plans, selectedPlan, onPlanSelect, changePlan = false}) {
|
||||
const {site, member} = useContext(AppContext);
|
||||
const products = getUpgradeProducts({site, member});
|
||||
if (hasMultipleProductsFeature({site})) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue