ordering-ui-external 1.2.3 → 1.3.0

package/src/themes/five/index.js

@@ -72,7 +72,9 @@ import { ProductOption } from './src/components/ProductOption'
 import { ProductOptionSubOption } from './src/components/ProductOptionSubOption'
 import { ProfileOptions } from './src/components/UserProfileForm/ProfileOptions'
 import { Promotions } from './src/components/Promotions'
+import { ProfessionalInfo } from './src/components/ProfessionalInfo'
 import { RenderProductsLayout } from './src/components/RenderProductsLayout'
+import { ReviewProfessional } from './src/components/ReviewProfessional'
 import { ResetPassword } from './src/components/ResetPassword'
 import { SearchBar } from './src/components/SearchBar'
 import { SessionsList } from './src/components/SessionsList'
@@ -80,6 +82,7 @@ import { SidebarMenu } from './src/components/SidebarMenu'
 import { SignUpForm } from './src/components/SignUpForm'
 import { SignUpBusiness } from './src/components/SignUpBusiness'
 import { SignUpDriver } from './src/components/SignUpDriver'
+import { SignUpApproval } from './src/components/SignUpApproval'
 import { SingleProductCard } from './src/components/SingleProductCard'
 import { StripeElementsForm } from './src/components/StripeElementsForm'
 import { StripeRedirectForm } from './src/components/StripeRedirectForm'
@@ -106,6 +109,7 @@ import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
 import { Select } from './src/styles/Select'
 import { Checkbox } from '../../styles/Checkbox'
