Receipts: show more details about Jetpack Search tier (#97803)

- Shows "Purchase for %(quantity)d search records/requests" instead of "Purchase of %(quantity)d item" for Jetpack Search products
- Adds price breakdown for Jetpack Search plans

client/me/purchases/billing-history/receipt.tsx

@@ -41,6 +41,8 @@ import {
 	renderTransactionQuantitySummary,
 	renderDomainTransactionVolumeSummary,
 	transactionIncludesTax,
+	isTransactionJetpackSearch10kTier,
+	renderJetpackSearch10kTierBreakdown,
 } from './utils';
 import { VatVendorDetails } from './vat-vendor-details';
 import type {
@@ -520,14 +522,13 @@ function ReceiptLineItem( {
 	const translate = useTranslate();
 	const termLabel = getTransactionTermLabel( item, translate );
 	const shouldShowDiscount = areReceiptItemDiscountsAccurate( transaction.date );
-	const formattedAmount = formatCurrency(
-		shouldShowDiscount ? getReceiptItemOriginalCost( item ) : item.subtotal_integer,
-		item.currency,
-		{
-			isSmallestUnit: true,
-			stripZeros: true,
-		}
-	);
+	const subtotal_integer = shouldShowDiscount
+		? getReceiptItemOriginalCost( item )
+		: item.subtotal_integer;
+	const formattedAmount = formatCurrency( subtotal_integer, item.currency, {
+		isSmallestUnit: true,
+		stripZeros: true,
+	} );
 	return (
 		<>
 			<tr>
@@ -539,6 +540,9 @@ function ReceiptLineItem( {
 					{ item.licensed_quantity && (
 						<em>{ renderTransactionQuantitySummary( item, translate ) }</em>
 					) }
+					{ isTransactionJetpackSearch10kTier( item ) && (
+						<em>{ renderJetpackSearch10kTierBreakdown( item, subtotal_integer, translate ) }</em>
+					) }
 					{ item.volume && <em>{ renderDomainTransactionVolumeSummary( item, translate ) }</em> }
 				</td>
 				<td className="billing-history__receipt-amount">

client/me/purchases/billing-history/test-fixtures/billing-transactions.ts

@@ -34,6 +34,7 @@ export const createBaseTransaction = (): BillingTransaction => ( {
 			variation_slug: '',
 			months_per_renewal_interval: 0,
 			wpcom_product_slug: '',
+			price_tier_slug: null,
 		},
 	],
 	address: '',

client/me/purchases/billing-history/utils.tsx

@@ -4,6 +4,7 @@ import {
 	isGoogleWorkspace,
 	isTitanMail,
 	isTieredVolumeSpaceAddon,
+	isJetpackSearch,
 } from '@automattic/calypso-products';
 import formatCurrency from '@automattic/format-currency';
 import { LocalizeProps, useTranslate } from 'i18n-calypso';
@@ -211,6 +212,24 @@ function renderDIFMTransactionQuantitySummary(
 	);
 }
 
+function renderJetpackSearchQuantitySummary(
+	licensed_quantity: number,
+	isRenewal: boolean,
+	translate: LocalizeProps[ 'translate' ]
+) {
+	if ( isRenewal ) {
+		translate( 'Renewal for %(quantity)d search records/requests', {
+			args: { quantity: licensed_quantity },
+			comment: '%(quantity)d is the number of search records or search requests',
+		} );
+	}
+
+	return translate( 'Purchase for %(quantity)d search records/requests', {
+		args: { quantity: licensed_quantity },
+		comment: '%(quantity)d is the number of search records or search requests',
+	} );
+}
+
 function renderSpaceAddOnquantitySummary(
 	licensed_quantity: number,
 	isRenewal: boolean,
@@ -282,6 +301,10 @@ export function renderTransactionQuantitySummary(
 	const isRenewal = 'recurring' === type;
 	const isUpgrade = 'new purchase' === type && new_quantity > 0;
 
+	if ( isJetpackSearch( product ) ) {
+		return renderJetpackSearchQuantitySummary( licensed_quantity, isRenewal, translate );
+	}
+
 	if ( isGoogleWorkspace( product ) || isTitanMail( product ) ) {
 		return renderTransactionQuantitySummaryForMailboxes(
 			licensed_quantity,
@@ -363,3 +386,45 @@ export function formatMonthYear( date: Date ): string {
 	const month = String( date.getMonth() + 1 ).padStart( 2, '0' );
 	return `${ year }-${ month }`;
 }
+
+export function isTransactionJetpackSearch10kTier( {
+	wpcom_product_slug,
+	licensed_quantity,
+	price_tier_slug,
+}: BillingTransactionItem ): boolean {
+	const product = { product_slug: wpcom_product_slug };
+	return (
+		isJetpackSearch( product ) &&
+		licensed_quantity !== null &&
+		price_tier_slug === 'additional_10k_queries_and_records'
+	);
+}
+
+export function renderJetpackSearch10kTierBreakdown(
+	{ licensed_quantity, currency }: BillingTransactionItem,
+	subtotal_integer: number,
+	translate: LocalizeProps[ 'translate' ]
+) {
+	if ( ! licensed_quantity ) {
+		return null;
+	}
+
+	const number_of_units = Math.ceil( licensed_quantity / 10000 );
+	const price_per_unit = subtotal_integer / number_of_units;
+	const formatted_price_per_unit = formatCurrency( price_per_unit, currency, {
+		isSmallestUnit: true,
+		stripZeros: true,
+	} );
+	return translate(
+		'%(number_of_units)d unit @ %(formatted_price_per_unit)s',
+		'%(number_of_units)d units @ %(formatted_price_per_unit)s',
+		{
+			args: {
+				number_of_units: number_of_units,
+				formatted_price_per_unit: formatted_price_per_unit,
+			},
+			count: number_of_units,
+			comment: '@ is a symbol representing the word "at" (in english)',
+		}
+	);
+}

client/state/billing-transactions/types.ts

@@ -155,6 +155,12 @@ export interface BillingTransactionItem {
 	variation_slug: string;
 	months_per_renewal_interval: number;
 	wpcom_product_slug: string;
+
+	/**
+	 * Slug for price tier, available only if product supports usage-based tiered pricing.
+	 * See D40809-code for details.
+	 */
+	price_tier_slug: string | null;
 }
 
 export interface ReceiptCostOverride {