handle gateway keys invalidation

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<SettingName, string>) => void
+  onValidKeys: (payZenSettings: Map<SettingName, string>) => 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<PayZenKeysFormProps> = ({ onValidKeys }) => {
+const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
   const { t } = useTranslation('admin');
 
   // values of the PayZen settings
@@ -53,12 +54,14 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ 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<PayZenKeysFormProps> = ({ onValidKeys })
   );
 }
 
-export const PayZenKeysForm: React.FC<PayZenKeysFormProps> = ({ onValidKeys }) => {
+export const PayZenKeysForm: React.FC<PayZenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
   return (
     <Loader>
-      <PayZenKeysFormComponent onValidKeys={onValidKeys} />
+      <PayZenKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
     </Loader>
   );
 }

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<StripeKeysFormProps> = ({ onValidKeys }) => {
+const StripeKeysFormComponent: React.FC<StripeKeysFormProps> = ({ 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<StripeKeysFormProps> = ({ 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<StripeKeysFormProps> = ({ onValidKeys })
   );
 }
 
-export const StripeKeysForm: React.FC<StripeKeysFormProps> = ({ onValidKeys }) => {
+export const StripeKeysForm: React.FC<StripeKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
   return (
     <Loader>
-      <StripeKeysFormComponent onValidKeys={onValidKeys} />
+      <StripeKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
     </Loader>
   );
 }

app/frontend/src/javascript/components/select-gateway-modal.tsx

@@ -80,13 +80,20 @@ const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ 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<SettingName, string>): 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<SelectGatewayModalModalProps> = ({ isOpen, to
         <option value={Gateway.Stripe}>{t('app.admin.invoices.payment.gateway_modal.stripe')}</option>
         <option value={Gateway.PayZen}>{t('app.admin.invoices.payment.gateway_modal.payzen')}</option>
       </select>
-      {selectedGateway === Gateway.Stripe && <StripeKeysForm onValidKeys={handleValidStripeKeys} />}
+      {selectedGateway === Gateway.Stripe && <StripeKeysForm onValidKeys={handleValidStripeKeys} onInvalidKeys={handleInvalidKeys} />}
-      {selectedGateway === Gateway.PayZen && <PayZenKeysForm onValidKeys={handleValidPayZenKeys} />}
+      {selectedGateway === Gateway.PayZen && <PayZenKeysForm onValidKeys={handleValidPayZenKeys} onInvalidKeys={handleInvalidKeys} />}
     </FabModal>
   );
 };