ordering-ui-external 1.4.5 → 1.5.0

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

@@ -19,19 +19,24 @@ import {
   ReviewTime,
   ReviewItemHeader,
   ReviewItemContent,
-  SearchContainer
+  SearchContainer,
+  ReviewStars
 } from './styles'
 
 import BsFillStarFill from '@meronex/icons/bs/BsFillStarFill'
+import { StarFill } from 'react-bootstrap-icons'
 
 export const BusinessReviewsUI = (props) => {
-  const { stars, reviewsList, handleClickOption } = props
+  const { stars, reviewsList, handleClickOption, onChangeReview } = props
   const [, t] = useLanguage()
   const [theme] = useTheme()
   const [orderingTheme] = useOrderingTheme()
   const handleOnChange = (evt) => {
-    if (evt.target.value === '') handleClickOption('all')
-    else handleClickOption(evt.target.value)
+    if (evt.target.value) onChangeReview(evt.target.value)
+    else onChangeReview('')
+  }
+  const handleClickRaiting = (raiting) => {
+    if (raiting) handleClickOption(raiting)
   }
 
   const showRanking = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.ranking?.hidden
@@ -40,7 +45,7 @@ export const BusinessReviewsUI = (props) => {
   const showSearch = !orderingTheme?.theme?.business_view?.components?.reviews?.components?.search?.hidden
   const hideElement = !(!showReviewDate && !showCustomerComments)
 
-  const reviewPoints = [t('TERRIBLE', 'Terrible'), t('BAD', 'Bad'), t('OKAY', 'Okay'), t('GOOD', 'Good'), t('GREAT', 'Great')]
+  const reviewPoints = [1, 2, 3, 4, 5]
 
   return (
     <>
@@ -71,9 +76,7 @@ export const BusinessReviewsUI = (props) => {
                   ? (
                     <SearchContainer>
                       <input
-                        type='number'
-                        min='1'
-                        max='5'
+                        type= 'text'
                         onChange={handleOnChange}
                         placeholder={t('SEARCH', 'Search')}
                         style={{ backgroundImage: `url(${theme?.images?.general?.searchIcon})` }}
@@ -85,7 +88,7 @@ export const BusinessReviewsUI = (props) => {
             )}
             {showRanking && (
               <ReviewsProgressWrapper>
-                <p>{t('REVIEW_ORDER', 'Review order')}</p>
+                <p>{t('CUSTOMER_REVIEWS', 'Customers reviews')}</p>
                 <ReviewsProgressContent>
                   <ReviewsProgressBar style={{ width: `${(stars / 5) * 100}%` }} />
                   {reviewPoints.map((reviewPoint, i) => {
@@ -93,12 +96,16 @@ export const BusinessReviewsUI = (props) => {
                     return (
                       <ReviewsMarkPoint
                         key={i}
+                        onClick={() => handleClickRaiting(i + 1)}
                         style={{
                           left: theme.rtl !== isLastReviewPoint ? 'initial' : `${25 * (isLastReviewPoint ? 0 : i)}%`,
                           right: theme.rtl !== isLastReviewPoint ? `${25 * (isLastReviewPoint ? 0 : i)}%` : 'initial'
                         }}
                       >
-                        {reviewPoint}
+                        <ReviewStars>
+                          {reviewPoint}
+                          <StarFill className='start' />
+                        </ReviewStars>
                       </ReviewsMarkPoint>
                     )
                   })}

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

@@ -121,6 +121,7 @@ export const ReviewsMarkPoint = styled.span`
   top: 15px;
   font-size: 12px;
   color: #CED4DA;
+  cursor: pointer
 `
 
 export const ReviewTime = styled.p`
@@ -159,3 +160,9 @@ export const SearchContainer = styled.div`
     `}
   }
 `
+
+export const ReviewStars = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 5px;
+`

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

@@ -4,6 +4,7 @@ import FiMap from '@meronex/icons/fi/FiMap'
 import FiFilter from '@meronex/icons/fi/FiFilter'
 import IosRadioButtonOff from '@meronex/icons/ios/IosRadioButtonOff'
 import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
+import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
 import {
   useOrder,
   useSession,
@@ -26,9 +27,14 @@ import {
   BusinessCityList,
   CityItem,
   BusinessLogo,
-  BusinessLogosContainer
+  BusinessLogosContainer,
+  BusinessBanner,
+  BusinessFeatures,
+  AddressMenu,
+  FeatureItems,
+  ItemInline
 } from './styles'
-
+import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
 import { NotFoundSource } from '../../../NotFoundSource'
 
@@ -48,6 +54,8 @@ import { BusinessPreorder } from '../../../BusinessPreorder'
 import { OrderProgress } from '../../../OrderProgress'
 
 import Skeleton from 'react-loading-skeleton'
+import { MomentPopover } from '../../../../../../pwa/src/components/MomentPopover'
+import { OrderTypeSelectorHeader } from '../../../../../../../components/OrderTypeSelectorHeader'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -75,10 +83,12 @@ const BusinessesListingUI = (props) => {
   const [orderState, { changeCityFilter }] = useOrder()
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
+  const windowSize = useWindowSize()
   const theme = useTheme()
   const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const [activeMap, setActiveMap] = useState(false)
+  const [openPopover, setOpenPopover] = useState({})
   const [mapErrors, setMapErrors] = useState('')
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
@@ -112,6 +122,20 @@ const BusinessesListingUI = (props) => {
     }
   }
 
+  const handleTogglePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: !openPopover[type]
+    })
+  }
+
+  const handleClosePopover = (type) => {
+    setOpenPopover({
+      ...openPopover,
+      [type]: false
+    })
+  }
+
   const handleFindBusinesses = () => {
     if (!orderState?.options?.address?.location) {
       setAlertState({ open: true, content: [t('SELECT_AN_ADDRESS_TO_SEARCH', 'Select or add an address to search')] })
@@ -248,18 +272,45 @@ const BusinessesListingUI = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <BusinessContainer>
-        <BusinessHeroImg
-          bgimage={theme.images?.general?.businessHero}
-          height={theme?.business_listing_view?.components?.business_hero?.style?.height}
-        />
-        <OrderProgressWrapper>
-          <OrderProgress
-            franchiseId={props.franchiseId}
-            userCustomerId={userCustomer?.id}
-            asDashboard={isCustomerMode}
-            isCustomerMode={isCustomerMode}
+        <BusinessBanner>
+          {windowSize.width < 576 && (
+            <BusinessFeatures>
+              <AddressMenu
+                onClick={() => handleClickAddress()}
+              >
+                <FaMapMarkerAlt />
+                <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
+              </AddressMenu>
+              <FeatureItems>
+                <ItemInline>
+                  <OrderTypeSelectorHeader />
+                </ItemInline>
+                <ItemInline>
+                  <MomentPopover
+                    open={openPopover.moment}
+                    onClick={() => handleTogglePopover('moment')}
+                    onClose={() => handleClosePopover('moment')}
+                    isBanner
+                  />
+                </ItemInline>
+              </FeatureItems>
+            </BusinessFeatures>
+          )}
+          <BusinessHeroImg
+            bgimage={theme.images?.general?.businessHero}
+            height={theme?.business_listing_view?.components?.business_hero?.style?.height}
           />
-        </OrderProgressWrapper>
+        </BusinessBanner>
+        {!!Object.values(orderState?.carts)?.length && (
+          <OrderProgressWrapper>
+            <OrderProgress
+              franchiseId={props.franchiseId}
+              userCustomerId={userCustomer?.id}
+              asDashboard={isCustomerMode}
+              isCustomerMode={isCustomerMode}
+            />
+          </OrderProgressWrapper>
+        )}
         {isCustomerMode && (
           <OrdersSection titleContent={t('PREVIOUS_ORDERS', 'Previous orders')} />
         )}
@@ -413,11 +464,6 @@ const BusinessesListingUI = (props) => {
                 />
               ))
             )}
-            {businessesList.error && businessesList.error.length > 0 && businessesList.businesses.length === 0 && (
-              businessesList.error.map((e, i) => (
-                <ErrorMessage key={i}>{t('ERROR', 'ERROR')}: [{e?.message || e}]</ErrorMessage>
-              ))
-            )}
           </BusinessList>
         </>
         <Modal
@@ -513,6 +559,5 @@ export const OriginalBusinessesListing = (props) => {
     UIComponent: BusinessesListingUI,
     paginationSettings: { initialPage: 1, pageSize: 25, controlType: 'infinity' }
   }
-
   return <BusinessListController {...businessListingProps} />
 }

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

@@ -7,6 +7,104 @@ export const BusinessContainer = styled.div`
   width: 100%;
 `
 
+export const BusinessBanner = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 30px;
+  position: relative;
+  @media (max-width: 481px) {
+    margin-bottom: 0px;
+  }
+`
+
+export const BusinessFeatures = styled.div`
+  position: absolute;
+  top: 10%;
+  width: 100%;
+  padding: 0 15px;
+  box-sizing: border-box;
+`
+
+export const AddressMenu = styled.div`
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  color: #344050;
+  font-weight: 600;
+  border-radius: 50px;
+  padding: 13px 19px;
+  margin-bottom: 10px;
+  span {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  svg {
+    margin-right: 5px;
+    color: #B1BCCC;
+    ${props => props.theme?.rtl && css`
+      margin-left: 5px;
+      margin-right: 0;
+    `}
+  }
+`
+
+export const FeatureItems = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`
+
+export const ItemInline = styled.div`
+  > span #select-input {
+    background-color: #F8F9FA !important;
+    border: none;
+    border-radius: 7.6px;
+    svg {
+      font-size: 14px;
+    }
+    #list {
+      background-color: #fff;
+      border: none;
+      border-radius: 7.6px;
+      left: 0px;
+      right: initial;
+      ${props => props.theme.rtl && css`
+        left: initial;
+        right: 0px;
+      `}
+    }
+    > div:first-child {
+      font-size: 11px;
+    }
+  }
+  .moment-popover {
+    > div:first-child {
+      font-size: 11px;
+      padding: 4px 7px;
+      svg {
+        font-size: 14px;
+      }
+    }
+  }
+`
+
+export const BusinessSearch = styled.div`
+    display: flex;
+    background-color: #f8f9fa;
+    align-items: center;
+    padding: 7px;
+    border-radius: 7px;
+    font-size: 11px;
+    svg {
+      font-size: 15px;
+    }
+`
+
 export const BusinessList = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -87,7 +185,7 @@ export const BusinessesTitle = styled.h1`
 export const BusinessHeroImgStyled = styled.div`
   margin-bottom: 30px;
   width: 100%;
-  height: 230px;
+  height: calc(65vh - 98px);
   ${({ bgimage }) => bgimage && css`
     background-repeat: no-repeat, repeat;
     background-size: cover;

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

@@ -80,7 +80,7 @@ export const DriverTipMessage = styled.p`
 export const WrapperTips = styled.div`
   display: flex;
   width: 100%;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
 

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

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { useApi } from 'ordering-components-external'
 
+import { Container } from './styles'
+
 export const Footer = () => {
   const [footerState, setfooterState] = useState({ body: null, loading: false, error: null })
   const [ordering] = useApi()
@@ -35,15 +37,17 @@ export const Footer = () => {
   }, [])
 
   return (
-    <>
+    <Container>
       {
         footerState.body && (
-          <div style={{ wordBreak: 'break-all', padding: '0px 10px'}} dangerouslySetInnerHTML={{
-            __html: footerState.body
-          }}
+          <div
+            style={{ wordBreak: 'break-all', padding: '0px 10px' }}
+            dangerouslySetInnerHTML={{
+              __html: footerState.body
+            }}
           />
         )
       }
-    </>
+    </Container>
   )
 }

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

@@ -1,14 +1,10 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  box-sizing: border-box;
-  width: 100%;
-  border-top: 1px solid #d9d9d9;
-  padding: 15px;
-  background: #F8F9FA;
+  display: none;
 
   @media (min-width: 768px) {
-    padding: 30px 40px 30px;
+    display: block;
   }
 `
 

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

@@ -212,7 +212,7 @@ export const Header = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <HeaderContainer>
         <InnerHeader>
-          <LeftHeader>
+          <LeftHeader id='left-side'>
             <SidebarMenu
               auth={auth}
               isHideSignup={isHideSignup}
@@ -227,7 +227,7 @@ export const Header = (props) => {
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && !props.isCustomLayout && (
-            <Menu className='left-header' isCustomerMode={isCustomerMode}>
+            <Menu id='center-side' className='left-header' isCustomerMode={isCustomerMode}>
               {windowSize.width > 820 && isFarAway && (
                 <FarAwayMessage>
                   <TiWarningOutline />
@@ -240,7 +240,8 @@ export const Header = (props) => {
                     isCustomerMode={isCustomerMode}
                     onClick={(e) => handleClickUserCustomer(e)}
                   >
-                    <GeoAlt /> {orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                    <GeoAlt />
+                    <span>{orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}</span>
                   </AddressMenu>
                   <Divider />
                 </>
@@ -268,7 +269,12 @@ export const Header = (props) => {
                     <AddressMenu
                       onClick={() => openModal('address')}
                     >
-                      <GeoAlt /> {orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                      <GeoAlt />
+                      <span>
+                        <p>
+                          {orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                        </p>
+                      </span>
                     </AddressMenu>
                   )}
                   {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
@@ -301,7 +307,7 @@ export const Header = (props) => {
             </Menu>
           )}
           {onlineStatus && (
-            <RightHeader>
+            <RightHeader id='right-side'>
               <Menu isCustomerMode={isCustomerMode}>
                 {
                   !auth && windowSize.width > 920 && (
@@ -374,7 +380,7 @@ export const Header = (props) => {
               <AddressMenu
                 onClick={() => openModal('address')}
               >
-                <GeoAlt /> {orderState.options?.address?.address?.split(',')?.[0] || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
+                <GeoAlt /> {orderState.options?.address?.address || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
               </AddressMenu>
               {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
                 <HeaderOption
@@ -396,7 +402,7 @@ export const Header = (props) => {
               )}
               <HeaderOption
                 variant='address'
-                addressState={orderState?.options?.address?.address?.split(',')?.[0]}
+                addressState={orderState?.options?.address?.address}
                 onClick={(variant) => openModal(variant)}
               />
               {!isCustomerMode && (isPreOrderSetting || configState?.configs?.preorder_status_enabled?.value === undefined) && (
@@ -413,9 +419,10 @@ export const Header = (props) => {
         )}
         {modalIsOpen && (
           <Modal
+            title={(!auth && modalSelected === 'address') && t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
             open={modalIsOpen}
             onClose={() => setModalIsOpen(false)}
-            width={modalSelected === 'address' ? '70%' : '700px'}
+            width={modalSelected === 'address' ? orderState?.options?.user_id ? '70%' : '50%' : '700px'} 
           >
             {modalSelected === 'cart' && (
               <CartContent
@@ -504,6 +511,7 @@ export const Header = (props) => {
             onClose={() => closeAuthModal()}
             width='50%'
             authModal
+            closeOnBackdrop={false}
           >
             {modalPageToShow === 'login' && (
               <LoginForm

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

@@ -12,9 +12,38 @@ export const InnerHeader = styled.div`
   width: 100%;
   color: #FFF;
   justify-content: space-between;
-  width: 98%;
-  margin: 15px auto;
+  margin: 15px 0;
   align-items: center;
+
+  #left-side {
+    width: 20%;
+    justify-content: flex-start;
+  }
+  #right-side {
+    width: 20%;
+    justify-content: flex-end;
+  }
+  #center-side {
+    width: calc(60% - 30px);
+  }
+
+  @media (min-width: 1024px) {
+    #center-side {
+      width: calc(60% - 140px);
+    }
+  }
+
+  @media (min-width: 1200px) {
+    #center-side {
+      width: calc(60% - 200px);
+    }
+  }
+
+  @media (min-width: 1500px) {
+    #center-side {
+      width: calc(60% - 260px);
+    }
+  }
 `
 
 export const LogoHeader = styled.div`
