Fix payment method section missing for Affirm and Afterpay on transac…

…tion details page (#7345)

changelog/fix-7343-missing-payment-details-section-in-payment-details-page-for-affirm-and-afterpay-payment-methods

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Payment method section missing for Affirm and Afterpay on transaction details page

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

@@ -0,0 +1,91 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Object} charge The charge object.
+ * @return {Object}       A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge ) => {
+	const { billing_details: billingDetails, payment_method: id } = charge;
+
+	const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+	return {
+		id,
+		name,
+		email,
+		formattedAddress,
+	};
+};
+
+/**
+ * Placeholders to display while loading.
+ */
+const paymentMethodPlaceholders = {
+	id: 'id placeholder',
+	name: 'name placeholder',
+	email: 'email placeholder',
+	formattedAddress: 'address placeholder',
+};
+
+const CardDetails = ( { charge = {}, isLoading } ) => {
+	const details =
+		charge && charge.payment_method_details
+			? formatPaymentMethodDetails( charge )
+			: paymentMethodPlaceholders;
+
+	const { id, name, email, formattedAddress } = details;
+
+	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
+						dangerouslySetInnerHTML={ {
+							__html: formattedAddress || '–',
+						} }
+					/>
+				</Detail>
+			</div>
+		</div>
+	);
+};
+
+export default CardDetails;

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

@@ -0,0 +1,90 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import Detail from '../detail';
+
+/**
+ * Extracts and formats payment method details from a charge.
+ *
+ * @param {Object} charge The charge object.
+ * @return {Object}       A flat hash of all necessary values.
+ */
+const formatPaymentMethodDetails = ( charge ) => {
+	const { billing_details: billingDetails, payment_method: id } = charge;
+
+	const { name, email, formatted_address: formattedAddress } = billingDetails;
+
+	return {
+		id,
+		name,
+		email,
+		formattedAddress,
+	};
+};
+
+/**
+ * Placeholders to display while loading.
+ */
+const paymentMethodPlaceholders = {
+	id: 'id placeholder',
+	name: 'name placeholder',
+	email: 'email placeholder',
+	formattedAddress: 'address placeholder',
+};
+
+const CardDetails = ( { charge = {}, isLoading } ) => {
+	const details =
+		charge && charge.payment_method_details
+			? formatPaymentMethodDetails( charge )
+			: paymentMethodPlaceholders;
+
+	const { id, name, email, formattedAddress } = details;
+
+	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
+						dangerouslySetInnerHTML={ {
+							__html: formattedAddress || '–',
+						} }
+					/>
+				</Detail>
+			</div>
+		</div>
+	);
+};
+
+export default CardDetails;

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

@@ -3,37 +3,41 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
  */
 import Loadable from 'components/loadable';
-import CardDetails from './card';
-import CardPresentDetails from './card-present';
+import AffirmDetails from './affirm';
+import AfterpayClearpayDetails from './afterpay-clearpay';
 import BancontactDetails from './bancontact';
 import BecsDetails from './becs';
+import CardDetails from './card';
+import CardPresentDetails from './card-present';
 import EpsDetails from './eps';
 import GiropayDetails from './giropay';
 import IdealDetails from './ideal';
+import KlarnaDetails from './klarna';
 import P24Details from './p24';
 import SepaDetails from './sepa';
 import SofortDetails from './sofort';
-import KlarnaDetails from './klarna';
 
 const detailsComponentMap = {
-	card: CardDetails,
-	card_present: CardPresentDetails,
+	affirm: AffirmDetails,
+	afterpay_clearpay: AfterpayClearpayDetails,
 	au_becs_debit: BecsDetails,
 	bancontact: BancontactDetails,
+	card: CardDetails,
+	card_present: CardPresentDetails,
 	eps: EpsDetails,
 	giropay: GiropayDetails,
 	ideal: IdealDetails,
+	klarna: KlarnaDetails,
 	p24: P24Details,
 	sepa_debit: SepaDetails,
 	sofort: SofortDetails,
-	klarna: KlarnaDetails,
 };
 
 const PaymentDetailsPaymentMethod = ( { charge = {}, isLoading } ) => {