Translate strings individually

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

@@ -138,32 +138,52 @@ export function ReceiptBody( {
 	const moment = useLocalizedMoment();
 	const title = translate( 'Visit %(url)s', { args: { url: transaction.url }, textOnly: true } );
 	const serviceLink = <a href={ transaction.url } title={ title } />;
-	const headerByLine = 'memberships' === transaction.service_slug ? 'Payment processed by' : 'by';
+
+	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}}%(headerByLine)s %(organization)s{{/small}}',
-							{
-								components: {
-									link: serviceLink,
-									small: <small />,
-								},
-								args: {
-									service: transaction.service,
-									headerByLine: headerByLine,
-									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">