ordering-ui-external 14.1.49 → 14.1.52

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

@@ -16,6 +16,7 @@ export const InnerHeader = styled.div`
   justify-content: space-between;
   margin: 15px 0;
   align-items: center;
+
   #left-side {
     width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '25%'};
     justify-content: flex-start;
@@ -27,6 +28,7 @@ export const InnerHeader = styled.div`
   #center-side {
     width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? 'calc(60% - 140px)' : 'calc(60% - 30px)'};
   }
+
   @media (min-width: 768px) {
     #left-side {
       width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : 'initial'};
@@ -35,16 +37,19 @@ export const InnerHeader = styled.div`
       width: calc(100% - 60px);
     }
   }
+
   @media (min-width: 1024px) {
     #center-side {
       width: calc(100% - 140px);
     }
   }
+
   @media (min-width: 1200px) {
     #center-side {
       width: calc(70% - 200px);
     }
   }
+
   @media (min-width: 1500px) {
     #center-side {
       width: calc(60% - 260px);
@@ -54,30 +59,35 @@ export const InnerHeader = styled.div`
 
 export const LogoHeader = styled.div`
   cursor: pointer;
+
   img {
     width: ${props => props.isChew ? '70px' : props.imgW ?? '35px'};
     height: ${props => props.isChew ? '20px' : props.imgH ?? '45px'};
     margin: 0;
     vertical-align: middle;
     margin-left: 10px;
+
     ${props => props.theme?.rtl && css`
       margin-right: 10px;
       margin-left: 0;
     `}
+
     @media (min-width: 769px) {
       ${({ theme }) =>
-      ['center', 'right']?.includes(theme?.header?.components?.logo?.components?.layout?.position) && css`
+    ['center', 'right']?.includes(theme?.header?.components?.logo?.components?.layout?.position) && css`
         margin-right: 30px;
       `};
       width: ${props => props.imgW ?? '150px'};
       height: ${props => props.isChew && '35px'};
     }
   }
+
   ${props => !props.disabledResponsive && css`
     img:nth-child(1) {
       display: none;
     }
   `}
