ordering-ui-external 14.1.97 → 14.1.98

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

@@ -73,6 +73,7 @@ var LoginFormUI = function LoginFormUI(props) {
     setOtpState = props.setOtpState,
     useLoginOtpEmail = props.useLoginOtpEmail,
     useLoginOtpCellphone = props.useLoginOtpCellphone,
+    useLoginOtpWhatsapp = props.useLoginOtpWhatsapp,
     handleLoginSpoonity = props.handleLoginSpoonity,
     useLoginSpoonity = props.useLoginSpoonity,
     setCellphoneStartZero = props.setCellphoneStartZero;
@@ -143,6 +144,7 @@ var LoginFormUI = function LoginFormUI(props) {
     _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
     otpLeftTime = _useCountdownTimer2[0],
     resetOtpLeftTime = _useCountdownTimer2[2];
+  var otpChannelRef = (0, _react.useRef)(2);
   var isOtpEmail = loginTab === 'otp' && otpType === 'email';
   var isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone';
   var initParams = {
@@ -182,9 +184,9 @@ var LoginFormUI = function LoginFormUI(props) {
                 generateOtpCode({
                   cellphone: cellphone,
                   countryPhoneCode: countryPhoneCode
-                });
+                }, otpChannelRef.current);
               } else {
-                generateOtpCode();
+                generateOtpCode(null, otpChannelRef.current);
               }
             }
             setWillVerifyOtpState(true);
