ordering-ui-external 1.8.7 → 1.8.9

package/src/themes/callcenterOriginal/src/styles/Select/FirstSelect/index.js

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef, useState } from 'react'
+import FiChevronDown from '@meronex/icons/fi/FiChevronDown'
+import BsTrash from '@meronex/icons/bs/BsTrash'
+import {
+  Select as SelectInput,
+  Selected,
+  Options,
+  OptionsInner,
+  Option,
+  Chevron,
+  Header,
+  FunctionalityContainer,
+  SearchBarWrapper
+} from '../../DashboardSelects'
+import { Button } from '../../Buttons'
+import { useLanguage } from 'ordering-components-external'
+import { SearchBar } from '../../../components/Shared'
+
+export const Select = (props) => {
+  const {
+    placeholder,
+    options,
+    defaultValue,
+    onChange,
+    notAsync,
+    type,
+    noSelected,
+    className,
+    onEdit,
+    onDelete,
+    isShowSearchBar,
+    searchValue,
+    handleChangeSearch,
+    searchBarIsCustomLayout,
+    searchBarPlaceholder,
+    searchBarIsNotLazyLoad,
+    isDisabled,
+    position
+  } = props
+
+  const [open, setOpen] = useState(false)
+  const defaultOption = options?.find(
+    (option) => option.value === defaultValue
+  )
+  const [selectedOption, setSelectedOption] = useState(defaultOption)
+  const [value, setValue] = useState(defaultValue)
+  const [, t] = useLanguage()
+  const dropdownReference = useRef()
+
+  const handleSelectClick = (e) => {
+    if (e.target.closest('.react-datepicker-wrapper') || e.target.closest('.react-datepicker')) return
+    setOpen(!open)
+  }
+
+  const closeSelect = (e) => {
+    if (open) {
+      const outsideDropdown = !dropdownReference.current?.contains(e.target)
+      if (outsideDropdown) {
+        if (isShowSearchBar) {
+          handleChangeSearch('')
+        }
+        setOpen(false)
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return
+    document.addEventListener('click', closeSelect)
+    return () => document.removeEventListener('click', closeSelect)
+  }, [open])
+
+  useEffect(() => {
+    if (isShowSearchBar && searchValue) return
+    if (!notAsync) {
+      const _defaultOption = options?.find(
+        (option) => option.value === defaultValue
+      )
+      setSelectedOption(_defaultOption)
+      setValue(defaultValue)
+    }
+  }, [defaultValue, options, searchValue])
+
+  const handleChangeOption = (e, option) => {
+    if (e.target.closest('.disabled') === null) setOpen(!open)
+    if (option.value === null || option.disabled || e.target.closest('.delete') !== null || e.target.closest('.edit') !== null) return
+    if (!noSelected) {
+      setSelectedOption(option)
+      setValue(option.value)
+    }
+    onChange && onChange(option.value)
+  }
+
+  return (
+    <SelectInput type={type} className={className || 'select'} isDisabled={isDisabled}>
+      {!selectedOption && (
+        <Selected onClick={handleSelectClick} isDisabled={isDisabled}>
+          {placeholder || ''}
+          <Chevron className='select-arrow'>
+            <FiChevronDown />
+          </Chevron>
+        </Selected>
+      )}
+      {selectedOption && (
+        <Selected onClick={handleSelectClick} isDisabled={isDisabled}>
+          <Header>
+            {selectedOption.showOnSelected || selectedOption.content}
+          </Header>
+          <Chevron>
+            <FiChevronDown />
+          </Chevron>
+        </Selected>
+      )}
+      {open && options && (
+        <Options
+          className='list'
+          isAbsolute
+          position={position || 'right'}
+          ref={dropdownReference}
+        >
+          {isShowSearchBar && (
+            <SearchBarWrapper
+              className='search-bar-container'
+            >
+              <SearchBar
+                lazyLoad={!searchBarIsNotLazyLoad}
+                isCustomLayout={searchBarIsCustomLayout}
+                search={searchValue}
+                onSearch={handleChangeSearch}
+                placeholder={searchBarPlaceholder || ''}
+              />
+            </SearchBarWrapper>
+          )}
+          <OptionsInner
+            className='list-wrapper'
+            optionInnerMargin={props.optionInnerMargin}
+            optionInnerMaxHeight={props.optionInnerMaxHeight || 'initial'}
+          >
+            {options.map((option, i) => (
+              <Option
+                key={i}
+                selected={value === option.value}
+                color={option.color}
+                onClick={(e) => handleChangeOption(e, option)}
+                optionBottomBorder={props.optionBottomBorder}
+                disabled={option.disabled}
+                showDisable={option?.showDisable}
+                className={option.disabled ? 'disabled' : null}
+              >
+                {option.content}
+                {(option.editFunctionality || option.deleteFunctionality) && (
+                  <FunctionalityContainer disabled={value === option.value}>
+                    {option.editFunctionality && (
+                      <Button
+                        borderRadius='8px'
+                        color='lightPrimary'
+                        onClick={() => onEdit(option, i)}
+                        className='edit'
+                      >
+                        {t('EDIT', 'Edit')}
+                      </Button>
+                    )}
+                    {option.deleteFunctionality && (
+                      <BsTrash className='delete' onClick={() => onDelete(option.value)} />
+                    )}
+                  </FunctionalityContainer>
+                )}
+              </Option>
+            ))}
+          </OptionsInner>
+        </Options>
+      )}
+    </SelectInput>
+  )
+}

package/src/themes/callcenterOriginal/src/styles/Select/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+export const HeaderItem = styled.div`
+  cursor: pointer;
+  display: flex;
+  border-radius: 7.6px;
+  border-style: solid;
+  border-color: #1C202E;
+  border: 1px solid #CCC;
+  padding: 7px 0;
+`
+
+export const PopoverBody = styled.div`
+  z-index: 1001;
+`

package/src/themes/callcenterOriginal/src/styles/Switch/index.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+  ToggleSwitchContainer,
+  Slider
+} from './styles'
+
+export const Switch = (props) => {
+  const {
+    defaultChecked,
+    disabled,
+    onChange,
+    className,
+    notAsync
+  } = props
+  const [checked, setChecked] = useState(false)
+
+  useEffect(() => {
+    setChecked(defaultChecked)
+  }, [defaultChecked])
+
+  const handleCheckBoxChange = (evt) => {
+    if (!notAsync) {
+      setChecked(evt.target.checked)
+    }
+    onChange && onChange(evt.target.checked)
+  }
+
+  return (
+    <ToggleSwitchContainer className={className} disabled={disabled}>
+      <input
+        type='checkbox'
+        checked={checked}
+        onChange={handleCheckBoxChange}
+      />
+      <Slider />
+    </ToggleSwitchContainer>
+  )
+}

