2025-01-21 18:57:36 +01:00
|
|
|
import SettingsBlock from '../SettingsBlock';
|
2024-12-08 09:33:49 +01:00
|
|
|
import PaymentMethodItemBlock from './PaymentMethodItemBlock';
|
2025-01-20 16:04:35 +01:00
|
|
|
import { usePaymentMethods } from '../../../data/payment/hooks';
|
2024-12-08 09:33:49 +01:00
|
|
|
|
2025-01-24 17:01:03 +01:00
|
|
|
const PaymentMethodsBlock = ( { paymentMethods, onTriggerModal } ) => {
|
2025-01-20 16:04:35 +01:00
|
|
|
const { setPersistent } = usePaymentMethods();
|
2024-12-16 16:00:27 +01:00
|
|
|
|
2025-01-09 00:16:12 +01:00
|
|
|
if ( ! paymentMethods?.length ) {
|
2024-12-08 09:33:49 +01:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2025-01-20 16:04:35 +01:00
|
|
|
const handleSelect = ( paymentMethod, isSelected ) => {
|
|
|
|
setPersistent( paymentMethod.id, {
|
|
|
|
...paymentMethod,
|
|
|
|
enabled: isSelected,
|
|
|
|
} );
|
|
|
|
};
|
|
|
|
|
2024-12-08 09:33:49 +01:00
|
|
|
return (
|
2025-01-24 17:01:03 +01:00
|
|
|
<SettingsBlock className="ppcp--grid ppcp-r-settings-block__payment-methods">
|
2024-12-17 11:50:32 +01:00
|
|
|
{ paymentMethods.map( ( paymentMethod ) => (
|
|
|
|
<PaymentMethodItemBlock
|
|
|
|
key={ paymentMethod.id }
|
2025-01-22 12:09:21 +01:00
|
|
|
paymentMethod={ paymentMethod }
|
2025-01-20 16:04:35 +01:00
|
|
|
isSelected={ paymentMethod.enabled }
|
2024-12-17 11:50:32 +01:00
|
|
|
onSelect={ ( checked ) =>
|
2025-01-20 16:04:35 +01:00
|
|
|
handleSelect( paymentMethod, checked )
|
2024-12-17 11:50:32 +01:00
|
|
|
}
|
2025-01-02 13:55:32 +01:00
|
|
|
onTriggerModal={ () =>
|
|
|
|
onTriggerModal?.( paymentMethod.id )
|
|
|
|
}
|
2024-12-17 11:50:32 +01:00
|
|
|
/>
|
|
|
|
) ) }
|
|
|
|
</SettingsBlock>
|
2024-12-08 09:33:49 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PaymentMethodsBlock;
|