ordering-ui-external 10.4.1 → 10.5.0

package/_modules/themes/callcenterOriginal/src/components/Orders/DeliveriesManager/index.js

@@ -44,7 +44,8 @@ var DeliveriesManagerUI = function DeliveriesManagerUI(props) {
     handleSelectedSubOrderStatus = props.handleSelectedSubOrderStatus,
     onOrderRedirect = props.onOrderRedirect,
     numberOfOrdersByStatus = props.numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus = props.numberOfOrdersBySubstatus;
+    numberOfOrdersBySubstatus = props.numberOfOrdersBySubstatus,
+    franchiseId = props.franchiseId;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -128,7 +129,8 @@ var DeliveriesManagerUI = function DeliveriesManagerUI(props) {
     slaSettingTime: slaSettingTime,
     timeStatus: timeStatus,
     numberOfOrdersByStatus: numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus: numberOfOrdersBySubstatus
+    numberOfOrdersBySubstatus: numberOfOrdersBySubstatus,
+    franchiseId: franchiseId
   })))), isOpenOrderDetail && /*#__PURE__*/_react.default.createElement(_OrderDetails.OrderDetails, {
     open: isOpenOrderDetail,
     order: detailsOrder,

package/_modules/themes/callcenterOriginal/src/components/Orders/OrdersDashboardControls/index.js

@@ -21,6 +21,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var OrdersDashboardControls = function OrdersDashboardControls(props) {
   var selectedOrderNumber = props.selectedOrderNumber,
     filterValues = props.filterValues,
+    franchiseId = props.franchiseId,
     handleDeleteMultiOrders = props.handleDeleteMultiOrders,
     handleChangeMultiOrdersStatus = props.handleChangeMultiOrdersStatus,
     handleOpenCustomOrderDetail = props.handleOpenCustomOrderDetail;
@@ -30,7 +31,8 @@ var OrdersDashboardControls = function OrdersDashboardControls(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.OrderDashboardControlsContainer, null, /*#__PURE__*/_react.default.createElement(_styles.InnerContnet, null, /*#__PURE__*/_react.default.createElement(_CreateCustomOrder.CreateCustomOrder, {
     handleOpenCustomOrderDetail: handleOpenCustomOrderDetail
   }), /*#__PURE__*/_react.default.createElement(_OrdersExportCSV.OrdersExportCSV, {
-    filterValues: filterValues
+    filterValues: filterValues,
+    franchiseId: franchiseId
   }), selectedOrderNumber > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (user === null || user === void 0 ? void 0 : user.level) !== 5 && /*#__PURE__*/_react.default.createElement(_OrderDelete.OrderDelete, {
     handleDeleteMultiOrders: handleDeleteMultiOrders
   }), /*#__PURE__*/_react.default.createElement(_styles.WrapOrderStatusTypeSelector, null, /*#__PURE__*/_react.default.createElement(_OrderStatusTypeSelector.OrderStatusTypeSelector, {

package/_modules/themes/callcenterOriginal/src/components/Orders/OrdersManager/index.js

@@ -232,6 +232,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
   })), !isSelectedOrders && /*#__PURE__*/_react.default.createElement(_OrdersDashboardControls.OrdersDashboardControls, {
     selectedOrderNumber: selectedOrderIds === null || selectedOrderIds === void 0 ? void 0 : selectedOrderIds.length,
     filterValues: filterValues,
+    franchiseId: props.franchiseId,
     handleChangeMultiOrdersStatus: handleChangeMultiOrdersStatus,
     handleDeleteMultiOrders: handleDeleteMultiOrders,
     handleOpenCustomOrderDetail: function handleOpenCustomOrderDetail(id) {
@@ -245,6 +246,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     driverId: props.driverId,
     customerId: props.customerId,
     businessId: props.businessId,
+    franchiseId: props.franchiseId,
     searchValue: searchValue,
     filterValues: filterValues,
     selectedOrderIds: selectedOrderIds,

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

@@ -162,11 +162,14 @@ var BusinessItemAccordion = function BusinessItemAccordion(props) {
     onClick: function onClick(e) {
       return toggleAccordion(e);
     }
-  }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfo, null, !hideBusinessLogo && /*#__PURE__*/_react.default.createElement(_styles.WrapperBusinessLogo, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessLogo, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfo, {
+    isOtherInfo: isClosed && !isStore || !isClosed && !isProducts && !isStore
+  }, !hideBusinessLogo && /*#__PURE__*/_react.default.createElement(_styles.WrapperBusinessLogo, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessLogo, {
     bgimage: !isGiftCart ? (business === null || business === void 0 ? void 0 : business.logo) || ((_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.dummies) === null || _theme$images === void 0 ? void 0 : _theme$images.businessLogo) : (_theme$images2 = theme.images) === null || _theme$images2 === void 0 || (_theme$images2 = _theme$images2.logos) === null || _theme$images2 === void 0 ? void 0 : _theme$images2.isotype
   })), /*#__PURE__*/_react.default.createElement(_styles.ContentInfo, {
     className: "info",
-    isStore: isStore
+    isStore: isStore,
+    isLogo: !hideBusinessLogo
   }, /*#__PURE__*/_react.default.createElement("h2", null, business === null || business === void 0 ? void 0 : business.name), !hideBusinessTime && /*#__PURE__*/_react.default.createElement(_styles.TimeContainer, null, (orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type) === 1 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_FiClock.default, null), (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.delivery_time)) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_FiClock.default, null), (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.pickup_time))), /*#__PURE__*/_react.default.createElement("div", null, handleStoreRedirect && !isCartOnProductsList && !isStore && !isGiftCart && /*#__PURE__*/_react.default.createElement("span", {
     ref: businessStore,
     onClick: function onClick() {

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrapperBusinessLogo = exports.TimeContainer = exports.PriceContainer = exports.ContentInfo = exports.BusinessTotal = exports.BusinessLogo = exports.BusinessInfo = exports.BusinessActions = exports.AccordionText = exports.AccordionSection = exports.AccordionContent = exports.Accordion = void 0;
 var _react = _interopRequireDefault(require("react"));
 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,45 +25,51 @@ var Accordion = _styledComponents.default.div(_templateObject3 || (_templateObje
   return props.isClosed && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));\n    padding: 10px 5px;\n  "])));
 });
 exports.Accordion = Accordion;
-var ContentInfo = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n\n  > div {\n    display: flex;\n    align-items: center;\n\n    .go-store {\n      user-select: none;\n      color: ", ";\n      margin-right: 5px;\n      ", "\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    .clear-cart {\n      user-select: none;\n      color: #d81212;\n      margin-left: 5px;\n      ", "\n      &:first-letter {\n        text-transform: uppercase;\n      }\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    ", "\n  }\n  .change-store {\n    cursor: pointer;\n    color: ", ";\n    font-size: 12px;\n    &:first-letter {\n      text-transform: uppercase;\n    }\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n  ", "\n\n  span {\n    cursor: pointer;\n  }\n\n  h2, span {\n    margin: 0px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  @media (min-width: 576px) {\n    h2 {\n      font-size: 18px;\n    }\n    span {\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
+var ContentInfo = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 100%;\n  ", "\n\n  > div {\n    display: flex;\n    align-items: center;\n\n    .go-store {\n      user-select: none;\n      color: ", ";\n      margin-right: 5px;\n      ", "\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    .clear-cart {\n      user-select: none;\n      color: #d81212;\n      margin-left: 5px;\n      ", "\n      &:first-letter {\n        text-transform: uppercase;\n      }\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    ", "\n  }\n  .change-store {\n    cursor: pointer;\n    color: ", ";\n    font-size: 12px;\n    &:first-letter {\n      text-transform: uppercase;\n    }\n    &:hover {\n        text-decoration: underline;\n      }\n  }\n  ", "\n\n  span {\n    cursor: pointer;\n  }\n\n  h2, span {\n    margin: 0px;\n  }\n\n  h2 {\n    color: ", ";\n    font-size: 16px;\n    font-weight: 500;\n  }\n\n  @media (min-width: 576px) {\n    h2 {\n      font-size: 18px;\n    }\n    span {\n      font-size: 13px;\n    }\n  }\n"])), function (_ref3) {
+  var isLogo = _ref3.isLogo;
+  return isLogo && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: calc(100% - 80px);\n  "])));
+}, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme;
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n        margin-right: 0;\n      "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n        margin-right: 0;\n      "])));
 }, function (props) {
   var _props$theme2;
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin-right: 5px;\n        margin-left: 0;\n      "])));
-}, function (_ref3) {
-  var isStore = _ref3.isStore;
-  return isStore && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      .clear-cart {\n        margin: 0px;\n      }\n    "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin-right: 5px;\n        margin-left: 0;\n      "])));
+}, function (_ref4) {
+  var isStore = _ref4.isStore;
+  return isStore && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      .clear-cart {\n        margin: 0px;\n      }\n    "])));
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme3;
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n    margin-left: 0;\n  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    margin-right: 10px;\n    margin-left: 0;\n  "])));
 }, function (props) {
   return props.theme.colors.darkTextColor;
 });
 exports.ContentInfo = ContentInfo;
-var AccordionContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  transition: min-height 0.6s ease;\n"])));
+var AccordionContent = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  transition: min-height 0.6s ease;\n"])));
 exports.AccordionContent = AccordionContent;
-var AccordionText = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  padding: 18px;\n"])));
+var AccordionText = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 14px;\n  padding: 18px;\n"])));
 exports.AccordionText = AccordionText;
-var BusinessInfo = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 80%;\n\n  h2 {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  @media (min-width: 576px) {\n    width: 75%;\n  }\n\n"])));
+var BusinessInfo = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: calc(100% - 30px);\n  ", "\n\n  h2 {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), function (_ref5) {
+  var isOtherInfo = _ref5.isOtherInfo;
+  return isOtherInfo && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    width: calc(100% - 100px);\n  "])));
+});
 exports.BusinessInfo = BusinessInfo;
-var BusinessTotal = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: none;\n  flex-direction: column;\n  align-items: center;\n\n  p {\n    font-size: 13px;\n    margin: 0px 5px;\n    font-weight: 300;\n\n    &:nth-child(1) {\n      font-weight: 500;\n    }\n  }\n\n  &.closed {\n    flex: 1;\n    p {\n      text-align: center;\n      margin: 0px 20px;\n      font-size: 13px;\n    }\n  }\n\n  @media (min-width: 481px) {\n    display: flex;\n  }\n"])), function (_ref4) {
-  var isCartOnProductsList = _ref4.isCartOnProductsList;
+var BusinessTotal = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: none;\n  flex-direction: column;\n  align-items: center;\n\n  p {\n    font-size: 13px;\n    margin: 0px 5px;\n    font-weight: 300;\n\n    &:nth-child(1) {\n      font-weight: 500;\n    }\n  }\n\n  &.closed {\n    flex: 1;\n    p {\n      text-align: center;\n      margin: 0px 20px;\n      font-size: 13px;\n    }\n  }\n\n  @media (min-width: 481px) {\n    display: flex;\n  }\n"])), function (_ref6) {
+  var isCartOnProductsList = _ref6.isCartOnProductsList;
   return isCartOnProductsList ? '30%' : '25%';
 });
 exports.BusinessTotal = BusinessTotal;
-var BusinessActions = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  max-width: 30%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  span {\n    height: 22px;\n    svg {\n      font-size: 22px;\n    }\n\n    &:not(:last-child) {\n      margin-right: 5px;\n      ", "\n    }\n  }\n\n  @media (min-width: 768px) {\n    span {\n      height: 27px;\n      svg {\n        font-size: 27px;\n      }\n    }\n  }\n"])), function (props) {
+var BusinessActions = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  max-width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  span {\n    height: 22px;\n    svg {\n      font-size: 22px;\n    }\n\n    &:not(:last-child) {\n      margin-right: 5px;\n      ", "\n    }\n  }\n\n  @media (min-width: 768px) {\n    span {\n      height: 27px;\n      svg {\n        font-size: 27px;\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n        margin-right: 0;\n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        margin-left: 5px;\n        margin-right: 0;\n    "])));
 });
 exports.BusinessActions = BusinessActions;
-var PriceContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  h4 {\n    font-size: 16px;\n  }\n  button{ \n    padding: 10px 30px;\n    min-width: 150px;\n    width: 50%;\n    height: 50px;\n  }\n"])));
+var PriceContainer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  h4 {\n    font-size: 16px;\n  }\n  button{ \n    padding: 10px 30px;\n    min-width: 150px;\n    width: 50%;\n    height: 50px;\n  }\n"])));
 exports.PriceContainer = PriceContainer;
-var BusinessLogoStyled = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 75px;\n  height: 75px;\n  min-height: 75px;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: contain;\n  object-fit: contain;\n  background-position: center;\n  border-radius: 10px;\n"])));
+var BusinessLogoStyled = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 75px;\n  height: 75px;\n  min-height: 75px;\n  box-sizing: border-box;\n  position: relative;\n  background-repeat: no-repeat, repeat;\n  background-size: contain;\n  object-fit: contain;\n  background-position: center;\n  border-radius: 10px;\n"])));
 var BusinessLogo = function BusinessLogo(props) {
   return /*#__PURE__*/_react.default.createElement(BusinessLogoStyled, _extends({}, props, {
     style: {
@@ -72,7 +78,7 @@ var BusinessLogo = function BusinessLogo(props) {
   }), props.children);
 };
 exports.BusinessLogo = BusinessLogo;
-var WrapperBusinessLogo = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  max-width: 75px;\n  max-height: 75px;\n  height: 75px;\n  width: 75px;\n  margin-right: 10px;\n"])));
+var WrapperBusinessLogo = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  max-width: 75px;\n  max-height: 75px;\n  height: 75px;\n  width: 75px;\n  margin-right: 10px;\n"])));
 exports.WrapperBusinessLogo = WrapperBusinessLogo;
-var TimeContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  svg{\n    position: relative;\n    top: 1px;\n    margin-right: 5px;\n  }\n"])));
+var TimeContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  svg{\n    position: relative;\n    top: 1px;\n    margin-right: 5px;\n  }\n"])));
 exports.TimeContainer = TimeContainer;

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

@@ -408,6 +408,8 @@ var BusinessProductsListingUI = function BusinessProductsListingUI(props) {
       onChangeMetaTag && onChangeMetaTag(curProduct === null || curProduct === void 0 ? void 0 : curProduct.seo_title, curProduct === null || curProduct === void 0 ? void 0 : curProduct.seo_description, curProduct === null || curProduct === void 0 ? void 0 : curProduct.seo_keywords);
     } else {
       onChangeMetaTag && onChangeMetaTag(business === null || business === void 0 ? void 0 : business.slug, business === null || business === void 0 ? void 0 : business.description, business === null || business === void 0 ? void 0 : business.name);
+      updateProductModal(null);
+      setCurProduct(null);
     }
   }, [openProduct, loading, business, curProduct]);
   (0, _react.useEffect)(function () {

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

@@ -53,7 +53,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PIXELS_TO_SCROLL = 300;
 var BusinessesListingUI = function BusinessesListingUI(props) {
-  var _citiesState$cities, _ref, _theme$business_listi, _orderState$options, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _theme$business_listi5, _theme$business_listi6, _theme$business_listi7, _businessesList$busin, _theme$header, _orderState$options2, _orderState$options3, _businessesList$busin3, _orderState$options7, _configs$business_lis, _configs$business_lis2, _configs$business_lis3, _theme$images2, _theme$business_listi8, _configs$business_lis4, _theme$images3, _theme$business_listi9, _citiesState$cities5, _citiesState$cities6, _orderState$options9, _configs$advanced_bus2, _citiesState$cities7, _citiesState$cities8, _orderState$options11, _businessesList$busin5, _businessesList$busin6, _orderState$options14;
+  var _orderState$options, _citiesState$cities, _ref, _theme$business_listi, _orderState$options2, _theme$business_listi2, _theme$business_listi3, _theme$business_listi4, _theme$business_listi5, _theme$business_listi6, _theme$business_listi7, _businessesList$busin, _theme$header, _orderState$options3, _orderState$options4, _configs$order_types_, _businessesList$busin3, _orderState$options8, _orderState$options10, _configs$business_lis, _configs$business_lis2, _configs$business_lis3, _theme$images2, _theme$business_listi8, _orderState$options13, _theme$images3, _theme$images4, _configs$business_lis4, _theme$images5, _theme$business_listi9, _citiesState$cities5, _citiesState$cities6, _orderState$options15, _configs$advanced_bus2, _citiesState$cities7, _citiesState$cities8, _orderState$options17, _businessesList$busin5, _businessesList$busin6, _orderState$options20;
   var businessesList = props.businessesList,
     paginationProps = props.paginationProps,
     searchValue = props.searchValue,
@@ -69,14 +69,19 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     getCities = props.getCities,
     citiesState = props.citiesState,
     logosLayout = props.logosLayout,
-    actualSlug = props.actualSlug;
+    actualSlug = props.actualSlug,
+    orderTypes = props.orderTypes;
+  var allOrderTypes = [1, 2, 3, 4, 5];
+  var pickupTypes = [2, 3, 4, 5];
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
   var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 2),
     orderState = _useOrder2[0],
-    changeCityFilter = _useOrder2[1].changeCityFilter;
+    _useOrder2$ = _useOrder2[1],
+    changeCityFilter = _useOrder2$.changeCityFilter,
+    changeType = _useOrder2$.changeType;
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     auth = _useSession2[0].auth;
@@ -120,15 +125,19 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     _useState14 = _slicedToArray(_useState13, 2),
     hasHighRatedBusiness = _useState14[0],
     setHasHighRatedBusiness = _useState14[1];
-  var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
-  var _useState15 = (0, _react.useState)([]),
+  var _useState15 = (0, _react.useState)(pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type)),
     _useState16 = _slicedToArray(_useState15, 2),
-    favoriteIds = _useState16[0],
-    setFavoriteIds = _useState16[1];
+    isPickupSelected = _useState16[0],
+    setIsPickupSelected = _useState16[1];
+  var userCustomer = JSON.parse(window.localStorage.getItem('user-customer'));
+  var _useState17 = (0, _react.useState)([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    favoriteIds = _useState18[0],
+    setFavoriteIds = _useState18[1];
   var allCitiesDisabled = citiesState === null || citiesState === void 0 || (_citiesState$cities = citiesState.cities) === null || _citiesState$cities === void 0 ? void 0 : _citiesState$cities.every(function (city) {
     return !city.enabled;
   });
-  var hideCities = (_ref = (theme === null || theme === void 0 || (_theme$business_listi = theme.business_listing_view) === null || _theme$business_listi === void 0 || (_theme$business_listi = _theme$business_listi.components) === null || _theme$business_listi === void 0 || (_theme$business_listi = _theme$business_listi.cities) === null || _theme$business_listi === void 0 ? void 0 : _theme$business_listi.hidden) || (orderState === null || orderState === void 0 || (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type) !== 2 || allCitiesDisabled) !== null && _ref !== void 0 ? _ref : true;
+  var hideCities = (_ref = (theme === null || theme === void 0 || (_theme$business_listi = theme.business_listing_view) === null || _theme$business_listi === void 0 || (_theme$business_listi = _theme$business_listi.components) === null || _theme$business_listi === void 0 || (_theme$business_listi = _theme$business_listi.cities) === null || _theme$business_listi === void 0 ? void 0 : _theme$business_listi.hidden) || (orderState === null || orderState === void 0 || (_orderState$options2 = orderState.options) === null || _orderState$options2 === void 0 ? void 0 : _orderState$options2.type) !== 2 || allCitiesDisabled) !== null && _ref !== void 0 ? _ref : true;
   var hideSearch = theme === null || theme === void 0 || (_theme$business_listi2 = theme.business_listing_view) === null || _theme$business_listi2 === void 0 || (_theme$business_listi2 = _theme$business_listi2.components) === null || _theme$business_listi2 === void 0 || (_theme$business_listi2 = _theme$business_listi2.search) === null || _theme$business_listi2 === void 0 ? void 0 : _theme$business_listi2.hidden;
   var hideFilter = (theme === null || theme === void 0 || (_theme$business_listi3 = theme.business_listing_view) === null || _theme$business_listi3 === void 0 || (_theme$business_listi3 = _theme$business_listi3.components) === null || _theme$business_listi3 === void 0 || (_theme$business_listi3 = _theme$business_listi3.filter) === null || _theme$business_listi3 === void 0 ? void 0 : _theme$business_listi3.hidden) || hideSearch;
   var hideHero = theme === null || theme === void 0 || (_theme$business_listi4 = theme.business_listing_view) === null || _theme$business_listi4 === void 0 || (_theme$business_listi4 = _theme$business_listi4.components) === null || _theme$business_listi4 === void 0 || (_theme$business_listi4 = _theme$business_listi4.business_hero) === null || _theme$business_listi4 === void 0 ? void 0 : _theme$business_listi4.hidden;
@@ -140,7 +149,12 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     return business.id;
   }));
   var isChew = (theme === null || theme === void 0 || (_theme$header = theme.header) === null || _theme$header === void 0 || (_theme$header = _theme$header.components) === null || _theme$header === void 0 || (_theme$header = _theme$header.layout) === null || _theme$header === void 0 || (_theme$header = _theme$header.type) === null || _theme$header === void 0 ? void 0 : _theme$header.toLowerCase()) === 'chew';
-  var cateringTypeString = (orderState === null || orderState === void 0 || (_orderState$options2 = orderState.options) === null || _orderState$options2 === void 0 ? void 0 : _orderState$options2.type) === 7 ? 'catering_delivery' : (orderState === null || orderState === void 0 || (_orderState$options3 = orderState.options) === null || _orderState$options3 === void 0 ? void 0 : _orderState$options3.type) === 8 ? 'catering_pickup' : null;
+  var cateringTypeString = (orderState === null || orderState === void 0 || (_orderState$options3 = orderState.options) === null || _orderState$options3 === void 0 ? void 0 : _orderState$options3.type) === 7 ? 'catering_delivery' : (orderState === null || orderState === void 0 || (_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.type) === 8 ? 'catering_pickup' : null;
+  var configTypes = (configs === null || configs === void 0 || (_configs$order_types_ = configs.order_types_allowed) === null || _configs$order_types_ === void 0 ? void 0 : _configs$order_types_.value.split('|').filter(function (value) {
+    return allOrderTypes.includes(Number(value));
+  }).map(function (value) {
+    return Number(value);
+  })) || [];
   var cateringValues = (preorderBusiness === null || preorderBusiness === void 0 ? void 0 : preorderBusiness.configs) && (0, _utils.getCateringValues)(cateringTypeString, preorderBusiness === null || preorderBusiness === void 0 ? void 0 : preorderBusiness.configs);
   var handleScroll = (0, _react.useCallback)(function () {
     var _document$documentEle, _document$documentEle2, _businessesList$error;
@@ -207,8 +221,24 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     }));
   };
   var handleChangeCity = function handleChangeCity(cityId) {
-    var _orderState$options4;
-    changeCityFilter(cityId === (orderState === null || orderState === void 0 || (_orderState$options4 = orderState.options) === null || _orderState$options4 === void 0 ? void 0 : _orderState$options4.city_id) ? null : cityId);
+    var _orderState$options5;
+    changeCityFilter(cityId === (orderState === null || orderState === void 0 || (_orderState$options5 = orderState.options) === null || _orderState$options5 === void 0 ? void 0 : _orderState$options5.city_id) ? null : cityId);
+  };
+  var handleChangeType = function handleChangeType(value) {
+    if (!(orderState !== null && orderState !== void 0 && orderState.loading)) {
+      changeType(value);
+      if (value === 1) {
+        setIsPickupSelected(false);
+      }
+    }
+  };
+  var handleChangeToPickup = function handleChangeToPickup() {
+    var _orderTypes$find;
+    var firstEnabledPickupType = (_orderTypes$find = orderTypes.find(function (type) {
+      return (configTypes === null || configTypes === void 0 ? void 0 : configTypes.includes(type.value)) && type.value !== 1;
+    })) === null || _orderTypes$find === void 0 ? void 0 : _orderTypes$find.value;
+    handleChangeType(firstEnabledPickupType);
+    setIsPickupSelected(true);
   };
   (0, _react.useEffect)(function () {
     if (preorderBusiness) setIsPreorder(true);
@@ -226,14 +256,36 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     setFavoriteIds(_toConsumableArray(new Set(ids)));
   }, [businessesList === null || businessesList === void 0 || (_businessesList$busin3 = businessesList.businesses) === null || _businessesList$busin3 === void 0 ? void 0 : _businessesList$busin3.length]);
   (0, _react.useEffect)(function () {
-    var _citiesState$cities3, _orderState$options5, _citiesState$cities4;
-    if (!(citiesState !== null && citiesState !== void 0 && (_citiesState$cities3 = citiesState.cities) !== null && _citiesState$cities3 !== void 0 && _citiesState$cities3.length) || !(orderState !== null && orderState !== void 0 && (_orderState$options5 = orderState.options) !== null && _orderState$options5 !== void 0 && _orderState$options5.city_id)) return;
+    var _citiesState$cities3, _orderState$options6, _citiesState$cities4;
+    if (!(citiesState !== null && citiesState !== void 0 && (_citiesState$cities3 = citiesState.cities) !== null && _citiesState$cities3 !== void 0 && _citiesState$cities3.length) || !(orderState !== null && orderState !== void 0 && (_orderState$options6 = orderState.options) !== null && _orderState$options6 !== void 0 && _orderState$options6.city_id)) return;
     var selectedCity = citiesState === null || citiesState === void 0 || (_citiesState$cities4 = citiesState.cities) === null || _citiesState$cities4 === void 0 ? void 0 : _citiesState$cities4.find(function (city) {
-      var _orderState$options6;
-      return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options6 = orderState.options) === null || _orderState$options6 === void 0 ? void 0 : _orderState$options6.city_id);
+      var _orderState$options7;
+      return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options7 = orderState.options) === null || _orderState$options7 === void 0 ? void 0 : _orderState$options7.city_id);
     });
     if (!selectedCity || !(selectedCity !== null && selectedCity !== void 0 && selectedCity.enabled)) changeCityFilter(null);
-  }, [citiesState, orderState === null || orderState === void 0 || (_orderState$options7 = orderState.options) === null || _orderState$options7 === void 0 ? void 0 : _orderState$options7.city_id]);
+  }, [citiesState, orderState === null || orderState === void 0 || (_orderState$options8 = orderState.options) === null || _orderState$options8 === void 0 ? void 0 : _orderState$options8.city_id]);
+  (0, _react.useEffect)(function () {
+    var _orderState$options9;
+    if (pickupTypes.includes(orderState === null || orderState === void 0 || (_orderState$options9 = orderState.options) === null || _orderState$options9 === void 0 ? void 0 : _orderState$options9.type) && isCustomerMode) {
+      setIsPickupSelected(true);
+    }
+  }, [orderState === null || orderState === void 0 || (_orderState$options10 = orderState.options) === null || _orderState$options10 === void 0 ? void 0 : _orderState$options10.type]);
+  var OrderTypesComponent = function OrderTypesComponent() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orderTypes && (configTypes ? orderTypes.filter(function (type) {
+      return (configTypes === null || configTypes === void 0 ? void 0 : configTypes.includes(type.value)) && type.value !== 1;
+    }) : orderTypes).map(function (item, i) {
+      var _orderState$options11, _orderState$options12;
+      return /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+        key: item.value,
+        onClick: function onClick() {
+          return handleChangeType(item.value);
+        },
+        color: (orderState === null || orderState === void 0 || (_orderState$options11 = orderState.options) === null || _orderState$options11 === void 0 ? void 0 : _orderState$options11.type) === (item === null || item === void 0 ? void 0 : item.value) ? 'primary' : 'secondary',
+        disabled: orderState === null || orderState === void 0 ? void 0 : orderState.loading,
+        className: (orderState === null || orderState === void 0 || (_orderState$options12 = orderState.options) === null || _orderState$options12 === void 0 ? void 0 : _orderState$options12.type) !== (item === null || item === void 0 ? void 0 : item.value) ? 'activated' : ''
+      }, item.text);
+    }));
+  };
   if (logosLayout) {
     var _businessesList$busin4;
     return /*#__PURE__*/_react.default.createElement(_styles.BusinessLogosWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessLogosContainer, null, /*#__PURE__*/_react.default.createElement(_AutoScroll.AutoScroll, {
@@ -262,17 +314,43 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
   }), (windowSize.width < 576 || (configs === null || configs === void 0 || (_configs$business_lis = configs.business_listing_hide_image) === null || _configs$business_lis === void 0 ? void 0 : _configs$business_lis.value) !== '1' && !isChew) && /*#__PURE__*/_react.default.createElement(_styles.BusinessBanner, null, windowSize.width < 576 && /*#__PURE__*/_react.default.createElement(_OrderContextUI.OrderContextUI, {
     isBusinessList: true,
     hideHero: (configs === null || configs === void 0 || (_configs$business_lis2 = configs.business_listing_hide_image) === null || _configs$business_lis2 === void 0 ? void 0 : _configs$business_lis2.value) !== '1' && !isChew && !hideHero
-  }), (configs === null || configs === void 0 || (_configs$business_lis3 = configs.business_listing_hide_image) === null || _configs$business_lis3 === void 0 ? void 0 : _configs$business_lis3.value) !== '1' && !isChew && !hideHero && /*#__PURE__*/_react.default.createElement(_styles.BusinessHeroImg, {
+  }), (configs === null || configs === void 0 || (_configs$business_lis3 = configs.business_listing_hide_image) === null || _configs$business_lis3 === void 0 ? void 0 : _configs$business_lis3.value) !== '1' && !isChew && !hideHero && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.BusinessHeroImg, {
     bgimage: (_theme$images2 = theme.images) === null || _theme$images2 === void 0 || (_theme$images2 = _theme$images2.general) === null || _theme$images2 === void 0 ? void 0 : _theme$images2.businessHero,
     height: theme === null || theme === void 0 || (_theme$business_listi8 = theme.business_listing_view) === null || _theme$business_listi8 === void 0 || (_theme$business_listi8 = _theme$business_listi8.components) === null || _theme$business_listi8 === void 0 || (_theme$business_listi8 = _theme$business_listi8.business_hero) === null || _theme$business_listi8 === void 0 || (_theme$business_listi8 = _theme$business_listi8.style) === null || _theme$business_listi8 === void 0 ? void 0 : _theme$business_listi8.height
-  })), /*#__PURE__*/_react.default.createElement(_OrderProgress.OrderProgress, {
+  })), userCustomer && (orderState === null || orderState === void 0 || (_orderState$options13 = orderState.options) === null || _orderState$options13 === void 0 || (_orderState$options13 = _orderState$options13.address) === null || _orderState$options13 === void 0 ? void 0 : _orderState$options13.address) && isCustomerMode && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, t('DELIVERY_TYPE', 'Delivery Type')), /*#__PURE__*/_react.default.createElement(_styles.TypesContainer, null, configTypes.includes(1) && /*#__PURE__*/_react.default.createElement(_styles.TypeButton, {
+    onClick: function onClick() {
+      return handleChangeType(1);
+    },
+    disabled: orderState === null || orderState === void 0 ? void 0 : orderState.loading,
+    activated: !isPickupSelected
+  }, /*#__PURE__*/_react.default.createElement(_styles.IconTypeButton, {
+    activated: !isPickupSelected
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: theme === null || theme === void 0 || (_theme$images3 = theme.images) === null || _theme$images3 === void 0 || (_theme$images3 = _theme$images3.general) === null || _theme$images3 === void 0 ? void 0 : _theme$images3.deliveryIco,
+    width: 20,
+    height: 20
+  })), /*#__PURE__*/_react.default.createElement("p", null, t('DELIVERY', 'Delivery'))), configTypes.some(function (type) {
+    return pickupTypes.includes(type);
+  }) && /*#__PURE__*/_react.default.createElement(_styles.TypeButton, {
+    disabled: orderState === null || orderState === void 0 ? void 0 : orderState.loading,
+    activated: isPickupSelected,
+    onClick: function onClick() {
+      return handleChangeToPickup();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.IconTypeButton, {
+    activated: isPickupSelected
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: theme === null || theme === void 0 || (_theme$images4 = theme.images) === null || _theme$images4 === void 0 || (_theme$images4 = _theme$images4.general) === null || _theme$images4 === void 0 ? void 0 : _theme$images4.pickupIco,
+    width: 22,
+    height: 22
+  })), /*#__PURE__*/_react.default.createElement("p", null, t('PICKUP', 'Pickup')))), isPickupSelected && /*#__PURE__*/_react.default.createElement(_styles.TypesWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')), /*#__PURE__*/_react.default.createElement(_styles.AdditionalTypesContainer, null, /*#__PURE__*/_react.default.createElement(OrderTypesComponent, null)))), !isCustomerMode && /*#__PURE__*/_react.default.createElement(_OrderProgress.OrderProgress, {
     isChew: isChew,
     franchiseId: props.franchiseId,
     userCustomerId: userCustomer === null || userCustomer === void 0 ? void 0 : userCustomer.id,
     asDashboard: isCustomerMode,
     isCustomerMode: isCustomerMode
   }), (configs === null || configs === void 0 || (_configs$business_lis4 = configs.business_listing_hide_image) === null || _configs$business_lis4 === void 0 ? void 0 : _configs$business_lis4.value) !== '1' && isChew && /*#__PURE__*/_react.default.createElement(_styles.BusinessHeroImg, {
-    bgimage: (_theme$images3 = theme.images) === null || _theme$images3 === void 0 || (_theme$images3 = _theme$images3.general) === null || _theme$images3 === void 0 ? void 0 : _theme$images3.businessHero,
+    bgimage: (_theme$images5 = theme.images) === null || _theme$images5 === void 0 || (_theme$images5 = _theme$images5.general) === null || _theme$images5 === void 0 ? void 0 : _theme$images5.businessHero,
     height: theme === null || theme === void 0 || (_theme$business_listi9 = theme.business_listing_view) === null || _theme$business_listi9 === void 0 || (_theme$business_listi9 = _theme$business_listi9.components) === null || _theme$business_listi9 === void 0 || (_theme$business_listi9 = _theme$business_listi9.business_hero) === null || _theme$business_listi9 === void 0 || (_theme$business_listi9 = _theme$business_listi9.style) === null || _theme$business_listi9 === void 0 ? void 0 : _theme$business_listi9.height
   }), isCustomerMode && !hidePreviousOrders && !businessesList.loading && /*#__PURE__*/_react.default.createElement(_OrdersSection.OrdersSection, {
     titleContent: t('PREVIOUS_ORDERS', 'Previous orders'),
@@ -301,13 +379,13 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     color: "primary",
     onClick: handleOpenCities
   }, (citiesState === null || citiesState === void 0 || (_citiesState$cities6 = citiesState.cities) === null || _citiesState$cities6 === void 0 || (_citiesState$cities6 = _citiesState$cities6.find(function (city) {
-    var _orderState$options8;
-    return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options8 = orderState.options) === null || _orderState$options8 === void 0 ? void 0 : _orderState$options8.city_id);
+    var _orderState$options14;
+    return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options14 = orderState.options) === null || _orderState$options14 === void 0 ? void 0 : _orderState$options14.city_id);
   })) === null || _citiesState$cities6 === void 0 ? void 0 : _citiesState$cities6.name) || t('SELECT_A_CITY', 'Select a city')), isCustomLayout && /*#__PURE__*/_react.default.createElement(_FiMap.default, {
     onClick: toggleMap
   })), activeMap && /*#__PURE__*/_react.default.createElement(_BusinessesMap.BusinessesMap, {
     businessList: businessesList.businesses,
-    userLocation: orderState === null || orderState === void 0 || (_orderState$options9 = orderState.options) === null || _orderState$options9 === void 0 || (_orderState$options9 = _orderState$options9.address) === null || _orderState$options9 === void 0 ? void 0 : _orderState$options9.location,
+    userLocation: orderState === null || orderState === void 0 || (_orderState$options15 = orderState.options) === null || _orderState$options15 === void 0 || (_orderState$options15 = _orderState$options15.address) === null || _orderState$options15 === void 0 ? void 0 : _orderState$options15.location,
     setErrors: setMapErrors
   })), !isChew && hasHighRatedBusiness && !props.franchiseId && !hideHighestBusiness && /*#__PURE__*/_react.default.createElement(_styles.HightestRatedWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Divider, null), /*#__PURE__*/_react.default.createElement(_HighestRated.HighestRated, {
     propsToFetch: props.propsToFetch,
@@ -346,11 +424,11 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     color: "primary",
     onClick: handleOpenCities
   }, (citiesState === null || citiesState === void 0 || (_citiesState$cities8 = citiesState.cities) === null || _citiesState$cities8 === void 0 || (_citiesState$cities8 = _citiesState$cities8.find(function (city) {
-    var _orderState$options10;
-    return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options10 = orderState.options) === null || _orderState$options10 === void 0 ? void 0 : _orderState$options10.city_id);
+    var _orderState$options16;
+    return (city === null || city === void 0 ? void 0 : city.id) === (orderState === null || orderState === void 0 || (_orderState$options16 = orderState.options) === null || _orderState$options16 === void 0 ? void 0 : _orderState$options16.city_id);
   })) === null || _citiesState$cities8 === void 0 ? void 0 : _citiesState$cities8.name) || t('SELECT_A_CITY', 'Select a city')))), isCustomerMode && activeMap && /*#__PURE__*/_react.default.createElement(_BusinessesMap.BusinessesMap, {
     businessList: businessesList.businesses,
-    userLocation: orderState === null || orderState === void 0 || (_orderState$options11 = orderState.options) === null || _orderState$options11 === void 0 || (_orderState$options11 = _orderState$options11.address) === null || _orderState$options11 === void 0 ? void 0 : _orderState$options11.location,
+    userLocation: orderState === null || orderState === void 0 || (_orderState$options17 = orderState.options) === null || _orderState$options17 === void 0 || (_orderState$options17 = _orderState$options17.address) === null || _orderState$options17 === void 0 ? void 0 : _orderState$options17.location,
     setErrors: setMapErrors
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!isCustomLayout && isCustomerMode && (businessesList === null || businessesList === void 0 || (_businessesList$busin5 = businessesList.businesses) === null || _businessesList$busin5 === void 0 ? void 0 : _businessesList$busin5.length) > 0 || isChew) && /*#__PURE__*/_react.default.createElement(_styles.BusinessesTitle, null, t('BUSINESSES', 'Businesses')), /*#__PURE__*/_react.default.createElement(_styles.BusinessList, null, !businessesList.loading && businessesList.businesses.length === 0 && (businessesList === null || businessesList === void 0 ? void 0 : businessesList.fetched) && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
     content: t('NOT_FOUND_BUSINESSES', 'No businesses to delivery / pick up at this address, please change filters or change address.')
@@ -364,14 +442,14 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
       height: '44px'
     }
   }, t('CHANGE_ADDRESS', 'Select other Address'))), (_businessesList$busin6 = businessesList.businesses) === null || _businessesList$busin6 === void 0 ? void 0 : _businessesList$busin6.map(function (business) {
-    var _orderState$options12, _business$reviews;
+    var _orderState$options18, _business$reviews;
     return /*#__PURE__*/_react.default.createElement(_BusinessController.BusinessController, {
       key: business.id,
       className: "card",
       business: business,
       isBusinessOpen: business.open,
       handleCustomClick: handleBusinessClick,
-      orderType: orderState === null || orderState === void 0 || (_orderState$options12 = orderState.options) === null || _orderState$options12 === void 0 ? void 0 : _orderState$options12.type,
+      orderType: orderState === null || orderState === void 0 || (_orderState$options18 = orderState.options) === null || _orderState$options18 === void 0 ? void 0 : _orderState$options18.type,
       isCustomLayout: isCustomLayout,
       isCustomerMode: isCustomerMode,
       onPreorderBusiness: setPreorderBusiness,
@@ -389,13 +467,13 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
       setFavoriteIds: setFavoriteIds
     });
   }), (businessesList.loading || !(businessesList !== null && businessesList !== void 0 && businessesList.fetched)) && _toConsumableArray(Array((paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.nextPageItems) > 4 ? paginationProps.nextPageItems : 8).keys()).map(function (i) {
-    var _orderState$options13;
+    var _orderState$options19;
     return /*#__PURE__*/_react.default.createElement(_BusinessController.BusinessController, {
       key: i,
       className: "card",
       business: {},
       isSkeleton: true,
-      orderType: orderState === null || orderState === void 0 || (_orderState$options13 = orderState.options) === null || _orderState$options13 === void 0 ? void 0 : _orderState$options13.type
+      orderType: orderState === null || orderState === void 0 || (_orderState$options19 = orderState.options) === null || _orderState$options19 === void 0 ? void 0 : _orderState$options19.type
     });
   }))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: isPreorder,
