Show save card checkbox checked and disabled if subscription in cart

This commit is contained in:
Emili Castells Guasch 2024-06-04 18:17:33 +02:00
parent cb96f888a0
commit 559d0654a2
2 changed files with 13 additions and 2 deletions

View file

@ -8,6 +8,7 @@ import {
import {CheckoutHandler} from "./checkout-handler";
import {createOrder, onApprove} from "../card-fields-config";
import {cartHasSubscriptionProducts} from "../Helper/Subscription";
export function CardFields({config, eventRegistration, emitResponse, components}) {
const {onPaymentSetup} = eventRegistration;
@ -23,6 +24,8 @@ export function CardFields({config, eventRegistration, emitResponse, components}
localStorage.setItem('ppcp-save-card-payment', savePayment);
}
const hasSubscriptionProducts = cartHasSubscriptionProducts(config.scriptData);
useEffect(
() =>
onPaymentSetup(() => {
@ -65,6 +68,7 @@ export function CardFields({config, eventRegistration, emitResponse, components}
<CheckoutHandler
getCardFieldsForm={getCardFieldsForm}
getSavePayment={getSavePayment}
hasSubscriptionProducts={hasSubscriptionProducts}
saveCardText={config.save_card_text}
is_vaulting_enabled={config.is_vaulting_enabled}
/>

View file

@ -1,7 +1,7 @@
import {useEffect} from '@wordpress/element';
import {usePayPalCardFields} from "@paypal/react-paypal-js";
export const CheckoutHandler = ({getCardFieldsForm, getSavePayment, saveCardText, is_vaulting_enabled}) => {
export const CheckoutHandler = ({getCardFieldsForm, getSavePayment, hasSubscriptionProducts, saveCardText, is_vaulting_enabled}) => {
const {cardFieldsForm} = usePayPalCardFields();
useEffect(() => {
@ -14,7 +14,14 @@ export const CheckoutHandler = ({getCardFieldsForm, getSavePayment, saveCardText
return (
<>
<input type="checkbox" id="save" name="save" onChange={(e) => getSavePayment(e.target.checked)}/>
<input
type="checkbox"
id="save"
name="save"
onChange={(e) => getSavePayment(e.target.checked)}
defaultChecked={hasSubscriptionProducts}
disabled={hasSubscriptionProducts}
/>
<label htmlFor="save">{saveCardText}</label>
</>
)