ordering-ui-external 14.1.99 → 14.2.0

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

@@ -578,7 +578,8 @@ var LoginFormUI = function LoginFormUI(props) {
   })), !willVerifyOtpState && isOtpCellphone && useLoginOtpWhatsapp ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
-      gap: 10
+      gap: 10,
+      width: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",

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

@@ -536,7 +536,8 @@ var SignUpFormUI = function SignUpFormUI(props) {
   }, t('TERMS_AND_CONDITIONS', 'Terms & Conditions')))))), signUpTab === 'otpCellphone' && useSignUpOtpWhatsapp ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
-      gap: 10
+      gap: 10,
+      width: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",

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

@@ -48,7 +48,8 @@ var UserVerificationUI = function UserVerificationUI(props) {
     sendVerifyPhoneCode = props.sendVerifyPhoneCode,
     checkVerifyEmailCode = props.checkVerifyEmailCode,
     checkVerifyPhoneCode = props.checkVerifyPhoneCode,
-    cleanErrorsState = props.cleanErrorsState;
+    cleanErrorsState = props.cleanErrorsState,
+    useWhatsappVerification = props.useWhatsappVerification;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -86,6 +87,10 @@ var UserVerificationUI = function UserVerificationUI(props) {
     _useState0 = _slicedToArray(_useState9, 2),
     modalIsOpen = _useState0[0],
     setModalIsOpen = _useState0[1];
+  var _useState1 = (0, _react.useState)(2),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedChannel = _useState10[0],
+    setSelectedChannel = _useState10[1];
   var isEmailVerifyRequired = auth && (configs === null || configs === void 0 || (_configs$verification = configs.verification_email_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1' && !(user !== null && user !== void 0 && user.email_verified);
   var isPhoneVerifyRequired = auth && (configs === null || configs === void 0 || (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1' && !(user !== null && user !== void 0 && user.phone_verified);
   var phoneLength = (phoneState === null || phoneState === void 0 ? void 0 : phoneState.cellphone) && (phoneState === null || phoneState === void 0 ? void 0 : phoneState.country_phone_code) && (phoneState === null || phoneState === void 0 || (_phoneState$cellphone = phoneState.cellphone) === null || _phoneState$cellphone === void 0 || (_phoneState$cellphone = _phoneState$cellphone.split('')) === null || _phoneState$cellphone === void 0 ? void 0 : _phoneState$cellphone.length);
@@ -95,12 +100,15 @@ var UserVerificationUI = function UserVerificationUI(props) {
     otpLeftTime = _useCountdownTimer2[0],
     resetOtpLeftTime = _useCountdownTimer2[2];
   var numOtpInputs = isEmailVerifyRequired ? 6 : 4;
-  var handleSendOtp = function handleSendOtp(opt) {
+  var handleSendOtp = function handleSendOtp(opt, channel) {
     resetOtpLeftTime();
     if (opt === 'phone') {
+      var ch = channel || 2;
+      setSelectedChannel(ch);
       sendVerifyPhoneCode({
         cellphone: phoneState === null || phoneState === void 0 ? void 0 : phoneState.cellphone,
-        country_phone_code: phoneState === null || phoneState === void 0 ? void 0 : phoneState.country_phone_code
+        country_phone_code: phoneState === null || phoneState === void 0 ? void 0 : phoneState.country_phone_code,
+        channel: ch
       });
       return;
     }
@@ -236,7 +244,33 @@ var UserVerificationUI = function UserVerificationUI(props) {
     disabled: !!(phoneState !== null && phoneState !== void 0 && phoneState.formatted),
     setValue: function setValue() {},
     handleIsValid: function handleIsValid() {}
-  })), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  })), useWhatsappVerification ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    type: "button",
+    color: "primary",
+    disabled: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingSendCode) || (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingCheckCode),
+    onClick: function onClick() {
+      return handleSendOtp('phone', 2);
+    },
+    style: {
+      flex: 1
+    }
+  }, t('SEND_BY_SMS', 'Send by SMS')), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+    type: "button",
+    color: "primary",
+    disabled: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingSendCode) || (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingCheckCode),
+    onClick: function onClick() {
+      return handleSendOtp('phone', 4);
+    },
+    style: {
+      flex: 1
+    }
+  }, t('SEND_BY_WHATSAPP', 'Send by WhatsApp'))) : /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     type: "button",
     color: "primary",
     disabled: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingSendCode) || (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingCheckCode),
