@automattic/plans-grid-next 1.0.0

package/src/hooks/data-store/use-highlighted-features.ts

@@ -0,0 +1,51 @@
+import {
+	FEATURE_CUSTOM_DOMAIN,
+	FEATURE_NEWSLETTER_IMPORT_SUBSCRIBERS_FREE,
+	FEATURE_UNLIMITED_SUBSCRIBERS,
+	FEATURE_PAYMENT_TRANSACTION_FEES_10,
+	FEATURE_PAYMENT_TRANSACTION_FEES_8,
+	FEATURE_PAYMENT_TRANSACTION_FEES_4,
+} from '@automattic/calypso-products';
+import { useMemo } from '@wordpress/element';
+import type { PlansIntent } from '../../types';
+
+export type UseHighlightedFeatures = ( {
+	intent,
+	isInSignup,
+}: {
+	intent: PlansIntent | null;
+	isInSignup?: boolean;
+} ) => string[] | null;
+
+/**
+ * Returns an array of features that, if they exist for a
+ * particular Plan on a pricing table, will be highlighted
+ * (ie, moved to the top of the list, and bolded).
+ *
+ * Will only affect wpcomeFeatures, not jetpackFeatures. And
+ * if the specified features don't exist for a particular
+ * Plan, they will be ignored.
+ *
+ * The Logic for processing the highlightedFeatures
+ * lives in the adjacent usePlanFeaturesForGridPlans hook.
+ *
+ * TODO clk: move to plans data store
+ */
+const useHighlightedFeatures: UseHighlightedFeatures = ( { intent, isInSignup } ) => {
+	return useMemo( () => {
+		if ( isInSignup && intent && 'plans-newsletter' === intent ) {
+			return [
+				FEATURE_CUSTOM_DOMAIN,
+				FEATURE_NEWSLETTER_IMPORT_SUBSCRIBERS_FREE,
+				FEATURE_UNLIMITED_SUBSCRIBERS,
+				FEATURE_PAYMENT_TRANSACTION_FEES_10,
+				FEATURE_PAYMENT_TRANSACTION_FEES_8,
+				FEATURE_PAYMENT_TRANSACTION_FEES_4,
+			];
+		}
+
+		return null;
+	}, [ intent, isInSignup ] );
+};
+
+export default useHighlightedFeatures;

package/src/hooks/data-store/use-plan-billing-description.tsx

