ordering-ui-external 1.9.2 → 1.9.3

package/_modules/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -26,7 +26,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var SingleOrderCardUI = function SingleOrderCardUI(props) {
-  var _order$business, _theme$images, _theme$images$dummies, _order$business2, _order$business3, _order$business5, _theme$images3, _theme$images3$dummie, _order$business6, _order$business7, _order$business8, _order$business9, _order$business10, _getOrderStatus;
+  var _order$business, _theme$images, _theme$images$dummies, _order$business2, _order$business3, _order$business4, _order$business5, _order$business6, _order$business7, _theme$images3, _theme$images3$dummie, _order$business8, _order$business9, _order$business10, _order$business11, _order$business12, _getOrderStatus;
   var order = props.order,
     getOrderStatus = props.getOrderStatus,
     handleReorder = props.handleReorder,
@@ -48,10 +48,9 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
     key: order.id,
     id: "order-card"
   }, /*#__PURE__*/_react.default.createElement(_styles2.OrderPastContent, null, (((_order$business = order.business) === null || _order$business === void 0 ? void 0 : _order$business.logo) || ((_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$dummies = _theme$images.dummies) === null || _theme$images$dummies === void 0 ? void 0 : _theme$images$dummies.businessLogo)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (order === null || order === void 0 ? void 0 : (_order$business2 = order.business) === null || _order$business2 === void 0 ? void 0 : _order$business2.length) > 1 ? /*#__PURE__*/_react.default.createElement(_styles2.MultiLogosContainer, null, order === null || order === void 0 ? void 0 : (_order$business3 = order.business) === null || _order$business3 === void 0 ? void 0 : _order$business3.map(function (business, i) {
-    var _order$business4, _theme$images2, _theme$images2$dummie;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: business === null || business === void 0 ? void 0 : business.id
-    }, i > 1 ? /*#__PURE__*/_react.default.createElement("p", null, "+ ", (order === null || order === void 0 ? void 0 : (_order$business4 = order.business) === null || _order$business4 === void 0 ? void 0 : _order$business4.length) - 2) : /*#__PURE__*/_react.default.createElement(_styles2.PastLogo, {
+    var _theme$images2, _theme$images2$dummie;
+    return i < 2 && /*#__PURE__*/_react.default.createElement(_styles2.PastLogo, {
+      key: business === null || business === void 0 ? void 0 : business.id,
       isMulti: true
     }, /*#__PURE__*/_react.default.createElement("img", {
       src: (business === null || business === void 0 ? void 0 : business.logo) || ((_theme$images2 = theme.images) === null || _theme$images2 === void 0 ? void 0 : (_theme$images2$dummie = _theme$images2.dummies) === null || _theme$images2$dummie === void 0 ? void 0 : _theme$images2$dummie.businessLogo),
@@ -59,21 +58,21 @@ var SingleOrderCardUI = function SingleOrderCardUI(props) {
       width: "55px",
       height: "64px",
       loading: "lazy"
-    })));
-  })) : /*#__PURE__*/_react.default.createElement(_styles2.PastLogo, null, /*#__PURE__*/_react.default.createElement("img", {
-    src: ((_order$business5 = order.business) === null || _order$business5 === void 0 ? void 0 : _order$business5.logo) || ((_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$dummie = _theme$images3.dummies) === null || _theme$images3$dummie === void 0 ? void 0 : _theme$images3$dummie.businessLogo),
+    }));
+  }), (order === null || order === void 0 ? void 0 : (_order$business4 = order.business) === null || _order$business4 === void 0 ? void 0 : _order$business4.length) > 1 && (order === null || order === void 0 ? void 0 : (_order$business5 = order.business) === null || _order$business5 === void 0 ? void 0 : _order$business5.length) - 2 > 0 && /*#__PURE__*/_react.default.createElement("p", null, "+ ", (order === null || order === void 0 ? void 0 : (_order$business6 = order.business) === null || _order$business6 === void 0 ? void 0 : _order$business6.length) - 2)) : /*#__PURE__*/_react.default.createElement(_styles2.PastLogo, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: ((_order$business7 = order.business) === null || _order$business7 === void 0 ? void 0 : _order$business7.logo) || ((_theme$images3 = theme.images) === null || _theme$images3 === void 0 ? void 0 : (_theme$images3$dummie = _theme$images3.dummies) === null || _theme$images3$dummie === void 0 ? void 0 : _theme$images3$dummie.businessLogo),
     alt: "business-logo",
     width: "55px",
     height: "64px",
     loading: "lazy"
-  }))), /*#__PURE__*/_react.default.createElement(_styles.BusinessInformation, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperBusinessTitle, null, /*#__PURE__*/_react.default.createElement("h2", null, (order === null || order === void 0 ? void 0 : (_order$business6 = order.business) === null || _order$business6 === void 0 ? void 0 : _order$business6.length) > 1 ? "".concat(t('GROUP_ORDER', 'Group Order'), " ").concat(t('No', 'No'), ". ").concat(order === null || order === void 0 ? void 0 : order.cart_group_id) : (_order$business7 = order.business) === null || _order$business7 === void 0 ? void 0 : _order$business7.name), !(order !== null && order !== void 0 && (_order$business8 = order.business) !== null && _order$business8 !== void 0 && _order$business8.length) && /*#__PURE__*/_react.default.createElement(_styles2.FavoriteWrapper, {
+  }))), /*#__PURE__*/_react.default.createElement(_styles.BusinessInformation, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperBusinessTitle, null, /*#__PURE__*/_react.default.createElement("h2", null, (order === null || order === void 0 ? void 0 : (_order$business8 = order.business) === null || _order$business8 === void 0 ? void 0 : _order$business8.length) > 1 ? "".concat(t('GROUP_ORDER', 'Group Order'), " ").concat(t('No', 'No'), ". ").concat(order === null || order === void 0 ? void 0 : order.cart_group_id) : (_order$business9 = order.business) === null || _order$business9 === void 0 ? void 0 : _order$business9.name), !(order !== null && order !== void 0 && (_order$business10 = order.business) !== null && _order$business10 !== void 0 && _order$business10.length) && /*#__PURE__*/_react.default.createElement(_styles2.FavoriteWrapper, {
     onClick: function onClick() {
       return handleChangeFavorite(order);
     },
     className: "favorite"
   }, order !== null && order !== void 0 && order.favorite ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.HeartFill, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Heart, null))), /*#__PURE__*/_react.default.createElement(_styles2.OrderInfo, null, (order === null || order === void 0 ? void 0 : order.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     name: "order_number"
-  }, (order === null || order === void 0 ? void 0 : (_order$business9 = order.business) === null || _order$business9 === void 0 ? void 0 : _order$business9.length) > 1 ? "".concat(order === null || order === void 0 ? void 0 : (_order$business10 = order.business) === null || _order$business10 === void 0 ? void 0 : _order$business10.length, " ").concat(t('ORDERS', 'orders')) : "".concat(t('ORDER_NUM', 'Order No.'), " ").concat(order.id)), /*#__PURE__*/_react.default.createElement(_BsDot.default, {
+  }, (order === null || order === void 0 ? void 0 : (_order$business11 = order.business) === null || _order$business11 === void 0 ? void 0 : _order$business11.length) > 1 ? "".concat(order === null || order === void 0 ? void 0 : (_order$business12 = order.business) === null || _order$business12 === void 0 ? void 0 : _order$business12.length, " ").concat(t('ORDERS', 'orders')) : "".concat(t('ORDER_NUM', 'Order No.'), " ").concat(order.id)), /*#__PURE__*/_react.default.createElement(_BsDot.default, {
     className: "dot"
   })), /*#__PURE__*/_react.default.createElement("p", null, order !== null && order !== void 0 && order.delivery_datetime_utc ? parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime_utc) : parseDate(order === null || order === void 0 ? void 0 : order.delivery_datetime, {
     utc: false

package/_modules/themes/five/index.js

@@ -375,6 +375,12 @@ Object.defineProperty(exports, "OrderBillSection", {
     return _OrderBillSection.OrderBillSection;
   }
 });
+Object.defineProperty(exports, "OrderContextUI", {
+  enumerable: true,
+  get: function get() {
+    return _OrderContextUI.OrderContextUI;
+  }
+});
 Object.defineProperty(exports, "OrderDetails", {
   enumerable: true,
   get: function get() {
@@ -845,6 +851,7 @@ var _SearchProducts = require("./src/components/SearchProducts");
 var _MultiCartsPaymethodsAndWallets = require("./src/components/MultiCartsPaymethodsAndWallets");
 var _ProfessionalProfile = require("./src/components/ProfessionalProfile");
 var _OrderHistory = require("./src/components/OrderDetails/OrderHistory");
+var _OrderContextUI = require("./src/components/OrderContextUI");
 var _OrderBillSection = require("./src/components/OrderDetails/OrderBillSection");
 var _OrderPreferencesSections = require("./src/components/OrderDetails/OrderPreferencesSections");
 var _ActionsSection = require("./src/components/OrderDetails/ActionsSection");

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

@@ -53,7 +53,8 @@ var AddressListUI = function AddressListUI(props) {
     isCustomerMode = props.isCustomerMode,
     isFromCheckout = props.isFromCheckout,
     setIsAddressFormOpen = props.setIsAddressFormOpen,
-    isProfile = props.isProfile;
+    isProfile = props.isProfile,
+    isMobile = props.isMobile;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -225,7 +226,7 @@ var AddressListUI = function AddressListUI(props) {
         return openAddress({});
       },
       disabled: (orderState === null || orderState === void 0 ? void 0 : orderState.loading) || actionStatus.loading,
-      style: isCompletedLayout ? {
+      style: isCompletedLayout && !isMobile ? {
         flex: 1,
         width: 'fit-content'
       } : {}

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

@@ -24,7 +24,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var BusinessItemAccordion = function BusinessItemAccordion(props) {
-  var _configs$cart_change_, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme$6, _orderingTheme$theme$7, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _props$beforeElements, _props$beforeComponen, _theme$images, _theme$images$dummies, _orderState$options, _props$afterComponent, _props$afterElements;
+  var _configs$cart_change_, _configs$checkout_mul, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme$6, _orderingTheme$theme$7, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _props$beforeElements, _props$beforeComponen, _theme$images, _theme$images$dummies, _orderState$options, _props$afterComponent, _props$afterElements;
   var uuid = props.uuid,
     isCartPending = props.isCartPending,
     currentCartUuid = props.currentCartUuid,
@@ -81,6 +81,7 @@ var BusinessItemAccordion = function BusinessItemAccordion(props) {
     cartProductUpdated = _useState8[0],
     setCartProductUpdated = _useState8[1];
   var isBusinessChangeEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$cart_change_ = configs.cart_change_business_validation) === null || _configs$cart_change_ === void 0 ? void 0 : _configs$cart_change_.value) === '1';
+  var checkoutMultiBusinessEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$checkout_mul = configs.checkout_multi_business_enabled) === null || _configs$checkout_mul === void 0 ? void 0 : _configs$checkout_mul.value) === '1';
   var content = (0, _react.useRef)(null);
   var businessStore = (0, _react.useRef)(null);
   var businessDelete = (0, _react.useRef)(null);
@@ -200,7 +201,7 @@ var BusinessItemAccordion = function BusinessItemAccordion(props) {
     ref: changeStore,
     onClick: handleChangeStore,
     className: "change-store"
-  }, t('CHANGE_STORE', 'Change store')))), props.children), !setActive && !isClosed && !!isProducts && !checkoutButtonDisabled && !isMultiCheckout && /*#__PURE__*/_react.default.createElement(_styles.PriceContainer, null, /*#__PURE__*/_react.default.createElement("h4", null, parsePrice(total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, t('CHANGE_STORE', 'Change store')))), props.children), !setActive && !isClosed && !!isProducts && !checkoutButtonDisabled && !isMultiCheckout && !checkoutMultiBusinessEnabled && /*#__PURE__*/_react.default.createElement(_styles.PriceContainer, null, /*#__PURE__*/_react.default.createElement("h4", null, parsePrice(total)), /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     onClick: handleClickCheckout,
     color: "primary"
   }, t('CHECKOUT', 'Checkout')))), (_props$afterComponent = props.afterComponents) === null || _props$afterComponent === void 0 ? void 0 : _props$afterComponent.map(function (AfterComponent, i) {

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

@@ -32,7 +32,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
   var isSkeleton = props.isSkeleton,
     categories = props.categories,
     featured = props.featured,
@@ -43,6 +43,9 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
     useKioskApp = props.useKioskApp,
     isProfessional = props.isProfessional;
   var theme = (0, _styledComponents.useTheme)();
+  var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
+    _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
+    orderingTheme = _useOrderingTheme2[0];
   var _useState = (0, _react.useState)({
       id: null
     }),
@@ -50,6 +53,7 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
     selectedCategory = _useState2[0],
     setSelectedCateogry = _useState2[1];
   var scrollTopSpan = 60;
+  var isChew = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.header) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.layout) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.type) === null || _orderingTheme$theme$4 === void 0 ? void 0 : _orderingTheme$theme$4.toLowerCase()) === 'chew';
   var handleChangeCategory = function handleChangeCategory(category) {
     var _document$getElementB, _document$getElementB2;
     var isBlockScroll = window.location.search.includes('category') && window.location.search.includes('product');
@@ -131,12 +135,13 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
   (0, _react.useEffect)(function () {
     if (typeof useKioskApp === 'undefined') return;
     var styleSheet = document.getElementById('styles').sheet;
+    var disabledCustomWidth = isChew;
     var style0 = '.sticky-prod-cat {';
     style0 += 'position: fixed !important;';
     style0 += 'top: 0px !important;';
     style0 += 'left: 0px !important;';
     style0 += 'padding: 5px 5px 0px 5px !important;';
-    style0 += "width: calc(100% - ".concat(useKioskApp ? '50px' : '155px', ") !important;");
+    !disabledCustomWidth && (style0 += "width: calc(100% - ".concat(useKioskApp ? '50px' : '155px', ") !important;"));
     style0 += '}';
     var style1 = '.sticky-search {';
     style1 += 'position: fixed !important;';
@@ -152,7 +157,7 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
     return function () {
       return window.removeEventListener('scroll', handleScroll);
     };
-  }, [useKioskApp]);
+  }, [useKioskApp, isChew]);
   (0, _react.useEffect)(function () {
     var _business$professiona;
     if ((business === null || business === void 0 ? void 0 : (_business$professiona = business.professionals) === null || _business$professiona === void 0 ? void 0 : _business$professiona.length) > 0 && !useKioskApp) {

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

@@ -34,7 +34,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var BusinessProductsListUI = function BusinessProductsListUI(props) {
-  var _configs$use_parent_c, _configs$use_parent_c2, _categoryState$produc, _props$beforeElements, _props$beforeComponen, _category$subcategori2, _productsCategorySele, _category$subcategori3, _category$subcategori4, _category$subcategori5, _categoryState$produc2, _categoryState$produc3, _props$afterComponent, _props$afterElements;
+  var _configs$use_parent_c, _configs$use_parent_c2, _categoryState$produc, _props$beforeElements, _props$beforeComponen, _category$subcategori2, _category$subcategori3, _category$subcategori4, _category$subcategori5, _categoryState$produc2, _categoryState$produc3, _categoryState$produc4, _props$afterComponent, _props$afterElements;
   var errors = props.errors,
     businessId = props.businessId,
     isLazy = props.isLazy,
@@ -136,9 +136,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
     }, props));
   }), /*#__PURE__*/_react.default.createElement(_styles.ProductsContainer, null, (category === null || category === void 0 ? void 0 : category.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.HeaderWrapper, null, (category === null || category === void 0 ? void 0 : (_category$subcategori2 = category.subcategories) === null || _category$subcategori2 === void 0 ? void 0 : _category$subcategori2.length) > 0 && !isSearchMode && /*#__PURE__*/_react.default.createElement(SubcategoriesComponent, {
     category: category
-  })), /*#__PURE__*/_react.default.createElement(_styles.ProductsListing, null, productsCategorySelected === null || productsCategorySelected === void 0 ? void 0 : (_productsCategorySele = productsCategorySelected.filter(function (product) {
-    return (product === null || product === void 0 ? void 0 : product.category_id) === (category === null || category === void 0 ? void 0 : category.id);
-  })) === null || _productsCategorySele === void 0 ? void 0 : _productsCategorySele.map(function (product, i) {
+  })), /*#__PURE__*/_react.default.createElement(_styles.ProductsListing, null, productsCategorySelected.map(function (product, i) {
     var _currentCart$products;
     return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
       key: i,
@@ -158,14 +156,14 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       return (product === null || product === void 0 ? void 0 : product.category_id) === (subcategory === null || subcategory === void 0 ? void 0 : subcategory.id);
     });
   })) === null || _category$subcategori5 === void 0 ? void 0 : _category$subcategori5.map(function (subcategory) {
-    var _productsCategorySele2;
+    var _productsCategorySele;
     return /*#__PURE__*/_react.default.createElement(_styles.SubcategorySearchContainer, {
       key: subcategory === null || subcategory === void 0 ? void 0 : subcategory.id
     }, /*#__PURE__*/_react.default.createElement("h4", null, subcategory === null || subcategory === void 0 ? void 0 : subcategory.name), /*#__PURE__*/_react.default.createElement(_styles.ProductsListing, {
       isSubcategorySearch: true
-    }, productsCategorySelected === null || productsCategorySelected === void 0 ? void 0 : (_productsCategorySele2 = productsCategorySelected.filter(function (product) {
+    }, productsCategorySelected === null || productsCategorySelected === void 0 ? void 0 : (_productsCategorySele = productsCategorySelected.filter(function (product) {
       return (product === null || product === void 0 ? void 0 : product.category_id) === (subcategory === null || subcategory === void 0 ? void 0 : subcategory.id);
-    })) === null || _productsCategorySele2 === void 0 ? void 0 : _productsCategorySele2.map(function (product, i) {
+    })) === null || _productsCategorySele === void 0 ? void 0 : _productsCategorySele.map(function (product, i) {
       var _currentCart$products2;
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
         key: i,
@@ -200,18 +198,30 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
         return productsLength + ((Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.id) === (product === null || product === void 0 ? void 0 : product.id) ? Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.quantity : 0);
       }, 0)
     });
+  }), !(categoryState !== null && categoryState !== void 0 && categoryState.loading) && (categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc4 = categoryState.products) === null || _categoryState$produc4 === void 0 ? void 0 : _categoryState$produc4.length) > 9 && /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
+    useCustomFunctionality: true,
+    onCustomClick: function onCustomClick() {
+      return onClickCategory(category);
+    },
+    isCartOnProductsList: isCartOnProductsList,
+    handleUpdateProducts: handleUpdateProducts,
+    customText: t('MORE', 'More'),
+    customStyle: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
   })))), !(category !== null && category !== void 0 && category.id) && categories.filter(function (category) {
     return (category === null || category === void 0 ? void 0 : category.id) !== null;
   }).map(function (category, i, _categories) {
-    var _categoryState$produc4, _categoryState$produc5, _categoryState$produc6, _categoryState$produc7, _category$description, _category$description2, _category$subcategori6, _category$subcategori7, _category$ribbon, _category$ribbon2, _category$ribbon3, _category$ribbon4, _category$ribbon5, _headerRef$current, _category$description3, _category$subcategori8, _category$subcategori9, _products$filter, _category$subcategori10, _category$subcategori11, _category$subcategori12;
-    var _products = !isUseParentCategory ? (_categoryState$produc4 = categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc5 = categoryState.products) === null || _categoryState$produc5 === void 0 ? void 0 : _categoryState$produc5.filter(function (product) {
+    var _categoryState$produc5, _categoryState$produc6, _categoryState$produc7, _categoryState$produc8, _category$description, _category$description2, _category$subcategori6, _category$subcategori7, _category$ribbon, _category$ribbon2, _category$ribbon3, _category$ribbon4, _category$ribbon5, _headerRef$current, _category$description3, _category$subcategori8, _category$subcategori9, _products$filter, _category$subcategori10, _category$subcategori11, _category$subcategori12;
+    var _products = !isUseParentCategory ? (_categoryState$produc5 = categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc6 = categoryState.products) === null || _categoryState$produc6 === void 0 ? void 0 : _categoryState$produc6.filter(function (product) {
       return (product === null || product === void 0 ? void 0 : product.category_id) === (category === null || category === void 0 ? void 0 : category.id);
-    })) !== null && _categoryState$produc4 !== void 0 ? _categoryState$produc4 : [] : (_categoryState$produc6 = categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc7 = categoryState.products) === null || _categoryState$produc7 === void 0 ? void 0 : _categoryState$produc7.filter(function (product) {
+    })) !== null && _categoryState$produc5 !== void 0 ? _categoryState$produc5 : [] : (_categoryState$produc7 = categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc8 = categoryState.products) === null || _categoryState$produc8 === void 0 ? void 0 : _categoryState$produc8.filter(function (product) {
       var _category$children;
       return category === null || category === void 0 ? void 0 : (_category$children = category.children) === null || _category$children === void 0 ? void 0 : _category$children.some(function (cat) {
         return cat.category_id === (product === null || product === void 0 ? void 0 : product.category_id);
       });
-    })) !== null && _categoryState$produc6 !== void 0 ? _categoryState$produc6 : [];
+    })) !== null && _categoryState$produc7 !== void 0 ? _categoryState$produc7 : [];
     var products = (subcategoriesSelected === null || subcategoriesSelected === void 0 ? void 0 : subcategoriesSelected.length) > 0 ? _products === null || _products === void 0 ? void 0 : _products.filter(function (product) {
       return !(subcategoriesSelected !== null && subcategoriesSelected !== void 0 && subcategoriesSelected.find(function (subcategory) {
         return (subcategory === null || subcategory === void 0 ? void 0 : subcategory.parent_category_id) === (category === null || category === void 0 ? void 0 : category.id);
@@ -249,8 +259,8 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       category: category
     })), /*#__PURE__*/_react.default.createElement(_styles.ProductsListing, {
       isSubcategorySearch: isSubcategorySearch
-    }, isSearchMode && (category === null || category === void 0 ? void 0 : (_category$subcategori9 = category.subcategories) === null || _category$subcategori9 === void 0 ? void 0 : _category$subcategori9.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products === null || products === void 0 ? void 0 : (_products$filter = products.filter(function (product) {
-      return (product === null || product === void 0 ? void 0 : product.category_id) === (category === null || category === void 0 ? void 0 : category.id);
+    }, isSearchMode && (category === null || category === void 0 ? void 0 : (_category$subcategori9 = category.subcategories) === null || _category$subcategori9 === void 0 ? void 0 : _category$subcategori9.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products === null || products === void 0 ? void 0 : (_products$filter = products.filter(function (product, i) {
+      return i < 9 && (product === null || product === void 0 ? void 0 : product.category_id) === (category === null || category === void 0 ? void 0 : category.id);
     })) === null || _products$filter === void 0 ? void 0 : _products$filter.map(function (product, i) {
       var _currentCart$products4;
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
@@ -266,7 +276,21 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
           return productsLength + ((Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.id) === (product === null || product === void 0 ? void 0 : product.id) ? Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.quantity : 0);
         }, 0)
       });
-    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products.map(function (product, i) {
+    }), !(categoryState !== null && categoryState !== void 0 && categoryState.loading) && (products === null || products === void 0 ? void 0 : products.length) > 9 && /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
+      useCustomFunctionality: true,
+      onCustomClick: function onCustomClick() {
+        return onClickCategory(category);
+      },
+      isCartOnProductsList: isCartOnProductsList,
+      handleUpdateProducts: handleUpdateProducts,
+      customText: t('MORE', 'More'),
+      customStyle: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products.filter(function (_, i) {
+      return i < 9;
+    }).map(function (product, i) {
       var _currentCart$products5;
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
         key: i,
@@ -281,6 +305,18 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
           return productsLength + ((Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.id) === (product === null || product === void 0 ? void 0 : product.id) ? Cproduct === null || Cproduct === void 0 ? void 0 : Cproduct.quantity : 0);
         }, 0)
       });
+    }), !(categoryState !== null && categoryState !== void 0 && categoryState.loading) && (products === null || products === void 0 ? void 0 : products.length) > 9 && /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
+      useCustomFunctionality: true,
+      onCustomClick: function onCustomClick() {
+        return onClickCategory(category);
+      },
+      isCartOnProductsList: isCartOnProductsList,
+      handleUpdateProducts: handleUpdateProducts,
+      customText: t('MORE', 'More'),
+      customStyle: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
     })), categoryState.loading && i + 1 === _categories.length && _toConsumableArray(Array(categoryState.pagination.nextPageItems).keys()).map(function (i) {
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
         key: "skeleton:".concat(i),

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

@@ -25,6 +25,7 @@ var _Confirm = require("../../../../../components/Confirm");
 var _FloatingButton = require("../../../../../components/FloatingButton");
 var _UpsellingPage = require("../../../../../components/UpsellingPage");
 var _ServiceForm = require("../ServiceForm");
+var _OrderContextUI = require("../OrderContextUI");
 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; }
@@ -385,11 +386,17 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
       adjustBusiness(adjustBusinessId);
     }
   }, [currentCart]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ProductsContainer, null, !props.useKioskApp && /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowLeft, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.ProductsContainer, null, !props.useKioskApp &&
