homeflowjs 1.0.17 → 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/hooks/use-scroll-to.hook.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import { isFunction } from '../utils';
 
-const scrollToTarget = (target, { yOffset = 0 } = {}) => {
+const scrollToTarget = (target, { yOffset = 0, additionalYOffset = 0 } = {}) => {
+
   // If target is chunk ID
   let targetElement;
   if (!isNaN(target)) {
@@ -25,33 +26,46 @@ const scrollToTarget = (target, { yOffset = 0 } = {}) => {
       }
     }
 
-    const y = targetElement.getBoundingClientRect().top
-      + window.pageYOffset + verticalOffset;
+    if(additionalYOffset) {
+      verticalOffset = verticalOffset + parseInt(additionalYOffset, 10);
+    }
+
+    let y = 0;
+    const targetTop = targetElement.getBoundingClientRect().top;
+    if(targetTop > 0) y =
+      targetElement.getBoundingClientRect().top +
+      window.pageYOffset +
+      verticalOffset;
 
     window.scrollTo({ top: y, behavior: 'smooth' });
     history.scrollRestoration = 'manual';
   }
 };
 
-const getTarget = (hash) => {
+const getURLParams = (hash) => {
   const [, search] = hash.split('?');
-  const { target } = Object.fromEntries(new URLSearchParams(search));
-  return target;
+  const { target, yOffset } = Object.fromEntries(new URLSearchParams(search));
+  return { target, yOffsetFromURLParams: yOffset };
 };
 
 function handleScrollToClick(options) {
   // eslint-disable-next-line func-names
   return function () {
-    const target = getTarget(this.hash);
+    const { target, yOffsetFromURLParams } = getURLParams(this.hash);
     if (target) {
-      scrollToTarget(target, options);
+      scrollToTarget(target, {
+        ...options,
+        additionalYOffset: yOffsetFromURLParams,
+      });
     }
   };
 }
 
 const useScrollTo = (options) => {
   useEffect(() => {
-    const scrollToEls = document.querySelectorAll('[href^="#scroll-to"]');
+    const scrollToEls = document.querySelectorAll(
+      '[href^="#scroll-to"], [href^="#/scroll-to"]'
+    );
     scrollToEls.forEach((el) => {
       el.addEventListener(
         'click',
@@ -59,8 +73,11 @@ const useScrollTo = (options) => {
       );
     });
 
-    const target = getTarget(window.location.hash);
-    scrollToTarget(target, options);
+    const { target, yOffsetFromURLParams } = getURLParams(window.location.hash);
+    scrollToTarget(target, {
+      ...options,
+      additionalYOffset: yOffsetFromURLParams,
+    });
   }, []);
 };
 

package/package.json

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