ordering-ui-external 10.2.0 → 10.2.1

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

@@ -219,11 +219,11 @@ var BusinessControllerUI = function BusinessControllerUI(props) {
   }, /*#__PURE__*/_react.default.createElement(_GoPrimitiveDot.default, null), parseDistance(businessDistance !== null && businessDistance !== void 0 ? businessDistance : business === null || business === void 0 ? void 0 : business.distance)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     width: 65
   })), isCustomerMode && hasInformationLength && /*#__PURE__*/_react.default.createElement(_styles.CallCenterInformation, null, (business === null || business === void 0 ? void 0 : business.idle_drivers_count) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CallCenterInformationBullet, {
-    bgcolor: "green"
+    bgcolor: "#4CAF50"
   }, /*#__PURE__*/_react.default.createElement(_BiCar.default, null), business === null || business === void 0 ? void 0 : business.idle_drivers_count), (business === null || business === void 0 ? void 0 : business.busy_drivers_count) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CallCenterInformationBullet, {
-    bgcolor: "red"
+    bgcolor: "#E91E63"
   }, /*#__PURE__*/_react.default.createElement(_BiCar.default, null), business === null || business === void 0 ? void 0 : business.busy_drivers_count), (business === null || business === void 0 ? void 0 : business.activated_orders) > 0 && /*#__PURE__*/_react.default.createElement(_styles.CallCenterInformationBullet, {
-    bgcolor: "rgb(252,225,5)"
+    bgcolor: "#FF9800"
   }, /*#__PURE__*/_react.default.createElement(_BiBasket.default, null), business === null || business === void 0 ? void 0 : business.activated_orders)))))))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
     title: t('BUSINESS_CLOSED', 'Business Closed'),
     content: alertState.content,

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

@@ -120,7 +120,7 @@ var Medadata = _styledComponents.default.div(_templateObject26 || (_templateObje
   return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n        margin-left: 10px;\n        margin-right: 0;\n      "])));
 });
 exports.Medadata = Medadata;
-var CallCenterInformation = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  right: 0;\n  bottom: 43px;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  div{\n    justify-content: space-evenly;\n  }\n"])));
+var CallCenterInformation = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  margin-right: 10px;\n  margin-bottom: 10px;\n  div{\n    justify-content: space-evenly;\n  }\n"])));
 exports.CallCenterInformation = CallCenterInformation;
 var CallCenterInformationBullet = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 2px;\n  margin-bottom: 2px;\n  border-radius: 16px;\n  background: ", ";\n  width: 50px;\n  color: #fff;\n  svg{\n    font-size: 18px;\n  }\n"])), function (_ref16) {
   var bgcolor = _ref16.bgcolor;

package/_modules/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/OrdersSection/index.js

@@ -29,7 +29,19 @@ var OrdersSection = function OrdersSection(props) {
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var propsToFetchBusiness = ['name', 'logo', 'slug', 'id'];
+  var propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary'];
+  var handleRedirectToCheckout = function handleRedirectToCheckout(uuid) {
+    onRedirectPage && onRedirectPage({
+      page: 'checkout',
+      params: {
+        cartUuid: uuid
+      }
+    });
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onRedirectPage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
+    propsToFetch: propsToFetch,
+    propsToFetchBusiness: propsToFetchBusiness,
     horizontal: true,
     isBusinessesPage: true,
     onRedirectPage: onRedirectPage,
@@ -41,8 +53,11 @@ var OrdersSection = function OrdersSection(props) {
     isCustomLayout: true,
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
-    franchiseId: props.franchiseId
+    franchiseId: props.franchiseId,
+    handleRedirectToCheckout: handleRedirectToCheckout
   }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
+    propsToFetch: propsToFetch,
+    propsToFetchBusiness: propsToFetchBusiness,
     activeOrders: true,
     horizontal: true,
     asDashboard: true,
@@ -54,8 +69,11 @@ var OrdersSection = function OrdersSection(props) {
     isCustomLayout: true,
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
-    franchiseId: props.franchiseId
+    franchiseId: props.franchiseId,
+    handleRedirectToCheckout: handleRedirectToCheckout
   }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
+    propsToFetch: propsToFetch,
+    propsToFetchBusiness: propsToFetchBusiness,
     pastOrders: true,
     horizontal: true,
     asDashboard: true,
@@ -67,7 +85,8 @@ var OrdersSection = function OrdersSection(props) {
     titleContent: titleContent,
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
-    franchiseId: props.franchiseId
+    franchiseId: props.franchiseId,
+    handleRedirectToCheckout: handleRedirectToCheckout
   })));
 };
 exports.OrdersSection = OrdersSection;

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