@@ -573,7 +575,34 @@ var LoginFormUI = function LoginFormUI(props) {
   }, /*#__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,
     reCaptchaVersion: reCaptchaVersion
-  })), !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  })), !willVerifyOtpState && isOtpCellphone && useLoginOtpWhatsapp ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    type: "button",
+    disabled: formState.loading,
+    onClick: function onClick() {
+      otpChannelRef.current = 2;
+      formMethods.handleSubmit(onSubmit)();
+    },
+    style: {
+      flex: 1
+    }
+  }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SEND_BY_SMS', 'Send by SMS')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    type: "button",
+    disabled: formState.loading,
+    onClick: function onClick() {
+      otpChannelRef.current = 4;
+      formMethods.handleSubmit(onSubmit)();
+    },
+    style: {
+      flex: 1
+    }
+  }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SEND_BY_WHATSAPP', 'Send by WhatsApp'))) : !willVerifyOtpState && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     onClick: formMethods.handleSubmit(onSubmit),
     disabled: formState.loading

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

@@ -84,6 +84,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
     useSignUpFullDetails = props.useSignUpFullDetails,
     useSignUpOtpEmail = props.useSignUpOtpEmail,
     useSignUpOtpCellphone = props.useSignUpOtpCellphone,
+    useSignUpOtpWhatsapp = props.useSignUpOtpWhatsapp,
     isGuest = props.isGuest,
     setCellphoneStartZero = props.setCellphoneStartZero;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
@@ -130,6 +131,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
     _useCountdownTimer2 = _slicedToArray(_useCountdownTimer, 3),
     otpLeftTime = _useCountdownTimer2[0],
     resetOtpLeftTime = _useCountdownTimer2[2];
+  var otpChannelRef = (0, _react.useRef)(2);
   var _useState5 = (0, _react.useState)(''),
     _useState6 = _slicedToArray(_useState5, 2),
     userPhoneNumber = _useState6[0],
@@ -234,7 +236,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
               _context.n = 3;
               break;
             }
-            generateOtpCode();
+            generateOtpCode(null, otpChannelRef.current);
             return _context.a(2);
           case 3:
             handleButtonSignupClick && handleButtonSignupClick();
@@ -531,7 +533,34 @@ var SignUpFormUI = function SignUpFormUI(props) {
     href: configs === null || configs === 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')))))), signUpTab === 'otpCellphone' && useSignUpOtpWhatsapp ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    type: "button",
+    disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading),
+    onClick: function onClick() {
+      otpChannelRef.current = 2;
+      formMethods.handleSubmit(onSubmit)();
+    },
+    style: {
+      flex: 1
+    }
+  }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SEND_BY_SMS', 'Send by SMS')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    color: "primary",
+    type: "button",
+    disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading),
+    onClick: function onClick() {
+      otpChannelRef.current = 4;
+      formMethods.handleSubmit(onSubmit)();
+    },
+    style: {
+      flex: 1
+    }
+  }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SEND_BY_WHATSAPP', 'Send by WhatsApp'))) : /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     type: "submit",
     disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.97",
+  "version": "14.1.98",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -88,7 +88,7 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "13.2.30",
+    "ordering-components-external": "13.2.31",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTheme } from 'styled-components'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -88,6 +88,7 @@ const LoginFormUI = (props) => {
     setOtpState,
     useLoginOtpEmail,
     useLoginOtpCellphone,
+    useLoginOtpWhatsapp,
     handleLoginSpoonity,
     useLoginSpoonity,
     setCellphoneStartZero
@@ -113,6 +114,7 @@ const LoginFormUI = (props) => {
 
   const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(
     600, !checkPhoneCodeState?.loading && willVerifyOtpState)
+  const otpChannelRef = useRef(2)
   const isOtpEmail = loginTab === 'otp' && otpType === 'email'
   const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
   const initParams = {
@@ -148,9 +150,9 @@ const LoginFormUI = (props) => {
       if (loginTab === 'otp') {
         if (otpType === 'cellphone') {
           const { cellphone, countryPhoneCode } = parseNumber(credentials?.cellphone)
-          generateOtpCode({ cellphone, countryPhoneCode })
+          generateOtpCode({ cellphone, countryPhoneCode }, otpChannelRef.current)
         } else {
-          generateOtpCode()
+          generateOtpCode(null, otpChannelRef.current)
         }
       }
       setWillVerifyOtpState(true)
@@ -616,19 +618,46 @@ const LoginFormUI = (props) => {
                 <ReCaptcha handleReCaptcha={handleReCaptcha} reCaptchaVersion={reCaptchaVersion} />
               </ReCaptchaWrapper>
             )}
-            {(!willVerifyOtpState &&
-              <Button
-                color='primary'
-                onClick={formMethods.handleSubmit(onSubmit)}
-                disabled={formState.loading}
-              >
-                {formState.loading
-                  ? `${t('LOADING', 'Loading')}...`
-                  : loginWithOtpState || loginTab === 'otp'
-                    ? t('GET_VERIFY_CODE', 'Get verify code')
-                    : t('LOGIN', 'Login')}
-              </Button>
-            )}
+            {(!willVerifyOtpState && isOtpCellphone && useLoginOtpWhatsapp)
+              ? (
+                <div style={{ display: 'flex', gap: 10 }}>
+                  <Button
+                    color='primary'
+                    type='button'
+                    disabled={formState.loading}
+                    onClick={() => { otpChannelRef.current = 2; formMethods.handleSubmit(onSubmit)() }}
+                    style={{ flex: 1 }}
+                  >
+                    {formState.loading
+                      ? `${t('LOADING', 'Loading')}...`
+                      : t('SEND_BY_SMS', 'Send by SMS')}
+                  </Button>
+                  <Button
+                    color='primary'
+                    type='button'
+                    disabled={formState.loading}
+                    onClick={() => { otpChannelRef.current = 4; formMethods.handleSubmit(onSubmit)() }}
+                    style={{ flex: 1 }}
+                  >
+                    {formState.loading
+                      ? `${t('LOADING', 'Loading')}...`
+                      : t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
+                  </Button>
+                </div>
+              )
+              : (!willVerifyOtpState &&
+                <Button
+                  color='primary'
+                  onClick={formMethods.handleSubmit(onSubmit)}
+                  disabled={formState.loading}
+                >
+                  {formState.loading
+                    ? `${t('LOADING', 'Loading')}...`
+                    : loginWithOtpState || loginTab === 'otp'
+                      ? t('GET_VERIFY_CODE', 'Get verify code')
+                      : t('LOGIN', 'Login')}
+                </Button>
+              )}
             {(loginWithOtpState && !willVerifyOtpState) && (
               <Button
                 type='button'

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { useForm } from 'react-hook-form'
 import Skeleton from 'react-loading-skeleton'
 import parsePhoneNumber from 'libphonenumber-js'
@@ -100,6 +100,7 @@ const SignUpFormUI = (props) => {
     useSignUpFullDetails,
     useSignUpOtpEmail,
     useSignUpOtpCellphone,
+    useSignUpOtpWhatsapp,
     isGuest,
     setCellphoneStartZero
   } = props
@@ -120,6 +121,7 @@ const SignUpFormUI = (props) => {
   const appleLoginEnabled = optimizationLoad?.result?.configs?.apple_login_enabled?.value === '1'
 
   const [otpLeftTime, , resetOtpLeftTime] = useCountdownTimer(600, !checkPhoneCodeState?.loading && willVerifyOtpState)
+  const otpChannelRef = useRef(2)
   const [userPhoneNumber, setUserPhoneNumber] = useState('')
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [passwordSee, setPasswordSee] = useState(false)
@@ -210,7 +212,7 @@ const SignUpFormUI = (props) => {
       return
     }
     if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
-      generateOtpCode()
+      generateOtpCode(null, otpChannelRef.current)
       return
     }
     handleButtonSignupClick && handleButtonSignupClick()
@@ -611,13 +613,42 @@ const SignUpFormUI = (props) => {
                 )}
               </CheckboxArea>
 
-              <Button
-                color='primary'
-                type='submit'
-                disabled={formState.loading || validationFields?.loading}
-              >
-                {formState.loading ? `${t('LOADING', 'Loading')}...` : signUpTab === 'default' ? t('SIGN_UP', 'Sign up') : t('GET_VERIFY_CODE', 'Get verify code')}
-              </Button>
+              {(signUpTab === 'otpCellphone' && useSignUpOtpWhatsapp)
+                ? (
+                  <div style={{ display: 'flex', gap: 10 }}>
+                    <Button
+                      color='primary'
+                      type='button'
+                      disabled={formState.loading || validationFields?.loading}
+                      onClick={() => { otpChannelRef.current = 2; formMethods.handleSubmit(onSubmit)() }}
+                      style={{ flex: 1 }}
+                    >
+                      {formState.loading
+                        ? `${t('LOADING', 'Loading')}...`
+                        : t('SEND_BY_SMS', 'Send by SMS')}
+                    </Button>
+                    <Button
+                      color='primary'
+                      type='button'
+                      disabled={formState.loading || validationFields?.loading}
+                      onClick={() => { otpChannelRef.current = 4; formMethods.handleSubmit(onSubmit)() }}
+                      style={{ flex: 1 }}
+                    >
+                      {formState.loading
+                        ? `${t('LOADING', 'Loading')}...`
+                        : t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
+                    </Button>
+                  </div>
+                )
+                : (
+                  <Button
+                    color='primary'
+                    type='submit'
+                    disabled={formState.loading || validationFields?.loading}
+                  >
+                    {formState.loading ? `${t('LOADING', 'Loading')}...` : signUpTab === 'default' ? t('SIGN_UP', 'Sign up') : t('GET_VERIFY_CODE', 'Get verify code')}
+                  </Button>
+                )}
             </FormInput>
           )}
           {(willVerifyOtpState) && (