ordering-ui-external 1.9.2 → 1.9.4

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

@@ -13,86 +13,11 @@ export const BusinessBanner = styled.div`
   align-items: center;
   margin-bottom: 30px;
   position: relative;
-  @media (max-width: 481px) {
+  @media (max-width: 576px) {
     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;
@@ -196,7 +121,7 @@ export const BusinessHeroImgStyled = styled.div`
     height: 370px;
   }
   @media (min-width: 821px) {
-    height: ${({ height }) => height || '650px'};
+    height: ${({ height, theme }) => theme?.business_listing_view?.components?.business_hero?.components?.styles?.height || height || '650px'};
   }
 `
 

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

@@ -7,7 +7,6 @@ import {
   useUtils,
   useValidationFields,
   useConfig,
-  useOrderingTheme,
   useSite,
   useCustomer
 } from 'ordering-components-external'
@@ -24,7 +23,6 @@ import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { TaxInformation } from '../TaxInformation'
 import { TextArea } from '../../styles/Inputs'
 import { SpinnerLoader } from '../../../../../components/SpinnerLoader'
-import { CartStoresListing } from '../../../../franchise/src/components/CartStoresListing'
 import { DriverTips } from '../DriverTips'
 import { ServiceForm } from '../ServiceForm'
 import {
@@ -56,7 +54,6 @@ const CartUI = (props) => {
     onClickCheckout,
     isCheckout,
     useKioskApp,
-    isMultiCheckout,
     isCartPending,
     isCartPopover,
     isForceOpenCart,
@@ -67,7 +64,10 @@ const CartUI = (props) => {
     handleChangeComment,
     commentState,
     handleRemoveOfferClick,
-    setPreorderBusiness
+    setPreorderBusiness,
+    cart: cartMulticart,
+    hideDeliveryFee,
+    hideDriverTip
   } = props
 
   const theme = useTheme()
@@ -75,7 +75,6 @@ const CartUI = (props) => {
   const [orderState] = useOrder()
   const [events] = useEvent()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
-  const [orderingTheme] = useOrderingTheme()
   const [validationFields] = useValidationFields()
   const [{ configs }] = useConfig()
   const [{ site }] = useSite()
@@ -93,17 +92,16 @@ const CartUI = (props) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isUpselling, setIsUpselling] = useState(false)
-  const [openChangeStore, setOpenChangeStore] = useState(false)
+  // const [openChangeStore, setOpenChangeStore] = useState(false)
 
   const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
-  const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
-  const openCarts = (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 cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
+  const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+  const cart = cartMulticart || orderState?.carts?.[`businessId:${props.cart?.business_id}`]
   const viewString = isStore ? 'business_view' : 'header'
-  const hideCartComments = orderingTheme?.theme?.[viewString]?.components?.cart?.components?.comments?.hidden
+  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden
+  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount?.hidden
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet')
@@ -134,37 +132,30 @@ const CartUI = (props) => {
   }
 
   const handleClickCheckout = () => {
-    const cartSelectedHasGroup = cart?.group?.uuid
-    const cartFilterValidation = cart => cart?.valid && cart?.status !== 2
-    const cartsGroupLength = cartSelectedHasGroup ? Object.values(orderState.carts).filter(_cart => _cart?.group?.uuid === cartSelectedHasGroup && cartFilterValidation(_cart))?.length : 0
-    if (cartsGroupLength > 1 && checkoutMultiBusinessEnabled) {
-      events.emit('go_to_page', { page: 'multi_checkout', params: { cartUuid: cart?.group?.uuid } })
-      events.emit('cart_popover_closed')
-      return
-    }
-    const cartGroupsCount = {}
-    // eslint-disable-next-line no-unused-expressions
-    Object.values(orderState.carts).filter(_cart => cartFilterValidation(_cart))?.forEach(_cart => {
-      if (cartGroupsCount[_cart?.group?.uuid]) {
-        cartGroupsCount[_cart?.group?.uuid] += 1
-      } else {
-        cartGroupsCount[_cart?.group?.uuid] = 1
-      }
-    })
-    let groupForTheCart
-    const groupForAddCartArray = Object.keys(cartGroupsCount).filter(cartGroupUuid => cartGroupsCount[cartGroupUuid] > 0 && cartGroupsCount[cartGroupUuid] < 5)
-    const max = Math.max(...groupForAddCartArray.map(uuid => cartGroupsCount[uuid]))
-    const indexes = groupForAddCartArray.filter(uuid => cartGroupsCount[uuid] === max)
-    if (indexes?.length > 1) {
-      groupForTheCart = indexes.find(uuid => uuid !== 'undefined')
+    const cartsAvailable = Object.values(orderState?.carts)?.filter(cart => cart?.valid && cart?.status !== 2)
+    if (cartsAvailable.length === 1) {
+      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cartsAvailable[0]?.uuid } })
     } else {
-      groupForTheCart = indexes[0]
-    }
+      const groupKeys = {}
+      cartsAvailable.forEach(_cart => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+      })
 
-    if (checkoutMultiBusinessEnabled && openCarts?.length > 1 && groupForTheCart) {
-      events.emit('go_to_page', { page: 'multi_cart', params: { cartUuid: cart.uuid, cartGroup: groupForTheCart === 'undefined' ? 'create' : groupForTheCart } })
-    } else {
-      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cart.uuid } })
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        events.emit('go_to_page', { page: 'multi_cart' })
+      } else {
+        events.emit('go_to_page', {
+          page: 'multi_checkout',
+          params: {
+            cartUuid: cartsAvailable[0]?.group?.uuid
+          }
+        })
+      }
     }
     events.emit('cart_popover_closed')
     onClickCheckout && onClickCheckout()
@@ -218,7 +209,7 @@ const CartUI = (props) => {
 
   const getIncludedTaxes = () => {
     if (cart?.taxes === null) {
-      return cart.business.tax_type === 1 ? cart?.tax : 0
+      return cart?.business.tax_type === 1 ? cart?.tax : 0
     } else {
       return cart?.taxes.reduce((taxIncluded, tax) => {
         return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
@@ -242,9 +233,9 @@ const CartUI = (props) => {
     })
   }
 
-  const handleChangeStore = () => {
-    setOpenChangeStore(true)
-  }
+  // const handleChangeStore = () => {
+  //   setOpenChangeStore(true)
+  // }
 
   useEffect(() => {
     if (isCustomMode) setIsUpselling(true)
@@ -281,7 +272,7 @@ const CartUI = (props) => {
             handleClickCheckout={handleClickCheckout}
             checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || !cart?.valid_maximum || (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) || !cart?.valid_address}
             setPreorderBusiness={setPreorderBusiness}
-            handleChangeStore={!useKioskApp && handleChangeStore}
+            // handleChangeStore={!useKioskApp && handleChangeStore}
             isMultiCheckout={isMultiCheckout}
           >
             {cart?.products?.length > 0 && cart?.products.map(product => (
@@ -289,6 +280,7 @@ const CartUI = (props) => {
                 key={product.code}
                 isCartPending={isCartPending}
                 isCartProduct
+                isDisabledEdit={!cart?.business_id}
                 product={product}
                 isCheckout={isCheckout}
                 changeQuantity={changeQuantity}
@@ -297,6 +289,7 @@ const CartUI = (props) => {
                 onDeleteProduct={handleDeleteClick}
                 onEditProduct={handleEditProduct}
                 isStore={isStore}
+                viewString={viewString}
               />
             ))}
             {!cart?.valid_products && (
@@ -407,14 +400,14 @@ const CartUI = (props) => {
                         </tr>
                       ))
                     }
-                    {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+                    {orderState?.options?.type === 1 && cart?.delivery_price > 0 && !hideDeliveryFee && (
                       <tr>
                         <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
-                        <td>{parsePrice(cart?.delivery_price)}</td>
+                        <td>{parsePrice(cart?.delivery_price_with_discount ?? cart?.delivery_price)}</td>
                       </tr>
                     )}
                     {
-                      cart?.offers?.length > 0 && cart?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
+                      !hideCartDiscount && cart?.offers?.length > 0 && cart?.offers?.filter(offer => offer?.target === 2)?.map(offer => (
                         <tr key={offer.id}>
                           <td className='icon'>
                             {offer.name}
@@ -432,7 +425,7 @@ const CartUI = (props) => {
                         </tr>
                       ))
                     }
-                    {cart?.driver_tip > 0 && (
+                    {cart?.driver_tip > 0 && !hideDriverTip && (
                       <tr>
                         <td>
                           {t('DRIVER_TIP', 'Driver tip')}{' '}
@@ -448,11 +441,11 @@ const CartUI = (props) => {
                     )}
                   </tbody>
                 </table>
-                {isCouponEnabled && !isCartPending && ((isCheckout || isCartPopover || isMultiCheckout) && !(isCheckout && isCartPopover)) && (
+                {isCouponEnabled && !isCartPending && ((isCheckout || isCartPopover || isMultiCheckout) && !(isCheckout && isCartPopover)) && !hideCartDiscount && (
                   <CouponContainer>
                     <CouponControl
-                      businessId={cart.business_id}
-                      price={cart.total}
+                      businessId={cart?.business_id}
+                      price={cart?.total}
                     />
                   </CouponContainer>
                 )}
@@ -567,7 +560,7 @@ const CartUI = (props) => {
                 )}
               </OrderBill>
             )}
-            {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid_products && (
+            {(onClickCheckout || isForceOpenCart) && !isCheckout && cart?.valid_products && (!isMultiCheckout || isStore) && (
               <CheckoutAction>
                 <p>{cart?.total >= 1 && parsePrice(cart?.total)}</p>
                 <Button
@@ -642,17 +635,17 @@ const CartUI = (props) => {
             <TaxInformation
               type={openTaxModal.type}
               data={openTaxModal.data}
-              products={cart.products}
+              products={cart?.products}
               useKioskApp={useKioskApp}
             />
           </Modal>
           {(openUpselling || isUpselling) && (
             <UpsellingPage
               useKioskApp={useKioskApp}
-              businessId={cart.business_id}
+              businessId={cart?.business_id}
               isCustomMode={isCustomMode}
-              cartProducts={cart.products}
-              business={cart.business}
+              cartProducts={cart?.products}
+              business={cart?.business}
               handleUpsellingPage={handleUpsellingPage}
               openUpselling={openUpselling}
               canOpenUpselling={canOpenUpselling}

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import { useTheme } from 'styled-components'
-import { useLanguage, useEvent } from 'ordering-components-external'
-import { Container, NotCarts, Title } from './styles'
+import { useLanguage, useEvent, useConfig, useOrder } from 'ordering-components-external'
+import { Container, NotCarts, Title, WrapperContainer } from './styles'
 
 import { Cart } from '../Cart'
+import { Button } from '../../styles/Buttons'
 
 export const CartContent = (props) => {
   const {
@@ -19,8 +20,11 @@ export const CartContent = (props) => {
   const [, t] = useLanguage()
   const theme = useTheme()
   const [events] = useEvent()
+  const [orderState] = useOrder()
+  const [{ configs }] = useConfig()
 
   const [currentCartUuid, setCurrentCartUuid] = useState(null)
+  const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
 
   const handleAddProduct = (product, cart) => {
     setCurrentCartUuid(cart?.uuid)
@@ -28,6 +32,37 @@ export const CartContent = (props) => {
 
   const handleSetCurrentCartUuid = () => {
     setCurrentCartUuid(null)
+    props.onClose && props.onClose()
+  }
+
+  const handleClickCheckout = () => {
+    const cartsAvailable = Object.values(orderState?.carts)?.filter(cart => cart?.valid && cart?.status !== 2)
+    if (cartsAvailable.length === 1) {
+      events.emit('go_to_page', { page: 'checkout', params: { cartUuid: cartsAvailable[0]?.uuid } })
+    } else {
+      const groupKeys = {}
+      cartsAvailable.forEach(_cart => {
+        groupKeys[_cart?.group?.uuid]
+          ? groupKeys[_cart?.group?.uuid] += 1
+          : groupKeys[_cart?.group?.uuid ?? 'null'] = 1
+      })
+
+      if (
+        (Object.keys(groupKeys).length === 1 && Object.keys(groupKeys)[0] === 'null') ||
+        Object.keys(groupKeys).length > 1
+      ) {
+        events.emit('go_to_page', { page: 'multi_cart' })
+      } else {
+        events.emit('go_to_page', {
+          page: 'multi_checkout',
+          params: {
+            cartUuid: cartsAvailable[0]?.group?.uuid
+          }
+        })
+      }
+    }
+    events.emit('cart_popover_closed')
+    props.onClose && props.onClose()
   }
 
   useEffect(() => {
@@ -43,7 +78,12 @@ export const CartContent = (props) => {
     <>
       <Container>
         {!isSlideBar && (
-          <Title>{t('YOUR_CART', 'Your cart')}</Title>
+          <WrapperContainer>
+            <Title>{t('YOUR_CART', 'Your cart')}</Title>
+            {checkoutMultiBusinessEnabled && carts?.length > 0 && (
+              <Button onClick={handleClickCheckout} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>
+            )}
+          </WrapperContainer>
         )}
         {isOrderStateCarts && carts?.length > 0 &&
           carts.map(cart => (

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

@@ -13,6 +13,12 @@ export const Container = styled.div`
   }
 `
 
+export const WrapperContainer = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`
+
 export const NotCarts = styled.div`
   height: 300px;
   display: flex;

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

@@ -43,7 +43,9 @@ import {
   CartHeader,
   SelectSpotContainer,
   WrapperActionsInput,
-  MobileWrapperPlaceOrderButton
+  MobileWrapperPlaceOrderButton,
+  OrderContextUIWrapper,
+  HeaderContent
 } from './styles'
 
 import { Button } from '../../styles/Buttons'
@@ -61,6 +63,7 @@ import { Alert } from '../Confirm'
 import { CartContent } from '../CartContent'
 import { Select } from '../../styles/Select'
 import { PlaceSpot } from '../PlaceSpot'
+import { OrderContextUI } from '../OrderContextUI'
 
 const mapConfigs = {
   mapZoom: 16,
@@ -254,11 +257,22 @@ const CheckoutUI = (props) => {
     handleStoreRedirect(cart?.business?.slug)
   }, [cart?.products])
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
   return (
     <Container>
       <WrapperLeftContainer>
         <WrapperLeftContent>
-          <ArrowLeft className='back-arrow' onClick={() => history.goBack()} />
+          <HeaderContent>
+            <ArrowLeft className='back-arrow' onClick={() => history.goBack()} />
+            {windowSize?.width < 576 && (
+              <OrderContextUIWrapper>
+                <OrderContextUI isCheckOut />
+              </OrderContextUIWrapper>
+            )}
+          </HeaderContent>
           {!cartState.loading && cart?.status === 2 && (
             <WarningMessage>
               <VscWarning />

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

@@ -184,12 +184,6 @@ export const WrapperLeftContent = styled.div`
     font-size: 32px;
     color: ${props => props.theme?.colors.darkTextColor};
   }
-
-  .back-arrow {
-    font-size: 24px;
-    cursor: pointer;
-    margin-bottom: 5px;
-  }
 `
 export const CheckOutDivider = styled.div`
   height: 8px;
@@ -319,3 +313,22 @@ export const MobileWrapperPlaceOrderButton = styled.div`
     border-radius: 7.6px;
   }
 `
+
+export const OrderContextUIWrapper = styled.div`
+  flex: 1;
+  margin-left: 15px;
+  ${props => props.theme.rtl && css`
+    margin-left: 0px;
+    margin-right: 15px;
+  `}
+`
+
+export const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .back-arrow {
+    font-size: 24px;
+    cursor: pointer;
+  }
+`