@@ -448,7 +526,7 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
     isCustomerMode: isCustomerMode
   }) : /*#__PURE__*/_react.default.createElement(_styles.AddressFormWrapper, null, /*#__PURE__*/_react.default.createElement(_AddressForm.AddressForm, {
     useValidationFileds: true,
-    address: (orderState === null || orderState === void 0 || (_orderState$options14 = orderState.options) === null || _orderState$options14 === void 0 ? void 0 : _orderState$options14.address) || {},
+    address: (orderState === null || orderState === void 0 || (_orderState$options20 = orderState.options) === null || _orderState$options20 === void 0 ? void 0 : _orderState$options20.address) || {},
     onCancel: function onCancel() {
       return setModals(_objectSpread(_objectSpread({}, modals), {}, {
         formOpen: false
@@ -475,13 +553,37 @@ var BusinessesListingUI = function BusinessesListingUI(props) {
   }));
 };
 var OriginalBusinessesListing = function OriginalBusinessesListing(props) {
+  var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage4 = _slicedToArray(_useLanguage3, 2),
+    t = _useLanguage4[1];
   var businessListingProps = _objectSpread(_objectSpread({}, props), {}, {
     UIComponent: BusinessesListingUI,
     paginationSettings: {
       initialPage: 1,
       pageSize: 25,
       controlType: 'infinity'
-    }
+    },
+    orderTypes: props.orderTypes || [{
+      value: 1,
+      text: t('DELIVERY', 'Delivery'),
+      description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
+    }, {
+      value: 2,
+      text: t('PICKUP', 'Pickup'),
+      description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
+    }, {
+      value: 3,
+      text: t('EAT_IN', 'Eat in'),
+      description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
+    }, {
+      value: 4,
+      text: t('CURBSIDE', 'Curbside'),
+      description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
+    }, {
+      value: 5,
+      text: t('DRIVE_THRU', 'Drive thru'),
+      description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
+    }]
   });
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.BusinessList, businessListingProps);
 };

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

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperSearch = exports.SearchContainer = exports.PreviousOrders = exports.HightestRatedWrapper = exports.HeaderSearchMode = exports.ErrorMessage = exports.Divider = exports.BusinessesTitle = exports.BusinessSearch = exports.BusinessLogosWrapper = exports.BusinessLogosContainer = exports.BusinessLogo = exports.BusinessList = exports.BusinessHeroImgStyled = exports.BusinessHeroImg = exports.BusinessContainer = exports.BusinessBanner = exports.AddressFormWrapper = void 0;
+exports.WrapperSearch = exports.TypesWrapper = exports.TypesContainer = exports.TypeButton = exports.Title = exports.SearchContainer = exports.PreviousOrders = exports.IconTypeButton = exports.HightestRatedWrapper = exports.HeaderSearchMode = exports.ErrorMessage = exports.Divider = exports.BusinessesTitle = exports.BusinessSearch = exports.BusinessLogosWrapper = exports.BusinessLogosContainer = exports.BusinessLogo = exports.BusinessList = exports.BusinessHeroImgStyled = exports.BusinessHeroImg = exports.BusinessContainer = exports.BusinessBanner = exports.AddressFormWrapper = exports.AdditionalTypesContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _react = _interopRequireDefault(require("react"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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; }
@@ -88,4 +88,38 @@ exports.BusinessLogosContainer = BusinessLogosContainer;
 var HeaderSearchMode = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 200px;\n"])));
 exports.HeaderSearchMode = HeaderSearchMode;
 var AddressFormWrapper = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  @media (min-width: 450px) {\n    margin-top: 20px;\n  }\n"])));
-exports.AddressFormWrapper = AddressFormWrapper;
+exports.AddressFormWrapper = AddressFormWrapper;
+var IconTypeButton = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 44px;\n  height: 44px;\n  background: ", ";\n  border-radius: 44px;\n"])), function (_ref5) {
+  var _theme$colors;
+  var activated = _ref5.activated,
+    theme = _ref5.theme;
+  return activated ? theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.white : '#F3F9FF';
+});
+exports.IconTypeButton = IconTypeButton;
+var TypesContainer = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n  margin: 42px 20px 0px 20px;\n"])));
+exports.TypesContainer = TypesContainer;
+var AdditionalTypesContainer = _styledComponents.default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  width: 60%;\n  display: flex;\n  margin-bottom: 20px;\n  margin-left: 20px;\n  button {\n    padding: 4px 10px;\n    border-radius: 50px;\n    font-size: 10px;\n    line-height: 0;\n    height: 25px;\n    margin-right: 20px;\n  }\n  .activated {\n    color: ", "\n  }\n"])), function (_ref6) {
+  var _theme$colors2;
+  var theme = _ref6.theme;
+  return theme === null || theme === void 0 || (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.darkTextColor;
+});
+exports.AdditionalTypesContainer = AdditionalTypesContainer;
+var TypeButton = _styledComponents.default.div(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 215px;\n  height: 75px;\n  border-radius: 7.6px;\n  padding: 16px;\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);\n  margin-right: 32px;\n  margin-bottom: 32px;\n  cursor: pointer;\n  background: ", ";\n  p{\n    margin: 0;\n    margin-left: 33px;\n    ", "\n  }\n"])), function (_ref7) {
+  var _theme$colors3, _theme$colors4;
+  var activated = _ref7.activated,
+    theme = _ref7.theme;
+  return activated ? theme === null || theme === void 0 || (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.primary : theme === null || theme === void 0 || (_theme$colors4 = theme.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.white;
+}, function (_ref8) {
+  var _theme$colors5;
+  var activated = _ref8.activated,
+    theme = _ref8.theme;
+  return activated && (0, _styledComponents.css)(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), theme === null || theme === void 0 || (_theme$colors5 = theme.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.white);
+});
+exports.TypeButton = TypeButton;
+var Title = _styledComponents.default.h2(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  color: ", ";\n  margin: 0px 20px 5px 20px;\n"])), function (props) {
+  var _props$theme3;
+  return (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.colors.headingColor;
+});
+exports.Title = Title;
+var TypesWrapper = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  margin-left: 20px;\n  width: 600px;\n"])));
+exports.TypesWrapper = TypesWrapper;