ordering-ui-external 8.0.1 → 8.0.3

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

@@ -26,7 +26,8 @@ var CartContent = function CartContent(props) {
     isOrderStateCarts = props.isOrderStateCarts,
     isCartPopover = props.isCartPopover,
     isForceOpenCart = props.isForceOpenCart,
-    setPreorderBusiness = props.setPreorderBusiness;
+    setPreorderBusiness = props.setPreorderBusiness,
+    isCustomerMode = props.isCustomerMode;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -111,7 +112,8 @@ var CartContent = function CartContent(props) {
       currentCartUuid: currentCartUuid,
       isProducts: cart.products.length,
       onClickCheckout: props.onClose,
-      setPreorderBusiness: setPreorderBusiness
+      setPreorderBusiness: setPreorderBusiness,
+      isCustomerMode: isCustomerMode
     }));
   }), (!carts || (carts === null || carts === void 0 ? void 0 : carts.length) === 0) && /*#__PURE__*/_react.default.createElement(_styles.NotCarts, null, /*#__PURE__*/_react.default.createElement("img", {
     src: (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$general = _theme$images.general) === null || _theme$images$general === void 0 ? void 0 : _theme$images$general.notFound,

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

@@ -124,6 +124,7 @@ var CartPopover = function CartPopover(props) {
     ref: popperElement,
     style: popStyle
   }, attributes.popper), /*#__PURE__*/_react.default.createElement(_CartContent.CartContent, {
+    isCustomerMode: isCustomerMode,
     isCartPopover: true,
     isOpenCart: open,
     onClick: props.onClick,

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

@@ -42,6 +42,19 @@ var OrdersSection = function OrdersSection(props) {
     isBusinessesLoading: businessesList.loading,
     isCustomerMode: isCustomerMode,
     franchiseId: props.franchiseId
+  }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
+    activeOrders: true,
+    horizontal: true,
+    asDashboard: true,
+    isBusinessesPage: true,
+    titleContent: t('ACTIVE_ORDERS', 'Active orders'),
+    businessesIds: businessesIds,
+    onRedirectPage: onRedirectPage,
+    userCustomerId: userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.id,
+    isCustomLayout: true,
+    isBusinessesLoading: businessesList.loading,
+    isCustomerMode: isCustomerMode,
+    franchiseId: props.franchiseId
   }), /*#__PURE__*/_react.default.createElement(_OrdersOption.OrdersOption, {
     pastOrders: true,
     horizontal: true,

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

@@ -216,6 +216,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
   }, [preorderBusiness]);
   (0, _react.useEffect)(function () {
     var _businessesList$busin2;
+    setActiveMap(false);
     if (!(businessesList !== null && businessesList !== void 0 && (_businessesList$busin2 = businessesList.businesses) !== null && _businessesList$busin2 !== void 0 && _businessesList$busin2.length)) return;
     var ids = _toConsumableArray(favoriteIds);
     businessesList.businesses.forEach(function (business) {

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

@@ -71,7 +71,8 @@ var CartUI = function CartUI(props) {
     hideDriverTip = props.hideDriverTip,
     hideCouponInput = props.hideCouponInput,
     businessConfigs = props.businessConfigs,
-    loyaltyRewardRate = props.loyaltyRewardRate;
+    loyaltyRewardRate = props.loyaltyRewardRate,
+    isCustomerMode = props.isCustomerMode;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -229,18 +230,27 @@ var CartUI = function CartUI(props) {
     onClickCheckout && onClickCheckout();
   };
   var handleStoreRedirect = function handleStoreRedirect(slug) {
-    if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+    if (isCustomerMode) {
       events.emit('go_to_page', {
         page: 'business',
         params: {
-          business_slug: slug
+          store: slug
         }
       });
     } else {
-      events.emit('go_to_page', {
-        page: 'business',
-        search: "?".concat(businessUrlTemplate.split('?')[1].replace(':business_slug', '')).concat(slug)
-      });
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', {
+          page: 'business',
+          params: {
+            business_slug: slug
+          }
+        });
+      } else {
+        events.emit('go_to_page', {
+          page: 'business',
+          search: "?".concat(businessUrlTemplate.split('?')[1].replace(':business_slug', '')).concat(slug)
+        });
+      }
     }
     if (windowSize.width <= 768) {
       onClickCheckout && onClickCheckout();

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

@@ -27,7 +27,8 @@ var CartContent = function CartContent(props) {
     isForceOpenCart = props.isForceOpenCart,
     setPreorderBusiness = props.setPreorderBusiness,
     isOpenCart = props.isOpenCart,
-    isSlideBar = props.isSlideBar;
+    isSlideBar = props.isSlideBar,
+    isCustomerMode = props.isCustomerMode;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -129,7 +130,8 @@ var CartContent = function CartContent(props) {
       businessConfigs: cart === null || cart === void 0 ? void 0 : (_cart$business = cart.business) === null || _cart$business === void 0 ? void 0 : _cart$business.configs,
       hideCouponInput: (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine = configs.multi_business_checkout_coupon_input_style) === null || _configs$multi_busine === void 0 ? void 0 : _configs$multi_busine.value) === 'group',
       hideDeliveryFee: (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine2 = configs.multi_business_checkout_show_combined_delivery_fee) === null || _configs$multi_busine2 === void 0 ? void 0 : _configs$multi_busine2.value) === '1',
-      hideDriverTip: (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine3 = configs.multi_business_checkout_show_combined_driver_tip) === null || _configs$multi_busine3 === void 0 ? void 0 : _configs$multi_busine3.value) === '1'
+      hideDriverTip: (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine3 = configs.multi_business_checkout_show_combined_driver_tip) === null || _configs$multi_busine3 === void 0 ? void 0 : _configs$multi_busine3.value) === '1',
+      isCustomerMode: isCustomerMode
     }));
   }), checkoutMultiBusinessEnabled && !!carts.length && /*#__PURE__*/_react.default.createElement(_styles.MultiCartPriceContainer, null, !!totalCartsFee && (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine4 = configs.multi_business_checkout_show_combined_delivery_fee) === null || _configs$multi_busine4 === void 0 ? void 0 : _configs$multi_busine4.value) === '1' && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("p", null, t('TOTAL_DELIVERY_FEE', 'Total delivery fee')), /*#__PURE__*/_react.default.createElement("p", null, parsePrice(totalCartsFee))), carts.reduce(function (sum, cart) {
     return sum + (cart === null || cart === void 0 ? void 0 : cart.driver_tip);

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

@@ -157,7 +157,8 @@ var CartPopover = function CartPopover(props) {
     setPreorderBusiness: setPreorderBusiness,
     isOpenCart: open,
     onClick: props.onClick,
-    isSlideBar: isSlideBar
+    isSlideBar: isSlideBar,
+    isCustomerMode: isCustomerMode
   })) : /*#__PURE__*/_react.default.createElement(_styles.PopoverBody, _extends({
     className: "cart-popover",
     ref: popperElement,
@@ -169,7 +170,8 @@ var CartPopover = function CartPopover(props) {
     onClose: props.onClose,
     setPreorderBusiness: setPreorderBusiness,
     isOpenCart: open,
-    onClick: props.onClick
+    onClick: props.onClick,
+    isCustomerMode: isCustomerMode
   }), /*#__PURE__*/_react.default.createElement(_styles.PopoverArrow, {
     key: "arrow",
     ref: arrowElement,

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

@@ -18,7 +18,8 @@ var HorizontalOrdersLayout = function HorizontalOrdersLayout(props) {
     customArray = props.customArray,
     businessesIds = props.businessesIds,
     isCustomerMode = props.isCustomerMode,
-    handleChangePage = props.handleChangePage;
+    handleChangePage = props.handleChangePage,
+    titleContent = props.titleContent;
   var orders = customArray || props.orders;
   var ordersToShow = businessesIds && isCustomerMode ? orders.filter(function (order) {
     return businessesIds === null || businessesIds === void 0 ? void 0 : businessesIds.includes(order === null || order === void 0 ? void 0 : order.business_id);
@@ -33,19 +34,23 @@ var HorizontalOrdersLayout = function HorizontalOrdersLayout(props) {
     }));
   }) : orders;
   return orders.length > 0 && ordersToShow.length > 0 ? /*#__PURE__*/_react.default.createElement(_styles2.OrdersContainer, {
-    id: "orders-container",
+    id: isBusinessesPage && titleContent ? "".concat(titleContent, "-container") : 'orders-container',
     activeOrders: true,
     ordersLength: (orders === null || orders === void 0 ? void 0 : orders.length) <= 1,
     isBusinessesPage: isBusinessesPage
-  }, /*#__PURE__*/_react.default.createElement(_styles.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.CardsContainerWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.CardsContainer, null, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
-    scrollId: "orderScroll"
+  }, /*#__PURE__*/_react.default.createElement(_styles.CardWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.CardsContainerWrapper, {
+    isBusinessesPage: isBusinessesPage
+  }, /*#__PURE__*/_react.default.createElement(_styles.CardsContainer, {
+    isBusinessesPage: isBusinessesPage
+  }, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
+    scrollId: isBusinessesPage && titleContent ? "".concat(titleContent, "Scroll") : 'orderScroll'
   }, orders.length > 0 && ordersToShow.map(function (order, i) {
     var _order$id;
     return /*#__PURE__*/_react.default.createElement(_SingleOrderCard.SingleOrderCard, _extends({}, props, {
       key: order.id || ((_order$id = order.id) === null || _order$id === void 0 ? void 0 : _order$id[0]) || i,
       order: order
     }));
-  })))), orders.length > 0 && ordersToShow.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+  })))), orders.length > 0 && ordersToShow.length > 0 && Math.ceil(pagination === null || pagination === void 0 ? void 0 : pagination.totalPages) > 1 && /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
     currentPage: pagination.currentPage,
     totalPages: Math.ceil(pagination === null || pagination === void 0 ? void 0 : pagination.totalPages),
     handleChangePage: handleChangePage

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleContainer = exports.Price = exports.Map = exports.Logo = exports.FavoriteWrapper = exports.Content = exports.CardsContainerWrapper = exports.CardsContainer = exports.CardWrapper = exports.Card = exports.ButtonWrapper = exports.BusinessLogoWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -20,55 +20,61 @@ var Content = _styledComponents.default.div(_templateObject || (_templateObject
 exports.Content = Content;
 var CardWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 exports.CardWrapper = CardWrapper;
-var CardsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var CardsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
+  var isBusinessesPage = _ref2.isBusinessesPage;
+  return isBusinessesPage && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n  "])));
+});
 exports.CardsContainer = CardsContainer;
