@automattic/plans-grid-next 1.0.2 → 1.0.3

package/src/components/test/header-price.tsx

@@ -4,6 +4,8 @@
 /**
  * Default mock implementations
  */
+const mockUseHeaderPriceContext = jest.fn();
+
 jest.mock( '@wordpress/element', () => ( {
 	...jest.requireActual( '@wordpress/element' ),
 	useCallback: jest.fn(),
@@ -24,10 +26,7 @@ jest.mock( '@automattic/data-stores', () => ( {
 } ) );
 
 jest.mock( '../shared/header-price/header-price-context', () => ( {
-	useHeaderPriceContext: () => ( {
-		isAnyPlanPriceDiscounted: false,
-		setIsAnyPlanPriceDiscounted: jest.fn(),
-	} ),
+	useHeaderPriceContext: () => mockUseHeaderPriceContext(),
 } ) );
 
 import {
@@ -35,11 +34,14 @@ import {
 	PLAN_ANNUAL_PERIOD,
 	PLAN_ENTERPRISE_GRID_WPCOM,
 	PLAN_PERSONAL,
+	PLAN_PERSONAL_MONTHLY,
 } from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render } from '@testing-library/react';
 import React, { useMemo } from 'react';
 import { usePlansGridContext } from '../../grid-context';
+import { GridPlan } from '../../types';
 import HeaderPrice from '../shared/header-price';
 
 const Wrapper = ( { children } ) => {
@@ -57,6 +59,11 @@ describe( 'HeaderPrice', () => {
 
 	beforeEach( () => {
 		jest.clearAllMocks();
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: false,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {} );
 	} );
 
 	test( 'should render raw and discounted prices when discount exists', () => {
@@ -186,4 +193,335 @@ describe( 'HeaderPrice', () => {
 
 		expect( badge ).toHaveTextContent( 'One time discount' );
 	} );
+
+	test( 'should display "Save x%" badge in renewal experiment for downgraded-site style pricing', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 20, full: 240 },
+				discountedPrice: { monthly: null, full: null },
+				billingPeriod: 31,
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: false,
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const badge = container.querySelector( '.plans-grid-next-header-price__badge' );
+
+		expect( badge ).toHaveTextContent( 'Save 50%' );
+	} );
+
+	test( 'should show the monthly plan price crossed out and the annual monthly-equivalent as the current price', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 20, full: 240 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: false,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const originalPrice = container.querySelector( '.plan-price.is-original' );
+		const discountedPrice = container.querySelector( '.plan-price.is-discounted' );
+
+		expect( originalPrice ).toHaveTextContent( '20' );
+		expect( discountedPrice ).toHaveTextContent( '10' );
+	} );
+
+	test( 'should not show a badge when the plan is the current plan', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 20, full: 240 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: true,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const badge = container.querySelector( '.plans-grid-next-header-price__badge' );
+
+		expect( badge ).toBeNull();
+	} );
+
+	test( 'should not show the crossed-out price when monthly plan price does not exceed the annual price', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 10, full: 120 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: false,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const originalPrice = container.querySelector( '.plan-price.is-original' );
+
+		expect( originalPrice ).toBeNull();
+	} );
+
+	test( 'should use the monthly plan price as the crossed-out price when intro offer and experiment are both active', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+			introOffer: {
+				formattedPrice: '$5.00',
+				rawPrice: { monthly: 5, full: 60 },
+				intervalUnit: 'month',
+				intervalCount: 1,
+				isOfferComplete: false,
+			},
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 20, full: 240 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: false,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const originalPrice = container.querySelector( '.plan-price.is-original' );
+		const discountedPrice = container.querySelector( '.plan-price.is-discounted' );
+
+		// Crossed-out price should be the monthly plan price (20), not the plan's own original price (10)
+		expect( originalPrice ).toHaveTextContent( '20' );
+		// Current price should be the intro offer price (5)
+		expect( discountedPrice ).toHaveTextContent( '5' );
+	} );
+
+	test( 'should show a hidden badge placeholder for current plan in crossed_price when multiple plans are visible', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 20, full: 240 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: true,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const stubPlan = {
+			pricing: {
+				originalPrice: { full: 0, monthly: 0 },
+				discountedPrice: { full: null, monthly: null },
+				currencyCode: 'USD',
+			},
+		} as GridPlan;
+
+		const { container } = render(
+			<HeaderPrice { ...defaultProps } visibleGridPlans={ [ stubPlan, stubPlan ] } />,
+			{ wrapper: Wrapper }
+		);
+		const visibleBadge = container.querySelector(
+			'.plans-grid-next-header-price__badge:not(.is-hidden)'
+		);
+		const hiddenBadge = container.querySelector( '.plans-grid-next-header-price__badge.is-hidden' );
+
+		expect( visibleBadge ).toBeNull();
+		expect( hiddenBadge ).toBeInTheDocument();
+	} );
+
+	test( 'should show a hidden badge placeholder for current plan with intro offer when multiple plans are visible', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+			introOffer: {
+				formattedPrice: '$5.00',
+				rawPrice: { monthly: 5, full: 60 },
+				intervalUnit: 'month',
+				intervalCount: 1,
+				isOfferComplete: false,
+			},
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: true,
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const stubPlan = {
+			pricing: {
+				originalPrice: { full: 0, monthly: 0 },
+				discountedPrice: { full: null, monthly: null },
+				currencyCode: 'USD',
+			},
+		} as GridPlan;
+
+		const { container } = render(
+			<HeaderPrice { ...defaultProps } visibleGridPlans={ [ stubPlan, stubPlan ] } />,
+			{ wrapper: Wrapper }
+		);
+		const visibleBadge = container.querySelector(
+			'.plans-grid-next-header-price__badge:not(.is-hidden)'
+		);
+		const hiddenBadge = container.querySelector( '.plans-grid-next-header-price__badge.is-hidden' );
+
+		expect( visibleBadge ).toBeNull();
+		expect( hiddenBadge ).toBeInTheDocument();
+	} );
+
+	test( 'should keep the fallback badge hidden in crossed_price when savings is zero', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		mockUseHeaderPriceContext.mockReturnValue( {
+			isAnyPlanPriceDiscounted: true,
+			setIsAnyPlanPriceDiscounted: jest.fn(),
+		} );
+		( Plans.usePricingMetaForGridPlans as jest.Mock ).mockReturnValue( {
+			[ PLAN_PERSONAL_MONTHLY ]: {
+				originalPrice: { monthly: 10, full: 120 },
+				discountedPrice: { monthly: null, full: null },
+			},
+		} );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					current: false,
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+			showBillingDescriptionForIncreasedRenewalPrice: 'crossed_price',
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const visibleBadge = container.querySelector(
+			'.plans-grid-next-header-price__badge:not(.is-hidden)'
+		);
+		const hiddenBadge = container.querySelector( '.plans-grid-next-header-price__badge.is-hidden' );
+
+		expect( visibleBadge ).toBeNull();
+		expect( hiddenBadge ).toBeInTheDocument();
+	} );
 } );

