ordering-ui-external 14.1.7 → 14.1.9

package/src/components/BusinessesMap/index.js

@@ -1,20 +1,22 @@
 import React from 'react'
 import { BusinessesMap as BusinessesMapController, GoogleMapsMap, useConfig, useOrder } from 'ordering-components-external'
 import { WrapperMap } from './styles'
+import { useTheme } from 'styled-components'
 
 const BusinessesMapUI = (props) => {
   const {
     userLocation,
     businessLocations,
     onBusinessClick,
-    setErrors
+    setErrors,
+    businessList
   } = props
 
   const [configState] = useConfig()
   const [orderState] = useOrder()
-
+  const theme = useTheme()
   const googleMapsControls = {
-    defaultZoom: 15,
+    defaultZoom: 18,
     zoomControl: true,
     streetViewControl: false,
     fullscreenControl: false,
@@ -23,7 +25,7 @@ const BusinessesMapUI = (props) => {
     mapTypeControlOptions: {
       mapTypeIds: ['roadmap', 'satellite']
     },
-    isMarkerDraggable: true
+    isMarkerDraggable: false
   }
 
   return (
@@ -36,13 +38,17 @@ const BusinessesMapUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <WrapperMap disabled={orderState.loading}>
         <GoogleMapsMap
+          useMapWithBusinessZones
+          deactiveAlerts
+          businessMap
           apiKey={configState?.configs?.google_maps_api_key?.value}
           location={userLocation}
           locations={businessLocations}
           mapControls={googleMapsControls}
           maxLimitLocation={parseInt(configState?.configs?.meters_to_change_address?.value)}
-          businessMap
           onBusinessClick={onBusinessClick}
+          businessZones={businessList?.map(business => business?.zones)}
+          fallbackIcon={theme.images?.dummies?.businessLogo}
           setErrors={setErrors}
         />
       </WrapperMap>

package/src/components/VerticalOrdersLayout/SingleOrderCard/index.js

@@ -125,7 +125,7 @@ const SingleOrderCardUI = (props) => {
               className='review'
               onClick={() => setOrderSelected(order)}
             >
-              {order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
+              {!!order?.review ? t('REVIEWED', 'Reviewed') : t('REVIEW', 'Review')}
             </Button>
           )}
           {!hideReorderButton && typeof order?.id === 'number' && (

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

@@ -69,6 +69,7 @@ const AddressFormUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [addressValue, setAddressValue] = useState(formState.changes?.address ?? addressState.address?.address ?? '')
   const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({ value: null })
+  const [showMap, setShowMap] = useState(false)
   const isEditing = !!addressState.address?.id
   const googleInputRef = useRef()
 
@@ -438,22 +439,53 @@ const AddressFormUI = (props) => {
                   />
                 </AddressWrap>
 
-                {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
-                  <WrapperMap isEnableContinueButton={isEnableContinueButton} notUseCustomerInfo={notUseCustomerInfo}>
-                    <GoogleMapsMap
-                      useMapWithBusinessZones
-                      deactiveAlerts
-                      apiKey={googleMapsApiKey}
-                      location={locationChange}
-                      locations={businessesList?.businesses}
-                      fixedLocation={!isEditing ? firstLocationNoEdit.value : null}
-                      mapControls={googleMapsControls}
-                      handleChangeAddressMap={handleChangeAddress}
-                      setErrors={setMapErrors}
-                      maxLimitLocation={parseInt(maxLimitLocation, 10)}
-                      businessZones={businessesList?.businesses?.map(business => business?.zones)}
-                      fallbackIcon={theme.images?.dummies?.businessLogo}
-                    />
+                {(addressState?.address?.location || formState?.changes?.location) && (
+                  <WrapperMap isEnableContinueButton={isEnableContinueButton} notUseCustomerInfo={notUseCustomerInfo} addFormRestrictions={addFormRestrictions}>
+                    <section>
+                      {!showMap && (
+                        <>
+                          <GeoAlt style={{ fontSize: 25, marginRight: 5 }} />
+                          {(addressState?.address?.address || formState?.changes?.address) && (
+                            <span>{addressState?.address?.address || formState?.changes?.address}{', '}</span>
+                          )}
+                          {(addressState?.address?.country || formState?.changes?.country) && (
+                            <span>{addressState?.address?.country || formState?.changes?.country}{', '}</span>
+                          )}
+                          {(addressState?.address?.address_notes || formState?.changes?.address_notes) && (
+                            <span>{addressState?.address?.address_notes || formState?.changes?.address_notes}{', '}</span>
+                          )}
+                          {(addressState?.address?.internal_number || formState?.changes?.internal_number) && (
+                            <span>{addressState?.address?.internal_number || formState?.changes?.internal_number}{', '}</span>
+                          )}
+                          {(addressState?.address?.zipcode || formState?.changes?.zipcode) && (
+                            <span>{addressState?.address?.zipcode || formState?.changes?.zipcode}{', '}</span>
+                          )}
+                        </>
+                      )}
+                      <a
+                        style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }}
+                        onClick={() => setShowMap(!showMap)}
+                      >
+                        {showMap ? t('HIDE_MAP', 'Hide Map') : t('SHOW_MAP', 'Show Map')}
+                      </a>
+                    </section>
+                    {locationChange && showMap && (
+                      <GoogleMapsMap
+                        useMapWithBusinessZones
+                        deactiveAlerts
+                        avoidFitBounds
+                        apiKey={googleMapsApiKey}
+                        location={locationChange}
+                        locations={businessesList?.businesses}
+                        fixedLocation={!isEditing ? firstLocationNoEdit.value : null}
+                        mapControls={googleMapsControls}
+                        handleChangeAddressMap={handleChangeAddress}
+                        setErrors={setMapErrors}
+                        maxLimitLocation={parseInt(maxLimitLocation, 10)}
+                        businessZones={businessesList?.businesses?.map(business => business?.zones)}
+                        fallbackIcon={theme.images?.dummies?.businessLogo}
+                      />
+                    )}
                   </WrapperMap>
                 )}
               </React.Fragment>
@@ -522,6 +554,7 @@ const AddressFormUI = (props) => {
                   type='button'
                   disabled={formState.loading}
                   onClick={() => onCancel()}
+                  hoverColor='#CCC'
                 >
                   {t('CANCEL', 'Cancel')}
                 </Button>

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

@@ -198,18 +198,20 @@ export const AddressTagSection = styled.div`
 `
 
 export const WrapperMap = styled.div`
+  z-index: 100;
   width: 50%;
   position: absolute;
   bottom: 2%;
   right: 0;
   padding-right: 20px;
-  ${({ isEnableContinueButton, notUseCustomerInfo }) => isEnableContinueButton ? css`
-    height: 460px;
-  ` : notUseCustomerInfo ? css`
-    height: 370px;
-  ` : css`
-    height: 480px;
-  `}
+  height: ${({ isEnableContinueButton, notUseCustomerInfo, addFormRestrictions }) =>
+    isEnableContinueButton
+      ? addFormRestrictions ? '460px' : '425px'
+      : notUseCustomerInfo
+        ? '370px'
+        : '480px'
+  };
+
   > div {
     position: relative !important;
     width: 100% !important;
@@ -237,7 +239,7 @@ export const AddressMarkContainer = styled.div`
   align-items: center;
   border-radius: 4px;
   position: absolute;
-  top: -35px;
+  top: 50px;
   width: max-content;
   p {
     margin: 0;

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

@@ -202,11 +202,15 @@ const AddressListUI = (props) => {
   }, [isOpenUserData])
 
   useEffect(() => {
-    if (userCustomerSetup?.imported_address_text && addressList.addresses?.length === 0 && !addressList?.loading && !addressList?.error) {
+    const addressValidation = addressList.addresses?.length === 0 && !addressList?.loading && !addressList?.error
+    if (userCustomerSetup?.imported_address_text && addressValidation) {
       openAddress({
         address: userCustomerSetup?.imported_address_text
       })
     }
+    if (!userCustomerSetup?.imported_address_text && addressValidation) {
+      openAddress({})
+    }
   }, [userCustomerSetup?.imported_address_text, addressList.addresses, addressList?.loading, addressList?.error])
 
   return (
@@ -228,13 +232,14 @@ const AddressListUI = (props) => {
             addFormRestrictions={addFormRestrictions}
           >
             {
-              !addFormRestrictions && (!isPopover || !addressOpen) && !isOpenUserData && (
+              !addFormRestrictions && !addressOpen && !isOpenUserData && (
                 <Button
                   className='add'
                   outline
                   color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'primary'}
                   onClick={() => openAddress({})}
                   disabled={orderState?.loading || actionStatus.loading}
+                  hoverColor='#CCC'
                 >
                   {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add New Address')}
                 </Button>
@@ -348,7 +353,7 @@ const AddressListUI = (props) => {
             )}
           </List>
           {addressOpen && !notUseCustomerInfo && (
-            <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton}>
+            <AddressFormContainer width='50%' isEnableContinueButton={isEnableContinueButton} addFormRestrictions={addFormRestrictions}>
               <TitleFormContainer>
                 {!addFormRestrictions && (
                   <CloseIcon>
@@ -374,6 +379,7 @@ const AddressListUI = (props) => {
               type='button'
               disabled={(addressList.loading || actionStatus.loading || orderState.loading)}
               onClick={() => onCancel()}
+              hoverColor='#CCC'
             >
               {t('CANCEL', 'Cancel')}
             </Button>

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

@@ -105,7 +105,7 @@ export const AddressItemActions = styled.div`
     cursor: pointer;
     margin: 0px 5px;
     font-size: 20px;
-
+    
     svg {
       color: #B1BCCC;
     }
@@ -175,7 +175,7 @@ export const ContinueButton = styled.div`
   width: 100%;
   position: sticky;
   bottom: 1px;
-
+  
   button {
     width: 100%;
     white-space: nowrap;
@@ -204,7 +204,7 @@ export const List = styled.div`
     margin-top: 0px;
   ` : css`
     margin-top: 200px;
-  `}
+  `} 
   ${({ addFormRestrictions }) => addFormRestrictions && css`
     height: 405px;
   `}
@@ -219,9 +219,9 @@ export const AddressFormContainer = styled.div`
   ${({ width }) => css`
     width: ${width};
   `}
-  ${({ isEnableContinueButton }) => isEnableContinueButton && css`
+  ${({ isEnableContinueButton, addFormRestrictions }) => isEnableContinueButton && css`
     position: relative;
-    bottom: 189px;
+    bottom: 164px;
   `}
 `
 
@@ -234,7 +234,7 @@ export const CloseIcon = styled.div`
 `
 
 export const TitleFormContainer = styled.div`
-  display: flex;
+  display: flex; 
   align-items: center;
   margin-top: 7px;
   h1 {

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

@@ -159,7 +159,7 @@ export const ErrorMsg = styled.span`
 export const InputBeforeIconWrapper = styled.div`
   position: absolute;
   height: 100%;
-  top: 13px;
+  top: 10px;
   left: 100px;
 
   ${props => props.theme.rtl && css`

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

@@ -4,7 +4,6 @@ import {
   PhoneAutocomplete as PhoneAutocompleteController,
   useLanguage,
   useOrder,
-  useCustomer,
   useConfig,
   useEvent
 } from 'ordering-components-external'
@@ -62,7 +61,6 @@ const PhoneAutocompleteUI = (props) => {
   const [orderState, { changeType }] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [, { deleteUserCustomer }] = useCustomer()
   const [configState] = useConfig()
   const [events] = useEvent()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -78,7 +76,7 @@ const PhoneAutocompleteUI = (props) => {
     value: userCustomer.cellphone || userCustomer.phone,
     label: `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${userCustomer?.phone && !userCustomer?.cellphone ? `${userCustomer?.phone}` : ''} ${userCustomer?.cellphone ? `${userCustomer.cellphone}` : ''} - {${userCustomer.name}}`,
     flag: userCustomer?.imported_address_text && userCustomer?.addresses?.length === 0,
-    lastname: userCustomer.lastname
+    lastname: `${userCustomer.name} ${userCustomer.lastname}`
   } : null)
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').filter(value => (allOrderTypes.includes(Number(value)))).map(value => Number(value)) || []
   const userName = userCustomer?.lastname
@@ -141,6 +139,7 @@ const PhoneAutocompleteUI = (props) => {
       setOptSelected(null)
       setCustomersPhones({ ...customersPhones, users: [] })
       setInputValue('')
+      onChangeNumber('')
       return
     }
     let user
@@ -149,7 +148,7 @@ const PhoneAutocompleteUI = (props) => {
     }
     setOptSelected({
       ...option,
-      lastname: user?.lastname ?? user?.name
+      lastname: `${user?.name} ${user?.lastname}`
     })
     setInputValue(option ? option?.value : '')
     if (!option) {
@@ -181,7 +180,6 @@ const PhoneAutocompleteUI = (props) => {
   const handleCloseAddressList = () => {
     setOpenModal({ ...openModal, customer: false })
     setCustomerState({ ...customerState, result: { error: false } })
-    deleteUserCustomer(true)
     if (isFromUrlPhone) {
       onRedirectPhoneUrlPage && onRedirectPhoneUrlPage('home')
     }
@@ -197,7 +195,7 @@ const PhoneAutocompleteUI = (props) => {
     const countryPhoneCode = user?.country_phone_code ?? user?.country_code
     const obj = {}
     obj.value = user.cellphone || user.phone
-    obj.label = `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${user?.phone && !user?.cellphone ? `${user?.phone}` : ''} ${user?.cellphone ? `${user.cellphone}` : ''} - {${user.name}}`
+    obj.label = `${countryPhoneCode ? `(${countryPhoneCode})` : ''} ${user?.phone && !user?.cellphone ? `${user?.phone}` : ''} ${user?.cellphone ? `${user.cellphone}` : ''} - {${user.name} ${user?.lastname ?? ''}}`
     obj.flag = user?.imported_address_text && user?.addresses?.length === 0
     return obj
   }) || []
@@ -328,7 +326,7 @@ const PhoneAutocompleteUI = (props) => {
                     onChange={onChange}
                     onInputChange={onInputChange}
                     isLoading={customersPhones?.loading}
-                    options={optionsToSelect}
+                    options={optionsToSelect.filter(opt => inputValue ? opt.value.toString().includes(inputValue) : opt)}
                     components={{ Option }}
                   />
                   {optSelected && (
@@ -351,7 +349,7 @@ const PhoneAutocompleteUI = (props) => {
         onClose={() => setOpenModal({ ...openModal, signup: false })}
       >
         <SignUpForm
-          externalPhoneNumber={`${localPhoneCode || countryCallingCode} ${optSelected?.value || phone}`}
+          externalPhoneNumber={`${countryCallingCode || localPhoneCode} ${optSelected?.value || phone}`}
           saveCustomerUser={saveCustomerUser}
           fieldsNotValid={props.fieldsNotValid}
           useChekoutFileds

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

@@ -357,7 +357,7 @@ export const IconTypeButton = styled.div`
   align-items: center;
   width: 44px;
   height: 44px;
-  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  background: ${({ theme }) => theme?.colors?.danger100 ?? '#FEEDF0'};
   border-radius: 44px;
 `
 

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

@@ -247,7 +247,7 @@ const SignUpFormUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <SignUpContainer isPopup={isPopup}>
         <FormSide isPopup={isPopup}>
-          <Title>{t('CREATE_NEW_USER', 'Create new user')}</Title>
+          <Title>{t('CREATE_USER', 'Create new user')}</Title>
           <FormInput
             noValidate
             isPopup={isPopup}
@@ -395,7 +395,7 @@ const SignUpFormUI = (props) => {
                 type='submit'
                 disabled={formState.loading || validationFields?.loading}
               >
-                {formState.loading ? `${t('LOADING', 'Loading')}...` : t('CREATE_NEW_USER', 'Create new user')}
+                {formState.loading ? `${t('LOADING', 'Loading')}...` : t('CREATE_USER', 'Create new user')}
               </Button>
             </ButtonContainer>
           </FormInput>
@@ -407,7 +407,7 @@ const SignUpFormUI = (props) => {
           )}
         </FormSide>
         <Alert
-          title={t('CREATE_NEW_USER', 'Create new user')}
+          title={t('CREATE_USER', 'Create new user')}
           content={alertState.content}
           acceptText={t('ACCEPT', 'Accept')}
           open={alertState.open}

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

@@ -72,18 +72,18 @@ const UserDetailsUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       {(validationFields.loading || formState.loading || userState.loading) && (
         <UserData>
-          {validationFieldsLength?.map(field => (
+          {[...Array(isCustomerMode ? 1 : validationFieldsLength?.length)]?.map(field => (
             <React.Fragment key={field?.id}>
-              <Skeleton width={250} height={50} />
-              <Skeleton width={180} height={25} />
-              <Skeleton width={210} height={50} />
+              <Skeleton width={250} height={isCustomerMode ? 10 : 50} />
+              <Skeleton width={180} height={isCustomerMode ? 10 : 25} />
+              <Skeleton width={210} height={isCustomerMode ? 10 : 50} />
             </React.Fragment>
           ))}
         </UserData>
       )}
 
       {!(validationFields.loading || formState.loading || userState.loading) && (
-        <Container>
+        <Container isEdit={isEdit}>
           {isModal && (
             <TitleContainer isAddressFormOpen={isAddressFormOpen && !isEdit}>
               <ModalIcon>

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

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components'
 
-export const Container = styled.div``
+export const Container = styled.div`
+  height: ${({ isEdit }) => isEdit ? 'auto' : '145px'};
+`
 
 export const Header = styled.div`
   display: flex;

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

@@ -109,7 +109,7 @@ export const Button = styled.button`
     `}
     }
   `}
-  ${({ outline }) => outline && css`
+  ${({ outline, hoverColor }) => outline && css`
     background: ${props => props.theme.colors?.backgroundPage || '#FFF'};
     color: #CCC;
     border-color: #CCC;
@@ -119,7 +119,7 @@ export const Button = styled.button`
     }
     &:hover {
       background: '#CCC';
-      color: #FFF;
+      color: ${hoverColor ?? '#FFF'};
     }
   `}
   ${({ circle }) => circle && css`
@@ -154,7 +154,7 @@ export const Button = styled.button`
   `}
   ${({ color }) => color === 'primary' && css`
     background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.primaryContrast};
+    color: #FFF;
     border-color: ${props => props.theme.colors.primary};
     &:hover {
       background: ${props => props.theme.colors.primary};

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

@@ -38,9 +38,7 @@ export const Text = styled.div`
   white-space: nowrap;
 
   h1{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
     width: 100%;
     font-weight: 600;
     font-size: 16px;
@@ -67,6 +65,6 @@ export const Text = styled.div`
 
 export const ToggleMap = styled.div`
   span {
-    margin: 0 auto;
+    margin: 0;
   }
 `

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

@@ -59,6 +59,7 @@ export const BusinessInfoComponent = (props) => {
             {!loading ? (
               <TitleWrapper isCustomLayout={isCustomLayout} disableLeftSpace={singleBusinessRedirect}>
                 <h2 className='bold' id='business_name'>{business?.name}</h2>
+                <span id='business_name_feedback' />
                 {business?.ribbon?.enabled && (
                   <RibbonBox
                     bgColor={business?.ribbon?.color}
@@ -204,11 +205,11 @@ export const BusinessInfoComponent = (props) => {
                 <div className='preorder-Reviews'>
                   {isPreOrderSetting && (
                     <>
-                      <span onClick={() => setIsPreOrder(true)}>{t('PREORDER', 'Preorder')}</span>
+                      <span onClick={() => setIsPreOrder(true)}>{isCustomerMode ? t('CHANGE_SCHEDULE', 'Change schedule') : t('PREORDER', 'Preorder')}</span>
                       <span className='dot'>•</span>
                     </>
                   )}
-                  {business.reviews?.reviews && !hideReviewsPopup && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
+                  {business.reviews?.reviews && !hideReviewsPopup && !isCustomerMode && <span onClick={() => setIsBusinessReviews(true)}>{t('REVIEWS', 'Reviews')}</span>}
                 </div>
               ) : (
                 <Skeleton width={isCustomerMode ? 100 : 150} />

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

@@ -132,7 +132,7 @@ export const BusinessBasicInformation = (props) => {
   const handleScroll = () => {
     const searchElement = document.getElementById('search-component')
     if (searchElement) {
-      const limit = window.pageYOffset >= (isChew ? searchElement?.offsetTop + 40 : searchElement?.offsetTop) && window.pageYOffset > 0
+      const limit = window.scrollY >= (isChew ? searchElement?.offsetTop + 40 : searchElement?.offsetTop) && window.scrollY > 0
       if (limit) {
         const classAdded = searchElement.classList.contains('fixed-search')
         !classAdded && searchElement.classList.add('fixed-search')
@@ -140,15 +140,26 @@ export const BusinessBasicInformation = (props) => {
         searchElement && searchElement.classList.remove('fixed-search')
       }
     }
+    const backArrowElement = document.getElementById('back-arrow')
 
     const businessNameElement = document.getElementById('business_name')
+    const businessNameFeedbackElement = document.getElementById('business_name_feedback')
     if (businessNameElement) {
-      const limit = window.pageYOffset >= (isChew && searchElement ? searchElement?.offsetTop + 40 : (businessNameElement?.offsetTop - 55)) && window.pageYOffset > 0
+      const limit = window.scrollY >= (isChew && searchElement ? searchElement?.offsetTop + 40 : (businessNameElement?.offsetTop - 55)) && window.scrollY > 0
       if (limit) {
         const classAdded = businessNameElement.classList.contains('fixed-name')
         !classAdded && businessNameElement.classList.add('fixed-name')
+        if (!isChew) {
+          const classAdded2 = backArrowElement?.classList?.contains?.('fixed-arrow')
+          !classAdded2 && backArrowElement.classList.add('fixed-arrow')
+        }
+        if (businessNameFeedbackElement) businessNameFeedbackElement.style.display = 'block'
       } else {
         businessNameElement && businessNameElement.classList.remove('fixed-name')
+        if (!isChew) {
+          backArrowElement && backArrowElement.classList.remove('fixed-arrow')
+        }
+        if (businessNameFeedbackElement) businessNameFeedbackElement.style.display = 'none'
       }
     }
   }
@@ -236,10 +247,10 @@ export const BusinessBasicInformation = (props) => {
                     />
                   </WrapperFloatingSearch>
                 )}
-                {!hideInfoIcon  && (
-                <BusinessMoreDetail>
-                  <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
-                </BusinessMoreDetail>
+                {!hideInfoIcon && (
+                  <BusinessMoreDetail>
+                    <BsInfoCircle onClick={() => setOpenBusinessInformation(true)} />
+                  </BusinessMoreDetail>
                 )}
               </>
             )}

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

@@ -368,7 +368,11 @@ export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
+  span {
+    height: 70px;
+    width: 1px;
+    display: none;
+  }
   h2 {
     font-size: 24px;
     line-height: 36px;
@@ -409,6 +413,7 @@ export const TitleWrapper = styled.div`
     }
     @media (min-width: 768px) {
       font-size: 32px;
+      
     }
   }
 `

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

@@ -230,8 +230,8 @@ const BusinessProductsListingUI = (props) => {
     const backArrowElement = document.getElementById('back-arrow')
     const searchElement = document.getElementById('search-component')
     if (backArrowElement) {
-      const limit = window.pageYOffset >= backArrowElement?.offsetTop && window.pageYOffset > 0
-      const limitWidth = window.pageYOffset >= searchElement?.offsetTop + 40 && window.pageYOffset > 0
+      const limit = window.scrollY >= backArrowElement?.offsetTop - 10 && window.scrollY > 0
+      const limitWidth = window.scrollY >= searchElement?.offsetTop + 45 && window.scrollY > 0
       if (isChew) {
         if (limit && !limitWidth) {
           const classWidthAdded = backArrowElement.classList.contains('fixed-arrow-width')
@@ -240,13 +240,6 @@ const BusinessProductsListingUI = (props) => {
           backArrowElement && backArrowElement.classList.remove('fixed-arrow-width')
         }
       }
-
-      if (limit) {
-        const classAdded = backArrowElement.classList.contains('fixed-arrow')
-        !classAdded && backArrowElement.classList.add('fixed-arrow')
-      } else {
-        backArrowElement && backArrowElement.classList.remove('fixed-arrow')
-      }
     }
 
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL

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

@@ -32,7 +32,7 @@ export const OrdersSection = (props) => {
             horizontal
             isBusinessesPage
             onRedirectPage={onRedirectPage}
-            titleContent={t('CARTS', 'Carts')}
+            titleContent={t('OPEN_CARTS', 'Open carts')}
             businessesIds={businessesIds}
             customArray={
               getCustomArray(orderState.carts)?.filter(cart => cart.products.length > 0)

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

@@ -418,7 +418,7 @@ const BusinessesListingUI = (props) => {
         </HightestRatedWrapper>
       )}
 
-      {(((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && !isAllCategoriesHidden) && (
+      {(((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && !isAllCategoriesHidden && !isCustomerMode) && (
         <BusinessTypeFilter
           images={props.images}
           businessTypes={props.businessTypes}
@@ -430,7 +430,7 @@ const BusinessesListingUI = (props) => {
         <SearchContainer>
           {isCustomLayout && (
             <BusinessesTitle isCustomerMode={isCustomerMode}>
-              {t('BUSINESSES', 'Businesses')}
+              {isCustomerMode ? t('SELECT_THE_BUSINESS', 'Select the business') : t('BUSINESSES', 'businesses')}
             </BusinessesTitle>
           )}
           <WrapperSearch isCustomLayout={isCustomLayout} isCustomerMode={isCustomerMode}>

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

@@ -261,7 +261,7 @@ export const Title = styled.h2`
   font-weight: 600;
   font-size: 24px;
   color: ${props => props.theme?.colors.headingColor};
-  margin: 0px 20px 5px 20px;
+  margin: 20px 20px 5px 20px;
 `
 
 export const TypesWrapper = styled.div`