ordering-ui-admin-external 1.6.2 → 1.6.3

package/src/components/Shared/Modal/styles.js

@@ -10,16 +10,14 @@ export const Container = styled.div`
 
 export const ModalDialog = styled.div`
   position: relative;
-  background-color: ${({ isTransparent, theme }) => isTransparent ? 'transparent' : theme.colors.backgroundPage || '#FFF'};
-  padding: ${({ padding }) => padding || '20px'};
   width: ${({ width }) => width || '50%'};
   height: ${({ height }) => height};
   border-radius: 10px;
   box-sizing: border-box;
   margin-top: auto;
   margin-bottom: auto;
+  overflow: hidden;
   max-height: calc(var(--vh, 1vh) * 90);
-  overflow: ${({ overflow }) => overflow || 'auto'};
   @media (max-width: 860px) {
     width: 80%;
   }
@@ -30,6 +28,16 @@ export const ModalDialog = styled.div`
     border-radius: 0px;
   }
 `
+
+export const ModalDialogInnerContainer = styled.div`
+  position: relative;
+  padding: ${({ padding }) => padding || '20px'};
+  overflow: ${({ overflow }) => overflow || 'auto'};
+  background-color: ${({ isTransparent, theme }) => isTransparent ? 'transparent' : theme.colors.backgroundPage || '#FFF'};
+  width: 100%;
+  height: 100%;
+`
+
 export const ModalActions = styled.div`
   display: flex;
   justify-content: space-around;

package/src/components/SidebarMenu/index.js

@@ -18,15 +18,16 @@ import {
   BoxArrowUpRight,
   Cart3,
   Cash,
-  CloudDownload,
-  BagCheck
+  BagCheck,
+  CloudDownload
 } from 'react-bootstrap-icons'
 import { useTheme } from 'styled-components'
-import { useEvent, useLanguage, useSession, useConfig } from 'ordering-components-admin-external'
+import { SidebarMenu as SidebarMenuController, useEvent, useLanguage, useSession, useConfig, useApi } from 'ordering-components-admin-external'
 import { useWindowSize } from '../../hooks/useWindowSize'
 import { Accordion, Image, Button, AccordionContext, useAccordionToggle } from 'react-bootstrap'
 import { LanguageSelector } from '../LanguageSelector'
 import { useInfoShare } from '../../contexts/InfoShareContext'
+import { firstLetterCapital } from '../../utils'
 import {
   SidebarContainer,
   SidebarInnerContainer,
@@ -41,21 +42,25 @@ import {
   LanguageSelectorContainer
 } from './styles'
 
-export const SidebarMenu = (props) => {
+const SidebarMenuUI = (props) => {
+  const { getBillingToken, billingUrl } = props
+
   const location = useLocation()
   const theme = useTheme()
   const [events] = useEvent()
   const [, t] = useLanguage()
   const [sessionState] = useSession()
   const [{ configs }] = useConfig()
+  const [ordering] = useApi()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const windowSize = useWindowSize()
 
   const ordersSubMenus = [
     {
       id: 1,
-      title: t('ORDERS_MANAGER', 'Orders manager'),
-      pageName: 'orders'
+      title: t('ORDERS_LIST', 'Orders list'),
+      pageName: 'orders',
+      url: '/orders'
     },
     {
       id: 2,
@@ -77,7 +82,7 @@ export const SidebarMenu = (props) => {
   const loyaltySubMenus = [
     {
       id: 1,
-      title: t('REWARDS_PROGRAMS', 'Rewards programs'),
+      title: t('LOYALTY_AUTOMATION', 'Loyalty automation'),
       pageName: 'rewards_programs',
       url: '/loyalty/rewards-programs'
     }
@@ -104,7 +109,7 @@ export const SidebarMenu = (props) => {
     },
     {
       id: 2,
-      title: t('RECOVERY_ACTIONS', 'Recovery actions'),
+      title: t('CART_RECOVERY_AUTOMATION', 'Cart recovery automation'),
       pageName: 'recovery_actions',
       url: '/cart-recovery/recovery-actions'
     }
@@ -134,6 +139,24 @@ export const SidebarMenu = (props) => {
       title: t('DRIVER_APP', 'Driver app'),
       pageName: 'driver_app',
       url: '/my-products/driver-app'
+    },
+    {
+      id: 5,
+      title: t('POS_APP', 'POS'),
+      pageName: 'pos_app',
+      url: '/my-products/pos-app'
+    },
+    {
+      id: 6,
+      title: t('CALL_CENTER_APP', 'Call center'),
+      pageName: 'call_center_app',
+      url: '/my-products/call-center-app'
+    },
+    {
+      id: 7,
+      title: t('KIOSK_APP', 'Kiosk'),
+      pageName: 'kiosk_app',
+      url: '/my-products/kiosk-app'
     }
   ]
 
@@ -251,7 +274,7 @@ export const SidebarMenu = (props) => {
     },
     {
       id: 5,
-      title: t('ADVANCED_REPORTS', 'Advanced Reports'),
+      title: t('ENTERPRISE_REPORTS', 'Enterprise reports'),
       pageName: 'reports',
       url: '/intelligence/reports'
     }
@@ -276,14 +299,14 @@ export const SidebarMenu = (props) => {
     },
     {
       id: 3,
-      title: t('DRIVERS_COMPANIES', 'Drivers companies'),
+      title: t('DELIVERY_COMPANIES', 'Delivery companies'),
       pageName: 'drivers_companies',
       url: '/delivery/drivers-companies',
       enabled: sessionState?.user?.level === 0
     },
     {
       id: 4,
-      title: t('DRIVERS_GROUPS', 'Drivers groups'),
+      title: t('DELIVERY_AUTOMATION', 'Delivery automation'),
       pageName: 'drivers_groups',
       url: '/delivery/drivers-groups',
       enabled: sessionState?.user?.level === 5 || sessionState?.user?.level === 0
@@ -293,7 +316,7 @@ export const SidebarMenu = (props) => {
   const marketingSubmenus = [
     {
       id: 1,
-      title: t('PROMOTIONS_ENTERPRISE', 'Promotions enterprise'),
+      title: t('PROMOTION_AUTOMATION', 'Promotions automation'),
       pageName: 'enterprise_promotions',
       url: '/marketing/promotions-enterprise'
     }
@@ -305,21 +328,6 @@ export const SidebarMenu = (props) => {
     // }
   ]
 
-  const downloadsSubMenus = [
-    {
-      id: 1,
-      title: t('FREE_PRODUCTS', 'Free products'),
-      pageName: 'free_products',
-      url: '/downloads/free-products'
-    },
-    {
-      id: 2,
-      title: t('PURCHASED_PRODUCTS', 'Purchased products'),
-      pageName: 'purchased_products',
-      url: '/downloads/purchased-products'
-    }
-  ]
-
   const handleGoToPage = (data) => {
     if (windowSize.width < 768) {
       handleMenuCollapse(true)
@@ -331,12 +339,23 @@ export const SidebarMenu = (props) => {
     window.open(link, '_blank')
   }
 
+  const handleOpenSite = () => {
+    handleGoToLink(`https://${ordering.project}.tryordering.com`)
+  }
+
   useEffect(() => {
     if (windowSize.width < 1024) {
       handleMenuCollapse(true)
     }
   }, [windowSize.width])
 
