ordering-ui-external 11.0.11 → 12.0.1

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

@@ -45,7 +45,7 @@ var mapConfigs = {
   }
 };
 var MultiCheckoutUI = function MultiCheckoutUI(props) {
-  var _Object$values, _cartGroup$result, _paymethodSelected$pa, _cardList$cards, _configs$checkout_mul, _configs$driver_tip_o, _configs$driver_tip_o2, _configs$driver_tip_o3, _configs$multi_busine, _configs$driver_tip_o4, _configs$driver_tip_o5, _cartGroup$result2, _loyaltyPlansState$re, _creditPointPlan$busi, _creditPointPlan$busi2, _loyaltyPlansState$re2, _creditPointGeneralPl, _creditPointGeneralPl2, _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _configs$google_maps_, _customerState$user, _cartGroup$result3, _cartGroup$result4, _validationFields$fie5, _configs$multi_busine2, _validationFields$fie6, _configs$driver_tip_t, _configs$driver_tip_u, _configs$driver_tip_t2, _openCarts$, _configs$multi_busine6, _configs$multi_busine7, _customerState$user2;
+  var _Object$values, _cartGroup$result, _paymethodSelected$pa, _cardList$cards, _configs$checkout_mul, _configs$driver_tip_o, _configs$driver_tip_o2, _configs$driver_tip_o3, _configs$multi_busine, _configs$driver_tip_o4, _configs$driver_tip_o5, _cartGroup$result2, _loyaltyPlansState$re, _creditPointPlan$busi, _creditPointPlan$busi2, _loyaltyPlansState$re2, _creditPointGeneralPl, _creditPointGeneralPl2, _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _theme, _theme$split, _orderState$options6, _configs$google_maps_, _customerState$user, _cartGroup$result3, _cartGroup$result4, _validationFields$fie, _configs$multi_busine2, _validationFields$fie2, _configs$driver_tip_t, _configs$driver_tip_u, _configs$driver_tip_t2, _openCarts$, _configs$multi_busine6, _configs$multi_busine7, _customerState$user2;
   var placing = props.placing,
     isCustomerMode = props.isCustomerMode,
     openCarts = props.openCarts,
@@ -60,7 +60,8 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     cartUuid = props.cartUuid,
     totalCartsFee = props.totalCartsFee,
     walletState = props.walletState,
-    handleSearchRedirect = props.handleSearchRedirect;
+    handleSearchRedirect = props.handleSearchRedirect,
+    checkoutFieldsState = props.checkoutFieldsState;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -78,7 +79,9 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     validationFields = _useValidationFields2[0];
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 2),
-    user = _useSession2[0].user,
+    _useSession2$ = _useSession2[0],
+    user = _useSession2$.user,
+    userLoading = _useSession2$.loading,
     login = _useSession2[1].login;
   var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 1),
@@ -139,6 +142,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     return (cart === null || cart === void 0 ? void 0 : cart.products) && (cart === null || cart === void 0 || (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.length) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && (cart === null || cart === void 0 ? void 0 : cart.valid_schedule) && (cart === null || cart === void 0 ? void 0 : cart.valid_products) && (cart === null || cart === void 0 ? void 0 : cart.valid_address) && (cart === null || cart === void 0 ? void 0 : cart.valid_maximum) && (cart === null || cart === void 0 ? void 0 : cart.valid_minimum) && (cart === null || cart === void 0 ? void 0 : cart.wallets);
   })) || null || [];
   var isDisablePlaceOrderButton = (cartGroup === null || cartGroup === void 0 ? void 0 : cartGroup.loading) || !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_id || paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.wallet_id) && (cartGroup === null || cartGroup === void 0 || (_cartGroup$result = cartGroup.result) === null || _cartGroup$result === void 0 ? void 0 : _cartGroup$result.balance) > 0 || (paymethodSelected === null || paymethodSelected === void 0 || (_paymethodSelected$pa = paymethodSelected.paymethod) === null || _paymethodSelected$pa === void 0 ? void 0 : _paymethodSelected$pa.gateway) === 'stripe' && !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_data) || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe' && (cardList === null || cardList === void 0 || (_cardList$cards = cardList.cards) === null || _cardList$cards === void 0 ? void 0 : _cardList$cards.length) === 0 || walletCarts.length > 0;
+  var notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments'];
   var isMultiDriverTips = (configs === null || configs === void 0 || (_configs$checkout_mul = configs.checkout_multi_business_enabled) === null || _configs$checkout_mul === void 0 ? void 0 : _configs$checkout_mul.value) === '1';
   var driverTipsOptions = typeof (configs === null || configs === void 0 || (_configs$driver_tip_o = configs.driver_tip_options) === null || _configs$driver_tip_o === void 0 ? void 0 : _configs$driver_tip_o.value) === 'string' ? JSON.parse(configs === null || configs === void 0 || (_configs$driver_tip_o2 = configs.driver_tip_options) === null || _configs$driver_tip_o2 === void 0 ? void 0 : _configs$driver_tip_o2.value) || [] : (configs === null || configs === void 0 || (_configs$driver_tip_o3 = configs.driver_tip_options) === null || _configs$driver_tip_o3 === void 0 ? void 0 : _configs$driver_tip_o3.value) || [];
   var totalFeeEnabled = (configs === null || configs === void 0 || (_configs$multi_busine = configs.multi_business_checkout_show_combined_delivery_fee) === null || _configs$multi_busine === void 0 ? void 0 : _configs$multi_busine.value) === '1' ? JSON.parse(configs === null || configs === void 0 || (_configs$driver_tip_o4 = configs.driver_tip_options) === null || _configs$driver_tip_o4 === void 0 ? void 0 : _configs$driver_tip_o4.value) || [] : (configs === null || configs === void 0 || (_configs$driver_tip_o5 = configs.driver_tip_options) === null || _configs$driver_tip_o5 === void 0 ? void 0 : _configs$driver_tip_o5.value) || [];
