ordering-ui-external 1.6.7 → 1.7.0

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = void 0;
+exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getTimes = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = void 0;
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styledComponents = require("styled-components");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -14,7 +14,7 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var getIconCard = function getIconCard() {
   var _theme$images$general, _theme$images, _theme$images$general2, _theme$images2, _theme$images2$genera;
@@ -332,9 +332,63 @@ var shape = {
 };
 
 /**
- * List of price to filter businesses
+ * Function to get formatted time list
+ * @param {*} selectedDate = selected Date
+ * @param {*} schedule = schedule list
+ * @param {*} is12Hours = variable for time format
  */
 exports.shape = shape;
+var getTimes = function getTimes(selectedDate, schedule, is12Hours) {
+  var date = new Date();
+  var times = [];
+  for (var k = 0; k < schedule[selectedDate.getDay()].lapses.length; k++) {
+    var open = {
+      hour: schedule[selectedDate.getDay()].lapses[k].open.hour,
+      minute: schedule[selectedDate.getDay()].lapses[k].open.minute
+    };
+    var close = {
+      hour: schedule[selectedDate.getDay()].lapses[k].close.hour,
+      minute: schedule[selectedDate.getDay()].lapses[k].close.minute
+    };
+    for (var i = open.hour; i <= close.hour; i++) {
+      if (date.getDate() !== selectedDate.getDate() || i >= date.getHours()) {
+        var hour = '';
+        var meridian = '';
+        if (is12Hours) {
+          if (i === 0) {
+            hour = '12';
+            meridian = ' ' + 'AM';
+          } else if (i > 0 && i < 12) {
+            hour = i < 10 ? '0' + i : i;
+            meridian = ' ' + 'AM';
+          } else if (i === 12) {
+            hour = '12';
+            meridian = ' ' + 'PM';
+          } else {
+            hour = i - 12 < 10 ? '0' + (i - 12) : "".concat(i - 12);
+            meridian = ' ' + 'PM';
+          }
+        } else {
+          hour = i < 10 ? '0' + i : i;
+        }
+        for (var j = i === open.hour ? open.minute : 0; j <= (i === close.hour ? close.minute : 59); j += 15) {
+          if (i !== date.getHours() || j >= date.getMinutes() || date.getDate() !== selectedDate.getDate()) {
+            times.push({
+              text: hour + ':' + (j < 10 ? '0' + j : j) + meridian,
+              value: (i < 10 ? '0' + i : i) + ':' + (j < 10 ? '0' + j : j)
+            });
+          }
+        }
+      }
+    }
+  }
+  return times;
+};
+
+/**
+ * List of price to filter businesses
+ */
+exports.getTimes = getTimes;
 var priceList = [{
   level: '1',
   content: '$'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -85,7 +85,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.5.3",
+    "ordering-components-external": "1.6.0",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/BusinessInformation/index.js

@@ -43,6 +43,7 @@ import FiClock from '@meronex/icons/fi/FiClock'
 import GrLocation from '@meronex/icons/gr/GrLocation'
 import MdClose from '@meronex/icons/md/MdClose'
 import { AutoScroll } from '../AutoScroll'
+import moment from 'moment/moment'
 
 export const BusinessInformationUI = (props) => {
   const {
@@ -74,10 +75,11 @@ export const BusinessInformationUI = (props) => {
   const [{ parsePrice, parseDistance }] = useUtils()
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
+  const timeFormat = configs?.format_time?.value
 
-  const scheduleFormatted = ({ hour, minute }) => {
-    const checkTime = (val) => val < 10 ? `0${val}` : val
-    return `${checkTime(hour)}:${checkTime(minute)}`
+  const timeOptions = {
+    12: 'hh:mm a',
+    24: 'HH:mm'
   }
 
   const handleModalImage = (src) => {
@@ -214,14 +216,14 @@ export const BusinessInformationUI = (props) => {
                             <ScheduleBlock key={i}>
                               <h4>{daysOfWeek[i]}</h4>
                               {schedule.enabled ? (
-                                schedule.lapses.map( (time, k) => (
+                                schedule.lapses.map((time, k) => (
                                   <React.Fragment key={k}>
-                                    <p>{scheduleFormatted(time.open)}</p>
+                                    <p>{moment(time.open).format(timeOptions[timeFormat])}</p>
                                     <p style={{
                                       borderBottom: '2px solid',
                                       borderBottomColor: theme.colors.primary,
                                       marginBottom: 10
-                                    }} >{scheduleFormatted(time.close)}</p>
+                                    }} >{moment(time.close).format(timeOptions[timeFormat])}</p>
                                   </React.Fragment>
                                 ))
                               ) : (

package/src/components/LoginForm/index.js

@@ -36,6 +36,7 @@ import { FacebookLoginButton } from '../FacebookLogin'
 import { AppleLogin } from '../AppleLogin'
 import { SmsLoginButton } from '../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'
@@ -68,7 +69,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 theme = useTheme()
   const [passwordSee, setPasswordSee] = useState(false)
@@ -190,6 +193,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')]
@@ -257,6 +275,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) => (
@@ -418,7 +442,7 @@ const LoginFormUI = (props) => {
               )}
               {props.isRecaptchaEnable && enableReCaptcha && (
                 <ReCaptchaWrapper>
-                  <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                 </ReCaptchaWrapper>
               )}
               {(!willVerifyOtpState &&
@@ -483,11 +507,12 @@ const LoginFormUI = (props) => {
                 )}
                 {useLoginByCellphone && loginTab === 'cellphone' &&
                   configs && Object.keys(configs).length > 0 && (configs?.twilio_service_enabled?.value === 'true' ||
-                    configs?.twilio_service_enabled?.value === '1') && (
-                    <SmsLoginButton
-                      handleSmsLogin={() => { setLoginWithOtpState(true) }}
-                    />
-                  )}
+                    configs?.twilio_service_enabled?.value === '1') &&
+                (
+                  <SmsLoginButton
+                    handleSmsLogin={() => { setLoginWithOtpState(true) }}
+                  />
+                )}
               </SocialButtons>
             ) : (
               <SkeletonSocialWrapper>
@@ -523,6 +548,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />

package/src/components/SignUpForm/index.js

@@ -40,7 +40,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']
 
 const SignUpFormUI = (props) => {
@@ -66,6 +66,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)
@@ -185,6 +187,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 +258,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -377,7 +401,7 @@ const SignUpFormUI = (props) => {
             }
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
 
@@ -478,6 +502,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

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

@@ -8,6 +8,7 @@ import {
   LoginForm as LoginFormController,
   useLanguage,
   ReCaptcha,
+  useConfig,
   useApi
 } from 'ordering-components-external'
 
@@ -41,6 +42,7 @@ import { Tabs, Tab } from '../../styles/Tabs'
 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 { Alert } from '../Confirm'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
@@ -69,10 +71,12 @@ const LoginFormUI = (props) => {
   const numOtpInputs = 4
 
   const [ordering, { setOrdering }] = useApi()
+  const [{ configs }] = useConfig()
   const [, t] = useLanguage()
   const theme = useTheme()
   const formMethods = useForm()
-
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
   const emailInput = useRef(null)
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -171,6 +175,23 @@ 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')]
+          })
+          setSubmitted(false)
+          return
+        }
+        setAlertState({
+          open: true,
+          content: [t('CONFIG_DOESNOT_RECAPTCHA_KEY', 'the config doesn\'t have recaptcha site key')]
+        })
+        setSubmitted(false)
+        return
+      }
       setAlertState({
         open: true,
         content: formState.result?.result || [t('ERROR', 'Error')]
@@ -249,6 +270,12 @@ const LoginFormUI = (props) => {
     handleButtonLoginClick()
   }, [ordering, submitted])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <LoginContainer isPopup={isPopup}>
       <HeroSide>
@@ -405,7 +432,7 @@ const LoginFormUI = (props) => {
             )}
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
             <ButtonContainer>
@@ -455,6 +482,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />

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

@@ -31,6 +31,7 @@ import { Input } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { Checkbox } from '../../../../../styles/Checkbox'
 import { sortInputFields } from '../../../../../utils'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 import {
   Person,
@@ -66,6 +67,8 @@ const SignUpFormUI = (props) => {
   const formMethods = useForm()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const emailInput = useRef(null)
+  const [recaptchaConfig] = useRecaptcha(enableReCaptcha)
+  const [reCaptchaVersion, setRecaptchaVersion] = useState({ version: '', siteKey: '' })
 
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
@@ -152,6 +155,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')]
@@ -216,6 +235,12 @@ const SignUpFormUI = (props) => {
     setFieldNumber(fieldnum)
   }, [validationFields])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -339,7 +364,7 @@ const SignUpFormUI = (props) => {
             }
             {props.isRecaptchaEnable && enableReCaptcha && (
               <ReCaptchaWrapper>
-                <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
 
@@ -406,6 +431,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

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

@@ -24,6 +24,7 @@ import { Alert } from '../../../../../components/Confirm'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
 import { SmsLoginButton } from '../../../../../components/SmsLogin'
 import { useCountdownTimer } from '../../../../../hooks/useCountdownTimer'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 import { formatSeconds } from '../../../../../utils'
 
 import {
@@ -68,6 +69,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()
@@ -177,6 +180,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')]
@@ -244,6 +262,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) => (
@@ -427,6 +451,11 @@ const LoginFormUI = (props) => {
                 props.afterMidComponents?.map((MidComponent, i) => (
                   <MidComponent key={i} {...props} />))
               }
+              {props.isRecaptchaEnable && enableReCaptcha && (
+                <ReCaptchaWrapper>
+                  <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
+                </ReCaptchaWrapper>
+              )}
               {!loginWithOtpState && (
                 <RedirectLink isPopup={isPopup}>
                   {elementLinkToForgotPassword}
@@ -495,6 +524,7 @@ const LoginFormUI = (props) => {
 export const LoginForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   }
   return <LoginFormController {...loginControllerProps} />

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

@@ -38,6 +38,7 @@ import {
 
 import { Alert } from '../../../../../components/Confirm'
 import { sortInputFields } from '../../../../../utils'
+import { useRecaptcha } from '../../../../../hooks/useRecaptcha'
 
 const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
 
@@ -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 emailInput = useRef(null)
   const isFacebookLogin = configs?.facebook_login?.value === 'true'
@@ -182,6 +185,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')]
@@ -237,6 +256,12 @@ const SignUpFormUI = (props) => {
     }
   }, [externalPhoneNumber])
 
+  useEffect(() => {
+    if (recaptchaConfig?.siteKey) {
+      setRecaptchaVersion({ version: recaptchaConfig?.version, siteKey: recaptchaConfig?.siteKey })
+    }
+  }, [recaptchaConfig])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -434,7 +459,7 @@ const SignUpFormUI = (props) => {
                 }
                 {props.isRecaptchaEnable && enableReCaptcha && (
                   <ReCaptchaWrapper>
-                    <ReCaptcha handleReCaptcha={handleReCaptcha} />
+                    <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
                   </ReCaptchaWrapper>
                 )}
 
@@ -508,6 +533,7 @@ const SignUpFormUI = (props) => {
 export const SignUpForm = (props) => {
   const loginControllerProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   }
   return <SignUpController {...loginControllerProps} />

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

@@ -153,8 +153,8 @@ const BusinessControllerUI = (props) => {
           {business?.ribbon?.enabled && (
             <RibbonBox
               bgColor={business?.ribbon?.color}
-              colorText={lightenDarkenColor(business?.ribbon?.color, -200)}
-              borderRibbon={lightenDarkenColor(business?.ribbon?.color, -200)}
+              colorText={lightenDarkenColor(business?.ribbon?.color)}
+              borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
               isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
               isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
             >