+  const handleClickBilling = async () => {
+    const billingState = await getBillingToken()
+    if (!billingState?.error && billingState?.result?.access_token) {
+      window.open(`${billingUrl}?token=${billingState?.result?.access_token}`, '_blank')
+    }
+  }
+
   return (
     <>
       <SidebarContainer
@@ -365,7 +384,28 @@ export const SidebarMenu = (props) => {
           <SidebarMainContent>
             <SidebarContent className='d-flex flex-column justify-content-between p-1 pt-0'>
               <div className='d-flex flex-column'>
+                {sessionState?.user?.level === 0 && (
+                  <Button
+                    className='d-flex align-items-center'
+                    variant={false}
+                    onClick={handleOpenSite}
+                  >
+                    <BoxArrowUpRight />
+                    <span>{t('MY_WEBSITE', 'My Website')}</span>
+                  </Button>
+                )}
                 <Accordion>
+                  {/* {sessionState?.user?.level === 0 && (
+                    <Button
+                      className='d-flex align-items-center'
+                      variant={false}
+                      onClick={() => handleGoToLink('https://apps.tryordering.com/store/marketplace')}
+                    >
+                      <BoxArrowUpRight />
+                      <span>{t('MARKETPLACE', 'Marketplace')}</span>
+                    </Button>
+                  )} */}
+
                   {sessionState?.user?.level !== 5 && sessionState?.user?.level !== 8 && (
                     <MenuContainer>
                       <ContextAwareToggle
@@ -407,7 +447,7 @@ export const SidebarMenu = (props) => {
                                 active={location.pathname.includes(item.url)}
                                 onClick={() => handleGoToPage({ page: item.pageName })}
                               >
-                                {item.title}
+                                {firstLetterCapital(item.title)}
                               </SubMenu>
                             )
                           ))}
@@ -502,7 +542,7 @@ export const SidebarMenu = (props) => {
                         }
                       >
                         <BarChartLineIcon />
-                        <span>{t('BUSINESS_INTELLIGENCE', 'Business Intelligence')}</span>
+                        <span>{firstLetterCapital(t('BUSINESS_INTELLIGENCE', 'Business Intelligence'))}</span>
                       </ContextAwareToggle>
                       <Accordion.Collapse eventKey='5'>
                         <MenuContent>
@@ -516,7 +556,7 @@ export const SidebarMenu = (props) => {
                                 active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
                                 onClick={() => handleGoToPage({ page: item.pageName })}
                               >
-                                {item.title}
+                                {firstLetterCapital(item.title)}
                               </SubMenu>
                             ))
                           }
