@automattic/data-stores 3.1.0 → 3.1.2

package/src/plans/hooks/test/use-pricing-meta-for-grid-plans.ts

@@ -5,111 +5,130 @@
 /**
  * Default mock implementations
  */
-jest.mock( '@wordpress/data' );
-jest.mock( '@automattic/data-stores', () => ( {
-	Plans: {
-		usePlans: jest.fn(),
-		useSitePlans: jest.fn(),
-		useIntroOffers: jest.fn(),
-		useCurrentPlan: jest.fn(),
-	},
-	Purchases: {
-		useSitePurchaseById: jest.fn(),
-	},
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+	combineReducers: jest.fn(),
+	createReduxStore: jest.fn(),
+	createSelector: jest.fn(),
+	register: jest.fn(),
+	useDispatch: jest.fn(),
 } ) );
-
 jest.mock( '../../', () => ( {
 	usePlans: jest.fn(),
 	useSitePlans: jest.fn(),
 	useIntroOffers: jest.fn(),
 	useCurrentPlan: jest.fn(),
 } ) );
-
+jest.mock( '../../../add-ons', () => ( {
+	useStorageAddOns: jest.fn(),
+} ) );
 jest.mock( '../../../purchases', () => ( {
 	useSitePurchaseById: jest.fn(),
 } ) );
+jest.mock( '../../../wpcom-plans-ui', () => ( {
+	store: 'wpcom-plans-ui',
+} ) );
 
-import { PLAN_PERSONAL, PLAN_PREMIUM } from '@automattic/calypso-products';
+import { PLAN_PERSONAL, PLAN_BUSINESS } from '@automattic/calypso-products';
+import { useSelect } from '@wordpress/data';
 import * as Plans from '../../';
+import * as AddOns from '../../../add-ons';
+import { ADD_ON_50GB_STORAGE } from '../../../add-ons/constants';
+import { STORAGE_ADD_ONS_MOCK } from '../../../add-ons/mocks';
 import * as Purchases from '../../../purchases';
+import * as WpcomPlansUI from '../../../wpcom-plans-ui';
+import { COST_OVERRIDE_REASONS } from '../../constants';
 import usePricingMetaForGridPlans from '../use-pricing-meta-for-grid-plans';
 
