homeflowjs 1.0.18 → 1.0.19

package/app/recaptcha.js

@@ -20,6 +20,8 @@ export default () => {
   window.addEventListener('DOMContentLoaded', () => {
     if (window.noRecaptcha) return null;
 
+    const recaptchaFormActions = ['leads', 'form_submissions', 'properties', 'user/send_to_friend'];
+
     const formSelectors = [
       'form[action="/leads"]',
       'form[action="/form_submissions"]',
@@ -27,106 +29,184 @@ export default () => {
       'form[action="/user/send_to_friend"]',
     ];
 
-    function addRecaptchaV3(formSelectors) {
-      const recaptchaScript = document.createElement('script');
-      recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K';
-      recaptchaScript.id = 'recaptcha-script';
+    const initUniqRecaptchaV2Wrapper = ({form, id}) => {
+      const recaptchaId = id || Math.random().toString().substring(2);
+      const formRecaptchaWrapper = document.createElement('div');
+      formRecaptchaWrapper.classList.add('recaptcha-wrapper');
+      formRecaptchaWrapper.id = `recaptcha-wrapper-${recaptchaId}`;
 
-      // add the recaptcha script only after a form input is focused
-      for (let i = 0; i < formSelectors.length; i++) {
-        const formInputs = document.querySelectorAll(`${formSelectors[i]} input, ${formSelectors[i]} textarea`);
-        formInputs.forEach((input) => {
-          input.addEventListener('focus', () => {
-            if (!document.getElementById('recaptcha-script')) {
-              document.body.appendChild(recaptchaScript);
-            }
-          });
-        });
+      form.appendChild(formRecaptchaWrapper);
 
-        const forms = document.querySelectorAll(formSelectors[i]);
-        forms.forEach((form) => {
-          form.addEventListener('submit', (e) => {
-            if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
-              e.preventDefault();
-              Homeflow.set('submitted_form', e.target);
-              grecaptcha.execute('6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K', { action: 'homepage' })
-                .then((token) => {
-                  submitRecaptchaForm(token);
-                });
-            }
-          });
-          form.classList.add('has-recaptcha');
-        });
+      const onRecaptchaSubmit = () => {
+        form.submit();
+        Homeflow.kickEvent('after_successful_recaptcha', form);
       }
-    }
 
-    const appendRecaptchaScript = () => {
-      const recaptchaScript = document.createElement('script');
-      recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
-      recaptchaScript.id = 'recaptcha-script';
+      const widget = window.grecaptcha.render(`recaptcha-wrapper-${recaptchaId}`, {
+        sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
+        callback: onRecaptchaSubmit,
+        size: 'invisible',
+      });
 
-      document.body.appendChild(recaptchaScript);
+      window.widgetIds =  window.widgetIds
+        ? [...window.widgetIds, widget]
+        : [widget]
+
+      form.addEventListener('submit', (e) => {
+        if (e.target.classList.contains('hfjs-form-invalid')) {
+          return;
+        }
+
+        e.preventDefault();
+        Homeflow.set('submitted_form', e.target);
+        grecaptcha.execute(widget);
+      });
     }
 
-    const onRecaptchaReady = (formSelectors) => {
+    const onRecaptchaV2Ready = (triggeredFormEl) => {
       if (window.recaptchaLoadingScriptInterval) {
-        clearTimeout(window.recaptchaLoadingScriptInterval);
+        clearInterval(window.recaptchaLoadingScriptInterval);
         window.recaptchaLoadingScriptInterval = undefined;
       }
 
-      const forms = document.querySelectorAll(formSelectors.join(', '));
+      if (triggeredFormEl) {
+        initUniqRecaptchaV2Wrapper({form: triggeredFormEl})
+      } else {
+        const forms = document.querySelectorAll(formSelectors.join(', '));
 
-      forms.forEach((form, i) => {
-        const formRecaptchaWrapper = document.createElement('div');
-        formRecaptchaWrapper.id = `recaptcha-wrapper-${i}`;
-
-        form.appendChild(formRecaptchaWrapper);
+        forms.forEach((form, i) => {
+          initUniqRecaptchaV2Wrapper({ form, id: i })
+        });
+      }
+    }
 
-        const onRecaptchaSubmit = () => {
-          form.submit();
-          Homeflow.kickEvent('after_successful_recaptcha', form);
-        }
+    const appendRecaptchaScript = (version) => {
+      const srcConfig = {
+        v2: 'https://www.google.com/recaptcha/api.js',
+        v3: 'https://www.google.com/recaptcha/api.js?render=6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K',
+      }
 
-        const widget = window.grecaptcha.render(`recaptcha-wrapper-${i}`, {
-          sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
-          callback: onRecaptchaSubmit,
-          size: 'invisible',
-        });
+      const recaptchaScript = document.createElement('script');
+      recaptchaScript.src = srcConfig[version];
+      recaptchaScript.id = 'recaptcha-script';
 
-        window.widgetIds =  window.widgetIds
-          ? [...window.widgetIds, widget]
-          : [widget]
+      document.body.appendChild(recaptchaScript);
 
-        form.addEventListener('submit', (e) => {
-          if (e.target.classList.contains('hfjs-form-invalid')) {
-            return;
+      if (version === 'v2') {
+         window.recaptchaLoadingScriptInterval = setInterval(() => {
+          if (window.grecaptcha?.render) {
+            onRecaptchaV2Ready()
           }
+        }, 300);
+      }
+    }
 
+    const initRecaptchaV3 = (form) => {
+      form.addEventListener('submit', (e) => {
+        if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
           e.preventDefault();
           Homeflow.set('submitted_form', e.target);
-          grecaptcha.execute(widget);
-        });
+          grecaptcha.execute('6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K', { action: 'homepage' })
+            .then((token) => {
+              submitRecaptchaForm(token);
+            });
+        }
       });
+      form.classList.add('has-recaptcha');
     }
 
-    function addRecaptchaV2(formSelectors) {
+    const handleRecaptchaV3ForTargetForm = (targetFormEl) => {
       if (!document.getElementById('recaptcha-script')) {
-        appendRecaptchaScript();
+        appendRecaptchaScript('v3')
       }
+      
+      initRecaptchaV3(targetFormEl)
+    }
 
-      window.recaptchaLoadingScriptInterval = setInterval(() => {
-        if (window.grecaptcha?.render) {
-          onRecaptchaReady(formSelectors)
+    function addRecaptchaV3(targetFormEl) {
+      for (let i = 0; i < formSelectors.length; i++) {
+        if (targetFormEl) {
+          handleRecaptchaV3ForTargetForm(targetFormEl)
+        } else {
+          const formInputs = document.querySelectorAll(`${formSelectors[i]} input, ${formSelectors[i]} textarea`);
+          formInputs.forEach((input) => {
+            input.addEventListener('focus', () => {
+              if (!document.getElementById('recaptcha-script')) {
+                appendRecaptchaScript('v3');
+              }
+            });
+          });
         }
-      }, 300);
+
+        const forms = document.querySelectorAll(formSelectors[i]);
+        forms.forEach((form) => {
+          handleRecaptchaV3ForTargetForm(form)
+        });
+      }
+    }
+
+    const handleRecaptchaV2ForTargetForm = (targetFormEl) => {
+      const hasRecaptcha = targetFormEl?.querySelector('.recaptcha-wrapper');
+
+      if(hasRecaptcha) {
+        return;
+      }
+      
+      if (!document.getElementById('recaptcha-script')) {
+        appendRecaptchaScript('v2')
+      }
+      if (window.grecaptcha) {
+        onRecaptchaV2Ready(targetFormEl)
+      }
+    }
+
+    function addRecaptchaV2(targetFormEl) {
+      if (targetFormEl) {
+        handleRecaptchaV2ForTargetForm(targetFormEl)
+      } else {
+        for (let i = 0; i < formSelectors.length; i++) {
+          const formInputs = document.querySelectorAll(
+            `${formSelectors[i]} input, ${formSelectors[i]} textarea, ${formSelectors[i]} select`
+          );
+          formInputs.forEach((input) => {
+            input.addEventListener('focusin', (event) => {
+              event.stopPropagation();
+              if (!document.getElementById('recaptcha-script')) {
+                appendRecaptchaScript('v2')
+              }
+            });
+          });
+        }
+      }
+    }
+
+    const initRecaptcha = (targetFormEl) => {
+      if (Homeflow.get('recaptcha_version') === 3) {
+        addRecaptchaV3(targetFormEl);
+      } else {
+        addRecaptchaV2(targetFormEl);
+      }
+    }
+
+    const handleRecaptchaRelatedBodyFocus = (event) => {
+      event.stopPropagation();
+      const isFormElementFocused = ['SELECT', 'INPUT', 'TEXTAREA'].includes(event.target.nodeName);
+      const targetFormEl = event.target.closest('form');
+      const targetFormAction = targetFormEl?.getAttribute('action');
+      const isRecaptchaForm = targetFormAction
+        ? recaptchaFormActions.some((action) => targetFormAction.includes(action))
+        : false
+
+      if (isFormElementFocused && isRecaptchaForm) {
+        initRecaptcha(targetFormEl);
+      }
     }
 
-    if (Homeflow.get('recaptcha_version') === 3) {
-      addRecaptchaV3(formSelectors);
-    } else {
-      addRecaptchaV2(formSelectors);
+    const initDynamicallyOpenFormsRecaptcha = () => {
+      document.body.addEventListener('focusin', handleRecaptchaRelatedBodyFocus);
     }
 
-    return null;
+    initDynamicallyOpenFormsRecaptcha();
+    initRecaptcha()
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",