@automattic/plans-grid-next 1.0.0

package/src/components/test/billing-timeframe.tsx

@@ -0,0 +1,341 @@
+/**
+ * @jest-environment jsdom
+ */
+/**
+ * Default mock implementations
+ */
+jest.mock( 'i18n-calypso', () => ( {
+	...jest.requireActual( 'i18n-calypso' ),
+} ) );
+jest.mock( 'react-redux', () => ( {
+	...jest.requireActual( 'react-redux' ),
+	useSelector: jest.fn( ( selector ) => selector() ),
+} ) );
+jest.mock( '../../grid-context', () => ( { usePlansGridContext: jest.fn() } ) );
+jest.mock( '@automattic/data-stores', () => ( {
+	Plans: {
+		...jest.requireActual( '@automattic/data-stores' ).Plans,
+		usePricingMetaForGridPlans: jest.fn(),
+	},
+	AddOns: {
+		useStorageAddOns: jest.fn(),
+	},
+} ) );
+
+import {
+	PLAN_ANNUAL_PERIOD,
+	PLAN_BIENNIAL_PERIOD,
+	PLAN_BUSINESS,
+	PLAN_BUSINESS_2_YEARS,
+	PLAN_BUSINESS_3_YEARS,
+	PLAN_BUSINESS_MONTHLY,
+	PLAN_FREE,
+	PLAN_MONTHLY_PERIOD,
+	PLAN_TRIENNIAL_PERIOD,
+} from '@automattic/calypso-products';
+import { Plans } from '@automattic/data-stores';
+import { render } from '@testing-library/react';
+import { formatCurrency } from 'i18n-calypso';
+import React from 'react';
+import { usePlansGridContext } from '../../grid-context';
+import BillingTimeframe from '../shared/billing-timeframe';
+
+describe( 'BillingTimeframe', () => {
+	const defaultProps = {
+		billingTimeframe: 'per month, billed annually',
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( `should show savings with yearly when plan is monthly`, () => {
+		const planMonthlyPricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+		const planYearlyPricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 60, monthly: 5 },
+			discountedPrice: { full: 24, monthly: 2 },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		Plans.usePricingMetaForGridPlans.mockImplementation( () => ( {
+			[ PLAN_BUSINESS ]: planYearlyPricing,
+		} ) );
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_MONTHLY ]: {
+					isMonthlyPlan: true,
+					pricing: planMonthlyPricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_MONTHLY } />
+		);
+		const savings =
+			( 100 *
+				( planMonthlyPricing.originalPrice.monthly - planYearlyPricing.discountedPrice.monthly ) ) /
+			planMonthlyPricing.originalPrice.monthly;
+
+		expect( container ).toHaveTextContent( `Save ${ savings }%` );
+	} );
+
+	test( 'should show full-term discounted price when plan is yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS } />
+		);
+
+		const discountedPrice = formatCurrency( pricing.discountedPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent( `per month, ${ discountedPrice } for the first year` );
+	} );
+
+	test( 'should show full-term discounted price when plan is 2-yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_BIENNIAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_2_YEARS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_2_YEARS } />
+		);
+		const discountedPrice = formatCurrency( pricing.discountedPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent(
+			`per month, ${ discountedPrice } for the first two years`
+		);
+	} );
+
+	test( 'should show full-term discounted price when plan is 3-yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_TRIENNIAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_3_YEARS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_3_YEARS } />
+		);
+		const discountedPrice = formatCurrency( pricing.discountedPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent(
+			`per month, ${ discountedPrice } for the first three years`
+		);
+	} );
+
+	test( 'should show full-term price when plan is yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS } />
+		);
+
+		const originalPrice = formatCurrency( pricing.originalPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent(
+			`per month, ${ originalPrice } billed annually, excl. taxes`
+		);
+	} );
+
+	test( 'should show full-term price when plan is 2-yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_BIENNIAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_2_YEARS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_2_YEARS } />
+		);
+		const originalPrice = formatCurrency( pricing.originalPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent(
+			`per month, ${ originalPrice } billed every two years, excl. taxes`
+		);
+	} );
+
+	test( 'should show full-term price when plan is 3-yearly', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_TRIENNIAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_3_YEARS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_3_YEARS } />
+		);
+		const originalPrice = formatCurrency( pricing.originalPrice.full, 'USD', {
+			stripZeros: true,
+			isSmallestUnit: true,
+		} );
+		expect( container ).toHaveTextContent(
+			`per month, ${ originalPrice } billed every three years, excl. taxes`
+		);
+	} );
+
+	test( 'show refund period period for annual plan', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS ]: {
+					isMonthlyPlan: false,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { getByText } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS } showRefundPeriod />
+		);
+
+		expect( getByText( /Refundable within 14 days. No questions asked./ ) ).toBeInTheDocument();
+	} );
+
+	test( 'show refund period period for monthly plan', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_MONTHLY_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS_MONTHLY ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { getByText } = render(
+			<BillingTimeframe { ...defaultProps } planSlug={ PLAN_BUSINESS_MONTHLY } showRefundPeriod />
+		);
+
+		expect( getByText( /Refundable within 7 days. No questions asked./ ) ).toBeInTheDocument();
+	} );
+
+	test( `refund period can't be shown for free plan`, () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 0, monthly: 0 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_MONTHLY_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_FREE ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { queryByText } = render(
+			<BillingTimeframe
+				{ ...defaultProps }
+				planSlug={ PLAN_FREE }
+				showRefundPeriod // refund period won't be shown even though we set the prop to true
+			/>
+		);
+
+		expect(
+			queryByText( /Refundable within 7 days. No questions asked./ )
+		).not.toBeInTheDocument();
+	} );
+} );

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

