ordering-ui-external 1.4.5 → 1.5.1

package/_modules/themes/five/src/components/SearchProducts/index.js

@@ -10,6 +10,7 @@ var _orderingComponentsExternal = require("ordering-components-external");
 var _SearchBar = require("../SearchBar");
 var _styledComponents = require("styled-components");
 var _BusinessProductsList = require("../BusinessProductsList");
+var _groceries = require("../BusinessProductsList/layouts/groceries");
 var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,8 +25,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var layoutOne = 'groceries';
 var SearchProducts = function SearchProducts(props) {
-  var _theme$images, _theme$images$logos, _theme$defaultLanguag, _theme$defaultLanguag2;
+  var _configs$use_parent_c, _configs$use_parent_c2, _theme$images, _theme$images$logos, _theme$defaultLanguag, _theme$defaultLanguag2;
   var onClose = props.onClose,
     searchValue = props.searchValue,
     handleChangeSearch = props.handleChangeSearch,
@@ -39,11 +41,20 @@ var SearchProducts = function SearchProducts(props) {
   var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
     _useEvent2 = _slicedToArray(_useEvent, 1),
     events = _useEvent2[0];
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
   var searchRef = (0, _react.useRef)();
+  var isUseParentCategory = (configs === null || configs === void 0 ? void 0 : (_configs$use_parent_c = configs.use_parent_category) === null || _configs$use_parent_c === void 0 ? void 0 : _configs$use_parent_c.value) === 'true' || (configs === null || configs === void 0 ? void 0 : (_configs$use_parent_c2 = configs.use_parent_category) === null || _configs$use_parent_c2 === void 0 ? void 0 : _configs$use_parent_c2.value) === '1';
+  var frontLayout = business === null || business === void 0 ? void 0 : business.front_layout;
+  var businessLayout = {
+    layoutOne: frontLayout === layoutOne && isUseParentCategory
+  };
   var handleGoToPage = function handleGoToPage(data) {
     events.emit('go_to_page', data);
     document.body.style.overflowY = 'auto';
   };
+  var BusinessLayoutProductsList = businessLayout.layoutOne ? _groceries.BusinessProductsList : _BusinessProductsList.BusinessProductsList;
   (0, _react.useEffect)(function () {
     var _searchRef$current;
     (searchRef === null || searchRef === void 0 ? void 0 : (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus) && searchRef.current.focus();
@@ -69,7 +80,7 @@ var SearchProducts = function SearchProducts(props) {
     forwardRef: searchRef
   })), /*#__PURE__*/_react.default.createElement(_styles.CancelButton, {
     onClick: onClose
-  }, t('CANCEL', 'Cancel')))), searchValue && /*#__PURE__*/_react.default.createElement(_styles.BusinessProductsListContainer, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessProductsListWrapper, null, /*#__PURE__*/_react.default.createElement(_BusinessProductsList.BusinessProductsList, _extends({}, props, {
+  }, t('CANCEL', 'Cancel')))), searchValue && /*#__PURE__*/_react.default.createElement(_styles.BusinessProductsListContainer, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessProductsListWrapper, null, /*#__PURE__*/_react.default.createElement(BusinessLayoutProductsList, _extends({}, props, {
     categories: [{
       id: null,
       name: t('ALL', (theme === null || theme === void 0 ? void 0 : (_theme$defaultLanguag = theme.defaultLanguages) === null || _theme$defaultLanguag === void 0 ? void 0 : _theme$defaultLanguag.ALL) || 'All')

package/_modules/themes/five/src/components/SignUpApproval/index.js

@@ -32,8 +32,8 @@ var SignUpApproval = function SignUpApproval(props) {
     onCancel = props.onCancel;
   var contactEmail = 'support@ordering.co';
   var showDomain = false;
-  var logoImgUrl = businessType === '2' ? approvalType === 'automatic' ? (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$general = _theme$images.general) === null || _theme$images$general === void 0 ? void 0 : _theme$images$general.CongratulationApproval : (_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$genera = _theme$images2.general) === null || _theme$images2$genera === void 0 ? void 0 : _theme$images2$genera.CongratulationNoApproval : approvalType === 'automatic' ? (_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$genera = _theme$images3.general) === null || _theme$images3$genera === void 0 ? void 0 : _theme$images3$genera.driverCongratulationApproval : (_theme$images4 = theme.images) === null || _theme$images4 === void 0 ? void 0 : (_theme$images4$genera = _theme$images4.general) === null || _theme$images4$genera === void 0 ? void 0 : _theme$images4$genera.driverCongratulationNoApproval;
-  var userType = businessType === '2' ? 'business' : 'driver';
+  var logoImgUrl = businessType === 2 ? approvalType === 'automatic' ? (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$general = _theme$images.general) === null || _theme$images$general === void 0 ? void 0 : _theme$images$general.CongratulationApproval : (_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$genera = _theme$images2.general) === null || _theme$images2$genera === void 0 ? void 0 : _theme$images2$genera.CongratulationNoApproval : approvalType === 'automatic' ? (_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$genera = _theme$images3.general) === null || _theme$images3$genera === void 0 ? void 0 : _theme$images3$genera.driverCongratulationApproval : (_theme$images4 = theme.images) === null || _theme$images4 === void 0 ? void 0 : (_theme$images4$genera = _theme$images4.general) === null || _theme$images4$genera === void 0 ? void 0 : _theme$images4$genera.driverCongratulationNoApproval;
+  var userType = businessType === 2 ? 'business' : 'driver';
   return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement(_styles.HeaderSection, null, showDomain && /*#__PURE__*/_react.default.createElement(_styles.Title, null, "Domain or Brand"), /*#__PURE__*/_react.default.createElement(_styles.LogoImage, {
     approvalType: approvalType === 'automatic',
     src: logoImgUrl
@@ -58,16 +58,16 @@ var SignUpApproval = function SignUpApproval(props) {
     href: dashboardLoginUrl,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, dashboardUrl)))))) : /*#__PURE__*/_react.default.createElement(_styles.BodySection, null, businessType === 'business' ? /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
+  }, dashboardUrl)))))) : /*#__PURE__*/_react.default.createElement(_styles.BodySection, null, userType === 'business' ? /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "bigger"
   }, t('YOUR_STORE_UNDER_APPROVAL', 'Your store is under approval'))), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('FEEL_FREE_CONTACT_US', 'feel free to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
-    href: "mailto:".concat(contactEmail)
+    href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
   }, contactEmail))) : /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Description, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "bigger"
   }, t('REQUEST_TO_START_UNDER_APPROVAL', 'Your request to start as a driver is under approval.'))), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('BUSINESS_SIGNUP_MESSAGE', 'We will contact you as soon as possible')), /*#__PURE__*/_react.default.createElement(_styles.Description, null, t('FEEL_FREE_CONTACT_US', 'feel free to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
-    href: "mailto:".concat(contactEmail)
+    href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
   }, contactEmail)))), /*#__PURE__*/_react.default.createElement(_styles.FooterSection, null, /*#__PURE__*/_react.default.createElement(_styles.ActionGroup, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,
     color: "primary",
@@ -83,7 +83,7 @@ var SignUpApproval = function SignUpApproval(props) {
     }
   }, t('ACCEPT', 'Accept'))), approvalType === 'automatic' && userType === 'business' && /*#__PURE__*/_react.default.createElement(_styles.ContactSection, null, t('CONTACT_US_QUESTIONS', 'If you have some questions do no hestitate to contact us at '), " ", /*#__PURE__*/_react.default.createElement("a", {
     className: "green-text",
-    href: "mailto:".concat(contactEmail)
+    href: "mailto:".concat(t('SIGNUP_DRIVER_EMAIL', contactEmail))
   }, contactEmail))));
 };
 exports.SignUpApproval = SignUpApproval;

