ordering-ui-external 1.7.2 → 1.8.0

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

@@ -171,15 +171,6 @@ export const SavedPlaces = styled.div`
   margin-top: 40px;
   margin-bottom: 20px;
 
-
-  h1{
-    font-size: 24px;
-    text-align: left;
-    ${props => props.theme?.rtl && css`
-    text-align: right;
-    `}
-  }
-
   > div{
     display: flex;
     flex-direction: column-reverse;
@@ -192,10 +183,11 @@ export const SavedPlaces = styled.div`
   }
 
   @media (min-width: 768px){
-    width: 90%;
+    width: 75%;
     margin-top: 40px;
     h1 {
-      text-align: center;
+      font-size: 24px;
+      text-align: left;
     }
     ul{
       width: 100%;

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { BusinessController as BusinessSingleCard, useLanguage, useUtils } from 'ordering-components-external'
+import React, { useState, useRef } from 'react'
+import { BusinessController as BusinessSingleCard, useLanguage, useSession, useUtils } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import { Alert } from '../../../../../components/Confirm'
@@ -19,7 +19,9 @@ import {
   CallCenterInformation,
   CallCenterInformationBullet,
   NameWrapper,
-  BusinessInfomation
+  BusinessInfomation,
+  Address,
+  SelectStoreContainer
 } from './styles'
 import GrClock from '@meronex/icons/gr/GrClock'
 import GrDeliver from '@meronex/icons/gr/GrDeliver'
@@ -27,6 +29,9 @@ import GrLocation from '@meronex/icons/gr/GrLocation'
 import GrStar from '@meronex/icons/gr/GrStar'
 import BiCar from '@meronex/icons/bi/BiCar'
 import BiBasket from '@meronex/icons/bi/BiBasket'
+import { Heart as DisLike, HeartFill as Like } from 'react-bootstrap-icons'
+import dayjs from 'dayjs'
+import { Button } from '../../../../five'
 // import BusinessInformation from '../BusinessInformation'
 
 const BusinessControllerUI = (props) => {
@@ -38,12 +43,21 @@ const BusinessControllerUI = (props) => {
     orderType,
     isCustomLayout,
     isShowCallcenterInformation,
-    handleShowBusinessInfo
+    handleShowBusinessInfo,
+    handleFavoriteBusiness
   } = props
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ parsePrice, parseDistance, optimizeImage }] = useUtils()
+  const [{ auth }] = useSession()
+  const favoriteRef = useRef(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const layout = theme?.business_listing_view?.components?.layout?.type || 'starbucks'
+  const hideCategories = theme?.business_listing_view?.components?.business?.components?.categories?.hidden
+  const hideAddress = theme?.business_listing_view?.components?.business?.components?.address?.hidden ?? true
+  const hideBusinessFavorite = theme?.business_listing_view?.components?.business?.components?.favorite?.hidden
+
   const types = ['food', 'alcohol', 'groceries', 'laundry']
   const businessType = () => {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General')
@@ -56,6 +70,36 @@ const BusinessControllerUI = (props) => {
   const handleShowAlert = () => {
     setAlertState({ open: true, content: [t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The Business is closed at the moment')] })
   }
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+    }
+  }
+
+  const scheduleFormatted = ({ hour, minute }) => {
+    const checkTime = (val) => val < 10 ? `0${val}` : val
+    return `${checkTime(hour)}:${checkTime(minute)}`
+  }
+
+  const getScheduleOpen = (business) => {
+    const currentDate = dayjs().tz(business?.timezone)
+    let lapse = null
+    if (business?.today?.enabled) {
+      lapse = business?.today?.lapses?.find(lapse => {
+        const from = currentDate.hour(lapse.open.hour).minute(lapse.open.minute)
+        const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+        return currentDate.unix() >= from.unix() && currentDate.unix() <= to.unix()
+      })
+    }
+    return lapse ? `${scheduleFormatted(lapse.open)} - ${scheduleFormatted(lapse.close)}` : ''
+  }
+
+  const handleClickBusiness = (e, business) => {
+    if (favoriteRef?.current?.contains(e.target)) return
+    handleClick(business)
+  }
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -65,7 +109,7 @@ const BusinessControllerUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <ContainerCard isSkeleton={isSkeleton}>
-        <WrapperBusinessCard isSkeleton={isSkeleton} onClick={() => !isSkeleton && handleClick && (!business?.open && isCustomLayout ? handleShowAlert() : handleClick(business))}>
+        <WrapperBusinessCard isSkeleton={isSkeleton} onClick={(e) => !isSkeleton && handleClick && (!business?.open && isCustomLayout ? handleShowAlert() : handleClickBusiness(e, business))}>
           <BusinessContent>
             <WrapperBusinessLogo isSkeleton={isSkeleton}>
               {!isSkeleton && (business?.logo || theme.images?.dummies?.businessLogo) ? (
@@ -82,8 +126,38 @@ const BusinessControllerUI = (props) => {
                   ) : (
                     <Skeleton width={100} />
                   )}
+                  {layout === 'mapview' && (
+                    <BusinessInfomation>
+                      {business?.reviews?.total > 0 ? (
+                        <div className='reviews'>
+                          <GrStar />
+                          <span>{business?.reviews?.total}</span>
+                        </div>
+                      ) : (
+                        business?.reviews?.total !== 0 && <Skeleton width={50} />
+                      )}
+                      {!hideBusinessFavorite && (
+                        <div className='favorite' ref={favoriteRef} onClick={handleChangeFavorite}>
+                          {!isSkeleton ? (
+                            <>
+                              {(business?.favorite) ? <Like /> : <DisLike />}
+                            </>
+                          ) : (
+                            <Skeleton width={16} height={16} />
+                          )}
+                        </div>
+                      )}
+                      {
+                        (business && handleShowBusinessInfo) ? (
+                          <BsExclamationCircle onClick={() => handleShowBusinessInfo(business)} />
+                        ) : (
+                          <Skeleton width={20} />
+                        )
+                      }
+                    </BusinessInfomation>
+                  )}
                 </NameWrapper>
-                {!isShowCallcenterInformation && (
+                {!isShowCallcenterInformation && !hideCategories && (
                   <Categories>
                     {
                       Object.keys(business).length > 0 ? (
@@ -94,73 +168,100 @@ const BusinessControllerUI = (props) => {
                     }
                   </Categories>
                 )}
-                <Medadata isCustomerMode={isShowCallcenterInformation}>
-                  {Object.keys(business).length > 0 ? (
-                    <p className='bullet'>
-                      <GrClock />
-                      {convertHoursToMinutes(orderState?.options?.type === 1 ? business?.delivery_time : business?.pickup_time) || <Skeleton width={100} />}
-                    </p>
-                  ) : (
-                    <Skeleton width={70} />
-                  )}
-                  {business?.distance >= 0 ? (
-                    <p className='bullet'>
-                      <GrLocation />
-                      {parseDistance(business?.distance)}
-                    </p>
-                  ) : (
-                    <Skeleton width={70} />
-                  )}
-                  {orderType === 1 && (
+                {!isShowCallcenterInformation && !hideAddress && (
+                  <Address>
+                    {
+                      Object.keys(business).length > 0 ? (
+                        business?.address
+                      ) : (
+                        <Skeleton width={100} />
+                      )
+                    }
+                  </Address>
+                )}
+                {layout !== 'mapview' && (
+                  <Medadata isCustomerMode={isShowCallcenterInformation}>
+                    {Object.keys(business).length > 0 ? (
+                      <p className='bullet'>
+                        <GrClock />
+                        {convertHoursToMinutes(orderState?.options?.type === 1 ? business?.delivery_time : business?.pickup_time) || <Skeleton width={100} />}
+                      </p>
+                    ) : (
+                      <Skeleton width={70} />
+                    )}
+                    {business?.distance >= 0 ? (
+                      <p className='bullet'>
+                        <GrLocation />
+                        {parseDistance(business?.distance)}
+                      </p>
+                    ) : (
+                      <Skeleton width={70} />
+                    )}
+                    {orderType === 1 && (
+                      <>
+                        {business?.delivery_price >= 0 ? (
+                          <p>
+                            <GrDeliver />
+                            {business && parsePrice(business?.delivery_price)}
+                          </p>
+                        ) : (
+                          <Skeleton width={70} />
+                        )}
+                      </>
+                    )}
+                    {isShowCallcenterInformation && (
+                      <CallCenterInformation>
+                        <CallCenterInformationBullet bgcolor='green'>
+                          <BiCar />
+                          {business?.available_drivers?.length}
+                        </CallCenterInformationBullet>
+                        <CallCenterInformationBullet bgcolor='red'>
+                          <BiCar />
+                          {business?.busy_drivers?.length}
+                        </CallCenterInformationBullet>
+                        <CallCenterInformationBullet bgcolor='rgb(252,225,5)'>
+                          <BiBasket />
+                          {business?.active_orders?.length}
+                        </CallCenterInformationBullet>
+                      </CallCenterInformation>
+                    )}
                     <>
-                      {business?.delivery_price >= 0 ? (
-                        <p>
-                          <GrDeliver />
-                          {business && parsePrice(business?.delivery_price)}
-                        </p>
+                      {business?.reviews?.total > 0 ? (
+                        <div className='reviews'>
+                          <GrStar />
+                          <span>{business?.reviews?.total}</span>
+                        </div>
                       ) : (
-                        <Skeleton width={70} />
+                        business?.reviews?.total !== 0 && <Skeleton width={50} />
                       )}
                     </>
-                  )}
-                  {isShowCallcenterInformation && (
-                    <CallCenterInformation>
-                      <CallCenterInformationBullet bgcolor='green'>
-                        <BiCar />
-                        {business?.available_drivers?.length}
-                      </CallCenterInformationBullet>
-                      <CallCenterInformationBullet bgcolor='red'>
-                        <BiCar />
-                        {business?.busy_drivers?.length}
-                      </CallCenterInformationBullet>
-                      <CallCenterInformationBullet bgcolor='rgb(252,225,5)'>
-                        <BiBasket />
-                        {business?.active_orders?.length}
-                      </CallCenterInformationBullet>
-                    </CallCenterInformation>
-                  )}
-                  {business?.reviews?.total > 0 ? (
-                    <div className='reviews'>
-                      <GrStar />
-                      <span>{business?.reviews?.total}</span>
-                    </div>
+                  </Medadata>
+                )}
+                <Medadata>
+                  {!isSkeleton > 0 ? (
+                    <>
+                      <div className='schedule'>
+                        {`${t('SCHEDULE', 'Schedule')}: ${getScheduleOpen(business)}`}
+                      </div>
+                      <SelectStoreContainer>
+                        <Button
+                          outline
+                        >
+                          {t('SELECT_BUSINESS', 'Select business')}
+                        </Button>
+                      </SelectStoreContainer>
+                    </>
                   ) : (
-                    business?.reviews?.total !== 0 && <Skeleton width={50} />
+                    <>
+                      <Skeleton width={70} />
+                      <Skeleton width={120} height={20} />
+                    </>
                   )}
                 </Medadata>
               </BusinessInfoItem>
             </BusinessInfo>
           </BusinessContent>
         </WrapperBusinessCard>
-        <BusinessInfomation>
-          {
-            (business && handleShowBusinessInfo) ? (
-              <BsExclamationCircle onClick={() => handleShowBusinessInfo(business)} />
-            ) : (
-              <Skeleton width={20} />
-            )
-          }
-        </BusinessInfomation>
       </ContainerCard>
       <Alert
         title={t('BUSINESS_CLOSED', 'Business Closed')}

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

@@ -2,10 +2,8 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 export const ContainerCard = styled.div` 
-  margin: 12px 24px;
   width: 100%;
   position: relative;
-
 `
 
 export const WrapperBusinessCard = styled.div`
@@ -65,7 +63,10 @@ export const BusinessTags = styled.div`
   top: 0;
   margin: 15px;
   width: calc(100% - 35px);
-
+      
+  ${({ theme }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+    width: 100%;
+  `}
   span.crown {
     background-color: rgba(0, 0, 0, 0.5);
     font-size: 20px;
@@ -97,14 +98,14 @@ export const BusinessTags = styled.div`
     ` : css`
         margin-right: 0px;
     `
-    }
+  }
     }
   }
 `
 
 export const BusinessContent = styled.div`
   display: flex;
-  margin-top: 15px;
+  margin: 12px 24px;
   max-height: 115px;
 `
 
@@ -113,8 +114,8 @@ export const WrapperBusinessLogo = styled.div`
   width: 65px;
   height: 65px;
   min-height: 65px;
-  max-width: 65px;
-
+  min-width: 65px;
+  min-height: 65px;
   ${({ isSkeleton }) => isSkeleton && css`
     width: auto;
     height: auto;
@@ -125,6 +126,8 @@ export const WrapperBusinessLogo = styled.div`
     max-height: 75px;
     height: 75px;
     width: 75px;
+    min-width: 75px;
+    min-height: 75px;
   }
 `
 
@@ -167,6 +170,8 @@ export const BusinessInfo = styled.div`
 
   @media (min-width: 481px){
     width: calc(100% - 75px);
+    ${({ theme }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+    `}
   }
 `
 
@@ -197,6 +202,9 @@ export const BusinessInfoItem = styled.div`
   div {
     display: flex;
     justify-content: space-between;
+    ${({ theme }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+      align-items: center;
+    `}
     p {
       text-transform: capitalize;
       display: flex;
@@ -223,6 +231,10 @@ export const BusinessInfoItem = styled.div`
   }
 
   @media (min-width: 481px){
+    ${({ theme }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+      min-width: 100%;
+      width: 100%;
+    `}
     padding: 0px 5px 0px 16px;
     font-size: 16px;
 
@@ -256,6 +268,10 @@ export const Medadata = styled.div`
   display: flex;
   font-weight: 300;
   font-size: 12px;
+  .schedule{
+    font-size: 12px;
+    color: #ADB5BD;
+  }
   ${({ isCustomerMode }) => isCustomerMode && css`
     > div {
       flex-direction: column;
@@ -302,18 +318,20 @@ export const NameWrapper = styled.div`
   justify-content: space-between;
 `
 export const BusinessInfomation = styled.div`
-  position: absolute;
-  top: 10px;
-  right: 0;
-  width: 30px;
-  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 2;
-
-  
+  .reviews {
+    margin-right: 10px;
+  }
+  .favorite {
+    margin-right: 10px;
+    svg {
+      color: #E63757
+    }
+  }
   ${props => props.theme?.rtl && css`
     right: unset;
     left: 0;
@@ -327,3 +345,24 @@ export const BusinessInfomation = styled.div`
     font-size: 21px;
   }
 `
+
+export const Address = styled.p`
+  width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  font-size: 14px;
+`
+
+export const SelectStoreContainer = styled.div`
+  button{ 
+    background: transparent;
+    color: ${({ theme }) => theme?.colors?.primary};
+    border-color: ${({ theme }) => theme?.colors?.primary};
+    height: 27px;
+    line-height: 0;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+`

package/src/themes/six/src/components/BusinessProductsListing/SearchProducts/index.js

@@ -19,6 +19,7 @@ export const SearchProducts = (props) => {
   const [, t] = useLanguage()
   const [orderingTheme] = useOrderingTheme()
   const showSort = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.sort?.hidden
+  const searchLayout = theme?.business_view?.components?.product_search?.components?.layout?.type
 
   return (
     <>
@@ -27,8 +28,9 @@ export const SearchProducts = (props) => {
         search={searchValue}
         placeholder={t('SEARCH_PRODUCTS', theme?.defaultLanguages?.SEARCH_PRODUCTS || 'Search Products')}
         lazyLoad={businessState?.business?.lazy_load_products_recommended}
+        disablePadding={props.disablePadding}
       />
-      {showSort && (
+      {showSort && searchLayout !== 'floating' && (
         <Select
           notAsync
           notReload

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

@@ -5,7 +5,7 @@ export const WrapperMap = styled.div`
   display: flex;  
   justify-content: center;
   box-sizing: border-box;
-  min-height: 30vh;
+  min-height: 70vh;
   height:100%;
   
   > div {

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

@@ -1,10 +1,11 @@
 import React, { useRef, useEffect } from 'react'
 import { Input } from '../../styles/Inputs'
-import { useTheme } from '../../../../../contexts/ThemeContext'
 import { useLanguage } from 'ordering-components-external'
+import AiOutlineSearch from '@meronex/icons/ai/AiOutlineSearch'
 import {
   BusinessSearch,
-  DeleteContent
+  DeleteContent,
+  SearchWrapper
 } from './styles'
 export const SearchBar = (props) => {
   const {
@@ -14,7 +15,7 @@ export const SearchBar = (props) => {
     lazyLoad,
     isCustomLayout
   } = props
-  const [theme] = useTheme()
+
   const [, t] = useLanguage()
   let timeout = null
   let previousSearch
@@ -24,10 +25,16 @@ export const SearchBar = (props) => {
     if (previousSearch !== e.target.value) {
       if (!lazyLoad) {
         onSearch(e.target.value)
+        if (el.current) {
+          el.current.value = e.target.value
+        }
       } else {
         clearTimeout(timeout)
         timeout = setTimeout(function () {
           onSearch(e.target.value)
+          if (el.current) {
+            el.current.value = e.target.value
+          }
         }, 750)
       }
     }
@@ -39,11 +46,13 @@ export const SearchBar = (props) => {
   useEffect(() => {
     el.current.onkeyup = onChangeSearch
   }, [])
+
   useEffect(() => {
     if (!search) {
       el.current.value = ''
     }
   }, [search])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -56,21 +65,31 @@ export const SearchBar = (props) => {
         className={!isCustomLayout && 'search-bar'}
         isCustomLayout={isCustomLayout}
         hasValue={el.current?.value}
+        disablePadding={props.disablePadding}
       >
         <Input
           ref={el}
           name='search'
           aria-label='search'
+          id='select-input'
           placeholder={placeholder}
           isCustomLayout={isCustomLayout}
           autoComplete='off'
           maxLength='500'
         />
-        <DeleteContent>
-          {el.current?.value
-            ? <span onClick={handleClear}>{t('CLEAR', 'Clear')}</span>
-            : <img src={theme?.images?.general?.searchIcon} />}
-        </DeleteContent>
+        {el.current?.value && (
+          <DeleteContent
+            isHome={props.isHome}
+            isClear
+          >
+            <span onClick={handleClear}>{t('CLEAR', 'Clear')}</span>
+          </DeleteContent>
+        )}
+        <SearchWrapper
+          isHome={props.isHome}
+        >
+          <AiOutlineSearch />
+        </SearchWrapper>
       </BusinessSearch>
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}

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

@@ -22,7 +22,16 @@ export const BusinessSearch = styled.div`
       padding-right: 60px;
     `}
 
-    ${({ isCustomLayout }) => !isCustomLayout && css`
+    ${({ theme, disablePadding }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+      border-bottom: none;
+        ${props => props.theme?.rtl ? css`
+          padding-right: 70px;
+        ` : css`
+          padding-left: 70px;
+        `}
+   `}
+
+    ${({ isCustomLayout, theme }) => !isCustomLayout && theme?.business_view?.components?.product_search?.components?.layout?.type !== 'floating' && css`
       justify-content: center;
       -webkit-transition: width 0.4s ease-in-out;
       transition: width 0.4s ease-in-out; 
@@ -30,12 +39,17 @@ export const BusinessSearch = styled.div`
 
     @media (min-width: 681px) {
       width: 100%;
-      ${({ isCustomLayout }) => !isCustomLayout && css`
+      ${({ isCustomLayout, theme }) => !isCustomLayout && theme?.business_view?.components?.product_search?.components?.layout?.type !== 'floating' && css`
         width: 200px;
         &:focus {
           width: 50%;
         }
       `}
+      ${({ theme, disablePadding }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+      ${disablePadding && css`
+        padding-left: 0;
+      `}
+    `}
     }
   }
 `
@@ -49,12 +63,26 @@ export const DeleteContent = styled.span`
   transform: translate(-30%, 0%);
   border-radius: 25%;
   max-height: 100%;
+  ${({ theme, isHome }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+    left: ${isHome ? '40px' : '30px'};
+  `}
+  ${({ isClear, isHome }) => isClear && css`
+    left: initial;
+    right: 20px;
+  `}
   ${props => props.theme?.rtl && css`
     transform: translate(30%, 0%);
   `}
   span{
     cursor: pointer;
   }
+  svg {
+    color: #ADB5BD;
+    width: 24px;
+    height: 24px;
+    position: relative;
+    bottom: 4px;
+  }
   img{
     width: 20px;
     transform: translate(-25%, 0%);
@@ -63,6 +91,9 @@ export const DeleteContent = styled.span`
     `}
   }
 `
+
+export const SearchWrapper = styled(DeleteContent)``
+
 export const SearchIcon = styled.div`
   background-image: url(${props => props.theme?.images?.general?.searchIcon});
   background-position: right 10px center;