ordering-ui-external 10.10.22 → 11.0.0

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

@@ -32,10 +32,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ProductOptionSubOptionPropsAreEqual = function ProductOptionSubOptionPropsAreEqual(prevProps, nextProps) {
-  return JSON.stringify(prevProps.state) === JSON.stringify(nextProps.state) && prevProps.pizzaType === nextProps.pizzaType && prevProps.balance === nextProps.balance && JSON.stringify(prevProps.productCart) === JSON.stringify(nextProps.productCart);
+  return JSON.stringify(prevProps.state) === JSON.stringify(nextProps.state) && JSON.stringify(prevProps.pizzaState) === JSON.stringify(nextProps.pizzaState) && prevProps.balance === nextProps.balance && JSON.stringify(prevProps.productCart) === JSON.stringify(nextProps.productCart);
 };
 var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props) {
-  var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _pizzaState, _props$beforeElements, _props$beforeComponen, _pizzaState2, _props$afterComponent, _props$afterElements;
   var state = props.state,
     increment = props.increment,
     decrement = props.decrement,
@@ -46,9 +46,8 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
     changePosition = props.changePosition,
     isSoldOut = props.isSoldOut,
     setIsScrollAvailable = props.setIsScrollAvailable,
-    onChange = props.onChange,
-    pizzaType = props.pizzaType,
-    productCart = props.productCart;
+    usePizzaValidation = props.usePizzaValidation,
+    pizzaState = props.pizzaState;
   var disableIncrement = option !== null && option !== void 0 && option.limit_suboptions_by_max ? balance === (option === null || option === void 0 ? void 0 : option.max) || state.quantity === suboption.max : state.quantity === (suboption === null || suboption === void 0 ? void 0 : suboption.max) || !state.selected && balance === (option === null || option === void 0 ? void 0 : option.max);
   var price = option !== null && option !== void 0 && option.with_half_option && suboption !== null && suboption !== void 0 && suboption.half_price && state.position !== 'whole' ? suboption === null || suboption === void 0 ? void 0 : suboption.half_price : suboption === null || suboption === void 0 ? void 0 : suboption.price;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
@@ -78,16 +77,18 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
     var _option$suboptions;
     dirtyRef.current = true;
     toggleSelect();
-    if (balance === (option === null || option === void 0 ? void 0 : option.max) && (option === null || option === void 0 || (_option$suboptions = option.suboptions) === null || _option$suboptions === void 0 ? void 0 : _option$suboptions.length) > balance && !((option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 ? void 0 : option.max) === 1) && !state.selected) {
+    var minMaxValidation = option !== null && option !== void 0 && option.with_half_option ? usePizzaValidation : balance === (option === null || option === void 0 ? void 0 : option.max) && (option === null || option === void 0 || (_option$suboptions = option.suboptions) === null || _option$suboptions === void 0 ? void 0 : _option$suboptions.length) > balance && !((option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 ? void 0 : option.max) === 1);
+    if (!state.selected && minMaxValidation) {
       setShowMessage(true);
     }
   };
   (0, _react.useEffect)(function () {
     var _option$suboptions2;
-    if (!(balance === (option === null || option === void 0 ? void 0 : option.max) && (option === null || option === void 0 || (_option$suboptions2 = option.suboptions) === null || _option$suboptions2 === void 0 ? void 0 : _option$suboptions2.length) > balance && !((option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 ? void 0 : option.max) === 1) && !state.selected)) {
+    var minMaxValidation = option !== null && option !== void 0 && option.with_half_option ? usePizzaValidation : !state.selected && balance === (option === null || option === void 0 ? void 0 : option.max) && (option === null || option === void 0 || (_option$suboptions2 = option.suboptions) === null || _option$suboptions2 === void 0 ? void 0 : _option$suboptions2.length) > balance && !((option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 ? void 0 : option.max) === 1);
+    if (!minMaxValidation) {
       setShowMessage(false);
     }
-  }, [balance]);
+  }, [balance, pizzaState === null || pizzaState === void 0 || (_pizzaState = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState === void 0 ? void 0 : _pizzaState.value]);
   (0, _react.useEffect)(function () {
     if (balance === (option === null || option === void 0 ? void 0 : option.max) && state !== null && state !== void 0 && state.selected && dirtyRef) {
       if ((dirtyRef === null || dirtyRef === void 0 ? void 0 : dirtyRef.current) !== null) {
@@ -97,10 +98,10 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
     }
   }, [state === null || state === void 0 ? void 0 : state.selected]);
   (0, _react.useEffect)(function () {
-    if (pizzaType === 'mitad y mitad' && option !== null && option !== void 0 && option.with_half_option) {
+    if (option !== null && option !== void 0 && option.with_half_option) {
       handlePosition({}, 'left');
     }
-  }, [pizzaType, state === null || state === void 0 ? void 0 : state.selected, suboption === null || suboption === void 0 ? void 0 : suboption.id]);
+  }, [state === null || state === void 0 ? void 0 : state.selected, suboption === null || suboption === void 0 ? void 0 : suboption.id]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -126,21 +127,21 @@ var ProductOptionSubOptionUI = /*#__PURE__*/_react.default.memo(function (props)
     disabled: disableIncrement || isSoldOut,
     onClick: handleIncrement
   }))), /*#__PURE__*/_react.default.createElement(_styles.PositionControl, null, (option === null || option === void 0 ? void 0 : option.with_half_option) && (state === null || state === void 0 ? void 0 : state.selected) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
-    className: [pizzaType === 'center' ? 'disabled disable-clicks' : '', 'reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(function (classname) {
+    className: ['reverse', state.selected && state.position === 'left' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {
       return handlePosition(e, 'left');
     }
   }), /*#__PURE__*/_react.default.createElement(_BsCircleFill.default, {
-    className: [pizzaType === 'mitad y mitad' ? 'disabled' : '', state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
+    className: [(pizzaState === null || pizzaState === void 0 || (_pizzaState2 = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState2 === void 0 ? void 0 : _pizzaState2.value) === (option === null || option === void 0 ? void 0 : option.max) ? 'disabled' : '', state.selected && state.position === 'whole' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {
       return handlePosition(e, 'whole');
     }
   }), /*#__PURE__*/_react.default.createElement(_BsCircleHalf.default, {
-    className: [pizzaType === 'center' ? 'disabled disable-clicks' : '', state.selected && state.position === 'right' ? 'selected' : null].filter(function (classname) {
+    className: [state.selected && state.position === 'right' ? 'selected' : null].filter(function (classname) {
       return classname;
     }).join(' '),
     onClick: function onClick(e) {

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

@@ -25,7 +25,7 @@ var Text = exports.Text = _styledComponents.default.div(_templateObject4 || (_te
   return props.theme.colors.primary;
 }, function (props) {
   var _props$theme2;
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;\n    "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-left: 0;\n      margin-right: 10px;    \n    "])));
 }, function (_ref) {
   var noMargin = _ref.noMargin;
   return noMargin && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    span {\n      margin: 0;\n    }\n  "])));

package/_modules/themes/five/src/components/SignUpDriver/layouts/NewSignUpDriver/index.js

@@ -57,7 +57,8 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     saveCustomerUser = props.saveCustomerUser,
     fieldsNotValid = props.fieldsNotValid,
     signupData = props.signupData,
-    enableReCaptcha = props.enableReCaptcha;
+    enableReCaptcha = props.enableReCaptcha,
+    isDriverSignup = props.isDriverSignup;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -358,7 +359,7 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     className: "formButton",
     disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading)
   }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SUBMIT', 'Submit')))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
-    title: t('SIGN_UP_FOR_BUSINESS', 'Sign up for business'),
+    title: isDriverSignup ? t('SIGN_UP_FOR_DRIVER', 'Sign up for driver') : t('SIGN_UP_FOR_BUSINESS', 'Sign up for business'),
     content: alertState.content,
     acceptText: t('ACCEPT', 'Accept'),
     open: alertState.open,

package/_modules/themes/five/src/components/SignUpDriver/layouts/OldSignUpDriver/index.js

@@ -57,7 +57,8 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     saveCustomerUser = props.saveCustomerUser,
     fieldsNotValid = props.fieldsNotValid,
     signupData = props.signupData,
-    enableReCaptcha = props.enableReCaptcha;
+    enableReCaptcha = props.enableReCaptcha,
+    isDriverSignup = props.isDriverSignup;
   var theme = (0, _styledComponents.useTheme)();
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
@@ -353,7 +354,7 @@ var SignUpDriverUI = function SignUpDriverUI(props) {
     type: "submit",
     disabled: formState.loading || (validationFields === null || validationFields === void 0 ? void 0 : validationFields.loading)
   }, formState.loading ? "".concat(t('LOADING', 'Loading'), "...") : t('SUBMIT', 'Submit')))), /*#__PURE__*/_react.default.createElement(_Confirm.Alert, {
-    title: t('SIGN_UP_FOR_BUSINESS', 'Sign up for business'),
+    title: isDriverSignup ? t('SIGN_UP_FOR_DRIVER', 'Sign up for driver') : t('SIGN_UP_FOR_BUSINESS', 'Sign up for business'),
     content: alertState.content,
     acceptText: t('ACCEPT', 'Accept'),
     open: alertState.open,

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

@@ -37,7 +37,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var SingleProductCardUI = function SingleProductCardUI(props) {
+var singleProductCardPropsAreEqual = function singleProductCardPropsAreEqual(prevProps, nextProps) {
+  return JSON.stringify(prevProps.product) === JSON.stringify(nextProps.product) && prevProps.isSkeleton === nextProps.isSkeleton && prevProps.isSoldOut === nextProps.isSoldOut && prevProps.isCartOnProductsList === nextProps.isCartOnProductsList && prevProps.productAddedToCartLength === nextProps.productAddedToCartLength;
+};
+var SingleProductCardUI = /*#__PURE__*/_react.default.memo(function (props) {
   var _theme$business_view$, _theme$business_view, _theme$business_view2, _theme$business_view3, _theme$viewString, _theme$business_view4, _theme$images, _theme$images2, _product$ribbon, _product$ribbon2, _product$ribbon3, _product$ribbon4, _product$ribbon5, _theme$images3, _product$ribbon6, _theme$defaultLanguag, _theme$defaultLanguag2, _theme$defaultLanguag3, _theme$defaultLanguag4;
   var product = props.product,
     isSoldOut = props.isSoldOut,
@@ -175,7 +178,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
     style: useCustomFunctionality && customStyle,
     className: "product-card",
     isShowAddButt: !useCustomFunctionality && !hideAddButton && !isSkeleton
-  }, isObservedValidation ? /*#__PURE__*/_react.default.createElement("div", null, !useCustomFunctionality && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isSkeleton && productAddedToCartLength > 0 && /*#__PURE__*/_react.default.createElement(_styles.QuantityContainer, null, /*#__PURE__*/_react.default.createElement("span", null, productAddedToCartLength)), /*#__PURE__*/_react.default.createElement(_styles.CardInfo, {
+  }, isObservedValidation && /*#__PURE__*/_react.default.createElement("div", null, !useCustomFunctionality && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isSkeleton && productAddedToCartLength > 0 && /*#__PURE__*/_react.default.createElement(_styles.QuantityContainer, null, /*#__PURE__*/_react.default.createElement("span", null, productAddedToCartLength)), /*#__PURE__*/_react.default.createElement(_styles.CardInfo, {
     soldOut: isSoldOut || maxProductQuantity <= 0,
     isBgimage: optimizeImage((product === null || product === void 0 ? void 0 : product.images) || (theme === null || theme === void 0 || (_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.dummies) === null || _theme$images === void 0 ? void 0 : _theme$images.product), 'h_86,c_limit'),
     oneLine: isPreviously
@@ -230,16 +233,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
       fontSize: 16,
       fontWeight: 500
     }
-  }, customText)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.SkeletonCardInfo, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 100
-  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 100
-  }), /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    width: 100
-  })), /*#__PURE__*/_react.default.createElement(_styles.SkeletonCardLogo, null, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-    height: 75,
-    width: 75
-  }))), !useCustomFunctionality && !hideAddButton && !isSkeleton && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, customText)), !useCustomFunctionality && !hideAddButton && !isSkeleton && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     outline: true,
     color: "primary",
     disabled: productAddedToCartLength && (product === null || product === void 0 ? void 0 : product.maximum_per_order) && productAddedToCartLength >= (product === null || product === void 0 ? void 0 : product.maximum_per_order)
