ordering-ui-external 2.0.2 → 2.0.3

package/src/themes/callcenterOriginal/src/components/Cart/styles.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'
 import { lighten } from 'polished'
 
 export const CartContainer = styled.div`
-  border-bottom: 1px solid #F0F0F0;
+  /* border-bottom: 1px solid #F0F0F0; */
 `
 
 export const CartSticky = styled.div`

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

@@ -1,13 +1,15 @@
 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 { Cart } from '../../../../five/src/components/Cart'
+import { Button } from '../../styles/Buttons'
 
 export const CartContent = (props) => {
   const {
     carts,
+    isOpenCart,
     isOrderStateCarts,
     isCartPopover,
     isForceOpenCart,
@@ -17,8 +19,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 +33,36 @@ export const CartContent = (props) => {
     setCurrentCartUuid(null)
   }
 
+  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(() => {
     events.on('cart_popover_closed', handleSetCurrentCartUuid)
     events.on('cart_product_added', handleAddProduct)
@@ -38,54 +73,38 @@ export const CartContent = (props) => {
   }, [])
 
   return (
-    <>
-      {
-      props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))
-      }
-      {
-      props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))
-      }
-      <Container>
+    <Container>
+      <WrapperContainer>
         <Title>{t('YOUR_CART', 'Your cart')}</Title>
-        {isOrderStateCarts && carts?.length > 0 &&
-          carts.map(cart => (
-            <React.Fragment key={cart.uuid}>
-              {cart.products.length > 0 && (
-                <Cart
-                  isCartPending={cart?.status === 2}
-                  cart={cart}
-                  isCartPopover={isCartPopover}
-                  isCheckout={window.location.pathname === `/checkout/${cart?.uuid}`}
-                  isForceOpenCart={isForceOpenCart}
-                  currentCartUuid={currentCartUuid}
-                  isProducts={cart.products.length}
-                  onClickCheckout={props.onClose}
-                  setPreorderBusiness={setPreorderBusiness}
-                />
-              )}
-            </React.Fragment>
-          ))}
-        {(!carts || carts?.length === 0) && (
-          <NotCarts>
-            <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='122px' loading='lazy' />
-            <h1>{t('NO_PRODUCTS_TO_CART', 'You have no products added to the cart')}</h1>
-          </NotCarts>
+        {checkoutMultiBusinessEnabled && carts?.length > 0 && (
+          <Button onClick={handleClickCheckout} color='primary'>{t('CHECKOUT', 'Checkout')}</Button>
         )}
-      </Container>
-      {
-      props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))
-      }
-      {
-      props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))
-      }
-    </>
+      </WrapperContainer>
+      {isOrderStateCarts && carts?.length > 0 &&
+        carts.map(cart => (
+          <React.Fragment key={cart.uuid}>
+            {cart.products.length > 0 && (
+              <Cart
+                isCartPending={cart?.status === 2}
+                cart={cart}
+                isOpenCart={isOpenCart}
+                isCartPopover={isCartPopover}
+                isCheckout={window.location.pathname === `/checkout/${cart?.uuid}`}
+                isForceOpenCart={isForceOpenCart}
+                currentCartUuid={currentCartUuid}
+                isProducts={cart.products.length}
+                onClickCheckout={props.onClose}
+                setPreorderBusiness={setPreorderBusiness}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      {(!carts || carts?.length === 0) && (
+        <NotCarts>
+          <img src={theme.images?.general?.notFound} alt='Not Found' width='200px' height='122px' loading='lazy' />
+          <h1>{t('NO_PRODUCTS_TO_CART', 'You have no products added to the cart')}</h1>
+        </NotCarts>
+      )}
+    </Container>
   )
 }

package/src/themes/callcenterOriginal/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/callcenterOriginal/src/components/CartPopover/index.js

@@ -86,37 +86,25 @@ export const CartPopover = (props) => {
   }
 
   return (
-    <>
-      {props.beforeElements?.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>))}
-      {props.beforeComponents?.map((BeforeComponent, i) => (
-        <BeforeComponent key={i} {...props} />))}
-      <div style={{ overflow: 'hidden' }}>
-        <HeaderItem ref={referenceElement} onClick={props.onClick} name='cart-popover'>
-          <span>
-            <Cart3 />
-            {props.carts?.length > 0 && <span>{props.carts?.length}</span>}
-          </span>
-        </HeaderItem>
-        <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
-          <CartContent
-            isCartPopover
-            carts={props.carts}
-            isOrderStateCarts={!!orderState.carts}
-            onClose={props.onClose}
-            setPreorderBusiness={setPreorderBusiness}
-          />
-          <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
-        </PopoverBody>
-      </div>
-      {props.afterComponents?.map((AfterComponent, i) => (
-        <AfterComponent key={i} {...props} />))}
-      {props.afterElements?.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>))}
-    </>
+    <div style={{ overflow: 'hidden' }}>
+      <HeaderItem ref={referenceElement} onClick={props.onClick} name='cart-popover'>
+        <span>
+          <Cart3 />
+          {props.carts?.length > 0 && <span>{props.carts?.length}</span>}
+        </span>
+      </HeaderItem>
+      <PopoverBody className='cart-popover' ref={popperElement} style={popStyle} {...attributes.popper}>
+        <CartContent
+          isCartPopover
+          isOpenCart={open}
+          onClick={props.onClick}
+          carts={props.carts}
+          isOrderStateCarts={!!orderState.carts}
+          onClose={props.onClose}
+          setPreorderBusiness={setPreorderBusiness}
+        />
+        <PopoverArrow key='arrow' ref={arrowElement} style={styles.arrow} />
+      </PopoverBody>
+    </div>
   )
 }