ordering-ui-external 1.7.2 → 1.8.0

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

@@ -10,7 +10,8 @@ import {
   useSession,
   useLanguage,
   useConfig,
-  BusinessList as BusinessListController
+  BusinessList as BusinessListController,
+  useOrderingTheme
 } from 'ordering-components-external'
 
 import {
@@ -32,7 +33,9 @@ import {
   BusinessFeatures,
   AddressMenu,
   FeatureItems,
-  ItemInline
+  ItemInline,
+  BusinessLogosWrapper,
+  ButtonWrapper
 } from './styles'
 import { useWindowSize } from '../../../../../../../hooks/useWindowSize'
 import { Button } from '../../../../styles/Buttons'
@@ -52,10 +55,13 @@ import { BusinessesMap } from '../../../../../../../components/BusinessesMap'
 import { HighestRated } from '../../../HighestRated'
 import { BusinessPreorder } from '../../../BusinessPreorder'
 import { OrderProgress } from '../../../OrderProgress'
+import { PageBanner } from '../../../PageBanner'
 
 import Skeleton from 'react-loading-skeleton'
 import { MomentPopover } from '../../../../../../pwa/src/components/MomentPopover'
 import { OrderTypeSelectorHeader } from '../../../../../../../components/OrderTypeSelectorHeader'
+import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { AutoScroll } from '../../../AutoScroll'
 
 const PIXELS_TO_SCROLL = 300
 
@@ -85,12 +91,14 @@ const BusinessesListingUI = (props) => {
   const [{ auth }] = useSession()
   const [{ configs }] = useConfig()
   const windowSize = useWindowSize()
+  const [{ theme: orderingTheme }] = useOrderingTheme()
   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 [actualCity, setActualCity] = useState(orderState?.options?.city_id)
   const [isPreorder, setIsPreorder] = useState(false)
   const [preorderBusiness, setPreorderBusiness] = useState(null)
   const [hasHighRatedBusiness, setHasHighRatedBusiness] = useState(true)
@@ -100,10 +108,12 @@ const BusinessesListingUI = (props) => {
   const hideSearch = theme?.business_listing_view?.components?.search?.hidden
   const hideFilter = theme?.business_listing_view?.components?.filter?.hidden
   const hideSearchSection = hideCities && hideSearch && hideFilter
+  const isAllCategoriesHidden = theme?.business_listing_view?.components?.categories?.hidden
   const businessesIds = isCustomLayout &&
     businessesList.businesses &&
     businessesList.businesses?.map(business => business.id)
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
 
   const handleScroll = useCallback(() => {
     const innerHeightScrolltop = window.innerHeight + document.documentElement?.scrollTop + PIXELS_TO_SCROLL
@@ -247,23 +257,27 @@ const BusinessesListingUI = (props) => {
 
   if (logosLayout) {
     return (
-      <BusinessLogosContainer>
-        {businessesList?.loading ? (
-          <Skeleton count={12} height={75} width={75} />
-        ) : (
-          <>
-            {businessesList.businesses
-              ?.filter(business => business?.slug !== actualSlug && business?.open)
-              ?.map(business => (
-                <BusinessLogo
-                  key={business?.id}
-                  bgimage={business?.logo || theme.images?.dummies?.businessLogo}
-                  onClick={() => onBusinessClick(business)}
-                />
-              ))}
-          </>
-        )}
-      </BusinessLogosContainer>
+      <BusinessLogosWrapper>
+        <BusinessLogosContainer>
+          <AutoScroll scrollId='businessLogos'>
+            {businessesList?.loading ? (
+              <Skeleton count={12} height={75} width={75} />
+            ) : (
+              <>
+                {businessesList.businesses
+                  ?.filter(business => business?.slug !== actualSlug && business?.open)
+                  ?.map(business => (
+                    <BusinessLogo
+                      key={business?.id}
+                      bgimage={business?.logo || theme.images?.dummies?.businessLogo}
+                      onClick={() => onBusinessClick(business)}
+                    />
+                  ))}
+              </>
+            )}
+          </AutoScroll>
+        </BusinessLogosContainer>
+      </BusinessLogosWrapper>
     )
   }
 
@@ -300,7 +314,7 @@ const BusinessesListingUI = (props) => {
               </FeatureItems>
             </BusinessFeatures>
           )}
-          {configs?.business_listing_hide_image?.value !== '1' && (
+          {(configs?.business_listing_hide_image?.value !== '1' && !isChew) && (
             <BusinessHeroImg
               bgimage={theme.images?.general?.businessHero}
               height={theme?.business_listing_view?.components?.business_hero?.style?.height}
@@ -308,7 +322,7 @@ const BusinessesListingUI = (props) => {
           )}
         </BusinessBanner>
         {!!Object.values(orderState?.carts)?.length && (
-          <OrderProgressWrapper>
+          <OrderProgressWrapper isChew={isChew}>
             <OrderProgress
               franchiseId={props.franchiseId}
               userCustomerId={userCustomer?.id}
@@ -317,6 +331,12 @@ const BusinessesListingUI = (props) => {
             />
           </OrderProgressWrapper>
         )}
+        {(configs?.business_listing_hide_image?.value !== '1' && isChew) && (
+          <BusinessHeroImg
+            bgimage={theme.images?.general?.businessHero}
+            height={theme?.business_listing_view?.components?.business_hero?.style?.height}
+          />
+        )}
         {isCustomerMode && (
           <OrdersSection titleContent={t('PREVIOUS_ORDERS', 'Previous orders')} />
         )}
@@ -368,7 +388,10 @@ const BusinessesListingUI = (props) => {
             <Divider />
           </HightestRatedWrapper>
         )}
-        {((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && (
+
+        <PageBanner position='web_business_listing' />
+
+        {(((configs && configs?.business_listing_categories !== false) || !isCustomLayout) && !isAllCategoriesHidden) && (
           <BusinessTypeFilter
             images={props.images}
             businessTypes={props.businessTypes}
@@ -516,7 +539,7 @@ const BusinessesListingUI = (props) => {
           />
         </Modal>
         <Modal
-          title={t('FILTER_BUSINESS_BY_CITY', 'Filter business by city')}
+          title={t('SELECT_A_STORE', 'Select a store')}
           open={modals.citiesOpen}
           width='70%'
           onClose={() => setModals({ ...modals, citiesOpen: false })}
@@ -528,13 +551,19 @@ const BusinessesListingUI = (props) => {
               ) : (
                 <>
                   {citiesState?.cities?.map(city => (
-                    <CityItem key={city?.id} onClick={() => handleChangeCity(city?.id)}>
+                    <CityItem key={city?.id} onClick={() => setActualCity(city?.id)}>
                       <span className='radio'>
-                        {city?.id === orderState?.options?.city_id ? <RiRadioButtonFill className='city-checked' /> : <IosRadioButtonOff />}
+                        {city?.id === actualCity ? <RiRadioButtonFill className='city-checked' /> : <IosRadioButtonOff />}
                       </span>
                       {city?.name}
                     </CityItem>
                   ))}
+                  <ButtonWrapper>
+                    <Button color='primary' disabled={actualCity === null} onClick={() => handleChangeCity(actualCity)}>
+                      {t('CONTINUE', 'Continue')}
+                    </Button>
+                    <BsArrowRight />
+                  </ButtonWrapper>
                 </>
               )
             }

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

@@ -222,7 +222,12 @@ export const Divider = styled.div`
 `
 
 export const OrderProgressWrapper = styled.div`
-  padding: 45px 20px;
+  padding: ${props => props.isChew ? '110px 20px 45px' : '45px 20px'};
+  margin: 0px;
+  @media (min-width: 768px) {
+      margin: 0 35px;
+      padding: 45px 20px;
+    }
 `
 
 export const SearchContainer = styled.div`
@@ -232,7 +237,22 @@ export const SearchContainer = styled.div`
 `
 
 export const BusinessCityList = styled.div`
-  
+
+`
+
+export const ButtonWrapper = styled.div`
+  position: relative;
+  svg {
+    position: absolute;
+    right: 10px;
+    top: 8px;
+    font-size: 25px;
+    color: #ffffff;
+  }
+  button {
+    width: 100%;
+    padding: 5px;
+  }
 `
 
 export const CityItem = styled.div`
@@ -240,7 +260,6 @@ export const CityItem = styled.div`
   justify-content: flex-start;
   align-items: center;
   padding: 15px 0px;
-  border-top: 1px solid #E9ECEF;
   cursor: pointer;
   span {
     margin-right: 15px;
@@ -250,21 +269,25 @@ export const CityItem = styled.div`
   }
 `
 
+export const BusinessLogosWrapper = styled.div`
+  overflow: scroll hidden;
+  width: 100%;
+`
+
+
 const BusinessLogoStyled = styled.div`
-  display: flex;
-  min-width: 75px;
-  min-height: 75px;
-  height: 75px;
-  width: 75px;
-  box-sizing: border-box;
-  position: relative;
-  background-repeat: no-repeat, repeat;
-  background-size: cover;
-  object-fit: cover;
-  background-position: center;
-  border-radius: 7.6px;
-  margin-right: 15px;
-  cursor: pointer;
+min-width: 100px;
+min-height: 100px;
+height: 100px;
+width: 100px;
+box-sizing: border-box;
+background-repeat: no-repeat, repeat;
+background-size: cover;
+object-fit: cover;
+background-position: center;
+border-radius: 7.6px;
+margin-right: 15px;
+cursor: pointer;
 `
 
 export const BusinessLogo = (props) => {
@@ -279,16 +302,7 @@ export const BusinessLogo = (props) => {
     </BusinessLogoStyled>
   )
 }
-
 export const BusinessLogosContainer = styled.div`
   display: flex;
-  overflow: auto;
   padding-bottom: 10px;
-  span {
-    margin-right: 15px;
-  }
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
 `

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react'
 import FiMap from '@meronex/icons/fi/FiMap'
+import FiFilter from '@meronex/icons/fi/FiFilter'
 import Skeleton from 'react-loading-skeleton'
 import {
   useOrder,
@@ -24,7 +25,7 @@ import { SearchBar } from '../../../../../../six/src/components/SearchBar'
 import { AddressList } from '../../../../../../six/src/components/AddressList'
 import { AddressForm } from '../../../../../../six/src/components/AddressForm'
 import { BusinessInformation } from '../../../../../../six/src/components/BusinessInformation'
-
+import EiLocation from '@meronex/icons/ei/EiLocation'
 import {
   BusinessContainer,
   BusinessList,
@@ -33,7 +34,8 @@ import {
   BusinessesTitle,
   ListWrapper,
   BusinessContent,
-  MapWrapper
+  MapWrapper,
+  AddressInput
 } from './styles'
 
 const PIXELS_TO_SCROLL = 500
@@ -168,7 +170,11 @@ const BusinessesListingUI = (props) => {
                         placeholder={t('SEARCH_BUSINESSES', 'Search Businesses')}
                         onSearch={handleChangeSearch}
                         handleCustomEnter={term => onRedirectPage({ page: configs?.advanced_business_search_enabled?.value === '1' && 'business_search', search: `?term=${term}` })}
+                        isHome
                       />
+                      {configs?.advanced_business_search_enabled?.value === '1' && (
+                        <FiFilter onClick={() => onRedirectPage({ page: 'business_search' })} />
+                      )}
                       {isCustomLayout && (
                         <FiMap onClick={toggleMap} />
                       )}
@@ -222,6 +228,14 @@ const BusinessesListingUI = (props) => {
                 </>
               </ListWrapper>
               <MapWrapper className='map-wrapper'>
+                {windowSize.width < 576 && orderState.options?.address?.address && (
+                  <AddressInput onClick={handleClickAddress}>
+                    <EiLocation />
+                    <p>
+                      {orderState.options?.address?.address}
+                    </p>
+                  </AddressInput>
+                )}
                 {windowSize.width < 850 && (
                   <WrapperSearch isCustomLayout={isCustomLayout}>
                     <SearchBar
@@ -236,21 +250,19 @@ const BusinessesListingUI = (props) => {
                     )}
                   </WrapperSearch>
                 )}
-                {(configs?.google_maps_api_key?.value && businessesList?.businesses?.length > 0) ? (
+                {(configs?.google_maps_api_key?.value && businessesList?.businesses?.length > 0) && (
                   <BusinessesMap
                     businessList={businessesList.businesses}
                     userLocation={orderState?.options?.address?.location}
                     setErrors={setMapErrors}
                   />
-                ) : (
-                  <Skeleton width={70} />
                 )}
               </MapWrapper>
             </BusinessContent>
           ) : (
             <>
               {
-                businessInfoById &&
+                businessInfoById && (
                   <BusinessInformation
                     business={businessInfoById}
                     getBusinessType={getBusinessType}
@@ -258,6 +270,7 @@ const BusinessesListingUI = (props) => {
                     onClose={setShowBusinessInfo}
                     goBusiness={handleBusinessClick}
                   />
+                )
               }
             </>
           )}

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

@@ -3,8 +3,10 @@ export const BusinessContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: 35px;
-  box-shadow: 0px -2px 1px 0px lightgrey;
+  margin-top: 0;
+  @media (min-width: 577px){
+    margin-top: 35px
+  }
 `
 export const BusinessList = styled.div`
   display: flex;
@@ -14,10 +16,24 @@ export const WrapperSearch = styled.div`
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-  
+  position: relative;
+  padding: 15px 10px 15px 25px;
+  input {
+    border-bottom: 1px solid #ccc;
+  }
+  svg{
+    ${({ theme }) => theme?.business_listing_view?.components?.layout?.type === 'mapview' && css`
+    position: absolute;
+    right: 5px;
+      transform: translateY(70%);
+      cursor: pointer;
+      `}
+  }
   @media (min-width: 850px) {
     width: 100%;
+    box-shadow: 0px -2px 1px 4px lightgrey;
   }
+    
   
   ${({ isCustomLayout }) => isCustomLayout && css`
     box-sizing: border-box;
@@ -95,3 +111,22 @@ export const BusinessFilter = styled.div`
     padding-right: 20px;
   `}
 `
+
+export const AddressInput = styled.div`
+  border: 1px solid #ccc;
+  padding: 10px 15px;
+  margin: 20px;
+  margin-bottom: 0;
+  border-radius: 7.6px;
+  cursor: pointer;
+  p{
+    margin: 0;
+    margin-left: 35px
+  }
+
+  svg {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+  }
+`

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

@@ -1,12 +1,16 @@
 import React from 'react'
-import { CardElement } from '@stripe/react-stripe-js'
+import { CardCvcElement, CardElement, CardExpiryElement, CardNumberElement } from '@stripe/react-stripe-js'
 import { CardForm as CardFormController, useLanguage } from 'ordering-components-external'
 
 import {
   FormStripe,
   FormRow,
   ErrorMessage,
-  FormActions
+  FormActions,
+  CardNumberField,
+  CardExpiryCvcField,
+  CardExpiryField,
+  CardCvcField
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -31,9 +35,14 @@ const CARD_ELEMENT_OPTIONS = {
 const CardFormUI = (props) => {
   const {
     error,
+    errorExpiry,
+    errorCvc,
     loading,
     handleSubmit,
-    handleChange
+    handleChange,
+    isSplitForm,
+    handleChangeExpiry,
+    handleChangeCvc
   } = props
 
   const [, t] = useLanguage()
@@ -48,11 +57,43 @@ const CardFormUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <FormStripe onSubmit={handleSubmit}>
         <FormRow>
-          <CardElement
-            options={CARD_ELEMENT_OPTIONS}
-            onChange={handleChange}
-          />
-          <ErrorMessage>{error}</ErrorMessage>
+          {!isSplitForm ?
+            <>
+              <CardElement
+                options={CARD_ELEMENT_OPTIONS}
+                onChange={handleChange}
+              />
+              <ErrorMessage>{error}</ErrorMessage>
+            </> :
+            <>
+              <CardNumberField>
+                <label>{t('CARD_NUMBER', 'Card number')}</label>
+                <CardNumberElement
+                  options={CARD_ELEMENT_OPTIONS}
+                  onChange={handleChange}
+                />
+                <ErrorMessage>{error}</ErrorMessage>
+              </CardNumberField>
+              <CardExpiryCvcField>
+                <CardExpiryField>
+                  <label>{t('EXPIRE_DATE', 'Expire date')}</label>
+                  <CardExpiryElement
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChangeExpiry}
+                  />
+                  <ErrorMessage>{errorExpiry}</ErrorMessage>
+                </CardExpiryField>
+                <CardCvcField>
+                  <label>{t('CVC', 'CVC')}</label>
+                  <CardCvcElement
+                    options={CARD_ELEMENT_OPTIONS}
+                    onChange={handleChangeCvc}
+                  />
+                  <ErrorMessage>{errorCvc}</ErrorMessage>
+                </CardCvcField>
+              </CardExpiryCvcField>
+            </>
+          }
         </FormRow>
         <FormActions>
           <Button

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

@@ -32,6 +32,24 @@ export const FormStripe = styled.form`
   }
 `
 
+export const CardExpiryField = styled.div`
+  color: #ADB2B9;
+`
+
+export const CardCvcField = styled.div`
+  color: #ADB2B9;
+`
+
+export const CardNumberField = styled.div`
+  width: 100%;
+  color: #ADB2B9;
+`
+export const CardExpiryCvcField = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 10px;
+`
+
 export const FormRow = styled.div`
   input {
     display: block;
@@ -62,8 +80,8 @@ export const ErrorMessage = styled.div`
   color: #D81212;
   margin: 10px 0px 0px 10px;
   ${props => props.theme?.rtl && css`
-    margin: 10px 10px 0px 0px    
-  `}  
+    margin: 10px 10px 0px 0px
+  `}
 `
 
 export const FormActions = styled.div`

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

@@ -26,6 +26,7 @@ export const CartPopover = (props) => {
   const referenceElement = useRef()
   const popperElement = useRef()
   const arrowElement = useRef()
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type === 'Chew'
   const popper = usePopper(referenceElement.current, popperElement.current, {
     placement: theme?.rtl ? 'bottom' : 'bottom-end',
     modifiers: [
@@ -102,7 +103,7 @@ export const CartPopover = (props) => {
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
       <div style={{ overflow: 'hidden' }}>
-        <HeaderItem ref={referenceElement} onClick={props.onClick} name='cart-popover'>
+        <HeaderItem ref={referenceElement} onClick={props.onClick} name='cart-popover' isChew={isChew}>
           <span>
             <Cart3 />
             {props.carts?.length > 0 && <span>{props.carts?.length}</span>}

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

@@ -3,11 +3,11 @@ import styled, { css } from 'styled-components'
 export const HeaderItem = styled.div`
   cursor: pointer;
   > span {
+    background: ${props => !props.isChew ? props.theme.colors.primary : props.theme.colors.backgroundPage};
+    color: ${props => !props.isChew ? props.theme.colors.backgroundPage : props.theme.colors.colorPage};
     padding: 10px;
     display: flex;
     align-items: center;
-    background: ${props => props.theme.colors.primary};
-    color: #FFFFFF;
     border-radius: 7.6px;
 
     span {
@@ -17,7 +17,7 @@ export const HeaderItem = styled.div`
         margin-right: 10px;
       ` : css`
         margin-left: 10px;
-      `} 
+      `}
     }
     svg {
       font-size: 16px;

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

@@ -1,16 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { useApi, useOrderingTheme } from 'ordering-components-external'
+import { useApi, useConfig, useLanguage, useOrderingTheme } from 'ordering-components-external'
 
-import { Container } from './styles'
+import { Container, PoweredByOrdering } from './styles'
 
-export const Footer = () => {
+export const Footer = ({ isFooterPage }) => {
   const [footerState, setfooterState] = useState({ body: null, loading: false, error: null })
   const [ordering] = useApi()
   const [{ theme }] = useOrderingTheme()
   const requestsState = {}
-
+  const [{ configs }] = useConfig()
+  const [, t] = useLanguage()
   const footerContent = theme?.my_products?.components?.theme_settings?.components?.values?.footer_content
-
+  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const getPage = async () => {
     setfooterState({ ...footerState, loading: true })
     try {
@@ -42,7 +43,7 @@ export const Footer = () => {
   return (
     <Container>
       {
-        (footerContent || footerState.body) && (
+        ((footerContent || footerState.body) && !isFooterPage) && (
           <div
             style={{ wordBreak: 'break-all', padding: '0px 10px' }}
             dangerouslySetInnerHTML={{
@@ -51,6 +52,14 @@ export const Footer = () => {
           />
         )
       }
+      {enabledPoweredByOrdering && (
+        <PoweredByOrdering>
+          {t('POWERED_BY', 'Powered by')}
+          <a href='https://www.ordering.co'>
+            {' '}{t('ORDERING_CO', 'Ordering.co')}
+          </a>
+        </PoweredByOrdering>
+      )}
     </Container>
   )
 }