@@ -0,0 +1,189 @@
+/**
+ * @jest-environment jsdom
+ */
+/**
+ * Default mock implementations
+ */
+jest.mock( '@wordpress/element', () => ( {
+	...jest.requireActual( '@wordpress/element' ),
+	useCallback: jest.fn(),
+} ) );
+jest.mock( 'react-redux', () => ( {
+	...jest.requireActual( 'react-redux' ),
+	useSelector: jest.fn(),
+} ) );
+jest.mock( '../../grid-context', () => ( { usePlansGridContext: jest.fn() } ) );
+jest.mock( '@automattic/data-stores', () => ( {
+	...jest.requireActual( '@automattic/data-stores' ),
+	AddOns: {
+		useStorageAddOns: jest.fn(),
+	},
+	Plans: {
+		usePricingMetaForGridPlans: jest.fn(),
+	},
+} ) );
+
+jest.mock( '../shared/header-price/header-price-context', () => ( {
+	useHeaderPriceContext: () => ( {
+		isAnyPlanPriceDiscounted: false,
+		setIsAnyPlanPriceDiscounted: jest.fn(),
+	} ),
+} ) );
+
+import {
+	type PlanSlug,
+	PLAN_ANNUAL_PERIOD,
+	PLAN_ENTERPRISE_GRID_WPCOM,
+	PLAN_PERSONAL,
+} from '@automattic/calypso-products';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+import React, { useMemo } from 'react';
+import { usePlansGridContext } from '../../grid-context';
+import HeaderPrice from '../shared/header-price';
+
+const Wrapper = ( { children } ) => {
+	const queryClient = useMemo( () => new QueryClient(), [] );
+
+	return <QueryClientProvider client={ queryClient }>{ children }</QueryClientProvider>;
+};
+
+describe( 'HeaderPrice', () => {
+	const defaultProps = {
+		isLargeCurrency: false,
+		planSlug: PLAN_PERSONAL as PlanSlug,
+		visibleGridPlans: [],
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	test( 'should render raw and discounted prices when discount exists', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const rawPrice = container.querySelector( '.plan-price.is-original' );
+		const discountedPrice = container.querySelector( '.plan-price.is-discounted' );
+
+		expect( rawPrice ).toHaveTextContent( '10' );
+		expect( discountedPrice ).toHaveTextContent( '5' );
+	} );
+
+	test( 'should render just the raw price when no discount exists', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const rawPrice = container.querySelector( '.plan-price' );
+		const discountedPrice = container.querySelector( '.plan-price.is-discounted' );
+
+		expect( rawPrice ).toHaveTextContent( '10' );
+		expect( discountedPrice ).toBeNull();
+	} );
+
+	test( 'should render empty for the enterprise plan', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_ENTERPRISE_GRID_WPCOM ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render(
+			<HeaderPrice { ...defaultProps } planSlug={ PLAN_ENTERPRISE_GRID_WPCOM } />,
+			{ wrapper: Wrapper }
+		);
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	test( 'should display "Special Offer" badge when intro offer exists and offer is not complete', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: null, monthly: null },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+			introOffer: {
+				formattedPrice: '$5.00',
+				rawPrice: 5,
+				intervalUnit: 'month',
+				intervalCount: 1,
+				isOfferComplete: false,
+			},
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const badge = container.querySelector( '.plans-grid-next-header-price__badge' );
+
+		expect( badge ).toHaveTextContent( 'Special Offer' );
+	} );
+
+	test( 'should display "One time discount" badge when there is a monthly discounted price', () => {
+		const pricing = {
+			currencyCode: 'USD',
+			originalPrice: { full: 120, monthly: 10 },
+			discountedPrice: { full: 60, monthly: 5 },
+			billingPeriod: PLAN_ANNUAL_PERIOD,
+		};
+
+		usePlansGridContext.mockImplementation( () => ( {
+			gridPlansIndex: {
+				[ PLAN_PERSONAL ]: {
+					isMonthlyPlan: true,
+					pricing,
+				},
+			},
+		} ) );
+
+		const { container } = render( <HeaderPrice { ...defaultProps } />, { wrapper: Wrapper } );
+		const badge = container.querySelector( '.plans-grid-next-header-price__badge' );
+
+		expect( badge ).toHaveTextContent( 'One time discount' );
+	} );
+} );