@@ -101,7 +101,9 @@ var CheckoutUI = function CheckoutUI(props) {
     parsePrice = _useUtils2[0].parsePrice;
   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 _useConfig = (0, _orderingComponentsExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
@@ -213,6 +215,7 @@ var CheckoutUI = function CheckoutUI(props) {
     return b.business_id === (cart === null || cart === void 0 ? void 0 : cart.business_id) && b.accumulates;
   });
   var handlePlaceOrder = function handlePlaceOrder() {
+    if (placing) return;
     if (stripePaymethods.includes(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) && user !== null && user !== void 0 && user.guest_id) {
       setOpenModal(_objectSpread(_objectSpread({}, openModal), {}, {
         signup: true,
@@ -311,7 +314,7 @@ var CheckoutUI = function CheckoutUI(props) {
   };
   (0, _react.useEffect)(function () {
     var _validationFields$fie29;
-    if (validationFields && validationFields !== null && validationFields !== void 0 && (_validationFields$fie29 = validationFields.fields) !== null && _validationFields$fie29 !== void 0 && _validationFields$fie29.checkout) {
+    if (validationFields && validationFields !== null && validationFields !== void 0 && (_validationFields$fie29 = validationFields.fields) !== null && _validationFields$fie29 !== void 0 && _validationFields$fie29.checkout && !customerState.loading && !userLoading) {
       checkValidationFields();
     }
   }, [validationFields, user, customerState]);

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

@@ -113,14 +113,18 @@ var OrderProgressUI = function OrderProgressUI(props) {
   }))))))));
 };
 var OrderProgress = function OrderProgress(props) {
+  var propsToFetchBusiness = ['name', 'logo', 'slug', 'id'];
+  var propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary'];
   var orderProgressProps = _objectSpread(_objectSpread({}, props), {}, {
     UIComponent: OrderProgressUI,
     orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     noGiftCardOrders: true,
+    propsToFetchBusiness: propsToFetchBusiness,
+    propsToFetch: propsToFetch,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 10,
+      pageSize: props.isCustomerMode ? 1 : 10,
       controlType: 'infinity'
     }
   });

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

@@ -141,17 +141,13 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
   }).every(function (i) {
     return !i;
   }) : orders.length > 0;
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loadingOrders = _useState4[0],
-    setLoadingOrders = _useState4[1];
-  var _useState5 = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)({
       open: false,
       content: []
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    alertState = _useState6[0],
-    setAlertState = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    alertState = _useState4[0],
+    setAlertState = _useState4[1];
   var closeOrderModal = function closeOrderModal(e) {
     var outsideModal = !window.document.getElementById('app-modals') || !window.document.getElementById('app-modals').contains(e.target);
     if (outsideModal) {
@@ -185,17 +181,6 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
       });
     }
   };
-  (0, _react.useEffect)(function () {
-    var timeout;
-    if (isCustomLayout) {
-      timeout = setTimeout(function () {
-        setLoadingOrders(false);
-      }, 2000);
-    }
-    return function () {
-      typeof timeout === 'number' && clearTimeout(timeout);
-    };
-  }, []);
   (0, _react.useEffect)(function () {
     if (loading) return;
     if (orders.length === 0) {
@@ -257,7 +242,7 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
     return /*#__PURE__*/_react.default.createElement(BeforeComponent, _extends({
       key: i
     }, props));
-  }), (isCustomLayout ? (isShowTitles || !isBusinessesPage) && !loadingOrders && !loading && !isBusinessesLoading : (isShowTitles || !isBusinessesPage) && !hideOrders) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orders.length > 0 && /*#__PURE__*/_react.default.createElement(_styles.OptionTitle, {
+  }), (isCustomLayout ? (isShowTitles || !isBusinessesPage) && !loading && !isBusinessesLoading : (isShowTitles || !isBusinessesPage) && !hideOrders) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orders.length > 0 && /*#__PURE__*/_react.default.createElement(_styles.OptionTitle, {
     isBusinessesPage: isBusinessesPage
   }, /*#__PURE__*/_react.default.createElement("h1", null, titleContent || (activeOrders ? t('ACTIVE', 'Active') : pastOrders ? t('PAST', 'Past') : t('UPCOMING', 'Upcoming'))))), isBusiness && (businessOrderIds === null || businessOrderIds === void 0 ? void 0 : businessOrderIds.length) > 0 && /*#__PURE__*/_react.default.createElement(_PreviousBusinessOrdered.PreviousBusinessOrdered, {
     businesses: businesses,
@@ -272,7 +257,7 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
   }), isProfessionals && /*#__PURE__*/_react.default.createElement(_PreviousProfessionalOrdered.PreviousProfessionalOrdered, {
     professionals: professionals,
     handleUpdateProfessionals: handleUpdateProfessionals
-  }), (isCustomLayout ? loadingOrders || loading || (businesses === null || businesses === void 0 ? void 0 : businesses.loading) : showSkeletons) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, businesses !== null && businesses !== void 0 && businesses.loading && isBusiness ? /*#__PURE__*/_react.default.createElement(_styles.BusinessControllerSkeleton, null, _toConsumableArray(Array(3).keys()).map(function (item, i) {
+  }), (isCustomLayout ? loading || (businesses === null || businesses === void 0 ? void 0 : businesses.loading) : showSkeletons) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, businesses !== null && businesses !== void 0 && businesses.loading && isBusiness ? /*#__PURE__*/_react.default.createElement(_styles.BusinessControllerSkeleton, null, _toConsumableArray(Array(3).keys()).map(function (item, i) {
     return /*#__PURE__*/_react.default.createElement(_BusinessController.BusinessController, {
       key: i,
       className: "card",
@@ -320,7 +305,7 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
     }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       width: 80
     }))), /*#__PURE__*/_react.default.createElement(_styles.SkeletonReorder, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, null))));
