homeflowjs 0.13.53 → 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/hooks/index.js

@@ -5,6 +5,7 @@ import { useOnScreen } from './use-on-screen';
 import usePropertyInfiniteScroll from './use-property-inifinite-scroll';
 import useLoadBranches from './use-load-branches';
 import useLoadPreviousProperties from './use-load-previous-properties';
+import useRecaptcha from './use-recaptcha';
 
 export {
   useDefaultSort,
@@ -14,4 +15,5 @@ export {
   usePropertyInfiniteScroll,
   useLoadBranches,
   useLoadPreviousProperties,
+  useRecaptcha
 };

package/hooks/use-recaptcha.js

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState } from 'react';
+
+// Currenly supports only Recaptcha V2
+
+const RECAPTCHA_CONFIG = {
+	KEY: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
+	FILED_NAME: 'g-recaptcha-response',
+	SCRIPT_ID: 'recaptcha-script',
+	SCRIPT_LINK: 'https://www.google.com/recaptcha/api.js?render=explicit'
+};
+
+const useRecaptcha = ({
+  formID,
+  formRef,
+  onRecaptchaSubmit,
+  shouldKickGAEvent = true,
+	recaptchaSize = 'invisible',
+}) => {
+  const RECAPTCHA_CONTAINER_ID = `recaptcha-wrapper-${formID}`;
+
+  const [stateWidget, setStateWidget] = useState(null);
+  const [stateIsRecaptchaLoaded, setStateIsRecaptchaLoaded] = useState(false);
+  const [stateIntervalId, setStateIntervalId] = useState(null);
+
+  const loadRecaptchaScript = () => new Promise(
+    (resolve, reject) => {
+      const recaptchaScript = document.createElement('script');
+
+      recaptchaScript.onload = resolve;
+      recaptchaScript.onerror = reject;
+      recaptchaScript.id = RECAPTCHA_CONFIG.SCRIPT_ID;
+      recaptchaScript.src = RECAPTCHA_CONFIG.SCRIPT_LINK;
+      document.body.appendChild(recaptchaScript);
+    },
+  );
+
+  const onAppendRecaptchaContainer = () => {
+    const recaptchaContainer = document.createElement('div');
+    recaptchaContainer.id = RECAPTCHA_CONTAINER_ID;
+
+    formRef.current.appendChild(recaptchaContainer);
+  };
+
+  const onResetRecaptcha = useCallback(() => {
+    window.grecaptcha.reset(stateWidget);
+    const currentRecaptchaContainer = document.getElementById(RECAPTCHA_CONTAINER_ID);
+
+    if (currentRecaptchaContainer) {
+      currentRecaptchaContainer.remove();
+    }
+  }, [stateWidget]);
+
+  const waitForRecaptchaScript = () => {
+    const intervalId = setInterval(() => {
+      if (window.grecaptcha?.render) {
+        setStateIsRecaptchaLoaded(true);
+      }
+    }, 500);
+    setStateIntervalId(intervalId);
+  };
+
+  /*
+  * has to be rendered on form submit and not earlier
+  * so that onRecaptchaSubmit function has updated reference
+  * and uses updated React states
+  */
+  const triggerRecaptchaRender = useCallback(() => {
+    const currentRecaptchaContainer = document.getElementById(RECAPTCHA_CONTAINER_ID);
+
+    if (!currentRecaptchaContainer) {
+      onAppendRecaptchaContainer();
+    }
+
+    const widget = window.grecaptcha.render(`recaptcha-wrapper-${formID}`, {
+      sitekey: RECAPTCHA_CONFIG.KEY,
+      callback: (token) => onRecaptchaSubmit({
+        [RECAPTCHA_CONFIG.FILED_NAME]: token
+      }),
+      size: recaptchaSize,
+    });
+
+    setStateWidget(widget);
+  }, [onRecaptchaSubmit]);
+
+  useEffect(() => {
+    if (stateIsRecaptchaLoaded) {
+      clearInterval(stateIntervalId);
+      triggerRecaptchaRender();
+    }
+  }, [stateIsRecaptchaLoaded]);
+
+  const onRecaptchaRender = useCallback(() => {
+    const isRecaptchaTokenReady = formRef
+      .current
+      .querySelector(`[name="${RECAPTCHA_CONFIG.FILED_NAME}"]`);
+    
+    if (isRecaptchaTokenReady){
+      return;
+    } else {
+      if (window.grecaptcha?.render) {
+        triggerRecaptchaRender();
+      } else {
+        waitForRecaptchaScript();
+      }
+    }
+  }, [triggerRecaptchaRender]);
+
+  const onRejectRecaptcha = () => {
+    console.error('Recaptcha setup error');
+  };
+
+  const executeRecaptcha = () => {
+    window.grecaptcha.execute(stateWidget);
+    /*
+    * some of the theme calls GA event on form submition
+    * so in order to prevent duplication please pass shouldKickGAEvent prop
+    */
+    if (shouldKickGAEvent) {
+      Homeflow.kickEvent('after_successful_recaptcha', formRef.current);
+    }
+  };
+
+  useEffect(() => {
+    if (stateWidget !== null) {
+      executeRecaptcha();
+    }
+  }, [stateWidget]);
+
+  useEffect(() => {
+    if (!document.getElementById('recaptcha-script')) {
+      loadRecaptchaScript()
+        .catch(onRejectRecaptcha);
+    }
+  }, []);
+
+  return {
+    onRecaptchaRender,
+    onResetRecaptcha,
+  };
+};
+
+export default useRecaptcha;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.13.53",
+  "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>
   );