+import { NavigationBar } from './src/components/NavigationBar'
 
 export {
   AccordionDropdown,
@@ -182,7 +186,9 @@ export {
   ProfileOptions,
   ProductOptionSubOption,
   Promotions,
+  ProfessionalInfo,
   PhoneAutocomplete,
+  ReviewProfessional,
   RenderProductsLayout,
   ResetPassword,
   SearchBar,
@@ -191,6 +197,7 @@ export {
   SignUpForm,
   SignUpBusiness,
   SignUpDriver,
+  SignUpApproval,
   SingleProductCard,
   StripeElementsForm,
   StripeRedirectForm,
@@ -217,5 +224,6 @@ export {
   Input,
   TextArea,
   Select,
-  Checkbox
+  Checkbox,
+  NavigationBar
 }

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

@@ -348,7 +348,7 @@ export const BusinessBasicInformation = (props) => {
             </BusinessInfoItem>
           </BusinessInfo>
         </BusinessInfoContent>
-        {(categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && (
+        {(categoryState?.products?.length !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !business?.professionals?.length && (
           <SearchComponent />
         )}
       </BusinessInfoContainer>

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

@@ -33,9 +33,7 @@ export const ContainerCard = styled.div`
     margin-left: 0;
   `}
   
-  ${({ businessRows }) => businessRows ? css`
-    width: ${() => businessRows === 4 ? 'calc(25% - 40px)' : businessRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)'};
-  ` : css`
+  ${({ businessRows }) => css`
     width: calc(100% - 40px);
 
     @media (min-width: 481px) {
@@ -51,7 +49,7 @@ export const ContainerCard = styled.div`
     }
 
     @media (min-width: 1200px) {
-      width: calc(25% - 40px);
+      width: ${() => businessRows === 4 ? 'calc(25% - 40px)' : businessRows === 3 ? 'calc(33% - 40px)' : 'calc(50% - 40px)'};
     }
   `}
   
@@ -160,8 +158,7 @@ export const BusinessTags = styled.div`
         margin-left: 0px;
     ` : css`
         margin-right: 0px;
-    `
-  }
+    `}
     }
   }
 `

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

@@ -17,7 +17,8 @@ const BusinessProductsCategoriesUI = (props) => {
     business,
     handlerClickCategory,
     categorySelected,
-    useKioskApp
+    useKioskApp,
+    isProfessional
   } = props
 
   const theme = useTheme()
@@ -155,6 +156,13 @@ const BusinessProductsCategoriesUI = (props) => {
     return () => window.removeEventListener('scroll', handleScroll)
   }, [useKioskApp])
 
+  useEffect(() => {
+    if (business?.professionals?.length > 0 && !useKioskApp) {
+      const element = document.getElementById('category-lists')
+      element.setAttribute('style', 'width: 100% !important')
+    }
+  }, [business?.professionals, useKioskApp])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -163,7 +171,7 @@ const BusinessProductsCategoriesUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <CategoriesContainer id='category-lists' className='category-lists' featured={featured} w={props.wContainerStyle}>
+      <CategoriesContainer id='category-lists' className='category-lists' featured={featured} w={props.wContainerStyle} isProfessional={isProfessional}>
         {!isSkeleton ? (
           <Tabs variant='primary'>
             {openBusinessInformation ? (

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

@@ -36,6 +36,11 @@ export const CategoriesContainer = styled.div`
   /* @media (min-width: 381px) {
     padding: 15px 0px 0px 0px;
   } */
+  @media (min-width: 769px) {
+    ${({ isProfessional }) => isProfessional && css`
+      width: 100%;
+    `}
+  }
   @media (min-width: 992px) {
     width: ${props => props.w ?? 'auto'};
   }

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

@@ -34,6 +34,7 @@ import { ProductForm } from '../ProductForm'
 import { Modal } from '../Modal'
 import { Button } from '../../styles/Buttons'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { useIsMounted } from '../../../../../hooks/useIsMounted'
 import { RenderProductsLayout } from '../RenderProductsLayout'
 import { Cart } from '../Cart'
 import { Alert } from '../../../../../components/Confirm'
@@ -74,7 +75,9 @@ const BusinessProductsListingUI = (props) => {
     professionalSelected,
     handleChangeProfessionalSelected,
     onChangeMetaTag,
-    onBusinessClick
+    onBusinessClick,
+    handleChangePriceFilterValues,
+    priceFilterValues
   } = props
 
   const { business, loading, error } = businessState
@@ -96,6 +99,7 @@ const BusinessProductsListingUI = (props) => {
   const [isCartOpen, setIsCartOpen] = useState(false)
   const [isCartModal, setisCartModal] = useState(false)
   const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
+  const isMounted = useIsMounted()
 
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
   const isLazy = businessState?.business?.lazy_load_products_recommended
@@ -290,10 +294,12 @@ const BusinessProductsListingUI = (props) => {
           professionalSelected={professionalSelected}
           handleChangeProfessionalSelected={handleChangeProfessionalSelected}
           onBusinessClick={onBusinessClick}
+          priceFilterValues={priceFilterValues}
+          handleChangePriceFilterValues={handleChangePriceFilterValues}
         />
 
         {
-          !loading && business && !Object.keys(business).length && (
+          isMounted && !loading && business && !Object.keys(business).length && (
             <NotFoundSource
               content={t('NOT_FOUND_BUSINESS_PRODUCTS', theme?.defaultLanguages?.NOT_FOUND_BUSINESS_PRODUCTS || 'No products to show at this business, please try with other business.')}
               btnTitle={t('SEARCH_REDIRECT', theme?.defaultLanguages?.SEARCH_REDIRECT || 'Go to Businesses')}

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const ProductsContainer = styled.div`
   width: 95%;

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

@@ -9,6 +9,7 @@ import {
   useSession,
   useLanguage,
   useConfig,
+  useOrderingTheme,
   BusinessList as BusinessListController
 } from 'ordering-components-external'
 
@@ -75,6 +76,7 @@ const BusinessesListingUI = (props) => {
   const [orderState, { changeCityFilter }] = useOrder()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
+  const orderingTheme = useOrderingTheme()
   const theme = useTheme()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })

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

@@ -74,6 +74,7 @@ const MultiCheckoutUI = (props) => {
   const maximumCarts = 5
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
   const walletCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
+
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
       handleGroupPlaceOrder && handleGroupPlaceOrder()

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

@@ -148,4 +148,5 @@ export const WarningText = styled.p`
   margin: 10px auto;
   text-align: center;
   color: ${props => props.theme.colors.danger500};
+  font-size: 14px;
 `

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage } from 'ordering-components-external'
+import { useLanguage, useOrderingTheme } from 'ordering-components-external'
 import { ProfileOptions } from '../../../../../components/UserProfileForm/ProfileOptions'
 import { OrdersOption } from '../OrdersOption'
 import { Button } from '../../styles/Buttons'
@@ -24,6 +24,9 @@ export const MyOrders = (props) => {
   const [, t] = useLanguage()
   const history = useHistory()
 
+  const [orderingTheme] = useOrderingTheme()
+  const layout = orderingTheme?.theme?.orders?.components?.layout?.type || 'original'
+
   const [selectItem, setSelectItem] = useState('all')
   const [isEmptyActive, setIsEmptyActive] = useState(false)
   const [isEmptyPast, setIsEmptyPast] = useState(false)
@@ -69,7 +72,7 @@ export const MyOrders = (props) => {
       )}
       <Container hideOrders={hideOrders}>
         {!hideOrders && (
-          <h1>{t('MY_ORDERS', 'My orders')}</h1>
+          <h1>{layout === 'appointments' ? t('MY_APPOINTMENTS', 'My appointments') : t('MY_ORDERS', 'My orders')}</h1>
         )}
         {!allEmpty && (
           <MyOrdersMenuContainer className='category-lists'>
@@ -87,7 +90,7 @@ export const MyOrders = (props) => {
             </Tabs>
           </MyOrdersMenuContainer>
         )}
-        {!(isEmptyActive && isEmptyPast && isEmptyPreorder) && selectedOption === 'orders' && (
+        {!(isEmptyActive && isEmptyPast && isEmptyPreorder) && selectedOption === 'orders' && layout !== 'appointments' && (
           <OrderGroupFilterWrapper>
             {filterList?.map((order, i) => (
               <Button

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

@@ -0,0 +1,104 @@
+import React, { useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useLanguage, useEvent, useOrder, useSession } from 'ordering-components-external'
+import BsHouse from '@meronex/icons/bs/BsHouse'
+import BsSearch from '@meronex/icons/bs/BsSearch'
+import AiOutlineShoppingCart from '@meronex/icons/ai/AiOutlineShoppingCart'
+import BsCardChecklist from '@meronex/icons/bs/BsCardChecklist'
+import FaRegUser from '@meronex/icons/fa/FaRegUser'
+
+import { CartContent } from '../CartContent'
+import { Modal } from '../Modal'
+import { AddressForm } from '../AddressForm'
+
+import {
+  NavigationBarContainer,
+  NavigationLink
+} from './styles'
+
+export const NavigationBar = () => {
+  const [, t] = useLanguage()
+  const location = useLocation()
+  const [events] = useEvent()
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const [isCart, setIsCart] = useState(false)
+  const [isAddress, setIsAddress] = useState(false)
+
+  const cartsWithProducts = (orderState?.carts && Object.values(orderState?.carts).filter(cart => cart.products && cart.products?.length > 0)) || null
+
+  const handleGoToPage = (data) => {
+    events.emit('go_to_page', data)
+  }
+
+  const handleChangeExplore = () => {
+    if (auth) handleGoToPage({ page: 'search' })
+    else setIsAddress(true)
+  }
+
+  return (
+    <>
+      <NavigationBarContainer>
+        <NavigationLink
+          active={location.pathname === '/search' || isAddress}
+          onClick={handleChangeExplore}
+        >
+          <BsHouse />
+          <p>{t('HOME', 'Home')}</p>
+        </NavigationLink>
+        <NavigationLink
+          active={location.pathname === '/business_search'}
+          onClick={() => handleGoToPage({ page: 'business_search' })}
+        >
+          <BsSearch />
+          <p>{t('BROWSE', 'Browse')}</p>
+        </NavigationLink>
+        <NavigationLink
+          active={location.pathname === '/profile/orders'}
+          onClick={() => handleGoToPage({ page: 'orders' })}
+        >
+          <BsCardChecklist />
+          <p>{t('ORDERS', 'Orders')}</p>
+        </NavigationLink>
+        <NavigationLink
+          active={isCart}
+          onClick={() => setIsCart(true)}
+        >
+          <AiOutlineShoppingCart />
+          <p>{t('MY_CART', 'My cart')}</p>
+        </NavigationLink>
+        <NavigationLink
+          active={location.pathname === '/profile'}
+          onClick={() => handleGoToPage({ page: 'profile' })}
+        >
+          <FaRegUser />
+          <p>{t('PROFILE', 'Profile')}</p>
+        </NavigationLink>
+      </NavigationBarContainer>
+      <Modal
+        open={isCart}
+        onClose={() => setIsCart(false)}
+        width='50%'
+      >
+        <CartContent
+          carts={cartsWithProducts}
+          isOrderStateCarts={!!orderState.carts}
+          onClose={() => setIsCart(false)}
+        />
+      </Modal>
+      <Modal
+        open={isAddress}
+        title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
+        onClose={() => setIsAddress(false)}
+        width='50%'
+      >
+        <AddressForm
+          useValidationFileds
+          address={orderState?.options?.address || {}}
+          onCancel={() => setIsAddress(false)}
+          onSaveAddress={() => setIsAddress(false)}
+        />
+      </Modal>
+    </>
+  )
+}

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

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components'
+
+export const NavigationBarContainer = styled.div`
+  background: #FFFFFF;
+  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 10vw;
+  position: sticky;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 100;
+`
+
+export const NavigationLink = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  svg {
+    font-size: 18px;
+    color: #B1BCCC;
+  }
+
+  p {
+    margin-top: 2px;
+    margin-bottom: 0px;
+    color: #B1BCCC;
+    font-size: 12px;
+  }
+
+  ${({ active }) => active && css`
+    svg {
+      color: ${props => props.theme.colors.primary};
+    }
+
+    p {
+      color: ${props => props.theme.colors.headingColor};
+    }
+  `}
+`

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

@@ -72,6 +72,7 @@ import { TaxInformation } from '../TaxInformation'
 
 import { getGoogleMapImage } from '../../../../../utils'
 import { OrderHistory } from './OrderHistory'
+import { ReviewProfessional } from '../ReviewProfessional'
 
 const OrderDetailsUI = (props) => {
   const {
@@ -103,9 +104,10 @@ const OrderDetailsUI = (props) => {
   const [isOrderReviewed, setIsOrderReviewed] = useState(false)
   const [isProductReviewed, setIsProductReviewed] = useState(false)
   const [isDriverReviewed, setIsDriverReviewed] = useState(false)
+  const [isProReviewed, setIsProReviewed] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
-  const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false })
+  const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false, professional: false })
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isService, setIsService] = useState(false)
   const [isOrderHistory, setIsOrderHistory] = useState(false)
@@ -212,9 +214,10 @@ const OrderDetailsUI = (props) => {
   ]
 
   const handleOpenReview = () => {
-    if (!order?.review && !isOrderReviewed) setReviewStatus({ order: true, product: false, driver: false })
-    else if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
-    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    if (!order?.review && !isOrderReviewed) setReviewStatus({ order: true, product: false, driver: false, professional: false })
+    else if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false, professional: false })
+    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true, professional: false })
+    else if (isService && !isProReviewed) setReviewStatus({ order: false, product: false, driver: false, professional: true })
     else {
       setIsReviewOpen(false)
       return
@@ -223,18 +226,19 @@ const OrderDetailsUI = (props) => {
   }
 
   const handleCloseReivew = () => {
-    setReviewStatus({ order: false, product: false, driver: false })
+    setReviewStatus({ order: false, product: false, driver: false, professional: false })
     setIsReviewOpen(false)
   }
 
   const closeReviewOrder = () => {
-    if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false })
-    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    if (!isProductReviewed) setReviewStatus({ order: false, product: true, driver: false, professional: false })
+    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true, professional: false })
     else handleCloseReivew()
   }
 
   const closeReviewProduct = () => {
-    if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true })
+    if (isService && !isProReviewed) setReviewStatus({ order: false, product: false, driver: false, professional: true })
+    else if (order?.driver && !order?.user_review && !isDriverReviewed) setReviewStatus({ order: false, product: false, driver: true, professional: false })
     else {
       setIsDriverReviewed(true)
       handleCloseReivew()
@@ -483,7 +487,7 @@ const OrderDetailsUI = (props) => {
                         active={
                           acceptedStatus.includes(parseInt(order?.status, 10)) &&
                           (!order?.review || (order.driver && !order?.user_review)) &&
-                          (!isOrderReviewed || !isProductReviewed || !isDriverReviewed)
+                          (!isOrderReviewed || !isProductReviewed || (isService && !isProReviewed) || !isDriverReviewed)
                         }
                       >
                         <span onClick={handleOpenReview}>{t('REVIEW_ORDER', theme?.defaultLanguages?.REVIEW_ORDER || 'Review your Order')}</span>
@@ -736,7 +740,9 @@ const OrderDetailsUI = (props) => {
                 ? t('REVIEW_ORDER', 'Review order')
                 : (reviewStatus?.product
                   ? t('REVIEW_PRODUCT', 'Review Product')
-                  : t('REVIEW_DRIVER', 'Review Driver')))
+                  : (reviewStatus?.professional
+                    ? t('PROFESSIONAL_REVIEW', 'Professional review')
+                    : t('REVIEW_DRIVER', 'Review Driver'))))
               : t('LOADING', theme?.defaultLanguages?.LOADING || 'Loading...')}
           >
             <ReviewWrapper>
@@ -745,7 +751,9 @@ const OrderDetailsUI = (props) => {
                   ? <ReviewOrder order={order} closeReviewOrder={closeReviewOrder} setIsReviewed={setIsOrderReviewed} />
                   : (reviewStatus?.product
                     ? <ReviewProduct order={order} closeReviewProduct={closeReviewProduct} setIsProductReviewed={setIsProductReviewed} />
-                    : <ReviewDriver order={order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={setIsDriverReviewed} />)
+                    : (reviewStatus?.professional
+                      ? <ReviewProfessional order={order} closeReviewProfessional={handleCloseReivew} setIsProfessionalReviewed={setIsProReviewed} isProfessional />
+                      : <ReviewDriver order={order} closeReviewDriver={handleCloseReivew} setIsDriverReviewed={setIsDriverReviewed} />))
               }
             </ReviewWrapper>
 

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

@@ -0,0 +1,82 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components-external'
+import {
+  Container,
+  FilterWrapper,
+  FilterItem,
+  Divider,
+  SearchWrapper
+} from './styles'
+import { useTheme } from 'styled-components'
+import { Input } from '../../styles/Inputs'
+import { Select } from '../../styles/Select'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
+import { SearchBar } from '../SearchBar'
+
+export const ProfessionalBusinessFilter = (props) => {
+  const {
+    sortByValue,
+    sortByOptions,
+    handleChangeSortBy,
+    handleChangeSearch,
+    searchValue,
+    business,
+    handleChangePriceFilterValues,
+    priceFilterValues
+  } = props
+
+  const [, t] = useLanguage()
+  const { width } = useWindowSize()
+  const theme = useTheme()
+
+  return (
+    <>
+      <SearchWrapper>
+        <SearchBar
+          onSearch={handleChangeSearch}
+          search={searchValue}
+          placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
+          lazyLoad={business?.lazy_load_products_recommended}
+        />
+      </SearchWrapper>
+      <Container>
+        <FilterWrapper>
+          <FilterItem>
+            <span>{t('PREORDER_STEP_2_TIME_OPTION_MIN', 'Min')}.</span>
+            <Input
+              value={priceFilterValues?.min || ''}
+              onKeyPress={(e) => {
+                if (!/^[0-9.]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+              onChange={(e) => handleChangePriceFilterValues('min', e.target.value)}
+              placeholder={t('PREORDER_STEP_2_TIME_OPTION_MIN', 'Min')}
+            />
+          </FilterItem>
+          <FilterItem>
+            <span>{t('MAX', 'Max')}.</span>
+            <Input
+              value={priceFilterValues?.max || ''}
+              onKeyPress={(e) => {
+                if (!/^[0-9.]$/.test(e.key)) {
+                  e.preventDefault()
+                }
+              }}
+              onChange={(e) => handleChangePriceFilterValues('max', e.target.value)}
+              placeholder={t('MAX', 'Max')}
+            />
+          </FilterItem>
+        </FilterWrapper>
+        {width > 576 && <Divider />}
+        <Select
+          notAsync
+          notReload
+          options={sortByOptions}
+          defaultValue={sortByValue}
+          onChange={(val) => handleChangeSortBy && handleChangeSortBy(val)}
+        />
+      </Container>
+    </>
+  )
+}

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

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+
+  #select-input {
+    border-radius: 8px;
+    height: 40px;
+    > div:first-child {
+      height: 100%;
+    }
+  }
+`
+
+export const FilterWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export const FilterItem = styled.div`
+  span {
+    font-weight: 400;
+    font-size: 14px;
+    margin-right: 15px;
+    ${props => props.theme.rtl && css`
+      margin-left: 15px;
+      margin-right: 0px;
+    `}
+  }
+  input {
+    width: 50px;
+    box-sizing: border-box;
+  }
+  margin-right: 15px;
+  ${props => props.theme.rtl && css`
+    margin-left: 15px;
+    margin-right: 0px;
+  `}
+
+  @media (min-width: 500px) {
+    input {
+      width: 100px;
+    }
+    margin-right: 25px;
+    ${props => props.theme.rtl && css`
+      margin-left: 25px;
+      margin-right: 0px;
+    `}
+  }
+`
+
+export const Divider = styled.div`
+  width: 1px;
+  height: 40px;
+  background-color: ${props => props.theme.colors.disabled};
+  margin-right: 25px;
+  ${props => props.theme.rtl && css`
+    margin-right: 0px;
+    margin-left: 25px;
+  `}
+`
+
+export const SearchWrapper = styled.div`
+  width: 100%;
+  margin-bottom: 23px;
+  input {
+    width: 100%;
+  }
+`