ordering-ui-external 1.6.8 → 1.7.0

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

@@ -21,6 +21,7 @@ var _FacebookLogin = require("../FacebookLogin");
 var _AppleLogin = require("../AppleLogin");
 var _SmsLogin = require("../../../../../components/SmsLogin");
 var _useCountdownTimer3 = require("../../../../../hooks/useCountdownTimer");
+var _useRecaptcha3 = require("../../../../../hooks/useRecaptcha");
 var _utils = require("../../../../../utils");
 var _styledComponents = require("styled-components");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
@@ -50,6 +51,7 @@ var LoginFormUI = function LoginFormUI(props) {
   var useLoginByEmail = props.useLoginByEmail,
     useLoginByCellphone = props.useLoginByCellphone,
     handleChangeInput = props.handleChangeInput,
+    handleReCaptcha = props.handleReCaptcha,
     handleChangeTab = props.handleChangeTab,
     handleButtonLoginClick = props.handleButtonLoginClick,
     handleSendVerifyCode = props.handleSendVerifyCode,
@@ -61,7 +63,8 @@ var LoginFormUI = function LoginFormUI(props) {
     checkPhoneCodeState = props.checkPhoneCodeState,
     loginTab = props.loginTab,
     isPopup = props.isPopup,
-    credentials = props.credentials;
+    credentials = props.credentials,
+    enableReCaptcha = props.enableReCaptcha;
   var numOtpInputs = 4;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -70,6 +73,9 @@ var LoginFormUI = function LoginFormUI(props) {
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
   var formMethods = (0, _reactHookForm.useForm)();
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
   var _useState = (0, _react.useState)({
       open: false,
       content: []
@@ -77,31 +83,38 @@ var LoginFormUI = function LoginFormUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    reCaptchaVersion = _useState4[0],
+    setRecaptchaVersion = _useState4[1];
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 2),
     login = _useSession2[1].login;
   var theme = (0, _styledComponents.useTheme)();
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    passwordSee = _useState4[0],
-    setPasswordSee = _useState4[1];
-  var emailInput = (0, _react.useRef)(null);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loginWithOtpState = _useState6[0],
-    setLoginWithOtpState = _useState6[1];
+    passwordSee = _useState6[0],
+    setPasswordSee = _useState6[1];
+  var emailInput = (0, _react.useRef)(null);
   var _useState7 = (0, _react.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    willVerifyOtpState = _useState8[0],
-    setWillVerifyOtpState = _useState8[1];
+    loginWithOtpState = _useState8[0],
+    setLoginWithOtpState = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    validPhoneFieldState = _useState10[0],
-    setValidPhoneField = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
+    willVerifyOtpState = _useState10[0],
+    setWillVerifyOtpState = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    otpState = _useState12[0],
-    setOtpState = _useState12[1];
+    validPhoneFieldState = _useState12[0],
+    setValidPhoneField = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    otpState = _useState14[0],
+    setOtpState = _useState14[1];
   var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, !(checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && checkPhoneCodeState.loading) && willVerifyOtpState),
     _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
     otpLeftTime = _useCountdownTimer2[0],
@@ -224,12 +237,31 @@ var LoginFormUI = function LoginFormUI(props) {
   (0, _react.useEffect)(function () {
     var _formState$result;
     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')]
       });
-      return;
     }
   }, [formState]);
   (0, _react.useEffect)(function () {
@@ -283,6 +315,14 @@ var LoginFormUI = function LoginFormUI(props) {
       content: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : (_verifyPhoneState$res3 = verifyPhoneState.result) === null || _verifyPhoneState$res3 === void 0 ? void 0 : _verifyPhoneState$res3.result) || [t('ERROR', 'Error')]
     });else resetOtpLeftTime();
   }, [verifyPhoneState]);
+  (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]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -374,7 +414,10 @@ var LoginFormUI = function LoginFormUI(props) {
     return /*#__PURE__*/_react.default.createElement(MidComponent, _extends({
       key: i
     }, props));
-  }), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
+  })), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     onClick: formMethods.handleSubmit(onSubmit),
     disabled: formState.loading
