@automattic/data-stores 3.1.2 → 3.2.1

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

@@ -58,6 +58,12 @@ interface Props {
 	 * from the final price.
 	 */
 	reflectStorageSelectionInPlanPrices?: boolean;
+
+	/**
+	 * Renewal-pricing experiment flag. When falsy (non-treatment), the current plan's
+	 * headline uses the renewal price, not an active intro price.
+	 */
+	showBillingDescriptionForIncreasedRenewalPrice?: string | null;
 }
 
 function getTotalPrice( planPrice: number | null | undefined, addOnPrice = 0 ): number | null {
@@ -81,6 +87,7 @@ const usePricingMetaForGridPlans = ( {
 	useCheckPlanAvailabilityForPurchase,
 	withProratedDiscounts,
 	reflectStorageSelectionInPlanPrices = false,
+	showBillingDescriptionForIncreasedRenewalPrice,
 }: 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 } );
@@ -117,6 +124,7 @@ const usePricingMetaForGridPlans = ( {
 					discountedPrice: Plans.PlanPricing[ 'discountedPrice' ];
 					currencyCode: Plans.PlanPricing[ 'currencyCode' ];
 					introOffer: Plans.PlanPricing[ 'introOffer' ];
+					renewalPrice?: Plans.PlanPricing[ 'originalPrice' ];
 				};
 		  }
 		| null = null;