package/_modules/themes/five/src/components/SignUpBusiness/layouts/NewSignUpBusiness/index.js

@@ -16,6 +16,7 @@ var _Inputs = require("../../../../styles/Inputs");
 var _Buttons = require("../../../../styles/Buttons");
 var _Checkbox = require("../../../../../../../styles/Checkbox");
 var _utils = require("../../../../../../../utils");
+var _useRecaptcha3 = require("../../../../../../../hooks/useRecaptcha");
 var _AiOutlineEye = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEye"));
 var _AiOutlineEyeInvisible = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEyeInvisible"));
 var _orderingComponentsExternal = require("ordering-components-external");
@@ -70,19 +71,29 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
-  var emailInput = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(''),
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
+  var _useState3 = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    userPhoneNumber = _useState4[0],
-    setUserPhoneNumber = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    reCaptchaVersion = _useState4[0],
+    setRecaptchaVersion = _useState4[1];
+  var emailInput = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isValidPhoneNumber = _useState6[0],
-    setIsValidPhoneNumber = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    userPhoneNumber = _useState6[0],
+    setUserPhoneNumber = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    passwordSee = _useState8[0],
-    setPasswordSee = _useState8[1];
+    isValidPhoneNumber = _useState8[0],
+    setIsValidPhoneNumber = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    passwordSee = _useState10[0],
+    setPasswordSee = _useState10[1];
   var showInputPhoneNumber = ((_validationFields$fie = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 ? void 0 : (_validationFields$fie3 = _validationFields$fie2.checkout) === null || _validationFields$fie3 === void 0 ? void 0 : (_validationFields$fie4 = _validationFields$fie3.cellphone) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false) || (configs === null || configs === void 0 ? void 0 : (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1';
   var togglePasswordView = function togglePasswordView() {
     setPasswordSee(!passwordSee);
@@ -158,16 +169,36 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
     }
   };
   (0, _react.useEffect)(function () {
-    var _formState$result, _formState$result3, _formState$result4;
+    var _formState$result, _formState$result4, _formState$result5;
     if (!formState.loading && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.error) {
-      var _formState$result2;
+      var _formState$result2, _formState$result2$re, _formState$result3;
+      if (((_formState$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : (_formState$result2$re = _formState$result2.result) === null || _formState$result2$re === void 0 ? void 0 : _formState$result2$re[0]) === 'ERROR_AUTH_VERIFICATION_CODE') {
+        var _configs$security_rec;
+        if (configs !== null && configs !== void 0 && (_configs$security_rec = configs.security_recaptcha_site_key) !== null && _configs$security_rec !== void 0 && _configs$security_rec.value) {
+          var _configs$security_rec2;
+          setRecaptchaVersion({
+            version: 'v2',
+            siteKey: configs === null || configs === void 0 ? void 0 : (_configs$security_rec2 = configs.security_recaptcha_site_key) === null || _configs$security_rec2 === void 0 ? void 0 : _configs$security_rec2.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$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : _formState$result2.result) || [t('ERROR', 'Error')]
+        content: ((_formState$result3 = formState.result) === null || _formState$result3 === void 0 ? void 0 : _formState$result3.result) || [t('ERROR', 'Error')]
       });
-    } else if (!formState.loading && !((_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.error) && (_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.result) {
-      var _formState$result5;
-      saveCustomerUser && saveCustomerUser((_formState$result5 = formState.result) === null || _formState$result5 === void 0 ? void 0 : _formState$result5.result);
+    } else if (!formState.loading && !((_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.error) && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result) {
+      var _formState$result6;
+      saveCustomerUser && saveCustomerUser((_formState$result6 = formState.result) === null || _formState$result6 === void 0 ? void 0 : _formState$result6.result);
     }
   }, [formState]);
   (0, _react.useEffect)(function () {
@@ -207,6 +238,14 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
       handleChangePhoneNumber(externalPhoneNumber, true);
     }
   }, [externalPhoneNumber]);
+  (0, _react.useEffect)(function () {
+    if (recaptchaConfig !== null && recaptchaConfig !== void 0 && recaptchaConfig.siteKey) {
+      setRecaptchaVersion({
+        version: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.version,
+        siteKey: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.siteKey
+      });
+    }
+  }, [recaptchaConfig]);
   (0, _react.useEffect)(function () {
     handleChangeInput({
       target: {
@@ -297,7 +336,8 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
       height: 43
     }));
   })), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
-    handleReCaptcha: handleReCaptcha
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
   })), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && /*#__PURE__*/_react.default.createElement(_styles.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "acceptTerms",
     ref: formMethods.register({

package/_modules/themes/five/src/components/SignUpBusiness/layouts/OldSignUpBusiness/index.js

@@ -16,6 +16,7 @@ var _Inputs = require("../../../../styles/Inputs");
 var _Buttons = require("../../../../styles/Buttons");
 var _Checkbox = require("../../../../../../../styles/Checkbox");
 var _utils = require("../../../../../../../utils");
+var _useRecaptcha3 = require("../../../../../../../hooks/useRecaptcha");
 var _AiOutlineEye = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEye"));
 var _AiOutlineEyeInvisible = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEyeInvisible"));
 var _orderingComponentsExternal = require("ordering-components-external");
@@ -70,19 +71,29 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
-  var emailInput = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(''),
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
+  var _useState3 = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    userPhoneNumber = _useState4[0],
-    setUserPhoneNumber = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    reCaptchaVersion = _useState4[0],
+    setRecaptchaVersion = _useState4[1];
+  var emailInput = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isValidPhoneNumber = _useState6[0],
-    setIsValidPhoneNumber = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    userPhoneNumber = _useState6[0],
+    setUserPhoneNumber = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    passwordSee = _useState8[0],
-    setPasswordSee = _useState8[1];
+    isValidPhoneNumber = _useState8[0],
+    setIsValidPhoneNumber = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    passwordSee = _useState10[0],
+    setPasswordSee = _useState10[1];
   var showInputPhoneNumber = ((_validationFields$fie = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 ? void 0 : (_validationFields$fie3 = _validationFields$fie2.checkout) === null || _validationFields$fie3 === void 0 ? void 0 : (_validationFields$fie4 = _validationFields$fie3.cellphone) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false) || (configs === null || configs === void 0 ? void 0 : (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1';
   var togglePasswordView = function togglePasswordView() {
     setPasswordSee(!passwordSee);
@@ -158,16 +169,36 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
     }
   };
   (0, _react.useEffect)(function () {
-    var _formState$result, _formState$result3, _formState$result4;
+    var _formState$result, _formState$result4, _formState$result5;
     if (!formState.loading && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.error) {
-      var _formState$result2;
+      var _formState$result2, _formState$result2$re, _formState$result3;
+      if (((_formState$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : (_formState$result2$re = _formState$result2.result) === null || _formState$result2$re === void 0 ? void 0 : _formState$result2$re[0]) === 'ERROR_AUTH_VERIFICATION_CODE') {
+        var _configs$security_rec;
+        if (configs !== null && configs !== void 0 && (_configs$security_rec = configs.security_recaptcha_site_key) !== null && _configs$security_rec !== void 0 && _configs$security_rec.value) {
+          var _configs$security_rec2;
+          setRecaptchaVersion({
+            version: 'v2',
+            siteKey: configs === null || configs === void 0 ? void 0 : (_configs$security_rec2 = configs.security_recaptcha_site_key) === null || _configs$security_rec2 === void 0 ? void 0 : _configs$security_rec2.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$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : _formState$result2.result) || [t('ERROR', 'Error')]
+        content: ((_formState$result3 = formState.result) === null || _formState$result3 === void 0 ? void 0 : _formState$result3.result) || [t('ERROR', 'Error')]
       });
-    } else if (!formState.loading && !((_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.error) && (_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.result) {
-      var _formState$result5;
-      saveCustomerUser && saveCustomerUser((_formState$result5 = formState.result) === null || _formState$result5 === void 0 ? void 0 : _formState$result5.result);
+    } else if (!formState.loading && !((_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.error) && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result) {
+      var _formState$result6;
+      saveCustomerUser && saveCustomerUser((_formState$result6 = formState.result) === null || _formState$result6 === void 0 ? void 0 : _formState$result6.result);
     }
   }, [formState]);
   (0, _react.useEffect)(function () {
@@ -207,6 +238,14 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
       handleChangePhoneNumber(externalPhoneNumber, true);
     }
   }, [externalPhoneNumber]);
+  (0, _react.useEffect)(function () {
+    if (recaptchaConfig !== null && recaptchaConfig !== void 0 && recaptchaConfig.siteKey) {
+      setRecaptchaVersion({
+        version: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.version,
+        siteKey: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.siteKey
+      });
+    }
+  }, [recaptchaConfig]);
   (0, _react.useEffect)(function () {
     handleChangeInput({
       target: {
@@ -293,7 +332,8 @@ var SignUpBusinessUI = function SignUpBusinessUI(props) {
       height: 43
     }));
   })), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
-    handleReCaptcha: handleReCaptcha
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
   })), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && /*#__PURE__*/_react.default.createElement(_styles.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "acceptTerms",
     ref: formMethods.register({

package/_modules/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/index.js

@@ -16,6 +16,7 @@ var _Inputs = require("../../../../styles/Inputs");
 var _Buttons = require("../../../../styles/Buttons");
 var _Checkbox = require("../../../../../../../styles/Checkbox");
 var _utils = require("../../../../../../../utils");
+var _useRecaptcha3 = require("../../../../../../../hooks/useRecaptcha");
 var _AiOutlineEye = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEye"));
 var _AiOutlineEyeInvisible = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEyeInvisible"));
 var _orderingComponentsExternal = require("ordering-components-external");
@@ -70,19 +71,29 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
-  var emailInput = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(''),
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
+  var _useState3 = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    userPhoneNumber = _useState4[0],
-    setUserPhoneNumber = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    reCaptchaVersion = _useState4[0],
+    setRecaptchaVersion = _useState4[1];
+  var emailInput = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isValidPhoneNumber = _useState6[0],
-    setIsValidPhoneNumber = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    userPhoneNumber = _useState6[0],
+    setUserPhoneNumber = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    passwordSee = _useState8[0],
-    setPasswordSee = _useState8[1];
+    isValidPhoneNumber = _useState8[0],
+    setIsValidPhoneNumber = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    passwordSee = _useState10[0],
+    setPasswordSee = _useState10[1];
   var showInputPhoneNumber = ((_validationFields$fie = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 ? void 0 : (_validationFields$fie3 = _validationFields$fie2.checkout) === null || _validationFields$fie3 === void 0 ? void 0 : (_validationFields$fie4 = _validationFields$fie3.cellphone) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false) || (configs === null || configs === void 0 ? void 0 : (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1';
   var togglePasswordView = function togglePasswordView() {
     setPasswordSee(!passwordSee);
@@ -158,16 +169,36 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     }
   };
   (0, _react.useEffect)(function () {
-    var _formState$result, _formState$result3, _formState$result4;
+    var _formState$result, _formState$result4, _formState$result5;
     if (!formState.loading && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.error) {
-      var _formState$result2;
+      var _formState$result2, _formState$result2$re, _formState$result3;
+      if (((_formState$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : (_formState$result2$re = _formState$result2.result) === null || _formState$result2$re === void 0 ? void 0 : _formState$result2$re[0]) === 'ERROR_AUTH_VERIFICATION_CODE') {
+        var _configs$security_rec;
+        if (configs !== null && configs !== void 0 && (_configs$security_rec = configs.security_recaptcha_site_key) !== null && _configs$security_rec !== void 0 && _configs$security_rec.value) {
+          var _configs$security_rec2;
+          setRecaptchaVersion({
+            version: 'v2',
+            siteKey: configs === null || configs === void 0 ? void 0 : (_configs$security_rec2 = configs.security_recaptcha_site_key) === null || _configs$security_rec2 === void 0 ? void 0 : _configs$security_rec2.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$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : _formState$result2.result) || [t('ERROR', 'Error')]
+        content: ((_formState$result3 = formState.result) === null || _formState$result3 === void 0 ? void 0 : _formState$result3.result) || [t('ERROR', 'Error')]
       });
-    } else if (!formState.loading && !((_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.error) && (_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.result) {
-      var _formState$result5;
-      saveCustomerUser && saveCustomerUser((_formState$result5 = formState.result) === null || _formState$result5 === void 0 ? void 0 : _formState$result5.result);
+    } else if (!formState.loading && !((_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.error) && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result) {
+      var _formState$result6;
+      saveCustomerUser && saveCustomerUser((_formState$result6 = formState.result) === null || _formState$result6 === void 0 ? void 0 : _formState$result6.result);
     }
   }, [formState]);
   (0, _react.useEffect)(function () {
@@ -207,6 +238,14 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
       handleChangePhoneNumber(externalPhoneNumber, true);
     }
   }, [externalPhoneNumber]);
+  (0, _react.useEffect)(function () {
+    if (recaptchaConfig !== null && recaptchaConfig !== void 0 && recaptchaConfig.siteKey) {
+      setRecaptchaVersion({
+        version: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.version,
+        siteKey: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.siteKey
+      });
+    }
+  }, [recaptchaConfig]);
   (0, _react.useEffect)(function () {
     handleChangeInput({
       target: {
@@ -297,7 +336,8 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
       height: 43
     }));
   })), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
-    handleReCaptcha: handleReCaptcha
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
   })), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && /*#__PURE__*/_react.default.createElement(_styles.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "acceptTerms",
     ref: formMethods.register({

package/_modules/themes/five/src/components/SignUpDriver/layouts/OldSignUpDriver/index.js

@@ -16,6 +16,7 @@ var _Inputs = require("../../../../styles/Inputs");
 var _Buttons = require("../../../../styles/Buttons");
 var _Checkbox = require("../../../../../../../styles/Checkbox");
 var _utils = require("../../../../../../../utils");
+var _useRecaptcha3 = require("../../../../../../../hooks/useRecaptcha");
 var _AiOutlineEye = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEye"));
 var _AiOutlineEyeInvisible = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEyeInvisible"));
 var _orderingComponentsExternal = require("ordering-components-external");
@@ -70,19 +71,29 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
-  var emailInput = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(''),
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
+  var _useState3 = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    userPhoneNumber = _useState4[0],
-    setUserPhoneNumber = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
+    reCaptchaVersion = _useState4[0],
+    setRecaptchaVersion = _useState4[1];
+  var emailInput = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    isValidPhoneNumber = _useState6[0],
-    setIsValidPhoneNumber = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+    userPhoneNumber = _useState6[0],
+    setUserPhoneNumber = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    passwordSee = _useState8[0],
-    setPasswordSee = _useState8[1];
+    isValidPhoneNumber = _useState8[0],
+    setIsValidPhoneNumber = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    passwordSee = _useState10[0],
+    setPasswordSee = _useState10[1];
   var showInputPhoneNumber = ((_validationFields$fie = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 ? void 0 : (_validationFields$fie3 = _validationFields$fie2.checkout) === null || _validationFields$fie3 === void 0 ? void 0 : (_validationFields$fie4 = _validationFields$fie3.cellphone) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false) || (configs === null || configs === void 0 ? void 0 : (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1';
   var togglePasswordView = function togglePasswordView() {
     setPasswordSee(!passwordSee);
@@ -158,16 +169,36 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     }
   };
   (0, _react.useEffect)(function () {
-    var _formState$result, _formState$result3, _formState$result4;
+    var _formState$result, _formState$result4, _formState$result5;
     if (!formState.loading && (_formState$result = formState.result) !== null && _formState$result !== void 0 && _formState$result.error) {
-      var _formState$result2;
+      var _formState$result2, _formState$result2$re, _formState$result3;
+      if (((_formState$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : (_formState$result2$re = _formState$result2.result) === null || _formState$result2$re === void 0 ? void 0 : _formState$result2$re[0]) === 'ERROR_AUTH_VERIFICATION_CODE') {
+        var _configs$security_rec;
+        if (configs !== null && configs !== void 0 && (_configs$security_rec = configs.security_recaptcha_site_key) !== null && _configs$security_rec !== void 0 && _configs$security_rec.value) {
+          var _configs$security_rec2;
+          setRecaptchaVersion({
+            version: 'v2',
+            siteKey: configs === null || configs === void 0 ? void 0 : (_configs$security_rec2 = configs.security_recaptcha_site_key) === null || _configs$security_rec2 === void 0 ? void 0 : _configs$security_rec2.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$result2 = formState.result) === null || _formState$result2 === void 0 ? void 0 : _formState$result2.result) || [t('ERROR', 'Error')]
+        content: ((_formState$result3 = formState.result) === null || _formState$result3 === void 0 ? void 0 : _formState$result3.result) || [t('ERROR', 'Error')]
       });
-    } else if (!formState.loading && !((_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.error) && (_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.result) {
-      var _formState$result5;
-      saveCustomerUser && saveCustomerUser((_formState$result5 = formState.result) === null || _formState$result5 === void 0 ? void 0 : _formState$result5.result);
+    } else if (!formState.loading && !((_formState$result4 = formState.result) !== null && _formState$result4 !== void 0 && _formState$result4.error) && (_formState$result5 = formState.result) !== null && _formState$result5 !== void 0 && _formState$result5.result) {
+      var _formState$result6;
+      saveCustomerUser && saveCustomerUser((_formState$result6 = formState.result) === null || _formState$result6 === void 0 ? void 0 : _formState$result6.result);
     }
   }, [formState]);
   (0, _react.useEffect)(function () {
@@ -207,6 +238,14 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
       handleChangePhoneNumber(externalPhoneNumber, true);
     }
   }, [externalPhoneNumber]);
+  (0, _react.useEffect)(function () {
+    if (recaptchaConfig !== null && recaptchaConfig !== void 0 && recaptchaConfig.siteKey) {
+      setRecaptchaVersion({
+        version: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.version,
+        siteKey: recaptchaConfig === null || recaptchaConfig === void 0 ? void 0 : recaptchaConfig.siteKey
+      });
+    }
+  }, [recaptchaConfig]);
   (0, _react.useEffect)(function () {
     handleChangeInput({
       target: {
@@ -293,7 +332,8 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
       height: 43
     }));
   })), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
-    handleReCaptcha: handleReCaptcha
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
   })), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && /*#__PURE__*/_react.default.createElement(_styles.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "acceptTerms",
     ref: formMethods.register({