-var CardsContainerWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n  display: flex;\n  ::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  ", "\n"])), function (_ref2) {
-  var isLoading = _ref2.isLoading;
-  return isLoading && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    ::-webkit-scrollbar {\n      width: 0px;\n      height: 0px;\n    }\n  "])));
+var CardsContainerWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n  display: flex;\n  ", "\n  ::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  ", "\n"])), function (_ref3) {
+  var isBusinessesPage = _ref3.isBusinessesPage;
+  return isBusinessesPage && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    overflow: scroll hidden;\n    width: 100%;\n  "])));
+}, function (_ref4) {
+  var isLoading = _ref4.isLoading;
+  return isLoading && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    ::-webkit-scrollbar {\n      width: 0px;\n      height: 0px;\n    }\n  "])));
 });
 exports.CardsContainerWrapper = CardsContainerWrapper;
-var Price = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 35%;\n\n  ", "\n\n  h2 {\n    font-size: 16px;\n    margin-block-end: ", ";\n    margin-block-start: 0.1em;\n    font-weight: normal;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: ", ";\n    color: #ff9300;\n    font-size: 0.8em;\n    overflow:hidden;\n    text-overflow: ellipsis;\n    margin-left: 5px;\n  }\n\n  p[name='view-cart']{\n    color: ", ";\n    cursor: pointer;\n  }\n\n  @media (min-width: 480px) {\n    ", "\n  }\n"])), function (_ref3) {
-  var isCustomerMode = _ref3.isCustomerMode;
-  return isCustomerMode ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  text-align: end;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  "]))) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: column;\n    align-items: flex-end;\n  "])));
-}, function (_ref4) {
-  var isBusinessesPage = _ref4.isBusinessesPage;
+var Price = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 35%;\n\n  ", "\n\n  h2 {\n    font-size: 16px;\n    margin-block-end: ", ";\n    margin-block-start: 0.1em;\n    font-weight: normal;\n  }\n  p {\n    margin-block-end: 0.1em;\n    margin-block-start: ", ";\n    color: #ff9300;\n    font-size: 0.8em;\n    overflow:hidden;\n    text-overflow: ellipsis;\n    margin-left: 5px;\n  }\n\n  p[name='view-cart']{\n    color: ", ";\n    cursor: pointer;\n  }\n\n  @media (min-width: 480px) {\n    ", "\n  }\n"])), function (_ref5) {
+  var isCustomerMode = _ref5.isCustomerMode;
+  return isCustomerMode ? (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: end;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  "]))) : (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: flex-end;\n    flex-direction: column;\n    align-items: flex-end;\n  "])));
+}, function (_ref6) {
+  var isBusinessesPage = _ref6.isBusinessesPage;
   return isBusinessesPage ? '0.1em' : '1em';
-}, function (_ref5) {
-  var isBusinessesPage = _ref5.isBusinessesPage;
+}, function (_ref7) {
+  var isBusinessesPage = _ref7.isBusinessesPage;
   return isBusinessesPage ? '0.1em' : '1em';
 }, function (props) {
   return props.theme.colors.primary;
-}, function (_ref6) {
-  var isCustomerMode = _ref6.isCustomerMode;
-  return !isCustomerMode && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      flex-direction: row;\n      align-items: center;\n    "])));
+}, function (_ref8) {
+  var isCustomerMode = _ref8.isCustomerMode;
+  return !isCustomerMode && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      flex-direction: row;\n      align-items: center;\n    "])));
 });
 exports.Price = Price;