@@ -75,7 +104,7 @@ export const Menu = styled.div`
 
   #select-input {
     border-radius: 7.6px;
-    
+
     #list {
       border-radius: 7.6px;
     }
@@ -85,7 +114,7 @@ export const Menu = styled.div`
       height: 40px;
       border-color: #CCC;
       background-color: #CCC !important;
-      
+
       svg {
         font-size: 16px;
       }
@@ -126,7 +155,7 @@ export const Menu = styled.div`
       padding: 0 20px;
       margin: 0 70px;
     }
-    
+
     @media (min-width: 1200px) {
       padding: 0 30px;
       margin: 0 100px;
@@ -275,10 +304,21 @@ export const AddressMenu = styled.div`
   align-items: center;
   position: relative;
 
+  span {
+    width: 85%;
+    p {
+      margin: 0;
+      padding: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
-  flex: 0.8;
+    flex: 0.8;
   ` : css`
-    width: 100%;
+    width: 50%;
   `}
 
   svg {
@@ -297,7 +337,7 @@ export const AddressMenu = styled.div`
   }
   @media (min-width: 820px) {
     ${({ isCustomerMode }) => !isCustomerMode && css`
-      width: 100%;
+      width: 50%;
     `}
   }
 `
@@ -339,6 +379,7 @@ export const FarAwayMessage = styled.div`
   position: absolute;
   display: flex;
   align-items: center;
+  z-index: 2000;
   top: 100%;
   background: ${props => props.theme.colors.warning100};
   border: 1px solid ${props => props.theme.colors.warning500};

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

@@ -1,14 +1,9 @@
 import React from 'react'
-import { useConfig } from 'ordering-components-external'
 import { OriginalHomeHero } from './layouts/OriginalHomeHero'
 import { RedHomeHero } from './layouts/RedHomeHero'
 import { StarbucksHomeHero } from './layouts/StarbucksHomeHero'
 
 export const HomeHero = (props) => {
-  const [{ configs }] = useConfig()
-
-  // *****************************
-  // HomeLayout = configs
   const HomeLayoutConfig = {
     homepage_settings: {
       layout: 'original', // 'original', 'starbucks', 'red'
@@ -17,7 +12,6 @@ export const HomeHero = (props) => {
   }
   const layout = HomeLayoutConfig?.homepage_settings?.layout !== undefined
     ? HomeLayoutConfig?.homepage_settings?.layout : 'original'
-  // *****************************
 
   const homeLayoutProps = {
     ...props,