ordering-ui-external 14.1.30 → 14.1.32

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

@@ -11,6 +11,7 @@ var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skelet
 var _Confirm = require("../Confirm");
 var _InputPhoneNumber = require("../InputPhoneNumber");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styles = require("./styles");
 var _Inputs = require("../../styles/Inputs");
@@ -144,17 +145,23 @@ var SignUpFormUI = function SignUpFormUI(props) {
       }
     };
     if (isValid) {
+      var _configs$validation_p, _configs$validation_p2;
       phoneNumberParser = (0, _libphonenumberJs.default)(number);
+      if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+        var _phoneNumberParser;
+        if ((_phoneNumberParser = phoneNumberParser) !== null && _phoneNumberParser !== void 0 && _phoneNumberParser.nationalNumber) phoneNumberParser.nationalNumber = (0, _reactPhoneNumberInput.formatPhoneNumber)(number).replace(/\s/g, '');
+      }
     }
     if (phoneNumberParser) {
+      var _phoneNumberParser2, _phoneNumberParser3;
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: (_phoneNumberParser2 = phoneNumberParser) === null || _phoneNumberParser2 === void 0 ? void 0 : _phoneNumberParser2.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: (_phoneNumberParser3 = phoneNumberParser) === null || _phoneNumberParser3 === void 0 ? void 0 : _phoneNumberParser3.nationalNumber
         }
       };
     }
@@ -173,7 +180,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
     }
   };
   var preventWhiteSpaceOnKeyDown = function preventWhiteSpaceOnKeyDown(e) {
-    if (e.key === " ") {
+    if (e.key === ' ') {
       e.preventDefault();
     }
   };

package/_modules/themes/callcenterOriginal/src/components/UserFormDetails/index.js

@@ -10,6 +10,7 @@ var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skelet
 var _orderingComponentsExternal = require("ordering-components-external");
 var _reactHookForm = require("react-hook-form");
 var _libphonenumberJs = _interopRequireDefault(require("libphonenumber-js"));
+var _reactPhoneNumberInput = require("react-phone-number-input");
 var _styles = require("./styles");
 var _Inputs = require("../../styles/Inputs");
 var _Buttons = require("../../styles/Buttons");
@@ -52,6 +53,9 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     userSession = _useSession2[0].user;
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
+    _useConfig2 = _slicedToArray(_useConfig, 1),
+    configs = _useConfig2[0].configs;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     isValidPhoneNumber = _useState2[0],
@@ -162,17 +166,23 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       }
     };
     if (isValid) {
+      var _configs$validation_p, _configs$validation_p2;
       phoneNumberParser = (0, _libphonenumberJs.default)(number);
+      if (!parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10)) {
+        var _phoneNumberParser, _formatPhoneNumber, _formatPhoneNumber$re;
+        if ((_phoneNumberParser = phoneNumberParser) !== null && _phoneNumberParser !== void 0 && _phoneNumberParser.nationalNumber) phoneNumberParser.nationalNumber = (_formatPhoneNumber = (0, _reactPhoneNumberInput.formatPhoneNumber)(number)) === null || _formatPhoneNumber === void 0 || (_formatPhoneNumber$re = _formatPhoneNumber.replace) === null || _formatPhoneNumber$re === void 0 ? void 0 : _formatPhoneNumber$re.call(_formatPhoneNumber, /\s/g, '');
+      }
     }
     if (phoneNumberParser) {
+      var _phoneNumberParser2, _phoneNumberParser3;
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: (_phoneNumberParser2 = phoneNumberParser) === null || _phoneNumberParser2 === void 0 ? void 0 : _phoneNumberParser2.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: (_phoneNumberParser3 = phoneNumberParser) === null || _phoneNumberParser3 === void 0 ? void 0 : _phoneNumberParser3.nationalNumber
         }
       };
     }

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