-var Card = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  margin: 10px;\n  position: relative;\n  background: white;\n  border-radius: 16px;\n  display: inline-block;\n  text-align: left;\n  transition: all 0.3s ease;\n\n  ", "\n\n  &:hover {\n    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;\n  }\n\n  button.load-orders {\n    padding: 10px 30px;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media (min-width: 480px) {\n    min-width: 430px;\n    max-height: ", ";\n    width: 430px;\n  }\n\n  @media(min-width: 993px){\n    ", "\n  }\n"])), function (_ref7) {
-  var isCustomerMode = _ref7.isCustomerMode;
-  return isCustomerMode ? (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    min-width: 300px;\n    width: 300px;\n    display: inline-block;\n  "]))) : (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    min-width: 380px;\n    width: 380px;\n    height: ", ";\n    max-height: ", ";\n  "])), function (_ref8) {
-    var isBusinessesPage = _ref8.isBusinessesPage;
+var Card = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  margin: 10px;\n  position: relative;\n  background: white;\n  border-radius: 16px;\n  display: inline-block;\n  text-align: left;\n  transition: all 0.3s ease;\n\n  ", "\n\n  &:hover {\n    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;\n  }\n\n  button.load-orders {\n    padding: 10px 30px;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  @media (min-width: 480px) {\n    min-width: 430px;\n    max-height: ", ";\n    width: 430px;\n  }\n\n  @media(min-width: 993px){\n    ", "\n  }\n"])), function (_ref9) {
+  var isCustomerMode = _ref9.isCustomerMode;
+  return isCustomerMode ? (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    min-width: 300px;\n    width: 300px;\n    display: inline-block;\n  "]))) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    min-width: 380px;\n    width: 380px;\n    height: ", ";\n    max-height: ", ";\n  "])), function (_ref10) {
+    var isBusinessesPage = _ref10.isBusinessesPage;
     return isBusinessesPage && '300px';
-  }, function (_ref9) {
-    var isBusinessesPage = _ref9.isBusinessesPage;
+  }, function (_ref11) {
+    var isBusinessesPage = _ref11.isBusinessesPage;
     return isBusinessesPage ? '300px' : '220px';
   });
 }, function (props) {
   var _props$theme;
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    text-align: right;\n  "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    text-align: right;\n  "])));
 }, function (props) {
-  return (props.nobg || props.isBusinessesPage) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    background: transparent;\n  "])));
+  return (props.nobg || props.isBusinessesPage) && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n    background: transparent;\n  "])));
 }, function (props) {
-  return props.flex && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])));
-}, function (_ref10) {
-  var isBusinessesPage = _ref10.isBusinessesPage;
+  return props.flex && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])));
+}, function (_ref12) {
+  var isBusinessesPage = _ref12.isBusinessesPage;
   return isBusinessesPage ? '300px' : '250px';
-}, function (_ref11) {
-  var isBusinessesPage = _ref11.isBusinessesPage;
-  return isBusinessesPage && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      margin: 30px 20px;\n      width: calc(33% - 40px);\n    "])));
+}, function (_ref13) {
+  var isBusinessesPage = _ref13.isBusinessesPage;
+  return isBusinessesPage && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      margin: 30px 20px;\n      width: calc(33% - 40px);\n    "])));
 });
 exports.Card = Card;
