ordering-ui-external 1.6.7 → 1.7.0

package/src/themes/franchise/src/components/SignUpForm/index.js

@@ -39,6 +39,7 @@ import { sortInputFields } from '../../../../../utils'
 import { FacebookLoginButton } from '../FacebookLogin'
 import { GoogleLoginButton } from '../GoogleLogin'
 import { AppleLogin } from '../AppleLogin'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
@@ -73,6 +74,8 @@ const SignUpFormUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { login }] = useSession()
   const emailInput = useRef(null)
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
@@ -185,6 +188,22 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -240,6 +259,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -363,7 +388,7 @@ const SignUpFormUI = (props) => {
             }
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
 
@@ -465,6 +490,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

package/src/themes/seven/src/components/LoginForm/index.js

@@ -37,6 +37,7 @@ import { FacebookLoginButton } from '../../../../../components/FacebookLogin'
 import { AppleLogin } from '../../../../../components/AppleLogin'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import parsePhoneNumber from 'libphonenumber-js'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
@@ -67,7 +68,9 @@ const LoginFormUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const [passwordSee, setPasswordSee] = useState(false)
   const emailInput = useRef(null)
@@ -175,6 +178,21 @@ const LoginFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -242,6 +260,12 @@ const LoginFormUI = (props) => {
     } else { resetOtpLeftTime() }
   }, [verifyPhoneState])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -344,6 +368,12 @@ const LoginFormUI = (props) => {
                 </FormInline>
               )}
 
+              {props.isRecaptchaEnable && enableReCaptcha && (
+                <ReCaptchaWrapper>
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+                </ReCaptchaWrapper>
+              )}
+
               <FormInline>
                 {(!willVerifyOtpState &&
                   <Button
@@ -486,6 +516,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />

package/src/themes/seven/src/components/SignUpForm/index.js

@@ -41,6 +41,7 @@ import { AppleLogin } from '../../../../../components/AppleLogin'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 import { sortInputFields } from '../../../../../utils'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
 const SignUpFormUI = (props) => {
@@ -66,6 +67,8 @@ const SignUpFormUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const emailInput = useRef(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
@@ -183,6 +186,22 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -238,6 +257,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -389,7 +414,7 @@ const SignUpFormUI = (props) => {
                 {props.isRecaptchaEnable && enableReCaptcha && (
                   <FormInline>
                     <ReCaptchaWrapper>
-                      <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                      <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                     </ReCaptchaWrapper>
                   </FormInline>
                 )}
@@ -494,6 +519,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

package/src/themes/six/src/components/LoginForm/index.js

@@ -32,6 +32,7 @@ import { GoogleLoginButton } from '../../../../../components/GoogleLogin'
 import { Input } from '../../styles/Inputs'
 import { Button } from '../../../../../styles/Buttons'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import { formatSeconds } from '../../../../../utils'
 import { useTheme } from 'styled-components'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -65,6 +66,8 @@ const LoginFormUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [, { login }] = useSession()
   const theme = useTheme()
@@ -156,10 +159,26 @@ const LoginFormUI = (props) => {
   }
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
       })
+      // setSubmitted(false)
     }
   }, [formState])
   useEffect(() => {
@@ -219,6 +238,13 @@ const LoginFormUI = (props) => {
       resetOtpLeftTime()
     }
   }, [verifyPhoneState])
