Prevent multiple clicks on the verify button (#290)

* Prevent multiple clicks on the verify button * Fix lint * use reset on success
smileidentity · Jul 30, 2024 · c99bd2f · c99bd2f
1 parent 8078dc2
commit c99bd2f
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 48 deletions.
diff --git a/example/script.js b/example/script.js
@@ -15,6 +15,10 @@ export default function setupForm() {
   const button = document.querySelector('#submitForm');
   const product = document.querySelector('#product');
 
+  const resetButton = () => {
+    button.textContent = 'Verify with Smile Identity';
+    button.disabled = false;
+  };
   const getWebToken = async () => {
     const payload = { product: product.value };
     const fetchConfig = {};
@@ -50,51 +54,50 @@ export default function setupForm() {
     e.preventDefault();
     button.textContent = 'Initializing session...';
     button.disabled = true;
-    const tokenResults = await getWebToken();
-    // debugger;
-    const {
-      token,
-      product,
-      callback_url,
-      environment,
-      partner_id,
-      signature,
-      timestamp,
-    } = tokenResults;
-
-    if (window.SmileIdentity) {
-      window.SmileIdentity({
+    try {
+      const tokenResults = await getWebToken();
+      const {
         token,
         product,
         callback_url,
         environment,
-        demo_mode: true,
-        use_new_component: true,
-        previewBVNMFA: true,
-        document_capture_modes: ['camera', 'upload'],
-        partner_details: {
-          partner_id,
-          signature,
-          timestamp,
-          name: 'Demo Account',
-          logo_url: 'https://via.placeholder.com/50/000000/FFFFFF?text=DA',
-          policy_url: 'https://smileidentity.com/privacy-privacy',
-          theme_color: '#000',
-        },
-        onSuccess: () => {
-          button.textContent = 'Verify with Smile Identity';
-          button.disabled = false;
-          setActiveScreen(demoCompleteScreen);
-        },
-        onClose: () => {
-          button.textContent = 'Verify with Smile Identity';
-          button.disabled = false;
-        },
-        onError: () => {
-          button.textContent = 'Verify with Smile Identity';
-          button.disabled = false;
-        },
-      });
+        partner_id,
+        signature,
+        timestamp,
+      } = tokenResults;
+
+      if (window.SmileIdentity) {
+        window.SmileIdentity({
+          token,
+          product,
+          callback_url,
+          environment,
+          // demo_mode: true,
+          use_new_component: true,
+          // previewBVNMFA: true,
+          document_capture_modes: ['camera', 'upload'],
+          partner_details: {
+            partner_id,
+            signature,
+            timestamp,
+            name: 'Demo Account',
+            logo_url: 'https://via.placeholder.com/50/000000/FFFFFF?text=DA',
+            policy_url: 'https://smileidentity.com/privacy-privacy',
+            theme_color: '#000',
+          },
+          onSuccess: () => {
+            resetButton();
+          },
+          onClose: () => {
+            resetButton();
+          },
+          onError: () => {
+            resetButton();
+          },
+        });
+      }
+    } catch (error) {
+      resetButton();
     }
   });
 }
diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js
@@ -737,6 +737,7 @@ import { version as sdkVersion } from '../../package.json';
   }
 
   async function handleFormSubmit(event) {
+    event.target.disabled = true;
     event.preventDefault();
     resetForm();
     const form = IDInfoForm.querySelector('form');
@@ -747,6 +748,7 @@ import { version as sdkVersion } from '../../package.json';
     const isInvalid = validateInputs(payload);
 
     if (isInvalid) {
+      event.target.disabled = false;
       return;
     }
 
@@ -758,16 +760,15 @@ import { version as sdkVersion } from '../../package.json';
     };
 
     try {
-      event.target.disabled = true;
       await submitIdInfoForm();
       complete();
-      event.target.disabled = false;
     } catch (error) {
-      event.target.disabled = false;
       displayErrorMessage('Something went wrong');
       console.error(
         `SmileIdentity - ${error.name || error.message}: ${error.cause}`,
       );
+    } finally {
+      event.target.disabled = false;
     }
   }
 

diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js
@@ -740,10 +740,13 @@ import { version as sdkVersion } from '../../package.json';
   }
 
   async function handleFormSubmit(event) {
+    if (event && event.target) event.target.disabled = true;
+
     if (event) {
       event.preventDefault();
       resetForm();
     }
+
     const form = IDInfoForm.querySelector('form');
 
     const formData = new FormData(form);
@@ -752,6 +755,7 @@ import { version as sdkVersion } from '../../package.json';
     const isInvalid = validateInputs(payload);
 
     if (isInvalid) {
+      if (event && event.target) event.target.disabled = false;
       return;
     }
 
@@ -763,20 +767,19 @@ import { version as sdkVersion } from '../../package.json';
     };
 
     try {
-      if (event && event.target) event.target.disabled = true;
       [uploadURL, fileToUpload] = await Promise.all([
         getUploadURL(),
         createZip(),
       ]);
 
       uploadZip(fileToUpload, uploadURL);
-      if (event && event.target) event.target.disabled = false;
     } catch (error) {
-      if (event && event.target) event.target.disabled = false;
       displayErrorMessage('Something went wrong');
       console.error(
         `SmileIdentity - ${error.name || error.message}: ${error.cause}`,
       );
+    } finally {
+      if (event && event.target) event.target.disabled = false;
     }
   }
 

diff --git a/packages/embed/src/js/script.js b/packages/embed/src/js/script.js
@@ -154,7 +154,7 @@ window.SmileIdentity = (function () {
       '#smile-identity-hosted-web-integration',
     );
 
-    iframe.remove();
+    iframe?.remove();
 
     if (config.onClose && userTriggered) {
       config.onClose();