-var BusinessLogoWrapperStyled = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 55px;\n  min-width: 55px;\n  height: 55px;\n  min-height: 55px;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 7.6px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n\n  margin-left: 8px;\n\n  ", "\n\n  @media (min-width: 576px) {\n    width: 86px;\n    min-width: 86px;\n    height: 86px;\n    min-height: 86px;\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 8px;\n  "])));
+var BusinessLogoWrapperStyled = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 55px;\n  min-width: 55px;\n  height: 55px;\n  min-height: 55px;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: cover;\n  object-fit: cover;\n  background-position: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 7.6px;\n  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);\n\n  margin-left: 8px;\n\n  ", "\n\n  @media (min-width: 576px) {\n    width: 86px;\n    min-width: 86px;\n    height: 86px;\n    min-height: 86px;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 8px;\n  "])));
 });
 var BusinessLogoWrapper = function BusinessLogoWrapper(props) {
   var style = {};
@@ -82,7 +88,7 @@ var BusinessLogoWrapper = function BusinessLogoWrapper(props) {
   }), props.children);
 };
 exports.BusinessLogoWrapper = BusinessLogoWrapper;
-var ButtonWrapper = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  top: 4px;\n  display: flex;\n  align-items: center;\n\n  button {\n    border-radius: 50px;\n    font-size: 10px;\n    line-height: 15px;\n    padding: 4px 8px;\n    border: 1px solid ", ";\n    margin: 5px;\n\n    &.reorder {\n      background: ", ";\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n"])), function (props) {
+var ButtonWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  top: 4px;\n  display: flex;\n  align-items: center;\n\n  button {\n    border-radius: 50px;\n    font-size: 10px;\n    line-height: 15px;\n    padding: 4px 8px;\n    border: 1px solid ", ";\n    margin: 5px;\n\n    &.reorder {\n      background: ", ";\n      &:hover {\n        background: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.theme.colors.primaryContrast;
 }, function (props) {
   return props.theme.colors.primaryContrast;
@@ -90,29 +96,29 @@ var ButtonWrapper = _styledComponents.default.div(_templateObject21 || (_templat
   return props.theme.colors.primary;
 });
 exports.ButtonWrapper = ButtonWrapper;
-var Logo = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  width: 55px;\n  height: 55px;\n  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));\n  border-radius: 7.6px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 7.6px;\n  }\n\n  @media (min-width: 480px){\n    width: 86px;\n    height: 86px;\n  }\n"])));
+var Logo = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  width: 55px;\n  height: 55px;\n  filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));\n  border-radius: 7.6px;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 7.6px;\n  }\n\n  @media (min-width: 480px){\n    width: 86px;\n    height: 86px;\n  }\n"])));
 exports.Logo = Logo;