@@ -166,6 +170,15 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     return b.accumulates;
   })) !== null && _creditPointGeneralPl !== void 0 ? _creditPointGeneralPl : [];
   var isWalletEnabled = (configs === null || configs === void 0 || (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 || (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && ((configs === null || configs === void 0 || (_configs$wallet_cash_ = configs.wallet_cash_enabled) === null || _configs$wallet_cash_ === void 0 ? void 0 : _configs$wallet_cash_.value) === '1' || (configs === null || configs === void 0 || (_configs$wallet_credi = configs.wallet_credit_point_enabled) === null || _configs$wallet_credi === void 0 ? void 0 : _configs$wallet_credi.value) === '1');
+  var checkoutFields = (0, _react.useMemo)(function () {
+    var _checkoutFieldsState$;
+    return checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$ = checkoutFieldsState.fields) === null || _checkoutFieldsState$ === void 0 ? void 0 : _checkoutFieldsState$.filter(function (field) {
+      var _orderState$options;
+      return field.order_type_id === (orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type);
+    });
+  }, [checkoutFieldsState, orderState === null || orderState === void 0 ? void 0 : orderState.options]);
+  var hexTest = /[0-9A-Fa-f]{6}/g;
+  var primaryColor = (_theme = theme) === null || _theme === void 0 || (_theme = _theme.colors) === null || _theme === void 0 || (_theme = _theme.primary) === null || _theme === void 0 || (_theme$split = _theme.split) === null || _theme$split === void 0 || (_theme$split = _theme$split.call(_theme, '#')) === null || _theme$split === void 0 ? void 0 : _theme$split[1];
   var accumulationRateBusiness = function accumulationRateBusiness(businessId) {
     var _loyalBusinessAvailab, _loyalBusinessAvailab2, _creditPointGeneralPl3;
     var value = (_loyalBusinessAvailab = loyalBusinessAvailable === null || loyalBusinessAvailable === void 0 || (_loyalBusinessAvailab2 = loyalBusinessAvailable.find(function (loyal) {
@@ -199,7 +212,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
       }));
       return;
     }
-    if (!userErrors.length && (!(requiredFields !== null && requiredFields !== void 0 && requiredFields.length) || allowedGuest && ((paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'cash' || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'card_delivery'))) {
+    if (!userErrors.length && !(requiredFields !== null && requiredFields !== void 0 && requiredFields.length)) {
       handleGroupPlaceOrder && handleGroupPlaceOrder();
       return;
     }
@@ -226,28 +239,54 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     });
     setIsUserDetailsEdit(false);
   };
+  var checkGuestValidationFields = function checkGuestValidationFields() {
+    var _checkoutFieldsState$2, _configs$verification;
+    var userSelected = isCustomerMode ? customerState.user : user;
+    var _requiredFields = checkoutFieldsState === null || checkoutFieldsState === void 0 ? void 0 : checkoutFieldsState.fields.filter(function (field) {
+      var _orderState$options2, _field$validation_fie, _field$validation_fie2;
+      return (field === null || field === void 0 ? void 0 : field.order_type_id) === (orderState === null || orderState === void 0 || (_orderState$options2 = orderState.options) === null || _orderState$options2 === void 0 ? void 0 : _orderState$options2.type) && (field === null || field === void 0 ? void 0 : field.enabled) && (field === null || field === void 0 ? void 0 : field.required_with_guest) && !notFields.includes(field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code) && userSelected && !userSelected[field === null || field === void 0 || (_field$validation_fie2 = field.validation_field) === null || _field$validation_fie2 === void 0 ? void 0 : _field$validation_fie2.code];
+    });
+    var requiredFieldsCode = _requiredFields.map(function (item) {
+      var _item$validation_fiel;
+      return item === null || item === void 0 || (_item$validation_fiel = item.validation_field) === null || _item$validation_fiel === void 0 ? void 0 : _item$validation_fiel.code;
+    });
+    var guestCheckoutCellPhone = checkoutFieldsState === null || checkoutFieldsState === void 0 || (_checkoutFieldsState$2 = checkoutFieldsState.fields) === null || _checkoutFieldsState$2 === void 0 ? void 0 : _checkoutFieldsState$2.find(function (field) {
+      var _orderState$options3, _field$validation_fie3;
+      return field.order_type_id === (orderState === null || orderState === void 0 || (_orderState$options3 = orderState.options) === null || _orderState$options3 === void 0 ? void 0 : _orderState$options3.type) && (field === null || field === void 0 || (_field$validation_fie3 = field.validation_field) === null || _field$validation_fie3 === void 0 ? void 0 : _field$validation_fie3.code) === 'mobile_phone';
+    });
+    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (guestCheckoutCellPhone !== null && guestCheckoutCellPhone !== void 0 && guestCheckoutCellPhone.enabled && guestCheckoutCellPhone !== null && guestCheckoutCellPhone !== void 0 && guestCheckoutCellPhone.required_with_guest || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+      requiredFieldsCode.push('cellphone');
+    }
+    setRequiredFields(requiredFieldsCode);
+  };
   var checkValidationFields = function checkValidationFields() {
-    var _validationFields$fie, _validationFields$fie2, _validationFields$fie3, _configs$verification;
+    var _Object$values2, _configs$verification2;
     setUserErrors([]);
     var errors = [];
-    var notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes'];
     var userSelected = isCustomerMode ? customerState.user : user;
     var _requiredFields = [];
-    Object.values(validationFields === null || validationFields === void 0 || (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 ? void 0 : _validationFields$fie.checkout).map(function (field) {
-      if (field !== null && field !== void 0 && field.enabled && field !== null && field !== void 0 && field.required && !notFields.includes(field.code)) {
-        if (userSelected && !userSelected[field === null || field === void 0 ? void 0 : field.code]) {
-          _requiredFields.push(field === null || field === void 0 ? void 0 : field.code);
+    Object.values(checkoutFieldsState === null || checkoutFieldsState === void 0 ? void 0 : checkoutFieldsState.fields).map(function (field) {
+      var _orderState$options4, _field$validation_fie4;
+      if (((_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.type) === (field === null || field === void 0 ? void 0 : field.order_type_id) && field !== null && field !== void 0 && field.enabled && field !== null && field !== void 0 && field.required && !notFields.includes(field === null || field === void 0 || (_field$validation_fie4 = field.validation_field) === null || _field$validation_fie4 === void 0 ? void 0 : _field$validation_fie4.code)) {
+        var _field$validation_fie5;
+        if (userSelected && !userSelected[field === null || field === void 0 || (_field$validation_fie5 = field.validation_field) === null || _field$validation_fie5 === void 0 ? void 0 : _field$validation_fie5.code]) {
+          var _field$validation_fie6;
+          _requiredFields.push(field === null || field === void 0 || (_field$validation_fie6 = field.validation_field) === null || _field$validation_fie6 === void 0 ? void 0 : _field$validation_fie6.code);
         }
       }
     });
-    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (validationFields !== null && validationFields !== void 0 && (_validationFields$fie2 = validationFields.fields) !== null && _validationFields$fie2 !== void 0 && (_validationFields$fie2 = _validationFields$fie2.checkout) !== null && _validationFields$fie2 !== void 0 && (_validationFields$fie2 = _validationFields$fie2.cellphone) !== null && _validationFields$fie2 !== void 0 && _validationFields$fie2.enabled && validationFields !== null && validationFields !== void 0 && (_validationFields$fie3 = validationFields.fields) !== null && _validationFields$fie3 !== void 0 && (_validationFields$fie3 = _validationFields$fie3.checkout) !== null && _validationFields$fie3 !== void 0 && (_validationFields$fie3 = _validationFields$fie3.cellphone) !== null && _validationFields$fie3 !== void 0 && _validationFields$fie3.required || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+    var mobilePhoneField = (_Object$values2 = Object.values(checkoutFieldsState === null || checkoutFieldsState === void 0 ? void 0 : checkoutFieldsState.fields)) === null || _Object$values2 === void 0 ? void 0 : _Object$values2.find(function (field) {
+      var _orderState$options5, _field$validation_fie7;
+      return (field === null || field === void 0 ? void 0 : field.order_type_id) === (orderState === null || orderState === void 0 || (_orderState$options5 = orderState.options) === null || _orderState$options5 === void 0 ? void 0 : _orderState$options5.type) && (field === null || field === void 0 || (_field$validation_fie7 = field.validation_field) === null || _field$validation_fie7 === void 0 ? void 0 : _field$validation_fie7.code) === 'mobile_phone';
+    });
+    if (userSelected && !(userSelected !== null && userSelected !== void 0 && userSelected.cellphone) && (mobilePhoneField !== null && mobilePhoneField !== void 0 && mobilePhoneField.enabled && mobilePhoneField !== null && mobilePhoneField !== void 0 && mobilePhoneField.required || (configs === null || configs === void 0 || (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1')) {
       _requiredFields.push('cellphone');
     }
     setRequiredFields(_requiredFields);
     if (userSelected && userSelected !== null && userSelected !== void 0 && userSelected.cellphone) {
       if (userSelected !== null && userSelected !== void 0 && userSelected.country_phone_code) {
         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);
+        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())) {
           errors.push(t('VALIDATION_ERROR_MOBILE_PHONE_INVALID', 'The field Phone number is invalid.'));
@@ -276,11 +315,13 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     }));
   };
   (0, _react.useEffect)(function () {
-    var _validationFields$fie4;
-    if (validationFields && validationFields !== null && validationFields !== void 0 && (_validationFields$fie4 = validationFields.fields) !== null && _validationFields$fie4 !== void 0 && _validationFields$fie4.checkout) {
+    if (checkoutFieldsState !== null && checkoutFieldsState !== void 0 && checkoutFieldsState.loading || customerState.loading || userLoading) return;
+    if (user !== null && user !== void 0 && user.guest_id) {
+      checkGuestValidationFields();
+    } else {
       checkValidationFields();
     }
-  }, [validationFields, user, customerState]);
+  }, [checkoutFieldsState, user, customerState, orderState === null || orderState === void 0 || (_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.type]);
   (0, _react.useEffect)(function () {
     if (openCarts.length || cartGroup.loading) {
       if (openCarts.length === 1) {
@@ -353,14 +394,16 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     }
   }, t('CONTINUE_AS_GUEST', 'Continue as guest'))) : /*#__PURE__*/_react.default.createElement(_UserDetails.UserDetails, {
     isUserDetailsEdit: isUserDetailsEdit,
-    useValidationFields: true,
     useDefualtSessionManager: true,
     useSessionUser: !isCustomerMode,
     isCustomerMode: isCustomerMode,
     userData: isCustomerMode && customerState.user,
     userId: isCustomerMode && (customerState === null || customerState === void 0 || (_customerState$user = customerState.user) === null || _customerState$user === void 0 ? void 0 : _customerState$user.id),
     isCheckout: true,
-    isSuccess: isSuccess
+    isSuccess: isSuccess,
+    isOrderTypeValidationField: true,
+    requiredFields: requiredFields,
+    checkoutFields: checkoutFields
   }))), /*#__PURE__*/_react.default.createElement(_styles.PaymentMethodContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('PAYMENT_METHODS', 'Payment Methods')), /*#__PURE__*/_react.default.createElement(_MultiCartsPaymethodsAndWallets.MultiCartsPaymethodsAndWallets, {
     userId: props.userId,
     openCarts: openCarts,
@@ -375,7 +418,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     cartGroup: cartGroup,
     setCardList: setCardList,
     handlePlaceOrder: handlePlaceOrder
-  })), (validationFields === null || validationFields === void 0 || (_validationFields$fie5 = validationFields.fields) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.checkout) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.coupon) === null || _validationFields$fie5 === void 0 ? void 0 : _validationFields$fie5.enabled) && openCarts.every(function (cart) {
+  })), (validationFields === null || validationFields === void 0 || (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.checkout) === null || _validationFields$fie === void 0 || (_validationFields$fie = _validationFields$fie.coupon) === null || _validationFields$fie === void 0 ? void 0 : _validationFields$fie.enabled) && openCarts.every(function (cart) {
     return cart.business_id && cart.status !== 2;
   }) && (configs === null || configs === void 0 || (_configs$multi_busine2 = configs.multi_business_checkout_coupon_input_style) === null || _configs$multi_busine2 === void 0 ? void 0 : _configs$multi_busine2.value) === 'group' && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DISCOUNT_COUPON', 'Discount coupon')), /*#__PURE__*/_react.default.createElement(_styles.CouponContainer, null, /*#__PURE__*/_react.default.createElement(_CouponControl.CouponControl, {
     carts: openCarts,
@@ -385,7 +428,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     price: openCarts.reduce(function (total, cart) {
       return total + cart.total;
     }, 0)
-  }))), isMultiDriverTips && (orderState === null || orderState === void 0 ? void 0 : orderState.options.type) === 1 && (validationFields === null || validationFields === void 0 || (_validationFields$fie6 = validationFields.fields) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.checkout) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.driver_tip) === null || _validationFields$fie6 === void 0 ? void 0 : _validationFields$fie6.enabled) && openCarts.every(function (cart) {
+  }))), isMultiDriverTips && (orderState === null || orderState === void 0 ? void 0 : orderState.options.type) === 1 && (validationFields === null || validationFields === void 0 || (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.checkout) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.driver_tip) === null || _validationFields$fie2 === void 0 ? void 0 : _validationFields$fie2.enabled) && openCarts.every(function (cart) {
     return cart.business_id && cart.status !== 2;
   }) && driverTipsOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DRIVER_TIPS', 'Driver Tips')), /*#__PURE__*/_react.default.createElement("p", null, t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')), /*#__PURE__*/_react.default.createElement(_DriverTips.DriverTips, {
     isMulti: true,
@@ -447,13 +490,15 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_UserDetails.UserDetails, {
     isUserDetailsEdit: isUserDetailsEdit,
-    useValidationFields: true,
     useDefualtSessionManager: true,
     useSessionUser: !isCustomerMode,
     isCustomerMode: isCustomerMode,
     userData: isCustomerMode && customerState.user,
     userId: isCustomerMode && (customerState === null || customerState === void 0 || (_customerState$user2 = customerState.user) === null || _customerState$user2 === void 0 ? void 0 : _customerState$user2.id),
     requiredFields: requiredFields,
+    isOrderTypeValidationField: true,
+    checkoutFields: checkoutFields,
+    isCheckoutPlace: true,
     setIsSuccess: setIsSuccess,
     isCheckout: true,
     isEdit: true,

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

@@ -115,7 +115,7 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
     disabled: true
   })), suboption.image && suboption.image !== '-' && /*#__PURE__*/_react.default.createElement(_styles.SubOptionThumbnail, {
     src: suboption.image
-  }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
+  }), /*#__PURE__*/_react.default.createElement(_styles.Text, null, /*#__PURE__*/_react.default.createElement("div", null, suboption === null || suboption === void 0 ? void 0 : suboption.name))), /*#__PURE__*/_react.default.createElement(_styles.RightOptionContainer, null, /*#__PURE__*/_react.default.createElement(_styles.QuantityControl, null, !((option === null || option === void 0 ? void 0 : option.max) === 1 && (option === null || option === void 0 ? void 0 : option.min) === 1) && (option === null || option === void 0 ? void 0 : option.allow_suboption_quantity) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsDashCircle.default, {
     disabled: state.quantity === 0 || isSoldOut,
     onClick: handleDecrement
   }), state.quantity, /*#__PURE__*/_react.default.createElement(_BsPlusCircle.default, {
@@ -129,7 +129,7 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
       return handlePosition(e, 'left');
     }
   }), /*#__PURE__*/_react.default.createElement(_BsCircleFill.default, {
-    className: [(pizzaState === null || pizzaState === void 0 || (_pizzaState3 = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState3 === void 0 ? void 0 : _pizzaState3.value) === (option === null || option === void 0 ? void 0 : option.max) ? 'disabled' : '', state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
+    className: [(pizzaState === null || pizzaState === void 0 || (_pizzaState3 = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState3 === void 0 ? void 0 : _pizzaState3.value) === (option === null || option === void 0 ? void 0 : option.max) && !((option === null || option === void 0 ? void 0 : option.max) === 1 && (option === null || option === void 0 ? void 0 : option.min) === 1) ? 'disabled' : '', state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {

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

@@ -165,11 +165,11 @@ var UserDetailsUI = function UserDetailsUI(props) {
     height: 25
   })), !(validationFields.loading || formState.loading || userState.loading) && /*#__PURE__*/_react.default.createElement(_styles.Container, null, isModal && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, {
     isAddressFormOpen: isAddressFormOpen && !isEdit
-  }, !requiredFields && /*#__PURE__*/_react.default.createElement(_styles.ModalIcon, null, /*#__PURE__*/_react.default.createElement(_MdClose.default, {
+  }, !isCheckoutPlace && /*#__PURE__*/_react.default.createElement(_styles.ModalIcon, null, /*#__PURE__*/_react.default.createElement(_MdClose.default, {
     onClick: function onClick() {
       return onClose();
     }
-  })), /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details'))), !requiredFields && /*#__PURE__*/_react.default.createElement(_styles.Header, {
+  })), /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details'))), !isCheckoutPlace && /*#__PURE__*/_react.default.createElement(_styles.Header, {
     className: "user-form"
   }, !isModal && /*#__PURE__*/_react.default.createElement("h1", null, t('CUSTOMER_DETAILS', 'Customer Details')), cartStatus !== 2 && (!isEdit ? /*#__PURE__*/_react.default.createElement("span", {
     onClick: function onClick() {

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

@@ -43,7 +43,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(props) {
-  var _formState$result, _formState$result2, _formState$changes$se, _formState$changes, _user$settings, _formState$result3, _formState$result4, _formState$changes$se2, _formState$changes2, _user$settings2, _formState$result5, _formState$result6, _formState$changes$se3, _formState$changes3, _user$settings3, _theme$profile, _theme$profile2, _theme$profile3, _theme$profile4, _theme$profile5, _validationFields$fie, _validationFields$fie2, _validationFields$fie3, _validationFields$fie4, _configs$verification3, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _validationFields$fie7, _requiredFields$inclu4, _requiredFields$inclu5, _requiredFields$inclu6, _props$afterMidElemen, _props$afterMidCompon, _props$afterComponent, _props$afterElements;
+  var _formState$result, _formState$result2, _formState$changes$se, _formState$changes, _user$settings, _formState$result3, _formState$result4, _formState$changes$se2, _formState$changes2, _user$settings2, _formState$result5, _formState$result6, _formState$changes$se3, _formState$changes3, _user$settings3, _theme$profile, _theme$profile2, _theme$profile3, _theme$profile4, _theme$profile5, _checkoutFields$find, _validationFields$fie, _validationFields$fie2, _checkoutFields$find2, _validationFields$fie3, _validationFields$fie4, _configs$verification3, _props$beforeElements, _props$beforeComponen, _props$beforeMidEleme, _props$beforeMidCompo, _validationFields$fie9, _requiredFields$inclu6, _requiredFields$inclu7, _props$afterMidElemen, _props$afterMidCompon, _props$afterComponent, _props$afterElements;
   var isEdit = props.isEdit,
     formState = props.formState,
     onCancel = props.onCancel,
@@ -63,7 +63,10 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
     requiredFields = props.requiredFields,
     handleChangeNotifications = props.handleChangeNotifications,
     handlePlaceOrderAsGuest = props.handlePlaceOrderAsGuest,
-    isAllowGuest = props.isAllowGuest;
+    isAllowGuest = props.isAllowGuest,
+    isOrderTypeValidationField = props.isOrderTypeValidationField,
+    checkoutFields = props.checkoutFields,
+    isCheckoutPlace = props.isCheckoutPlace;
   var formMethods = (0, _reactHookForm.useForm)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -144,8 +147,14 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
     });
     handlePlaceOrderAsGuest && handlePlaceOrderAsGuest();
   };
-  var showInputPhoneNumber = (_validationFields$fie = validationFields === null || validationFields === void 0 || (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.checkout) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.cellphone) === null || _validationFields$fie2 === void 0 ? void 0 : _validationFields$fie2.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false;
-  var showInputBirthday = (_validationFields$fie3 = validationFields === null || validationFields === void 0 || (_validationFields$fie4 = validationFields.fields) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.checkout) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.birthdate) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie3 !== void 0 ? _validationFields$fie3 : false;
+  var showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields === null || checkoutFields === void 0 || (_checkoutFields$find = checkoutFields.find(function (field) {
+    var _field$validation_fie;
+    return (field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code) === 'mobile_phone';
+  })) === null || _checkoutFields$find === void 0 ? void 0 : _checkoutFields$find.enabled : (_validationFields$fie = validationFields === null || validationFields === void 0 || (_validationFields$fie2 = validationFields.fields) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.checkout) === null || _validationFields$fie2 === void 0 || (_validationFields$fie2 = _validationFields$fie2.cellphone) === null || _validationFields$fie2 === void 0 ? void 0 : _validationFields$fie2.enabled) !== null && _validationFields$fie !== void 0 ? _validationFields$fie : false;
+  var showInputBirthday = isOrderTypeValidationField ? checkoutFields === null || checkoutFields === void 0 || (_checkoutFields$find2 = checkoutFields.find(function (field) {
+    var _field$validation_fie2;
+    return (field === null || field === void 0 || (_field$validation_fie2 = field.validation_field) === null || _field$validation_fie2 === void 0 ? void 0 : _field$validation_fie2.code) === 'birthdate';
+  })) === null || _checkoutFields$find2 === void 0 ? void 0 : _checkoutFields$find2.enabled : (_validationFields$fie3 = validationFields === null || validationFields === void 0 || (_validationFields$fie4 = validationFields.fields) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.checkout) === null || _validationFields$fie4 === void 0 || (_validationFields$fie4 = _validationFields$fie4.birthdate) === null || _validationFields$fie4 === void 0 ? void 0 : _validationFields$fie4.enabled) !== null && _validationFields$fie3 !== void 0 ? _validationFields$fie3 : false;
   var setUserCellPhone = function setUserCellPhone() {
     var isEdit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
@@ -172,26 +181,34 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
     setUserPhoneNumber((user === null || user === void 0 ? void 0 : user.cellphone) || '');
   };
   var onSubmit = function onSubmit() {
-    var _validationFields$fie5, _validationFields$fie6, _configs$verification;
-    var isPhoneNumberValid = userPhoneNumber ? isValidPhoneNumber : true;
-    if (!userPhoneNumber && (validationFields !== null && validationFields !== void 0 && (_validationFields$fie5 = validationFields.fields) !== null && _validationFields$fie5 !== void 0 && (_validationFields$fie5 = _validationFields$fie5.checkout) !== null && _validationFields$fie5 !== void 0 && (_validationFields$fie5 = _validationFields$fie5.cellphone) !== null && _validationFields$fie5 !== void 0 && _validationFields$fie5.enabled && validationFields !== null && validationFields !== void 0 && (_validationFields$fie6 = validationFields.fields) !== null && _validationFields$fie6 !== void 0 && (_validationFields$fie6 = _validationFields$fie6.checkout) !== null && _validationFields$fie6 !== void 0 && (_validationFields$fie6 = _validationFields$fie6.cellphone) !== null && _validationFields$fie6 !== void 0 && _validationFields$fie6.required || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+    var _requiredFields$inclu, _validationFields$fie5, _validationFields$fie6, _requiredFields$inclu2, _validationFields$fie7, _validationFields$fie8, _configs$verification;
+    var isPhoneNumberValid = userPhoneNumber && showInputPhoneNumber ? isValidPhoneNumber : true;
+    var requiredPhone = (user === null || user === void 0 ? void 0 : user.guest_id) && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu = requiredFields.includes) === null || _requiredFields$inclu === void 0 ? void 0 : _requiredFields$inclu.call(requiredFields, 'cellphone')) || (validationFields === null || validationFields === void 0 || (_validationFields$fie5 = validationFields.fields) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.checkout) === null || _validationFields$fie5 === void 0 || (_validationFields$fie5 = _validationFields$fie5.cellphone) === null || _validationFields$fie5 === void 0 ? void 0 : _validationFields$fie5.enabled) && (validationFields === null || validationFields === void 0 || (_validationFields$fie6 = validationFields.fields) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.checkout) === null || _validationFields$fie6 === void 0 || (_validationFields$fie6 = _validationFields$fie6.cellphone) === null || _validationFields$fie6 === void 0 ? void 0 : _validationFields$fie6.required);
+    var content = [];
+    if (requiredFields !== null && requiredFields !== void 0 && (_requiredFields$inclu2 = requiredFields.includes) !== null && _requiredFields$inclu2 !== void 0 && _requiredFields$inclu2.call(requiredFields, 'birthdate') && !birthdate) {
+      content.push(t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required'));
+    }
+    if (!userPhoneNumber && (validationFields !== null && validationFields !== void 0 && (_validationFields$fie7 = validationFields.fields) !== null && _validationFields$fie7 !== void 0 && (_validationFields$fie7 = _validationFields$fie7.checkout) !== null && _validationFields$fie7 !== void 0 && (_validationFields$fie7 = _validationFields$fie7.cellphone) !== null && _validationFields$fie7 !== void 0 && _validationFields$fie7.enabled && validationFields !== null && validationFields !== void 0 && (_validationFields$fie8 = validationFields.fields) !== null && _validationFields$fie8 !== void 0 && (_validationFields$fie8 = _validationFields$fie8.checkout) !== null && _validationFields$fie8 !== void 0 && (_validationFields$fie8 = _validationFields$fie8.cellphone) !== null && _validationFields$fie8 !== void 0 && _validationFields$fie8.required || (configs === null || configs === void 0 || (_configs$verification = configs.verification_phone_required) === null || _configs$verification === void 0 ? void 0 : _configs$verification.value) === '1')) {
+      content.push(t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.'));
       setAlertState({
         open: true,
-        content: [t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.')]
+        content: content
       });
       return;
     }
     if (!isPhoneNumberValid && userPhoneNumber) {
       if (user !== null && user !== void 0 && user.country_phone_code) {
+        content.push(t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid'));
         setAlertState({
           open: true,
-          content: [t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')]
+          content: content
         });
         return;
       }
+      content.push(t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid'));
       setAlertState({
         open: true,
-        content: [t('INVALID_ERROR_COUNTRY_CODE_PHONE_NUMBER', 'The country code of the phone number is invalid')]
+        content: content
       });
       return;
     }
@@ -206,6 +223,13 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       if (isCustomerMode) {
         setUserCustomer(formState.result.result, true);
       }
+      if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
+        setAlertState({
+          open: true,
+          content: content
+        });
+        return;
+      }
       handleButtonUpdateClick(changes);
     }
   };
@@ -248,9 +272,6 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       }
     });
     formMethods.setValue('email', e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
-    if (emailInput.current) {
-      emailInput.current.value = e.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '');
-    }
   };
   var showFieldWithTheme = function showFieldWithTheme(name) {
     var _theme$profile6;
@@ -305,37 +326,21 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
     }
     if (!isEdit) onCancel && onCancel();
   }, [user, isEdit]);
