homeflowjs 0.13.52 → 0.13.54

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.52",
+  "version": "0.13.54",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/utils/index.js

@@ -52,7 +52,7 @@ export const findSavedSearch = (savedSearches, search) => {
     if (savedSearch.tags && search.tags && savedSearch.tags.length !== search.tags.length) return false;
     if (savedSearch.tags && search.tags
       && !savedSearch.tags.every(
-        (value, index) => value?.toLowerCase() === search.tags[index]?.toLowerCase()?.replaceAll('-', ' '),
+        (value, index) => value?.toLowerCase()?.replaceAll('-', ' ') === search.tags[index]?.toLowerCase()?.replaceAll('-', ' '),
       )) return false;
 
     return true;