ordering-ui-external 1.9.2 → 1.9.3

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

@@ -5,7 +5,7 @@ export const Header = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: ${props => props.isChew && props.theme.colors.primary};
+  background-color: ${props => (props.isChew && props.theme.colors.primary) || props.theme?.header?.components?.style?.backgroundColor};
   border-bottom: ${props => !props.isChew && css`1px solid #E9ECEF`};
 `
 
@@ -16,31 +16,32 @@ 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;
   }
   #right-side {
-    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '25%'};
+    width: ${({ theme }) => theme?.header?.components?.layout?.type === 'starbucks' ? '30%' : '40%'};
     justify-content: flex-end;
   }
   #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'};
+    }
+  }
   @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);
@@ -50,32 +51,27 @@ 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: 768px) {
+    @media (min-width: 769px) {
       width: ${props => props.imgW ?? '150px'};
       height: ${props => props.isChew && '35px'};
     }
   }
-
   ${props => !props.disabledResponsive && css`
     img:nth-child(1) {
       display: none;
     }
   `}
-
-  @media (min-width: 768px) {
+  @media (min-width: 769px) {
     img:nth-child(1) {
       display: block;
     }
@@ -94,7 +90,6 @@ export const LeftHeader = styled.div`
 export const RightHeader = styled.div`
   align-self: center;
   display: flex;
-
   #select-input {
     div {
       color: ${props => props.theme.colors.darkTextColor};
@@ -105,27 +100,21 @@ export const RightHeader = styled.div`
 export const Menu = styled.div`
   display: flex;
   align-items: center;
-
   #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;
@@ -133,13 +122,12 @@ export const Menu = styled.div`
       }
     `}
   }
-
   &.left-header {
     background: #F8F9FA;
     border: none;
     box-sizing: border-box;
     border-radius: ${props => props.isChew ? '8px' : '50px'};
-    margin: 0 15px;
+    margin: 0 20px;
     flex-grow: 1;
     padding: 0 10px;
     display: flex;
@@ -147,38 +135,31 @@ export const Menu = styled.div`
     justify-content: center;
     position: relative;
     height: 44px;
-
     @media (min-width: 821px) {
       border: 1px solid #DEE2E6;
       justify-content: space-between;
     }
-
     @media (min-width: 1024px) {
       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;
     }
   }
-
   > *:not(:last-child) {
     margin: 0 5px;
   }
-
   > span {
     #select-input {
       background: transparent !important;
     }
   }
-
   .moment-popover {
     border-left: 1px solid #DEE2E6;
     border-right: 1px solid #DEE2E6;
@@ -186,7 +167,6 @@ export const Menu = styled.div`
     justify-content: center;
     width: 200px;
     display: none;
-
     @media (min-width: 1175px) {
       width: 250px;
     }
@@ -194,14 +174,12 @@ export const Menu = styled.div`
     @media (min-width: 1400px) {
       width: 400px;
     }
-
     > div:first-child {
       width: 100%;
       display: flex;
       justify-content: center;
     }
   }
