From 156221f2036c7589efe0fef596e2fa82efb82ab1 Mon Sep 17 00:00:00 2001 From: Timur Karimov Date: Tue, 18 Jun 2024 10:46:47 +0200 Subject: [PATCH] TypeScript migration: Affirm and Afterpay payment details components (#8964) --- ...v-migrate-affirm-afterpay-components-to-ts | 4 ++ .../affirm/{index.js => index.tsx} | 37 ++++++++++++++----- .../afterpay-clearpay/{index.js => index.tsx} | 34 ++++++++++++----- client/payment-details/types.ts | 10 +++++ 4 files changed, 66 insertions(+), 19 deletions(-) create mode 100644 changelog/dev-migrate-affirm-afterpay-components-to-ts rename client/payment-details/payment-method/affirm/{index.js => index.tsx} (63%) rename client/payment-details/payment-method/afterpay-clearpay/{index.js => index.tsx} (63%) diff --git a/changelog/dev-migrate-affirm-afterpay-components-to-ts b/changelog/dev-migrate-affirm-afterpay-components-to-ts new file mode 100644 index 00000000000..d60541e795d --- /dev/null +++ b/changelog/dev-migrate-affirm-afterpay-components-to-ts @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Migrate Affirm and Afterpay payment method components to TypeScript. diff --git a/client/payment-details/payment-method/affirm/index.js b/client/payment-details/payment-method/affirm/index.tsx similarity index 63% rename from client/payment-details/payment-method/affirm/index.js rename to client/payment-details/payment-method/affirm/index.tsx index b53a55a0168..4f9fae7f73f 100644 --- a/client/payment-details/payment-method/affirm/index.js +++ b/client/payment-details/payment-method/affirm/index.tsx @@ -4,21 +4,23 @@ * 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 {Object} charge The charge object. - * @return {Object} A flat hash of all necessary values. + * @param {Charge} charge The charge object. + * @return {PaymentMethodDetails} A flat hash of all necessary values. */ -const formatPaymentMethodDetails = ( charge ) => { +const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => { const { billing_details: billingDetails, payment_method: id } = charge; - const { name, email, formatted_address: formattedAddress } = billingDetails; return { @@ -32,20 +34,36 @@ const formatPaymentMethodDetails = ( charge ) => { /** * Placeholders to display while loading. */ -const paymentMethodPlaceholders = { +const paymentMethodPlaceholders: PaymentMethodDetails = { id: 'id placeholder', name: 'name placeholder', email: 'email placeholder', formattedAddress: 'address placeholder', }; -const CardDetails = ( { charge = {}, isLoading } ) => { - const details = +/** + * Props interface for AffirmDetails component + */ +interface AffirmDetailsProps { + charge?: Charge; + isLoading: boolean; +} + +const AffirmDetails: React.FC< AffirmDetailsProps > = ( { + charge, + isLoading, +} ) => { + const details: PaymentMethodDetails | typeof paymentMethodPlaceholders = charge && charge.payment_method_details ? formatPaymentMethodDetails( charge ) : paymentMethodPlaceholders; - const { id, name, email, formattedAddress } = details; + const { + id, + name, + email, + formattedAddress, + }: PaymentMethodDetails | typeof paymentMethodPlaceholders = details; return (
@@ -78,6 +96,7 @@ const CardDetails = ( { charge = {}, isLoading } ) => { label={ __( 'Address', 'woocommerce-payments' ) } > { ); }; -export default CardDetails; +export default AffirmDetails; diff --git a/client/payment-details/payment-method/afterpay-clearpay/index.js b/client/payment-details/payment-method/afterpay-clearpay/index.tsx similarity index 63% rename from client/payment-details/payment-method/afterpay-clearpay/index.js rename to client/payment-details/payment-method/afterpay-clearpay/index.tsx index 99b6f20dc26..d775fa1ec38 100644 --- a/client/payment-details/payment-method/afterpay-clearpay/index.js +++ b/client/payment-details/payment-method/afterpay-clearpay/index.tsx @@ -4,21 +4,23 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; +import React from 'react'; /** * Internal dependencies. */ import Detail from '../detail'; +import { Charge } from 'wcpay/types/charges'; +import { PaymentMethodDetails } from 'wcpay/payment-details/types'; /** * Extracts and formats payment method details from a charge. * - * @param {Object} charge The charge object. - * @return {Object} A flat hash of all necessary values. + * @param {Charge} charge The charge object. + * @return {PaymentMethodDetails} A flat hash of all necessary values. */ -const formatPaymentMethodDetails = ( charge ) => { +const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => { const { billing_details: billingDetails, payment_method: id } = charge; - const { name, email, formatted_address: formattedAddress } = billingDetails; return { @@ -30,22 +32,33 @@ const formatPaymentMethodDetails = ( charge ) => { }; /** - * Placeholders to display while loading. + * Placeholder object for loading state */ -const paymentMethodPlaceholders = { +const paymentMethodPlaceholders: PaymentMethodDetails = { id: 'id placeholder', name: 'name placeholder', email: 'email placeholder', formattedAddress: 'address placeholder', }; -const CardDetails = ( { charge = {}, isLoading } ) => { - const details = +/** + * Props interface for AfterpayClearpayDetailss component + */ +interface AfterpayClearpayDetailsProps { + charge?: Charge; + isLoading: boolean; +} + +const AfterpayClearpayDetails: React.FC< AfterpayClearpayDetailsProps > = ( { + charge, + isLoading, +} ) => { + const details: PaymentMethodDetails = charge && charge.payment_method_details ? formatPaymentMethodDetails( charge ) : paymentMethodPlaceholders; - const { id, name, email, formattedAddress } = details; + const { id, name, email, formattedAddress }: PaymentMethodDetails = details; return (
@@ -77,6 +90,7 @@ const CardDetails = ( { charge = {}, isLoading } ) => { label={ __( 'Address', 'woocommerce-payments' ) } > { ); }; -export default CardDetails; +export default AfterpayClearpayDetails; diff --git a/client/payment-details/types.ts b/client/payment-details/types.ts index d2142207dbd..c8d7a0ebd6d 100644 --- a/client/payment-details/types.ts +++ b/client/payment-details/types.ts @@ -39,3 +39,13 @@ export const isPaymentIntent = ( export const isCharge = ( data: PaymentIntent | Charge ): data is Charge => { return ( data as PaymentIntent ).charge === undefined; }; + +/* + * Interface for PaymentMethodDetails used in the payment method components on transaction details page. + */ +export interface PaymentMethodDetails { + id: string; + name: null | string; + email: null | string; + formattedAddress?: string; +}