@@ -548,7 +588,7 @@ export const SidebarMenu = (props) => {
                                 active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
                                 onClick={() => handleGoToPage({ page: item.pageName })}
                               >
-                                {item.title}
+                                {firstLetterCapital(item.title)}
                               </SubMenu>
                             )
                           ))}
@@ -577,7 +617,7 @@ export const SidebarMenu = (props) => {
                               active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
                               onClick={() => handleGoToPage({ page: item.pageName })}
                             >
-                              {item.title}
+                              {firstLetterCapital(item.title)}
                             </SubMenu>
                           ))}
                         </MenuContent>
@@ -606,7 +646,7 @@ export const SidebarMenu = (props) => {
                               active={location.pathname.includes(item.url)}
                               onClick={() => handleGoToPage({ page: item.pageName })}
                             >
-                              {item.title}
+                              {firstLetterCapital(item.title)}
                             </SubMenu>
                           ))}
                         </MenuContent>
@@ -634,14 +674,14 @@ export const SidebarMenu = (props) => {
                               active={location.pathname.includes(item.url)}
                               onClick={() => handleGoToPage({ page: item.pageName })}
                             >
-                              {item.title}
+                              {firstLetterCapital(item.title)}
                             </SubMenu>
                           ))}
                         </MenuContent>
                       </Accordion.Collapse>
                     </MenuContainer>
                   )}
-                  {/* {sessionState?.user?.level === 0 && (
+                  {sessionState?.user?.level === 0 && (
                     <MenuContainer>
                       <span>{t('SALES_CHANNELS_AND_PRODUCTS', 'Sales channels and products')}</span>
                       <ContextAwareToggle
@@ -650,7 +690,10 @@ export const SidebarMenu = (props) => {
                           location.pathname === '/my-products/ordering-website' ||
                           location.pathname === '/my-products/customer-app' ||
                           location.pathname === '/my-products/store-app' ||
-                          location.pathname === '/my-products/driver-app'
+                          location.pathname === '/my-products/driver-app' ||
+                          location.pathname === '/my-products/pos-app' ||
+                          location.pathname === '/my-products/call-center-app' ||
+                          location.pathname === '/my-products/kiosk-app'
                         }
                       >
                         <BagCheck />
@@ -670,7 +713,7 @@ export const SidebarMenu = (props) => {
                         </MenuContent>
                       </Accordion.Collapse>
                     </MenuContainer>
-                  )} */}
+                  )}
                 </Accordion>
               </div>
               <div className='d-flex flex-column mt-4'>
@@ -703,7 +746,7 @@ export const SidebarMenu = (props) => {
                               active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
                               onClick={() => handleGoToPage({ page: item.pageName })}
                             >
-                              {item.title}
+                              {firstLetterCapital(item.title)}
                             </SubMenu>
                           ))}
                         </MenuContent>
@@ -735,41 +778,12 @@ export const SidebarMenu = (props) => {
                   <Button
                     className='d-flex align-items-center'
                     variant={false}
-                    onClick={() => handleGoToLink('https://apps.tryordering.com/store/marketplace')}
+                    onClick={() => handleClickBilling()}
                   >
-                    <BoxArrowUpRight />
-                    <span>{t('MARKETPLACE', 'Marketplace')}</span>
+                    <Cash />
+                    <span>{t('BILLING', 'Billing')}</span>
                   </Button>
                 )}
-                {sessionState?.user?.level === 0 && (
-                  <Accordion>
-                    <MenuContainer>
-                      <ContextAwareToggle
-                        eventKey='11'
-                        active={
-                          location.pathname === '/downloads/free-products' ||
-                          location.pathname === '/downloads/purchased-products'
-                        }
-                      >
-                        <CloudDownload />
-                        <span>{t('DOWNLOADS', 'Downloads')}</span>
-                      </ContextAwareToggle>
-                      <Accordion.Collapse eventKey='11'>
-                        <MenuContent>
-                          {downloadsSubMenus.map(item => (
-                            <SubMenu
-                              key={item.id}
-                              active={location.pathname.includes(item.pageName) || location.pathname.includes(item?.url)}
-                              onClick={() => handleGoToPage({ page: item.pageName })}
-                            >
-                              {item.title}
-                            </SubMenu>
-                          ))}
-                        </MenuContent>
-                      </Accordion.Collapse>
-                    </MenuContainer>
-                  </Accordion>
-                )}
               </div>
             </SidebarContent>
             <UserInfo
@@ -822,3 +836,11 @@ const ContextAwareToggle = ({ children, eventKey, callback, page, handleGoToPage
     </Button>
   )
 }
+
+export const SidebarMenu = (props) => {
+  const sidebarMenu = {
+    ...props,
+    UIComponent: SidebarMenuUI
+  }
+  return <SidebarMenuController {...sidebarMenu} />
+}

package/src/components/SidebarMenu/styles.js

@@ -44,7 +44,6 @@ export const SidebarContainer = styled.div`
     }
 
     span {
-      text-transform: capitalize;
       ${props => props.theme?.rtl ? css`
         margin-right: 15px;
       ` : css`
@@ -168,6 +167,14 @@ export const MenuContainer = styled.div`
     text-align: initial;
   }
 
+  > span {
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 15px;
+    padding: 20px;
+    color: ${props => props.theme.colors.lightGray};
+  }
+
   ${({ disabledFeature }) => disabledFeature && css`
     background-color: ${props => props.theme.colors.disabled};
     cursor: not-allowed;

package/src/components/Stores/AddBusinessForm/index.js

@@ -11,7 +11,7 @@ import {
 } from 'ordering-components-admin-external'
 import BiImage from '@meronex/icons/bi/BiImage'
 import Skeleton from 'react-loading-skeleton'
-import { bytesConverter } from '../../../utils'
+import { bytesConverter, stringToSlug } from '../../../utils'
 import { Alert, CitySelector, ImageCrop, Modal } from '../../Shared'
 import { Button, Input, TextArea } from '../../../styles'
 
@@ -224,7 +224,9 @@ const AddBusinessFormUI = (props) => {
                     ? formState?.result?.result?.name
                     : formState?.changes?.name
                 }
-                onChange={handleChangeInput}
+                onChange={e => {
+                  handleChangeInput([{ name: 'name', value: e.target.value }, { name: 'slug', value: stringToSlug(e.target.value) }], true)
+                }}
                 ref={formMethods.register({
                   required: t('BUSINESS_NAME_REQUIRED', 'Business name is required')
                 })}