-var TitleContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var TitleContainer = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.TitleContainer = TitleContainer;
-var Map = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  min-height: ", ";\n  img{\n    width: 100%;\n    height: 100%;\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    border-radius: ", ";\n    image-rendering: -webkit-optimize-contrast;\n    object-fit: cover;\n  }\n  @media(min-width: 480px){\n    height: ", ";\n    min-height: ", "\n  }\n"])), function (_ref12) {
-  var isBusinessesPage = _ref12.isBusinessesPage;
-  return isBusinessesPage ? '200px' : '88px';
-}, function (_ref13) {
-  var isBusinessesPage = _ref13.isBusinessesPage;
-  return isBusinessesPage && '175px';
-}, function (_ref14) {
+var Map = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  min-height: ", ";\n  img{\n    width: 100%;\n    height: 100%;\n    border-top-left-radius: 16px;\n    border-top-right-radius: 16px;\n    border-radius: ", ";\n    image-rendering: -webkit-optimize-contrast;\n    object-fit: cover;\n  }\n  @media(min-width: 480px){\n    height: ", ";\n    min-height: ", "\n  }\n"])), function (_ref14) {
   var isBusinessesPage = _ref14.isBusinessesPage;
-  return isBusinessesPage && '16px';
+  return isBusinessesPage ? '200px' : '88px';
 }, function (_ref15) {
   var isBusinessesPage = _ref15.isBusinessesPage;
-  return isBusinessesPage ? '200px' : '100px';
+  return isBusinessesPage && '175px';
 }, function (_ref16) {
   var isBusinessesPage = _ref16.isBusinessesPage;
+  return isBusinessesPage && '16px';
+}, function (_ref17) {
+  var isBusinessesPage = _ref17.isBusinessesPage;
+  return isBusinessesPage ? '200px' : '100px';
+}, function (_ref18) {
+  var isBusinessesPage = _ref18.isBusinessesPage;
   return isBusinessesPage && '200px';
 });
 exports.Map = Map;