@@ -0,0 +1,309 @@
+import {
+	isWpComFreePlan,
+	isWpcomEnterpriseGridPlan,
+	PLAN_BIENNIAL_PERIOD,
+	PLAN_ANNUAL_PERIOD,
+	PLAN_TRIENNIAL_PERIOD,
+	PlanSlug,
+	getPlanSlugForTermVariant,
+	TERM_ANNUALLY,
+	PLAN_HOSTING_TRIAL_MONTHLY,
+} from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+import { useTranslate, formatCurrency } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import type { GridPlan } from '../../types';
+
+interface UsePlanBillingDescriptionProps {
+	siteId?: number | null;
+	planSlug: PlanSlug;
+	pricing: GridPlan[ 'pricing' ] | null;
+	isMonthlyPlan?: boolean;
+	coupon?: string;
+	useCheckPlanAvailabilityForPurchase: Plans.UseCheckPlanAvailabilityForPurchase;
+	reflectStorageSelectionInPlanPrices?: boolean;
+}
+
+export default function usePlanBillingDescription( {
+	siteId,
+	planSlug,
+	pricing,
+	isMonthlyPlan,
+	coupon,
+	useCheckPlanAvailabilityForPurchase,
+}: UsePlanBillingDescriptionProps ) {
+	const translate = useTranslate();
+	const { currencyCode, originalPrice, discountedPrice, billingPeriod, introOffer } = pricing || {};
+	const { reflectStorageSelectionInPlanPrices } = usePlansGridContext();
+	const yearlyVariantPlanSlug = getPlanSlugForTermVariant( planSlug, TERM_ANNUALLY );
+
+	const yearlyVariantPricing = Plans.usePricingMetaForGridPlans( {
+		planSlugs: yearlyVariantPlanSlug ? [ yearlyVariantPlanSlug ] : [],
+		coupon,
+		siteId,
+		useCheckPlanAvailabilityForPurchase,
+		reflectStorageSelectionInPlanPrices,
+	} )?.[ yearlyVariantPlanSlug ?? '' ];
+
+	if ( ! pricing ) {
+		return null;
+	}
+
+	if (
+		isWpComFreePlan( planSlug ) ||
+		isWpcomEnterpriseGridPlan( planSlug ) ||
+		planSlug === PLAN_HOSTING_TRIAL_MONTHLY
+	) {
+		return null;
+	}
+
+	if (
+		isMonthlyPlan &&
+		originalPrice?.monthly &&
+		yearlyVariantPricing &&
+		( ! introOffer || introOffer.isOfferComplete )
+	) {
+		const yearlyVariantMaybeDiscountedPrice = Number.isFinite(
+			yearlyVariantPricing.discountedPrice?.monthly
+		)
+			? yearlyVariantPricing.discountedPrice?.monthly
+			: yearlyVariantPricing.originalPrice?.monthly;
+
+		if (
+			yearlyVariantMaybeDiscountedPrice &&
+			yearlyVariantMaybeDiscountedPrice < originalPrice.monthly
+		) {
+			return translate( `Save %(discountRate)s%% by paying annually`, {
+				args: {
+					discountRate: Math.floor(
+						( 100 * ( originalPrice.monthly - yearlyVariantMaybeDiscountedPrice ) ) /
+							originalPrice.monthly
+					),
+				},
+			} );
+		}
+
+		return null;
+	}
+
+	const discountedPriceFullTermText =
+		currencyCode && typeof discountedPrice?.full === 'number'
+			? formatCurrency( discountedPrice.full, currencyCode, {
+					stripZeros: true,
+					isSmallestUnit: true,
+			  } )
+			: null;
+	const originalPriceFullTermText =
+		currencyCode && originalPrice?.full
+			? formatCurrency( originalPrice.full, currencyCode, {
+					stripZeros: true,
+					isSmallestUnit: true,
+			  } )
+			: null;
+
+	/*
+	 * The introOffer billing should fall below into the next block once experiment with Woo plans is finalized.
+	 *   1. We only expose introOffers to monthly & yearly plans for now (so no need to introduce more translations just yet)
+	 *   2. We only expose month & year based intervals for now (so no need to introduce more translations just yet)
+	 */
+	if ( introOffer?.intervalCount && introOffer.intervalUnit && ! introOffer.isOfferComplete ) {
+		const discountedPriceFull =
+			typeof discountedPrice?.full === 'number' ? discountedPrice.full : introOffer?.rawPrice?.full;
+
+		const introOfferFullTermText =
+			currencyCode && typeof discountedPriceFull === 'number'
+				? formatCurrency( discountedPriceFull, currencyCode, {
+						stripZeros: true,
+						isSmallestUnit: true,
+				  } )
+				: null;
+
+		if ( originalPriceFullTermText && introOfferFullTermText ) {
+			/* Introductory offers for monthly plans */
+			if ( isMonthlyPlan ) {
+				/* If the offer is for X months */
+				if ( 'month' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first month,{{br/}}' + 'then %(rawPrice)s billed monthly, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
+					return translate(
+						'for your first %(introOfferIntervalCount)s months,{{br/}}' +
+							'then %(rawPrice)s billed monthly, excl. taxes',
+						{
+							args: {
+								rawPrice: originalPriceFullTermText,
+								introOfferIntervalCount: introOffer.intervalCount,
+							},
+							components: { br: <br /> },
+							comment: 'excl. taxes is short for excluding taxes',
+						}
+					);
+				}
+
+				/* If the offer is for X years of monthly intervals */
+				if ( 'year' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first year,{{br/}}' + 'then %(rawPrice)s billed monthly, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
+					return translate(
+						'per month, for your first %(introOfferIntervalCount)s years,{{br/}}' +
+							'then %(rawPrice)s billed monthly, excl. taxes',
+						{
+							args: {
+								rawPrice: originalPriceFullTermText,
+								introOfferIntervalCount: introOffer.intervalCount,
+							},
+							components: { br: <br /> },
+							comment: 'excl. taxes is short for excluding taxes',
+						}
+					);
+				}
+			}
+
+			/* Introductory offers for yearly plans */
+			if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
+				/* If the offer is for X months of a yearly plan */
+				if ( 'month' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'for your first month,{{br/}}' + 'then %(rawPrice)s billed annually, excl. taxes',
+							{
+								args: {
+									rawPrice: originalPriceFullTermText,
+									introOfferIntervalUnit: introOffer.intervalUnit,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
+					return translate(
+						'for your first %(introOfferIntervalCount)s months,{{br/}}' +
+							'then %(rawPrice)s billed annually, excl. taxes',
+						{
+							args: {
+								rawPrice: originalPriceFullTermText,
+								introOfferIntervalCount: introOffer.intervalCount,
+							},
+							components: { br: <br /> },
+							comment: 'excl. taxes is short for excluding taxes',
+						}
+					);
+				}
+
+				/* If the offer is for X years of a yearly plan */
+				if ( 'year' === introOffer.intervalUnit ) {
+					if ( 1 === introOffer.intervalCount ) {
+						return translate(
+							'per month, %(introOfferFormattedPrice)s for your first year,{{br/}}' +
+								'then %(rawPrice)s billed annually, excl. taxes',
+							{
+								args: {
+									introOfferFormattedPrice: introOfferFullTermText,
+									rawPrice: originalPriceFullTermText,
+								},
+								components: { br: <br /> },
+								comment: 'excl. taxes is short for excluding taxes',
+							}
+						);
+					}
+
+					return translate(
+						'per month, %(introOfferFormattedPrice)s for your first %(introOfferIntervalCount)s years,{{br/}}' +
+							'then %(rawPrice)s billed annually, excl. taxes',
+						{
+							args: {
+								introOfferFormattedPrice: introOfferFullTermText,
+								rawPrice: originalPriceFullTermText,
+								introOfferIntervalCount: introOffer.intervalCount,
+							},
+							components: { br: <br /> },
+							comment: 'excl. taxes is short for excluding taxes',
+						}
+					);
+				}
+			}
+		}
+		/*
+		 * Early return here is for sanity. We don't want to show regular billing descriptions
+		 * if there is an introOffer (despite that will not be the case, unless some API-level bug happens)
+		 */
+		return null;
+	}
+
+	if ( discountedPriceFullTermText ) {
+		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
+			return translate(
+				'per month, %(fullTermDiscountedPriceText)s for the first year, excl. taxes',
+				{
+					args: { fullTermDiscountedPriceText: discountedPriceFullTermText },
+					comment: 'Excl. Taxes is short for excluding taxes',
+				}
+			);
+		}
+
+		if ( PLAN_BIENNIAL_PERIOD === billingPeriod ) {
+			return translate(
+				'per month, %(fullTermDiscountedPriceText)s for the first two years, excl. taxes',
+				{
+					args: { fullTermDiscountedPriceText: discountedPriceFullTermText },
+					comment: 'Excl. Taxes is short for excluding taxes',
+				}
+			);
+		}
+
+		if ( PLAN_TRIENNIAL_PERIOD === billingPeriod ) {
+			return translate(
+				'per month, %(fullTermDiscountedPriceText)s for the first three years, excl. taxes',
+				{
+					args: { fullTermDiscountedPriceText: discountedPriceFullTermText },
+					comment: 'Excl. Taxes is short for excluding taxes',
+				}
+			);
+		}
+	} else if ( originalPriceFullTermText ) {
+		if ( PLAN_ANNUAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, %(rawPrice)s billed annually, excl. taxes', {
+				args: { rawPrice: originalPriceFullTermText },
+				comment: 'Excl. Taxes is short for excluding taxes',
+			} );
+		}
+
+		if ( PLAN_BIENNIAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, %(rawPrice)s billed every two years, excl. taxes', {
+				args: { rawPrice: originalPriceFullTermText },
+				comment: 'Excl. Taxes is short for excluding taxes',
+			} );
+		}
+
+		if ( PLAN_TRIENNIAL_PERIOD === billingPeriod ) {
+			return translate( 'per month, %(rawPrice)s billed every three years, excl. taxes', {
+				args: { rawPrice: originalPriceFullTermText },
+				comment: 'Excl. Taxes is short for excluding taxes',
+			} );
+		}
+	}
+
+	return null;
+}

package/src/hooks/data-store/use-plan-features-for-grid-plans.ts

@@ -0,0 +1,219 @@
+import {
+	FEATURE_CUSTOM_DOMAIN,
+	applyTestFiltersToPlansList,
+	isMonthly,
+} from '@automattic/calypso-products';
+import { useMemo } from '@wordpress/element';
+import getPlanFeaturesObject from '../../lib/get-plan-features-object';
+import useHighlightedFeatures from './use-highlighted-features';
+import type {
+	TransformedFeatureObject,
+	PlanFeaturesForGridPlan,
+	PlansIntent,
+	GridPlan,
+} from '../../types';
+import type { FeatureObject, FeatureList } from '@automattic/calypso-products';
+
+export type UsePlanFeaturesForGridPlans = ( {
+	gridPlans,
+	// allFeaturesList temporary until feature definitions are ported to calypso-products package
+	allFeaturesList,
+	hasRedeemedDomainCredit,
+	intent,
+	showLegacyStorageFeature,
+	selectedFeature,
+	isInSignup,
+}: {
+	gridPlans: Omit< GridPlan, 'features' >[];
+	allFeaturesList: FeatureList;
+	hasRedeemedDomainCredit?: boolean;
+	intent?: PlansIntent;
+	selectedFeature?: string | null;
+	showLegacyStorageFeature?: boolean;
+	isInSignup?: boolean;
+} ) => { [ planSlug: string ]: PlanFeaturesForGridPlan };
+
+/**
+ * usePlanFeaturesForGridPlans:
+ * - these plan features are mainly relevant to FeaturesGrid and Spotlight components
+ * - this hook can migrate to data store once features definitions migrate to calypso-products
+ */
+const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
+	gridPlans,
+	allFeaturesList,
+	hasRedeemedDomainCredit,
+	intent,
+	selectedFeature,
+	showLegacyStorageFeature,
+	isInSignup,
+} ) => {
+	const highlightedFeatures = useHighlightedFeatures( { intent: intent ?? null, isInSignup } );
+	return useMemo( () => {
+		return gridPlans.reduce(
+			( acc, gridPlan ) => {
+				const planSlug = gridPlan.planSlug;
+				const planConstantObj = applyTestFiltersToPlansList( planSlug, undefined );
+				const isMonthlyPlan = isMonthly( planSlug );
+
+				let wpcomFeatures: FeatureObject[] = [];
+				let jetpackFeatures: FeatureObject[] = [];
+
+				if ( 'plans-newsletter' === intent ) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.getNewsletterSignupFeatures?.() ?? []
+					);
+				} else if ( 'plans-p2' === intent ) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.get2023PricingGridSignupWpcomFeatures?.() ?? []
+					);
+				} else if ( 'plans-blog-onboarding' === intent ) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.getBlogOnboardingSignupFeatures?.() ?? []
+					);
+
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.getBlogOnboardingSignupJetpackFeatures?.() ?? []
+					);
+				} else if ( 'plans-woocommerce' === intent ) {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.get2023PricingGridSignupWpcomFeatures?.() ?? []
+					);
+
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupJetpackFeatures?.() ?? []
+					);
+
+					/*
+					 * Woo Express plans with an introductory offer need some features removed:
+					 * - custom domain feature removed for all Woo Express plans
+					 */
+					if ( gridPlan.pricing.introOffer ) {
+						wpcomFeatures = wpcomFeatures.filter( ( feature ) => {
+							// Remove the custom domain feature for Woo Express plans with an introductory offer.
+							if ( FEATURE_CUSTOM_DOMAIN === feature.getSlug() ) {
+								return false;
+							}
+
+							return true;
+						} );
+					}
+				} else {
+					wpcomFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj?.get2023PricingGridSignupWpcomFeatures?.() ?? []
+					);
+
+					jetpackFeatures = getPlanFeaturesObject(
+						allFeaturesList,
+						planConstantObj.get2023PricingGridSignupJetpackFeatures?.() ?? []
+					);
+				}
+
+				const annualPlansOnlyFeatures = planConstantObj.getAnnualPlansOnlyFeatures?.() || [];
+				const wpcomFeaturesTransformed: TransformedFeatureObject[] = [];
+				const jetpackFeaturesTransformed = jetpackFeatures.map( ( feature ) => {
+					const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes( feature.getSlug() );
+
+					return {
+						...feature,
+						availableOnlyForAnnualPlans,
+						availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+					};
+				} );
+
+				if ( highlightedFeatures ) {
+					// slice() and reverse() are needed to the preserve order of features
+					highlightedFeatures
+						.slice()
+						.reverse()
+						.forEach( ( slug ) => {
+							const feature = wpcomFeatures.find( ( feature ) => feature.getSlug() === slug );
+							if ( feature ) {
+								const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes(
+									feature.getSlug()
+								);
+								wpcomFeaturesTransformed.unshift( {
+									...feature,
+									availableOnlyForAnnualPlans,
+									availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+									isHighlighted: true,
+								} );
+							}
+						} );
+				}
+
+				const topFeature = selectedFeature
+					? wpcomFeatures.find( ( feature ) => feature.getSlug() === selectedFeature )
+					: undefined;
+
+				if ( topFeature ) {
+					const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes(
+						topFeature.getSlug()
+					);
+					wpcomFeaturesTransformed.unshift( {
+						...topFeature,
+						availableOnlyForAnnualPlans,
+						availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+					} );
+				}
+
+				if ( annualPlansOnlyFeatures.length > 0 ) {
+					wpcomFeatures.forEach( ( feature ) => {
+						// topFeature and highlightedFeatures are already added to the list above
+						const isHighlightedFeature =
+							highlightedFeatures && highlightedFeatures.includes( feature.getSlug() );
+						if ( feature === topFeature || isHighlightedFeature ) {
+							return;
+						}
+						if ( hasRedeemedDomainCredit && feature.getSlug() === FEATURE_CUSTOM_DOMAIN ) {
+							return;
+						}
+
+						const availableOnlyForAnnualPlans = annualPlansOnlyFeatures.includes(
+							feature.getSlug()
+						);
+
+						wpcomFeaturesTransformed.push( {
+							...feature,
+							availableOnlyForAnnualPlans,
+							availableForCurrentPlan: ! isMonthlyPlan || ! availableOnlyForAnnualPlans,
+						} );
+					} );
+				}
+
+				const storageFeature = planConstantObj.getStorageFeature?.(
+					showLegacyStorageFeature,
+					gridPlan.current
+				);
+
+				return {
+					...acc,
+					[ planSlug ]: {
+						wpcomFeatures: wpcomFeaturesTransformed,
+						jetpackFeatures: jetpackFeaturesTransformed,
+						...( storageFeature && {
+							storageFeature: getPlanFeaturesObject( allFeaturesList, [ storageFeature ] )?.[ 0 ],
+						} ),
+					},
+				};
+			},
+			{} as { [ planSlug: string ]: PlanFeaturesForGridPlan }
+		);
+	}, [
+		gridPlans,
+		intent,
+		highlightedFeatures,
+		selectedFeature,
+		showLegacyStorageFeature,
+		allFeaturesList,
+		hasRedeemedDomainCredit,
+	] );
+};
+
+export default usePlanFeaturesForGridPlans;

