refactor: add Apple Pay and Google Pay definitions

changelog/feat-add-apple-pay-google-pay-definitions

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+refactor: add Apple Pay and Google Pay payment definitions

client/components/payment-method-details/index.tsx

@@ -12,6 +12,7 @@ import './style.scss';
 import p24BankList from '../../payment-details/payment-method/p24/bank-list';
 import { HoverTooltip } from '../tooltip';
 import { getTransactionPaymentMethodTitle } from 'wcpay/transactions/utils/getTransactionPaymentMethodTitle';
+import paymentMethodsMap from 'wcpay/payment-methods-map';
 
 interface Payment {
 	type: string;
@@ -67,6 +68,27 @@ const formatDetails = ( payment: Payment ): ReactNode => {
 	}
 };
 
+const WalletIcon = ( { payment }: PaymentMethodDetailsProps ) => {
+	const { wallet } = payment[ payment.type ];
+	if ( ! wallet ) return null;
+
+	if ( ! wallet.type ) return null;
+
+	const paymentMethod = paymentMethodsMap[ wallet.type ];
+	if ( ! paymentMethod ) return null;
+
+	const { icon: Icon, label } = paymentMethod;
+
+	return (
+		<HoverTooltip
+			isVisible={ false }
+			content={ label }
+			className="payment-method-details__brand-tooltip"
+		>
+			<Icon />
+		</HoverTooltip>
+	);
+};
 interface PaymentMethodDetailsProps {
 	payment: Payment;
 }
@@ -78,20 +100,15 @@ const PaymentMethodDetails = ( { payment }: PaymentMethodDetailsProps ) => {
 		return <span>&ndash;</span>;
 	}
 
-	let brand = payment.type;
-	if ( paymentMethod && paymentMethod.brand ) {
-		brand = paymentMethod.brand;
-	}
-	if ( paymentMethod && paymentMethod.network ) {
-		brand = paymentMethod.network;
-	}
-
 	const details = formatDetails( payment );
 
 	const accountCountry = wcpaySettings?.accountStatus?.country || 'US';