+
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -350,7 +376,7 @@ const LoginFormUI = (props) => {
               )}
               {props.isRecaptchaEnable && enableReCaptcha && (
                 <ReCaptchaWrapper>
-                  <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                 </ReCaptchaWrapper>
               )}
               {(!willVerifyOtpState &&
@@ -451,6 +477,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />

package/src/themes/six/src/components/SignUpForm/index.js

@@ -4,6 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import { Alert } from '../../../../../components/Confirm'
 import { InputPhoneNumber } from '../../../../../components/InputPhoneNumber'
 import parsePhoneNumber from 'libphonenumber-js'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 import {
   SignupForm as SignUpController,
@@ -64,6 +65,8 @@ const SignUpFormUI = (props) => {
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const theme = useTheme()
   const emailInput = useRef(null)
@@ -180,6 +183,22 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -198,6 +217,12 @@ const SignUpFormUI = (props) => {
     }
   }, [formMethods.errors])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   useEffect(() => {
     if (!validationFields.loading) {
       Object.values(validationFields?.fields?.checkout).map(field => !notValidationFields.includes(field.code) && (
@@ -345,7 +370,7 @@ const SignUpFormUI = (props) => {
             }
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
             {elementLinkToLogin && (
@@ -442,6 +467,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

package/src/themes/three/src/components/LoginForm/index.js

@@ -5,7 +5,8 @@ import {
   LoginForm as LoginFormController,
   useLanguage,
   useConfig,
-  useSession
+  useSession,
+  ReCaptcha
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
@@ -22,7 +23,8 @@ import {
   WrapperPassword,
   TogglePassword,
   OtpWrapper,
-  CountdownTimer
+  CountdownTimer,
+  ReCaptchaWrapper
 } from './styles'
 
 import { Tabs, Tab } from '../../styles/Tabs'
@@ -33,6 +35,7 @@ import { FacebookLoginButton } from '../../../../../components/FacebookLogin'
 import { AppleLogin } from '../../../../../components/AppleLogin'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import { formatSeconds } from '../../../../../utils'
 import { useTheme } from 'styled-components'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -45,6 +48,7 @@ const LoginFormUI = (props) => {
     useLoginByEmail,
     useLoginByCellphone,
     handleChangeInput,
+    handleReCaptcha,
     handleChangeTab,
     handleButtonLoginClick,
     handleSendVerifyCode,
@@ -56,13 +60,16 @@ const LoginFormUI = (props) => {
     checkPhoneCodeState,
     loginTab,
     isPopup,
-    credentials
+    credentials,
+    enableReCaptcha
   } = props
   const numOtpInputs = 4
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const theme = useTheme()
   const [passwordSee, setPasswordSee] = useState(false)
@@ -164,12 +171,25 @@ const LoginFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
       })
-
-      return
     }
   }, [formState])
 
@@ -240,6 +260,12 @@ const LoginFormUI = (props) => {
 
   }, [verifyPhoneState])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -385,6 +411,11 @@ const LoginFormUI = (props) => {
                   {elementLinkToForgotPassword}
                 </RedirectLink>
               )}
+              {props.isRecaptchaEnable && enableReCaptcha && (
+                <ReCaptchaWrapper>
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+                </ReCaptchaWrapper>
+              )}
               {(!willVerifyOtpState &&
                 <Button
                   color='secundary'
@@ -485,7 +516,8 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
-    UIComponent: LoginFormUI
+    UIComponent: LoginFormUI,
+    isRecaptchaEnable: true
   }
   return <LoginFormController {...loginControllerProps} />
 }

package/src/themes/three/src/components/LoginForm/styles.js

@@ -276,3 +276,7 @@ export const CountdownTimer = styled.div`
   }
 
 `
+
+export const ReCaptchaWrapper = styled.div`
+  margin: 12px auto;
+`

package/src/themes/three/src/components/SignUpForm/index.js

@@ -9,7 +9,8 @@ import {
   SignupForm as SignUpController,
   useLanguage,
   useConfig,
-  useSession
+  useSession,
+  ReCaptcha
 } from 'ordering-components-external'
 import {
   SignUpContainer,
@@ -21,7 +22,8 @@ import {
   SkeletonSocialWrapper,
   WrapperPassword,
   TogglePassword,
-  TermsConditionWrapper
+  TermsConditionWrapper,
+  ReCaptchaWrapper
 } from './styles'
 
 import { Input } from '../../styles/Inputs'
@@ -35,6 +37,7 @@ import { useTheme } from 'styled-components'
 import AiOutlineEye from '@meronex/icons/ai/AiOutlineEye'
 import AiOutlineEyeInvisible from '@meronex/icons/ai/AiOutlineEyeInvisible'
 import { sortInputFields } from '../../../../../utils'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
 
@@ -53,12 +56,16 @@ const SignUpFormUI = (props) => {
     externalPhoneNumber,
     saveCustomerUser,
     fieldsNotValid,
-    signupData
+    signupData,
+    enableReCaptcha,
+    handleReCaptcha
   } = props
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const theme = useTheme()
   const emailInput = useRef(null)
@@ -162,6 +169,22 @@ const SignUpFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
+
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -217,6 +240,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -326,6 +355,12 @@ const SignUpFormUI = (props) => {
               )
             }
 
+            {props.isRecaptchaEnable && enableReCaptcha && (
+              <ReCaptchaWrapper>
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+              </ReCaptchaWrapper>
+            )}
+
             {configs?.terms_and_conditions?.value === 'true' && (
               <TermsConditionWrapper>
                 <Checkbox
@@ -414,7 +449,8 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
-    UIComponent: SignUpFormUI
+    UIComponent: SignUpFormUI,
+    isRecaptchaEnable: true
   }
   return <SignUpController {...loginControllerProps} />
 }

package/src/themes/three/src/components/SignUpForm/styles.js

@@ -218,3 +218,7 @@ export const TermsConditionWrapper = styled.div`
     }
   }
 `
+
+export const ReCaptchaWrapper = styled.div`
+  margin: 12px auto;
+`

package/src/themes/two/src/components/LoginForm/index.js

@@ -34,6 +34,7 @@ import { FacebookLoginButton } from '../FacebookLogin'
 import { AppleLogin } from '../AppleLogin'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import { formatSeconds } from '../../../../../utils'
 import parsePhoneNumber from 'libphonenumber-js'
 import OtpInput from 'react-otp-input'
@@ -66,7 +67,9 @@ const LoginFormUI = (props) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const formMethods = useForm()
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const [, { login }] = useSession()
   const [passwordSee, setPasswordSee] = useState(false)
   const emailInput = useRef(null)
@@ -162,6 +165,21 @@ const LoginFormUI = (props) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        if (configs?.security_recaptcha_site_key?.value) {
+          setRecaptchaVersion({ version: 'v2', siteKey: configs?.security_recaptcha_site_key?.value })
+          setAlertState({
+            open: true,
+            content: [t('TRY_AGAIN', 'Please try again')]
+          })
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -236,6 +254,12 @@ const LoginFormUI = (props) => {
 
   }, [verifyPhoneState])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -429,7 +453,7 @@ const LoginFormUI = (props) => {
               )}
               {props.isRecaptchaEnable && enableReCaptcha && (
                 <ReCaptchaWrapper>
-                  <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                 </ReCaptchaWrapper>
               )}
               {(!willVerifyOtpState &&