homeflowjs 1.1.8 → 1.2.0

package/hooks/use-recaptcha.js

@@ -1,21 +1,35 @@
 import { useCallback, useEffect, useState } from 'react';
 
-// Currenly supports only Recaptcha V2
-
 const RECAPTCHA_CONFIG = {
-	KEY: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
-	FILED_NAME: 'g-recaptcha-response',
+	V2_KEY: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
+	V3_KEY: '6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K',
+	FIELD_NAME: 'g-recaptcha-response',
 	SCRIPT_ID: 'recaptcha-script',
 	SCRIPT_LINK: 'https://www.google.com/recaptcha/api.js?render=explicit',
+	V3_SCRIPT_LINK: 'https://www.google.com/recaptcha/api.js?render=6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K',
+};
+
+// default to 3 in all cases for HFJS themes
+// override to 2 in theme if required
+const isRecaptchaV3 = () => {
+  const recaptchaVersion = Homeflow.get('recaptcha_version');
+
+  if (recaptchaVersion === 2) {
+    return false;
+  }
+
+  return true;
 };
 
+
 const useRecaptcha = ({
-  apiKey = RECAPTCHA_CONFIG.KEY,
+  apiKey = RECAPTCHA_CONFIG.V2_KEY,
   formID,
   formRef,
   onRecaptchaSubmit,
   shouldKickGAEvent = true,
 	recaptchaSize = 'invisible',
+	recaptchaAction = 'submit',
 }) => {
   const RECAPTCHA_CONTAINER_ID = `recaptcha-wrapper-${formID}`;
 
@@ -30,7 +44,9 @@ const useRecaptcha = ({
       recaptchaScript.onload = resolve;
       recaptchaScript.onerror = reject;
       recaptchaScript.id = RECAPTCHA_CONFIG.SCRIPT_ID;
-      recaptchaScript.src = RECAPTCHA_CONFIG.SCRIPT_LINK;
+      recaptchaScript.src = isRecaptchaV3()
+        ? RECAPTCHA_CONFIG.V3_SCRIPT_LINK
+        : RECAPTCHA_CONFIG.SCRIPT_LINK;
       document.body.appendChild(recaptchaScript);
     },
   );
@@ -53,21 +69,20 @@ const useRecaptcha = ({
     }
   }, [stateWidget]);
 
+  const isRecaptchaScriptReady = () => (
+    isRecaptchaV3() ? window.grecaptcha?.execute : window.grecaptcha?.render
+  );
+
   const waitForRecaptchaScript = () => {
     const intervalId = setInterval(() => {
-      if (window.grecaptcha?.render) {
+      if (isRecaptchaScriptReady()) {
         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 triggerRecaptchaRenderV2 = () => {
     const currentRecaptchaContainer = document.getElementById(RECAPTCHA_CONTAINER_ID);
 
     if (!currentRecaptchaContainer) {
@@ -77,12 +92,38 @@ const useRecaptcha = ({
     const widget = window.grecaptcha.render(`recaptcha-wrapper-${formID}`, {
       sitekey: apiKey,
       callback: (token) => onRecaptchaSubmit({
-        [RECAPTCHA_CONFIG.FILED_NAME]: token
+        [RECAPTCHA_CONFIG.FIELD_NAME]: token
       }),
       size: recaptchaSize,
     });
 
     setStateWidget(widget);
+  };
+
+  const triggerRecaptchaRenderV3 = () => {
+    window.grecaptcha.ready(() => {
+      window.grecaptcha.execute(RECAPTCHA_CONFIG.V3_KEY, { action: recaptchaAction })
+        .then((token) => {
+          onRecaptchaSubmit({ [RECAPTCHA_CONFIG.FIELD_NAME]: token });
+
+          if (shouldKickGAEvent) {
+            Homeflow.kickEvent('after_successful_recaptcha', formRef.current);
+          }
+        });
+    });
+  };
+
+  /*
+  * 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(() => {
+    if (isRecaptchaV3()) {
+      triggerRecaptchaRenderV3();
+    } else {
+      triggerRecaptchaRenderV2();
+    }
   }, [onRecaptchaSubmit]);
 
   useEffect(() => {
@@ -95,14 +136,14 @@ const useRecaptcha = ({
   const onRecaptchaRender = useCallback(() => {
     const recaptchaTokenEl = formRef
       .current
-      .querySelector(`[name="${RECAPTCHA_CONFIG.FILED_NAME}"]`);
-    
+      .querySelector(`[name="${RECAPTCHA_CONFIG.FIELD_NAME}"]`);
+
     if (recaptchaTokenEl){
       onRecaptchaSubmit({
-        [RECAPTCHA_CONFIG.FILED_NAME]: recaptchaTokenEl.value
+        [RECAPTCHA_CONFIG.FIELD_NAME]: recaptchaTokenEl.value
       })
     } else {
-      if (window.grecaptcha?.render) {
+      if (isRecaptchaScriptReady()) {
         triggerRecaptchaRender();
       } else {
         waitForRecaptchaScript();

package/package.json

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

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

@@ -45,7 +45,7 @@ const UserRegisterForm = (props) => {
       window.location.href = '/';
     }
 
-    createUser(userParams)
+    createUser(userParams, recaptchaData)
       .then((data) => {
         if (data?.validationErrors?.length > 0) {
           setValidationErrors(data.validationErrors);
@@ -74,6 +74,7 @@ const UserRegisterForm = (props) => {
     formID: 'registration-form',
     formRef,
     onRecaptchaSubmit,
+    recaptchaAction: 'register',
   });
 
   const handleSubmit = (e) => {