homeflowjs 0.13.54 → 0.13.55

package/app/recaptcha.js

@@ -60,46 +60,65 @@ export default () => {
       }
     }
 
-    function addRecaptchaV2(formSelectors) {
-      const invisibleRecaptcha = document.createElement('div');
-      invisibleRecaptcha.classList.add('g-recaptcha');
-      invisibleRecaptcha.dataset.sitekey = '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY';
-      invisibleRecaptcha.dataset.callback = 'submitRecaptchaForm';
-      invisibleRecaptcha.dataset.size = 'invisible';
-
+    const appendRecaptchaScript = () => {
       const recaptchaScript = document.createElement('script');
       recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
       recaptchaScript.id = 'recaptcha-script';
 
+      document.body.appendChild(recaptchaScript);
+    }
+
+    const onRecaptchaReady = (formSelectors) => {
+      if (window.recaptchaLoadingScriptInterval) {
+        clearTimeout(window.recaptchaLoadingScriptInterval);
+        window.recaptchaLoadingScriptInterval = undefined;
+      }
+
       const forms = document.querySelectorAll(formSelectors.join(', '));
-      forms.forEach((form) => {
-        form.appendChild(invisibleRecaptcha);
-      });
 
-      // 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);
-            }
-          });
+      forms.forEach((form, i) => {
+        const formRecaptchaWrapper = document.createElement('div');
+        formRecaptchaWrapper.id = `recaptcha-wrapper-${i}`;
+
+        form.appendChild(formRecaptchaWrapper);
+
+        const onRecaptchaSubmit = () => {
+          form.submit();
+          Homeflow.kickEvent('after_successful_recaptcha', form);
+        }
+
+        const widget = window.grecaptcha.render(`recaptcha-wrapper-${i}`, {
+          sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
+          callback: onRecaptchaSubmit,
+          size: 'invisible',
         });
 
-        const forms = document.querySelectorAll(formSelectors[i]);
-        forms.forEach((form) => {
-          form.addEventListener('submit', (e) => {
-            if (e.target.classList.contains('hfjs-form-invalid')) return;
-            if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
-              e.preventDefault();
-              Homeflow.set('submitted_form', e.target);
-              grecaptcha.execute();
-            }
-          });
-          form.classList.add('has-recaptcha');
+        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);
         });
+      });
+    }
+
+    function addRecaptchaV2(formSelectors) {
+      if (!document.getElementById('recaptcha-script')) {
+        appendRecaptchaScript();
       }
+
+      window.recaptchaLoadingScriptInterval = setInterval(() => {
+        if (window.grecaptcha?.render) {
+          onRecaptchaReady(formSelectors)
+        }
+      }, 300);
     }
 
     if (Homeflow.get('recaptcha_version') === 3) {

package/package.json

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

package/user/user-register-form/user-register-form.component.jsx

@@ -28,8 +28,13 @@ const UserRegisterForm = (props) => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    const { body } = Object.fromEntries(new FormData(e.target));
+    const formData = {
+      ...localUser,
+      body,
+    };
 
-    const userParams = doNotContact ? { ...localUser, do_not_contact: 1 } : localUser;
+    const userParams = doNotContact ? { ...formData, do_not_contact: 1 } : formData;
     userParams.marketing_preferences = {
       ...localUser.marketing_preferences, opt_in_marketing_statement: marketingStatement,
     };
@@ -58,6 +63,11 @@ const UserRegisterForm = (props) => {
 
   return (
     <form onSubmit={handleSubmit} {...otherProps}>
+      <input
+        type="text"
+        name="body"
+        style={{ height: 0, width: 0, opacity: 0 }}
+      />
       {children}
     </form>
   );