ordering-ui-external 1.0.1 → 1.1.0

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

@@ -30,14 +30,6 @@ const AddressDetailsUI = (props) => {
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
   const [{ user }] = useCustomer()
 
-  const handleFindBusinesses = () => {
-    if (!orderState?.options?.address?.location) {
-      setAlertState({ open: true, content: [t('SELECT_AN_ADDRESS_TO_SEARCH', 'Select or add an address to search')] })
-      return
-    }
-    setOpenModal(false)
-  }
-
   useEffect(() => {
     return () => setOpenModal(false)
   }, [])
@@ -67,7 +59,6 @@ const AddressDetailsUI = (props) => {
         )}
 
         <Modal
-          title={t('ADDRESSES', 'Addresses')}
           open={openModal}
           width='70%'
           onClose={() => setOpenModal(false)}
@@ -77,7 +68,6 @@ const AddressDetailsUI = (props) => {
             changeOrderAddressWithDefault
             userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
             onCancel={() => setOpenModal(false)}
-            onAccept={() => handleFindBusinesses()}
             userCustomerSetup={isCustomerMode && user}
             isFromCheckout={isFromCheckout}
             isCustomerMode={isCustomerMode}

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

@@ -16,7 +16,8 @@ import {
   GoogleMapsMap,
   useSession,
   useOrder,
-  useConfig
+  useConfig,
+  useOrderingTheme
 } from 'ordering-components-external'
 import { Alert } from '../Confirm'
 import { GoogleGpsButton } from '../../../../../components/GoogleGpsButton'
@@ -62,7 +63,7 @@ const AddressFormUI = (props) => {
   const [, t] = useLanguage()
   const formMethods = useForm()
   const [{ auth }] = useSession()
-
+  const [orderingTheme] = useOrderingTheme()
   const [state, setState] = useState({ selectedFromAutocomplete: true })
   const [addressTag, setAddressTag] = useState(addressState?.address?.tag)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -76,10 +77,13 @@ const AddressFormUI = (props) => {
       : formState.changes?.location ?? null
   )
 
+  const isHideMap = orderingTheme?.theme?.header?.components?.address_form?.components?.map?.hidden
+  const isHideIcons = orderingTheme?.theme?.header?.components?.address_form?.components?.icons?.hidden
+
   const maxLimitLocation = configState?.configs?.meters_to_change_address?.value
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
   const isLocationRequired = configState.configs?.google_autocomplete_selection_required?.value === '1' ||
-                              configState.configs?.google_autocomplete_selection_required?.value === 'true'
+    configState.configs?.google_autocomplete_selection_required?.value === 'true'
 
   const mapErrors = {
     ERROR_NOT_FOUND_ADDRESS: 'Sorry, we couldn\'t find an address',
@@ -247,6 +251,10 @@ const AddressFormUI = (props) => {
     })
   }
 
+  const showFieldWithTheme = (name) => {
+    return !orderingTheme?.theme?.header?.components?.address_form?.components?.[name]?.hidden
+  }
+
   useEffect(() => {
     if (!auth) {
       setLocationChange(formState?.changes?.location ?? orderState?.options?.address?.location ?? '')
@@ -255,8 +263,8 @@ const AddressFormUI = (props) => {
         formMethods.setValue(
           field.name,
           formState?.changes[field.name] ||
-            (orderState?.options?.address && orderState?.options?.address[field.name]) ||
-            ''
+          (orderState?.options?.address && orderState?.options?.address[field.name]) ||
+          ''
         )
       )
       return
@@ -406,7 +414,7 @@ const AddressFormUI = (props) => {
                   />
                 </AddressWrap>
 
-                {locationChange && (addressState?.address?.location || formState?.changes?.location) && (
+                {!isHideMap && locationChange && (addressState?.address?.location || formState?.changes?.location) && (
                   <WrapperMap>
                     <GoogleMapsMap
                       apiKey={googleMapsApiKey}
@@ -422,51 +430,56 @@ const AddressFormUI = (props) => {
               </React.Fragment>
             ) : (
               <React.Fragment key={field.name}>
-                {field.name !== 'address_notes' ? (
-                  <Input
-                    className={field.name}
-                    placeholder={t(field.name.toUpperCase(), field.code)}
-                    value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
-                    onChange={(e) => {
-                      formMethods.setValue(field.name, e.target.value)
-                      handleChangeInput({ target: { name: field.name, value: e.target.value } })
-                    }}
-                    autoComplete='new-field'
-                    maxLength={30}
-                  />
-                ) : (
-                  <TextArea
-                    rows={4}
-                    placeholder={t('ADDRESS_NOTES', 'Address Notes')}
-                    value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
-                    onChange={(e) => {
-                      formMethods.setValue('address_notes', e.target.value)
-                      handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
-                    }}
-                    autoComplete='new-field'
-                    maxLength={250}
-                  />
+                {(isRequiredField(field.name) || showFieldWithTheme(field.name)) && (
+                  <>
+                    {field.name !== 'address_notes' ? (
+                      <Input
+                        className={field.name}
+                        placeholder={t(field.name.toUpperCase(), field.code)}
+                        value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
+                        onChange={(e) => {
+                          formMethods.setValue(field.name, e.target.value)
+                          handleChangeInput({ target: { name: field.name, value: e.target.value } })
+                        }}
+                        autoComplete='new-field'
+                        maxLength={30}
+                      />
+                    ) : (
+                      <TextArea
+                        rows={3}
+                        placeholder={t('ADDRESS_NOTES', 'Address Notes')}
+                        value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
+                        onChange={(e) => {
+                          formMethods.setValue('address_notes', e.target.value)
+                          handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
+                        }}
+                        autoComplete='new-field'
+                        maxLength={250}
+                      />
+                    )}
+                  </>
                 )}
               </React.Fragment>
             )
           ))}
 
           {!formState.loading && formState.error && <p style={{ color: '#c10000' }}>{formState.error}</p>}
-
-          <AddressTagSection>
-            <Button className={addressTag === 'home' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('home')}>
-              <span><House /></span>
-            </Button>
-            <Button className={addressTag === 'office' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('office')}>
-              <span><Building /></span>
-            </Button>
-            <Button className={addressTag === 'favorite' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('favorite')}>
-              <span><Heart /></span>
-            </Button>
-            <Button className={addressTag === 'other' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('other')}>
-              <span><PlusLg /></span>
-            </Button>
-          </AddressTagSection>
+          {!isHideIcons && (
+            <AddressTagSection>
+              <Button className={addressTag === 'home' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('home')}>
+                <span><House /></span>
+              </Button>
+              <Button className={addressTag === 'office' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('office')}>
+                <span><Building /></span>
+              </Button>
+              <Button className={addressTag === 'favorite' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('favorite')}>
+                <span><Heart /></span>
+              </Button>
+              <Button className={addressTag === 'other' ? 'active' : ''} bgtransparent type='button' onClick={() => handleAddressTag('other')}>
+                <span><PlusLg /></span>
+              </Button>
+            </AddressTagSection>
+          )}
           {
             props.afterMidElements?.map((MidElement, i) => (
               <React.Fragment key={i}>

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

@@ -192,7 +192,7 @@ export const AddressTagSection = styled.div`
 
 export const WrapperMap = styled.div`
   width: 100%;
-  height: 250px;
+  height: 170px;
   > div {
     position: relative !important;
     width: 100% !important;

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

@@ -3,6 +3,7 @@ import Skeleton from 'react-loading-skeleton'
 import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
 import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
 import MdClose from '@meronex/icons/md/MdClose'
+import { useWindowSize } from '../../../../../hooks/useWindowSize'
 
 import {
   Heart,
@@ -18,7 +19,8 @@ import {
   useLanguage,
   useOrder,
   useCustomer,
-  useEvent
+  useEvent,
+  useOrderingTheme
 } from 'ordering-components-external'
 
 import {
@@ -33,7 +35,8 @@ import {
   List,
   AddressFormContainer,
   TitleFormContainer,
-  CloseIcon
+  CloseIcon,
+  TitleAddress
 } from './styles'
 
 import { NotFoundSource } from '../NotFoundSource'
@@ -61,7 +64,6 @@ const AddressListUI = (props) => {
     isCustomerMode,
     isFromCheckout,
     setIsAddressFormOpen,
-    isHeader,
     isProfile
   } = props
 
@@ -72,8 +74,10 @@ const AddressListUI = (props) => {
   const [addressOpen, setAddressOpen] = useState(false)
   const [confirm, setConfirm] = useState({ open: false, content: null, handleOnAccept: null })
   const theme = useTheme()
+  const [orderingTheme] = useOrderingTheme()
   const [{ user }] = useCustomer()
-
+  const { width } = useWindowSize()
+  const isCompletedLayout = width < 769 || isProfile
   const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
     (address, i, self) =>
       i === self.findIndex(obj => (
@@ -83,6 +87,11 @@ const AddressListUI = (props) => {
         address.internal_number === obj.internal_number
       )))) || []
 
+  const showAddress = !orderingTheme?.theme?.profile?.components?.address_list?.components?.address?.hidden
+  const showIcons = !orderingTheme?.theme?.profile?.components?.address_list?.components?.icons?.hidden
+  const showZipcode = !orderingTheme?.theme?.profile?.components?.address_list?.components?.zipcode?.hidden
+  const showInternalNumber = !orderingTheme?.theme?.profile?.components?.address_list?.components?.internal_number?.hidden
+
   const openAddress = (address) => {
     setCurAddress(address)
     setAddressOpen(true)
@@ -214,16 +223,23 @@ const AddressListUI = (props) => {
       <>
         {
           (!isPopover || !addressOpen) && (
-            <Button
-              className='add'
-              outline
-              color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'primary'}
-              onClick={() => openAddress({})}
-              disabled={orderState?.loading || actionStatus.loading}
-              style={!isCustomerMode ? { flex: 1, width: 'fit-content' } : {}}
-            >
-              {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add New Address')}
-            </Button>
+            <>
+              {!isCompletedLayout && (
+                <TitleAddress>
+                  {t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                </TitleAddress>
+              )}
+              <Button
+                className='add'
+                outline
+                color={isEnableContinueButton && addressList?.addresses?.length > 0 ? 'secondary' : 'primary'}
+                onClick={() => openAddress({})}
+                disabled={orderState?.loading || actionStatus.loading}
+                style={isCompletedLayout ? { flex: 1, width: 'fit-content' } : {}}
+              >
+                {(orderState?.loading || actionStatus.loading) ? t('LOADING', 'Loading') : t('ADD_NEW_ADDRESS', 'Add New Address')}
+              </Button>
+            </>
           )
         }
         {
@@ -256,16 +272,24 @@ const AddressListUI = (props) => {
                     <span className='radio'>
                       {checkAddress(address) ? <RiRadioButtonFill className='address-checked' /> : <IosRadioButtonOff />}
                     </span>
-                    <span className={checkAddress(address) ? 'selected-tag tag' : 'tag'}>
-                      {address?.tag === 'home' && <House />}
-                      {address?.tag === 'office' && <Building />}
-                      {address?.tag === 'favorite' && <Heart />}
-                      {address?.tag === 'other' && <PlusLg />}
-                    </span>
-                    <div className='address'>
-                      <span>{address.address}</span>
-                      <span>{address.internal_number} {address.zipcode}</span>
-                    </div>
+                    {showIcons && (
+                      <span className={checkAddress(address) ? 'selected-tag tag' : 'tag'}>
+                        {address?.tag === 'home' && <House />}
+                        {address?.tag === 'office' && <Building />}
+                        {address?.tag === 'favorite' && <Heart />}
+                        {address?.tag === 'other' && <PlusLg />}
+                      </span>
+                    )}
+                    {(showAddress || showInternalNumber || showZipcode) && (
+                      <div className='address'>
+                        {
+                          showAddress && (
+                            <span>{address.address}</span>
+                          )
+                        }
+                        <span>{showInternalNumber && address.internal_number} {showZipcode && address.zipcode}</span>
+                      </div>
+                    )}
                   </div>
                   <AddressItemActions className='form'>
                     <a className={actionStatus.loading ? 'disabled' : ''} onClick={() => openAddress(address)}>
@@ -330,8 +354,8 @@ const AddressListUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading} isCustomerMode={isCustomerMode}>
-        {isCustomerMode ? (
+      <AddressListContainer id='address_control' isLoading={actionStatus?.loading || orderState?.loading} isCompletedLayout={isCompletedLayout}>
+        {!isCompletedLayout ? (
           <AddressListCallcenterLayout>
             <AddressListContent />
           </AddressListCallcenterLayout>
@@ -339,10 +363,10 @@ const AddressListUI = (props) => {
           <AddressListContent />
         )}
         {
-          !isPopover && (
+          !isPopover && addressOpen && (
             <Modal
               title={t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-              open={!isPopover && addressOpen && !isCustomerMode}
+              open={!isPopover && addressOpen && isCompletedLayout}
               onClose={() => handleCloseAddressForm()}
             >
               <AddressForm

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

@@ -5,7 +5,7 @@ export const AddressListContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0px 10px;
-  ${({ isCustomerMode }) => isCustomerMode && css`
+  ${({ isProfile }) => !isProfile && css`
     width: 100%;
   `}
 
@@ -15,7 +15,7 @@ export const AddressListContainer = styled.div`
 
   button.add {
     height: 50px;
-    ${({ isCustomerMode }) => isCustomerMode && css`
+    ${({ isProfile }) => !isProfile && css`
       min-width: 100px;
     `}
   }
@@ -258,3 +258,10 @@ export const TitleFormContainer = styled.div`
     font-size: 24px;
   }
 `
+
+export const TitleAddress = styled.h1`
+  text-align: center;
+  margin: auto;
+  font-size: 24px;
+  margin-bottom: 20px;
+`

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

@@ -4,7 +4,8 @@ import {
   BusinessInformation as BusinessInformationController,
   GoogleMapsMap,
   useLanguage,
-  useConfig
+  useConfig,
+  useOrderingTheme
 } from 'ordering-components-external'
 import { Modal } from '../Modal'
 import {
@@ -50,6 +51,10 @@ export const BusinessInformationUI = (props) => {
   ]
   const [modalImage, setModalImage] = useState(false)
   const [image, setImage] = useState('')
+  const [orderingTheme] = useOrderingTheme()
+
+  const showLocation = !orderingTheme?.theme?.business_view?.components?.information?.components?.location?.hidden
+  const showSchedule = !orderingTheme?.theme?.business_view?.components?.information?.components?.schedule?.hidden
 
   const scheduleFormatted = ({ hour, minute }) => {
     const checkTime = (val) => val < 10 ? `0${val}` : val
@@ -87,46 +92,56 @@ export const BusinessInformationUI = (props) => {
               <Description>{business.description}</Description>
             </>
           )}
-          {businessLocation.location && (
-            <>
-              <SectionTitle>{t('BUSINESS_LOCATION', 'Business location')}</SectionTitle>
-              {businessLocation.location && (
-                <Map>
-                  <GoogleMapsMap
-                    apiKey={configs?.google_maps_api_key?.value}
-                    location={businessLocation.location}
-                    mapControls={businessLocation.googleMapsControls || business.googleMapsControls}
-                  />
-                </Map>
-              )}
-            </>
-          )}
           {
-            business?.address && <BusinessAddress>{business?.address}</BusinessAddress>
+            showLocation && (
+              <>
+                {businessLocation.location && (
+                  <>
+                    <SectionTitle>{t('BUSINESS_LOCATION', 'Business location')}</SectionTitle>
+                    {businessLocation.location && (
+                      <Map>
+                        <GoogleMapsMap
+                          apiKey={configs?.google_maps_api_key?.value}
+                          location={businessLocation.location}
+                          mapControls={businessLocation.googleMapsControls || business.googleMapsControls}
+                        />
+                      </Map>
+                    )}
+                  </>
+                )}
+                {
+                  business?.address && <BusinessAddress>{business?.address}</BusinessAddress>
+                }
+                <Divider />
+              </>
+            )
           }
-          <Divider />
           {businessSchedule?.length > 0 && (
             <>
-              <SectionTitle>{t('OPENING_TIME', 'Opening time')}</SectionTitle>
-              <ScheduleSection>
-                <ScheduleContainer>
-                  {businessSchedule.map((schedule, i) => (
-                    <ScheduleBlock key={i}>
-                      <h4>{daysOfWeek[i]}</h4>
-                      {schedule.enabled ? (
-                        <div>
-                          <p>{scheduleFormatted(schedule.lapses[0].open)}</p>
-                          <div>-</div>
-                          <p>{scheduleFormatted(schedule.lapses[0].close)}</p>
-                        </div>
-                      ) : (
-                        <p className='close'>{t('CLOSED', 'Closed')}</p>
-                      )}
-                    </ScheduleBlock>
-                  ))}
-                </ScheduleContainer>
-              </ScheduleSection>
-              <Divider />
+              {showSchedule && (
+                <>
+                  <SectionTitle>{t('OPENING_TIME', 'Opening time')}</SectionTitle>
+                  <ScheduleSection>
+                    <ScheduleContainer>
+                      {businessSchedule.map((schedule, i) => (
+                        <ScheduleBlock key={i}>
+                          <h4>{daysOfWeek[i]}</h4>
+                          {schedule.enabled ? (
+                            <div>
+                              <p>{scheduleFormatted(schedule.lapses[0].open)}</p>
+                              <div>-</div>
+                              <p>{scheduleFormatted(schedule.lapses[0].close)}</p>
+                            </div>
+                          ) : (
+                            <p className='close'>{t('CLOSED', 'Closed')}</p>
+                          )}
+                        </ScheduleBlock>
+                      ))}
+                    </ScheduleContainer>
+                  </ScheduleSection>
+                  <Divider />
+                </>
+              )}
               <DeliveryInfo>
                 <div>
                   <h5>{t('DELIVERY_TIME', 'Delivery Time')}: {convertHoursToMinutes(business?.delivery_time)}</h5>

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import TiArrowSortedUp from '@meronex/icons/ti/TiArrowSortedUp'
-import { useOrder, useLanguage, useEvent, useUtils, useConfig } from 'ordering-components-external'
+import { useOrder, useLanguage, useEvent, useUtils, useConfig, useOrderingTheme } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import FiClock from '@meronex/icons/fi/FiClock'
 import {
@@ -11,9 +11,13 @@ import {
   BusinessInfo,
   BusinessTotal,
   BusinessActions,
-  PriceContainer
+  PriceContainer,
+  WrapperBusinessLogo,
+  BusinessLogo,
+  TimeContainer
 } from './styles'
 import { Button } from '../../styles/Buttons'
+import { convertHoursToMinutes } from '../../../../../utils'
 
 export const BusinessItemAccordion = (props) => {
   const {
@@ -45,6 +49,7 @@ export const BusinessItemAccordion = (props) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
   const theme = useTheme()
+  const [orderingTheme] = useOrderingTheme()
   const [setActive, setActiveState] = useState('')
   const [setHeight, setHeightState] = useState('0px')
   const [setRotate, setRotateState] = useState('accordion__icon')
@@ -56,6 +61,10 @@ export const BusinessItemAccordion = (props) => {
   const businessDelete = useRef(null)
   const changeStore = useRef(null)
 
+  const viewString = isStore ? 'business_view' : 'header'
+  const showBusinessLogo = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.logo?.hidden
+  const showBusinessTime = !orderingTheme?.theme?.[viewString]?.components?.cart?.components?.business?.components?.time?.hidden
+
   const toggleAccordion = (e) => {
     const isActionsClick = businessStore.current?.contains(e?.target) || businessDelete.current?.contains(e?.target) || changeStore.current?.contains(e?.target)
     if (isClosed || !isProducts || isActionsClick) return
@@ -81,6 +90,10 @@ export const BusinessItemAccordion = (props) => {
     setCartProductUpdated(cart?.uuid)
   }
 
+  const handleOpenBusinessMenu = (business) => {
+    setPreorderBusiness && setPreorderBusiness(business)
+  }
+
   useEffect(() => {
     if (cartProductUpdated === uuid || (currentCartUuid === uuid && (!cartProductUpdated || cartProductUpdated === uuid))) {
       activeAccordion(true)
@@ -132,13 +145,33 @@ export const BusinessItemAccordion = (props) => {
               onClick={(e) => toggleAccordion(e)}
             >
               <BusinessInfo>
+                {!showBusinessLogo && (
+                  <WrapperBusinessLogo>
+                    <BusinessLogo bgimage={business?.logo || theme.images?.dummies?.businessLogo} />
+                  </WrapperBusinessLogo>
+                )}
                 <ContentInfo className='info' isStore={isStore}>
                   <h2>{business?.name}</h2>
+                  {!showBusinessTime && (
+                    <TimeContainer>
+                      {orderState?.options?.type === 1 ? (
+                        <span>
+                          <FiClock />
+                          {convertHoursToMinutes(business?.delivery_time)}
+                        </span>
+                      ) : (
+                        <span>
+                          <FiClock />
+                          {convertHoursToMinutes(business?.pickup_time)}
+                        </span>
+                      )}
+                    </TimeContainer>
+                  )}
                   <div>
                     {handleStoreRedirect && !isCartOnProductsList && !isStore && (
                       <span
                         ref={businessStore}
-                        onClick={() => handleStoreRedirect(business?.slug)}
+                        onClick={() => isClosed ? handleOpenBusinessMenu(business) : handleStoreRedirect(business?.slug)}
                         className='go-store'
                       >
                         {t('GO_TO_STORE', 'Go to store')}

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const AccordionSection = styled.div`
@@ -96,6 +97,10 @@ export const ContentInfo = styled.div`
     margin-left: 0;
   `}
 
+  span {
+    cursor: pointer;
+  }
+
   h2, span {
     margin: 0px;
   }
@@ -216,3 +221,44 @@ export const PriceContainer = styled.div`
     height: 50px;
   }
 `
+
+const BusinessLogoStyled = styled.div`
+  display: flex;
+  width: 75px;
+  height: 75px;
+  min-height: 75px;
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: contain;
+  object-fit: contain;
+  background-position: center;
+  border-radius: 10px;
+`
+
+export const BusinessLogo = (props) => {
+  return (
+    <BusinessLogoStyled
+      {...props}
+      style={{ backgroundImage: `url(${props.bgimage})` }}
+    >
+      {props.children}
+    </BusinessLogoStyled>
+  )
+}
+
+export const WrapperBusinessLogo = styled.div`
+  max-width: 75px;
+  max-height: 75px;
+  height: 75px;
+  width: 75px;
+  margin-right: 10px;
+`
+
+export const TimeContainer = styled.div`
+  svg{
+    position: relative;
+    top: 1px;
+    margin-right: 5px;
+  }
+`