+
   @media (min-width: 769px) {
     img:nth-child(1) {
       display: block;
@@ -97,6 +107,7 @@ export const LeftHeader = styled.div`
 export const RightHeader = styled.div`
   align-self: center;
   display: flex;
+
   #select-input {
     div {
       color: ${props => props.theme.colors.darkTextColor};
@@ -108,21 +119,27 @@ export const Menu = styled.div`
   display: flex;
   align-items: center;
   margin-right: 10px;
+
   #select-input {
     border-radius: 7.6px;
+
     #list {
       border-radius: 7.6px;
     }
+
     ${({ isCustomerMode }) => !isCustomerMode && css`
       margin: 0px 5px;
       height: 40px;
+
       svg {
         font-size: 16px;
       }
+
       > div:first-child {
         height: 100%;
         padding-left: 10px;
         padding-right: 10px;
+
         @media (min-width: 993px) {
           padding-left: 13px;
           padding-right: 13px;
@@ -130,6 +147,7 @@ export const Menu = styled.div`
       }
     `}
   }
+
   &.left-header {
     background: #F8F9FA;
     border: none;
@@ -143,29 +161,35 @@ export const Menu = styled.div`
     justify-content: center;
     position: relative;
     height: 44px;
+
     @media (min-width: 850px) {
       border: 1px solid #DEE2E6;
       justify-content: space-between;
     }
+
     @media (min-width: 1024px) {
       margin: 0 20px;
       padding: 0 20px;
       margin-left: 45px;
     }
+
     @media (min-width: 1200px) {
       padding: 0 30px;
       margin-left: 50px;
     }
+
     @media (min-width: 1500px) {
       padding: 0 30px;
       margin: 0 75px;
     }
   }
+
   > span {
     #select-input {
       background: transparent !important;
     }
   }
+
   .moment-popover {
     border-left: 1px solid #DEE2E6;
     border-right: 1px solid #DEE2E6;
@@ -173,19 +197,22 @@ export const Menu = styled.div`
     justify-content: center;
     width: 200px;
     display: none;
+
     @media (min-width: 1175px) {
       width: 250px;
     }
-    
+
     @media (min-width: 1400px) {
       width: 400px;
     }
+
     > div:first-child {
       width: 100%;
       display: flex;
       justify-content: center;
     }
   }
+
   .address-popover {
     flex-grow: 1;
     display: none;
@@ -193,6 +220,7 @@ export const Menu = styled.div`
       width: 100%;
     }
   }
+
   .order-type {
     padding: 0 5px;
 
@@ -200,6 +228,8 @@ export const Menu = styled.div`
       padding: 0 20px;
     }
   }
+
+
   @media (min-width: 850px) {
     .moment-popover,
     .address-popover {
@@ -218,11 +248,13 @@ export const MenuLink = styled.a`
   padding: 10px;
   color: #333;
   cursor: pointer;
+
   ${({ highlight }) => highlight && css`
     background-color: ${props => props.theme.colors.primary};
     color: ${props => props.theme.colors.primaryContrast};
     border-radius: 7.6px;
     padding: 11px 15px;
+
     &:hover {
       background: ${props => darken(0.07, props.theme.colors.primary)};
       color: #FFF;
@@ -238,6 +270,7 @@ export const SubMenu = styled(InnerHeader)`
   box-sizing: border-box;
   margin: 0px;
   position: relative;
+
   @media (min-width: 850px) {
     display: none;
   }
@@ -252,6 +285,7 @@ export const CustomerInfo = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+
     span {
       display: flex;
       align-items: center;
@@ -287,6 +321,7 @@ export const AddressMenu = styled.div`
   display: flex;
   align-items: center;
   position: relative;
+
   span {
     width: 85%;
     p {
@@ -297,11 +332,13 @@ export const AddressMenu = styled.div`
       overflow: hidden;
     }
   }
+
   ${({ isCustomerMode }) => isCustomerMode ? css`
     flex: 0.8;
   ` : css`
     width: 50%;
   `}
+
   svg {
     color: ${props => props.theme.colors?.lightGray};
     font-size: 16px;
@@ -325,21 +362,26 @@ export const AddressMenu = styled.div`
 
 export const MomentMenu = styled.div`
   border-left: 1px solid #DEE2E6;
-  border-right: 1px solid #DEE2E6;
+  ${({ isFranchiseSlugOne }) => !isFranchiseSlugOne && css`
+      border-right: 1px solid #DEE2E6;
+  `}
   height: 100%;
   justify-content: center;
   width: 175px;
   display: none;
-  
+
   @media (min-width: 850px) {
     display: flex;
   }
+
   @media (min-width: 1175px) {
     width: 250px;
   }
+
   @media (min-width: 1400px) {
     width: 400px;
   }
+
   > div {
     cursor: pointer;
     font-size: 14px;
@@ -366,11 +408,13 @@ export const FarAwayMessage = styled.div`
   padding: 6px 15px;
   box-sizing: border-box;
   margin: 10px 0px 0px 0px !important;
+
   left: 5px;
   ${props => props.theme?.rtl && css`
     right: 5px;
     left: initial;
   `}
+
   svg {
     font-size: 20px;
     color: ${props => props.theme.colors.warning500};
@@ -385,6 +429,7 @@ export const FarAwayMessage = styled.div`
     line-height: 18px;
     color: ${props => props.theme.colors.headingColor};
   }
+
   @media (min-width: 400px) {
     padding: 8px 20px;
     font-size: 14px;
@@ -425,9 +470,11 @@ export const LanguageSelectorWrapper = styled(InputGroup)`
     border-color: #F8F9FA;
     background-color: #F8F9FA !important;
     height: 44px;
+
     > div:first-child {
       height: 44px;
     }
+
     #list {
       border-radius: 7.6px;
       background: #F8F9FA !important;

package/src/themes/five/src/components/HighestRated/franchises/OloHighestRated/index.js

@@ -0,0 +1,114 @@
+import React, { useEffect } from 'react'
+import { useLanguage, useOrder, BusinessList as BusinessListController } from 'ordering-components-external'
+import { BusinessController } from '../../../BusinessController/franchises/OloBusinessController'
+
+import {
+  HighestRatedContainer,
+  ErrorMessage,
+  BusinessList,
+  Title,
+  Description,
+  BusinessListWrapper
+} from './styles'
+
+const HighestRatedUI = (props) => {
+  const {
+    businessesList,
+    handleBusinessClick,
+    isCustomLayout,
+    setHasHighRatedBusiness,
+    isCustomerMode,
+    favoriteIds,
+    setFavoriteIds
+  } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+
+  const isBusinessWithReviews = businessesList?.businesses?.every((business) => business?.reviews?.total === 0)
+
+  useEffect(() => {
+    if (!businessesList.loading) {
+      setHasHighRatedBusiness(!isBusinessWithReviews)
+    }
+  }, [businessesList?.businesses])
+
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...(favoriteIds ?? [])]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds && setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
+  return (
+    <>
+      {props.beforeElements?.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>))}
+      {props.beforeComponents?.map((BeforeComponent, i) => (
+        <BeforeComponent key={i} {...props} />))}
+      <HighestRatedContainer>
+        <Title>{t('HIGHEST_RATED', 'Highest rated')}</Title>
+        <Description>{t('TOP_RATINGS_AND_GREAT_SERVICE', 'Top ratings and great service')}</Description>
+        <BusinessListWrapper>
+          <BusinessList>
+            {
+              !businessesList?.loading && businessesList?.businesses?.map((business) => (
+                business?.reviews?.total > 0 && (
+                  <BusinessController
+                    key={business.id}
+                    className='card'
+                    business={business}
+                    isBusinessOpen={business.open}
+                    handleCustomClick={handleBusinessClick}
+                    orderType={orderState?.options?.type}
+                    isCustomLayout={isCustomLayout}
+                    isCustomerMode={isCustomerMode}
+                    favoriteIds={favoriteIds}
+                    setFavoriteIds={setFavoriteIds}
+                  />
+                )
+              ))
+            }
+            {businessesList.loading && (
+              [...Array(8).keys()].map(i => (
+                <BusinessController
+                  key={i}
+                  className='card'
+                  business={{}}
+                  isSkeleton
+                  orderType={orderState?.options?.type}
+                />
+              ))
+            )}
+            {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>
+        </BusinessListWrapper>
+      </HighestRatedContainer>
+      {props.afterComponents?.map((AfterComponent, i) => (
+        <AfterComponent key={i} {...props} />))}
+      {props.afterElements?.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>))}
+    </>
+  )
+}
+
+export const HighestRated = (props) => {
+  const highestRatedProps = {
+    ...props,
+    UIComponent: HighestRatedUI,
+    initialOrderByValue: 'rating'
+  }
+  return <BusinessListController {...highestRatedProps} />
+}

package/src/themes/five/src/components/HighestRated/franchises/OloHighestRated/styles.js

@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+export const HighestRatedContainer = styled.div`
+  padding-bottom: 30px;
+`
+
+export const ErrorMessage = styled.span`
+  padding: 20px;
+  width: 100%;
+  background-color: #CCCCCC;
+  margin: 0px 15px;
+  color: #D81313;
+  font-weight: bold;
+`
+
+export const BusinessList = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  #highestRated {
+    > div {
+      width: calc(100vw - 40px);
+      min-width: calc(100vw - 40px);
+
+      @media (min-width: 681px) {
+        width: calc(50vw - 40px);
+        min-width: calc(50vw - 40px);
+      }
+      @media (min-width: 993px) {
+        width: calc(33vw - 40px);
+        min-width: calc(33vw - 40px);
+      }
+      @media (min-width: 1200px) {
+        width: calc(25vw - 40px);
+        min-width: calc(25vw - 40px);
+      }
+    }
+  }
+`
+
+export const Title = styled.h2`
+  font-weight: 600;
+  font-size: 24px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin: 42px 20px 5px 20px;
+`
+
+export const Description = styled.p`
+  font-size: 14px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin: 0 20px 15px 20px;
+`
+
+export const BusinessListWrapper = styled.div`
+  overflow: scroll hidden;
+  width: 100%;
+`

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

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react'
+import { useTheme } from 'styled-components'
+import { useSession, useOrder, useLanguage, useConfig, useEvent } from 'ordering-components-external'
+import {
+  HeroContainer,
+  ContentWrapper,
+  Title,
+  Slogan,
+  HeroContent,
+  HomeImage,
+  OrderTypeListItemContainer,
+  OrderTypeTitle,
+  IconTypeButton
+} from './styles'
+
+export const OloHomeHero = (props) => {
+  const [{ auth }] = useSession()
+  const [orderState, { changeType }] = useOrder()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [modals, setModals] = useState({ listOpen: false, formOpen: false })
+  const [events] = useEvent()
+  const theme = useTheme()
+  const configTypes = configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
+  const [newAddressModalOpened, setNewAddressModalOpened] = useState(false)
+
+  const bgImg = theme?.my_products?.components?.images?.components?.homepage_background?.components?.image
+  const orderTypeTitle = (type) => theme?.order_types?.components?.[type]?.components?.title
+  const orderTypeIcon = (typeValue) => typeValue === 1
+    ? theme?.images?.general?.deliveryIco
+    : typeValue === 2
+      ? theme?.images?.general?.pickupIco
+      : typeValue === 3
+        ? theme?.images?.general?.eatinIco
+        : typeValue === 4
+          ? theme?.images?.general?.curbsideIco
+          : typeValue === 5
+            ? theme?.images?.general?.drivethruIco
+            : theme?.images?.general?.deliveryIco
+
+  const handleClickOrderType = (value) => {
+    if (!orderState?.loading) {
+      changeType(value)
+      events.emit('go_to_page', { page: 'search' })
+    }
+  }
+
+  useEffect(() => {
+    return () => setModals({ listOpen: false, formOpen: false })
+  }, [])
+
+  useEffect(() => {
+    if (newAddressModalOpened) return
+    if (auth && !orderState.loading && !orderState?.options?.address?.location) {
+      setModals({ ...modals, listOpen: true })
+      setNewAddressModalOpened(true)
+    }
+  }, [auth, orderState, newAddressModalOpened])
+
+  const orderTypes = [
+    {
+      value: 1,
+      text: t('DELIVERY', 'Delivery'),
+      description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description'),
+      image: theme.images?.deliveryTypes?.delivery
+    },
+    {
+      value: 2,
+      text: t('PICKUP', 'Pickup'),
+      description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description'),
+      image: theme.images?.deliveryTypes?.pickUp
+    },
+    {
+      value: 3,
+      text: t('EAT_IN', 'Eat in'),
+      description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description'),
+      image: theme.images?.deliveryTypes?.eatIn
+    },
+    {
+      value: 4,
+      text: t('CURBSIDE', 'Curbside'),
+      description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description'),
+      image: theme.images?.deliveryTypes?.curbside
+    },
+    {
+      value: 5,
+      text: t('DRIVE_THRU', 'Drive thru'),
+      description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description'),
+      image: theme.images?.deliveryTypes?.driveThru
+    }
+  ]
+
+  return (
+    <HeroContainer>
+      <ContentWrapper>
+        <HeroContent>
+          <Title>{t('TITLE_HOME', theme?.defaultLanguages?.TITLE_HOME || 'All We need is Food.')}</Title>
+          <Slogan>{t('SUBTITLE_HOME', theme?.defaultLanguages?.SUBTITLE_HOME || 'Let\'s start to order food now')}</Slogan>
+          {
+            orderTypes && (configTypes ? orderTypes.filter(type => configTypes?.includes(type.value)) : orderTypes).map((item, i) => (
+              <OrderTypeListItemContainer
+                key={i}
+                onClick={() => handleClickOrderType(item.value)}
+              >
+                <IconTypeButton>
+                  <img
+                    src={orderTypeIcon(item.value)}
+                    width={24}
+                    height={24}
+                  />
+                </IconTypeButton>
+                <OrderTypeTitle>{orderTypeTitle(item?.text?.replace(' ', '_')?.toLowerCase()) || item.text}</OrderTypeTitle>
+              </OrderTypeListItemContainer>
+            ))
+          }
+        </HeroContent>
+        <HomeImage bgimage={(bgImg || theme.images?.general?.homeHero)} />
+      </ContentWrapper>
+    </HeroContainer>
+  )
+}