package/src/themes/callcenterOriginal/src/styles/Switch/styles.js

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components'
+
+export const ToggleSwitchContainer = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 25px;
+  height: 14px;
+  margin-bottom: 0px;
+
+  ${({ disabled }) => disabled && css`
+    opacity: 0.6;
+    pointer-events: none;
+  `}
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:checked + span {
+      background-color: ${props => props.theme.colors.primary};
+    }
+    &:focus + span {
+      box-shadow: 0 0 1px ${props => props.theme.colors.primary};
+    }
+    &:checked + span:before {
+      -webkit-transform: translateX(11px);
+      -ms-transform: translateX(11px);
+      transform: translateX(11px);
+    }
+  }
+`
+
+export const Slider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 15px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 1px;
+    bottom: 1px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+`

package/src/themes/callcenterOriginal/src/styles/index.js

@@ -0,0 +1,22 @@
+import { Button, IconButton } from './Buttons'
+import { Checkbox } from './Checkbox'
+import { Input, TextArea } from './Inputs'
+import { MultiSelect } from './MultiSelect'
+import { Select as SecondSelect } from './Select'
+import { Select as DefaultSelect } from './Select/FirstSelect'
+import { Switch } from './Switch'
+import { Tabs, Tab } from './Tabs'
+
+export {
+  Button,
+  IconButton,
+  Checkbox,
+  Input,
+  MultiSelect,
+  Switch,
+  SecondSelect,
+  DefaultSelect,
+  TextArea,
+  Tabs,
+  Tab
+}

package/src/themes/five/index.js

@@ -111,6 +111,7 @@ import { OrderBillSection } from './src/components/OrderDetails/OrderBillSection
 import { OrderPreferencesSection } from './src/components/OrderDetails/OrderPreferencesSections'
 import { ActionsSection } from './src/components/OrderDetails/ActionsSection'
 import { ProductShare } from './src/components/ProductShare'
+import { MultiCart } from './src/components/MultiCart'
 
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
@@ -233,6 +234,7 @@ export {
   OrderPreferencesSection,
   ActionsSection,
   ProductShare,
+  MultiCart,
 
   // styles
   Button,

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/BusinessProductsListing/index.js

@@ -14,7 +14,8 @@ import {
   useUtils,
   useSession,
   useSite,
-  useOrderingTheme
+  useOrderingTheme,
+  useConfig
 } from 'ordering-components-external'
 
 import {
@@ -81,9 +82,10 @@ const BusinessProductsListingUI = (props) => {
   } = props
 
   const { business, loading, error } = businessState
+  const [{ configs }] = useConfig()
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ carts }] = useOrder()
+  const [{ carts }, { addProduct, updateProduct }] = useOrder()
   const [{ parsePrice }] = useUtils()
   const [events] = useEvent()
   const location = useLocation()
