ordering-ui-external 1.6.8 → 1.7.1

package/src/themes/five/src/components/ServiceForm/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
-import { useUtils, useLanguage, useSession, ProductForm as ProductFormController } from 'ordering-components-external'
+import { useUtils, useLanguage, useSession, useConfig, ProductForm as ProductFormController } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Alert } from '../Confirm'
 import { Modal } from '../Modal'
@@ -10,8 +10,10 @@ import { ForgotPasswordForm } from '../ForgotPasswordForm'
 import { useTheme } from 'styled-components'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { ChevronLeft, ChevronRight, ChevronDown } from 'react-bootstrap-icons'
-import { BusinessPreorder } from '../BusinessPreorder'
+import BsCaretLeftFill from '@meronex/icons/bs/BsCaretLeftFill'
 import { Button } from '../../styles/Buttons'
+import moment from 'moment'
+import { getTimes } from '../../../../../utils'
 import SwiperCore, { Navigation } from 'swiper'
 import 'swiper/swiper-bundle.min.css'
 import 'swiper/swiper.min.css'
@@ -36,11 +38,22 @@ import {
   DropDownWrapper,
   DropDownTitle,
   EmptyProfessional,
-  SkeletonBlock
+  SkeletonBlock,
+  OrderTimeWrapper,
+  DateWrapper,
+  MonthYearLayer,
+  DaysSwiper,
+  Day,
+  DayName,
+  DayNumber,
+  TimeListWrapper,
+  TimeItem,
+  ClosedBusinessMsg
 } from './styles'
-import moment from 'moment'
 SwiperCore.use([Navigation])
 