+const siteId = 100;
+const SITE_PLANS = {
+	[ PLAN_BUSINESS ]: {
+		expiry: null,
+		pricing: {
+			billPeriod: 365,
+			currencyCode: 'USD',
+			originalPrice: {
+				full: 500,
+				monthly: 500,
+			},
+			discountedPrice: {
+				full: 250,
+				monthly: 250,
+			},
+		},
+	},
+};
+const PLANS = {
+	[ PLAN_BUSINESS ]: {
+		pricing: {
+			billPeriod: 365,
+			currencyCode: 'USD',
+			originalPrice: {
+				full: 500,
+				monthly: 500,
+			},
+			discountedPrice: {
+				full: 400,
+				monthly: 400,
+			},
+		},
+	},
+};
+const introOffer = {
+	formattedPrice: '$150',
+	rawPrice: {
+		monthly: 12.5,
+		full: 150,
+	},
+	isOfferComplete: false,
+	intervalUnit: 'year',
+	intervalCount: 1,
+};
+const useCheckPlanAvailabilityForPurchase = () => {
+	return {
+		[ PLAN_BUSINESS ]: true,
+		[ PLAN_PERSONAL ]: true,
+	};
+};
+
 describe( 'usePricingMetaForGridPlans', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
 		Purchases.useSitePurchaseById.mockImplementation( () => undefined );
 		Plans.useIntroOffers.mockImplementation( () => ( {
-			[ PLAN_PREMIUM ]: null,
+			[ PLAN_BUSINESS ]: null,
 		} ) );
 		Plans.usePlans.mockImplementation( () => ( {
 			isLoading: false,
-			data: {
-				[ PLAN_PREMIUM ]: {
-					pricing: {
-						billPeriod: 365,
-						currencyCode: 'USD',
-						originalPrice: {
-							full: 500,
-							monthly: 500,
-						},
-						discountedPrice: {
-							full: 400,
-							monthly: 400,
-						},
-					},
-				},
-			},
+			data: PLANS,
 		} ) );
 		Plans.useSitePlans.mockImplementation( () => ( {
 			isLoading: false,
-			data: {
-				[ PLAN_PREMIUM ]: {
-					expiry: null,
-					pricing: {
-						billPeriod: 365,
-						currencyCode: 'USD',
-						originalPrice: {
-							full: 500,
-							monthly: 500,
-						},
-						discountedPrice: {
-							full: 250,
-							monthly: 250,
-						},
-						costOverrides: [
-							{
-								overrideCode: 'recent-plan-proration',
-							},
-						],
-					},
-				},
-			},
+			data: SITE_PLANS,
 		} ) );
 		Plans.useCurrentPlan.mockImplementation( () => undefined );
+		AddOns.useStorageAddOns.mockImplementation( () => STORAGE_ADD_ONS_MOCK );
+	} );
+
+	afterAll( () => {
+		jest.clearAllMocks();
 	} );
 
 	it( 'should return the original price as the site plan price and discounted price as Null for the current plan', () => {
 		Plans.useCurrentPlan.mockImplementation( () => ( {
-			productSlug: PLAN_PREMIUM,
-			planSlug: PLAN_PREMIUM,
+			productSlug: PLAN_BUSINESS,
+			planSlug: PLAN_BUSINESS,
 		} ) );
 
-		const useCheckPlanAvailabilityForPurchase = () => {
-			return {
-				[ PLAN_PREMIUM ]: true,
-			};
-		};
-
 		const pricingMeta = usePricingMetaForGridPlans( {
-			planSlugs: [ PLAN_PREMIUM ],
-			storageAddOns: null,
-			siteId: 100,
+			planSlugs: [ PLAN_BUSINESS ],
+			siteId,
 			coupon: undefined,
 			useCheckPlanAvailabilityForPurchase,
 		} );
 
 		const expectedPricingMeta = {
-			[ PLAN_PREMIUM ]: {
+			[ PLAN_BUSINESS ]: {
 				originalPrice: {
 					full: 500,
 					monthly: 500,
@@ -121,7 +140,7 @@ describe( 'usePricingMetaForGridPlans', () => {
 				billingPeriod: 365,
 				currencyCode: 'USD',
 				expiry: null,
-				introOffer: null,
+				introOffer: undefined,
 			},
 		};
 
@@ -130,26 +149,19 @@ describe( 'usePricingMetaForGridPlans', () => {
 
 	it( 'should return the original price as the site plan price and discounted price as Null for plans not available for purchase', () => {
 		Plans.useCurrentPlan.mockImplementation( () => ( {
-			productSlug: PLAN_PREMIUM,
-			planSlug: PLAN_PREMIUM,
+			productSlug: PLAN_BUSINESS,
+			planSlug: PLAN_BUSINESS,
 		} ) );
 
-		const useCheckPlanAvailabilityForPurchase = () => {
-			return {
-				[ PLAN_PREMIUM ]: false,
-			};
-		};
-
 		const pricingMeta = usePricingMetaForGridPlans( {
-			planSlugs: [ PLAN_PREMIUM ],
-			storageAddOns: null,
-			siteId: 100,
+			planSlugs: [ PLAN_BUSINESS ],
+			siteId,
 			coupon: undefined,
 			useCheckPlanAvailabilityForPurchase,
 		} );
 
 		const expectedPricingMeta = {
-			[ PLAN_PREMIUM ]: {
+			[ PLAN_BUSINESS ]: {
 				originalPrice: {
 					full: 500,
 					monthly: 500,
@@ -161,7 +173,7 @@ describe( 'usePricingMetaForGridPlans', () => {
 				billingPeriod: 365,
 				currencyCode: 'USD',
 				expiry: null,
-				introOffer: null,
+				introOffer: undefined,
 			},
 		};
 
@@ -174,15 +186,8 @@ describe( 'usePricingMetaForGridPlans', () => {
 			planSlug: PLAN_PERSONAL,
 		} ) );
 
-		const useCheckPlanAvailabilityForPurchase = () => {
-			return {
-				[ PLAN_PREMIUM ]: true,
-				[ PLAN_PERSONAL ]: true,
-			};
-		};
-
 		const pricingMeta = usePricingMetaForGridPlans( {
-			planSlugs: [ PLAN_PREMIUM ],
+			planSlugs: [ PLAN_BUSINESS ],
 			storageAddOns: null,
 			siteId: undefined,
 			coupon: undefined,
@@ -190,7 +195,7 @@ describe( 'usePricingMetaForGridPlans', () => {
 		} );
 
 		const expectedPricingMeta = {
-			[ PLAN_PREMIUM ]: {
+			[ PLAN_BUSINESS ]: {
 				originalPrice: {
 					full: 500,
 					monthly: 500,
@@ -202,7 +207,7 @@ describe( 'usePricingMetaForGridPlans', () => {
 				billingPeriod: 365,
 				currencyCode: 'USD',
 				expiry: null,
-				introOffer: null,
+				introOffer: undefined,
 			},
 		};
 
@@ -215,24 +220,16 @@ describe( 'usePricingMetaForGridPlans', () => {
 			planSlug: PLAN_PERSONAL,
 		} ) );
 
-		const useCheckPlanAvailabilityForPurchase = () => {
-			return {
-				[ PLAN_PREMIUM ]: true,
-				[ PLAN_PERSONAL ]: true,
-			};
-		};
-
 		const pricingMeta = usePricingMetaForGridPlans( {
-			planSlugs: [ PLAN_PREMIUM ],
-			storageAddOns: null,
-			siteId: 100,
+			planSlugs: [ PLAN_BUSINESS ],
+			siteId,
 			coupon: undefined,
 			useCheckPlanAvailabilityForPurchase,
 			withProratedDiscounts: true,
 		} );
 
 		const expectedPricingMeta = {
-			[ PLAN_PREMIUM ]: {
+			[ PLAN_BUSINESS ]: {
 				originalPrice: {
 					full: 500,
 					monthly: 500,
@@ -244,49 +241,171 @@ describe( 'usePricingMetaForGridPlans', () => {
 				billingPeriod: 365,
 				currencyCode: 'USD',
 				expiry: null,
-				introOffer: null,
+				introOffer: undefined,
 			},
 		};
 
 		expect( pricingMeta ).toEqual( expectedPricingMeta );
 	} );
 
-	it( 'should return the original price and discounted price when site id is passed and withProratedDiscounts is false', () => {
-		Plans.useCurrentPlan.mockImplementation( () => ( {
-			productSlug: PLAN_PERSONAL,
-			planSlug: PLAN_PERSONAL,
-		} ) );
+	it.each( [
+		COST_OVERRIDE_REASONS.RECENT_PLAN_PRORATION,
+		COST_OVERRIDE_REASONS.RECENT_DOMAIN_PRORATION,
+	] )(
+		"should return the original price when site id is passed, cost override reason is '%s', and withProratedDiscounts is false",
+		( overrideCode ) => {
+			Plans.useCurrentPlan.mockImplementation( () => ( {
+				productSlug: PLAN_PERSONAL,
+				planSlug: PLAN_PERSONAL,
+			} ) );
+
+			Plans.useSitePlans.mockImplementation( () => ( {
+				isLoading: false,
+				data: {
+					[ PLAN_BUSINESS ]: {
+						...SITE_PLANS[ PLAN_BUSINESS ],
+						pricing: {
+							...SITE_PLANS[ PLAN_BUSINESS ].pricing,
+							costOverrides: [ { overrideCode } ],
+						},
+					},
+				},
+			} ) );
+
+			const pricingMeta = usePricingMetaForGridPlans( {
+				planSlugs: [ PLAN_BUSINESS ],
+				siteId,
+				coupon: undefined,
+				useCheckPlanAvailabilityForPurchase,
+				withProratedDiscounts: false,
+			} );
 
-		const useCheckPlanAvailabilityForPurchase = () => {
-			return {
-				[ PLAN_PREMIUM ]: true,
-				[ PLAN_PERSONAL ]: true,
+			const expectedPricingMeta = {
+				[ PLAN_BUSINESS ]: {
+					originalPrice: {
+						full: 500,
+						monthly: 500,
+					},
+					discountedPrice: {
+						full: null,
+						monthly: null,
+					},
+					billingPeriod: 365,
+					currencyCode: 'USD',
+					expiry: null,
+					introOffer: undefined,
+				},
 			};
+
+			expect( pricingMeta ).toEqual( expectedPricingMeta );
+		}
+	);
+
+	it( 'should return intro offer when available', () => {
+		Plans.useIntroOffers.mockImplementation( () => ( {
+			[ PLAN_BUSINESS ]: introOffer,
+		} ) );
+		Plans.useSitePlans.mockImplementation( () => ( {
+			isLoading: false,
+			data: {
+				[ PLAN_BUSINESS ]: {
+					...SITE_PLANS[ PLAN_BUSINESS ],
+					pricing: {
+						...SITE_PLANS[ PLAN_BUSINESS ].pricing,
+						introOffer,
+					},
+				},
+			},
+		} ) );
+
+		const pricingMeta = usePricingMetaForGridPlans( {
+			planSlugs: [ PLAN_BUSINESS ],
+			siteId,
+			coupon: undefined,
+			useCheckPlanAvailabilityForPurchase,
+		} );
+
+		const expectedPricingMeta = {
+			[ PLAN_BUSINESS ]: {
+				...SITE_PLANS[ PLAN_BUSINESS ].pricing,
+				billPeriod: undefined,
+				billingPeriod: SITE_PLANS[ PLAN_BUSINESS ].pricing.billPeriod,
+				expiry: null,
+				introOffer,
+			},
 		};
 
+		expect( pricingMeta ).toEqual( expectedPricingMeta );
+	} );
+
+	it( 'should return intro offer pricing and standard pricing adjusted by storage selection', () => {
+		Plans.useIntroOffers.mockImplementation( () => ( {
+			[ PLAN_BUSINESS ]: introOffer,
+		} ) );
+		Plans.useSitePlans.mockImplementation( () => ( {
+			isLoading: false,
+			data: {
+				[ PLAN_BUSINESS ]: {
+					...SITE_PLANS[ PLAN_BUSINESS ],
+					pricing: {
+						...SITE_PLANS[ PLAN_BUSINESS ].pricing,
+						introOffer,
+					},
+				},
+			},
+		} ) );
+		useSelect.mockImplementation( ( selectFunc ) => {
+			const select = ( store ) => {
+				if ( store === WpcomPlansUI.store ) {
+					return {
+						getSelectedStorageOptions: () => ( {
+							[ PLAN_BUSINESS ]: ADD_ON_50GB_STORAGE,
+						} ),
+					};
+				}
+
+				return null;
+			};
+
+			return selectFunc( select );
+		} );
+
 		const pricingMeta = usePricingMetaForGridPlans( {
-			planSlugs: [ PLAN_PREMIUM ],
-			storageAddOns: null,
-			siteId: 100,
+			planSlugs: [ PLAN_BUSINESS ],
+			reflectStorageSelectionInPlanPrices: true,
+			siteId,
 			coupon: undefined,
 			useCheckPlanAvailabilityForPurchase,
-			withProratedDiscounts: false,
 		} );
 
 		const expectedPricingMeta = {
-			[ PLAN_PREMIUM ]: {
+			[ PLAN_BUSINESS ]: {
 				originalPrice: {
-					full: 500,
-					monthly: 500,
+					full:
+						SITE_PLANS[ PLAN_BUSINESS ].pricing.originalPrice.full +
+						STORAGE_ADD_ONS_MOCK[ 0 ].prices.yearlyPrice,
+					monthly:
+						SITE_PLANS[ PLAN_BUSINESS ].pricing.originalPrice.monthly +
+						STORAGE_ADD_ONS_MOCK[ 0 ].prices.monthlyPrice,
 				},
 				discountedPrice: {
-					full: null,
-					monthly: null,
+					full:
+						SITE_PLANS[ PLAN_BUSINESS ].pricing.discountedPrice.full +
+						STORAGE_ADD_ONS_MOCK[ 0 ].prices.yearlyPrice,
+					monthly:
+						SITE_PLANS[ PLAN_BUSINESS ].pricing.discountedPrice.monthly +
+						STORAGE_ADD_ONS_MOCK[ 0 ].prices.monthlyPrice,
 				},
-				billingPeriod: 365,
-				currencyCode: 'USD',
+				billingPeriod: SITE_PLANS[ PLAN_BUSINESS ].pricing.billPeriod,
+				currencyCode: SITE_PLANS[ PLAN_BUSINESS ].pricing.currencyCode,
 				expiry: null,
-				introOffer: null,
+				introOffer: {
+					...introOffer,
+					rawPrice: {
+						monthly: 12.5 + STORAGE_ADD_ONS_MOCK[ 0 ].prices.monthlyPrice,
+						full: 150 + STORAGE_ADD_ONS_MOCK[ 0 ].prices.yearlyPrice,
+					},
+				},
 			},
 		};
 

package/src/plans/hooks/use-current-plan.ts

@@ -7,7 +7,7 @@ interface Props {
 }
 
 const useCurrentPlan = ( { siteId }: Props ): SitePlan | undefined => {
-	const sitePlans = useSitePlans( { siteId } );
+	const sitePlans = useSitePlans( { coupon: undefined, siteId } );
 
 	return useMemo(
 		() =>

package/src/plans/hooks/use-intro-offers.ts

@@ -20,7 +20,7 @@ interface Props {
  * or `undefined` if we haven't observed any metadata yet
  */
 const useIntroOffers = ( { siteId, coupon }: Props ): IntroOffersIndex | undefined => {
-	const sitePlans = useSitePlans( { siteId } );
+	const sitePlans = useSitePlans( { coupon: undefined, siteId } );
 	const plans = usePlans( { coupon } );
 
 	return useMemo( () => {

package/src/plans/hooks/use-pricing-meta-for-grid-plans.ts

@@ -6,10 +6,10 @@ import {
 } from '@automattic/calypso-products';
 import { useSelect } from '@wordpress/data';
 import * as Plans from '../';
+import * as AddOns from '../../add-ons';
 import * as Purchases from '../../purchases';
 import * as WpcomPlansUI from '../../wpcom-plans-ui';
 import { COST_OVERRIDE_REASONS } from '../constants';
-import type { AddOnMeta } from '../../add-ons/types';
 
 export type UseCheckPlanAvailabilityForPurchase = ( {
 	planSlugs,
@@ -45,17 +45,19 @@ interface Props {
 	 */
 	useCheckPlanAvailabilityForPurchase: UseCheckPlanAvailabilityForPurchase;
 
-	/**
-	 * `storageAddOmns` TODO: should become a required prop.
-	 */
-	storageAddOns: ( AddOnMeta | null )[] | null;
-
 	/**
 	 * Whether to include discounts from plan proration.
 	 * This is applicable only if a siteId is passed to this hook.
 	 * If true, the pricing includes discounts from upgrade credits.
 	 */
 	withProratedDiscounts?: boolean;
+
+	/**
+	 * Storage add-on products ( e.g. increase site storage by 50GB ) can be purchased alongside plans. If true,
+	 * storage add-on selections will be included in final plan price calculations. Otherwise, omit the add-ons
+	 * from the final price.
+	 */
+	reflectStorageSelectionInPlanPrices?: boolean;
 }
 
 function getTotalPrice( planPrice: number | null | undefined, addOnPrice = 0 ): number | null {
@@ -77,13 +79,14 @@ const usePricingMetaForGridPlans = ( {
 	siteId,
 	coupon,
 	useCheckPlanAvailabilityForPurchase,
-	storageAddOns,
 	withProratedDiscounts,
+	reflectStorageSelectionInPlanPrices = false,
 }: Props ): { [ planSlug: string ]: Plans.PricingMetaForGridPlan } | null => {
 	// plans - should have a definition for all plans, being the main source of API data
 	const plans = Plans.usePlans( { coupon } );
 	// sitePlans - unclear if all plans are included
-	const sitePlans = Plans.useSitePlans( { siteId } );
+	const sitePlans = Plans.useSitePlans( { coupon, siteId } );
+	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
 	const currentPlan = Plans.useCurrentPlan( { siteId } );
 	const introOffers = Plans.useIntroOffers( { siteId, coupon } );
 	const purchasedPlan = Purchases.useSitePurchaseById( {
@@ -92,8 +95,9 @@ const usePricingMetaForGridPlans = ( {
 	} );
 	const selectedStorageOptions = useSelect(
 		( select ) => select( WpcomPlansUI.store ).getSelectedStorageOptions( siteId ),
-		[]
+		[ siteId ]
 	);
+
 	const planAvailabilityForPurchase = useCheckPlanAvailabilityForPurchase( {
 		planSlugs,
 		siteId,
@@ -112,6 +116,7 @@ const usePricingMetaForGridPlans = ( {
 					originalPrice: Plans.PlanPricing[ 'originalPrice' ];
 					discountedPrice: Plans.PlanPricing[ 'discountedPrice' ];
 					currencyCode: Plans.PlanPricing[ 'currencyCode' ];
+					introOffer: Plans.PlanPricing[ 'introOffer' ];
 				};
 		  }
 		| null = null;
@@ -129,14 +134,26 @@ const usePricingMetaForGridPlans = ( {
 				const plan = plans.data?.[ planSlug ];
 				const sitePlan = sitePlans.data?.[ planSlug ];
 				const selectedStorageOption = selectedStorageOptions?.[ planSlug ];
-				const selectedStorageAddOn = selectedStorageOption
-					? storageAddOns?.find( ( addOn ) => {
-							return addOn?.addOnSlug === selectedStorageOption;
-					  } )
-					: null;
+				const selectedStorageAddOn =
+					selectedStorageOption && reflectStorageSelectionInPlanPrices
+						? storageAddOns?.find( ( addOn ) => {
+								return addOn?.addOnSlug === selectedStorageOption;
+						  } )
+						: null;
 				const storageAddOnPriceMonthly = selectedStorageAddOn?.prices?.monthlyPrice || 0;
 				const storageAddOnPriceYearly = selectedStorageAddOn?.prices?.yearlyPrice || 0;
 
+				const introOffer = introOffers?.[ planSlug ];
+
+				const introOfferPrice = introOffer
+					? ( {
+							monthly: introOffer.rawPrice.monthly + storageAddOnPriceMonthly,
+							full:
+								introOffer.rawPrice.full +
+								( 'year' === introOffer.intervalUnit ? storageAddOnPriceYearly : 0 ),
+					  } as const )
+					: undefined;
+
 				/**
 				 * 0. No plan or sitePlan (when selected site exists): planSlug is for a priceless plan.
 				 * TODO clk: the condition on `.pricing` here needs investigation. There should be a pricing object for all returned API plans.
@@ -213,11 +230,21 @@ const usePricingMetaForGridPlans = ( {
 						full: getTotalPrice( sitePlan?.pricing.originalPrice.full, storageAddOnPriceYearly ),
 					};
 
-					// Do not return discounted prices if discount is due to plan proration
+					// Do not return discounted prices if discount is due to plan or domain proration.
+					// If there is, however, a sale coupon, show the discounted price
+					// without proration. This isn't ideal, but is intentional. Because of
+					// this, the price will differ between the plans grid and checkout screen.
+					const costOverrideCode = sitePlan?.pricing?.costOverrides?.[ 0 ]?.overrideCode;
+					const hasProratedCostOverride =
+						costOverrideCode &&
+						[
+							COST_OVERRIDE_REASONS.RECENT_PLAN_PRORATION,
+							COST_OVERRIDE_REASONS.RECENT_DOMAIN_PRORATION,
+						].includes( costOverrideCode );
 					if (
+						! sitePlan?.pricing?.hasSaleCoupon &&
 						! withProratedDiscounts &&
-						sitePlan?.pricing?.costOverrides?.[ 0 ]?.overrideCode ===
-							COST_OVERRIDE_REASONS.RECENT_PLAN_PRORATION
+						hasProratedCostOverride
 					) {
 						return [
 							planSlug,
@@ -228,6 +255,12 @@ const usePricingMetaForGridPlans = ( {
 									full: null,
 								},
 								currencyCode: sitePlan?.pricing?.currencyCode,
+								...( sitePlan?.pricing.introOffer && {
+									introOffer: {
+										...sitePlan?.pricing.introOffer,
+										rawPrice: introOfferPrice,
+									},
+								} ),
 							},
 						];
 					}
@@ -246,6 +279,12 @@ const usePricingMetaForGridPlans = ( {
 							originalPrice,
 							discountedPrice,
 							currencyCode: sitePlan?.pricing?.currencyCode,
+							...( sitePlan?.pricing.introOffer && {
+								introOffer: {
+									...sitePlan?.pricing.introOffer,
+									rawPrice: introOfferPrice,
+								},
+							} ),
 						},
 					];
 				}
@@ -272,6 +311,12 @@ const usePricingMetaForGridPlans = ( {
 							originalPrice,
 							discountedPrice,
 							currencyCode: plan?.pricing?.currencyCode,
+							...( plan?.pricing.introOffer && {
+								introOffer: {
+									...plan?.pricing.introOffer,
+									rawPrice: introOfferPrice,
+								},
+							} ),
 						},
 					];
 				}
@@ -294,6 +339,12 @@ const usePricingMetaForGridPlans = ( {
 							full: null,
 						},
 						currencyCode: plan?.pricing?.currencyCode,
+						...( plan?.pricing.introOffer && {
+							introOffer: {
+								...plan?.pricing.introOffer,
+								rawPrice: introOfferPrice,
+							},
+						} ),
 					},
 				];
 			} )
@@ -314,7 +365,7 @@ const usePricingMetaForGridPlans = ( {
 					// TODO clk: the condition on `.pricing` here needs investigation. There should be a pricing object for all returned API plans.
 					currencyCode: planPrices?.[ planSlug ]?.currencyCode,
 					expiry: sitePlans.data?.[ planSlug ]?.expiry,
-					introOffer: introOffers?.[ planSlug ],
+					introOffer: planPrices?.[ planSlug ]?.introOffer,
 				},
 			} ),
 			{} as { [ planSlug in PlanSlug ]?: Plans.PricingMetaForGridPlan }