-  (0, _react.useEffect)(function () {
-    if (!validationFields.loading && emailInput.current) {
-      var _formState$result9, _formState$result10, _ref, _formState$changes$em, _formState$changes8;
-      formMethods.setValue('email', formState !== null && formState !== void 0 && (_formState$result9 = formState.result) !== null && _formState$result9 !== void 0 && _formState$result9.result ? formState === null || formState === void 0 || (_formState$result10 = formState.result) === null || _formState$result10 === void 0 || (_formState$result10 = _formState$result10.result) === null || _formState$result10 === void 0 ? void 0 : _formState$result10.email : (_ref = (_formState$changes$em = formState === null || formState === void 0 || (_formState$changes8 = formState.changes) === null || _formState$changes8 === void 0 ? void 0 : _formState$changes8.email) !== null && _formState$changes$em !== void 0 ? _formState$changes$em : user && (user === null || user === void 0 ? void 0 : user.email)) !== null && _ref !== void 0 ? _ref : '');
-    }
-  }, [validationFields, emailInput.current]);
   (0, _react.useEffect)(function () {
     if (!validationFields.loading && birthdate) {
-      var _formState$result11, _formState$result12, _ref2, _formState$changes$bi, _formState$changes9;
-      formMethods.setValue('birthdate', formState !== null && formState !== void 0 && (_formState$result11 = formState.result) !== null && _formState$result11 !== void 0 && _formState$result11.result ? formState === null || formState === void 0 || (_formState$result12 = formState.result) === null || _formState$result12 === void 0 || (_formState$result12 = _formState$result12.result) === null || _formState$result12 === void 0 ? void 0 : _formState$result12.birthdate : (_ref2 = (_formState$changes$bi = formState === null || formState === void 0 || (_formState$changes9 = formState.changes) === null || _formState$changes9 === void 0 ? void 0 : _formState$changes9.birthdate) !== null && _formState$changes$bi !== void 0 ? _formState$changes$bi : user && (user === null || user === void 0 ? void 0 : user.birthdate)) !== null && _ref2 !== void 0 ? _ref2 : '');
+      var _formState$result9, _formState$result10, _ref, _formState$changes$bi, _formState$changes8;
+      formMethods.setValue('birthdate', formState !== null && formState !== void 0 && (_formState$result9 = formState.result) !== null && _formState$result9 !== void 0 && _formState$result9.result ? formState === null || formState === void 0 || (_formState$result10 = formState.result) === null || _formState$result10 === void 0 || (_formState$result10 = _formState$result10.result) === null || _formState$result10 === void 0 ? void 0 : _formState$result10.birthdate : (_ref = (_formState$changes$bi = formState === null || formState === void 0 || (_formState$changes8 = formState.changes) === null || _formState$changes8 === void 0 ? void 0 : _formState$changes8.birthdate) !== null && _formState$changes$bi !== void 0 ? _formState$changes$bi : user && (user === null || user === void 0 ? void 0 : user.birthdate)) !== null && _ref !== void 0 ? _ref : '');
     }
   }, [validationFields, birthdate]);
   (0, _react.useEffect)(function () {
-    if (requiredFields) return;
-    formMethods.register('email', {
-      required: isRequiredField('email') ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')) : null,
-      pattern: {
-        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-        message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
-      }
-    });
-  }, [formMethods]);
-  (0, _react.useEffect)(function () {
-    var _formState$changes10, _formState$changes11, _configs$verification2;
-    if (isChanged && userPhoneNumber && isValidPhoneNumber && formState !== null && formState !== void 0 && (_formState$changes10 = formState.changes) !== null && _formState$changes10 !== void 0 && _formState$changes10.country_phone_code && formState !== null && formState !== void 0 && (_formState$changes11 = formState.changes) !== null && _formState$changes11 !== void 0 && _formState$changes11.cellphone && (configs === null || configs === void 0 || (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1') {
+    var _formState$changes9, _formState$changes10, _configs$verification2;
+    if (isChanged && userPhoneNumber && isValidPhoneNumber && formState !== null && formState !== void 0 && (_formState$changes9 = formState.changes) !== null && _formState$changes9 !== void 0 && _formState$changes9.country_phone_code && formState !== null && formState !== void 0 && (_formState$changes10 = formState.changes) !== null && _formState$changes10 !== void 0 && _formState$changes10.cellphone && (configs === null || configs === void 0 || (_configs$verification2 = configs.verification_phone_required) === null || _configs$verification2 === void 0 ? void 0 : _configs$verification2.value) === '1') {
       setWillVerifyOtpState && setWillVerifyOtpState(true);
     }
   }, [isValidPhoneNumber, userPhoneNumber, configs === null || configs === void 0 || (_configs$verification3 = configs.verification_phone_required) === null || _configs$verification3 === void 0 ? void 0 : _configs$verification3.value, isChanged]);
   (0, _react.useEffect)(function () {
-    var _requiredFields$inclu;
-    if (requiredFields && !(requiredFields !== null && requiredFields !== void 0 && (_requiredFields$inclu = requiredFields.includes) !== null && _requiredFields$inclu !== void 0 && _requiredFields$inclu.call(requiredFields, 'cellphone'))) setIsValidPhoneNumber(true);
+    var _requiredFields$inclu3;
+    if (requiredFields && !(requiredFields !== null && requiredFields !== void 0 && (_requiredFields$inclu3 = requiredFields.includes) !== null && _requiredFields$inclu3 !== void 0 && _requiredFields$inclu3.call(requiredFields, 'cellphone'))) setIsValidPhoneNumber(true);
   }, [requiredFields]);
   var handleEditNotifications = function handleEditNotifications(key, value) {
     setNotificationList(_objectSpread(_objectSpread({}, notificationList), {}, _defineProperty({}, key, value)));
@@ -363,12 +368,13 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       key: i
     }, props));
   }), (0, _utils.sortInputFields)({
-    values: validationFields === null || validationFields === void 0 || (_validationFields$fie7 = validationFields.fields) === null || _validationFields$fie7 === void 0 ? void 0 : _validationFields$fie7.checkout
-  }).map(function (field) {
-    var _requiredFields$inclu2, _ref3, _formState$changes$fi, _requiredFields$inclu3, _ref4, _formState$changes$fi2;
-    return (showField && showField(field.code) && showFieldWithTheme(field.code) || (user === null || user === void 0 ? void 0 : user.guest_id)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    values: isOrderTypeValidationField ? checkoutFields : validationFields === null || validationFields === void 0 || (_validationFields$fie9 = validationFields.fields) === null || _validationFields$fie9 === void 0 ? void 0 : _validationFields$fie9.checkout
+  }).map(function (item) {
+    var _requiredFields$inclu4, _ref2, _formState$changes$fi, _requiredFields$inclu5, _ref3, _formState$changes$fi2;
+    var field = (item === null || item === void 0 ? void 0 : item.validation_field) || item;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: field.id
-    }, field.code === 'email' ? (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu2 = requiredFields.includes) === null || _requiredFields$inclu2 === void 0 ? void 0 : _requiredFields$inclu2.call(requiredFields, field.code)) || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+    }, field.code === 'email' ? (isOrderTypeValidationField ? item === null || item === void 0 ? void 0 : item.enabled : showField && showField(field.code)) && (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu4 = requiredFields.includes) === null || _requiredFields$inclu4 === void 0 ? void 0 : _requiredFields$inclu4.call(requiredFields, field.code)) || !requiredFields || !isCheckoutPlace) && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
       key: field.id,
       type: field.type,
       name: field.code,
