ordering-ui-external 10.4.0 → 10.5.0

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

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

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

@@ -106,7 +106,7 @@ var PriceWrapper = _styledComponents.default.div(_templateObject27 || (_template
   return isOffPrice && (0, _styledComponents.css)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n        min-width: 64px;\n      "])));
 });
 exports.PriceWrapper = PriceWrapper;
-var QuantityContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 100%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-20px, 50%);\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref14) {
+var QuantityContainer = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  position: absolute;\n  left: 100%;\n  bottom: 98%;\n  width: 25px;\n  height: 25px;\n  text-align: center;\n  border-radius: 50%;\n  transform: translate(-20px, 50%);\n  @media (min-width: 768px) {\n    transform: translate(-50%, 50%);\n  }\n"])), function (_ref14) {
   var theme = _ref14.theme;
   return theme.colors.primary;
 }, function (_ref15) {

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

@@ -365,7 +365,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     values: validationFields === null || validationFields === void 0 || (_validationFields$fie7 = validationFields.fields) === null || _validationFields$fie7 === void 0 ? void 0 : _validationFields$fie7.checkout
   }).map(function (field) {
     var _ref3, _formState$changes$fi, _ref4, _formState$changes$fi2;
-    return showField && showField(field.code) && showFieldWithTheme(field.code) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    return (showField && showField(field.code) && showFieldWithTheme(field.code) || (user === null || user === void 0 ? void 0 : user.guest_id)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: field.id
     }, field.code === 'email' ? (requiredFields && requiredFields.includes(field.code) || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputGroup, null, /*#__PURE__*/_react.default.createElement("p", null, t(field.code.toUpperCase(), field === null || field === void 0 ? void 0 : field.name)), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
       key: field.id,
@@ -396,7 +396,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
       }),
       autoComplete: "off"
     })));
-  }), showInputBirthday && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('BIRTHDATE', 'Birthdate')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
+  }), (!(user !== null && user !== void 0 && user.guest_id) && showInputBirthday || (user === null || user === void 0 ? void 0 : user.guest_id) && requiredFields.includes('birthdate')) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('BIRTHDATE', 'Birthdate')), /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
     borderBottom: true,
     className: "form",
     value: birthdate ? (0, _moment.default)(birthdate).format('YYYY/MM/DD') : '',
@@ -408,7 +408,7 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     value: birthdate,
     onChange: _handleChangeDate,
     name: 'birthdate'
-  })), !!showInputPhoneNumber && showCustomerCellphone && (requiredFields && requiredFields.includes('cellphone') || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement(_InputPhoneNumber.InputPhoneNumber, {
+  })), (!(user !== null && user !== void 0 && user.guest_id) && !!showInputPhoneNumber || (user === null || user === void 0 ? void 0 : user.guest_id) && requiredFields.includes('cellphone')) && showCustomerCellphone && (requiredFields && requiredFields.includes('cellphone') || !requiredFields) && /*#__PURE__*/_react.default.createElement(_styles.InputPhoneNumberWrapper, null, /*#__PURE__*/_react.default.createElement("p", null, t('PHONE', 'Phone')), /*#__PURE__*/_react.default.createElement(_InputPhoneNumber.InputPhoneNumber, {
     user: user,
     value: userPhoneNumber,
     setValue: handleChangePhoneNumber,
@@ -464,24 +464,12 @@ var UserFormDetailsUI = function UserFormDetailsUI(props) {
     color: "primary",
     type: "submit",
     disabled: formState.loading
-  }, formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')), requiredFields && !(userSession !== null && userSession !== void 0 && userSession.guest_id) && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }, formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')), requiredFields && /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     id: "form-btn",
     color: "primary",
     type: "submit",
     disabled: formState.loading
-  }, formState.loading ? t('UPDATING', 'Updating...') : t('CONTINUE', 'Continue'))), requiredFields && isCheckout && (userSession === null || userSession === void 0 ? void 0 : userSession.guest_id) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
-    id: "form-btn",
-    color: "primary",
-    type: "button",
-    onClick: function onClick() {
-      return setModalIsOpen(true);
-    },
-    disabled: formState.loading
-  }, formState.loading ? t('UPDATING', 'Updating...') : t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')), isAllowGuest && /*#__PURE__*/_react.default.createElement(_styles.TextLinkWrapper, null, /*#__PURE__*/_react.default.createElement("span", {
-    onClick: function onClick() {
-      return handlePlaceOrderAsGuest();
-    }
-  }, t('PLACE_ORDER_AS_GUEST', 'Place order as guest'))))) : /*#__PURE__*/_react.default.createElement(_styles.SkeletonForm, null, _toConsumableArray(Array(6)).map(function (item, i) {
+  }, formState.loading ? t('UPDATING', 'Updating...') : t('CONTINUE', 'Continue')))) : /*#__PURE__*/_react.default.createElement(_styles.SkeletonForm, null, _toConsumableArray(Array(6)).map(function (item, i) {
     return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
       key: i
     });

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

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextLinkWrapper = exports.SwitchWrapper = exports.SkeletonForm = exports.PromotionsWrapper = exports.NotificationsGroupSwitchWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
+exports.SwitchWrapper = exports.SkeletonForm = exports.PromotionsWrapper = exports.NotificationsGroupSwitchWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -44,8 +44,4 @@ var NotificationsGroupSwitchWrapper = _styledComponents.default.div(_templateObj
 });
 exports.NotificationsGroupSwitchWrapper = NotificationsGroupSwitchWrapper;
 var SwitchWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
-exports.SwitchWrapper = SwitchWrapper;
-var TextLinkWrapper = _styledComponents.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  span {\n    font-size: 14px;\n    text-align: center;\n    cursor: pointer;\n    color: ", ";\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-  return props.theme.colors.primary;
-});
-exports.TextLinkWrapper = TextLinkWrapper;
+exports.SwitchWrapper = SwitchWrapper;

package/index-template.js

@@ -40,6 +40,10 @@ import credit from './template/assets/images/credit.png'
 import businessSignUpHero from './template/assets/images/business_signup.png'
 import driverSignUpHero from './template/assets/images/driver-signup-hero.png'
 import loyaltyLevel from './template/assets/images/loyalty_level.png'
+import phoneHero from './template/assets/images/phone-hero-callcenter.png'
+import deliveryIco from './template/assets/images/delivery.svg'
+import pickupIco from './template/assets/images/pickup.svg'
+import phone from './template/assets/images/phone.svg'
 
 import orderStatus0 from './template/assets/images/order/status-0.svg'
 import orderStatus1 from './template/assets/images/order/status-1.svg'
@@ -136,7 +140,11 @@ theme.images = {
     businessSignUpHero,
     driverSignUpHero,
     leftArrow,
-    rightArrow
+    rightArrow,
+    phoneHero,
+    deliveryIco,
+    pickupIco,
+    phone
   },
 
   order: {

package/package.json

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

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

@@ -30,7 +30,8 @@ const DeliveriesManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     onOrderRedirect,
     numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus
+    numberOfOrdersBySubstatus,
+    franchiseId
   } = props
 
   const [, t] = useLanguage()
