ordering-ui-external 1.8.8 → 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/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/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

@@ -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>

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

@@ -86,6 +86,7 @@ const PhoneAutocompleteUI = (props) => {
     }
     if (!inputValue) {
       setInputValue(inputValue)
+      onChangeNumber(inputValue)
     }
     if ((inputValue && inputValue.length > 10) || !(/^[0-9]+$/.test(inputValue))) {
       return
@@ -95,6 +96,7 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const onChange = (option) => {
+    if (!option) { onChangeNumber('') }
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)

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

@@ -36,7 +36,8 @@ const PlaceSpotUI = (props) => {
     setVehicle,
     setSpotState,
     handleChangeSpot,
-    setHasBusinessPlaces
+    setHasBusinessPlaces,
+    setPlaceSpotNumber
   } = props
 
   const el = useRef()
@@ -92,6 +93,7 @@ const PlaceSpotUI = (props) => {
       let spotNumber = parseFloat(e?.target?.value)
       spotNumber = isNaN(spotNumber) ? null : spotNumber
       setSpotNumber(spotNumber)
+      setPlaceSpotNumber(spotNumber)
     }
   }
 

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

@@ -508,6 +508,7 @@ export const Properties = styled.div`
 export const ProductDescription = styled.p`
   margin-top: 0px;
   white-space: pre-wrap;
+  color: #909BA9;
 `
 export const PriceContent = styled.div`
   display: flex;

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

@@ -147,7 +147,6 @@ export const SuboptionPrice = styled.div`
   color: ${props => props.theme.colors.darkGray};
   margin-left: 5px;
   min-width: 60px;
-  max-width: 60px;
   ${props => props.theme?.rtl && css`
     margin-right: 5px;
     margin-left: 0px;

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

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react'
-import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage, useSession, LogoutAction as LogoutActionController, useEvent, useCustomer, useConfig, useOrderingTheme, useOrder } from 'ordering-components-external'
 import { usePopper } from 'react-popper'
 import {
   HeaderItem,
@@ -29,13 +29,16 @@ export const UserPopover = (props) => {
     isHome,
     optionsList,
     withLogout,
-    isCustomerMode
+    isCustomerMode,
+    handleOpenAddressModal
   } = props
   const [sessionState] = useSession()
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ configs }] = useConfig()
   const [orderingTheme] = useOrderingTheme()
+  const [orderStatus] = useOrder()
+
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
@@ -56,6 +59,8 @@ export const UserPopover = (props) => {
     { name: 'addresses', pathname: '/profile/addresses', displayName: 'places', key: 'places', isActive: isAddressListNewPage }
   ]
 
+  const addressRequiredPageNames = ['business_search', 'promotions']
+
   const options = isCustomerMode
     ? optionsDefault.filter(option => option.name === 'profile')
     : optionsList || optionsDefault
@@ -94,7 +99,11 @@ export const UserPopover = (props) => {
   }
 
   const handleGoToPage = (page) => {
-    events.emit('go_to_page', { page })
+    if (!orderStatus.options?.address?.location && addressRequiredPageNames.includes(page)) {
+      handleOpenAddressModal()
+    } else {
+      events.emit('go_to_page', { page })
+    }
     props.onClick && props.onClick()
   }
 

package/src/themes/pwa/src/components/MomentContent/index.js

@@ -23,7 +23,6 @@ export const MomentContent = (props) => {
   const momentProps = {
     maxDate: currentDate
   }
-
   const { width } = useWindowSize()
   const momentControl = document?.getElementById('moment_control')?.getBoundingClientRect()
 

package/src/themes/pwa/src/components/MomentControl/index.js

@@ -133,9 +133,6 @@ const MomentControlUI = (props) => {
     }
   }, [hoursList])
 
-  useEffect(() => {
-    if (isASP) handleCheckBoxChange(true)
-  }, [isAsap])
 
   return (
     <div id='moment_control'>

package/src/themes/six/src/components/BusinessController/styles.js

@@ -4,6 +4,10 @@ import styled, { css } from 'styled-components'
 export const ContainerCard = styled.div` 
   width: 100%;
   position: relative;
+  @media (min-width: 768px) {
+    padding: 7px 10px 7px 20px;
+    margin-bottom: 5px;
+  }
 `
 
 export const WrapperBusinessCard = styled.div`

package/src/themes/six/src/components/SearchBar/index.js

@@ -2,10 +2,12 @@ import React, { useRef, useEffect } from 'react'
 import { Input } from '../../styles/Inputs'
 import { useLanguage } from 'ordering-components-external'
 import AiOutlineSearch from '@meronex/icons/ai/AiOutlineSearch'
+import { Funnel } from 'react-bootstrap-icons'
 import {
   BusinessSearch,
   DeleteContent,
-  SearchWrapper
+  SearchWrapper,
+  FunnelWrapper
 } from './styles'
 export const SearchBar = (props) => {
   const {
@@ -13,7 +15,8 @@ export const SearchBar = (props) => {
     search,
     placeholder,
     lazyLoad,
-    isCustomLayout
+    isCustomLayout,
+    isStarbucks
   } = props
 
   const [, t] = useLanguage()
@@ -90,6 +93,11 @@ export const SearchBar = (props) => {
         >
           <AiOutlineSearch />
         </SearchWrapper>
+        {isStarbucks &&
+          <FunnelWrapper>
+            <Funnel />
+          </FunnelWrapper>
+        }
       </BusinessSearch>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -68,7 +68,7 @@ export const DeleteContent = styled.span`
   `}
   ${({ isClear, isHome }) => isClear && css`
     left: initial;
-    right: 20px;
+    right: 40px;
   `}
   ${props => props.theme?.rtl && css`
     transform: translate(30%, 0%);
@@ -94,6 +94,17 @@ export const DeleteContent = styled.span`
 
 export const SearchWrapper = styled(DeleteContent)``
 
+export const FunnelWrapper = styled.div`
+  svg {
+    position: absolute;
+    right: 10px !important;
+    color: #ADB5BD;
+    width: 20px;
+    height: 20px;
+    bottom: 22px;
+  }
+`
+
 export const SearchIcon = styled.div`
   background-image: url(${props => props.theme?.images?.general?.searchIcon});
   background-position: right 10px center;