-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Checkout: Convert useCreateExistingCards to TypeScript (#50723)
* Move useCreatePaymentMethods to a directory * Update all imports to use-create-payment-methods * Move useMemoCompare hook to own file * Update PaymentMethod type to make nodes optional They are already optional * Move useCreateExistingCards to own file * Fix payment-methods imports * Only pass string to activePayButtonText
- Loading branch information
1 parent
e47c0eb
commit f4baf0e
Showing
8 changed files
with
102 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
...checkout/composite-checkout/hooks/use-create-payment-methods/use-create-existing-cards.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { useMemo } from 'react'; | ||
| import { createExistingCardMethod } from '@automattic/composite-checkout'; | ||
| import type { PaymentMethod } from '@automattic/composite-checkout'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import useMemoCompare from '../use-memo-compare'; | ||
| import type { StoredCard } from '../../types/stored-cards'; | ||
|
|
||
| export default function useCreateExistingCards( { | ||
| storedCards, | ||
| activePayButtonText = undefined, | ||
| }: { | ||
| storedCards: StoredCard[]; | ||
| activePayButtonText?: string; | ||
| } ): PaymentMethod[] { | ||
| // Memoize the cards by comparing their stored_details_id values, in case the | ||
| // objects themselves are recreated on each render. | ||
| const memoizedStoredCards: StoredCard[] | undefined = useMemoCompare( | ||
| storedCards, | ||
| ( prev: undefined | StoredCard[], next: undefined | StoredCard[] ) => { | ||
| const prevIds = prev?.map( ( card ) => card.stored_details_id ) ?? []; | ||
| const nextIds = next?.map( ( card ) => card.stored_details_id ) ?? []; | ||
| return ( | ||
| prevIds.length === nextIds.length && | ||
| prevIds.every( ( id, index ) => id === nextIds[ index ] ) | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| const existingCardMethods = useMemo( () => { | ||
| return ( | ||
| memoizedStoredCards?.map( ( storedDetails ) => | ||
| createExistingCardMethod( { | ||
| id: `existingCard-${ storedDetails.stored_details_id }`, | ||
| cardholderName: storedDetails.name, | ||
| cardExpiry: storedDetails.expiry, | ||
| brand: storedDetails.card_type, | ||
| last4: storedDetails.card, | ||
| storedDetailsId: storedDetails.stored_details_id, | ||
| paymentMethodToken: storedDetails.mp_ref, | ||
| paymentPartnerProcessorId: storedDetails.payment_partner, | ||
| activePayButtonText, | ||
| } ) | ||
| ) ?? [] | ||
| ); | ||
| }, [ memoizedStoredCards, activePayButtonText ] ); | ||
| return existingCardMethods; | ||
| } |
30 changes: 30 additions & 0 deletions
30
client/my-sites/checkout/composite-checkout/hooks/use-memo-compare.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { useRef, useEffect } from 'react'; | ||
|
|
||
| // See https://usehooks.com/useMemoCompare/ | ||
| export default function useMemoCompare< A, B >( | ||
| next: B, | ||
| compare: ( previous: A | B | undefined, next: B ) => boolean | ||
| ): A | B | undefined { | ||
| // Ref for storing previous value | ||
| const previousRef = useRef< undefined | A | B >(); | ||
| const previous = previousRef.current; | ||
|
|
||
| // Pass previous and next value to compare function | ||
| // to determine whether to consider them equal. | ||
| const isEqual = compare( previous, next ); | ||
|
|
||
| // If not equal update previousRef to next value. | ||
| // We only update if not equal so that this hook continues to return | ||
| // the same old value if compare keeps returning true. | ||
| useEffect( () => { | ||
| if ( ! isEqual ) { | ||
| previousRef.current = next; | ||
| } | ||
| } ); | ||
|
|
||
| // Finally, if equal then return the previous value | ||
| return isEqual ? previous : next; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters