ordering-ui-external 10.4.0 → 10.4.1

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, _category$subcategori3, _category$subcategori4, _categoryState$produc2, _categoryState$produc3, _categoryState$produc4, _categoryState$produc9, _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, _headerRef$current, _categoryState$produc2, _categoryState$produc3, _categoryState$produc4, _categoryState$produc9, _props$afterComponent, _props$afterElements;
   var errors = props.errors,
     businessId = props.businessId,
     isLazy = props.isLazy,
@@ -56,7 +56,8 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
     onClickCategory = props.onClickCategory,
     handleUpdateProducts = props.handleUpdateProducts,
     isSearchMode = props.isSearchMode,
-    business = props.business;
+    business = props.business,
+    previouslyProducts = props.previouslyProducts;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -180,12 +181,33 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
         }, 0)
       });
     })));
-  }))), !(category !== null && category !== void 0 && category.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, featured && (categoryState === null || categoryState === void 0 || (_categoryState$produc2 = categoryState.products) === null || _categoryState$produc2 === void 0 ? void 0 : _categoryState$produc2.find(function (product) {
+  }))), !(category !== null && category !== void 0 && category.id) && (previouslyProducts === null || previouslyProducts === void 0 ? void 0 : previouslyProducts.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.WrapAllCategories, {
+    id: "previously_block"
+  }, /*#__PURE__*/_react.default.createElement("h3", null, t('ORDER_IT_AGAIN', 'Order it again')), /*#__PURE__*/_react.default.createElement(_styles.CategoryDescription, {
+    maxWidth: headerRef === null || headerRef === void 0 || (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.clientWidth
+  }, /*#__PURE__*/_react.default.createElement("p", null, t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.'))), /*#__PURE__*/_react.default.createElement(_styles.PreviouslyOrderedContainer, null, /*#__PURE__*/_react.default.createElement(_styles.PreviouslyOrderedWrapper, null, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
+    scrollId: "previously_ordered"
+  }, previouslyProducts === null || previouslyProducts === void 0 ? void 0 : previouslyProducts.map(function (product, i) {
+    var _currentCart$products3;
+    return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
+      key: i,
+      isSoldOut: product.inventoried && !product.quantity,
+      product: product,
+      useKioskApp: useKioskApp,
+      businessId: businessId,
+      onProductClick: onProductClick,
+      isCartOnProductsList: isCartOnProductsList,
+      handleUpdateProducts: handleUpdateProducts,
+      productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products3 = currentCart.products) === null || _currentCart$products3 === void 0 ? void 0 : _currentCart$products3.reduce(function (productsLength, Cproduct) {
+        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)
+    });
+  }))))), !(category !== null && category !== void 0 && category.id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, featured && (categoryState === null || categoryState === void 0 || (_categoryState$produc2 = categoryState.products) === null || _categoryState$produc2 === void 0 ? void 0 : _categoryState$produc2.find(function (product) {
     return product.featured;
   })) && /*#__PURE__*/_react.default.createElement(_styles.WrapAllCategories, {
     id: "categoryfeatured"
   }, /*#__PURE__*/_react.default.createElement("h3", null, t('FEATURED', 'Featured')), /*#__PURE__*/_react.default.createElement(_styles.ProductsListing, null, (_categoryState$produc3 = categoryState.products) === null || _categoryState$produc3 === void 0 ? void 0 : _categoryState$produc3.map(function (product, i) {
-    var _currentCart$products3;
+    var _currentCart$products4;
     return product.featured && /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
       key: i,
       isSoldOut: product.inventoried && !product.quantity,
@@ -195,7 +217,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       onProductClick: onProductClick,
       isCartOnProductsList: isCartOnProductsList,
       handleUpdateProducts: handleUpdateProducts,
-      productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products3 = currentCart.products) === null || _currentCart$products3 === void 0 ? void 0 : _currentCart$products3.reduce(function (productsLength, Cproduct) {
+      productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products4 = currentCart.products) === null || _currentCart$products4 === void 0 ? void 0 : _currentCart$products4.reduce(function (productsLength, Cproduct) {
         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)
     });
@@ -214,7 +236,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
   })))), !(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$produc5, _categoryState$produc6, _categoryState$produc7, _categoryState$produc8, _category$description, _category$description2, _category$subcategori5, _category$subcategori6, _category$ribbon, _category$ribbon2, _category$ribbon3, _category$ribbon4, _category$ribbon5, _headerRef$current, _category$description3, _category$subcategori7, _category$subcategori8, _products$filter, _category$subcategori9, _category$subcategori10;
+    var _categoryState$produc5, _categoryState$produc6, _categoryState$produc7, _categoryState$produc8, _category$description, _category$description2, _category$subcategori5, _category$subcategori6, _category$ribbon, _category$ribbon2, _category$ribbon3, _category$ribbon4, _category$ribbon5, _headerRef$current2, _category$description3, _category$subcategori7, _category$subcategori8, _products$filter, _category$subcategori9, _category$subcategori10;
     var _products = !isUseParentCategory ? (_categoryState$produc5 = categoryState === null || categoryState === 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$produc5 !== void 0 ? _categoryState$produc5 : [] : (_categoryState$produc7 = categoryState === null || categoryState === void 0 || (_categoryState$produc8 = categoryState.products) === null || _categoryState$produc8 === void 0 ? void 0 : _categoryState$produc8.filter(function (product) {
@@ -254,7 +276,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       isRoundRect: (category === null || category === void 0 || (_category$ribbon3 = category.ribbon) === null || _category$ribbon3 === void 0 ? void 0 : _category$ribbon3.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.rectangleRound),
       isCapsule: (category === null || category === void 0 || (_category$ribbon4 = category.ribbon) === null || _category$ribbon4 === void 0 ? void 0 : _category$ribbon4.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.capsuleShape)
     }, category === null || category === void 0 || (_category$ribbon5 = category.ribbon) === null || _category$ribbon5 === void 0 ? void 0 : _category$ribbon5.text)), (category === null || category === void 0 ? void 0 : category.description) && /*#__PURE__*/_react.default.createElement(_styles.CategoryDescription, {
-      maxWidth: headerRef === null || headerRef === void 0 || (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.clientWidth
+      maxWidth: headerRef === null || headerRef === void 0 || (_headerRef$current2 = headerRef.current) === null || _headerRef$current2 === void 0 ? void 0 : _headerRef$current2.clientWidth
     }, /*#__PURE__*/_react.default.createElement("p", null, shortCategoryDescription), (category === null || category === void 0 || (_category$description3 = category.description) === null || _category$description3 === void 0 ? void 0 : _category$description3.length) > 200 && /*#__PURE__*/_react.default.createElement("span", {
       onClick: function onClick() {
         return setOpenDescription(category);
@@ -266,7 +288,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
     }, isSearchMode && (category === null || category === void 0 || (_category$subcategori8 = category.subcategories) === null || _category$subcategori8 === void 0 ? void 0 : _category$subcategori8.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products === null || products === 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) || (business === null || business === void 0 ? void 0 : business.food);
     })) === null || _products$filter === void 0 ? void 0 : _products$filter.map(function (product, i) {
-      var _currentCart$products4;
+      var _currentCart$products5;
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
         key: i,
         isSoldOut: product.inventoried && !product.quantity,
@@ -276,7 +298,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
         useKioskApp: useKioskApp,
         isCartOnProductsList: isCartOnProductsList,
         handleUpdateProducts: handleUpdateProducts,
-        productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products4 = currentCart.products) === null || _currentCart$products4 === void 0 ? void 0 : _currentCart$products4.reduce(function (productsLength, Cproduct) {
+        productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products5 = currentCart.products) === null || _currentCart$products5 === void 0 ? void 0 : _currentCart$products5.reduce(function (productsLength, Cproduct) {
           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)
       });
@@ -295,7 +317,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
     })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, products.filter(function (_, i) {
       return i < 9 || (business === null || business === void 0 ? void 0 : business.food);
     }).map(function (product, i) {
-      var _currentCart$products5;
+      var _currentCart$products6;
       return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
         key: i,
         isSoldOut: product.inventoried && !product.quantity,
@@ -305,7 +327,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
         useKioskApp: useKioskApp,
         isCartOnProductsList: isCartOnProductsList,
         handleUpdateProducts: handleUpdateProducts,
-        productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products5 = currentCart.products) === null || _currentCart$products5 === void 0 ? void 0 : _currentCart$products5.reduce(function (productsLength, Cproduct) {
+        productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products6 = currentCart.products) === null || _currentCart$products6 === void 0 ? void 0 : _currentCart$products6.reduce(function (productsLength, Cproduct) {
           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)
       });
@@ -339,7 +361,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
       }, products === null || products === void 0 || (_products$filter2 = products.filter(function (product) {
         return (product === null || product === void 0 ? void 0 : product.category_id) === (subcategory === null || subcategory === void 0 ? void 0 : subcategory.id);
       })) === null || _products$filter2 === void 0 ? void 0 : _products$filter2.map(function (product, i) {
-        var _currentCart$products6;
+        var _currentCart$products7;
         return /*#__PURE__*/_react.default.createElement(_SingleProductCard.SingleProductCard, {
           key: i,
           isSoldOut: product.inventoried && !product.quantity,
@@ -349,7 +371,7 @@ var BusinessProductsListUI = function BusinessProductsListUI(props) {
           isCartOnProductsList: isCartOnProductsList,
           handleUpdateProducts: handleUpdateProducts,
           useKioskApp: useKioskApp,
-          productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products6 = currentCart.products) === null || _currentCart$products6 === void 0 ? void 0 : _currentCart$products6.reduce(function (productsLength, Cproduct) {
+          productAddedToCartLength: currentCart === null || currentCart === void 0 || (_currentCart$products7 = currentCart.products) === null || _currentCart$products7 === void 0 ? void 0 : _currentCart$products7.reduce(function (productsLength, Cproduct) {
             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)
         });

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

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperNotFound = exports.WrapAllCategories = exports.SubcategorySearchContainer = exports.SubCategoriesInnerContainer = exports.SubCategoriesContainer = exports.RibbonBox = exports.ProductsListing = exports.ProductsContainer = exports.HeaderWrapper = exports.ErrorMessage = exports.DescriptionModalContainer = exports.DescriptionContainer = exports.ContainerButton = exports.CategoryDescription = void 0;
+exports.WrapperNotFound = exports.WrapAllCategories = exports.SubcategorySearchContainer = exports.SubCategoriesInnerContainer = exports.SubCategoriesContainer = exports.RibbonBox = exports.ProductsListing = exports.ProductsContainer = exports.PreviouslyOrderedWrapper = exports.PreviouslyOrderedContainer = exports.HeaderWrapper = exports.ErrorMessage = exports.DescriptionModalContainer = exports.DescriptionContainer = exports.ContainerButton = exports.CategoryDescription = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+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;
 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) } })); }
@@ -76,4 +76,8 @@ var ContainerButton = _styledComponents.default.div(_templateObject20 || (_templ
 });
 exports.ContainerButton = ContainerButton;
 var SubcategorySearchContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: 30px;\n"])));
-exports.SubcategorySearchContainer = SubcategorySearchContainer;
+exports.SubcategorySearchContainer = SubcategorySearchContainer;
+var PreviouslyOrderedContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    display: flex;\n    overflow: scroll hidden;\n    ::-webkit-scrollbar {\n      width: 0px;\n      height: 0px;\n    }\n"])));
+exports.PreviouslyOrderedContainer = PreviouslyOrderedContainer;
+var PreviouslyOrderedWrapper = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n\n  .product-card {\n    width: 270px;\n    max-width: 270px;\n  }\n\n"])));
+exports.PreviouslyOrderedWrapper = PreviouslyOrderedWrapper;

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

@@ -49,7 +49,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var layoutOne = 'groceries';
 var RenderProductsLayout = function RenderProductsLayout(props) {
-  var _configs$use_parent_c, _configs$use_parent_c2, _theme$business_view, _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view$, _theme$business_view7, _theme$business_view8, _businessState$busine, _businessState$busine2, _businessState$busine3, _businessState$busine4, _business$previously_, _business$professiona, _business$categories, _theme$defaultLanguag, _theme$defaultLanguag2, _business$professiona2, _business$categories2, _theme$defaultLanguag4, _theme$defaultLanguag5, _business$professiona3, _currentCart$products, _business$professiona4, _business$categories3, _theme$defaultLanguag6, _theme$defaultLanguag7, _business$previously_2, _theme$defaultLanguag8, _theme$defaultLanguag9, _currentCart$products2, _currentCart$products3;
+  var _configs$use_parent_c, _configs$use_parent_c2, _theme$business_view, _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view$, _theme$business_view7, _theme$business_view8, _businessState$busine, _businessState$busine2, _businessState$busine3, _businessState$busine4, _business$previously_, _business$professiona, _business$categories, _theme$defaultLanguag, _theme$defaultLanguag2, _business$professiona2, _business$categories2, _theme$defaultLanguag4, _theme$defaultLanguag5, _businessState$busine5, _business$professiona3, _currentCart$products, _business$professiona4, _business$categories3, _theme$defaultLanguag6, _theme$defaultLanguag7, _business$previously_2, _theme$defaultLanguag8, _theme$defaultLanguag9, _currentCart$products2, _currentCart$products3;
   var errors = props.errors,
     isError = props.isError,
     isLoading = props.isLoading,
@@ -294,7 +294,8 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
     onClickCategory: onClickCategory,
     handleUpdateProducts: handleUpdateProducts,
     professionalSelected: professionalSelected,
-    handleChangeProfessionalSelected: handleChangeProfessionalSelected
+    handleChangeProfessionalSelected: handleChangeProfessionalSelected,
+    previouslyProducts: businessState === null || businessState === void 0 || (_businessState$busine5 = businessState.business) === null || _businessState$busine5 === void 0 ? void 0 : _businessState$busine5.previously_products
   }))), windowSize.width >= 1000 && windowSize.height >= 600 && showCartOnProductList && /*#__PURE__*/_react.default.createElement(_styles.BusinessCartContainer, {
     isProfessional: (business === null || business === void 0 || (_business$professiona3 = business.professionals) === null || _business$professiona3 === void 0 ? void 0 : _business$professiona3.length) > 0 && !useKioskApp
   }, /*#__PURE__*/_react.default.createElement(_styles.BusinessCartContent, {

package/_modules/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -29,7 +29,7 @@ var CardContainer = _styledComponents.default.div(_templateObject || (_templateO
   var productsRows = _ref4.productsRows;
   return productsRows ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", ";\n    margin: 10px 0;\n  "])), function () {
     return productsRows === 3 ? 'calc(33% - 20px)' : 'calc(50% - 20px)';
-  }) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin: 10px 0;\n    @media (min-width: 576px) {\n      margin: 10px;\n      width: calc(100% - 20px);\n    }\n  ", "\n  \n  "])), function (_ref5) {
+  }) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n    margin: 10px 0;\n    @media (min-width: 576px) {\n      margin: 10px;\n      width: calc(100% - 20px);\n    }\n  ", "\n\n  "])), function (_ref5) {
     var isCartOnProductsList = _ref5.isCartOnProductsList;
     return isCartOnProductsList ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    @media (min-width: 993px) {\n      width: calc(50% - 20px);\n      margin: 10px 20px 10px 0px;\n      ", "\n    }\n  "])), function (props) {
       var _props$theme;
@@ -106,7 +106,7 @@ var PriceWrapper = _styledComponents.default.div(_templateObject27 || (_template
   return isOffPrice && (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        min-width: 64px;\n      "])));
 });
 exports.PriceWrapper = PriceWrapper;
-var QuantityContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 100%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-20px, 50%);\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref14) {
+var QuantityContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 98%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-20px, 50%);\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref14) {
   var theme = _ref14.theme;
   return theme.colors.primary;
 }, function (_ref15) {

package/package.json

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

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

@@ -22,7 +22,9 @@ import {
   CategoryDescription,
   DescriptionContainer,
   SubcategorySearchContainer,
-  SubCategoriesInnerContainer
+  SubCategoriesInnerContainer,
+  PreviouslyOrderedContainer,
+  PreviouslyOrderedWrapper
 } from './styles'
 import { Button } from '../../styles/Buttons'
 
@@ -49,7 +51,8 @@ const BusinessProductsListUI = (props) => {
     onClickCategory,
     handleUpdateProducts,
     isSearchMode,
-    business
+    business,
+    previouslyProducts
   } = props
 
   const [, t] = useLanguage()
@@ -171,7 +174,37 @@ const BusinessProductsListUI = (props) => {
             ))}
           </>
         )}