+const maxDate = 40
+
 const ServiceFormUI = (props) => {
   const {
     productObject,
@@ -56,14 +69,21 @@ const ServiceFormUI = (props) => {
   const { product, loading, error } = productObject
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
   const [{ parsePrice, parseDate }] = useUtils()
   const [{ auth }, { login }] = useSession()
   const [modalPageToShow, setModalPageToShow] = useState('login')
   const [modalIsOpen, setModalIsOpen] = useState(false)
   const [isDropDown, setIsDropDown] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState(null)
+  const [timeList, setTimeList] = useState([])
+  const [timeSelected, setTimeSelected] = useState(null)
+  const [selectDate, setSelectedDate] = useState(new Date())
+  const [isEnabled, setIsEnabled] = useState(false)
+  const [datesList, setDatesList] = useState([])
 
   const dropDownRef = useRef()
+  const is12Hours = configs?.format_time?.value === '12'
 
   const closeModal = () => {
     setModalIsOpen(false)
@@ -115,6 +135,13 @@ const ServiceFormUI = (props) => {
     handleSave(values)
   }
 
+  const handleChangeTime = (time) => {
+    if (!time || time === timeSelected) return
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    setTimeSelected(time)
+    setDateSelected(_moment)
+  }
+
   const isBusyTime = (professional) => {
     if (professional?.busy_times?.length === 0 || !dateSelected) return false
     const valid = professional?.busy_times.some(item => {
@@ -134,6 +161,31 @@ const ServiceFormUI = (props) => {
     setCurrentProfessional(professional)
   }
 
+  const validateSelectedDate = (curdate, menu) => {
+    const day = moment(curdate).format('d')
+    setIsEnabled(menu?.schedule?.[day]?.enabled || false)
+  }
+
+  const getTimeList = (curdate, menu) => {
+    validateSelectedDate(curdate, menu)
+    const selectedDate = new Date(curdate)
+    const times = getTimes(selectedDate, menu?.schedule, is12Hours)
+    return times
+  }
+
+  const validDate = (date) => {
+    if (!date) return
+    const _date = moment(date, 'YYYY-MM-DD HH:mm').isSameOrAfter(moment(), 'day')
+      ? moment(date).format('YYYY-MM-DD HH:mm')
+      : moment().format('YYYY-MM-DD HH:mm')
+    return _date
+  }
+
+  const handleChangeDate = (date) => {
+    setSelectedDate(date)
+    setTimeSelected(null)
+  }
+
   useEffect(() => {
     const imageList = []
     imageList.push(product?.images || theme.images?.dummies?.product)
@@ -166,6 +218,27 @@ const ServiceFormUI = (props) => {
     }
   }, [isCartProduct, professionalListState?.professionals])
 
+  useEffect(() => {
+    if (selectDate === null || currentProfessional === null) return
+    const _times = getTimeList(selectDate, currentProfessional)
+    setTimeList(_times)
+  }, [selectDate, currentProfessional])
+
+  useEffect(() => {
+    const _datesList = []
+
+    for (let i = 0; i < maxDate + 1; i++) {
+      _datesList.push(moment(validDate(new Date())).add(i, 'd').format('YYYY-MM-DD'))
+    }
+    setDatesList(_datesList)
+  }, [])
+
+  useEffect(() => {
+    if (!productCart?.calendar_event?.start) return
+    setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
+    setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
+  }, [productCart])
+
   return (
     <>
       <Container>
@@ -289,13 +362,80 @@ const ServiceFormUI = (props) => {
                 <span>{t('REQUIRED', 'Required')}</span>
               </SectionHeader>
               {currentProfessional ? (
-                <BusinessPreorder
-                  business={currentProfessional}
-                  isProfessional
-                  maxDays={50}
-                  onChangeMoment={setDateSelected}
-                  useOrderContext={false}
-                />
+                <OrderTimeWrapper>
+                  <DateWrapper>
+                    <MonthYearLayer>
+                      <span>{moment(dateSelected).format('MMMM, yyyy')}</span>
+                    </MonthYearLayer>
+                    <DaysSwiper left={<BsCaretLeftFill />}>
+                      <Swiper
+                        spaceBetween={0}
+                        navigation
+                        breakpoints={{
+                          0: {
+                            slidesPerView: 4,
+                            spaceBetween: 0
+                          },
+                          400: {
+                            slidesPerView: 5,
+                            spaceBetween: 0
+                          },
+                          550: {
+                            slidesPerView: 6,
+                            spaceBetween: 0
+                          },
+                          769: {
+                            slidesPerView: 7,
+                            spaceBetween: 0
+                          }
+                        }}
+                        freeMode
+                        watchSlidesProgress
+                        className='swiper-datelist'
+                        preventClicksPropagation={false}
+                      >
+                        {
+                          datesList.slice(0, Number(maxDate - 1, 10)).map((date, i) => {
+                            const dateParts = date.split('-')
+                            const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+                            const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 2)
+                            const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
+                            return (
+                              <SwiperSlide key={i}>
+                                <Day
+                                  selected={moment(selectDate).format('YYYY-MM-DD') === date}
+                                  onClick={() => handleChangeDate(moment(date))}
+                                >
+                                  <DayName>{dayName}</DayName>
+                                  <DayNumber>{dayNumber}</DayNumber>
+                                </Day>
+                              </SwiperSlide>
+                            )
+                          })
+                        }
+                      </Swiper>
+                    </DaysSwiper>
+                  </DateWrapper>
+                  <TimeListWrapper>
+                    {(isEnabled && timeList?.length > 0) ? (
+                      <>
+                        {timeList.map((time, i) => (
+                          <TimeItem
+                            key={i}
+                            active={timeSelected === time.value}
+                            onClick={() => handleChangeTime(time.value)}
+                          >
+                            <span>{time.text}</span>
+                          </TimeItem>
+                        ))}
+                      </>
+                    ) : (
+                      <ClosedBusinessMsg>
+                        {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
+                      </ClosedBusinessMsg>
+                    )}
+                  </TimeListWrapper>
+                </OrderTimeWrapper>
               ) : (
                 <EmptyProfessional>
                   {t('NO_SCHEDULE', 'No schedule')}

package/src/themes/five/src/components/ServiceForm/styles.js

@@ -321,3 +321,151 @@ export const SkeletonBlock = styled.div`
     margin-bottom: 10px;
   }
 `
+
+export const OrderTimeWrapper = styled.div``
+
+export const DateWrapper = styled.div``
+
+export const MonthYearLayer = styled.div`
+  margin-top: 0px;
+  margin-bottom: 13px;
+
+  span {
+    font-size: 16px;
+    line-height: 24px;
+  }
+`
+
+export const DaysSwiper = styled.div`
+  width: 100%;
+  position: relative;
+  border-top: 1px solid  ${props => props.theme.colors.gray200};
+  border-bottom: 1px solid  ${props => props.theme.colors.gray200};
+
+  .swiper-datelist {
+    padding: 0 20px;
+    .swiper-button-prev {
+      background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 16 16' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 00-1.659-.753l-5.48 4.796a1 1 0 000 1.506z'%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      background-position: center;
+      width: 20px;
+    }
+
+    .swiper-button-prev::after {
+      display: none;
+    }
+    .swiper-button-next {
+      background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 16 16' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 011.659-.753l5.48 4.796a1 1 0 010 1.506z'%3E%3C/path%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      background-position: center;
+      width: 18px;
+    }
+
+    .swiper-button-next::after {
+      display: none;
+    }
+
+    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
+      right: 0px;
+      left: auto;
+    }
+    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
+      left: 0px;
+      right: auto;
+    }
+  }
+`
+
+export const Day = styled.div`
+  display: flex;
+  flex-grow: 1;
+  color: ${props => props.theme.colors.lightGray};
+  cursor: pointer;
+  padding: 14px 0 13px 0;
+  flex-direction: column;
+  align-items: center;
+  transition: background-color .16s ease -0.01s;
+
+  ${({ selected }) => selected && css`
+    color: ${props => props.theme.colors.headingColor};
+  `}
+
+  :hover {
+    background-color: ${props => props.theme.colors.gray200};
+  }
+`
+
+export const DayName = styled.div`
+  display: flex;
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  &:first-letter {
+    text-transform: uppercase;
+  }
+`
+
+export const DayNumber = styled.div`
+  display: flex;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+`
+
+export const TimeListWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -12px;
+  width: calc(100% + 24px);
+  margin-top: 30px;
+  max-height: 250px;
+  overflow: auto;
+`
+
+export const TimeItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${props => props.theme.colors.gray200};
+  border-radius: 7.6px;
+  padding: 5px 15px;
+  margin: 12px;
+  width: calc(50% - 24px);
+  min-width: calc(50% - 24px);
+  box-sizing: border-box;
+  user-select: none;
+
+  ${({ active }) => active && css`
+    background: ${props => props.theme.colors.primaryContrast};
+    color: ${props => props.theme.colors.primary};
+  `}
+
+  span {
+    font-size: 14px;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 400px) {
+    width: calc(33.33% - 24px);
+    min-width: calc(33.33% - 24px);
+  }
+
+  @media (min-width: 576px) {
+    width: calc(25% - 24px);
+    min-width: calc(25% - 24px);
+  }
+
+  @media (min-width: 769px) {
+    width: calc(16.66% - 24px);
+    min-width: calc(16.66% - 24px);
+  }
+`
+
+export const ClosedBusinessMsg = styled.div`
+  text-align: center;
+  font-size: 16px;
+  width: 100%;
+`

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

@@ -6,6 +6,7 @@ import {
   useLanguage,
   useConfig,
   useSession,
+  ReCaptcha
 } from 'ordering-components-external'
 import RiPhoneLine from '@meronex/icons/ri/RiPhoneLine'
 import GoMail from '@meronex/icons/go/GoMail'
@@ -29,7 +30,8 @@ import {
   Slogan,
   LoginWithButton,
   OrContainer,
-  Line
+  Line,
+  ReCaptchaWrapper
 } from './styles'
 
 // import { Tabs, Tab } from '../../styles/Tabs'
@@ -40,6 +42,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 { useTheme } from 'styled-components'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -52,6 +55,7 @@ const LoginFormUI = (props) => {
     useLoginByEmail,
     useLoginByCellphone,
     handleChangeInput,
+    handleReCaptcha,
     handleChangeTab,
     handleButtonLoginClick,
     handleSendVerifyCode,
@@ -63,13 +67,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)
@@ -175,12 +182,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])
 
@@ -250,6 +270,12 @@ const LoginFormUI = (props) => {
 
   }, [verifyPhoneState])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -374,6 +400,11 @@ const LoginFormUI = (props) => {
                     props.afterMidComponents?.map((MidComponent, i) => (
                       <MidComponent key={i} {...props} />))
                   }
+                  {props.isRecaptchaEnable && enableReCaptcha && (
+                    <ReCaptchaWrapper>
+                      <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+                    </ReCaptchaWrapper>
+                  )}
                   {(!willVerifyOtpState &&
                     <Button
                       color='primary'
@@ -499,7 +530,8 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
-    UIComponent: LoginFormUI
+    UIComponent: LoginFormUI,
+    isRecaptchaEnable: true
   }
   return <LoginFormController {...loginControllerProps} />
 }

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

@@ -350,3 +350,7 @@ export const Line = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors?.grayColor};
   flex: 1;
 `
+
+export const ReCaptchaWrapper = styled.div`
+  margin: 12px auto;
+`

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

@@ -9,7 +9,8 @@ import {
   SignupForm as SignUpController,
   useLanguage,
   useConfig,
-  useSession
+  useSession,
+  ReCaptcha
 } from 'ordering-components-external'
 
 import { Alert } from '../../../../../components/Confirm'
@@ -21,6 +22,7 @@ import { AppleLogin } from '../AppleLogin'
 import { Input } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { Checkbox } from '../../../../../styles/Checkbox'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 import {
   HeroContainer,
@@ -38,7 +40,8 @@ import {
   Slogan,
   OrContainer,
   Line,
-  TermsConditionWrapper
+  TermsConditionWrapper,
+  ReCaptchaWrapper
 } from './styles'
 const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
 
@@ -57,11 +60,15 @@ const SignUpFormUI = (props) => {
     externalPhoneNumber,
     saveCustomerUser,
     fieldsNotValid,
-    signupData
+    signupData,
+    enableReCaptcha,
+    handleReCaptcha
   } = 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()
 
@@ -167,6 +174,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')]
@@ -222,6 +245,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -360,7 +389,11 @@ const SignUpFormUI = (props) => {
                     </label>
                   </TermsConditionWrapper>
                 )}
-
+                {props.isRecaptchaEnable && enableReCaptcha && (
+                  <ReCaptchaWrapper>
+                    <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+                  </ReCaptchaWrapper>
+                )}
                 <Button
                   color='primary'
                   type='submit'
@@ -430,7 +463,8 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
-    UIComponent: SignUpFormUI
+    UIComponent: SignUpFormUI,
+    isRecaptchaEnable: true
   }
   return <SignUpController {...loginControllerProps} />
 }

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

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

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

@@ -39,6 +39,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'
@@ -73,6 +74,8 @@ const LoginFormUI = (props) => {
   const theme = useTheme()
   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 [passwordSee, setPasswordSee] = useState(false)
@@ -180,6 +183,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')]
@@ -247,6 +265,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) => (
@@ -391,7 +415,7 @@ const LoginFormUI = (props) => {
               )}
               {props.isRecaptchaEnable && enableReCaptcha && (
                 <ReCaptchaWrapper>
-                  <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                 </ReCaptchaWrapper>
               )}
               {(!willVerifyOtpState &&
@@ -497,6 +521,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />