ordering-ui-external 1.8.10 → 1.9.0

package/_modules/themes/six/src/components/SearchBar/styles.js

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchWrapper = exports.SearchIcon = exports.DeleteContent = exports.BusinessSearch = void 0;
+exports.SearchWrapper = exports.SearchIcon = exports.FunnelWrapper = exports.DeleteContent = exports.BusinessSearch = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 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) } })); }
@@ -48,7 +48,7 @@ var DeleteContent = _styledComponents.default.span(_templateObject11 || (_templa
 }, function (_ref6) {
   var isClear = _ref6.isClear,
     isHome = _ref6.isHome;
-  return isClear && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    left: initial;\n    right: 20px;\n  "])));
+  return isClear && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    left: initial;\n    right: 40px;\n  "])));
 }, function (props) {
   var _props$theme3;
   return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    transform: translate(30%, 0%);\n  "])));
@@ -59,7 +59,9 @@ var DeleteContent = _styledComponents.default.span(_templateObject11 || (_templa
 exports.DeleteContent = DeleteContent;
 var SearchWrapper = (0, _styledComponents.default)(DeleteContent)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([""])));
 exports.SearchWrapper = SearchWrapper;
-var SearchIcon = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  background-image: url(", ");\n  background-position: right 10px center;\n  background-repeat: no-repeat;\n  background-size: 15px;\n  background-color: ", ";\n\n"])), function (props) {
+var FunnelWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  svg {\n    position: absolute;\n    right: 10px !important;\n    color: #ADB5BD;\n    width: 20px;\n    height: 20px;\n    bottom: 22px;\n  }\n"])));
+exports.FunnelWrapper = FunnelWrapper;
+var SearchIcon = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  background-image: url(", ");\n  background-position: right 10px center;\n  background-repeat: no-repeat;\n  background-size: 15px;\n  background-color: ", ";\n\n"])), function (props) {
   var _props$theme5, _props$theme5$images, _props$theme5$images$;
   return (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : (_props$theme5$images = _props$theme5.images) === null || _props$theme5$images === void 0 ? void 0 : (_props$theme5$images$ = _props$theme5$images.general) === null || _props$theme5$images$ === void 0 ? void 0 : _props$theme5$images$.searchIcon;
 }, function (props) {

package/package.json

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

package/src/components/PaymentOptions/index.js

@@ -8,7 +8,7 @@ import FaCcStripe from '@meronex/icons/fa/FaCcStripe'
 import FaStripeS from '@meronex/icons/fa/FaStripeS'
 import GrStripe from '@meronex/icons/gr/GrStripe'
 import EnPaypal from '@meronex/icons/en/EnPaypal'
-import { 
+import {
   PaymentOptions as PaymentOptionsController,
   useLanguage,
   useOrder,
@@ -91,7 +91,7 @@ const PaymentOptionsUI = (props) => {
   const [{ token }] = useSession()
   const [{ loading: loadingOptions }] = useOrder()
 
-  const list = paymethods ? paymethods?.map(pay => pay.paymethod) : paymethodsList?.paymethods
+  const list = paymethodsList ? paymethodsList?.paymethods : paymethods?.map(pay => pay.paymethod)
 
   const paymethodSelected = props.paySelected || props.paymethodSelected
 
@@ -140,26 +140,26 @@ const PaymentOptionsUI = (props) => {
       <PaymentMethodsContainer>
         <PaymentMethodsList className='payments-list'>
           {!(paymethodsList.loading || isLoading || loadingOptions) &&
-          list?.length > 0 && (
-            list?.sort((a, b) => a.id - b.id).map(paymethod => (
-              <React.Fragment key={paymethod.id}>
-                {
-                  (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
-                    <PayCard
-                      isDisabled={isDisabled}
-                      className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
-                      onClick={() => handlePaymentMethodClick(paymethod)}
-                    >
-                      {getPayIcon(paymethod.id)}
-                      <p>
-                        {t(paymethod.gateway.toUpperCase(), paymethod.name)}
-                      </p>
-                    </PayCard>
-                  )
-                }
-              </React.Fragment>
-            ))
-          )}
+            list?.length > 0 && (
+              list?.sort((a, b) => a.id - b.id).map(paymethod => (
+                <React.Fragment key={paymethod.id}>
+                  {
+                    (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
+                      <PayCard
+                        isDisabled={isDisabled}
+                        className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
+                        onClick={() => handlePaymentMethodClick(paymethod)}
+                      >
+                        {getPayIcon(paymethod.id)}
+                        <p>
+                          {t(paymethod.gateway.toUpperCase(), paymethod.name)}
+                        </p>
+                      </PayCard>
+                    )
+                  }
+                </React.Fragment>
+              ))
+            )}
           {(paymethodsList.loading || isLoading || loadingOptions) && (
             [...Array(5).keys()].map(i => (
               <PayCard key={i} isSkeleton>

package/src/themes/five/index.js

@@ -12,6 +12,7 @@ import { BusinessItemAccordion } from './src/components/BusinessItemAccordion'
 import { BusinessPreorder } from './src/components/BusinessPreorder'
 import { BusinessMenuList } from './src/components/BusinessMenuList'
 import { BusinessProductsCategories } from './src/components/BusinessProductsCategories'
+import { ScheduleAccordion } from './src/components/ScheduleAccordion'
 import { BusinessProductsCategories as CategoriesLayoutGroceries } from './src/components/BusinessProductsCategories/layouts/groceries'
 import { BusinessProductsList } from './src/components/BusinessProductsList'
 import { BusinessProductsList as ProductListLayoutGroceries } from './src/components/BusinessProductsList/layouts/groceries'
@@ -201,6 +202,7 @@ export {
   ReviewProfessional,
   RenderProductsLayout,
   ResetPassword,
+  ScheduleAccordion,
   SearchBar,
   SessionsList,
   SidebarMenu,

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

@@ -89,7 +89,6 @@ export const BusinessBasicInformation = (props) => {
   const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
   const hideCity = orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.city?.hidden
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const showBusinessInfo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.business_info?.hidden && !isChew
   const layoutsWithOldSearch = ['starbucks', 'old', 'floating']
   const hideSearch = layoutsWithOldSearch.includes(theme?.business_view?.components?.product_search?.components?.layout?.type)
   const getBusinessType = () => {
@@ -206,15 +205,6 @@ export const BusinessBasicInformation = (props) => {
               ) : (
                 <Skeleton width={isCustomerMode ? 100 : 150} height={isCustomerMode ? 35 : 'auto'} />
               )}
-              {showBusinessInfo && (
-                <>
-                  {!loading ? (
-                    <p className='type'>{getBusinessType()}</p>
-                  ) : (
-                    <Skeleton width={isCustomerMode ? 100 : 150} />
-                  )}
-                </>
-              )}
               {typeof hideCity !== 'undefined' && !hideCity && business?.city?.name && (
                 <>
                   {!loading ? (

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

@@ -13,7 +13,6 @@ import {
   BusinessContent,
   SectionTitle,
   Map,
-  ScheduleBlock,
   ScheduleSection,
   ScheduleContainer,
   DeliveryInfo,
@@ -26,6 +25,7 @@ import {
   Divider
 } from './styles'
 import MdClose from '@meronex/icons/md/MdClose'
+import { ScheduleAccordion } from '../ScheduleAccordion'
 
 export const BusinessInformationUI = (props) => {
   const {
@@ -39,16 +39,6 @@ export const BusinessInformationUI = (props) => {
 
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
-
-  const daysOfWeek = [
-    t('SUNDAY_ABBREVIATION', 'Sun'),
-    t('MONDAY_ABBREVIATION', 'Mon'),
-    t('TUESDAY_ABBREVIATION', 'Tues'),
-    t('WEDNESDAY_ABBREVIATION', 'Wed'),
-    t('THURSDAY_ABBREVIATION', 'Thur'),
-    t('FRIDAY_ABBREVIATION', 'Fri'),
-    t('SATURDAY_ABBREVIATION', 'Sat')
-  ]
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
   const [orderingTheme] = useOrderingTheme()
@@ -124,18 +114,12 @@ export const BusinessInformationUI = (props) => {
                   <ScheduleSection>
                     <ScheduleContainer>
                       {businessSchedule.map((schedule, i) => (
-                        <ScheduleBlock key={i}>
-                          <h4>{daysOfWeek[i]}</h4>
-                          {schedule.enabled ? (
-                            <div>
-                              <p>{scheduleFormatted(schedule.lapses[0].open)}</p>
-                              <div>-</div>
-                              <p>{scheduleFormatted(schedule.lapses[0].close)}</p>
-                            </div>
-                          ) : (
-                            <p className='close'>{t('CLOSED', 'Closed')}</p>
-                          )}
-                        </ScheduleBlock>
+                        <ScheduleAccordion
+                          key={i}
+                          weekIndex={i}
+                          scheduleFormatted={scheduleFormatted}
+                          schedule={schedule}
+                        />
                       ))}
                     </ScheduleContainer>
                   </ScheduleSection>

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

@@ -78,7 +78,8 @@ const BusinessProductsListingUI = (props) => {
     onChangeMetaTag,
     onBusinessClick,
     handleChangePriceFilterValues,
-    priceFilterValues
+    priceFilterValues,
+    handleUpdateProfessionals
   } = props
 
   const { business, loading, error } = businessState
@@ -458,6 +459,7 @@ const BusinessProductsListingUI = (props) => {
                 professionalList={business?.professionals}
                 professionalSelected={professionalSelected}
                 handleChangeProfessional={handleChangeProfessionalSelected}
+                handleUpdateProfessionals={handleUpdateProfessionals}
                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === (productModal.product || curProduct)?.id ? Cproduct?.quantity : 0) }, 0) || 0}
               />
             ) : (

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

@@ -98,7 +98,7 @@ const BusinessesListingUI = (props) => {
   const [favoriteIds, setFavoriteIds] = useState([])
   const hideCities = (theme?.business_listing_view?.components?.cities?.hidden || orderState?.options?.type !== 2) ?? true
   const hideSearch = theme?.business_listing_view?.components?.search?.hidden
-  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
+  const hideFilter = theme?.business_listing_view?.components?.filter?.hidden || hideSearch
   const hideSearchSection = hideCities && hideSearch && hideFilter
   const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
   const businessesIds = isCustomLayout &&
@@ -337,7 +337,7 @@ const BusinessesListingUI = (props) => {
         {!isCustomerMode && !hideSearchSection && (
           <>
             <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>
-              {!hideSearch && (
+              {!hideSearch && windowSize.width <= 1200 && (
                 <SearchBar
                   lazyLoad
                   search={searchValue}

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

@@ -232,7 +232,6 @@ export const BusinessLogosWrapper = styled.div`
   width: 100%;
 `
 
-
 const BusinessLogoStyled = styled.div`
   min-width: 100px;
   min-height: 100px;
@@ -267,3 +266,8 @@ export const BusinessLogosContainer = styled.div`
   display: flex;
   padding-bottom: 10px;
 `
+
+export const HeaderSearchMode = styled.div`
+  position: absolute;
+  width: 200px;
+`

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

@@ -165,6 +165,7 @@ const BusinessesListingUI = (props) => {
                     <WrapperSearch isCustomLayout={isCustomLayout}>
                       <SearchBar
                         lazyLoad
+                        isStarbucks
                         search={searchValue}
                         isCustomLayout
                         placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
@@ -240,6 +241,7 @@ const BusinessesListingUI = (props) => {
                   <WrapperSearch isCustomLayout={isCustomLayout}>
                     <SearchBar
                       lazyLoad
+                      isStarbucks
                       search={searchValue}
                       isCustomLayout={isCustomLayout}
                       placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}

package/src/themes/five/src/components/BusinessesListing/layouts/StarbucksBusinessesListing/styles.js

@@ -4,9 +4,6 @@ export const BusinessContainer = styled.div`
   flex-direction: column;
   width: 100%;
   margin-top: 0;
-  @media (min-width: 577px){
-    margin-top: 35px
-  }
 `
 export const BusinessList = styled.div`
   display: flex;
@@ -17,7 +14,7 @@ export const WrapperSearch = styled.div`
   display: flex;
   justify-content: space-between;
   position: relative;
-  padding: 15px 10px 15px 25px;
+  padding: 30px;
   input {
     border-bottom: 1px solid #ccc;
   }
@@ -33,8 +30,7 @@ export const WrapperSearch = styled.div`
     width: 100%;
     box-shadow: 0px -2px 1px 4px lightgrey;
   }
-    
-  
+
   ${({ isCustomLayout }) => isCustomLayout && css`
     box-sizing: border-box;
     display: flex;

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

@@ -89,7 +89,9 @@ const CheckoutUI = (props) => {
     instructionsOptions,
     deliveryOptionSelected,
     handleStoreRedirect,
-    onPlaceOrderClick
+    onPlaceOrderClick,
+    setPlaceSpotNumber,
+    placeSpotNumber
   } = props
 
   const theme = useTheme()
@@ -114,6 +116,7 @@ const CheckoutUI = (props) => {
   const [isSuccess, setIsSuccess] = useState(false)
 
   const businessConfigs = businessDetails?.business?.configs ?? []
+  const isTableNumberEnabled = configs?.table_numer_enabled?.value
   const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
   const isWalletCreditPointsEnabled = businessConfigs.find(config => config.key === 'wallet_credit_point_enabled')?.value === '1'
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp
@@ -128,7 +131,7 @@ const CheckoutUI = (props) => {
     placing ||
     errorCash ||
     loading ||
-    (options?.type === 3 && !(cartState?.cart?.spot_number || cart?.spot_number)) ||
+    (isTableNumberEnabled === '1' && (options?.type === 3 && !(cartState?.cart?.spot_number || cart?.spot_number || placeSpotNumber))) ||
     !cart?.valid_maximum ||
     (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ||
     // (((placeSpotTypes.includes(options?.type) && !cart?.place) && hasBusinessPlaces)) ||
@@ -462,6 +465,7 @@ const CheckoutUI = (props) => {
               cart={cart}
               spotNumberDefault={cartState?.cart?.spot_number ?? cart?.spot_number}
               vehicleDefault={cart?.vehicle}
+              setPlaceSpotNumber={setPlaceSpotNumber}
             />
           </SelectSpotContainer>
         )}
@@ -547,7 +551,7 @@ const CheckoutUI = (props) => {
           </WarningText>
         )}
 
-        {options?.type === 3 && !cart?.spot_number && (
+        {isTableNumberEnabled === '1' && (options?.type === 3 && !(cart?.spot_number || placeSpotNumber)) && (
           <WarningText>
             {t('WARNING_PLACE_SPOT', 'Please, select your spot to place order.')}
           </WarningText>
@@ -572,9 +576,9 @@ const CheckoutUI = (props) => {
             onClick={() => isDisablePlaceOrderButton ? handleScrollTo('.paymentsContainer') : handlePlaceOrder()}
           >
             {!cart?.valid_maximum ? (
-                `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
+              `${t('MAXIMUM_SUBTOTAL_ORDER', 'Maximum subtotal order')}: ${parsePrice(cart?.maximum)}`
             ) : (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ? (
-                `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+              `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
             ) : placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}
           </Button>
         </MobileWrapperPlaceOrderButton>

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

@@ -26,7 +26,8 @@ import {
   FarAwayMessage,
   Divider,
   AddressFormWrapper,
-  LanguageSelectorWrapper
+  LanguageSelectorWrapper,
+  HeaderSearchMode
 } from './styles'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { useOnlineStatus } from '../../../../../hooks/useOnlineStatus'
@@ -48,6 +49,7 @@ import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
 import { getDistance } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
+import { SearchBar } from '../SearchBar'
 
 export const Header = (props) => {
   const {
@@ -55,7 +57,9 @@ export const Header = (props) => {
     location,
     isShowOrderOptions,
     isHideSignup,
-    isCustomerMode
+    isCustomerMode,
+    searchValue,
+    setSearchValue
   } = props
 
   const { pathname } = useLocation()
@@ -79,7 +83,6 @@ export const Header = (props) => {
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [isAddressFormOpen, setIsAddressFormOpen] = useState(false)
   const [isOpenUserData, setIsOpenUserData] = useState(false)
-
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const [isFarAway, setIsFarAway] = useState(false)
 
@@ -310,6 +313,18 @@ export const Header = (props) => {
               )}
             </Menu>
           )}
+          {windowSize.width > 1200 && window.location.pathname === '/search' && (
+            <HeaderSearchMode>
+              <SearchBar
+                lazyLoad
+                search={searchValue}
+                placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
+                starbucksStyle
+                onSearch={(value) => setSearchValue(value)}
+                handleCustomEnter={() => events.emit('go_to_page', { page: 'business_search' })}
+              />
+            </HeaderSearchMode>
+          )}
           {onlineStatus && (
             <RightHeader id='right-side'>
               <Menu isCustomerMode={isCustomerMode}>
@@ -358,6 +373,7 @@ export const Header = (props) => {
                           withLogout
                           isCustomerMode={isCustomerMode}
                           open={openPopover.user}
+                          handleOpenAddressModal={() => openModal('address')}
                           onClick={() => handleTogglePopover('user')}
                           onClose={() => handleClosePopover('user')}
                         />

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

@@ -22,7 +22,7 @@ export const InnerHeader = styled.div`
     justify-content: flex-start;
   }
   #right-side {
-    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '20%'};
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '25%'};
     justify-content: flex-end;
   }
   #center-side {
@@ -155,17 +155,17 @@ export const Menu = styled.div`
 
     @media (min-width: 1024px) {
       padding: 0 20px;
-      margin: 0 70px;
+      margin-left: 45px;
     }
 
     @media (min-width: 1200px) {
       padding: 0 30px;
-      margin: 0 100px;
+      margin-left: 50px;
     }
 
     @media (min-width: 1500px) {
       padding: 0 30px;
-      margin: 0 130px;
+      margin: 0 75px;
     }
   }
 
@@ -472,3 +472,19 @@ export const LanguageSelectorWrapper = styled(InputGroup)`
     margin: 0px 10px 0 5px;
   }
 `
+
+export const HeaderSearchMode = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 300px;
+  input {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  @media (min-width: 1400px){
+    width: 300px;
+  }
+  @media (min-width: 1200px){
+    width: 250px;
+  }
+`

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/index.js

@@ -38,10 +38,12 @@ export const OriginalHomeHero = (props) => {
   const [orderingTheme] = useOrderingTheme()
   const [authModalOpen, setAuthModalOpen] = useState(false)
   const [modalPageToShow, setModalPageToShow] = useState(null)
+  const [newAddressModalOpened, setNewAddressModalOpened] = useState(false)
 
   const isShowLoginAccount = !orderingTheme?.theme?.mobile_view_web?.components?.home?.components?.login_account?.hidden
   const bgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_background?.components?.image
   const logo = orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image
+  const mobileBgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_mobile_background?.components?.image
   const isFullScreen = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_image_fullscreen
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const handleFindBusinesses = () => {
@@ -93,12 +95,20 @@ export const OriginalHomeHero = (props) => {
     return () => setModals({ listOpen: false, formOpen: false })
   }, [])
 
+  useEffect(() => {
+    if (newAddressModalOpened) return
+    if (auth && !orderState.loading && !orderState?.options?.address?.location) {
+      setModals({ ...modals, listOpen: true })
+      setNewAddressModalOpened(true)
+    }
+  }, [auth, orderState, newAddressModalOpened])
+
   return (
     <HeroContainer
       mb={!auth && isShowLoginAccount && '30vh'}
-      bgimage={bgImg || (windowSize.width < 576
-        ? theme.images?.general?.homeHeroMobile
-        : theme.images?.general?.homeHero)}
+      bgimage={windowSize.width < 576
+        ? (mobileBgImg || theme.images?.general?.homeHeroMobile)
+        : (bgImg || theme.images?.general?.homeHero)}
       isFullScreen={isFullScreen}
     >
       <ContentWrapper>

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

@@ -75,7 +75,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 1)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -127,7 +127,7 @@ export const OrderBillSection = (props) => {
             order?.taxes?.length > 0 && order?.taxes?.filter(tax => tax?.type === 2 && tax?.rate !== 0).map(tax => (
               <tr key={tax?.id}>
                 <td>
-                  {tax?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   <span>{`(${verifyDecimals(tax?.rate, parseNumber)}%)`}</span>
                   {setOpenTaxModal && (
                     <Exclamation onClick={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })}>
@@ -143,7 +143,7 @@ export const OrderBillSection = (props) => {
             order?.fees?.length > 0 && order?.fees?.filter(fee => !(fee?.fixed === 0 && fee?.percentage === 0))?.map(fee => (
               <tr key={fee.id}>
                 <td>
-                  {fee?.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`})
                   {setOpenTaxModal && (
                     <Exclamation onClick={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })}>
@@ -159,7 +159,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 3)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -185,7 +185,7 @@ export const OrderBillSection = (props) => {
             order?.offers?.length > 0 && order?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
               <tr key={offer.id}>
                 <td>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <span>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</span>
                   )}
@@ -254,7 +254,7 @@ export const OrderBillSection = (props) => {
                   <span>
                     {event?.wallet_event
                       ? walletName[event?.wallet_event?.wallet?.type]?.name
-                      : t(event?.paymethod?.name.toUpperCase(), event?.paymethod?.name)}
+                      : t(event?.paymethod?.name.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                   </span>
                   {event?.data?.charge_id && (
                     <span>

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

@@ -400,6 +400,9 @@ const OrderDetailsUI = (props) => {
     businessLogoUrlValidation()
   }, [order])
 
+  const disableLeftButton = [1, 15, 20, 21]
+  const disableRightButton = [1, 15, 21]
+
   return (
     <Container>
       {!loading && order && Object.keys(order).length > 0 && !(openMessages.driver || openMessages.business) && (
@@ -571,7 +574,7 @@ const OrderDetailsUI = (props) => {
                           style={{ fontSize: 14 }}
                           color={order?.status === 20 ? 'secundary' : 'primary'}
                           onClick={() => handleChangeOrderStatus(20)}
-                          disabled={order?.status === 20 || order?.status === 21}
+                          disabled={disableLeftButton.includes(order?.status)}
                         >
                           {getOrderStatus(20)?.value}
                         </Button>
@@ -580,7 +583,7 @@ const OrderDetailsUI = (props) => {
                         <Button
                           style={{ fontSize: 14 }}
                           color={order?.status === 20 ? 'primary' : 'secundary'}
-                          disabled={order?.status === 21}
+                          disabled={disableRightButton.includes(order?.status)}
                           onClick={() => handleChangeOrderStatus(21)}
                         >
                           {getOrderStatus(21)?.value}

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

@@ -78,7 +78,7 @@ const OrdersOptionUI = (props) => {
 
   const _orders = customArray || values || []
   const uniqueOrders = []
-  const orders = _orders.map(order => order?.cart_group_id
+  const ordersReduced = _orders.map(order => order?.cart_group_id
     ? _orders
       .filter(_order => _order?.cart_group_id === order?.cart_group_id)
       ?.reduce((orderCompleted, currentOrder) => ({
@@ -92,14 +92,15 @@ const OrdersOptionUI = (props) => {
         products: [orderCompleted.products, currentOrder.products].flat()
       }))
     : order)
-    .filter(order => {
-      const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
-      if (!isDuplicate) {
-        uniqueOrders.push(order?.cart_group_id)
-        return true
-      }
-      return false
-    })
+  const orders = ordersReduced?.filter(order => {
+    if (!order?.cart_group_id) return true
+    const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+    if (!isDuplicate) {
+      uniqueOrders.push(order?.cart_group_id)
+      return true
+    }
+    return false
+  })
 
   const isShowTitles = businessesIds
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)