-  }))), (isCustomLayout ? !loadingOrders && !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (horizontal ? /*#__PURE__*/_react.default.createElement(_HorizontalOrdersLayout.HorizontalOrdersLayout, {
+  }))), (isCustomLayout ? !loading && !error && orders.length > 0 && !isBusinessesLoading && !hideOrders : !loading && !error && orders.length > 0 && !hideOrders) && (horizontal ? /*#__PURE__*/_react.default.createElement(_HorizontalOrdersLayout.HorizontalOrdersLayout, {
     businessesIds: businessesIds,
     orders: orders === null || orders === void 0 ? void 0 : orders.filter(function (order) {
       return orderStatus === null || orderStatus === void 0 ? void 0 : orderStatus.includes(order.status);

package/_modules/themes/five/src/components/OrdersOption/styles.js

@@ -10,27 +10,30 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var OptionTitle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: ", ";\n  padding: ", ";\n\n  h1{\n    text-transform: capitalize;\n    font-size: 18px;\n    margin: 18px 0;\n  }\n\n  @media (min-width: 768px){\n    padding: 0;\n    width: 100%;\n  }\n"])), function (_ref) {
+var OptionTitle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: ", ";\n  padding: ", ";\n  h1{\n    text-transform: capitalize;\n    font-size: 18px;\n    margin: 18px 0;\n  }\n\n  @media (min-width: 768px){\n    padding: ", ";\n    width: 100%;\n  }\n"])), function (_ref) {
   var isBusinessesPage = _ref.isBusinessesPage;
-  return isBusinessesPage ? '10px 20px 0' : '0 auto';
+  return isBusinessesPage ? '0' : '0 auto';
 }, function (_ref2) {
   var isBusinessesPage = _ref2.isBusinessesPage;
-  return !isBusinessesPage && '0 15px';
+  return isBusinessesPage ? '10px 20px 0' : '0 15px';
+}, function (_ref3) {
+  var isBusinessesPage = _ref3.isBusinessesPage;
+  return isBusinessesPage ? '10px 20px 0' : '0';
 });
 exports.OptionTitle = OptionTitle;
-var OrdersContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), function (_ref3) {
-  var activeOrders = _ref3.activeOrders;
-  return activeOrders && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    text-align: center;\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n    margin: auto 0px auto auto;\n    box-sizing: border-box;\n    ", "\n    ::-webkit-scrollbar {\n      width: 0px;\n      height: 0px;\n    }\n\n    ", "\n    \n    @media (min-width: 768px) {\n      width: 100%;\n      justify-content: flex-start;\n      ", "\n  "])), function (_ref4) {
-    var ordersLength = _ref4.ordersLength;
+var OrdersContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), function (_ref4) {
+  var activeOrders = _ref4.activeOrders;
+  return activeOrders && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    text-align: center;\n    display: flex;\n    justify-content: ", ";\n    width: 100%;\n    margin: auto 0px auto auto;\n    box-sizing: border-box;\n    ", "\n    ::-webkit-scrollbar {\n      width: 0px;\n      height: 0px;\n    }\n\n    ", "\n    \n    @media (min-width: 768px) {\n      width: 100%;\n      justify-content: flex-start;\n      ", "\n  "])), function (_ref5) {
+    var ordersLength = _ref5.ordersLength;
     return !ordersLength ? 'flex-start' : 'center';
   }, function (props) {
     var _props$theme;
     return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin: auto auto auto 0px;\n    "])));
-  }, function (_ref5) {
-    var isSkeleton = _ref5.isSkeleton;
-    return !isSkeleton && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n      }\n      ", "\n    "])), function (_ref6) {
-      var ordersLength = _ref6.ordersLength,
-        isBusinessesPage = _ref6.isBusinessesPage;
+  }, function (_ref6) {
+    var isSkeleton = _ref6.isSkeleton;
+    return !isSkeleton && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n      width: 6px;\n      height: 6px;\n      }\n      ", "\n    "])), function (_ref7) {
+      var ordersLength = _ref7.ordersLength,
+        isBusinessesPage = _ref7.isBusinessesPage;
       return !ordersLength && !isBusinessesPage && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        > div {\n          margin-left: -10px;\n          ", "\n        }\n        > div:first-child{\n          margin-left: -15px;\n          ", "\n        }\n      "])), function (props) {
         var _props$theme2;
         return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            margin-left: 0;\n            margin-right: -10px;\n          "])));
@@ -39,40 +42,40 @@ var OrdersContainer = _styledComponents.default.div(_templateObject2 || (_templa
         return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n            margin-left: 0;\n            margin-right: -15px;\n          "])));
       });
     });
-  }, function (_ref7) {
-    var isSkeleton = _ref7.isSkeleton,
-      ordersLength = _ref7.ordersLength;
-    return !isSkeleton && !ordersLength && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      > div:first-child{\n        ", "\n      }\n      "])), function (_ref8) {
-      var isBusinessesPage = _ref8.isBusinessesPage;
+  }, function (_ref8) {
+    var isSkeleton = _ref8.isSkeleton,
+      ordersLength = _ref8.ordersLength;
+    return !isSkeleton && !ordersLength && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      > div:first-child{\n        ", "\n      }\n      "])), function (_ref9) {
+      var isBusinessesPage = _ref9.isBusinessesPage;
       return !isBusinessesPage && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          margin-left: -10px;\n          ", "\n        "])), function (props) {
         var _props$theme4;
         return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n            margin-left: 0;\n            margin-right: -10px;\n          "])));
       });
     });
   });
