Add GrabPay details to the view transaction page (#10377)

changelog/add-grabpay-pm-details

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add GrabPay payment method details to the View Transaction page.

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

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+import { PaymentMethodDetails } from 'wcpay/payment-details/types';
+import { Charge } from 'wcpay/types/charges';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Charge} charge The charge object.
+ * @return {PaymentMethodDetails} A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => {
+	const { billing_details: billingDetails, payment_method: id } = charge;
+	const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+	return {
+		id,
+		name,
+		email,
+		formattedAddress,
+	};
+};
+
+interface GrabPayDetailsProps {
+	charge: Charge;
+	isLoading: boolean;
+}
+
+const GrabPayDetails: React.FC< GrabPayDetailsProps > = ( {
+	charge,
+	isLoading,
+} ) => {
+	const { id, name, email, formattedAddress } = formatPaymentMethodDetails(
+		charge
+	);
+
+	return (
+		<div className="payment-method-details">
+			<div className="payment-method-details__column">
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'ID', 'woocommerce-payments' ) }
+				>
+					{ !! id ? id : '–' }
+				</Detail>
+			</div>
+
+			<div className="payment-method-details__column">
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Owner', 'woocommerce-payments' ) }
+				>
+					{ name || '–' }
+				</Detail>
+
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Owner email', 'woocommerce-payments' ) }
+				>
+					{ email || '–' }
+				</Detail>
+
+				<Detail
+					isLoading={ isLoading }
+					label={ __( 'Address', 'woocommerce-payments' ) }
+				>
+					<span
+						// eslint-disable-next-line react/no-danger
+						dangerouslySetInnerHTML={ {
+							__html: formattedAddress || '–',
+						} }
+					/>
+				</Detail>
+			</div>
+		</div>
+	);
+};
+
+export default GrabPayDetails;

client/payment-details/payment-method/index.js

@@ -19,6 +19,7 @@ import CardDetails from './card';
 import CardPresentDetails from './card-present';
 import EpsDetails from './eps';
 import GiropayDetails from './giropay';
+import GrabPayDetails from './grabpay';
 import IdealDetails from './ideal';
 import KlarnaDetails from './klarna';
 import P24Details from './p24';
@@ -36,6 +37,7 @@ const detailsComponentMap = {
 	card_present: CardPresentDetails,
 	eps: EpsDetails,
 	giropay: GiropayDetails,
+	grabpay: GrabPayDetails,
 	ideal: IdealDetails,
 	klarna: KlarnaDetails,
 	p24: P24Details,

client/types/charges.d.ts

@@ -29,6 +29,7 @@ interface ChargeRefunds {
 
 export interface PaymentMethodDetails {
 	card?: any;
+	grabpay?: any;
 	type:
 		| 'affirm'
 		| 'afterpay_clearpay'