@@ -99,8 +101,11 @@ const BusinessProductsListingUI = (props) => {
   const [isCartOpen, setIsCartOpen] = useState(false)
   const [isCartModal, setisCartModal] = useState(false)
   const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
+  const [productToIdLoading, setProductIdToLoading] = useState(null)
   const isMounted = useIsMounted()
 
+  const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
+  const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
   const isLazy = businessState?.business?.lazy_load_products_recommended
   const showViewOrderButton = !orderingTheme?.theme?.business_view?.components?.order_view_button?.hidden
@@ -114,25 +119,47 @@ const BusinessProductsListingUI = (props) => {
     setOpenBusinessInformation(true)
   }
 
-  const onProductClick = (product) => {
-    if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
-      if (site?.product_url_template) {
-        onProductRedirect({
-          slug: business?.slug,
-          product: site.product_url_template.includes('product_slug') ? product?.slug : product.id,
-          category: site.product_url_template.includes('category_slug') ? product?.category?.slug : product.category_id
-        })
+  const onProductClick = async (product) => {
+    if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+      setProductIdToLoading(product.id)
+      const isProductAddedToCart = currentCart?.products?.find(Cproduct => Cproduct.id === product.id)
+      const productQuantity = isProductAddedToCart?.quantity
+      const addCurrentProduct = {
+        ...product,
+        quantity: 1
+      }
+      const updateCurrentProduct = {
+        id: product.id,
+        code: isProductAddedToCart?.code,
+        quantity: productQuantity + 1
+      }
+      const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
+      if (isProductAddedToCart) {
+        await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
       } else {
-        onProductRedirect({
-          slug: business?.slug,
-          product: product.id,
-          category: product.category_id
-        })
+        await addProduct(addCurrentProduct, cartData, isQuickAddProduct)
+      }
+      setProductIdToLoading(null)
+    } else {
+      if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
+        if (site?.product_url_template) {
+          onProductRedirect({
+            slug: business?.slug,
+            product: site.product_url_template.includes('product_slug') ? product?.slug : product.id,
+            category: site.product_url_template.includes('category_slug') ? product?.category?.slug : product.category_id
+          })
+        } else {
+          onProductRedirect({
+            slug: business?.slug,
+            product: product.id,
+            category: product.category_id
+          })
+        }
       }
+      setCurProduct(product)
+      setModalIsOpen(true)
+      events.emit('product_clicked', product)
     }
-    setCurProduct(product)
-    setModalIsOpen(true)
-    events.emit('product_clicked', product)
   }
 
   const handlerProductAction = (product) => {
@@ -296,6 +323,7 @@ const BusinessProductsListingUI = (props) => {
           onBusinessClick={onBusinessClick}
           priceFilterValues={priceFilterValues}
           handleChangePriceFilterValues={handleChangePriceFilterValues}
+          productToIdLoading={productToIdLoading}
         />
 
         {
@@ -332,7 +360,7 @@ const BusinessProductsListingUI = (props) => {
           />
         )}
       </ProductsContainer>
-      {currentCart?.products?.length > 0 && auth && !isCartOpen && showViewOrderButton && (
+      {currentCart?.products?.length > 0 && auth && !isCartOpen && showViewOrderButton && !checkoutMultiBusinessEnabled && (
         <FloatingButton
           btnText={
             !currentCart?.valid_maximum ? (

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/Cart/index.js

@@ -24,6 +24,7 @@ import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { TaxInformation } from '../TaxInformation'
 import { TextArea } from '../../styles/Inputs'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
+import { CartStoresListing } from '../../../../franchise/src/components/CartStoresListing'
 import { DriverTips } from '../DriverTips'
 import { ServiceForm } from '../ServiceForm'
 import {
@@ -92,7 +93,7 @@ const CartUI = (props) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isUpselling, setIsUpselling] = useState(false)
-  const [, setOpenChangeStore] = useState(false)
+  const [openChangeStore, setOpenChangeStore] = useState(false)
 
   const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
 
@@ -133,8 +134,35 @@ const CartUI = (props) => {
   }
 
   const handleClickCheckout = () => {
-    if (checkoutMultiBusinessEnabled && openCarts.length > 1) {
-      events.emit('go_to_page', { page: 'multi_checkout' })
+    const cartSelectedHasGroup = cart?.group?.uuid
+    const cartFilterValidation = cart => cart?.valid && cart?.status !== 2
+    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter(_cart => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
+    if (cartsGroupLength > 1 && checkoutMultiBusinessEnabled) {
+      events.emit('go_to_page', { page: 'multi_checkout', params: { cartUuid: cart?.group?.uuid } })
+      events.emit('cart_popover_closed')
+      return
+    }
+    const cartGroupsCount = {}
+    // eslint-disable-next-line no-unused-expressions
+    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach(_cart => {
+      if (cartGroupsCount[_cart?.group?.uuid]) {
+        cartGroupsCount[_cart?.group?.uuid] += 1
+      } else {
+        cartGroupsCount[_cart?.group?.uuid] = 1
+      }
+    })
+    let groupForTheCart
+    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
+    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
+    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
+    if (indexes?.length > 1) {
+      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+    } else {
+      groupForTheCart = indexes[0]
+    }
+
+    if (checkoutMultiBusinessEnabled && openCarts?.length > 1 && groupForTheCart) {
+      events.emit('go_to_page', { page: 'multi_cart', params: { cartUuid: cart.uuid, cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart } })
     } else {
       events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cart.uuid } })
     }

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

@@ -358,6 +358,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/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>