+	const brand =
+		paymentMethod?.brand || paymentMethod?.network || payment?.type;
 
 	return (
 		<span className="payment-method-details">
+			<WalletIcon payment={ payment } />
 			<HoverTooltip
 				isVisible={ false }
 				content={ getTransactionPaymentMethodTitle( brand ) }

client/components/payment-method-details/style.scss

@@ -1,6 +1,13 @@
 /** @format **/
 
 .payment-method-details {
+	gap: 5px;
+
+	.payment-method__icon {
+		width: 28px;
+		width: 1.75rem;
+	}
+
 	.payment-method__brand {
 		width: 28px;
 		width: 1.75rem;

client/constants/payment-method.ts

@@ -11,12 +11,14 @@ enum PAYMENT_METHOD_IDS {
 	AFFIRM = 'affirm',
 	AFTERPAY_CLEARPAY = 'afterpay_clearpay',
 	ALIPAY = 'alipay',
+	APPLE_PAY = 'apple_pay',
 	AU_BECS_DEBIT = 'au_becs_debit',
 	BANCONTACT = 'bancontact',
 	CARD = 'card',
 	CARD_PRESENT = 'card_present',
 	EPS = 'eps',
 	GIROPAY = 'giropay',
+	GOOGLE_PAY = 'google_pay',
 	GRABPAY = 'grabpay',
 	IDEAL = 'ideal',
 	KLARNA = 'klarna',

client/disable-confirmation-modal/index.js

@@ -20,12 +20,7 @@ import PaymentDeleteIllustration from '../components/payment-delete-illustration
 import WooCardIcon from 'assets/images/cards/woo-card.svg?asset';
 import ConfirmationModal from '../components/confirmation-modal';
 import paymentMethodsMap from 'wcpay/payment-methods-map';
-import {
-	ApplePayIcon,
-	GooglePayIcon,
-	LinkIcon,
-	WooIconShort,
-} from 'wcpay/payment-methods-icons';
+import { LinkIcon, WooIconShort } from 'wcpay/payment-methods-icons';
 
 const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
 	const [ enabledMethodIds ] = useEnabledPaymentMethodIds();
@@ -109,20 +104,14 @@ const DisableConfirmationModal = ( { onClose, onConfirm } ) => {
 					<>
 						<li>
 							<PaymentMethodIcon
-								Icon={ GooglePayIcon }
-								label={ __(
-									'Google Pay',
-									'woocommerce-payments'
-								) }
+								Icon={ paymentMethodsMap.google_pay.icon }
+								label={ paymentMethodsMap.google_pay.label }
 							/>
 						</li>
 						<li>
 							<PaymentMethodIcon
-								Icon={ ApplePayIcon }
-								label={ __(
-									'Apple Pay',
-									'woocommerce-payments'
-								) }
+								Icon={ paymentMethodsMap.apple_pay.icon }
+								label={ paymentMethodsMap.apple_pay.label }
 							/>
 						</li>
 					</>

client/express-checkout/transformers/stripe-to-wc.js

@@ -77,10 +77,6 @@ export const transformStripePaymentMethodForStoreApi = (
 				key: 'payment_method',
 				value: 'card',
 			},
-			{
-				key: 'payment_request_type',
-				value: paymentData.expressPaymentType,
-			},
 			{
 				key: 'wcpay-fraud-prevention-token',
 				value: window.wcpayFraudPreventionToken ?? '',

client/express-checkout/utils/__tests__/normalize.test.js

@@ -200,7 +200,6 @@ describe( 'Express checkout normalization', () => {
 				ship_to_different_address: 1,
 				terms: 1,
 				'wcpay-payment-method': paymentMethodId,
-				payment_request_type: 'express',
 				express_payment_type: 'express',
 				'wcpay-fraud-prevention-token': 'token123',
 			};
@@ -242,7 +241,6 @@ describe( 'Express checkout normalization', () => {
 				ship_to_different_address: 1,
 				terms: 1,
 				'wcpay-payment-method': paymentMethodId,
-				payment_request_type: undefined,
 				express_payment_type: undefined,
 				'wcpay-fraud-prevention-token': '',
 			};
@@ -288,7 +286,6 @@ describe( 'Express checkout normalization', () => {
 				ship_to_different_address: 1,
 				terms: 1,
 				'wcpay-payment-method': paymentMethodId,
-				payment_request_type: undefined,
 				express_payment_type: undefined,
 				'wcpay-fraud-prevention-token': '',
 			};

client/express-checkout/utils/normalize.js

@@ -71,7 +71,6 @@ export const normalizeOrderData = ( event, paymentMethodId ) => {
 		ship_to_different_address: 1,
 		terms: 1,
 		'wcpay-payment-method': paymentMethodId,
-		payment_request_type: event?.expressPaymentType,
 		express_payment_type: event?.expressPaymentType,
 		'wcpay-fraud-prevention-token': fraudPreventionTokenValue,
 	};

client/payment-methods-icons.tsx

@@ -14,8 +14,6 @@ import MasterCardAsset from 'assets/images/cards/mastercard.svg?asset';
 import AmexAsset from 'assets/images/cards/amex.svg?asset';
 import WooAsset from 'assets/images/payment-methods/woo.svg?asset';
 import WooAssetShort from 'assets/images/payment-methods/woo-short.svg?asset';
-import ApplePayAsset from 'assets/images/cards/apple-pay.svg?asset';
-import GooglePayAsset from 'assets/images/cards/google-pay.svg?asset';
 import DinersClubAsset from 'assets/images/cards/diners.svg?asset';
 import DiscoverAsset from 'assets/images/cards/discover.svg?asset';
 import CBAsset from 'assets/images/cards/cb.svg?asset';
@@ -49,10 +47,6 @@ export const AmericanExpressIcon = iconComponent(
 	AmexAsset,
 	__( 'American Express', 'woocommerce-payments' )
 );
-export const ApplePayIcon = iconComponent(
-	ApplePayAsset,
-	__( 'Apple Pay', 'woocommerce-payments' )
-);
 export const CBIcon = iconComponent(
 	CBAsset,
 	__( 'Cartes Bancaires', 'woocommerce-payments' )
@@ -65,10 +59,6 @@ export const DiscoverIcon = iconComponent(
 	DiscoverAsset,
 	__( 'Discover', 'woocommerce-payments' )
 );
-export const GooglePayIcon = iconComponent(
-	GooglePayAsset,
-	__( 'Google Pay', 'woocommerce-payments' )
-);
 export const JCBIcon = iconComponent(
 	JCBAsset,
 	__( 'JCB', 'woocommerce-payments' )

client/settings/express-checkout-settings/index.js

@@ -17,12 +17,8 @@ import SettingsLayout from '../settings-layout';
 import LoadableSettingsSection from '../loadable-settings-section';
 import SaveSettingsSection from '../save-settings-section';
 import ErrorBoundary from '../../components/error-boundary';
-import {
-	AmazonPayIcon,
-	ApplePayIcon,
-	GooglePayIcon,
-	WooIcon,
-} from 'wcpay/payment-methods-icons';
+import { AmazonPayIcon, WooIcon } from 'wcpay/payment-methods-icons';
+import methodsConfiguration from 'wcpay/payment-methods-map';
 
 const methods = {
 	woopay: {
@@ -76,24 +72,33 @@ const methods = {
 		sections: [
 			{
 				section: 'enable',
-				description: () => (
-					<>
-						<div className="express-checkout-settings__icons">
-							<div className="express-checkout-settings__icon">
-								<ApplePayIcon />
-							</div>
-							<div className="express-checkout-settings__icon">
-								<GooglePayIcon />
+				description: () => {
+					const {
+						icon: ApplePayIcon,
+					} = methodsConfiguration.apple_pay;
+					const {
+						icon: GooglePayIcon,
+					} = methodsConfiguration.google_pay;
+
+					return (
+						<>
+							<div className="express-checkout-settings__icons">
+								<div className="express-checkout-settings__icon">
+									<ApplePayIcon />
+								</div>
+								<div className="express-checkout-settings__icon">
+									<GooglePayIcon />
+								</div>
 							</div>
-						</div>
-						<p>
-							{ __(
-								'Allow your customers to collect payments via Apple Pay and Google Pay.',
-								'woocommerce-payments'
-							) }
-						</p>
-					</>
-				),
+							<p>
+								{ __(
+									'Allow your customers to collect payments via Apple Pay and Google Pay.',
+									'woocommerce-payments'
+								) }
+							</p>
+						</>
+					);
+				},
 			},
 			{
 				section: 'general',