-}, function (_ref9) {
-  var activeOrders = _ref9.activeOrders;
+}, function (_ref10) {
+  var activeOrders = _ref10.activeOrders;
   return !activeOrders && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    width: 100%;\n    display: flex;\n    flex-direction: column-reverse;\n    margin: 0 auto;\n\n    p{\n      margin-block-end: 0;\n      margin-block-start: 0;\n      color: #9A9A9A\n    }\n\n    @media(min-width: 480px){\n      width: 100%;\n      padding: 0;\n      div:last-child {\n        border-top: none;\n      }\n    }\n  "])));
 });
 exports.OrdersContainer = OrdersContainer;
-var SkeletonOrder = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", "\n\n  ", "\n"])), function (_ref10) {
-  var activeOrders = _ref10.activeOrders;
+var SkeletonOrder = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n\n  ", "\n\n  ", "\n"])), function (_ref11) {
+  var activeOrders = _ref11.activeOrders;
   return activeOrders && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    width: auto;\n    text-align: center;\n    margin-left: 10px;\n\n    ", "\n  "])), function (props) {
     var _props$theme5;
     return ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      margin-right: 10px;\n      margin-left: 0;\n    "])));
   });
-}, function (_ref11) {
-  var activeOrders = _ref11.activeOrders;
+}, function (_ref12) {
+  var activeOrders = _ref12.activeOrders;
   return !activeOrders && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: 100%;\n    flex-direction: column;\n    margin: 10px 0;\n    > * {\n      margin: 20px 0;\n    }\n  "])));
 });
 exports.SkeletonOrder = SkeletonOrder;
 var SkeletonCard = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  margin: 10px 5px 10px 5px;\n"])));
 exports.SkeletonCard = SkeletonCard;
-var SkeletonContent = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref12) {
-  var activeOrders = _ref12.activeOrders;
-  return activeOrders && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    > * {\n      margin: 5px;\n    }\n  "])));
-}, function (_ref13) {
+var SkeletonContent = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref13) {
   var activeOrders = _ref13.activeOrders;
+  return activeOrders && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    > * {\n      margin: 5px;\n    }\n  "])));
+}, function (_ref14) {
+  var activeOrders = _ref14.activeOrders;
   return !activeOrders && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    justify-content: space-between;\n  "])));
 });
 exports.SkeletonContent = SkeletonContent;
