import Parent from '#components/utils/Parent' ; import React , { useContext } from 'react' ; import PaymentMethodContext from '#context/PaymentMethodContext' ; import { PaymentResource , PaymentSourceType , } from '#reducers/PaymentMethodReducer' ; import PaymentSourceContext , { iconBrand } from '#context/PaymentSourceContext' ; import { FunctionChildren } from '#typings' ; type ChildrenProps = Pick < Props , 'customerPayments' > & { PaymentSourceProvider : typeof PaymentSourceContext . Provider ; } ; type CustomerPayment = PaymentSourceType & { card ? : { brand ? : iconBrand ; last4 ? : string ; } ; handleClick ? : ( ) => void ; } ; export type CustomerCardsTemplateChildren = FunctionChildren < ChildrenProps > ; export type CustomerCardsType = ChildrenProps ; type Props = { customerPayments : CustomerPayment [ ] ; children : CustomerCardsTemplateChildren ; paymentResource : PaymentResource ; } ; export default function PaymentCardsTemplate ( { customerPayments , children , paymentResource , } ) { const { setPaymentSource } = useContext ( PaymentMethodContext ) ; const payments = customerPayments . map ( ( customerPayment ) => { const attributes = customerPayment ; const card = ( customerPayment ?. payment_source . options ?. card as Record < string , any > ) || customerPayment ?. payment_source ?. payment_request_data ?. paymentMethod || ( customerPayment ?. payment_source ?. payment_method ?. card as Record < string , any > ) || ( customerPayment ?. payment_source ?. metadata ?. card as Record < string , any > ) ; const handleClick = async ( e ) => { e . stopPropagation ( ) ; await setPaymentSource ( { paymentResource , customerPaymentSourceId : customerPayment . id , } ) ; } ; return { ... attributes , card , handleClick } ; } ) ; const value = { customerPayments : payments , PaymentSourceProvider : PaymentSourceContext . Provider , } ; return < Parent { ... value } > { children } < /Parent>; }