package/src/hooks/data-store/use-plans-from-types.ts

@@ -0,0 +1,51 @@
+import {
+	type PlanSlug,
+	TYPE_ENTERPRISE_GRID_WPCOM,
+	TYPE_FREE,
+	TYPE_WOO_EXPRESS_PLUS,
+	findPlansKeys,
+	TERMS_LIST,
+	TYPE_P2_PLUS,
+	GROUP_P2,
+} from '@automattic/calypso-products';
+import warn from '@wordpress/warning';
+import type { PlansIntent } from '../../types';
+
+interface Props {
+	planTypes: string[];
+	term: ( typeof TERMS_LIST )[ number ];
+	intent?: PlansIntent;
+}
+
+const usePlansFromTypes = ( { planTypes, term, intent }: Props ): PlanSlug[] => {
+	const plans = planTypes.reduce( ( accum: PlanSlug[], type ) => {
+		// These plans don't have a term.
+		// We may consider to move this logic into the underlying `planMatches` function, but that would have wider implication so it's TBD
+		const planQuery: { type: string; term?: string; group?: string } = [
+			TYPE_FREE,
+			TYPE_ENTERPRISE_GRID_WPCOM,
+			TYPE_WOO_EXPRESS_PLUS,
+			TYPE_P2_PLUS,
+		].includes( type )
+			? { type }
+			: { type, term };
+
+		if ( intent === 'plans-p2' ) {
+			planQuery[ 'group' ] = GROUP_P2;
+		}
+
+		const plan = findPlansKeys( planQuery )[ 0 ];
+
+		if ( ! plan ) {
+			warn(
+				`Invalid plan type, \`${ type }\`, provided to \`PlansFeaturesMain\` component. See plans constants for valid plan types.`
+			);
+		}
+
+		return plan ? [ ...accum, plan as PlanSlug ] : accum;
+	}, [] );
+
+	return plans;
+};
+
+export default usePlansFromTypes;