package/src/components/test/plan-type-selector.tsx

@@ -0,0 +1,44 @@
+/** @jest-environment jsdom */
+
+/**
+ * Default mock implementations
+ */
+jest.mock( '@automattic/data-stores', () => ( {
+	Plans: {
+		usePricingMetaForGridPlans: jest.fn(),
+	},
+} ) );
+
+import { PLAN_FREE } from '@automattic/calypso-products';
+import { screen, render } from '@testing-library/react';
+import React from 'react';
+import PlanTypeSelector from '../plan-type-selector';
+
+describe( '<PlanTypeSelector />', () => {
+	test( 'Should show IntervalTypeToggle when kind is set to `interval`', () => {
+		render(
+			<PlanTypeSelector
+				customerType="personal"
+				displayedIntervals={ [ 'monthly', 'yearly' ] }
+				eligibleForWpcomMonthlyPlans
+				intervalType="monthly"
+				isInSignup
+				isPlansInsideStepper={ false }
+				isStepperUpgradeFlow={ false }
+				kind="interval"
+				plans={ [] }
+				selectedPlan={ PLAN_FREE }
+				useCheckPlanAvailabilityForPurchase={ jest.fn() }
+			/>
+		);
+
+		expect( screen.getByRole( 'radiogroup' ) ).toHaveClass( 'price-toggle' );
+
+		const radios = screen.queryAllByRole( 'radio' );
+
+		expect( radios[ 0 ] ).toHaveTextContent( 'Pay monthly' );
+		expect( radios[ 1 ] ).toHaveTextContent( 'Pay annually' );
+
+		expect( radios[ 0 ] ).toBeChecked();
+	} );
+} );

package/src/constants.ts

@@ -0,0 +1,13 @@
+import {
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_MONTHLY,
+	TERM_TRIENNIALLY,
+} from '@automattic/calypso-products';
+
+export const EFFECTIVE_TERMS_LIST = < const >[
+	TERM_MONTHLY,
+	TERM_ANNUALLY,
+	TERM_BIENNIALLY,
+	TERM_TRIENNIALLY,
+];

package/src/css-mixins.tsx

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+
+export const plansGridMediumLarge = ( styles: SerializedStyles ) => css`
+	.plans-grid-next.is-smedium &,
+	.plans-grid-next.is-medium &,
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge & {
+		${ styles }
+	}
+`;