-
   .address-popover {
     flex-grow: 1;
     display: none;
@@ -209,16 +187,12 @@ export const Menu = styled.div`
       width: 100%;
     }
   }
-
   .order-type {
     padding: 0 10px;
-
     @media (min-width: 1200px) {
       padding: 0 20px;
     }
   }
-
-
   @media (min-width: 821px) {
     .moment-popover,
     .address-popover {
@@ -237,13 +211,11 @@ 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;
@@ -259,7 +231,6 @@ export const SubMenu = styled(InnerHeader)`
   box-sizing: border-box;
   margin: 0px;
   position: relative;
-
   @media (min-width: 821px) {
     display: none;
   }
@@ -274,7 +245,6 @@ export const CustomerInfo = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
-
     span {
       display: flex;
       align-items: center;
@@ -310,7 +280,6 @@ export const AddressMenu = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-
   span {
     width: 85%;
     p {
@@ -321,13 +290,11 @@ 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;
@@ -360,15 +327,12 @@ export const MomentMenu = styled.div`
   @media (min-width: 821px) {
     display: flex;
   }
-
   @media (min-width: 1175px) {
     width: 250px;
   }
-
   @media (min-width: 1400px) {
     width: 400px;
   }
-
   > div {
     cursor: pointer;
     font-size: 14px;
@@ -395,13 +359,11 @@ 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};
@@ -416,7 +378,6 @@ export const FarAwayMessage = styled.div`
     line-height: 18px;
     color: ${props => props.theme.colors.headingColor};
   }
-
   @media (min-width: 400px) {
     padding: 8px 20px;
     font-size: 14px;
@@ -457,11 +418,9 @@ 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;
@@ -488,3 +447,13 @@ export const HeaderSearchMode = styled.div`
     width: 250px;
   }
 `
+
+export const LeftSide = styled.div`
+  display: flex;
+  width: 100%;
+  @media (min-width: 769px){
+    flex-direction: ${({ theme }) =>
+      theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
+    width: 60%;
+  }
+`

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

@@ -39,6 +39,7 @@ export const HeaderOption = (props) => {
         isChew={isChew}
         onClick={() => props.onClick(variant)}
         isHome={props.isHome}
+        style={props.containerStyle}
       >
         {variant === 'cart' && (
           <span>
@@ -47,10 +48,10 @@ export const HeaderOption = (props) => {
           </span>
         )}
         {variant === 'address' && (
-          <>
+          <span>
             <FaMapMarkerAlt id='icon' />
             {addressState || t('WHAT_IS_YOUR_ADDRESS', 'What\'s your address?')}
-          </>
+          </span>
         )}
         {variant === 'moment' && (
           <>

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

@@ -45,6 +45,7 @@ export const OriginalHomeHero = (props) => {
   const logo = orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image
   const mobileBgImg = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_mobile_background?.components?.image
   const isFullScreen = orderingTheme?.theme?.my_products?.components?.images?.components?.homepage_image_fullscreen
+  const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const handleFindBusinesses = () => {
     if (!orderState?.options?.address?.location) {
@@ -112,7 +113,7 @@ export const OriginalHomeHero = (props) => {
       isFullScreen={isFullScreen}
     >
       <ContentWrapper>
-        {windowSize.width < 576 && (
+        {windowSize.width < 576 && !isChew && (
           <LogoWrapper>
             <img alt='Logotype' src={logo || theme?.images?.logos?.logotypeInvert} loading='lazy' />
           </LogoWrapper>

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

@@ -61,7 +61,8 @@ const MultiCheckoutUI = (props) => {
     handlePaymethodDataChange,
     onRedirectPage,
     cartGroup,
-    cartUuid
+    cartUuid,
+    totalCartsFee
   } = props
 
   const [, t] = useLanguage()
@@ -82,6 +83,7 @@ const MultiCheckoutUI = (props) => {
   const walletCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
   const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+  const totalFeeEnabled = configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
@@ -152,13 +154,13 @@ const MultiCheckoutUI = (props) => {
   }, [validationFields, user, customerState])
 
   useEffect(() => {
-    if (openCarts.length) return
+    if (openCarts.length || cartGroup.loading) return
     onRedirectPage && onRedirectPage({ page: 'search' })
-  }, [openCarts])
+  }, [openCarts, cartGroup])
 
   return (
     <>
-      {openCarts.length === 0 ? (
+      {!cartGroup?.loading && openCarts.length === 0 ? (
         <NotFoundSource
           content={t('CARTS_NOT_FOUND', 'You don’t have carts available')}
         />
@@ -241,8 +243,10 @@ const MultiCheckoutUI = (props) => {
                   <Cart
                     isCartPending={cart?.status === 2}
                     cart={cart}
-                    isMultiCheckout={!isMultiDriverTips}
+                    isMultiCheckout={isMultiDriverTips}
                     isProducts={cart?.products?.length || 0}
+                    hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
+                    hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
                   />
                   <DriverTipDivider />
                 </React.Fragment>
@@ -253,7 +257,23 @@ const MultiCheckoutUI = (props) => {
                 </WarningText>
               )}
               {openCarts.length > 0 && (
-                <MultiCartPriceContainer>
+                <MultiCartPriceContainer totalFeeEnabled={totalFeeEnabled}>
+                  {totalCartsFee &&
+                    configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' &&
+                  (
+                    <span>
+                      <p>{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}</p>
+                      <p>{parsePrice(totalCartsFee)}</p>
+                    </span>
+                  )}
+                  {openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0) > 0 &&
+                    configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' &&
+                  (
+                    <span>
+                      <p>{t('DRIVER_TIP', 'Driver tip')}</p>
+                      <p>{parsePrice(openCarts.reduce((sum, cart) => sum + cart?.driver_tip, 0))}</p>
+                    </span>
+                  )}
                   <div>
                     <h4>{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}</h4>
                     <h4>{parsePrice(totalCartsPrice)}</h4>

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

@@ -5,11 +5,9 @@ export const Container = styled.div`
   width: 100%;
   flex-direction: column;
   min-height: auto;
-
   @media (min-width: 769px) {
     flex-direction: row;
   }
-
   @media (min-width: 993px) {
     min-height: calc(100vh - 337px);
     box-sizing: border-box;
@@ -19,7 +17,6 @@ export const WrapperLeftContainer = styled.div`
   width: 100%;
   box-sizing: border-box;
   padding: 30px 20px;
-
   @media (min-width: 769px) {
     width: 55%;
     padding: 30px 60px 55px 40px;
@@ -27,14 +24,12 @@ export const WrapperLeftContainer = styled.div`
 `
 export const WrapperLeftContent = styled.div`
   width: 100%;
-
   .checkout-title {
     margin: 0;
     font-weight: 600;
     font-size: 32px;
     color: ${props => props.theme?.colors.darkTextColor};
   }
-
   .back-arrow {
     font-size: 24px;
     cursor: pointer;
@@ -46,7 +41,6 @@ export const WrapperRightContainer = styled.div`
   background: #F8F9FA;
   box-sizing: border-box;
   padding: 40px 20px;
-
   @media (min-width: 769px) {
     width: 45%;
     padding: 55px 40px;
@@ -90,17 +84,14 @@ export const CartHeader = styled.div`
   align-items: flex-start;
   justify-content: space-between;
   flex-direction: column;
-
   h1 {
     font-weight: 600;
     font-size: 20px;
     line-height: 30px;
   }
-
   h1 {
     margin: 5px 0px;
   }
-
   @media (min-width: 300px) {
     flex-direction: row;
     align-items: center;
@@ -111,24 +102,30 @@ export const DriverTipDivider = styled.div`
   width: calc(100% + 40px);
   margin-left: -20px;
   background: #E9ECEF;
-
   @media(min-width: 769px) {
     width: calc(100% + 80px);
     margin-left: -40px;
   }
 `
 export const MultiCartPriceContainer = styled.div`
+  margin-top: 38px;
   > div {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 38px;
+    margin-top: ${({ totalFeeEnabled }) => totalFeeEnabled ? '5px' : '38px'};
     margin-bottom: 5px;
     > h4 {
       font-size: 18px;
       margin: 0;
     }
   }
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
   p {
     font-size: 14px;
     color: ${props => props.theme.colors.darkGray};
@@ -151,12 +148,10 @@ export const WrapperPlaceOrderButton = styled.div`
   width: 100%;
   display: flex;
   justify-content: center;
-
   button {
     width: 100%;
     padding: 5px 20px;
     cursor: pointer;
-
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;

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

@@ -19,6 +19,7 @@ import {
 } from './styles'
 import { NotFoundSource } from '../NotFoundSource'
 import { useTheme } from 'styled-components'
+import { getOrderStatus } from '../../../../../utils'
 
 const MultiOrdersDetailsUI = (props) => {
   const {
@@ -161,6 +162,7 @@ const MultiOrdersDetailsUI = (props) => {
           {orders.map(order => (
             <SingleOrderCard
               key={order.id}
+              getOrderStatus={getOrderStatus}
               order={order}
             />
           ))}

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

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { useLanguage, useOrder, useConfig, useSession } from 'ordering-components-external'
+import { MomentPopover } from '../../../../pwa/src/components/MomentPopover'
+import { OrderTypeSelectorHeader } from '../../../../../components/OrderTypeSelectorHeader'
+import FaMapMarkerAlt from '@meronex/icons/fa/FaMapMarkerAlt'
+import { Modal } from '../Modal'
+import { AddressForm } from '../AddressForm'
+import { AddressList } from '../AddressList'
+import { Alert } from '../Confirm'
+import {
+  Container,
+  AddressMenu,
+  FeatureItems,
+  ItemInline
+} from './styles'
+
+export const OrderContextUI = (props) => {
+  const { isCheckOut, setMapErrors, isCustomerMode, isBusinessList } = props
+
+  const [, t] = useLanguage()
+  const [orderState] = useOrder()
+  const [configState] = useConfig()
+  const [{ auth }] = useSession()
+
+  const [openPopover, setOpenPopover] = useState({})
+  const [modals, setModals] = useState({ listOpen: false, formOpen: false, citiesOpen: false })
+  const [alertState, setAlertState] = useState({ open: false, content: [] })
+
+  const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
+
+  const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
+
+  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')] })
+      return
+    }
+    setModals({ listOpen: false, formOpen: false })
+  }
+
+  const handleCloseAlerts = () => {
+    setAlertState({ open: false, content: [] })
+    setMapErrors && setMapErrors('')
+  }
+
+  const handleClickAddress = (e) => {
+    if (auth) {
+      setModals({ ...modals, listOpen: true })
+    } else {
+      setModals({ ...modals, formOpen: true })
+    }
+  }
+
+  return (
+    <>
+      <Container isBusinessList={isBusinessList}>
+        <AddressMenu
+          onClick={() => handleClickAddress()}
+          isCheckOut={isCheckOut}
+        >
+          <FaMapMarkerAlt />
+          <span>{orderState.options?.address?.address || t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}</span>
+        </AddressMenu>
+        <FeatureItems>
+          <ItemInline>
+            <OrderTypeSelectorHeader configTypes={configTypes} />
+          </ItemInline>
+          <ItemInline>
+            <MomentPopover
+              open={openPopover.moment}
+              onClick={() => handleTogglePopover('moment')}
+              onClose={() => handleClosePopover('moment')}
+              isBanner
+            />
+          </ItemInline>
+        </FeatureItems>
+      </Container>
+      <Modal
+        title={t('ADDRESS_FORM', 'Address Form')}
+        open={modals.formOpen}
+        onClose={() => setModals({ ...modals, formOpen: false })}
+      >
+        <AddressForm
+          useValidationFileds
+          address={orderState?.options?.address || {}}
+          onClose={() => setModals({ ...modals, formOpen: false })}
+          onCancel={() => setModals({ ...modals, formOpen: false })}
+          onSaveAddress={() => setModals({ ...modals, formOpen: false })}
+        />
+      </Modal>
+
+      <Modal
+        title={t('ADDRESSES', 'Address List')}
+        open={modals.listOpen}
+        width='70%'
+        onClose={() => setModals({ ...modals, listOpen: false })}
+      >
+        <AddressList
+          isModal
+          changeOrderAddressWithDefault
+          userId={isNaN(userCustomer?.id) ? null : userCustomer?.id}
+          onCancel={() => setModals({ ...modals, listOpen: false })}
+          onAccept={() => handleFindBusinesses()}
+          isCustomerMode={isCustomerMode}
+          isMobile
+        />
+      </Modal>
+      <Alert
+        title={t('ORDERING', 'Ordering')}
+        content={alertState.content}
+        acceptText={t('ACCEPT', 'Accept')}
+        open={alertState.open}
+        onClose={() => handleCloseAlerts()}
+        onAccept={() => handleCloseAlerts()}
+        closeOnBackdrop={false}
+      />
+    </>
+  )
+}