@@ -95,19 +98,19 @@ var SkeletonReorder = _styledComponents.default.div(_templateObject25 || (_templ
 exports.SkeletonReorder = SkeletonReorder;
 var ImageNotFound = _styledComponents.default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  \n  margin: 0 auto;\n  img{\n    width: 100%\n  }\n"])));
 exports.ImageNotFound = ImageNotFound;
-var BusinessInformation = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n  flex: 1;\n  padding-left: 10px;\n  font-size: 0.9em;\n  ", "\n  ", "\n  .orders-detail {\n    display: flex;\n    align-items: center;\n\n    svg {\n      background: transparent;\n      border: none;\n      opacity: 1;\n      color: #909BA9;\n      width: 15px;\n      min-width: 15px;\n    }\n  }\n  h2 {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    font-size: 14px;\n    margin-block-end: 0;\n    margin-block-start: 0;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: 0.1em;\n    color : #9A9A9A;\n    white-space: nowrap;\n    font-size: 0.9em;\n    ", "\n  }\n\n  .order-status {\n    color: #03459E;\n    width: 170px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  p[name='view_order'] {\n    color: ", ";\n    cursor: pointer;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  @media (min-width: 480px){\n    h2 {\n    font-size: 16px;\n    margin-block-end: 0.1em;\n    margin-block-start: 0.1em;\n    }\n    p{\n      ", "\n    }\n  }\n\n  @media (min-width: 768px){\n    font-size: 0.9em;\n    p {\n      font-size: 14px;\n    }\n  }\n"])), function (_ref14) {
-  var activeOrders = _ref14.activeOrders;
+var BusinessInformation = _styledComponents.default.div(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n  flex: 1;\n  padding-left: 10px;\n  font-size: 0.9em;\n  ", "\n  ", "\n  .orders-detail {\n    display: flex;\n    align-items: center;\n\n    svg {\n      background: transparent;\n      border: none;\n      opacity: 1;\n      color: #909BA9;\n      width: 15px;\n      min-width: 15px;\n    }\n  }\n  h2 {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    font-size: 14px;\n    margin-block-end: 0;\n    margin-block-start: 0;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: 0.1em;\n    color : #9A9A9A;\n    white-space: nowrap;\n    font-size: 0.9em;\n    ", "\n  }\n\n  .order-status {\n    color: #03459E;\n    width: 170px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  p[name='view_order'] {\n    color: ", ";\n    cursor: pointer;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  @media (min-width: 480px){\n    h2 {\n    font-size: 16px;\n    margin-block-end: 0.1em;\n    margin-block-start: 0.1em;\n    }\n    p{\n      ", "\n    }\n  }\n\n  @media (min-width: 768px){\n    font-size: 0.9em;\n    p {\n      font-size: 14px;\n    }\n  }\n"])), function (_ref15) {
+  var activeOrders = _ref15.activeOrders;
   return activeOrders && (0, _styledComponents.css)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n      width: 30%;\n  "])));
 }, function (props) {
   var _props$theme9;
   return ((_props$theme9 = props.theme) === null || _props$theme9 === void 0 ? void 0 : _props$theme9.rtl) && (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n    padding-right: 10px;\n    padding-left: 0;\n  "])));
-}, function (_ref15) {
-  var activeOrders = _ref15.activeOrders;
+}, function (_ref16) {
+  var activeOrders = _ref16.activeOrders;
   return activeOrders && (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n      font-size: 0.8em;\n    "])));
 }, function (props) {
   return props.theme.colors.primary;
-}, function (_ref16) {
-  var activeOrders = _ref16.activeOrders;
+}, function (_ref17) {
+  var activeOrders = _ref17.activeOrders;
   return activeOrders && (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n        font-size: 0.9em;\n      "])));
 });
 exports.BusinessInformation = BusinessInformation;
@@ -115,8 +118,8 @@ var NoOrdersWrapper = _styledComponents.default.div(_templateObject35 || (_templ
 exports.NoOrdersWrapper = NoOrdersWrapper;
 var BusinessListWrapper = _styledComponents.default.div(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  overflow: auto hidden;\n  width: 100%;\n"])));
 exports.BusinessListWrapper = BusinessListWrapper;
-var BusinessList = _styledComponents.default.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  align-items: center;\n  ", "\n  @media (min-width: 480px){\n    flex-direction: row;\n  }\n  #searchlist {\n    > div {\n      width: calc(100vw - 40px);\n      min-width: calc(100vw - 40px);\n\n      @media (min-width: 681px) {\n        width: calc(50vw - 40px);\n        min-width: calc(50vw - 40px);\n      }\n      @media (min-width: 993px) {\n        width: calc(33vw - 40px);\n        min-width: calc(33vw - 40px);\n      }\n      @media (min-width: 1200px) {\n        width: calc(25vw - 40px);\n        min-width: calc(25vw - 40px);\n      }\n    }\n  }\n"])), function (_ref17) {
-  var noResults = _ref17.noResults;
+var BusinessList = _styledComponents.default.div(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  align-items: center;\n  ", "\n  @media (min-width: 480px){\n    flex-direction: row;\n  }\n  #searchlist {\n    > div {\n      width: calc(100vw - 40px);\n      min-width: calc(100vw - 40px);\n\n      @media (min-width: 681px) {\n        width: calc(50vw - 40px);\n        min-width: calc(50vw - 40px);\n      }\n      @media (min-width: 993px) {\n        width: calc(33vw - 40px);\n        min-width: calc(33vw - 40px);\n      }\n      @media (min-width: 1200px) {\n        width: calc(25vw - 40px);\n        min-width: calc(25vw - 40px);\n      }\n    }\n  }\n"])), function (_ref18) {
+  var noResults = _ref18.noResults;
   return noResults && (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    justify-content: center;\n  "])));
 });
 exports.BusinessList = BusinessList;

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

@@ -30,7 +30,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 _swiper.default.use([_swiper.Navigation]);
 var PageBannerUI = function PageBannerUI(props) {
-  var _pageBannerState$bann, _pageBannerState$bann2, _pageBannerState$bann3, _pageBannerState$bann4;
+  var _pageBannerState$bann, _pageBannerState$bann2, _pageBannerState$bann3, _pageBannerState$bann4, _pageBannerState$bann5, _pageBannerState$bann6;
   var pageBannerState = props.pageBannerState,
     isCustomerMode = props.isCustomerMode;
   var _useSite = (0, _orderingComponentsExternal.useSite)(),
@@ -159,11 +159,11 @@ var PageBannerUI = function PageBannerUI(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pageBannerState.loading ? /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
     height: 250
   })) : ((_pageBannerState$bann = pageBannerState.banner) === null || _pageBannerState$bann === void 0 ? void 0 : (_pageBannerState$bann2 = _pageBannerState$bann.items) === null || _pageBannerState$bann2 === void 0 ? void 0 : _pageBannerState$bann2.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.BannerContainer, null, /*#__PURE__*/_react.default.createElement(_react2.Swiper, {
-    navigation: true,
+    navigation: ((_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : (_pageBannerState$bann4 = _pageBannerState$bann3.items) === null || _pageBannerState$bann4 === void 0 ? void 0 : _pageBannerState$bann4.length) > 1,
     spaceBetween: 0,
     shortSwipes: false,
-    loop: ((_pageBannerState$bann3 = pageBannerState.banner) === null || _pageBannerState$bann3 === void 0 ? void 0 : _pageBannerState$bann3.items.length) > 1
-  }, (_pageBannerState$bann4 = pageBannerState.banner) === null || _pageBannerState$bann4 === void 0 ? void 0 : _pageBannerState$bann4.items.map(function (img, i) {
+    loop: ((_pageBannerState$bann5 = pageBannerState.banner) === null || _pageBannerState$bann5 === void 0 ? void 0 : _pageBannerState$bann5.items.length) > 1
+  }, (_pageBannerState$bann6 = pageBannerState.banner) === null || _pageBannerState$bann6 === void 0 ? void 0 : _pageBannerState$bann6.items.map(function (img, i) {
     return /*#__PURE__*/_react.default.createElement(_react2.SwiperSlide, {
       key: i,
       onClick: function onClick() {

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

@@ -228,7 +228,8 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
     saveCustomerUser: saveCustomerUser,
     fieldsNotValid: props.fieldsNotValid,
     useChekoutFileds: true,
-    isCustomerMode: true
+    isCustomerMode: true,
+    isPopup: true
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: openModal.customer,
     width: "80%",

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

@@ -434,11 +434,11 @@ var SignUpFormUI = function SignUpFormUI(props) {
       placeholder: t(field.code.toUpperCase(), field.name),
       onChange: handleChangeInputEmail,
       ref: formMethods.register({
-        required: isRequiredField(field.code) ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')) : null,
+        required: !isCustomerMode && isRequiredField(field.code) ? t('VALIDATION_ERROR_EMAIL_REQUIRED', 'The field Email is required').replace('_attribute_', t('EMAIL', 'Email')) : null,
         pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
       }),
       onKeyDown: preventWhiteSpaceOnKeyDown,
-      required: !!field.required,
+      required: !!field.required && !isCustomerMode,
       autoComplete: "on",
       isError: ((_formMethods$errors4 = formMethods.errors) === null || _formMethods$errors4 === void 0 ? void 0 : _formMethods$errors4.email) && !notValidationFields.includes(field.code)
     }), /*#__PURE__*/_react.default.createElement(_styles2.InputBeforeIcon, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Envelope, null))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, signUpTab === 'default' && /*#__PURE__*/_react.default.createElement(_styles2.InputContainer, {
@@ -499,13 +499,13 @@ var SignUpFormUI = function SignUpFormUI(props) {
   })), props.isRecaptchaEnable && enableReCaptcha && /*#__PURE__*/_react.default.createElement(_styles2.ReCaptchaWrapper, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.ReCaptcha, {
     handleReCaptcha: handleReCaptcha,
     reCaptchaVersion: reCaptchaVersion
-  })), /*#__PURE__*/_react.default.createElement(_styles2.CheckboxArea, null, signUpTab === 'default' && /*#__PURE__*/_react.default.createElement(_styles2.PromotionsWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+  })), /*#__PURE__*/_react.default.createElement(_styles2.CheckboxArea, null, signUpTab === 'default' && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles2.PromotionsWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "promotions",
     id: "promotions",
     onChange: handleChangePromotions
   }), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "promotions"
-  }, /*#__PURE__*/_react.default.createElement("span", null, t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')))), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_formMethods$errors21 = formMethods.errors) === null || _formMethods$errors21 === void 0 ? void 0 : _formMethods$errors21.acceptTerms) && /*#__PURE__*/_react.default.createElement(_styles2.ValidationText, null, (_formMethods$errors22 = formMethods.errors) === null || _formMethods$errors22 === void 0 ? void 0 : (_formMethods$errors23 = _formMethods$errors22.acceptTerms) === null || _formMethods$errors23 === void 0 ? void 0 : _formMethods$errors23.message, " *"), /*#__PURE__*/_react.default.createElement(_styles2.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')))), (configs === null || configs === void 0 ? void 0 : (_configs$terms_and_co = configs.terms_and_conditions) === null || _configs$terms_and_co === void 0 ? void 0 : _configs$terms_and_co.value) === 'true' && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_formMethods$errors21 = formMethods.errors) === null || _formMethods$errors21 === void 0 ? void 0 : _formMethods$errors21.acceptTerms) && /*#__PURE__*/_react.default.createElement(_styles2.ValidationText, null, (_formMethods$errors22 = formMethods.errors) === null || _formMethods$errors22 === void 0 ? void 0 : (_formMethods$errors23 = _formMethods$errors22.acceptTerms) === null || _formMethods$errors23 === void 0 ? void 0 : _formMethods$errors23.message, " *"), /*#__PURE__*/_react.default.createElement(_styles2.TermsConditionWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
     name: "acceptTerms",
     ref: formMethods.register({
       required: t('ERROR_ACCEPT_TERMS', 'You must accept the Terms & Conditions.')
@@ -562,7 +562,7 @@ var SignUpFormUI = function SignUpFormUI(props) {
         page: 'signup_driver'
       });
     }
-  }, t('SIGNUP_FOR_DRIVER', 'Sign up for driver'))), hasSocialLogin && hasSocialEnabled && /*#__PURE__*/_react.default.createElement(_styles2.LoginDivider, null, /*#__PURE__*/_react.default.createElement(_styles2.DividerLine, null), /*#__PURE__*/_react.default.createElement("p", null, t('OR', 'or')), /*#__PURE__*/_react.default.createElement(_styles2.DividerLine, null)), !externalPhoneNumber && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.keys(configs).length > 0 ? /*#__PURE__*/_react.default.createElement(_styles2.SocialButtons, {
+  }, t('SIGNUP_FOR_DRIVER', 'Sign up for driver'))), hasSocialLogin && hasSocialEnabled && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles2.LoginDivider, null, /*#__PURE__*/_react.default.createElement(_styles2.DividerLine, null), /*#__PURE__*/_react.default.createElement("p", null, t('OR', 'or')), /*#__PURE__*/_react.default.createElement(_styles2.DividerLine, null)), !externalPhoneNumber && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.keys(configs).length > 0 ? /*#__PURE__*/_react.default.createElement(_styles2.SocialButtons, {
     isPopup: isPopup
   }, isFacebookLogin && (configs === null || configs === void 0 ? void 0 : (_configs$facebook_id2 = configs.facebook_id) === null || _configs$facebook_id2 === void 0 ? void 0 : _configs$facebook_id2.value) && facebookLoginEnabled && /*#__PURE__*/_react.default.createElement(_FacebookLogin.FacebookLoginButton, {
     appId: configs === null || configs === void 0 ? void 0 : (_configs$facebook_id3 = configs.facebook_id) === null || _configs$facebook_id3 === void 0 ? void 0 : _configs$facebook_id3.value,

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

@@ -141,7 +141,7 @@ var UserDetailsUI = function UserDetailsUI(props) {
     handleSendOtp();
   }, [willVerifyOtpState]);
   (0, _react.useEffect)(function () {
-    if (isCheckoutPlace && (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.length) === 0) {
+    if (isCheckoutPlace && (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.length) === 0 && !(formState !== null && formState !== void 0 && formState.loading)) {
       setIsSuccess && setIsSuccess(true);
       onClose && onClose();
     }

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

@@ -42,5 +42,5 @@ var TitleContainer = _styledComponents.default.div(_templateObject9 || (_templat
 exports.TitleContainer = TitleContainer;
 var CountryFlag = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n  .PhoneInputCountryIcon {\n    width: 25px;\n  }\n  .PhoneInputInput {\n    display: none;\n  }\n  .PhoneInputCountrySelect {\n    display: none;\n  }\n"])));
 exports.CountryFlag = CountryFlag;
-var PhoneContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n"])));
+var PhoneContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  p {\n    margin-bottom: 0;\n  }\n"])));
 exports.PhoneContainer = PhoneContainer;

package/package.json

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

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

@@ -274,19 +274,19 @@ const BusinessControllerUI = (props) => {
                   {isCustomerMode && hasInformationLength && (
                     <CallCenterInformation>
                       {business?.idle_drivers_count > 0 && (
-                        <CallCenterInformationBullet bgcolor='green'>
+                        <CallCenterInformationBullet bgcolor='#4CAF50'>
                           <BiCar />
                           {business?.idle_drivers_count}
                         </CallCenterInformationBullet>
                       )}
                       {business?.busy_drivers_count > 0 && (
-                        <CallCenterInformationBullet bgcolor='red'>
+                        <CallCenterInformationBullet bgcolor='#E91E63'>
                           <BiCar />
                           {business?.busy_drivers_count}
                         </CallCenterInformationBullet>
                       )}
                       {business?.activated_orders > 0 && (
-                        <CallCenterInformationBullet bgcolor='rgb(252,225,5)'>
+                        <CallCenterInformationBullet bgcolor='#FF9800'>
                           <BiBasket />
                           {business?.activated_orders}
                         </CallCenterInformationBullet>

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

@@ -344,7 +344,7 @@ export const CallCenterInformation = styled.div`
   flex-direction: column;
   position: absolute;
   right: 0;
-  bottom: 43px;
+  bottom: 0;
   margin-right: 10px;
   margin-bottom: 10px;
   div{

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/OrdersSection/index.js

@@ -13,11 +13,21 @@ export const OrdersSection = (props) => {
   } = props
   const [orderState] = useOrder()
   const [, t] = useLanguage()
+
+  const propsToFetchBusiness = ['name', 'logo', 'slug', 'id']
+  const propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary']
+
+  const handleRedirectToCheckout = (uuid) => {
+    onRedirectPage && onRedirectPage({ page: 'checkout', params: { cartUuid: uuid } })
+  }
+
   return (
     <>
       {onRedirectPage && (
         <>
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             horizontal
             isBusinessesPage
             onRedirectPage={onRedirectPage}
@@ -30,8 +40,11 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             activeOrders
             horizontal
             asDashboard
@@ -44,8 +57,11 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
           <OrdersOption
+            propsToFetch={propsToFetch}
+            propsToFetchBusiness={propsToFetchBusiness}
             pastOrders
             horizontal
             asDashboard
@@ -58,6 +74,7 @@ export const OrdersSection = (props) => {
             isBusinessesLoading={businessesList.loading}
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
+            handleRedirectToCheckout={handleRedirectToCheckout}
           />
         </>
       )}

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

@@ -107,7 +107,7 @@ const CheckoutUI = (props) => {
   const [{ options, loading }] = useOrder()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
-  const [{ user }, { login }] = useSession()
+  const [{ user, loading: userLoading }, { login }] = useSession()
   const [{ configs }] = useConfig()
   const [customerState] = useCustomer()
   const [events] = useEvent()
@@ -184,6 +184,7 @@ const CheckoutUI = (props) => {
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
 
   const handlePlaceOrder = () => {
+    if (placing) return
     if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
       setOpenModal({ ...openModal, signup: true, isGuest: true })
       return
@@ -288,7 +289,7 @@ const CheckoutUI = (props) => {
   }
 
   useEffect(() => {
-    if (validationFields && validationFields?.fields?.checkout) {
+    if (validationFields && validationFields?.fields?.checkout && !customerState.loading && !userLoading) {
       checkValidationFields()
     }
   }, [validationFields, user, customerState])

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

@@ -132,15 +132,19 @@ const OrderProgressUI = (props) => {
 }
 
 export const OrderProgress = (props) => {
+  const propsToFetchBusiness = ['name', 'logo', 'slug', 'id']
+  const propsToFetch = ['cart', 'business', 'status', 'id', 'uuid', 'cart_group_id', 'business_id', 'delivery_datetime', 'delivery_datetime_utc', 'total', 'summary']
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
     orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     noGiftCardOrders: true,
+    propsToFetchBusiness,
+    propsToFetch,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 10,
+      pageSize: props.isCustomerMode ? 1 : 10,
       controlType: 'infinity'
     }
   }