@@ -443,7 +486,8 @@ var LoginFormUI = function LoginFormUI(props) {
 };
 var LoginForm = function LoginForm(props) {
   var loginControllerProps = _objectSpread(_objectSpread({}, props), {}, {
-    UIComponent: LoginFormUI
+    UIComponent: LoginFormUI,
+    isRecaptchaEnable: true
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.LoginForm, loginControllerProps);
 };

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

@@ -4,12 +4,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperPassword = exports.TogglePassword = exports.SocialButtons = exports.Slogan = exports.SkeletonSocialWrapper = exports.RedirectLink = exports.OtpWrapper = exports.OrContainer = exports.LoginWithButton = exports.LoginContainer = exports.Line = exports.HeroImage = exports.HeroContainerStyled = exports.HeroContainer = exports.FormSide = exports.FormInput = exports.FormContainer = exports.CountdownTimer = void 0;
+exports.WrapperPassword = exports.TogglePassword = exports.SocialButtons = exports.Slogan = exports.SkeletonSocialWrapper = exports.RedirectLink = exports.ReCaptchaWrapper = exports.OtpWrapper = exports.OrContainer = exports.LoginWithButton = exports.LoginContainer = exports.Line = exports.HeroImage = exports.HeroContainerStyled = exports.HeroContainer = exports.FormSide = exports.FormInput = exports.FormContainer = exports.CountdownTimer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _polished = require("polished");
 var _Buttons = require("../../styles/Buttons");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -120,4 +120,6 @@ var Line = _styledComponents.default.div(_templateObject23 || (_templateObject23
   var _props$theme$colors4;
   return (_props$theme$colors4 = props.theme.colors) === null || _props$theme$colors4 === void 0 ? void 0 : _props$theme$colors4.grayColor;
 });
-exports.Line = Line;
+exports.Line = Line;
+var ReCaptchaWrapper = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
+exports.ReCaptchaWrapper = ReCaptchaWrapper;

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

@@ -21,6 +21,7 @@ var _AppleLogin = require("../AppleLogin");
 var _Inputs = require("../../styles/Inputs");
 var _Buttons = require("../../styles/Buttons");
 var _Checkbox = require("../../../../../styles/Checkbox");
+var _useRecaptcha3 = require("../../../../../hooks/useRecaptcha");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -57,7 +58,9 @@ var SignUpFormUI = function SignUpFormUI(props) {
     externalPhoneNumber = props.externalPhoneNumber,
     saveCustomerUser = props.saveCustomerUser,
     fieldsNotValid = props.fieldsNotValid,
-    signupData = props.signupData;
+    signupData = props.signupData,
+    enableReCaptcha = props.enableReCaptcha,
+    handleReCaptcha = props.handleReCaptcha;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -65,31 +68,41 @@ var SignUpFormUI = function SignUpFormUI(props) {
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
   var formMethods = (0, _reactHookForm.useForm)();
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
   var _useState = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    reCaptchaVersion = _useState2[0],
+    setRecaptchaVersion = _useState2[1];
+  var _useState3 = (0, _react.useState)({
       open: false,
       content: []
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    alertState = _useState2[0],
-    setAlertState = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    alertState = _useState4[0],
+    setAlertState = _useState4[1];
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 2),
     login = _useSession2[1].login;
   var theme = (0, _styledComponents.useTheme)();
   var emailInput = (0, _react.useRef)(null);
   var isFacebookLogin = (configs === null || configs === void 0 ? void 0 : (_configs$facebook_log = configs.facebook_login) === null || _configs$facebook_log === void 0 ? void 0 : _configs$facebook_log.value) === 'true';
-  var _useState3 = (0, _react.useState)(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    userPhoneNumber = _useState4[0],
-    setUserPhoneNumber = _useState4[1];
-  var _useState5 = (0, _react.useState)(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;
   var handleSuccessFacebook = function handleSuccessFacebook(user) {
     var _user$session;
@@ -179,16 +192,36 @@ var SignUpFormUI = function SignUpFormUI(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 () {
@@ -228,6 +261,14 @@ var SignUpFormUI = function SignUpFormUI(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]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -334,7 +375,10 @@ var SignUpFormUI = function SignUpFormUI(props) {
     href: configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co2 = configs.terms_and_conditions_url) === null || _configs$terms_and_co2 === void 0 ? void 0 : _configs$terms_and_co2.value,
     target: "_blank",
     rel: "noopener noreferrer"
-  }, t('TERMS_AND_CONDITIONS', 'Terms & Conditions')))), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, t('TERMS_AND_CONDITIONS', 'Terms & Conditions')))), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
+  })), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     type: "submit",
     disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading)