-var FavoriteWrapper = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  top: 41px;\n  right: 10px;\n  ", "\n  svg {\n    color: ", ";\n    font-size: 16px;\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n    left: 10px;\n    right: initial;\n  "])));
+var FavoriteWrapper = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  z-index: 10;\n  align-items: center;\n  justify-content: center;\n  top: 41px;\n  right: 10px;\n  ", "\n  svg {\n    color: ", ";\n    font-size: 16px;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    left: 10px;\n    right: initial;\n  "])));
 }, function (props) {
   return props.theme.colors.danger500;
 });

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

@@ -342,6 +342,7 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
     isCustomerMode: isCustomerMode,
     isBusiness: isBusiness,
     isProducts: isProducts,
+    titleContent: titleContent,
     handleChangePage: handleChangePage
   }) : /*#__PURE__*/_react.default.createElement(_VerticalOrdersLayout.VerticalOrdersLayout, {
     reorderLoading: reorderState === null || reorderState === void 0 ? void 0 : reorderState.loading,
@@ -394,7 +395,7 @@ var OrdersOption = function OrdersOption(props) {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: getAllOrders || props.activeOrders ? 30 : 10,
+      pageSize: getAllOrders || props.activeOrders && !props.isBusinessesPage ? 30 : 10,
       controlType: 'infinity'
     }
   });

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