+  /*#__PURE__*/
+  // <ArrowLeft onClick={() => handleGoToBusinessList()} />
+  _react.default.createElement(_styles.HeaderContent, null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowLeft, {
+    className: "back-arrow",
     onClick: function onClick() {
       return handleGoToBusinessList();
     }
-  }), /*#__PURE__*/_react.default.createElement(_RenderProductsLayout.RenderProductsLayout, {
+  }), (windowSize === null || windowSize === void 0 ? void 0 : windowSize.width) < 576 && /*#__PURE__*/_react.default.createElement(_styles.OrderContextUIWrapper, null, /*#__PURE__*/_react.default.createElement(_OrderContextUI.OrderContextUI, {
+    isCheckOut: true
+  }))), /*#__PURE__*/_react.default.createElement(_RenderProductsLayout.RenderProductsLayout, {
     errors: errors,
     isError: error,
     isLoading: loading,

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

@@ -4,15 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.SkeletonItem = exports.ProductsContainer = exports.ProductLoading = exports.MobileCartViewWrapper = exports.EmptyCart = exports.EmptyBtnWrapper = exports.BusinessCartContent = void 0;
+exports.Title = exports.SkeletonItem = exports.ProductsContainer = exports.ProductLoading = exports.OrderContextUIWrapper = exports.MobileCartViewWrapper = exports.HeaderContent = exports.EmptyCart = exports.EmptyBtnWrapper = exports.BusinessCartContent = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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 ProductsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 95%;\n  margin: 20px auto 0px;\n  > svg {\n    color: ", ";\n    font-size: 24px;\n    cursor: pointer;\n    margin-bottom: 5px;\n  }\n"])), function (props) {
-  return props.theme.colors.headingColor;
-});
+var ProductsContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 95%;\n  margin: 20px auto 0px;\n"])));
 exports.ProductsContainer = ProductsContainer;
 var ProductLoading = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 exports.ProductLoading = ProductLoading;
@@ -37,4 +35,10 @@ exports.Title = Title;
 var EmptyBtnWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 20px;\n\n  span {\n    font-weight: 600;\n    font-size: 16px;\n    color: ", ";\n  }\n\n  button {\n    color: #748194;\n    background: #F8F9FA;\n    border: 1px solid #F8F9FA;\n    border-radius: 7.6px;\n    height: 44px;\n    font-size: 14px;\n    padding-left: 25px;\n    padding-right: 25px;\n  }\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 });
-exports.EmptyBtnWrapper = EmptyBtnWrapper;
+exports.EmptyBtnWrapper = EmptyBtnWrapper;
+var HeaderContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 10px;\n  .back-arrow {\n    font-size: 24px;\n    cursor: pointer;\n  }\n"])));
+exports.HeaderContent = HeaderContent;
+var OrderContextUIWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  flex: 1;\n  width: 100%;\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 15px;\n  "])));
+});
+exports.OrderContextUIWrapper = OrderContextUIWrapper;