@@ -185,18 +193,38 @@ const usePricingMetaForGridPlans = ( {
 					let fullPrice = sitePlan?.pricing.originalPrice.full;
 
 					/**
-					 * Ensure the spotlight (current) plan shows the price with which the plan was purchased.
+					 * Spotlight (current) plan headline. Only the renewal-pricing experiment treatment shows
+					 * the active intro price (with a separate "renews at" line); everyone else sees the renewal
+					 * price, so the headline is never lower than what they'll actually pay.
 					 */
+					let renewalPrice: Plans.PlanPricing[ 'originalPrice' ] | undefined;
+
 					if ( purchasedPlan ) {
+						const showIntroOfferHeadline =
+							!! showBillingDescriptionForIncreasedRenewalPrice &&
+							purchasedPlan.introductoryOffer?.isWithinPeriod;
+						const currentTermPrice = showIntroOfferHeadline
+							? purchasedPlan.introductoryOffer!.costPerIntervalInteger
+							: purchasedPlan.priceInteger;
 						const isMonthly = purchasedPlan.billPeriodDays === PLAN_MONTHLY_PERIOD;
 
-						if ( isMonthly && monthlyPrice !== purchasedPlan.priceInteger ) {
-							monthlyPrice = purchasedPlan.priceInteger;
-							fullPrice = parseFloat( ( purchasedPlan.priceInteger * 12 ).toFixed( 2 ) );
-						} else if ( fullPrice !== purchasedPlan.priceInteger ) {
+						if ( isMonthly && monthlyPrice !== currentTermPrice ) {
+							monthlyPrice = currentTermPrice;
+							fullPrice = parseFloat( ( currentTermPrice * 12 ).toFixed( 2 ) );
+						} else if ( fullPrice !== currentTermPrice ) {
 							const term = getTermFromDuration( purchasedPlan.billPeriodDays ) || '';
-							monthlyPrice = calculateMonthlyPrice( term, purchasedPlan.priceInteger );
-							fullPrice = purchasedPlan.priceInteger;
+							monthlyPrice = calculateMonthlyPrice( term, currentTermPrice );
+							fullPrice = currentTermPrice;
+						}
+
+						if ( showIntroOfferHeadline ) {
+							const renewalTerm = getTermFromDuration( purchasedPlan.billPeriodDays ) || '';
+							renewalPrice = {
+								monthly: isMonthly
+									? purchasedPlan.priceInteger
+									: calculateMonthlyPrice( renewalTerm, purchasedPlan.priceInteger ),
+								full: purchasedPlan.priceInteger,
+							};
 						}
 					}
 
@@ -214,6 +242,7 @@ const usePricingMetaForGridPlans = ( {
 							currencyCode: purchasedPlan
 								? purchasedPlan?.currencyCode
 								: plan?.pricing?.currencyCode,
+							...( renewalPrice && { renewalPrice } ),
 						},
 					];
 				}
@@ -234,13 +263,13 @@ const usePricingMetaForGridPlans = ( {
 					// 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 );
+					const hasProratedCostOverride = sitePlan?.pricing?.costOverrides?.some(
+						( { overrideCode } ) =>
+							[
+								COST_OVERRIDE_REASONS.RECENT_PLAN_PRORATION,
+								COST_OVERRIDE_REASONS.RECENT_DOMAIN_PRORATION,
+							].includes( overrideCode )
+					);
 					if (
 						! sitePlan?.pricing?.hasSaleCoupon &&
 						! withProratedDiscounts &&
@@ -258,7 +287,7 @@ const usePricingMetaForGridPlans = ( {
 								...( sitePlan?.pricing.introOffer && {
 									introOffer: {
 										...sitePlan?.pricing.introOffer,
-										rawPrice: introOfferPrice,
+										...( introOfferPrice && { rawPrice: introOfferPrice } ),
 									},
 								} ),
 							},
@@ -282,7 +311,7 @@ const usePricingMetaForGridPlans = ( {
 							...( sitePlan?.pricing.introOffer && {
 								introOffer: {
 									...sitePlan?.pricing.introOffer,
-									rawPrice: introOfferPrice,
+									...( introOfferPrice && { rawPrice: introOfferPrice } ),
 								},
 							} ),
 						},
@@ -314,7 +343,7 @@ const usePricingMetaForGridPlans = ( {
 							...( plan?.pricing.introOffer && {
 								introOffer: {
 									...plan?.pricing.introOffer,
-									rawPrice: introOfferPrice,
+									...( introOfferPrice && { rawPrice: introOfferPrice } ),
 								},
 							} ),
 						},
@@ -342,7 +371,7 @@ const usePricingMetaForGridPlans = ( {
 						...( plan?.pricing.introOffer && {
 							introOffer: {
 								...plan?.pricing.introOffer,
-								rawPrice: introOfferPrice,
+								...( introOfferPrice && { rawPrice: introOfferPrice } ),
 							},
 						} ),
 					},
@@ -366,6 +395,7 @@ const usePricingMetaForGridPlans = ( {
 					currencyCode: planPrices?.[ planSlug ]?.currencyCode,
 					expiry: sitePlans.data?.[ planSlug ]?.expiry,
 					introOffer: planPrices?.[ planSlug ]?.introOffer,
+					renewalPrice: planPrices?.[ planSlug ]?.renewalPrice,
 				},
 			} ),
 			{} as { [ planSlug in PlanSlug ]?: Plans.PricingMetaForGridPlan }

package/src/plans/index.ts

@@ -47,6 +47,7 @@ export {
 	TIMELESS_PLAN_BUSINESS,
 	TIMELESS_PLAN_ECOMMERCE,
 	FREE_PLAN_PRODUCT_ID,
+	COST_OVERRIDE_REASONS,
 } from './constants';
 
 let isRegistered = false;

package/src/plans/queries/use-plans.ts

@@ -1,7 +1,8 @@
+import { isEnabled } from '@automattic/calypso-config';
 import { calculateMonthlyPriceForPlan } from '@automattic/calypso-products';
 import { useLocale } from '@automattic/i18n-utils';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../../wpcom-request';
 import unpackIntroOffer from './lib/unpack-intro-offer';
 import useQueryKeysFactory from './lib/use-query-keys-factory';
 import type { PricedAPIPlan, PlanNext } from '../types';
@@ -10,6 +11,28 @@ interface PlansIndex {
 	[ planSlug: string ]: PlanNext;
 }
 
+type RequestFunction = ( params: {
+	path: string;
+	apiVersion: string;
+	query: string;
+} ) => Promise< PricedAPIPlan[] >;
+
+/**
+ * Request function for Jetpack that bypasses proxy and goes directly to WordPress.com
+ */
+const jetpackRequestFunction: RequestFunction = async ( params ) => {
+	const queryParams = params.query ? `?${ params.query }` : '';
+	const url = `https://public-api.wordpress.com/rest/v${ params.apiVersion }${ params.path }${ queryParams }`;
+	const response = await fetch( url, {
+		method: 'GET',
+		credentials: 'omit', // Don't send cookies to avoid CORS issues
+	} );
+	if ( ! response.ok ) {
+		throw new Error( `API request failed: ${ response.status }` );
+	}
+	return response.json();
+};
+
 /**
  * Plans from `/plans` endpoint, transformed into a map of planSlug => PlanNext
  */
@@ -27,10 +50,15 @@ function usePlans( {
 	coupon && params.append( 'coupon_code', coupon );
 	params.append( 'locale', locale );
 
+	// Auto-detect Jetpack context and use appropriate request function
+	const isJetpack = isEnabled( 'is_running_in_jetpack_site' );
+
+	const requestFn = isJetpack ? jetpackRequestFunction : wpcomRequest;
+
 	return useQuery( {
 		queryKey: queryKeys.plans( coupon ),
 		queryFn: async (): Promise< PlansIndex > => {
-			const data: PricedAPIPlan[] = await wpcomRequest( {
+			const data: PricedAPIPlan[] = await requestFn( {
 				path: '/plans',
 				apiVersion: '1.5',
 				query: params.toString(),

package/src/plans/queries/use-site-plans.ts

@@ -1,6 +1,6 @@
 import { calculateMonthlyPriceForPlan } from '@automattic/calypso-products';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../../wpcom-request';
 import unpackCostOverrides from './lib/unpack-cost-overrides';
 import unpackIntroOffer from './lib/unpack-intro-offer';
 import useQueryKeysFactory from './lib/use-query-keys-factory';

package/src/plans/resolvers.ts

@@ -142,7 +142,6 @@ function normalizePlanProducts(
 			periodAgnosticSlug: periodAgnosticPlan.periodAgnosticSlug,
 			storeSlug: planProduct.product_slug,
 			rawPrice: planProduct.raw_price,
-			// Not all plans returned from /plans have a `path_slug` (e.g. monthly plans don't have)
 			pathSlug: planProduct.path_slug,
 			price:
 				planProduct?.bill_period === MONTHLY_PLAN_BILLING_PERIOD || planProduct.raw_price === 0

package/src/plans/selectors.ts

@@ -38,7 +38,7 @@ export const getPlanByProductId = (
 		return undefined;
 	}
 
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getSupportedPlans( locale )
 		.find( ( plan: Plan ) => plan.productIds.indexOf( productId ) > -1 );
 };
@@ -51,7 +51,7 @@ export const getPlanProductById = (
 		return undefined;
 	}
 
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getPlansProducts()
 		.find( ( product: PlanProduct ) => product.productId === productId );
 };
@@ -64,19 +64,19 @@ export const getPlanByPeriodAgnosticSlug = (
 	if ( ! slug ) {
 		return undefined;
 	}
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getSupportedPlans( locale )
 		.find( ( plan: Plan ) => plan.periodAgnosticSlug === slug );
 };
 
 export const getDefaultPaidPlan = ( _: State, locale: string ): Plan | undefined => {
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getSupportedPlans( locale )
 		.find( ( plan: Plan ) => plan.periodAgnosticSlug === DEFAULT_PAID_PLAN );
 };
 
 export const getDefaultFreePlan = ( _: State, locale: string ): Plan | undefined => {
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getSupportedPlans( locale )
 		.find( ( plan: Plan ) => plan.periodAgnosticSlug === TIMELESS_PLAN_FREE );
 };
@@ -98,7 +98,7 @@ export const getPrices = ( _state: State, _locale: string ): Record< StorePlanSl
 	deprecate( 'getPrices', {
 		alternative: 'getPlanProduct().price',
 	} );
-	return ( select( STORE_KEY ) as PlansSelect ).getPlansProducts().reduce(
+	return ( select( STORE_KEY ) as unknown as PlansSelect ).getPlansProducts().reduce(
 		( prices: Record< StorePlanSlug, string >, plan: PlanProduct ) => {
 			prices[ plan.storeSlug ] = plan.price;
 			return prices;
@@ -116,7 +116,7 @@ export const getPlanByPath = (
 		return undefined;
 	}
 
-	const planProduct = ( select( STORE_KEY ) as PlansSelect )
+	const planProduct = ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getPlansProducts()
 		.find( ( product: PlanProduct ) => product.pathSlug === path );
 
@@ -124,7 +124,7 @@ export const getPlanByPath = (
 		return undefined;
 	}
 
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getSupportedPlans( locale )
 		.find( ( plan: Plan ) => plan.periodAgnosticSlug === planProduct.periodAgnosticSlug );
 };
@@ -138,7 +138,7 @@ export const getPlanProduct = (
 		return undefined;
 	}
 
-	return ( select( STORE_KEY ) as PlansSelect )
+	return ( select( STORE_KEY ) as unknown as PlansSelect )
 		.getPlansProducts()
 		.find( ( product: PlanProduct ) => {
 			const matchesSlug = product.periodAgnosticSlug === periodAgnosticSlug;

package/src/plans/types.ts

@@ -146,6 +146,12 @@ export interface PricingMetaForGridPlan {
 	 */
 	introOffer?: PlanPricing[ 'introOffer' ];
 	expiry?: SitePlan[ 'expiry' ];
+	/**
+	 * The renewal price for the current plan when it differs from originalPrice
+	 * (e.g. when the current billing term has an active intro offer).
+	 * Used by renewal pricing text to show what the plan will cost after the offer ends.
+	 */
+	renewalPrice?: PlanPricing[ 'originalPrice' ];
 }
 
 export interface SitePlan {

package/src/products-list/queries/use-products.ts

@@ -1,7 +1,7 @@
 import { useLocale } from '@automattic/i18n-utils';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import wpcomRequest from 'wpcom-proxy-request';
 import * as ProductsList from '../../products-list';
+import wpcomRequest from '../../wpcom-request';
 import useQueryKeysFactory from './lib/use-query-keys-factory';
 import type { StoreProductSlug, Product, RawAPIProductsList } from '../types';
 

package/src/products-list/resolvers.ts

@@ -1,4 +1,4 @@
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../wpcom-request';
 import { RawAPIProductsList, ProductsListFailure, Dispatch } from './types';
 
 /**

package/src/products-list/selectors.ts

@@ -14,7 +14,7 @@ export const getProductBySlug = ( _state: State, slug: string ) => {
 		return undefined;
 	}
 	const products = (
-		select( STORE_KEY ) as { getProductsList: () => RawAPIProductsList | undefined }
+		select( STORE_KEY ) as unknown as { getProductsList: () => RawAPIProductsList | undefined }
 	 ).getProductsList();
 
 	if ( ! products ) {

package/src/products-list/test/selectors.ts

@@ -6,10 +6,10 @@
  * @jest-environment jsdom
  */
 import { select, subscribe } from '@wordpress/data';
-import wpcomRequest from 'wpcom-proxy-request';
 import { store } from '../';
+import wpcomRequest from '../../wpcom-request';
 
-jest.mock( 'wpcom-proxy-request', () => ( {
+jest.mock( '../../wpcom-request', () => ( {
 	__esModule: true,
 	default: jest.fn(),
 } ) );

package/src/purchases/lib/assembler.ts

@@ -1,11 +1,14 @@
 import { snakeToCamelCase } from '@automattic/js-utils';
-import type { PurchasePriceTier, Purchase, RawPurchase, RawPurchaseCreditCard } from '../types';
+import type { PurchasePriceTier, Purchase, RawPurchase } from '../types';
 
-export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditCard ): Purchase {
+export function createPurchaseObject( purchase: RawPurchase ): Purchase {
 	const object: Purchase = {
 		id: Number( purchase.ID ),
-		active: Boolean( purchase.active ),
 		amount: Number( purchase.amount ),
+		advertisedTotalUploadSpaceInGb:
+			purchase.advertised_total_upload_space_in_gb == null
+				? null
+				: Number( purchase.advertised_total_upload_space_in_gb ),
 		attachedToPurchaseId: Number( purchase.attached_to_purchase_id ),
 		autoRenewCouponCode: purchase.auto_renew_coupon_code,
 		autoRenewCouponDiscountPercentage: Number( purchase.auto_renew_coupon_discount_percentage ),
@@ -16,20 +19,15 @@ export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditC
 		canDisableAutoRenew: Boolean( purchase.can_disable_auto_renew ),
 		canReenableAutoRenewal: Boolean( purchase.can_reenable_auto_renewal ),
 		canExplicitRenew: Boolean( purchase.can_explicit_renew ),
-		costToUnbundle: purchase.cost_to_unbundle
-			? Number( purchase.cost_to_unbundle )
-			: Number( purchase.amount ),
-		costToUnbundleText: purchase.cost_to_unbundle_display
-			? purchase.cost_to_unbundle_display
-			: purchase.price_text,
+		costToUnbundleText: purchase.cost_to_unbundle_display ?? '',
 		currencyCode: purchase.currency_code,
 		currencySymbol: purchase.currency_symbol,
 		description: purchase.description,
 		domain: purchase.domain,
 		domainRegistrationAgreementUrl: purchase.domain_registration_agreement_url || null,
-		error: null,
 		blogCreatedDate: purchase.blog_created_date,
 		expiryDate: purchase.expiry_date,
+		paymentExpiryDate: purchase.payment_expiry_date,
 		expiryStatus: snakeToCamelCase( purchase.expiry_status ),
 		iapPurchaseManagementLink: purchase.iap_purchase_management_link,
 		includedDomain: purchase.included_domain,
@@ -37,6 +35,7 @@ export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditC
 		introductoryOffer: purchase.introductory_offer
 			? {
 					costPerInterval: Number( purchase.introductory_offer.cost_per_interval ),
+					costPerIntervalInteger: Number( purchase.introductory_offer.cost_per_interval_integer ),
 					endDate: String( purchase.introductory_offer.end_date ),
 					intervalCount: Number( purchase.introductory_offer.interval_count ),
 					intervalUnit: String( purchase.introductory_offer.interval_unit ),
@@ -62,8 +61,9 @@ export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditC
 		isHundredYearDomain: Boolean( purchase.is_hundred_year_domain ),
 		isLocked: Boolean( purchase.is_locked ),
 		isInAppPurchase: Boolean( purchase.is_iap_purchase ),
-		isRechargeable: Boolean( purchase.is_rechargable ),
+		isRechargeable: Boolean( purchase.is_rechargeable ),
 		isRefundable: Boolean( purchase.is_refundable ),
+		isWithinInitialRefundWindow: Boolean( purchase.is_within_initial_refund_window ),
 		isRenewable: Boolean( purchase.is_renewable ),
 		isRenewal: Boolean( purchase.is_renewal ),
 		isWooExpressTrial: Boolean( purchase.is_woo_express_trial ),
@@ -117,26 +117,21 @@ export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditC
 		siteSlug: purchase.site_slug,
 		subscribedDate: purchase.subscribed_date,
 		subscriptionStatus: purchase.subscription_status,
-		tagLine: purchase.tag_line,
-		taxAmount: purchase.tax_amount,
-		taxText: purchase.tax_text,
 		purchaseRenewalQuantity: purchase.renewal_price_tier_usage_quantity || null,
 		userId: Number( purchase.user_id ),
-		isAutoRenewEnabled: parseInt( purchase.auto_renew ?? '' ) === 1,
+		isAutoRenewEnabled: purchase.is_auto_renew_enabled,
+		isJetpackPlanOrProduct: purchase.is_jetpack_plan_or_product,
+		isAttachedToHoldingSite: Boolean( purchase.is_attached_to_holding_site ),
 	};
 
-	if ( purchase.purchaser_id ) {
-		object.purchaserId = Number( purchase.purchaser_id );
-	}
-
 	if ( isCreditCardPurchase( purchase ) ) {
 		object.payment.creditCard = {
 			id: Number( purchase.payment_card_id ),
-			type: purchase.payment_card_type,
+			type: purchase.payment_card_type ?? '',
 			displayBrand: purchase.payment_card_display_brand,
-			processor: purchase.payment_card_processor,
-			number: purchase.payment_details,
-			expiryDate: purchase.payment_expiry,
+			processor: purchase.payment_card_processor ?? '',
+			number: purchase.payment_details ?? '',
+			expiryDate: purchase.payment_expiry ?? '',
 		};
 	}
 
@@ -147,15 +142,11 @@ export function createPurchaseObject( purchase: RawPurchase | RawPurchaseCreditC
 	return object;
 }
 
-function isCreditCardPurchase(
-	purchase: RawPurchase | RawPurchaseCreditCard
-): purchase is RawPurchaseCreditCard {
+function isCreditCardPurchase( purchase: RawPurchase ): boolean {
 	return purchase.payment_type === 'credit_card';
 }
 
-export function createPurchasesArray(
-	dataTransferObject: undefined | ( RawPurchase | RawPurchaseCreditCard )[]
-): Purchase[] {
+export function createPurchasesArray( dataTransferObject: undefined | RawPurchase[] ): Purchase[] {
 	if ( ! Array.isArray( dataTransferObject ) ) {
 		return [];
 	}

package/src/purchases/queries/use-get-jetpack-transferred-license-purchases.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../../wpcom-request';
 import { createPurchaseObject } from '../lib/assembler';
 import useQueryKeysFactory from './lib/use-query-keys-factory';
 import type { RawPurchase, Purchase } from '../types';

package/src/purchases/queries/use-site-purchases.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import wpcomRequest from 'wpcom-proxy-request';
+import wpcomRequest from '../../wpcom-request';
 import { createPurchaseObject } from '../lib/assembler';
 import useQueryKeysFactory from './lib/use-query-keys-factory';
 import type { RawPurchase, Purchase } from '../types';
@@ -21,7 +21,7 @@ export function getUseSitePurchasesOptions(
 		queryFn: async (): Promise< PurchasesIndex > => {
 			const purchases: RawPurchase[] = await wpcomRequest( {
 				path: `/sites/${ encodeURIComponent( siteId as string ) }/purchases`,
-				apiVersion: '1.1',
+				apiVersion: '1.2',
 			} );
 
 			return Object.fromEntries(