diff --git a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx index f6043d2f0..7aa16bcb4 100644 --- a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx +++ b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx @@ -12,7 +12,8 @@ import PayzenAPI from '../../../api/payzen'; enableMapSet(); interface PayZenKeysFormProps { - onValidKeys: (payZenSettings: Map) => void + onValidKeys: (payZenSettings: Map) => void, + onInvalidKeys: () => void, } // all settings related to PayZen that are requested by this form @@ -27,7 +28,7 @@ let pendingKeysValidation = false; /** * Form to set the PayZen's username, password and public key */ -const PayZenKeysFormComponent: React.FC = ({ onValidKeys }) => { +const PayZenKeysFormComponent: React.FC = ({ onValidKeys, onInvalidKeys }) => { const { t } = useTranslation('admin'); // values of the PayZen settings @@ -53,12 +54,14 @@ const PayZenKeysFormComponent: React.FC = ({ onValidKeys }) /** * When the style class for the public key, and the REST API are updated, check if they indicate valid keys. - * If both are valid, run the 'onValidKeys' callback + * If both are valid, run the 'onValidKeys' callback, else run 'onInvalidKeys' */ useEffect(() => { const validClassName = 'key-valid'; if (publicKeyAddOnClassName === validClassName && restApiAddOnClassName === validClassName) { onValidKeys(settings); + } else { + onInvalidKeys(); } }, [publicKeyAddOnClassName, restApiAddOnClassName, settings]); @@ -205,10 +208,10 @@ const PayZenKeysFormComponent: React.FC = ({ onValidKeys }) ); } -export const PayZenKeysForm: React.FC = ({ onValidKeys }) => { +export const PayZenKeysForm: React.FC = ({ onValidKeys, onInvalidKeys }) => { return ( - + ); } diff --git a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx index 22b3a0389..efa56180d 100644 --- a/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx +++ b/app/frontend/src/javascript/components/payment/stripe/stripe-keys-form.tsx @@ -9,13 +9,14 @@ import SettingAPI from '../../../api/setting'; interface StripeKeysFormProps { - onValidKeys: (stripePublic: string, stripeSecret:string) => void + onValidKeys: (stripePublic: string, stripeSecret:string) => void, + onInvalidKeys: () => void, } /** * Form to set the stripe's public and private keys */ -const StripeKeysFormComponent: React.FC = ({ onValidKeys }) => { +const StripeKeysFormComponent: React.FC = ({ onValidKeys, onInvalidKeys }) => { const { t } = useTranslation('admin'); // used to prevent promises from resolving if the component was unmounted @@ -62,6 +63,8 @@ const StripeKeysFormComponent: React.FC = ({ onValidKeys }) const validClassName = 'key-valid'; if (publicKeyAddOnClassName === validClassName && secretKeyAddOnClassName === validClassName) { onValidKeys(publicKey, secretKey); + } else { + onInvalidKeys(); } }, [publicKeyAddOnClassName, secretKeyAddOnClassName]); @@ -149,10 +152,10 @@ const StripeKeysFormComponent: React.FC = ({ onValidKeys }) ); } -export const StripeKeysForm: React.FC = ({ onValidKeys }) => { +export const StripeKeysForm: React.FC = ({ onValidKeys, onInvalidKeys }) => { return ( - + ); } diff --git a/app/frontend/src/javascript/components/select-gateway-modal.tsx b/app/frontend/src/javascript/components/select-gateway-modal.tsx index 4b340394c..f864e9f26 100644 --- a/app/frontend/src/javascript/components/select-gateway-modal.tsx +++ b/app/frontend/src/javascript/components/select-gateway-modal.tsx @@ -80,13 +80,20 @@ const SelectGatewayModal: React.FC = ({ isOpen, to } /** - * Callback triggered when the embedded for has validated all the PayZen keys + * Callback triggered when the embedded form has validated all the PayZen keys */ const handleValidPayZenKeys = (payZenKeys: Map): void => { setGatewayConfig(payZenKeys); setPreventConfirmGateway(false); } + /** + * Callback triggered when the embedded form has not validated all keys + */ + const handleInvalidKeys = (): void => { + setPreventConfirmGateway(true); + } + /** * Send the new gateway settings to the API to save them */ @@ -124,8 +131,8 @@ const SelectGatewayModal: React.FC = ({ isOpen, to - {selectedGateway === Gateway.Stripe && } - {selectedGateway === Gateway.PayZen && } + {selectedGateway === Gateway.Stripe && } + {selectedGateway === Gateway.PayZen && } ); };