@@ -266,17 +268,16 @@ const AddBusinessFormUI = (props) => {
               <Input
                 name='slug'
                 placeholder={t('SLUG', 'slug')}
-                defaultValue={
-                  formState?.result?.result
-                    ? formState?.result?.result?.slug
-                    : formState?.changes?.slug
-                }
+                value={formState?.changes?.slug || ''}
                 onChange={handleChangeInput}
                 ref={formMethods.register({
                   required: t('BUSINESS_SLUG_REQUIRED', 'Business slug is required')
                 })}
                 disabled={formState.loading}
                 autoComplete='off'
+                onKeyPress={e => {
+                  if (e.which === 32) { e.preventDefault() }
+                }}
               />
             </InputWrapper>
             <InputWrapper>
@@ -299,6 +300,7 @@ const AddBusinessFormUI = (props) => {
               <label>{t('CITY', 'City')}</label>
               <CitySelector
                 isDefault
+                isAddMode
                 defaultValue={
                   formState?.result?.result
                     ? formState?.result?.result?.city_id
@@ -325,7 +327,7 @@ const AddBusinessFormUI = (props) => {
                     ? formState?.result?.result?.address
                     : formState?.changes?.address ?? ''
                 }
-                autoComplete='new-field'
+                autoComplete='new-password'
                 countryCode={configs?.country_autocomplete?.value || '*'}
               />
             </InputWrapper>

package/src/components/Stores/BusinessBrandGENDetail/index.js

@@ -195,6 +195,9 @@ const BusinessBrandGENDetailUI = (props) => {
             onChange={handleChangeInput}
             disabled={brandFormState.loading}
             autoComplete='off'
+            onKeyPress={e => {
+              if (e.which === 32) { e.preventDefault() }
+            }}
           />
         </FormControl>
         <SwitchWrapper>

package/src/components/Stores/BusinessProductList/styles.js

@@ -27,7 +27,7 @@ export const ProductListContainer = styled.div`
   }
 
   @media (min-width: 993px) {
-    max-height: calc(100vh - 310px);
+    max-height: calc(100vh - 320px);
   }
 `
 

package/src/components/Stores/BusinessProductsCategories/styles.js

@@ -28,7 +28,7 @@ export const ListContent = styled.div`
   }
 
   @media (min-width: 768px) {
-    max-height: calc(100vh - 230px);
+    max-height: calc(100vh - 240px);
   }
 `
 

package/src/components/Stores/BusinessProductsCategoyInfo/index.js

@@ -315,6 +315,9 @@ export const BusinessProductsCategoyInfo = (props) => {
           value={formState?.changes?.description || ''}
           onChange={handleChangeInput}
           autoComplete='off'
+          onKeyPress={e => {
+            if (e.which === 32) { e.preventDefault() }
+          }}
         />
       </CategoryNameWrapper>
       {!isAddMode && (

package/src/components/Stores/BusinessProductsListing/index.js

@@ -5,6 +5,7 @@ import { useWindowSize } from '../../../hooks/useWindowSize'
 import RiImageAddFill from '@meronex/icons/ri/RiImageAddFill'
 import {
   useLanguage,
+  useApi,
   BusinessProductsListing as BusinessProductsListingController
 } from 'ordering-components-admin-external'
 import { BusinessProductsCategoyDetails } from '../BusinessProductsCategoyDetails'
@@ -23,6 +24,7 @@ import { BatchImageForm } from '../BatchImageForm'
 import { BusinessDetails } from '../BusinessDetails'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { ImportersButton } from '../ImportersButton'
+import { AddBusinessForm } from '../AddBusinessForm'
 
 import {
   CategoryProductsContainer,
@@ -38,7 +40,8 @@ import {
   BusinessNameWrapper,
   BusinessSelector,
   Breadcrumb,
-  ColumnsAllowWrapper
+  ColumnsAllowWrapper,
+  ButtonWrapper
 } from './styles'
 
 const BusinessProductsListingUI = (props) => {
@@ -71,6 +74,7 @@ const BusinessProductsListingUI = (props) => {
 
   const [, t] = useLanguage()
   const { width } = useWindowSize()
+  const [ordering] = useApi()
   const [{ isCollapse }, { handleMenuCollapse }] = useInfoShare()
   const [viewMethod, setViewMethod] = useState('list')
   const [currentCategory, setCurrentCategory] = useState(null)
@@ -190,6 +194,15 @@ const BusinessProductsListingUI = (props) => {
     setBatchImageFormOpen(true)
   }
 
+  const handleOpenSite = () => {
+    window.open(`https://${ordering.project}.tryordering.com/store/${businessState?.business?.slug}`, '_blank')
+  }
+
+  const handleOpenAddBusiness = () => {
+    setOpenSidebar('add_business')
+    handleClose()
+  }
+
   useEffect(() => {
     if (slug && !isInitialRender) {
       setOpenSidebar(null)
@@ -236,6 +249,7 @@ const BusinessProductsListingUI = (props) => {
                         isOpen={showSelectHeader}
                         changeBusinessState={changeBusinessState}
                         noActiveStatusCondition
+                        handleOpenAddBusiness={handleOpenAddBusiness}
                       />
                     )}
                   </BusinessSelector>
@@ -293,6 +307,16 @@ const BusinessProductsListingUI = (props) => {
             </ActionsGroup>
           )}
         </HeaderContainer>
+        <ButtonWrapper>
+          <Button
+            color='primary'
+            outline
+            borderRadius='8px'
+            onClick={handleOpenSite}
+          >
+            {t('STORE_WEBSITE', 'Store website')}
+          </Button>
+        </ButtonWrapper>
         {slug && (
           <CategoryProductsContent>
             <CategoryListContainer ref={categoryListRef}>
@@ -431,6 +455,16 @@ const BusinessProductsListingUI = (props) => {
           onClose={() => setOpenSidebar(null)}
         />
       )}
+      {openSidebar === 'add_business' && (
+        <SideBar
+          open={openSidebar === 'add_business'}
+          onClose={() => setOpenSidebar(null)}
+        >
+          <AddBusinessForm
+            handleSucessAddBusiness={() => setOpenSidebar(false)}
+          />
+        </SideBar>
+      )}
       <Modal
         width={width > 1440 ? '40%' : '60%'}
         padding='20px'

package/src/components/Stores/BusinessProductsListing/styles.js

@@ -104,7 +104,6 @@ export const ActionsGroup = styled.div`
 export const CategoryProductsContent = styled.div`
   display: flex;
   flex-direction: row;
-  margin-top: 50px;
   min-height: calc(100% - 150px);
 
   @media (max-width: 768px) {
@@ -227,3 +226,12 @@ export const ColumnsAllowWrapper = styled.div`
   position: relative;
   margin: 0 5px;
 `
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+  button {
+    height: 42px;
+  }
+`

package/src/components/Stores/BusinessSelectHeader/index.js

@@ -5,6 +5,7 @@ import {
   useUtils,
   DashboardBusinessList as BusinessListController
 } from 'ordering-components-admin-external'
+import { Button } from '../../../styles'
 import {
   PopMenuContatiner,
   BusinessSearch,
@@ -24,7 +25,8 @@ const BusinessessListingUI = (props) => {
     getPageBusinesses,
     isOpen,
     close,
-    changeBusinessState
+    changeBusinessState,
+    handleOpenAddBusiness
   } = props
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
@@ -91,7 +93,7 @@ const BusinessessListingUI = (props) => {
             </>
           )}
         </BusinessList>
-        {pagination && (
+        {pagination && pagination?.total > 0 && (
           <WrapperPagination className='pagination-container'>
             {pagination?.total && (
               <Pagination
@@ -105,6 +107,16 @@ const BusinessessListingUI = (props) => {
             )}
           </WrapperPagination>
         )}
+
+        {!businessList.loading && pagination?.total === 0 && (
+          <Button
+            color='primary'
+            borderRadius='8px'
+            onClick={() => handleOpenAddBusiness()}
+          >
+            {t('ADD_NEW_STORE', 'Add new store')}
+          </Button>
+        )}
       </SelectHeaderContent>
     </PopMenuContatiner>
   )

package/src/components/Stores/BusinessSelectHeader/styles.js

@@ -16,6 +16,11 @@ export const SelectHeaderContent = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
+
+  > button {
+    margin-top: 10px;
+    width: 100%;
+  }
 `
 export const BusinessSearch = styled.div`
   display: flex;