-
+        {
+          !category?.id && previouslyProducts?.length > 0 && (
+            <WrapAllCategories id='previously_block'>
+              <h3>{t('ORDER_IT_AGAIN', 'Order it again')}</h3>
+              <CategoryDescription maxWidth={headerRef?.current?.clientWidth}>
+                <p>
+                  {t('ORDER_IT_AGAIN_DESC', 'Quickly add items from your past orders.')}
+                </p>
+              </CategoryDescription>
+              <PreviouslyOrderedContainer>
+                <PreviouslyOrderedWrapper>
+                  <AutoScroll scrollId='previously_ordered'>
+                    {previouslyProducts?.map((product, i) => (
+                      <SingleProductCard
+                        key={i}
+                        isSoldOut={(product.inventoried && !product.quantity)}
+                        product={product}
+                        useKioskApp={useKioskApp}
+                        businessId={businessId}
+                        onProductClick={onProductClick}
+                        isCartOnProductsList={isCartOnProductsList}
+                        handleUpdateProducts={handleUpdateProducts}
+                        productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      />
+                    ))}
+                  </AutoScroll>
+                </PreviouslyOrderedWrapper>
+              </PreviouslyOrderedContainer>
+            </WrapAllCategories>
+          )
+        }
         {
           !category?.id && (
             <>

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

@@ -205,3 +205,23 @@ export const SubcategorySearchContainer = styled.div`
   flex-direction: column;
   margin-left: 30px;
 `
+
+export const PreviouslyOrderedContainer = styled.div`
+    display: flex;
+    overflow: scroll hidden;
+    ::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+`
+
+export const PreviouslyOrderedWrapper = styled.div`
+  display: flex;
+  box-sizing: border-box;
+
+  .product-card {
+    width: 270px;
+    max-width: 270px;
+  }
+
+`

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

@@ -337,6 +337,7 @@ export const RenderProductsLayout = (props) => {
                       handleUpdateProducts={handleUpdateProducts}
                       professionalSelected={professionalSelected}
                       handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+                      previouslyProducts={businessState?.business?.previously_products}
                     />
                   </WrapContent>
                 </BusinessCategoryProductWrapper>

package/src/themes/five/src/components/SingleProductCard/layouts/original/styles.js

@@ -64,7 +64,7 @@ export const CardContainer = styled.div`
       `}
     }
   `}
-  
+
   `}
 `
 
@@ -237,7 +237,7 @@ export const QuantityContainer = styled.div`
   color: ${({ theme }) => theme.colors.primaryContrast};
   position: absolute;
   left: 100%;
-  bottom: 100%;
+  bottom: 98%;
   width: 25px;
   height: 25px;
   text-align: center;

package/template/pages/BusinessProductsList/index.js

@@ -136,7 +136,8 @@ export const BusinessProductsList = (props) => {
       'whatsapp_number',
       'snapchat_profile',
       'previously_products',
-      'configs'
+      'configs',
+      'previously_products'
     ],
     handleSearchRedirect: () => {
       events.emit('go_to_page', { page: 'search' })