@@ -378,7 +422,8 @@ var SignUpFormUI = function SignUpFormUI(props) {
 };
 var SignUpForm = function SignUpForm(props) {
   var loginControllerProps = _objectSpread(_objectSpread({}, props), {}, {
-    UIComponent: SignUpFormUI
+    UIComponent: SignUpFormUI,
+    isRecaptchaEnable: true
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.SignupForm, loginControllerProps);
 };

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

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperPassword = exports.TogglePassword = exports.TermsConditionWrapper = exports.SocialButtons = exports.Slogan = exports.SkeletonWrapper = exports.SkeletonSocialWrapper = exports.SignUpContainer = exports.RedirectLink = exports.OrContainer = exports.Line = exports.HeroImage = exports.HeroContainerStyled = exports.HeroContainer = exports.FormSide = exports.FormInput = exports.FormContainer = void 0;
+exports.WrapperPassword = exports.TogglePassword = exports.TermsConditionWrapper = exports.SocialButtons = exports.Slogan = exports.SkeletonWrapper = exports.SkeletonSocialWrapper = exports.SignUpContainer = exports.RedirectLink = exports.ReCaptchaWrapper = exports.OrContainer = exports.Line = exports.HeroImage = exports.HeroContainerStyled = exports.HeroContainer = exports.FormSide = exports.FormInput = exports.FormContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -123,4 +123,6 @@ var TermsConditionWrapper = _styledComponents.default.div(_templateObject23 || (
 }, function (props) {
   return props.theme.colors.primary;
 });
-exports.TermsConditionWrapper = TermsConditionWrapper;
+exports.TermsConditionWrapper = TermsConditionWrapper;
+var ReCaptchaWrapper = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
+exports.ReCaptchaWrapper = ReCaptchaWrapper;

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

@@ -21,6 +21,7 @@ var _FacebookLogin = require("../FacebookLogin");
 var _AppleLogin = require("../AppleLogin");
 var _SmsLogin = require("../../../../../components/SmsLogin");
 var _useCountdownTimer3 = require("../../../../../hooks/useCountdownTimer");
+var _useRecaptcha3 = require("../../../../../hooks/useRecaptcha");
 var _utils = require("../../../../../utils");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
 var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
@@ -75,37 +76,47 @@ var LoginFormUI = function LoginFormUI(props) {
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
   var formMethods = (0, _reactHookForm.useForm)();
+  var _useRecaptcha = (0, _useRecaptcha3.useRecaptcha)(enableReCaptcha),
+    _useRecaptcha2 = _slicedToArray(_useRecaptcha, 1),
+    recaptchaConfig = _useRecaptcha2[0];
   var _useState = (0, _react.useState)({
+      version: '',
+      siteKey: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    reCaptchaVersion = _useState2[0],
+    setRecaptchaVersion = _useState2[1];
+  var _useState3 = (0, _react.useState)({
       open: false,
       content: []
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    alertState = _useState2[0],
-    setAlertState = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    alertState = _useState4[0],
+    setAlertState = _useState4[1];
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 2),
     login = _useSession2[1].login;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    passwordSee = _useState4[0],
-    setPasswordSee = _useState4[1];
-  var emailInput = (0, _react.useRef)(null);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    loginWithOtpState = _useState6[0],
-    setLoginWithOtpState = _useState6[1];
+    passwordSee = _useState6[0],
+    setPasswordSee = _useState6[1];
+  var emailInput = (0, _react.useRef)(null);
   var _useState7 = (0, _react.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    willVerifyOtpState = _useState8[0],
-    setWillVerifyOtpState = _useState8[1];
+    loginWithOtpState = _useState8[0],
+    setLoginWithOtpState = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    validPhoneFieldState = _useState10[0],
-    setValidPhoneField = _useState10[1];
-  var _useState11 = (0, _react.useState)(''),
+    willVerifyOtpState = _useState10[0],
+    setWillVerifyOtpState = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    otpState = _useState12[0],
-    setOtpState = _useState12[1];
+    validPhoneFieldState = _useState12[0],
+    setValidPhoneField = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    otpState = _useState14[0],
+    setOtpState = _useState14[1];
   var _useCountdownTimer = (0, _useCountdownTimer3.useCountdownTimer)(600, !(checkPhoneCodeState !== null && checkPhoneCodeState !== void 0 && checkPhoneCodeState.loading) && willVerifyOtpState),
     _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
     otpLeftTime = _useCountdownTimer2[0],
@@ -229,10 +240,30 @@ var LoginFormUI = function LoginFormUI(props) {
   (0, _react.useEffect)(function () {
     var _formState$result;
     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')]
       });
     }
   }, [formState]);
@@ -293,6 +324,14 @@ var LoginFormUI = function LoginFormUI(props) {
       });
     } else resetOtpLeftTime();
   }, [verifyPhoneState]);