@@ -376,13 +382,14 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       borderBottom: true,
       disabled: !isEdit,
       placeholder: t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name),
-      defaultValue: (_ref3 = (_formState$changes$fi = formState === null || formState === void 0 ? void 0 : formState.changes[field.code]) !== null && _formState$changes$fi !== void 0 ? _formState$changes$fi : user && user[field.code]) !== null && _ref3 !== void 0 ? _ref3 : '',
+      defaultValue: (_ref2 = (_formState$changes$fi = formState === null || formState === void 0 ? void 0 : formState.changes[field.code]) !== null && _formState$changes$fi !== void 0 ? _formState$changes$fi : user && user[field.code]) !== null && _ref2 !== void 0 ? _ref2 : '',
       onChange: handleChangeInputEmail,
-      ref: function ref(e) {
-        emailInput.current = e;
-      },
+      ref: formMethods.register({
+        required: t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')),
+        pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
+      }),
       autoComplete: "off"
-    })) : (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu3 = requiredFields.includes) === null || _requiredFields$inclu3 === void 0 ? void 0 : _requiredFields$inclu3.call(requiredFields, field.code)) || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+    })) : (isOrderTypeValidationField ? item === null || item === void 0 ? void 0 : item.enabled : showField && showField(field.code)) && (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu5 = requiredFields.includes) === null || _requiredFields$inclu5 === void 0 ? void 0 : _requiredFields$inclu5.call(requiredFields, field.code)) || !requiredFields || !isCheckoutPlace) && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
       key: field.id,
       type: field.type,
       borderBottom: true,
