ordering-ui-external 1.0.0 → 1.1.1

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;
+  }
+`

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   BusinessListingSearchContainer,
   FiltersContainer,
@@ -51,6 +51,8 @@ import { NotFoundSource } from '../NotFoundSource'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import BisDownArrow from '@meronex/icons/bi/BisDownArrow'
 import BisUpArrow from '@meronex/icons/bi/BisUpArrow'
+import { Modal } from '../Modal'
+import { ProductForm } from '../ProductForm'
 
 export const BusinessListingSearchUI = (props) => {
   const {
@@ -72,6 +74,7 @@ export const BusinessListingSearchUI = (props) => {
   const [orderState] = useOrder()
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [curProduct, setCurProduct] = useState({ business: null, product: null })
   const [{ parsePrice, optimizeImage, parseDistance }] = useUtils()
   const [{ auth }] = useSession()
   const { width } = useWindowSize()
@@ -107,6 +110,19 @@ export const BusinessListingSearchUI = (props) => {
     else handleChangeFilters('price_level', value)
   }
 
+  const onProductClick = (product, business) => {
+    setCurProduct({ business: business, product: product })
+  }
+
+  const handleRedirectToCart = (product, code) => {
+    setCurProduct({ business: null, product: null })
+    onBusinessClick(curProduct?.business)
+  }
+
+  const closeModalProductForm = () => {
+    setCurProduct({ business: null, product: null })
+  }
+
   const MaxSectionItem = ({ title, options, filter }) => {
     const parseValue = (option) => {
       return filter === 'max_distance'
@@ -144,6 +160,7 @@ export const BusinessListingSearchUI = (props) => {
       <SearchBar
         lazyLoad
         isCustomLayout
+        forceFocus
         placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('PLEASE_TYPE_AT_LEAST_3_CHARACTERS', 'Please type at least 3 characters')}`}
         onSearch={(val) => handleChangeTermValue(val)}
         search={termValue}
@@ -354,6 +371,7 @@ export const BusinessListingSearchUI = (props) => {
                           isSoldOut={(product.inventoried && !product.quantity)}
                           product={product}
                           businessId={business?.id}
+                          onProductClick={(product) => onProductClick(product, business)}
                           handleUpdateProducts={(productId, changes) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                         />
                       )))}
@@ -396,6 +414,26 @@ export const BusinessListingSearchUI = (props) => {
           </ProductsList>
         </FiltersResultContainer>
       </FiltersContainer>
+      <Modal
+        width={props?.useKioskApp ? '80%' : '760px'}
+        open={!!curProduct?.product}
+        closeOnBackdrop
+        onClose={() => closeModalProductForm()}
+        padding='0'
+        isProductForm
+        disableOverflowX
+      >
+        {(!!curProduct?.product) && (
+          <ProductForm
+            businessSlug={curProduct?.business?.slug}
+            useKioskApp={props?.useKioskApp}
+            businessId={curProduct?.business?.id}
+            categoryId={curProduct?.product?.category_id}
+            productId={curProduct?.product?.id}
+            onSave={handleRedirectToCart}
+          />
+        )}
+      </Modal>
     </BusinessListingSearchContainer>
   )
 }

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

@@ -145,7 +145,7 @@ const BusinessPreorderUI = (props) => {
     const selectedMenu = menu ? (menu?.use_business_schedule ? business : menu) : business
     const _times = getTimes(dateSelected, selectedMenu)
     setTimeList(_times)
-  }, [dateSelected, menu])
+  }, [dateSelected, menu, business])
 
   useEffect(() => {
     if (type === 'business_hours') setMenu(null)
@@ -254,12 +254,16 @@ const BusinessPreorderUI = (props) => {
                 ))}
               </>
             ) : (
-              <ClosedBusinessMsg>{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}</ClosedBusinessMsg>
+              <ClosedBusinessMsg>
+                {!isProfessional
+                  ? t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')
+                  : t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
+              </ClosedBusinessMsg>
             )}
           </TimeListWrapper>
         </OrderTimeWrapper>
       )}
-      {!isPreOrderSetting && (
+      {!isPreOrderSetting && !isProfessional && (
         <ClosedBusinessMsg>{t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}</ClosedBusinessMsg>
       )}
       {showButton && (
@@ -275,7 +279,7 @@ const BusinessPreorderUI = (props) => {
         </ButtonWrapper>
       )}
       {orderState?.loading && (
-        <Layer>
+        <Layer nobg={!!isProfessional}>
           {(window.location.pathname !== '/search' || orderState?.options?.address?.location) && (
             <SpinnerLoader
               style={{

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

@@ -256,6 +256,7 @@ export const TypeContent = styled.div`
 export const Layer = styled.div`
   ${({ nobg }) => !nobg && css`
     background-color: rgba(255, 255, 255, 0.7);
+    z-index: 1;
   `}
   position: absolute;
   top: 0;