+  (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]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -387,7 +426,8 @@ var LoginFormUI = function LoginFormUI(props) {
   }), !loginWithOtpState && /*#__PURE__*/_react.default.createElement(_styles.RedirectLink, {
     isPopup: isPopup
   }, /*#__PURE__*/_react.default.createElement("span", null, t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')), elementLinkToForgotPassword), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
-    handleReCaptcha: handleReCaptcha
+    handleReCaptcha: handleReCaptcha,
+    reCaptchaVersion: reCaptchaVersion
   })), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     onClick: formMethods.handleSubmit(onSubmit),
@@ -454,6 +494,7 @@ var LoginFormUI = function LoginFormUI(props) {
 };
 var LoginForm = function LoginForm(props) {
   var loginControllerProps = _objectSpread(_objectSpread({}, props), {}, {
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.LoginForm, loginControllerProps);

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

@@ -20,6 +20,7 @@ var _utils = require("../../../../../utils");
 var _FacebookLogin = require("../FacebookLogin");
 var _GoogleLogin = require("../GoogleLogin");
 var _AppleLogin = require("../AppleLogin");
+var _useRecaptcha3 = require("../../../../../hooks/useRecaptcha");
 var _AiOutlineEye = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEye"));
 var _AiOutlineEyeInvisible = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineEyeInvisible"));
 var _GoMail = _interopRequireDefault(require("@meronex/icons/go/GoMail"));
@@ -81,18 +82,28 @@ var SignUpFormUI = function SignUpFormUI(props) {
     _useSession2 = _slicedToArray(_useSession, 2),
     login = _useSession2[1].login;
   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 _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;
   var initParams = {
     client_id: configs === null || configs === void 0 ? void 0 : (_configs$google_login = configs.google_login_client_id) === null || _configs$google_login === void 0 ? void 0 : _configs$google_login.value,
@@ -194,16 +205,36 @@ var SignUpFormUI = function SignUpFormUI(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 () {
@@ -243,6 +274,14 @@ var SignUpFormUI = function SignUpFormUI(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]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -331,7 +370,8 @@ var SignUpFormUI = function SignUpFormUI(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({
@@ -393,6 +433,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
 };
 var SignUpForm = function SignUpForm(props) {
   var loginControllerProps = _objectSpread(_objectSpread({}, props), {}, {
+    isRecaptchaEnable: true,
     UIComponent: SignUpFormUI
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.SignupForm, loginControllerProps);