Receipts: Specify Automattic is the payment processor for membership …

…receipts (#98560) After deploying 2989-gh-Automattic/payments-shilling, it was pointed out that that having receipts for membership purchases show by Automattic is less than idea`l. This PR utilizes the service_slug passed from the transactions API and alters the string to payment processed` by in the case of memberships. Changes Include: * Include service slug for header display * Specify Automattic is only payment processor for memberships * Update tests * Translate strings individually --------- Co-authored-by: Jess Boctor <[email protected]>
Automattic · Jan 31, 2025 · d73d080 · d73d080
1 parent f2d429e
commit d73d080
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 14 deletions.
diff --git a/client/me/purchases/billing-history/receipt.tsx b/client/me/purchases/billing-history/receipt.tsx
@@ -139,26 +139,51 @@ export function ReceiptBody( {
 	const title = translate( 'Visit %(url)s', { args: { url: transaction.url }, textOnly: true } );
 	const serviceLink = <a href={ transaction.url } title={ title } />;
 
+	const membershipServiceHeader = translate(
+		'{{link}}%(service)s{{/link}} {{small}}Payment processed by %(organization)s{{/small}}',
+		{
+			components: {
+				link: serviceLink,
+				small: <small />,
+			},
+			args: {
+				service: transaction.service,
+				organization: transaction.org,
+			},
+			comment:
+				'This string is "Service Payment processed by Organization". ' +
+				'The {{link}} and {{small}} add html styling and attributes. ' +
+				'Screenshot: https://cloudup.com/isX-WEFYlOs',
+		}
+	);
+
+	const connectedServiceHeader = translate(
+		'{{link}}%(service)s{{/link}} {{small}}by %(organization)s{{/small}}',
+		{
+			components: {
+				link: serviceLink,
+				small: <small />,
+			},
+			args: {
+				service: transaction.service,
+				organization: transaction.org,
+			},
+			comment:
+				'This string is "Service by Organization". ' +
+				'The {{link}} and {{small}} add html styling and attributes. ' +
+				'Screenshot: https://cloudup.com/isX-WEFYlOs',
+		}
+	);
+
 	return (
 		<div>
 			<Card compact className="billing-history__receipt-card">
 				<div className="billing-history__app-overview">
 					<img src={ transaction.icon } title={ transaction.service } alt={ transaction.service } />
 					<h2>
-						{ translate( '{{link}}%(service)s{{/link}} {{small}}by %(organization)s{{/small}}', {
-							components: {
-								link: serviceLink,
-								small: <small />,
-							},
-							args: {
-								service: transaction.service,
-								organization: transaction.org,
-							},
-							comment:
-								'This string is "Service by Organization". ' +
-								'The {{link}} and {{small}} add html styling and attributes. ' +
-								'Screenshot: https://cloudup.com/isX-WEFYlOs',
-						} ) }
+						{ 'memberships' === transaction.service_slug
+							? membershipServiceHeader
+							: connectedServiceHeader }
 						<small className="billing-history__organization-address">{ transaction.address }</small>
 					</h2>
 					<span className="billing-history__transaction-date">

diff --git a/client/me/purchases/billing-history/test-fixtures/billing-transactions.ts b/client/me/purchases/billing-history/test-fixtures/billing-transactions.ts
@@ -4,6 +4,7 @@ export const createBaseTransaction = (): BillingTransaction => ( {
 	id: 'mock-transaction',
 	date: '2023-01-01',
 	service: 'WordPress.com',
+	service_slug: 'wordpress',
 	amount: '$10.00',
 	amount_integer: 1000,
 	currency: 'USD',
@@ -71,6 +72,7 @@ export const mockTransactions: BillingTransaction[] = [
 		...createBaseTransaction(),
 		id: 'wp-premium',
 		service: 'WordPress.com',
+		service_slug: 'wordpress',
 		amount: '$20.00',
 		amount_integer: 2000,
 		date: '2023-01-15',
@@ -88,6 +90,7 @@ export const mockTransactions: BillingTransaction[] = [
 		...createBaseTransaction(),
 		id: 'jp-backup',
 		service: 'Jetpack',
+		service_slug: 'automattic',
 		amount: '$15.00',
 		amount_integer: 1500,
 		date: '2023-02-01',
@@ -105,6 +108,7 @@ export const mockTransactions: BillingTransaction[] = [
 		...createBaseTransaction(),
 		id: 'woo-basic',
 		service: 'Store Services',
+		service_slug: 'woo',
 		amount: '$25.00',
 		amount_integer: 2500,
 		date: '2023-03-01',

diff --git a/client/state/billing-transactions/types.ts b/client/state/billing-transactions/types.ts
@@ -43,6 +43,7 @@ export interface BillingTransaction {
 	pay_part: string;
 	pay_ref: string;
 	service: string;
+	service_slug: string;
 
 	/**
 	 * @deprecated use subtotal_integer