ordering-ui-external 1.9.3 → 1.9.4

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

@@ -13,10 +13,6 @@ var _Cart = require("../Cart");
 var _Buttons = require("../../styles/Buttons");
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -24,7 +20,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 CartContent = function CartContent(props) {
-  var _configs$checkout_mul, _Object$values, _theme$images, _theme$images$general;
+  var _configs$checkout_mul, _theme$images, _theme$images$general;
   var carts = props.carts,
     isOrderStateCarts = props.isOrderStateCarts,
     isCartPopover = props.isCartPopover,
@@ -50,10 +46,6 @@ var CartContent = function CartContent(props) {
     currentCartUuid = _useState2[0],
     setCurrentCartUuid = _useState2[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 openCarts = ((_Object$values = Object.values(orderState === null || orderState === void 0 ? void 0 : orderState.carts)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (cart) {
-    var _cart$products;
-    return (cart === null || cart === void 0 ? void 0 : cart.products) && (cart === null || cart === void 0 ? void 0 : (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.length) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && (cart === null || cart === void 0 ? void 0 : cart.valid_schedule) && (cart === null || cart === void 0 ? void 0 : cart.valid_products) && (cart === null || cart === void 0 ? void 0 : cart.valid_address) && (cart === null || cart === void 0 ? void 0 : cart.valid_maximum) && (cart === null || cart === void 0 ? void 0 : cart.valid_minimum) && !(cart !== null && cart !== void 0 && cart.wallets);
-  })) || null || [];
   var handleAddProduct = function handleAddProduct(product, cart) {
     setCurrentCartUuid(cart === null || cart === void 0 ? void 0 : cart.uuid);
   };
@@ -62,76 +54,37 @@ var CartContent = function CartContent(props) {
     props.onClose && props.onClose();
   };
   var handleClickCheckout = function handleClickCheckout() {
-    var _cart$group2, _Object$values$filter, _Object$values$filter2;
-    var cart = carts.find(function (cart) {
-      var _cart$group;
-      return cart === null || cart === void 0 ? void 0 : (_cart$group = cart.group) === null || _cart$group === void 0 ? void 0 : _cart$group.uuid;
-    });
-    var cartSelectedHasGroup = cart === null || cart === void 0 ? void 0 : (_cart$group2 = cart.group) === null || _cart$group2 === void 0 ? void 0 : _cart$group2.uuid;
-    var cartFilterValidation = function cartFilterValidation(cart) {
+    var _Object$values;
+    var cartsAvailable = (_Object$values = Object.values(orderState === null || orderState === void 0 ? void 0 : orderState.carts)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (cart) {
       return (cart === null || cart === void 0 ? void 0 : cart.valid) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2;
-    };
-    var cartsGroupLength = cartSelectedHasGroup ? (_Object$values$filter = Object.values(orderState.carts).filter(function (_cart) {
-      var _cart$group3;
-      return (_cart === null || _cart === void 0 ? void 0 : (_cart$group3 = _cart.group) === null || _cart$group3 === void 0 ? void 0 : _cart$group3.uuid) === cartSelectedHasGroup && cartFilterValidation(_cart);
-    })) === null || _Object$values$filter === void 0 ? void 0 : _Object$values$filter.length : 0;
-    if (cartsGroupLength > 1 && checkoutMultiBusinessEnabled) {
-      var _cart$group4;
-      events.emit('go_to_page', {
-        page: 'multi_checkout',
-        params: {
-          cartUuid: cart === null || cart === void 0 ? void 0 : (_cart$group4 = cart.group) === null || _cart$group4 === void 0 ? void 0 : _cart$group4.uuid
-        }
-      });
-      events.emit('cart_popover_closed');
-      return;
-    }
-    var cartGroupsCount = {};
-    // eslint-disable-next-line no-unused-expressions
-    (_Object$values$filter2 = Object.values(orderState.carts).filter(function (_cart) {
-      return cartFilterValidation(_cart);
-    })) === null || _Object$values$filter2 === void 0 ? void 0 : _Object$values$filter2.forEach(function (_cart) {
-      var _cart$group5;
-      if (cartGroupsCount[_cart === null || _cart === void 0 ? void 0 : (_cart$group5 = _cart.group) === null || _cart$group5 === void 0 ? void 0 : _cart$group5.uuid]) {
-        var _cart$group6;
-        cartGroupsCount[_cart === null || _cart === void 0 ? void 0 : (_cart$group6 = _cart.group) === null || _cart$group6 === void 0 ? void 0 : _cart$group6.uuid] += 1;
-      } else {
-        var _cart$group7;
-        cartGroupsCount[_cart === null || _cart === void 0 ? void 0 : (_cart$group7 = _cart.group) === null || _cart$group7 === void 0 ? void 0 : _cart$group7.uuid] = 1;
-      }
-    });
-    var groupForTheCart;
-    var groupForAddCartArray = Object.keys(cartGroupsCount).filter(function (cartGroupUuid) {
-      return cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5;
-    });
-    var max = Math.max.apply(Math, _toConsumableArray(groupForAddCartArray.map(function (uuid) {
-      return cartGroupsCount[uuid];
-    })));
-    var indexes = groupForAddCartArray.filter(function (uuid) {
-      return cartGroupsCount[uuid] === max;
     });
-    if ((indexes === null || indexes === void 0 ? void 0 : indexes.length) > 1) {
-      groupForTheCart = indexes.find(function (uuid) {
-        return uuid !== 'undefined';
-      });
-    } else {
-      groupForTheCart = indexes[0];
-    }
-    if (checkoutMultiBusinessEnabled && (openCarts === null || openCarts === void 0 ? void 0 : openCarts.length) > 1 && groupForTheCart) {
+    if (cartsAvailable.length === 1) {
+      var _cartsAvailable$;
       events.emit('go_to_page', {
-        page: 'multi_cart',
+        page: 'checkout',
         params: {
-          cartUuid: cart === null || cart === void 0 ? void 0 : cart.uuid,
-          cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart
+          cartUuid: (_cartsAvailable$ = cartsAvailable[0]) === null || _cartsAvailable$ === void 0 ? void 0 : _cartsAvailable$.uuid
         }
       });
     } else {
-      events.emit('go_to_page', {
-        page: 'checkout',
-        params: {
-          cartUuid: cart === null || cart === void 0 ? void 0 : cart.uuid
-        }
+      var groupKeys = {};
+      cartsAvailable.forEach(function (_cart) {
+        var _cart$group, _cart$group2, _cart$group$uuid, _cart$group3;
+        groupKeys[_cart === null || _cart === void 0 ? void 0 : (_cart$group = _cart.group) === null || _cart$group === void 0 ? void 0 : _cart$group.uuid] ? groupKeys[_cart === null || _cart === void 0 ? void 0 : (_cart$group2 = _cart.group) === null || _cart$group2 === void 0 ? void 0 : _cart$group2.uuid] += 1 : groupKeys[(_cart$group$uuid = _cart === null || _cart === void 0 ? void 0 : (_cart$group3 = _cart.group) === null || _cart$group3 === void 0 ? void 0 : _cart$group3.uuid) !== null && _cart$group$uuid !== void 0 ? _cart$group$uuid : 'null'] = 1;
       });
+      if (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null' || Object.keys(groupKeys).length > 1) {
+        events.emit('go_to_page', {
+          page: 'multi_cart'
+        });
+      } else {
+        var _cartsAvailable$2, _cartsAvailable$2$gro;
+        events.emit('go_to_page', {
+          page: 'multi_checkout',
+          params: {
+            cartUuid: (_cartsAvailable$2 = cartsAvailable[0]) === null || _cartsAvailable$2 === void 0 ? void 0 : (_cartsAvailable$2$gro = _cartsAvailable$2.group) === null || _cartsAvailable$2$gro === void 0 ? void 0 : _cartsAvailable$2$gro.uuid
+          }
+        });
+      }
     }
     events.emit('cart_popover_closed');
     props.onClose && props.onClose();
@@ -144,7 +97,7 @@ var CartContent = function CartContent(props) {
       events.off('cart_product_added', handleAddProduct);
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, !isSlideBar && /*#__PURE__*/_react.default.createElement(_styles.WrapperContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('YOUR_CART', 'Your cart')), checkoutMultiBusinessEnabled && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Container, null, !isSlideBar && /*#__PURE__*/_react.default.createElement(_styles.WrapperContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('YOUR_CART', 'Your cart')), checkoutMultiBusinessEnabled && (carts === null || carts === void 0 ? void 0 : carts.length) > 0 && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     onClick: handleClickCheckout,
     color: "primary"
   }, t('CHECKOUT', 'Checkout'))), isOrderStateCarts && (carts === null || carts === void 0 ? void 0 : carts.length) > 0 && carts.map(function (cart) {

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

@@ -95,8 +95,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     alertState = _useState6[0],
     setAlertState = _useState6[1];
-  var maximumCarts = 5;
-  var isDisablePlaceOrderButton = !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_id || paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.wallet_id) || openCarts.length > maximumCarts || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa = paymethodSelected.paymethod) === null || _paymethodSelected$pa === void 0 ? void 0 : _paymethodSelected$pa.gateway) === 'stripe' && !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_data);
+  var isDisablePlaceOrderButton = !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_id || paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.wallet_id) || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa = paymethodSelected.paymethod) === null || _paymethodSelected$pa === void 0 ? void 0 : _paymethodSelected$pa.gateway) === 'stripe' && !(paymethodSelected !== null && paymethodSelected !== void 0 && paymethodSelected.paymethod_data);
   var walletCarts = ((_Object$values = Object.values(orderState === null || orderState === void 0 ? void 0 : orderState.carts)) === null || _Object$values === void 0 ? void 0 : _Object$values.filter(function (cart) {
     var _cart$products;
     return (cart === null || cart === void 0 ? void 0 : cart.products) && (cart === null || cart === void 0 ? void 0 : (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.length) && (cart === null || cart === void 0 ? void 0 : cart.status) !== 2 && (cart === null || cart === void 0 ? void 0 : cart.valid_schedule) && (cart === null || cart === void 0 ? void 0 : cart.valid_products) && (cart === null || cart === void 0 ? void 0 : cart.valid_address) && (cart === null || cart === void 0 ? void 0 : cart.valid_maximum) && (cart === null || cart === void 0 ? void 0 : cart.valid_minimum) && (cart === null || cart === void 0 ? void 0 : cart.wallets);
@@ -232,7 +231,7 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
     color: "primary",
     disabled: isDisablePlaceOrderButton || placing || (cartGroup === null || cartGroup === void 0 ? void 0 : cartGroup.loading),
     onClick: handlePlaceOrder
-  }, placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order'))), openCarts.length > maximumCarts && /*#__PURE__*/_react.default.createElement(_styles.WarningText, null, t('WARNING_MAXIMUM_CARTS', 'You can only pay for a maximum of 5 carts, please discard one or more to continue.'))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
+  }, placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
     title: t('CHECKOUT ', 'Checkout'),
     content: alertState.content,
     acceptText: t('ACCEPT', 'Accept'),

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

@@ -58,6 +58,12 @@ var MultiOrdersDetailsUI = function MultiOrdersDetailsUI(props) {
     _useState2 = _slicedToArray(_useState, 2),
     alertState = _useState2[0],
     setAlertState = _useState2[1];
+  var isTaxIncludedOnPrice = orders.every(function (_order) {
+    var _order$taxes, _order$taxes2;
+    return (_order$taxes = _order.taxes) !== null && _order$taxes !== void 0 && _order$taxes.length ? (_order$taxes2 = _order.taxes) === null || _order$taxes2 === void 0 ? void 0 : _order$taxes2.every(function (_tax) {
+      return _tax.type === 1;
+    }) : true;
+  });
   var walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet')
@@ -109,7 +115,7 @@ var MultiOrdersDetailsUI = function MultiOrdersDetailsUI(props) {
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: order.id
     }, /*#__PURE__*/_react.default.createElement("td", null, t('ORDER', 'Order'), " #", order.id), /*#__PURE__*/_react.default.createElement("td", null, parsePrice((_order$summary$total = order === null || order === void 0 ? void 0 : (_order$summary = order.summary) === null || _order$summary === void 0 ? void 0 : _order$summary.total) !== null && _order$summary$total !== void 0 ? _order$summary$total : order === null || order === void 0 ? void 0 : order.total)));
-  }))), /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('TOTAL_BEFORE_TAX', 'Total before tax'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.subtotal))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.tax))))), /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('PAYMENT_TOTAL', 'Payment total'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.total))))))), loading ? _toConsumableArray(Array(3).keys()).map(function (i) {
+  }))), !isTaxIncludedOnPrice && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('TOTAL_BEFORE_TAX', 'Total before tax'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.subtotal))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.tax)))))), /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, t('PAYMENT_TOTAL', 'Payment total'), ":"), /*#__PURE__*/_react.default.createElement("td", null, parsePrice(ordersSummary === null || ordersSummary === void 0 ? void 0 : ordersSummary.total))))))), loading ? _toConsumableArray(Array(3).keys()).map(function (i) {
     return /*#__PURE__*/_react.default.createElement(_styles.SingleOrderContainer, {
       key: i
     }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {

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

@@ -411,6 +411,7 @@ var OrdersOptionUI = function OrdersOptionUI(props) {
       return (0, _moment3.default)(b === null || b === void 0 ? void 0 : b.delivery_datetime_utc).valueOf() - (0, _moment3.default)(a === null || a === void 0 ? void 0 : a.delivery_datetime_utc).valueOf();
     }),
     pagination: pagination,
+    customArray: customArray,
     loadMoreOrders: loadMoreOrders,
     onRedirectPage: onRedirectPage,
     getOrderStatus: getOrderStatus,
@@ -452,7 +453,7 @@ var OrdersOption = function OrdersOption(props) {
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,
-      pageSize: 3,
+      pageSize: getAllOrders || props.activeOrders ? 30 : 10,
       controlType: 'infinity'
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -86,7 +86,7 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "1.9.1",
+    "ordering-components-external": "1.9.2",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/BusinessesListing/index.js

@@ -94,9 +94,7 @@ const BusinessesListingUI = (props) => {
   }, [mapErrors])
 
   useEffect(() => {
-    if (orderState.loading && businessesList.loading) {
-    //  const newurl = window.location.protocol + '//' + window.location.host + window.location.pathname
-    //  window.history.pushState({ path: newurl }, '', newurl)
+    if (orderState.loading || businessesList.loading) {
       const params = new URLSearchParams()
       history.replace({ pathname: location.pathname, search: params.toString() })
       setPrevPage({ loading: true, page: 1 })

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

@@ -25,7 +25,9 @@ const SingleOrderCardUI = (props) => {
     reorderLoading,
     orderID,
     handleFavoriteOrder,
-    setOrderSelected
+    setOrderSelected,
+    onRedirectPage,
+    customArray
   } = props
 
   const theme = useTheme()
@@ -36,8 +38,17 @@ const SingleOrderCardUI = (props) => {
     handleFavoriteOrder && handleFavoriteOrder(!order?.favorite)
   }
 
+  const handleClickCard = (e, order) => {
+    if (e.target.closest('.favorite') || e.target.closest('.review') || e.target.closest('.reorder')) return
+    const params = {
+      [customArray ? 'cartUuid' : 'orderId']: customArray ? order.uuid : order?.cart_group_id ?? order.uuid
+    }
+    const page = customArray ? 'checkout' : order?.cart_group_id ? 'multi_orders' : 'order_detail'
+    onRedirectPage({ page, params })
+  }
+
   return (
-    <SingleCard key={order.id} id='order-card'>
+    <SingleCard key={order.id} id='order-card' onClick={(e) => handleClickCard(e, order)}>
       <OrderPastContent>
         {(order.business?.logo || theme.images?.dummies?.businessLogo) && (
           <>

package/src/components/VerticalOrdersLayout/styles.js

@@ -6,7 +6,11 @@ export const SingleCard = styled.div`
   display: flex;
   max-height: 100px;
   height: auto;
+  border-radius: 16px;
+  padding: 10px;
+  transition: all 0.3s ease;
   border-bottom: 1px solid #F5F6F6;
+  cursor: pointer;
 
   ${props => (
     props.theme.colors.backgroundPage === '#FFF' ||
@@ -24,6 +28,10 @@ export const SingleCard = styled.div`
       border-top: none !important;
     `}
   }
+
+  &:hover {
+    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
+  }
 `
 
 export const OrderPastContent = styled.div`

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

@@ -100,6 +100,8 @@ export const BusinessListingSearchUI = (props) => {
   ]
 
   const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
+  const currentCart = Object.values(orderState?.carts).find(cart => cart?.business?.slug === curProduct?.business?.slug) ?? {}
+
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -420,11 +422,13 @@ export const BusinessListingSearchUI = (props) => {
           <ProductForm
             businessSlug={curProduct?.business?.slug}
             useKioskApp={props?.useKioskApp}
+            product={curProduct?.product}
             businessId={curProduct?.business?.id}
             categoryId={curProduct?.product?.category_id}
             productId={curProduct?.product?.id}
             onSave={handleRedirectToCart}
             handleUpdateProducts={(productId, changes) => handleUpdateProducts(productId, curProduct?.product?.category_id, curProduct?.business?.id, changes)}
+            productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === curProduct?.id ? Cproduct?.quantity : 0) }, 0) || 0}
           />
         )}
       </Modal>