@@ -358,10 +358,11 @@ var CheckoutUI = function CheckoutUI(props) {
     setRequiredFields(_requiredFields);
     if (userSelected && userSelected !== null && userSelected !== void 0 && userSelected.cellphone) {
       if (userSelected !== null && userSelected !== void 0 && userSelected.country_phone_code) {
+        var _configs$validation_p, _configs$validation_p2;
         var phone = null;
         phone = "+".concat(userSelected === null || userSelected === void 0 ? void 0 : userSelected.country_phone_code).concat(userSelected === null || userSelected === void 0 ? void 0 : userSelected.cellphone.replace("+".concat(userSelected === null || userSelected === void 0 ? void 0 : userSelected.country_phone_code), ''));
         var phoneNumber = (0, _libphonenumberJs.default)(phone);
-        if (!(phoneNumber !== null && phoneNumber !== void 0 && phoneNumber.isValid())) {
+        if (parseInt((_configs$validation_p = configs === null || configs === void 0 || (_configs$validation_p2 = configs.validation_phone_number_lib) === null || _configs$validation_p2 === void 0 ? void 0 : _configs$validation_p2.value) !== null && _configs$validation_p !== void 0 ? _configs$validation_p : 1, 10) && !(phoneNumber !== null && phoneNumber !== void 0 && phoneNumber.isValid())) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'));
         }
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "14.1.30",
+  "version": "14.1.32",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

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

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton'
 import { Alert } from '../Confirm'
 import { InputPhoneNumber } from '../InputPhoneNumber'
 import parsePhoneNumber from 'libphonenumber-js'
-
+import { formatPhoneNumber } from 'react-phone-number-input'
 import {
   SignupForm as SignUpController,
   useLanguage,
@@ -129,16 +129,19 @@ const SignUpFormUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number).replace(/\s/g, '')
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: phoneNumberParser?.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: phoneNumberParser?.nationalNumber
         }
       }
     }
@@ -154,7 +157,7 @@ const SignUpFormUI = (props) => {
   }
 
   const preventWhiteSpaceOnKeyDown = (e) => {
-    if (e.key === " ") {
+    if (e.key === ' ') {
       e.preventDefault()
     }
   }

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Skeleton from 'react-loading-skeleton'
-import { useSession, useLanguage, useCustomer } from 'ordering-components-external'
+import { useSession, useLanguage, useCustomer, useConfig } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
 import parsePhoneNumber from 'libphonenumber-js'
+import { formatPhoneNumber } from 'react-phone-number-input'
 
 import {
   FormInput,
@@ -40,6 +41,7 @@ export const UserFormDetailsUI = (props) => {
   const [, t] = useLanguage()
 
   const [{ user: userSession }] = useSession()
+  const [{ configs }] = useConfig()
   const [isValidPhoneNumber, setIsValidPhoneNumber] = useState(null)
   const [userPhoneNumber, setUserPhoneNumber] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -139,16 +141,19 @@ export const UserFormDetailsUI = (props) => {
     }
     if (isValid) {
       phoneNumberParser = parsePhoneNumber(number)
+      if (!parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10)) {
+        if (phoneNumberParser?.nationalNumber) phoneNumberParser.nationalNumber = formatPhoneNumber(number)?.replace?.(/\s/g, '')
+      }
     }
     if (phoneNumberParser) {
       phoneNumber = {
         country_phone_code: {
           name: 'country_phone_code',
-          value: phoneNumberParser.countryCallingCode
+          value: phoneNumberParser?.countryCallingCode
         },
         cellphone: {
           name: 'cellphone',
-          value: phoneNumberParser.nationalNumber
+          value: phoneNumberParser?.nationalNumber
         }
       }
     }

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

@@ -303,7 +303,7 @@ const CheckoutUI = (props) => {
         let phone = null
         phone = `+${userSelected?.country_phone_code}${userSelected?.cellphone.replace(`+${userSelected?.country_phone_code}`, '')}`
         const phoneNumber = parsePhoneNumber(phone)
-        if (!phoneNumber?.isValid()) {
+        if (parseInt(configs?.validation_phone_number_lib?.value ?? 1, 10) && !phoneNumber?.isValid()) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'))
         }
       } else {
@@ -594,24 +594,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-          <>
-            <DriverTipContainer>
-              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-              <DriverTips
-                businessId={cart?.business_id}
-                driverTipsOptions={driverTipsOptions}
-                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                  ? cart?.driver_tip
-                  : cart?.driver_tip_rate}
-                cart={cart}
-                useOrderContext
-              />
-            </DriverTipContainer>
-            <DriverTipDivider />
-          </>
+            <>
+              <DriverTipContainer>
+                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+                <DriverTips
+                  businessId={cart?.business_id}
+                  driverTipsOptions={driverTipsOptions}
+                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                    ? cart?.driver_tip
+                    : cart?.driver_tip_rate}
+                  cart={cart}
+                  useOrderContext
+                />
+              </DriverTipContainer>
+              <DriverTipDivider />
+            </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>