@@ -284,7 +318,7 @@ var UserVerificationUI = function UserVerificationUI(props) {
     color: "secundary",
     disabled: (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingSendCode) || (verifyPhoneState === null || verifyPhoneState === void 0 ? void 0 : verifyPhoneState.loadingCheckCode),
     onClick: function onClick() {
-      return handleSendOtp('phone');
+      return handleSendOtp('phone', selectedChannel);
     }
   }, t('RESEND_AGAIN', 'Resend again?'))))))), modalIsOpen && /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     title: t('UPDATE_PROFILE', 'Update Profile'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.99",
+  "version": "14.2.0",
   "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.31",
+    "ordering-components-external": "13.2.33",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

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

@@ -620,7 +620,7 @@ const LoginFormUI = (props) => {
             )}
             {(!willVerifyOtpState && isOtpCellphone && useLoginOtpWhatsapp)
               ? (
-                <div style={{ display: 'flex', gap: 10 }}>
+                <div style={{ display: 'flex', gap: 10, width: '100%' }}>
                   <Button
                     color='primary'
                     type='button'

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

@@ -615,7 +615,7 @@ const SignUpFormUI = (props) => {
 
               {(signUpTab === 'otpCellphone' && useSignUpOtpWhatsapp)
                 ? (
-                  <div style={{ display: 'flex', gap: 10 }}>
+                  <div style={{ display: 'flex', gap: 10, width: '100%' }}>
                     <Button
                       color='primary'
                       type='button'

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

@@ -51,7 +51,8 @@ const UserVerificationUI = (props) => {
     sendVerifyPhoneCode,
     checkVerifyEmailCode,
     checkVerifyPhoneCode,
-    cleanErrorsState
+    cleanErrorsState,
+    useWhatsappVerification
   } = props
 
   const [, t] = useLanguage()
@@ -63,6 +64,7 @@ const UserVerificationUI = (props) => {
 
   const [phoneState, setPhoneState] = useState(null)
   const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [selectedChannel, setSelectedChannel] = useState(2)
 
   const isEmailVerifyRequired = auth && configs?.verification_email_required?.value === '1' && !user?.email_verified
   const isPhoneVerifyRequired = auth && configs?.verification_phone_required?.value === '1' && !user?.phone_verified
@@ -79,12 +81,15 @@ const UserVerificationUI = (props) => {
 
   const numOtpInputs = isEmailVerifyRequired ? 6 : 4
 
-  const handleSendOtp = (opt) => {
+  const handleSendOtp = (opt, channel) => {
     resetOtpLeftTime()
     if (opt === 'phone') {
+      const ch = channel || 2
+      setSelectedChannel(ch)
       sendVerifyPhoneCode({
         cellphone: phoneState?.cellphone,
-        country_phone_code: phoneState?.country_phone_code
+        country_phone_code: phoneState?.country_phone_code,
+        channel: ch
       })
       return
     }
@@ -287,14 +292,37 @@ const UserVerificationUI = (props) => {
                     handleIsValid={() => { }}
                   />
                 </InputWrapper>
-                <Button
-                  type='button'
-                  color='primary'
-                  disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-                  onClick={() => handleSendOtp('phone')}
-                >
-                  {t('SEND_CODE', 'Send code')}
-                </Button>
+                {useWhatsappVerification ? (
+                  <div style={{ display: 'flex', gap: 10, width: '100%' }}>
+                    <Button
+                      type='button'
+                      color='primary'
+                      disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                      onClick={() => handleSendOtp('phone', 2)}
+                      style={{ flex: 1 }}
+                    >
+                      {t('SEND_BY_SMS', 'Send by SMS')}
+                    </Button>
+                    <Button
+                      type='button'
+                      color='primary'
+                      disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                      onClick={() => handleSendOtp('phone', 4)}
+                      style={{ flex: 1 }}
+                    >
+                      {t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
+                    </Button>
+                  </div>
+                ) : (
+                  <Button
+                    type='button'
+                    color='primary'
+                    disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                    onClick={() => handleSendOtp('phone')}
+                  >
+                    {t('SEND_CODE', 'Send code')}
+                  </Button>
+                )}
               </>
             ) : (
               <>
@@ -350,7 +378,7 @@ const UserVerificationUI = (props) => {
                     type='button'
                     color='secundary'
                     disabled={verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-                    onClick={() => handleSendOtp('phone')}
+                    onClick={() => handleSendOtp('phone', selectedChannel)}
                   >
                     {t('RESEND_AGAIN', 'Resend again?')}
                   </Button>