@@ -312,7 +306,7 @@ var SingleProductCardUI = function SingleProductCardUI(props) {
     },
     closeOnBackdrop: false
   }));
-};
+}, singleProductCardPropsAreEqual);
 var SingleProductCard = exports.SingleProductCard = function SingleProductCard(props) {
   var singleProductCardProps = _objectSpread(_objectSpread({}, props), {}, {
     UIComponent: SingleProductCardUI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "10.10.22",
+  "version": "11.0.0",
   "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.11.19",
+    "ordering-components-external": "10.0.0",
     "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",

package/src/components/BusinessProductsList/index.js

@@ -33,6 +33,14 @@ const BusinessProductsListUI = (props) => {
 
   const [, t] = useLanguage()
 
+  const uniqueFeaturedProducts = (data, key) => {
+    return [
+      ...new Map(
+        data.map(p => [key(p), p])
+      ).values()
+    ]
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -69,7 +77,7 @@ const BusinessProductsListUI = (props) => {
                   <WrapAllCategories>
                     <h3>{t('FEATURED', 'Featured')}</h3>
                     <ProductsListing>
-                      {categoryState.products?.sort((a, b) => a.rank - b.rank).map(product => product.featured && (
+                      {uniqueFeaturedProducts(categoryState.products?.sort((a, b) => a.rank - b.rank).filter((p, i, hash) => p.featured), (product) => product.name)?.sort((a, b) => a.rank - b.rank).map(product => (
                         <SingleProductCard
                           key={product?.id}
                           isSoldOut={(product.inventoried && !product.quantity)}

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

@@ -17,7 +17,7 @@ export const HeaderItem = styled.div`
         margin-right: 10px;
       ` : css`
         margin-left: 10px;
-      `}
+      `} 
     }
     svg {
       font-size: 16px;

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

@@ -40,7 +40,6 @@ import { HeaderOption } from '../HeaderOption'
 import { SidebarMenu } from '../SidebarMenu'
 import { UserDetails } from '../UserDetails'
 import { Confirm } from '../Confirm'
-import { getDistance } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
 import { AdminAreaPopover } from '../AdminAreaPopover'
 

package/src/themes/callcenterOriginal/src/components/Header/styles.js

@@ -184,7 +184,7 @@ export const Menu = styled.div`
       min-width: auto;
       text-overflow: ellipsis;
       overflow: hidden;
-      width: 40px;
+      min-width: 40px;
     }
 
     @media (min-width: 1123px) {
@@ -336,7 +336,7 @@ export const MomentMenu = styled.div`
   }
 
   @media (min-width: 1400px) {
-    width: 400px;
+    width: 300px;
   }
 
   > div {

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

@@ -0,0 +1,57 @@
+import { useLanguage } from 'ordering-components-external'
+import React from 'react'
+import { ContainerButton, SubCategoriesContainer, SubCategoriesInnerContainer } from '../styles'
+import { AutoScroll } from '../../AutoScroll'
+import { XLg as Close } from 'react-bootstrap-icons'
+import { Button } from '../../../styles/Buttons'
+
+const subcategoriesComponentPropsAreEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps.category) === JSON.stringify(nextProps.category) &&
+    JSON.stringify(prevProps.subcategoriesSelected) === JSON.stringify(nextProps.subcategoriesSelected)
+}
+
+export const SubcategoriesComponent = React.memo((props) => {
+  const {
+    category,
+    subcategoriesSelected,
+    onClickSubcategory
+  } = props
+
+  const [, t] = useLanguage()
+  const allsubcategorySelected = !subcategoriesSelected?.some(subcategory => category?.id === subcategory?.parent_category_id)
+  return (
+    <SubCategoriesContainer>
+      <SubCategoriesInnerContainer>
+        <AutoScroll scrollId={`scroll_${category?.id}`}>
+          <ContainerButton
+            isSelected={allsubcategorySelected}
+          >
+            <Button
+              onClick={() => onClickSubcategory(null, category)}
+              color={allsubcategorySelected ? 'primary' : 'lightGray'}
+            >
+              {t('ALL', 'All')}
+            </Button>
+          </ContainerButton>
+          {category?.subcategories?.map(subcategory => {
+            const isSubcategorySelected = subcategoriesSelected?.find(_subcategory => _subcategory?.id === subcategory?.id)
+            return (
+              <ContainerButton
+                key={subcategory?.id}
+                isSelected={isSubcategorySelected}
+              >
+                <Button
+                  onClick={() => onClickSubcategory(subcategory, category)}
+                  color={isSubcategorySelected ? 'primary' : 'lightGray'}
+                >
+                  {subcategory?.name} {isSubcategorySelected && <Close />}
+                </Button>
+              </ContainerButton>
+            )
+          }
+          )}
+        </AutoScroll>
+      </SubCategoriesInnerContainer>
+    </SubCategoriesContainer>
+  )
+}, subcategoriesComponentPropsAreEqual)

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

@@ -6,7 +6,6 @@ import { NotFoundSource } from '../NotFoundSource'
 import { Modal } from '../Modal'
 import { shape } from '../../../../../utils'
 import { AutoScroll } from '../AutoScroll'
-import { XLg as Close } from 'react-bootstrap-icons'
 
 import {
   ProductsContainer,
@@ -17,16 +16,13 @@ import {
   HeaderWrapper,
   DescriptionModalContainer,
   RibbonBox,
-  SubCategoriesContainer,
-  ContainerButton,
   CategoryDescription,
   DescriptionContainer,
   SubcategorySearchContainer,
-  SubCategoriesInnerContainer,
   PreviouslyOrderedContainer,
   PreviouslyOrderedWrapper
 } from './styles'
-import { Button } from '../../styles/Buttons'
+import { SubcategoriesComponent } from './SubcategoriesComponent'
 
 const BusinessProductsListUI = (props) => {
   const {
@@ -60,6 +56,7 @@ const BusinessProductsListUI = (props) => {
   const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
   const [openDescription, setOpenDescription] = useState(null)
   const headerRef = useRef()
+
   const onClickSubcategory = (subCategory, parentCategory) => {
     if (parentCategory && isLazy) {
       onClickCategory(parentCategory)
@@ -76,46 +73,6 @@ const BusinessProductsListUI = (props) => {
     }
   }
 
-  const SubcategoriesComponent = ({ category }) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some(subcategory => category?.id === subcategory?.parent_category_id)
-
-    return (
-      <SubCategoriesContainer>
-        <SubCategoriesInnerContainer>
-          <AutoScroll scrollId={`scroll_${category?.id}`}>
-            <ContainerButton
-              isSelected={allsubcategorySelected}
-            >
-              <Button
-                onClick={() => onClickSubcategory(null, category)}
-                color={allsubcategorySelected ? 'primary' : 'lightGray'}
-              >
-                {t('ALL', 'All')}
-              </Button>
-            </ContainerButton>
-            {category?.subcategories?.map(subcategory => {
-              const isSubcategorySelected = subcategoriesSelected?.find(_subcategory => _subcategory?.id === subcategory?.id)
-              return (
-                <ContainerButton
-                  key={subcategory?.id}
-                  isSelected={isSubcategorySelected}
-                >
-                  <Button
-                    onClick={() => onClickSubcategory(subcategory, category)}
-                    color={isSubcategorySelected ? 'primary' : 'lightGray'}
-                  >
-                    {subcategory?.name} {isSubcategorySelected && <Close />}
-                  </Button>
-                </ContainerButton>
-              )
-            }
-            )}
-          </AutoScroll>
-        </SubCategoriesInnerContainer>
-      </SubCategoriesContainer>
-    )
-  }
-
   const productsCategorySelected = categoryState.products
     ?.filter(product =>
       !subcategoriesSelected?.find(subcategory => subcategory?.parent_category_id === category?.id) ||
@@ -123,18 +80,16 @@ const BusinessProductsListUI = (props) => {
 
   return (
     <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
       <ProductsContainer>
         {category?.id && (
           <>
             <HeaderWrapper>
               {category?.subcategories?.length > 0 && !isSearchMode && (
-                <SubcategoriesComponent category={category} />
+                <SubcategoriesComponent
+                  category={category}
+                  subcategoriesSelected={subcategoriesSelected}
+                  onClickSubcategory={onClickSubcategory}
+                />
               )}
             </HeaderWrapper>
             <ProductsListing>
@@ -226,7 +181,7 @@ const BusinessProductsListUI = (props) => {
                           productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
-                      {!business?.food && !categoryState?.loading && categoryState?.products?.length > 9 && (
+                      {!business?.food && !categoryState?.loading && categoryState?.products?.filter(product => product.featured)?.length > 9 && (
                         <SingleProductCard
                           useCustomFunctionality
                           onCustomClick={() => onClickCategory(category)}
@@ -293,7 +248,11 @@ const BusinessProductsListUI = (props) => {
                           </CategoryDescription>
                         )}
                         {category?.subcategories?.length > 0 && !isSearchMode && (
-                          <SubcategoriesComponent category={category} />
+                          <SubcategoriesComponent
+                            category={category}
+                            subcategoriesSelected={subcategoriesSelected}
+                            onClickSubcategory={onClickSubcategory}
+                          />
                         )}
                       </HeaderWrapper>
                       <ProductsListing isSubcategorySearch={isSubcategorySearch}>
@@ -444,16 +403,6 @@ const BusinessProductsListUI = (props) => {
           </DescriptionModalContainer>
         </Modal>
       </ProductsContainer>
-      {
-        props.afterComponents?.map((AfterComponent, i) => (
-          <AfterComponent key={i} {...props} />))
-      }
-      {
-        props.afterElements?.map((AfterElement, i) => (
-          <React.Fragment key={i}>
-            {AfterElement}
-          </React.Fragment>))
-      }
     </>
   )
 }

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

@@ -399,7 +399,7 @@ const CartUI = (props) => {
                       )
                     }
                     {
-                      cart?.taxes?.length > 0 && cart?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
+                      cart?.taxes?.length > 0 && cart?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map(tax => (
                         <tr key={tax?.id}>
                           <td className='icon'>
                             {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useLanguage, useOrder, BusinessList as BusinessListController } from 'ordering-components-external'
 import { BusinessController } from '../BusinessController'
 import { Button } from '../../styles/Buttons'
@@ -12,6 +12,9 @@ import {
   BusinessListWrapper
 } from './styles'
 import { AutoScroll } from '../AutoScroll'
+import Modal from '../Modal'
+import { BusinessPreorder } from '../BusinessPreorder'
+import { getCateringValues } from '../../../../../utils'
 
 const HighestRatedUI = (props) => {
   const {
@@ -27,8 +30,25 @@ const HighestRatedUI = (props) => {
 
   const [, t] = useLanguage()
   const [orderState] = useOrder()
+  const [isPreorder, setIsPreorder] = useState(false)
+  const [preorderBusiness, setPreorderBusiness] = useState(null)
 
   const isBusinessWithReviews = businessesList?.businesses?.every((business) => business?.reviews?.total === 0)
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+  const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
+
+  const handleClosePreorder = () => {
+    setIsPreorder(false)
+    setPreorderBusiness(null)
+  }
+
+  useEffect(() => {
+    if (preorderBusiness) setIsPreorder(true)
+  }, [preorderBusiness])
 
   useEffect(() => {
     if (!businessesList.loading) {
@@ -90,6 +110,7 @@ const HighestRatedUI = (props) => {
                       isCustomerMode={isCustomerMode}
                       favoriteIds={favoriteIds}
                       setFavoriteIds={setFavoriteIds}
+                      onPreorderBusiness={setPreorderBusiness}
                     />
                   )
                 ))
@@ -114,6 +135,19 @@ const HighestRatedUI = (props) => {
           </BusinessList>
         </BusinessListWrapper>
       </HighestRatedContainer>
+      <Modal
+        open={isPreorder}
+        width='760px'
+        onClose={() => handleClosePreorder()}
+      >
+        <BusinessPreorder
+          business={preorderBusiness}
+          handleClick={handleBusinessClick}
+          showButton
+          cateringPreorder={!!cateringTypeString}
+          {...cateringValues}
+        />
+      </Modal>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (

package/src/themes/five/src/components/OrderDetails/OrderBillSection.js

@@ -124,7 +124,7 @@ export const OrderBillSection = (props) => {
             )
           }
           {
-            order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
+            order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0 && tax?.target === 'product').map(tax => (
               <tr key={tax?.id}>
                 <td>
                   {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}

package/src/themes/five/src/components/OrderDetails/OrderEta.js

@@ -57,7 +57,7 @@ export const OrderEta = (props) => {
     }
     estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
     const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
-    setEstimatedDeliveryTime(_estimatedTime)
+    setEstimatedDeliveryTime(order?.status === 13 ? parseDate(_delivery, { utc: !!order?.delivery_datetime_utc, outputFormat: outputFormat }) : _estimatedTime)
   }
 
   useEffect(() => {

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

@@ -130,6 +130,7 @@ const OrderDetailsUI = (props) => {
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
+  const preorderStatus = [0, 13]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
@@ -546,7 +547,7 @@ const OrderDetailsUI = (props) => {
                         </DirectionButtonWrapper>
                       )}
                     </BusinessInfo>
-                    {!hideOrderActions && (
+                    {!hideOrderActions && !preorderStatus.includes(order?.status) && (
                       <BtsOrderStatus>
                         <div>
                           <Button

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

@@ -98,7 +98,7 @@ const ProductOptionsUI = (props) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productAddedToCartLength,
-    pizzaType,
+    pizzaState,
     handleFavoriteProduct,
     handleCreateGuestUser,
     actionStatus,
@@ -654,7 +654,7 @@ const ProductOptionsUI = (props) => {
                                       isSoldOut={isSoldOut}
                                       scrollDown={scrollDown}
                                       setIsScrollAvailable={setIsScrollAvailable}
-                                      pizzaType={pizzaType}
+                                      pizzaState={pizzaState}
                                       productCart={productCart}
                                     />
                                   )