@automattic/plans-grid-next 1.0.0

package/src/components/shared/header-price/header-price-context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useState } from '@wordpress/element';
+
+interface HeaderPriceContext {
+	isAnyPlanPriceDiscounted: boolean;
+	setIsAnyPlanPriceDiscounted: ( isAnyPlanPriceDiscounted: boolean ) => void;
+}
+
+const HeaderPriceContext = createContext< HeaderPriceContext >( {} as HeaderPriceContext );
+
+const HeaderPriceContextProvider = ( { children }: { children: React.ReactNode } ) => {
+	const [ isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted ] = useState( false );
+
+	return (
+		<HeaderPriceContext.Provider
+			value={ { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } }
+		>
+			{ children }
+		</HeaderPriceContext.Provider>
+	);
+};
+
+export const useHeaderPriceContext = (): HeaderPriceContext => useContext( HeaderPriceContext );
+
+export default HeaderPriceContextProvider;

package/src/components/shared/header-price/index.tsx

@@ -0,0 +1,278 @@
+import {
+	getPlanSlugForTermVariant,
+	isWpcomEnterpriseGridPlan,
+	PERIOD_LIST,
+	TERM_MONTHLY,
+	type PlanSlug,
+} from '@automattic/calypso-products';
+import { PlanPrice } from '@automattic/components';
+import { Plans } from '@automattic/data-stores';
+import { useEffect } from '@wordpress/element';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../grid-context';
+import useIsLargeCurrency from '../../../hooks/use-is-large-currency';
+import { usePlanPricingInfoFromGridPlans } from '../../../hooks/use-plan-pricing-info-from-grid-plans';
+import { useHeaderPriceContext } from './header-price-context';
+import type { GridPlan } from '../../../types';
+import './style.scss';
+
+interface HeaderPriceProps {
+	planSlug: PlanSlug;
+	currentSitePlanSlug?: string | null;
+	visibleGridPlans: GridPlan[];
+}
+
+/**
+ * Returns the term variant plan slug for savings calculation.
+ * This currently resolves to the monthly plan slug for annual/biennial/triennial plans.
+ */
+const useTermVariantPlanSlugForSavings = ( {
+	planSlug,
+	billingPeriod,
+}: {
+	planSlug: PlanSlug;
+	billingPeriod?: -1 | ( typeof PERIOD_LIST )[ number ];
+} ) => {
+	// If the billing period is yearly or above, we return the monthly variant's plan slug
+	if ( billingPeriod && 365 <= billingPeriod ) {
+		return getPlanSlugForTermVariant( planSlug, TERM_MONTHLY );
+	}
+
+	return null;
+};
+
+const HeaderPrice = ( { planSlug, visibleGridPlans }: HeaderPriceProps ) => {
+	const translate = useTranslate();
+	const {
+		gridPlansIndex,
+		enableTermSavingsPriceDisplay,
+		reflectStorageSelectionInPlanPrices,
+		siteId,
+		coupon,
+		helpers,
+	} = usePlansGridContext();
+	const { isAnyPlanPriceDiscounted, setIsAnyPlanPriceDiscounted } = useHeaderPriceContext();
+	const {
+		current,
+		pricing: { currencyCode, originalPrice, discountedPrice, introOffer, billingPeriod },
+	} = gridPlansIndex[ planSlug ];
+	const isPricedPlan = null !== originalPrice.monthly;
+
+	/**
+	 * If this discount is related to a `Plan upgrade credit`
+	 * then we do not show any discount messaging as per Automattic/martech#1927
+	 * We currently only support the `One time discount` in some currencies
+	 */
+	const isGridPlanOneTimeDiscounted = Number.isFinite( discountedPrice.monthly );
+	const isGridPlanOnIntroOffer = introOffer && ! introOffer.isOfferComplete;
+
+	const { prices } = usePlanPricingInfoFromGridPlans( { gridPlans: visibleGridPlans } );
+	const isLargeCurrency = useIsLargeCurrency( {
+		prices,
+		currencyCode: currencyCode || 'USD',
+		ignoreWhitespace: true,
+	} );
+
+	const termVariantPlanSlug = useTermVariantPlanSlugForSavings( { planSlug, billingPeriod } );
+	const termVariantPricing = Plans.usePricingMetaForGridPlans( {
+		planSlugs: termVariantPlanSlug ? [ termVariantPlanSlug ] : [],
+		reflectStorageSelectionInPlanPrices,
+		coupon,
+		siteId,
+		useCheckPlanAvailabilityForPurchase: helpers?.useCheckPlanAvailabilityForPurchase,
+	} )?.[ termVariantPlanSlug ?? '' ];
+
+	const termVariantPrice =
+		termVariantPricing?.discountedPrice.monthly ?? termVariantPricing?.originalPrice.monthly ?? 0;
+	const planPrice = discountedPrice.monthly ?? originalPrice.monthly ?? 0;
+	const savings =
+		termVariantPrice > planPrice
+			? Math.floor( ( ( termVariantPrice - planPrice ) / termVariantPrice ) * 100 )
+			: 0;
+
+	useEffect( () => {
+		if (
+			isGridPlanOneTimeDiscounted ||
+			isGridPlanOnIntroOffer ||
+			( enableTermSavingsPriceDisplay && savings )
+		) {
+			setIsAnyPlanPriceDiscounted( true );
+		}
+	}, [
+		enableTermSavingsPriceDisplay,
+		isGridPlanOnIntroOffer,
+		isGridPlanOneTimeDiscounted,
+		savings,
+		setIsAnyPlanPriceDiscounted,
+	] );
+
+	if ( isWpcomEnterpriseGridPlan( planSlug ) || ! isPricedPlan ) {
+		return null;
+	}
+
+	if ( isGridPlanOnIntroOffer ) {
+		return (
+			<div className="plans-grid-next-header-price">
+				{ ! current && (
+					<div className="plans-grid-next-header-price__badge">
+						{ translate( 'Special Offer' ) }
+					</div>
+				) }
+				<div
+					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
+						'is-large-currency': isLargeCurrency,
+					} ) }
+				>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						original
+					/>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={
+							typeof discountedPrice.monthly === 'number'
+								? discountedPrice.monthly
+								: introOffer.rawPrice.monthly
+						}
+						displayPerMonthNotation={ false }
+						isLargeCurrency
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						discounted
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	if ( isGridPlanOneTimeDiscounted ) {
+		return (
+			<div className="plans-grid-next-header-price">
+				<div className="plans-grid-next-header-price__badge">
+					{ translate( 'One time discount' ) }
+				</div>
+				<div
+					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
+						'is-large-currency': isLargeCurrency,
+					} ) }
+				>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency={ isLargeCurrency }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						original
+					/>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ discountedPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency={ isLargeCurrency }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						discounted
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	if ( enableTermSavingsPriceDisplay && termVariantPricing && savings ) {
+		return (
+			<div className="plans-grid-next-header-price">
+				<div className="plans-grid-next-header-price__badge">
+					{ translate( 'Save %(savings)d%%', {
+						args: { savings },
+						comment: 'Example: Save 35%',
+					} ) }
+				</div>
+				<div
+					className={ clsx( 'plans-grid-next-header-price__pricing-group', {
+						'is-large-currency': isLargeCurrency,
+					} ) }
+				>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ termVariantPricing.originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency={ isLargeCurrency }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						original
+					/>
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ discountedPrice.monthly ?? originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isLargeCurrency={ isLargeCurrency }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+						discounted
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	if ( isAnyPlanPriceDiscounted ) {
+		return (
+			<div className="plans-grid-next-header-price">
+				<div className="plans-grid-next-header-price__badge is-hidden">' '</div>
+				{ isLargeCurrency ? (
+					<div className="plans-grid-next-header-price__pricing-group is-large-currency">
+						<PlanPrice
+							currencyCode={ currencyCode }
+							rawPrice={ 0 }
+							displayPerMonthNotation={ false }
+							isLargeCurrency
+							isSmallestUnit
+							priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+							className="is-placeholder-price" // This is a placeholder price to keep the layout consistent
+							original
+						/>
+						<PlanPrice
+							currencyCode={ currencyCode }
+							rawPrice={ originalPrice.monthly }
+							displayPerMonthNotation={ false }
+							isLargeCurrency
+							isSmallestUnit
+							priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+							discounted
+						/>
+					</div>
+				) : (
+					<PlanPrice
+						currencyCode={ currencyCode }
+						rawPrice={ originalPrice.monthly }
+						displayPerMonthNotation={ false }
+						isSmallestUnit
+						priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+					/>
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<div className="plans-grid-next-header-price">
+			<PlanPrice
+				currencyCode={ currencyCode }
+				rawPrice={ originalPrice.monthly }
+				displayPerMonthNotation={ false }
+				isLargeCurrency={ isLargeCurrency }
+				isSmallestUnit
+				priceDisplayWrapperClassName="plans-grid-next-header-price__display-wrapper"
+			/>
+		</div>
+	);
+};
+
+export default HeaderPrice;

package/src/components/shared/header-price/style.scss

@@ -0,0 +1,112 @@
+.plans-grid-next-header-price {
+	padding: 0 20px;
+	margin: 0 0 4px 0;
+
+	.plan-price {
+		color: var(--studio-gray-100);
+		margin: 0;
+		line-height: 1;
+		display: flex;
+		font-family: Recoleta, sans-serif;
+
+		&.is-original {
+			color: var(--studio-gray-20);
+			text-decoration: line-through;
+			text-decoration-thickness: 1px;
+			font-family: "SF Pro Text", sans-serif;
+			margin-bottom: 5px;
+			font-size: rem(18px);
+
+			&::before {
+				display: none;
+			}
+
+			.plan-price__currency-symbol,
+			.plan-price__tax-amount {
+				color: var(--color-text-subtle);
+			}
+
+			.plan-price__integer {
+				font-size: rem(18px);
+			}
+			.plan-price__currency-symbol {
+				font-size: rem(8px);
+			}
+		}
+
+		&.is-placeholder-price {
+			visibility: hidden;
+		}
+
+		&.is-discounted {
+			color: var(--color-neutral-70);
+
+			.plans-grid-next-header-price__display-wrapper {
+				color: inherit;
+			}
+		}
+
+		&.is-large-currency {
+			.plan-price__integer {
+				font-size: rem(28px);
+			}
+			&.is-original {
+				.plan-price__integer {
+					font-size: rem(16px);
+				}
+			}
+		}
+	}
+
+	.plan-price__currency-symbol,
+	.plan-price.is-discounted .plan-price__currency-symbol {
+		font-size: rem(14px);
+		color: var(--studio-gray-100);
+		margin-top: 2px;
+	}
+
+	.plan-price__integer {
+		font-size: rem(44px);
+	}
+
+	.plan-price__term {
+		font-size: rem(12px);
+		font-weight: 400;
+	}
+}
+
+.plans-grid-next-header-price__badge {
+	background-color: var(--studio-green-0);
+	border-radius: 4px;
+	color: var(--studio-green-40);
+	display: inline-block;
+	font-size: 0.75rem;
+	font-weight: 500;
+	height: 21px;
+	letter-spacing: 0.2px;
+	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
+	line-height: 1.25rem;
+	margin-bottom: 10px;
+	padding: 0 12px;
+	text-align: center;
+	text-transform: none;
+	white-space: nowrap;
+	width: fit-content;
+
+	&.is-hidden {
+		visibility: hidden;
+	}
+}
+
+.plans-grid-next-header-price__pricing-group {
+	justify-content: flex-end;
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: flex-end;
+	gap: 4px;
+
+	&.is-large-currency {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}

package/src/components/shared/plan-pill/index.jsx

@@ -0,0 +1,7 @@
+import './style.scss';
+
+export default ( props ) => (
+	<div className={ `plans-grid__plan-pill${ props.isInSignup ? ' is-in-signup' : '' }` }>
+		{ props.children }
+	</div>
+);

package/src/components/shared/plan-pill/style.scss

@@ -0,0 +1,30 @@
+@import "@automattic/typography/styles/variables";
+
+.plans-grid__plan-pill {
+	position: absolute;
+	bottom: -10px;
+	left: 14px;
+
+	padding: 4px;
+	border-radius: 2px;
+	background: var(--color-accent);
+
+	font-size: $font-body-extra-small;
+	text-align: center;
+	line-height: 1;
+	color: var(--color-text-inverted);
+	text-transform: uppercase;
+
+	white-space: nowrap;
+}
+
+.plans-grid__plan-pill.is-in-signup {
+	top: 10px;
+	bottom: unset;
+	right: 14px;
+	left: unset;
+	text-transform: none;
+	padding: 4px 10px;
+	border-radius: 10px; /* stylelint-disable-line scales/radii */
+	background-color: var(--color-neutral-100);
+}

package/src/components/shared/storage/components/plan-storage.tsx

@@ -0,0 +1,51 @@
+import { type PlanSlug, isWpcomEnterpriseGridPlan } from '@automattic/calypso-products';
+import { AddOns } from '@automattic/data-stores';
+import { usePlansGridContext } from '../../../../grid-context';
+import { ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE } from '../constants';
+import StorageDropdown from './storage-dropdown';
+import StorageFeatureLabel from './storage-feature-label';
+
+type Props = {
+	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
+	showUpgradeableStorage: boolean;
+	planSlug: PlanSlug;
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const PlanStorage = ( {
+	onStorageAddOnClick,
+	planSlug,
+	options,
+	showUpgradeableStorage,
+}: Props ) => {
+	const { siteId, gridPlansIndex } = usePlansGridContext();
+	const { availableForPurchase, current } = gridPlansIndex[ planSlug ];
+	const availableStorageAddOns = AddOns.useAvailableStorageAddOns( { siteId } );
+
+	if ( ! options?.isTableCell && isWpcomEnterpriseGridPlan( planSlug ) ) {
+		return null;
+	}
+
+	/**
+	 * The current plan is not marked as `availableForPurchase`, hence check on `current`.
+	 */
+	const canUpgradeStorageForPlan =
+		( current || availableForPurchase ) &&
+		showUpgradeableStorage &&
+		availableStorageAddOns.length &&
+		ELIGIBLE_PLANS_FOR_STORAGE_UPGRADE.includes( planSlug );
+
+	return (
+		<div className="plans-grid-next-plan-storage">
+			{ canUpgradeStorageForPlan ? (
+				<StorageDropdown planSlug={ planSlug } onStorageAddOnClick={ onStorageAddOnClick } />
+			) : (
+				<StorageFeatureLabel planSlug={ planSlug } />
+			) }
+		</div>
+	);
+};
+
+export default PlanStorage;

package/src/components/shared/storage/components/storage-dropdown.tsx

@@ -0,0 +1,187 @@
+import { type AddOnMeta, AddOns, WpcomPlansUI } from '@automattic/data-stores';
+import { CustomSelectControl } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../../../grid-context';
+import DropdownOption from '../../../dropdown-option';
+import useDefaultStorageOption from '../hooks/use-default-storage-option';
+import usePlanStorage from '../hooks/use-plan-storage';
+import useStorageString from '../hooks/use-storage-string';
+import type { PlanSlug, WPComPlanStorageFeatureSlug } from '@automattic/calypso-products';
+
+type StorageDropdownProps = {
+	planSlug: PlanSlug;
+	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
+};
+
+type StorageDropdownOptionProps = {
+	price?: string;
+	planStorage: number;
+	addOnStorage?: number;
+	priceOnSeparateLine?: boolean;
+};
+
+const getSelectedStorageAddOn = (
+	storageAddOnsForPlan: ( AddOns.AddOnMeta | null )[] | null,
+	storageOptionSlug: string
+) => {
+	return storageAddOnsForPlan?.find( ( addOn ) => addOn?.addOnSlug === storageOptionSlug );
+};
+
+const StorageDropdownOption = ( {
+	price,
+	planStorage,
+	addOnStorage,
+	priceOnSeparateLine,
+}: StorageDropdownOptionProps ) => {
+	const translate = useTranslate();
+	const planStorageString = useStorageString( planStorage );
+	const addOnStorageString = useStorageString( addOnStorage || 0 );
+
+	const title = addOnStorage
+		? translate( '%(planStorageString)s + %(addOnStorageString)s', {
+				args: {
+					planStorageString,
+					addOnStorageString,
+				},
+		  } )
+		: planStorageString;
+
+	const priceString =
+		price && addOnStorage
+			? translate( '%(price)s/month, billed yearly', {
+					args: { price },
+					comment:
+						'The cost of a storage add on per month. Example reads as "$50/month, billed yearly"',
+			  } )
+			: translate( 'Included in plan' );
+
+	return priceOnSeparateLine ? (
+		<span className="plans-grid-next-storage-dropdown__option-title">{ title }</span>
+	) : (
+		<DropdownOption className="plans-grid-next-storage-dropdown__option" title={ title }>
+			<div>{ priceString }</div>
+		</DropdownOption>
+	);
+};
+
+const StorageDropdown = ( { planSlug, onStorageAddOnClick }: StorageDropdownProps ) => {
+	const translate = useTranslate();
+	const { siteId } = usePlansGridContext();
+
+	const { setSelectedStorageOptionForPlan } = useDispatch( WpcomPlansUI.store );
+	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
+
+	const selectedStorageOptionForPlan = useSelect(
+		( select ) => select( WpcomPlansUI.store ).getSelectedStorageOptionForPlan( planSlug, siteId ),
+		[ planSlug, siteId ]
+	);
+	const defaultStorageOptionSlug = useDefaultStorageOption( { planSlug } );
+	const availableStorageAddOns = AddOns.useAvailableStorageAddOns( { siteId } );
+	const planStorage = usePlanStorage( planSlug );
+
+	useEffect( () => {
+		if ( ! selectedStorageOptionForPlan ) {
+			defaultStorageOptionSlug &&
+				setSelectedStorageOptionForPlan( {
+					addOnSlug: defaultStorageOptionSlug,
+					planSlug,
+					siteId,
+				} );
+		}
+	}, [
+		defaultStorageOptionSlug,
+		planSlug,
+		selectedStorageOptionForPlan,
+		setSelectedStorageOptionForPlan,
+		siteId,
+	] );
+
+	const selectControlOptions = useMemo( () => {
+		// Get the default storage add-on meta or the storage included with the plan
+		let defaultStorageAddOnMeta:
+			| AddOnMeta
+			| {
+					addOnSlug: AddOns.StorageAddOnSlug | WPComPlanStorageFeatureSlug;
+					prices: AddOnMeta[ 'prices' ] | null;
+					quantity: AddOnMeta[ 'quantity' ];
+			  }
+			| undefined
+			| null = getSelectedStorageAddOn( storageAddOns, defaultStorageOptionSlug || '' );
+
+		// If the default storage add-on is not available, create a new object with the default storage option slug
+		if ( ! defaultStorageAddOnMeta && defaultStorageOptionSlug ) {
+			defaultStorageAddOnMeta = { addOnSlug: defaultStorageOptionSlug, prices: null, quantity: 0 };
+		}
+
+		return [ defaultStorageAddOnMeta, ...availableStorageAddOns ]?.map( ( addOn ) => {
+			const addOnStorage = addOn?.quantity ?? 0;
+
+			return {
+				key: addOn?.addOnSlug || '',
+				name: (
+					<StorageDropdownOption
+						price={ addOn?.prices?.formattedMonthlyPrice }
+						planStorage={ planStorage }
+						addOnStorage={ addOnStorage }
+					/>
+				 ) as unknown as string,
+			};
+		} );
+	}, [ availableStorageAddOns, defaultStorageOptionSlug, planStorage, storageAddOns ] );
+
+	const selectedStorageAddOn = getSelectedStorageAddOn(
+		storageAddOns,
+		selectedStorageOptionForPlan
+	);
+	const selectedStorageAddOnStorage = selectedStorageAddOn?.quantity ?? 0;
+
+	const selectedOption = {
+		key: selectedStorageOptionForPlan,
+		name: (
+			<StorageDropdownOption
+				price={ selectedStorageAddOn?.prices?.formattedMonthlyPrice }
+				planStorage={ planStorage }
+				addOnStorage={ selectedStorageAddOnStorage }
+				priceOnSeparateLine
+			/>
+		 ) as unknown as string,
+	};
+
+	const handleOnChange = useCallback(
+		( { selectedItem }: { selectedItem: { key: string } } ) => {
+			const addOnSlug = selectedItem?.key as AddOns.StorageAddOnSlug;
+
+			if ( addOnSlug ) {
+				onStorageAddOnClick && onStorageAddOnClick( addOnSlug );
+				setSelectedStorageOptionForPlan( { addOnSlug, planSlug, siteId } );
+			}
+		},
+		[ onStorageAddOnClick, planSlug, setSelectedStorageOptionForPlan, siteId ]
+	);
+
+	return (
+		<>
+			<CustomSelectControl
+				__next40pxDefaultSize
+				hideLabelFromVision
+				options={ selectControlOptions || [] }
+				value={ selectedOption }
+				onChange={ handleOnChange }
+				label=""
+			/>
+			{ selectedStorageAddOn?.prices?.formattedMonthlyPrice && (
+				<div className="plans-grid-next-storage-dropdown__addon-offset-price-container">
+					<span className="plans-grid-next-storage-dropdown__addon-offset-price">
+						{ translate( '+ %(selectedOptionPrice)s/month', {
+							args: { selectedOptionPrice: selectedStorageAddOn?.prices?.formattedMonthlyPrice },
+						} ) }
+					</span>
+				</div>
+			) }
+		</>
+	);
+};
+
+export default StorageDropdown;