@@ -390,26 +397,29 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
       className: "form",
       disabled: !isEdit,
       placeholder: t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name),
-      defaultValue: (_ref4 = (_formState$changes$fi2 = formState === null || formState === void 0 ? void 0 : formState.changes[field.code]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : user && user[field.code]) !== null && _ref4 !== void 0 ? _ref4 : '',
+      defaultValue: (_ref3 = (_formState$changes$fi2 = formState === null || formState === void 0 ? void 0 : formState.changes[field.code]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : user && user[field.code]) !== null && _ref3 !== void 0 ? _ref3 : '',
       onChange: handleChangeInput,
       ref: formMethods.register({
         required: isRequiredField(field.code) ? t("VALIDATION_ERROR_".concat(field.code.toUpperCase(), "_REQUIRED"), "".concat(field === null || field === void 0 ? void 0 : field.name, " is required")).replace('_attribute_', t(field === null || field === void 0 ? void 0 : field.name, field.code)) : null
       }),
       autoComplete: "off"
     })));
-  }), (!(user !== null && user !== void 0 && user.guest_id) && showInputBirthday || (user === null || user === void 0 ? void 0 : user.guest_id) && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu4 = requiredFields.includes) === null || _requiredFields$inclu4 === void 0 ? void 0 : _requiredFields$inclu4.call(requiredFields, 'birthdate'))) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('BIRTHDATE', 'Birthdate')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+  }), (!(user !== null && user !== void 0 && user.guest_id) && showInputBirthday || isOrderTypeValidationField || (user === null || user === void 0 ? void 0 : user.guest_id)) && showInputBirthday && (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu6 = requiredFields.includes) === null || _requiredFields$inclu6 === void 0 ? void 0 : _requiredFields$inclu6.call(requiredFields, 'birthdate')) || !requiredFields || !isCheckoutPlace) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('BIRTHDATE', 'Birthdate')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
     borderBottom: true,
     className: "form",
     value: birthdate ? (0, _moment.default)(birthdate).format('YYYY/MM/DD') : '',
     autoComplete: "off",
     onFocus: function onFocus() {
       return setOpenCalendar(true);
-    }
+    },
+    ref: formMethods.register({
+      required: isRequiredField('birthdate') ? t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required') : null
+    })
   }), openCalendar && /*#__PURE__*/_react.default.createElement(_DatePicker.DatePickerUI, {
     value: birthdate,
     onChange: _handleChangeDate,
     name: 'birthdate'
-  })), (!(user !== null && user !== void 0 && user.guest_id) && !!showInputPhoneNumber || (user === null || user === void 0 ? void 0 : user.guest_id) && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu5 = requiredFields.includes) === null || _requiredFields$inclu5 === void 0 ? void 0 : _requiredFields$inclu5.call(requiredFields, 'cellphone'))) && showCustomerCellphone && (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu6 = requiredFields.includes) === null || _requiredFields$inclu6 === void 0 ? void 0 : _requiredFields$inclu6.call(requiredFields, 'cellphone')) || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement(_InputPhoneNumber.InputPhoneNumber, {
+  })), (!(user !== null && user !== void 0 && user.guest_id) && !!showInputPhoneNumber || isOrderTypeValidationField || (user === null || user === void 0 ? void 0 : user.guest_id)) && showCustomerCellphone && (requiredFields && (requiredFields === null || requiredFields === void 0 || (_requiredFields$inclu7 = requiredFields.includes) === null || _requiredFields$inclu7 === void 0 ? void 0 : _requiredFields$inclu7.call(requiredFields, 'cellphone')) || !requiredFields || !isCheckoutPlace) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement(_InputPhoneNumber.InputPhoneNumber, {
     user: user,
     value: userPhoneNumber,
     setValue: handleChangePhoneNumber,

package/_modules/utils/index.js

@@ -221,13 +221,14 @@ var sortInputFields = exports.sortInputFields = function sortInputFields(_ref2)
     values = _ref2.values;
   var fieldsBase = fields;
   var fieldsSorted = [];
-  var fieldsArray = Array.isArray(values) ? values : Object.values(values);
+  var fieldsArray = Array.isArray(values) ? values : values && Object.values(values);
   if (!fieldsBase) {
     fieldsBase = fieldsToSort;
   }
   fieldsBase.forEach(function (f) {
-    fieldsArray.forEach(function (field) {
-      if (f === field.code) {
+    fieldsArray && fieldsArray.forEach(function (field) {
+      var _field$validation_fie;
+      if (f === field.code || f === (field === null || field === void 0 || (_field$validation_fie = field.validation_field) === null || _field$validation_fie === void 0 ? void 0 : _field$validation_fie.code)) {
         fieldsSorted.push(field);
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "11.0.11",
+  "version": "12.0.1",
   "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": "10.0.11",
+    "ordering-components-external": "11.0.1",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/themes/callcenterOriginal/src/components/Orders/OrdersTable/styles.js

@@ -378,7 +378,7 @@ export const Timer = styled.div`
   .at_risk {
     color: #FFC700;
   }
-
+  
   .delayed {
     color: #E63757;
   }

package/src/themes/five/src/components/BusinessController/styles.js

@@ -28,7 +28,7 @@ export const ContainerCard = styled.div`
       padding: 10px 30px;
     }
   `}
-
+  
   ${({ firstCard }) => firstCard && css`
     margin-left: 0;
   `}
@@ -36,7 +36,7 @@ export const ContainerCard = styled.div`
   ${({ disabled }) => disabled && css`
     cursor: not-allowed;
   `}
-
+  
   ${({ businessRows }) => css`
     width: calc(100% - 40px);
 
@@ -56,7 +56,7 @@ export const ContainerCard = styled.div`
       width: ${() => businessRows === 4 ? 'calc(25% - 40px)' : businessRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)'};
     }
   `}
-
+  
 `
 
 export const WrapperBusinessCard = styled.div`
@@ -340,7 +340,7 @@ export const Medadata = styled.div`
   font-size: 12px;
   color: #909BA9;
   flex-wrap: wrap;
-
+  
 
   ${({ isCustomerMode }) => isCustomerMode && css`
     > div {