@@ -105,6 +106,7 @@ const DeliveriesManagerUI = (props) => {
               timeStatus={timeStatus}
               numberOfOrdersByStatus={numberOfOrdersByStatus}
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
+              franchiseId={franchiseId}
             />
           </WrapItemView>
         </OrdersContent>

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

@@ -14,6 +14,7 @@ export const OrdersDashboardControls = (props) => {
   const {
     selectedOrderNumber,
     filterValues,
+    franchiseId,
     handleDeleteMultiOrders,
     handleChangeMultiOrdersStatus,
     handleOpenCustomOrderDetail
@@ -26,7 +27,10 @@ export const OrdersDashboardControls = (props) => {
       <OrderDashboardControlsContainer>
         <InnerContnet>
           <CreateCustomOrder handleOpenCustomOrderDetail={handleOpenCustomOrderDetail} />
-          <OrdersExportCSV filterValues={filterValues} />
+          <OrdersExportCSV
+            filterValues={filterValues}
+            franchiseId={franchiseId}
+          />
           {selectedOrderNumber > 0 && (
             <>
               {user?.level !== 5 && (

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

@@ -202,6 +202,7 @@ const OrdersManagerUI = (props) => {
             <OrdersDashboardControls
               selectedOrderNumber={selectedOrderIds?.length}
               filterValues={filterValues}
+              franchiseId={props.franchiseId}
               handleChangeMultiOrdersStatus={handleChangeMultiOrdersStatus}
               handleDeleteMultiOrders={handleDeleteMultiOrders}
               handleOpenCustomOrderDetail={(id) => {
@@ -219,6 +220,7 @@ const OrdersManagerUI = (props) => {
                 driverId={props.driverId}
                 customerId={props.customerId}
                 businessId={props.businessId}
+                franchiseId={props.franchiseId}
                 searchValue={searchValue}
                 filterValues={filterValues}
                 selectedOrderIds={selectedOrderIds}

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

@@ -145,7 +145,7 @@ export const BusinessItemAccordion = (props) => {
               className={`accordion ${setActive}`}
               onClick={(e) => toggleAccordion(e)}
             >
-              <BusinessInfo>
+              <BusinessInfo isOtherInfo={(isClosed && !isStore) || (!isClosed && !isProducts && !isStore)}>
                 {!hideBusinessLogo && (
                   <WrapperBusinessLogo>
                     <BusinessLogo
@@ -153,7 +153,7 @@ export const BusinessItemAccordion = (props) => {
                     />
                   </WrapperBusinessLogo>
                 )}
-                <ContentInfo className='info' isStore={isStore}>
+                <ContentInfo className='info' isStore={isStore} isLogo={!hideBusinessLogo}>
                   <h2>{business?.name}</h2>
                   {!hideBusinessTime && (
                     <TimeContainer>

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

@@ -47,6 +47,9 @@ export const ContentInfo = styled.div`
   flex-direction: column;
   justify-content: center;
   width: 100%;
+  ${({ isLogo }) => isLogo && css`
+    width: calc(100% - 80px);
+  `}
 
   > div {
     display: flex;
@@ -141,18 +144,16 @@ export const AccordionText = styled.div`
 export const BusinessInfo = styled.div`
   display: flex;
   align-items: center;
-  width: 80%;
+  width: calc(100% - 30px);
+  ${({ isOtherInfo }) => isOtherInfo && css`
+    width: calc(100% - 100px);
+  `}
 
   h2 {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  @media (min-width: 576px) {
-    width: 75%;
-  }
-
 `
 
 export const BusinessTotal = styled.div`
@@ -186,7 +187,7 @@ export const BusinessTotal = styled.div`
 `
 
 export const BusinessActions = styled.div`
-  max-width: 30%;
+  max-width: 30px;
   display: flex;
   align-items: center;
   justify-content: flex-end;

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

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

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

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

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

@@ -306,6 +306,8 @@ const BusinessProductsListingUI = (props) => {
       onChangeMetaTag && onChangeMetaTag(curProduct?.seo_title, curProduct?.seo_description, curProduct?.seo_keywords)
     } else {
       onChangeMetaTag && onChangeMetaTag(business?.slug, business?.description, business?.name)
+      updateProductModal(null)
+      setCurProduct(null)
     }
   }, [openProduct, loading, business, curProduct])
 

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

@@ -23,7 +23,13 @@ import {
   BusinessLogosContainer,
   BusinessBanner,
   BusinessLogosWrapper,
-  AddressFormWrapper
+  AddressFormWrapper,
+  Title,
+  TypesContainer,
+  TypeButton,
+  IconTypeButton,
+  TypesWrapper,
+  AdditionalTypesContainer
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
@@ -70,11 +76,13 @@ const BusinessesListingUI = (props) => {
     getCities,
     citiesState,
     logosLayout,
-    actualSlug
+    actualSlug,
+    orderTypes
   } = props
-
+  const allOrderTypes = [1, 2, 3, 4, 5]
+  const pickupTypes = [2, 3, 4, 5]
   const [, t] = useLanguage()
-  const [orderState, { changeCityFilter }] = useOrder()
+  const [orderState, { changeCityFilter, changeType }] = useOrder()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
@@ -86,6 +94,7 @@ const BusinessesListingUI = (props) => {
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
+  const [isPickupSelected, setIsPickupSelected] = useState(pickupTypes.includes(orderState?.options?.type))
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [favoriteIds, setFavoriteIds] = useState([])
   const allCitiesDisabled = citiesState?.cities?.every(city => !city.enabled)
@@ -105,7 +114,7 @@ const BusinessesListingUI = (props) => {
     : orderState?.options?.type === 8
       ? 'catering_pickup'
       : null
-
+  const configTypes = configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const cateringValues = preorderBusiness?.configs && getCateringValues(cateringTypeString, preorderBusiness?.configs)
 
   const handleScroll = useCallback(() => {
@@ -173,6 +182,21 @@ const BusinessesListingUI = (props) => {
     changeCityFilter(cityId === orderState?.options?.city_id ? null : cityId)
   }
 
+  const handleChangeType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      if (value === 1) {
+        setIsPickupSelected(false)
+      }
+    }
+  }
+
+  const handleChangeToPickup = () => {
+    const firstEnabledPickupType = orderTypes.find(type => configTypes?.includes(type.value) && type.value !== 1)?.value
+    handleChangeType(firstEnabledPickupType)
+    setIsPickupSelected(true)
+  }
+
   useEffect(() => {
     if (preorderBusiness) setIsPreorder(true)
   }, [preorderBusiness])
@@ -195,6 +219,30 @@ const BusinessesListingUI = (props) => {
     if (!selectedCity || !selectedCity?.enabled) changeCityFilter(null)
   }, [citiesState, orderState?.options?.city_id])
 
+  useEffect(() => {
+    if (pickupTypes.includes(orderState?.options?.type) && isCustomerMode) {
+      setIsPickupSelected(true)
+    }
+  }, [orderState?.options?.type])
+
+  const OrderTypesComponent = () => {
+    return (
+      <>
+        {orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value) && type.value !== 1) : orderTypes).map((item, i) => (
+          <Button
+            key={item.value}
+            onClick={() => handleChangeType(item.value)}
+            color={orderState?.options?.type === item?.value ? 'primary' : 'secondary'}
+            disabled={orderState?.loading}
+            className={orderState?.options?.type !== item?.value ? 'activated' : ''}
+          >
+            {item.text}
+          </Button>
+        ))}
+      </>
+    )
+  }
+
   if (logosLayout) {
     return (
       <BusinessLogosWrapper>
@@ -234,7 +282,7 @@ const BusinessesListingUI = (props) => {
           {windowSize.width < 576 && (
             <OrderContextUI isBusinessList hideHero={(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero} />
           )}
-          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && (
+          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && !hideHero && !isCustomerMode && (
             <BusinessHeroImg
               bgimage={theme.images?.general?.businessHero}
               height={theme?.business_listing_view?.components?.business_hero?.style?.height}
@@ -242,13 +290,58 @@ const BusinessesListingUI = (props) => {
           )}
         </BusinessBanner>
       )}
-      <OrderProgress
-        isChew={isChew}
-        franchiseId={props.franchiseId}
-        userCustomerId={userCustomer?.id}
-        asDashboard={isCustomerMode}
-        isCustomerMode={isCustomerMode}
-      />
+      {(userCustomer && orderState?.options?.address?.address && isCustomerMode) && (
+        <>
+          <Title>{t('DELIVERY_TYPE', 'Delivery Type')}</Title>
+          <TypesContainer>
+            {configTypes.includes(1) && (
+              <TypeButton onClick={() => handleChangeType(1)} disabled={orderState?.loading} activated={!isPickupSelected}>
+                <IconTypeButton activated={!isPickupSelected}>
+                  <img
+                    src={theme?.images?.general?.deliveryIco}
+                    width={20}
+                    height={20}
+                  />
+                </IconTypeButton>
+                <p>{t('DELIVERY', 'Delivery')}</p>
+              </TypeButton>
+            )}
+            {configTypes.some(type => pickupTypes.includes(type)) && (
+              <TypeButton
+                disabled={orderState?.loading}
+                activated={isPickupSelected}
+                onClick={() => handleChangeToPickup()}
+              >
+                <IconTypeButton activated={isPickupSelected}>
+                  <img
+                    src={theme?.images?.general?.pickupIco}
+                    width={22}
+                    height={22}
+                  />
+                </IconTypeButton>
+                <p>{t('PICKUP', 'Pickup')}</p>
+              </TypeButton>
+            )}
+          </TypesContainer>
+          {isPickupSelected && (
+            <TypesWrapper>
+              <p>{t('WHAT_PICKUP_YOU_NEED', 'What kind of pickup do you need?')}</p>
+              <AdditionalTypesContainer>
+                <OrderTypesComponent />
+              </AdditionalTypesContainer>
+            </TypesWrapper>
+          )}
+        </>
+      )}
+      {!isCustomerMode && (
+        <OrderProgress
+          isChew={isChew}
+          franchiseId={props.franchiseId}
+          userCustomerId={userCustomer?.id}
+          asDashboard={isCustomerMode}
+          isCustomerMode={isCustomerMode}
+        />
+      )}
       {(configs?.business_listing_hide_image?.value !== '1' && isChew) && (
         <BusinessHeroImg
           bgimage={theme.images?.general?.businessHero}
@@ -455,28 +548,27 @@ const BusinessesListingUI = (props) => {
         open={modals.formOpen || modals.listOpen}
         width='70%'
         onClose={() => setModals({ ...modals, formOpen: false, listOpen: false })}
-        >
-          {modals.listOpen ? (
-              <AddressList
-                isModal
-                changeOrderAddressWithDefault
-                userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
-                onCancel={() => setModals({ ...modals, listOpen: false })}
-                isCustomerMode={isCustomerMode}
-              />
-            ) : (
-              <AddressFormWrapper>
-                <AddressForm
-                  useValidationFileds
-                  address={orderState?.options?.address || {}}
-                  onCancel={() => setModals({ ...modals, formOpen: false })}
-                  onSaveAddress={() => setModals({ ...modals, formOpen: false })}
-                  isCustomerMode={isCustomerMode}
-                />
-              </AddressFormWrapper>
-            )
-          }
-        </Modal>
+      >
+        {modals.listOpen ? (
+          <AddressList
+            isModal
+            changeOrderAddressWithDefault
+            userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+            onCancel={() => setModals({ ...modals, listOpen: false })}
+            isCustomerMode={isCustomerMode}
+          />
+        ) : (
+          <AddressFormWrapper>
+            <AddressForm
+              useValidationFileds
+              address={orderState?.options?.address || {}}
+              onCancel={() => setModals({ ...modals, formOpen: false })}
+              onSaveAddress={() => setModals({ ...modals, formOpen: false })}
+              isCustomerMode={isCustomerMode}
+            />
+          </AddressFormWrapper>
+        )}
+      </Modal>
 
       <Alert
         title={!mapErrors ? t('SEARCH', 'Search') : t('BUSINESSES_MAP', 'Businesses Map')}
@@ -492,10 +584,38 @@ const BusinessesListingUI = (props) => {
 }
 
 export const OriginalBusinessesListing = (props) => {
+  const [, t] = useLanguage()
   const businessListingProps = {
     ...props,
     UIComponent: BusinessesListingUI,
-    paginationSettings: { initialPage: 1, pageSize: 25, controlType: 'infinity' }
+    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 <BusinessListController {...businessListingProps} />
 }