@@ -232,7 +232,7 @@ var ReviewProductUI = function ReviewProductUI(props) {
         product: product
       }));
     }) : !(productsOrder !== null && productsOrder !== void 0 && productsOrder.deleted) && /*#__PURE__*/_react.default.createElement(SingleProductReview, _extends({}, props, {
-      key: i,
+      key: productsOrder === null || productsOrder === void 0 ? void 0 : productsOrder.id,
       product: productsOrder
     }));
   })), /*#__PURE__*/_react.default.createElement(_styles.ActionBlock, null, /*#__PURE__*/_react.default.createElement("span", {

package/package.json

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

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

@@ -13,7 +13,8 @@ export const CartContent = (props) => {
     isOrderStateCarts,
     isCartPopover,
     isForceOpenCart,
-    setPreorderBusiness
+    setPreorderBusiness,
+    isCustomerMode
   } = props
 
   const [, t] = useLanguage()
@@ -95,6 +96,7 @@ export const CartContent = (props) => {
                 isProducts={cart.products.length}
                 onClickCheckout={props.onClose}
                 setPreorderBusiness={setPreorderBusiness}
+                isCustomerMode={isCustomerMode}
               />
             )}
           </React.Fragment>

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

@@ -95,6 +95,7 @@ export const CartPopover = (props) => {
       </HeaderItem>
       <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
         <CartContent
+          isCustomerMode={isCustomerMode}
           isCartPopover
           isOpenCart={open}
           onClick={props.onClick}

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

@@ -31,6 +31,20 @@ export const OrdersSection = (props) => {
             isCustomerMode={isCustomerMode}
             franchiseId={props.franchiseId}
           />
+          <OrdersOption
+            activeOrders
+            horizontal
+            asDashboard
+            isBusinessesPage
+            titleContent={t('ACTIVE_ORDERS', 'Active orders')}
+            businessesIds={businessesIds}
+            onRedirectPage={onRedirectPage}
+            userCustomerId={userCustomer?.id}
+            isCustomLayout
+            isBusinessesLoading={businessesList.loading}
+            isCustomerMode={isCustomerMode}
+            franchiseId={props.franchiseId}
+          />
           <OrdersOption
             pastOrders
             horizontal

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

@@ -177,6 +177,7 @@ const BusinessesListingUI = (props) => {
   }, [preorderBusiness])
 
   useEffect(() => {
+    setActiveMap(false)
     if (!businessesList?.businesses?.length) return
     const ids = [...favoriteIds]
     businessesList.businesses.forEach(business => {

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

@@ -72,7 +72,8 @@ const CartUI = (props) => {
     hideDriverTip,
     hideCouponInput,
     businessConfigs,
-    loyaltyRewardRate
+    loyaltyRewardRate,
+    isCustomerMode
   } = props
 
   const theme = useTheme()
@@ -189,10 +190,14 @@ const CartUI = (props) => {
   }
 
   const handleStoreRedirect = (slug) => {
-    if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
-      events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+    if (isCustomerMode) {
+      events.emit('go_to_page', { page: 'business', params: { store: slug } })
     } else {
-      events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+      if (businessUrlTemplate === '/store/:business_slug' || businessUrlTemplate === '/:business_slug') {
+        events.emit('go_to_page', { page: 'business', params: { business_slug: slug } })
+      } else {
+        events.emit('go_to_page', { page: 'business', search: `?${businessUrlTemplate.split('?')[1].replace(':business_slug', '')}${slug}` })
+      }
     }
 
     if (windowSize.width <= 768) {
@@ -466,15 +471,15 @@ const CartUI = (props) => {
                 </table>
                 {isCouponEnabled && !isCartPending &&
                   ((isCheckout || isCartPopover || isMultiCheckout) &&
-                  !(isCheckout && isCartPopover)) && !hideCartDiscount && !hideCouponInput &&
-                (
-                  <CouponContainer>
-                    <CouponControl
-                      businessId={cart?.business_id}
-                      price={cart?.total}
-                    />
-                  </CouponContainer>
-                )}
+                    !(isCheckout && isCartPopover)) && !hideCartDiscount && !hideCouponInput &&
+                  (
+                    <CouponContainer>
+                      <CouponControl
+                        businessId={cart?.business_id}
+                        price={cart?.total}
+                      />
+                    </CouponContainer>
+                  )}
                 {
                   !isStore &&
                   !isMultiCheckout &&

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

@@ -14,7 +14,8 @@ export const CartContent = (props) => {
     isForceOpenCart,
     setPreorderBusiness,
     isOpenCart,
-    isSlideBar
+    isSlideBar,
+    isCustomerMode
   } = props
 
   const [, t] = useLanguage()
@@ -111,6 +112,7 @@ export const CartContent = (props) => {
                     hideCouponInput={configs?.multi_business_checkout_coupon_input_style?.value === 'group'}
                     hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
+                    isCustomerMode={isCustomerMode}
                   />
                 )}
               </React.Fragment>

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

@@ -132,6 +132,7 @@ export const CartPopover = (props) => {
               isOpenCart={open}
               onClick={props.onClick}
               isSlideBar={isSlideBar}
+              isCustomerMode={isCustomerMode}
             />
           </Modal>
         ) : (
@@ -144,6 +145,7 @@ export const CartPopover = (props) => {
               setPreorderBusiness={setPreorderBusiness}
               isOpenCart={open}
               onClick={props.onClick}
+              isCustomerMode={isCustomerMode}
             />
             <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
           </PopoverBody>

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

@@ -17,7 +17,8 @@ export const HorizontalOrdersLayout = (props) => {
     customArray,
     businessesIds,
     isCustomerMode,
-    handleChangePage
+    handleChangePage,
+    titleContent
   } = props
 
   const orders = customArray || props.orders
@@ -34,15 +35,15 @@ export const HorizontalOrdersLayout = (props) => {
   return (
     orders.length > 0 && ordersToShow.length > 0 ? (
       <OrdersContainer
-        id='orders-container'
+        id={isBusinessesPage && titleContent ? `${titleContent}-container` : 'orders-container'}
         activeOrders
         ordersLength={orders?.length <= 1}
         isBusinessesPage={isBusinessesPage}
       >
         <CardWrapper>
-          <CardsContainerWrapper>
-            <CardsContainer>
-              <AutoScroll scrollId='orderScroll'>
+          <CardsContainerWrapper isBusinessesPage={isBusinessesPage}>
+            <CardsContainer isBusinessesPage={isBusinessesPage}>
+              <AutoScroll scrollId={isBusinessesPage && titleContent ? `${titleContent}Scroll` : 'orderScroll'}>
                 {orders.length > 0 && ordersToShow.map((order, i) => (
                   <SingleOrderCard
                     {...props}
@@ -53,7 +54,7 @@ export const HorizontalOrdersLayout = (props) => {
               </AutoScroll>
             </CardsContainer>
           </CardsContainerWrapper>
-          {orders.length > 0 && ordersToShow.length > 0 && (
+          {orders.length > 0 && ordersToShow.length > 0 && Math.ceil(pagination?.totalPages) > 1 && (
             <Pagination
               currentPage={pagination.currentPage}
               totalPages={Math.ceil(pagination?.totalPages)}

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

@@ -21,11 +21,18 @@ export const CardWrapper = styled.div`
 `
 export const CardsContainer = styled.div`
   display: flex;
+  ${({ isBusinessesPage }) => isBusinessesPage && css`
+    box-sizing: border-box;
+  `}
 `
 
 export const CardsContainerWrapper = styled.div`
   margin-bottom: 10px;
   display: flex;
+  ${({ isBusinessesPage }) => isBusinessesPage && css`
+    overflow: scroll hidden;
+    width: 100%;
+  `}
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;