package/src/fixtures/sites-purchases.ts

@@ -6,7 +6,7 @@ export default [
 		product_id: '2451',
 		subscribed_date: '2024-05-01T00:53:22+00:00',
 		renew: '1',
-		auto_renew: '1',
+		is_auto_renew_enabled: true,
 		renew_date: '2025-05-01T00:00:00+00:00',
 		inactive_date: null,
 		active: '1',
@@ -15,8 +15,6 @@ export default [
 		most_recent_renew_date: '2024-05-01T00:53:21+00:00',
 		amount: 155.4,
 		expiry_date: '2025-05-01T00:00:00+00:00',
-		expiry_message: 'Renews on May 1, 2025',
-		expiry_sub_message: '',
 		expiry_status: 'active',
 		partner_name: null,
 		partner_slug: null,
@@ -124,7 +122,7 @@ export default [
 		payment_name: 'Test User',
 		payment_country_code: 'US',
 		payment_country_name: 'United States',
-		is_rechargable: true,
+		is_rechargeable: true,
 		payment_type: 'credit_card',
 	},
 ];

package/src/grid-context.tsx

@@ -31,6 +31,9 @@ interface PlansGridContext {
 	hideFeatureGroupTitles?: boolean;
 	enterpriseFeaturesList?: string[];
 	reflectStorageSelectionInPlanPrices?: boolean;
+	showSimplifiedBillingDescription?: boolean;
+	showBillingDescriptionForIncreasedRenewalPrice?: string | null;
+	isExperimentVariant?: boolean;
 }
 
 const PlansGridContext = createContext< PlansGridContext >( {} as PlansGridContext );
@@ -56,6 +59,9 @@ const PlansGridContextProvider = ( {
 	hideFeatureGroupTitles,
 	enterpriseFeaturesList,
 	reflectStorageSelectionInPlanPrices,
+	showSimplifiedBillingDescription,
+	showBillingDescriptionForIncreasedRenewalPrice,
+	isExperimentVariant,
 }: GridContextProps ) => {
 	const gridPlansIndex = gridPlans.reduce(
 		( acc, gridPlan ) => ( {
@@ -90,6 +96,9 @@ const PlansGridContextProvider = ( {
 				hideFeatureGroupTitles,
 				enterpriseFeaturesList,
 				reflectStorageSelectionInPlanPrices,
+				showSimplifiedBillingDescription,
+				showBillingDescriptionForIncreasedRenewalPrice,
+				isExperimentVariant,
 			} }
 		>
 			{ children }

package/src/hooks/data-store/get-renewal-pricing-text.ts

@@ -0,0 +1,73 @@
+import {
+	PLAN_ANNUAL_PERIOD,
+	PLAN_BIENNIAL_PERIOD,
+	PLAN_MONTHLY_PERIOD,
+	PLAN_TRIENNIAL_PERIOD,
+} from '@automattic/calypso-products';
+import { formatCurrency } from '@automattic/number-formatters';
+import type { Plans as PlansType } from '@automattic/data-stores';
+import type { TranslateResult } from 'i18n-calypso';
+
+interface GetRenewalPricingTextParams {
+	pricing: PlansType.PricingMetaForGridPlan;
+	showBillingDescriptionForIncreasedRenewalPrice: string | null | undefined;
+	translate: ( text: string, options?: any ) => TranslateResult;
+}
+
+/**
+ * Generates renewal pricing text based on the pricing variation.
+ * This is shared between use-plan-billing-description and use-renewal-pricing-post-button-text.
+ */
+export function getRenewalPricingText( {
+	pricing,
+	showBillingDescriptionForIncreasedRenewalPrice,
+	translate,
+}: GetRenewalPricingTextParams ): TranslateResult | null {
+	const { currencyCode, discountedPrice, originalPrice, billingPeriod, introOffer, renewalPrice } =
+		pricing;
+
+	const monthlyPrice = renewalPrice?.monthly ?? originalPrice?.monthly;
+	// Use the discounted price before the intro offer price since the discount is applied on top of it.
+	const currentFullPrice =
+		discountedPrice?.full || introOffer?.rawPrice?.full || originalPrice?.full;
+
+	if ( ! monthlyPrice || ! currencyCode || ! currentFullPrice ) {
+		return null;
+	}
+
+	if ( ! showBillingDescriptionForIncreasedRenewalPrice ) {
+		return null;
+	}
+
+	const formattedMonthlyPrice = formatCurrency( monthlyPrice, currencyCode, {
+		stripZeros: true,
+		isSmallestUnit: true,
+	} );
+
+	if ( billingPeriod === PLAN_MONTHLY_PERIOD ) {
+		return translate( 'Auto-renews at %(price)s per month. Billed every month.', {
+			args: { price: formattedMonthlyPrice },
+			comment: '%(price)s is a formatted price like $10',
+		} );
+	}
+
+	// Determine the billing period in months
+	let billingMonths = 12; // default to annual
+
+	if ( billingPeriod === PLAN_BIENNIAL_PERIOD ) {
+		billingMonths = 24;
+	} else if ( billingPeriod === PLAN_TRIENNIAL_PERIOD ) {
+		billingMonths = 36;
+	} else if ( billingPeriod === PLAN_ANNUAL_PERIOD ) {
+		billingMonths = 12;
+	}
+
+	return translate( 'Auto-renews at %(price)s per month. Billed every %(months)s months.', {
+		args: {
+			price: formattedMonthlyPrice,
+			months: billingMonths,
+		},
+		comment:
+			'%(price)s is a formatted price like $10, %(months)s is the billing period in months (12, 24, or 36)',
+	} );
+}

package/src/hooks/data-store/types.ts

@@ -35,6 +35,27 @@ export interface UseGridPlansParams {
 	 * calculating prices.
 	 */
 	reflectStorageSelectionInPlanPrices?: boolean;
+	/**
+	 * When true, use the no-AI feature set for the rolled-out pricing differentiation cohort.
+	 */
+	useVar42NoAiFeatures?: boolean;
+	/**
+	 * When true, show plan-scoped feature pills. AI-labeled pills are suppressed.
+	 */
+	showPricingDifferentiationFeaturePills?: boolean;
+	/**
+	 * When true, use the focused_new_copy taglines for plan headers.
+	 */
+	useFocusedNewCopyTaglines?: boolean;
+	/**
+	 * When true, use cohort feature lists and comparison grid copy.
+	 */
+	isExperimentVariant?: boolean;
+	/**
+	 * Renewal-pricing experiment flag, threaded to the pricing hook so the current
+	 * plan's headline matches the renewal-vs-intro treatment.
+	 */
+	showBillingDescriptionForIncreasedRenewalPrice?: string | null;
 }
 
 export type UseGridPlansType = (

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

@@ -28,6 +28,11 @@ const useGridPlansForComparisonGrid = ( {
 	useFreeTrialPlanSlugs,
 	isDomainOnlySite,
 	reflectStorageSelectionInPlanPrices,
+	useVar42NoAiFeatures,
+	showPricingDifferentiationFeaturePills,
+	useFocusedNewCopyTaglines,
+	isExperimentVariant,
+	showBillingDescriptionForIncreasedRenewalPrice,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -46,6 +51,8 @@ const useGridPlansForComparisonGrid = ( {
 		useFreeTrialPlanSlugs,
 		isDomainOnlySite,
 		reflectStorageSelectionInPlanPrices,
+		useFocusedNewCopyTaglines,
+		showBillingDescriptionForIncreasedRenewalPrice,
 	} );
 
 	const planFeaturesForComparisonGrid = useRestructuredPlanFeaturesForComparisonGrid( {
@@ -55,6 +62,9 @@ const useGridPlansForComparisonGrid = ( {
 		intent,
 		selectedFeature,
 		showLegacyStorageFeature,
+		useVar42NoAiFeatures,
+		showPricingDifferentiationFeaturePills,
+		isExperimentVariant,
 	} );
 
 	return useMemo( () => {

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

@@ -25,6 +25,11 @@ const useGridPlansForFeaturesGrid = ( {
 	highlightLabelOverrides,
 	isDomainOnlySite,
 	reflectStorageSelectionInPlanPrices,
+	useVar42NoAiFeatures,
+	showPricingDifferentiationFeaturePills,
+	useFocusedNewCopyTaglines,
+	isExperimentVariant,
+	showBillingDescriptionForIncreasedRenewalPrice,
 }: UseGridPlansParams ): GridPlan[] | null => {
 	const gridPlans = useGridPlans( {
 		allFeaturesList,
@@ -45,6 +50,8 @@ const useGridPlansForFeaturesGrid = ( {
 		highlightLabelOverrides,
 		isDomainOnlySite,
 		reflectStorageSelectionInPlanPrices,
+		useFocusedNewCopyTaglines,
+		showBillingDescriptionForIncreasedRenewalPrice,
 	} );
 
 	const planFeaturesForFeaturesGrid = usePlanFeaturesForGridPlans( {
@@ -55,6 +62,9 @@ const useGridPlansForFeaturesGrid = ( {
 		isInSignup,
 		selectedFeature,
 		showLegacyStorageFeature,
+		useVar42NoAiFeatures,
+		showPricingDifferentiationFeaturePills,
+		isExperimentVariant,
 	} );
 
 	return useMemo( () => {