ordering-ui-external 1.8.7 → 1.8.8

package/src/themes/five/index.js

@@ -111,6 +111,7 @@ import { OrderBillSection } from './src/components/OrderDetails/OrderBillSection
 import { OrderPreferencesSection } from './src/components/OrderDetails/OrderPreferencesSections'
 import { ActionsSection } from './src/components/OrderDetails/ActionsSection'
 import { ProductShare } from './src/components/ProductShare'
+import { MultiCart } from './src/components/MultiCart'
 
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
@@ -233,6 +234,7 @@ export {
   OrderPreferencesSection,
   ActionsSection,
   ProductShare,
+  MultiCart,
 
   // styles
   Button,

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

@@ -14,7 +14,8 @@ import {
   useUtils,
   useSession,
   useSite,
-  useOrderingTheme
+  useOrderingTheme,
+  useConfig
 } from 'ordering-components-external'
 
 import {
@@ -81,9 +82,10 @@ const BusinessProductsListingUI = (props) => {
   } = props
 
   const { business, loading, error } = businessState
+  const [{ configs }] = useConfig()
   const theme = useTheme()
   const [, t] = useLanguage()
-  const [{ carts }] = useOrder()
+  const [{ carts }, { addProduct, updateProduct }] = useOrder()
   const [{ parsePrice }] = useUtils()
   const [events] = useEvent()
   const location = useLocation()
@@ -99,8 +101,11 @@ const BusinessProductsListingUI = (props) => {
   const [isCartOpen, setIsCartOpen] = useState(false)
   const [isCartModal, setisCartModal] = useState(false)
   const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
+  const [productToIdLoading, setProductIdToLoading] = useState(null)
   const isMounted = useIsMounted()
 
+  const isQuickAddProduct = configs?.add_product_with_one_click?.value === '1'
+  const checkoutMultiBusinessEnabled = configs?.checkout_multi_business_enabled?.value === '1'
   const currentCart = Object.values(carts).find(cart => cart?.business?.slug === business?.slug) ?? {}
   const isLazy = businessState?.business?.lazy_load_products_recommended
   const showViewOrderButton = !orderingTheme?.theme?.business_view?.components?.order_view_button?.hidden
@@ -114,25 +119,47 @@ const BusinessProductsListingUI = (props) => {
     setOpenBusinessInformation(true)
   }
 
-  const onProductClick = (product) => {
-    if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
-      if (site?.product_url_template) {
-        onProductRedirect({
-          slug: business?.slug,
-          product: site.product_url_template.includes('product_slug') ? product?.slug : product.id,
-          category: site.product_url_template.includes('category_slug') ? product?.category?.slug : product.category_id
-        })
+  const onProductClick = async (product) => {
+    if (product.extras.length === 0 && !product.inventoried && auth && isQuickAddProduct) {
+      setProductIdToLoading(product.id)
+      const isProductAddedToCart = currentCart?.products?.find(Cproduct => Cproduct.id === product.id)
+      const productQuantity = isProductAddedToCart?.quantity
+      const addCurrentProduct = {
+        ...product,
+        quantity: 1
+      }
+      const updateCurrentProduct = {
+        id: product.id,
+        code: isProductAddedToCart?.code,
+        quantity: productQuantity + 1
+      }
+      const cartData = currentCart?.business_id ? currentCart : { business_id: business.id }
+      if (isProductAddedToCart) {
+        await updateProduct(updateCurrentProduct, cartData, isQuickAddProduct)
       } else {
-        onProductRedirect({
-          slug: business?.slug,
-          product: product.id,
-          category: product.category_id
-        })
+        await addProduct(addCurrentProduct, cartData, isQuickAddProduct)
+      }
+      setProductIdToLoading(null)
+    } else {
+      if (!((product?.type === 'service') && business?.professionals?.length > 0)) {
+        if (site?.product_url_template) {
+          onProductRedirect({
+            slug: business?.slug,
+            product: site.product_url_template.includes('product_slug') ? product?.slug : product.id,
+            category: site.product_url_template.includes('category_slug') ? product?.category?.slug : product.category_id
+          })
+        } else {
+          onProductRedirect({
+            slug: business?.slug,
+            product: product.id,
+            category: product.category_id
+          })
+        }
       }
+      setCurProduct(product)
+      setModalIsOpen(true)
+      events.emit('product_clicked', product)
     }
-    setCurProduct(product)
-    setModalIsOpen(true)
-    events.emit('product_clicked', product)
   }
 
   const handlerProductAction = (product) => {
@@ -296,6 +323,7 @@ const BusinessProductsListingUI = (props) => {
           onBusinessClick={onBusinessClick}
           priceFilterValues={priceFilterValues}
           handleChangePriceFilterValues={handleChangePriceFilterValues}
+          productToIdLoading={productToIdLoading}
         />
 
         {
@@ -332,7 +360,7 @@ const BusinessProductsListingUI = (props) => {
           />
         )}
       </ProductsContainer>
-      {currentCart?.products?.length > 0 && auth && !isCartOpen && showViewOrderButton && (
+      {currentCart?.products?.length > 0 && auth && !isCartOpen && showViewOrderButton && !checkoutMultiBusinessEnabled && (
         <FloatingButton
           btnText={
             !currentCart?.valid_maximum ? (

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

@@ -24,6 +24,7 @@ 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 {
@@ -92,7 +93,7 @@ const CartUI = (props) => {
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState({ open: false, tax: null })
   const [isUpselling, setIsUpselling] = useState(false)
-  const [, setOpenChangeStore] = useState(false)
+  const [openChangeStore, setOpenChangeStore] = useState(false)
 
   const businessUrlTemplate = site?.business_url_template || '/store/:business_slug'
 
@@ -133,8 +134,35 @@ const CartUI = (props) => {
   }
 
   const handleClickCheckout = () => {
-    if (checkoutMultiBusinessEnabled && openCarts.length > 1) {
-      events.emit('go_to_page', { page: 'multi_checkout' })
+    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')
+    } else {
+      groupForTheCart = indexes[0]
+    }
+
+    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 } })
     }

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

@@ -29,7 +29,9 @@ export const HorizontalOrdersLayout = (props) => {
   const [, t] = useLanguage()
 
   const ordersToShow = businessesIds
-    ? orders.filter(order => businessesIds?.includes(order?.business_id))
+    ? orders.filter(order =>
+      businessesIds?.includes(order?.business_id) ||
+      JSON.stringify(businessesIds.sort((a, b) => a - b)) === JSON.stringify(order?.business?.map(business => business?.id).sort((a, b) => a - b)))
     : orders
 
   const notOrders = isProducts || isBusiness
@@ -89,7 +91,7 @@ export const HorizontalOrdersLayout = (props) => {
           {orders.length > 0 && ordersToShow.map(order => (
             <SingleOrderCard
               {...props}
-              key={order.id}
+              key={order.id || order.id?.[0]}
               order={order}
             />
           ))}

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { WrapperLeftContainer, WrapperRightContainer, Container } from '../Checkout/styles'
+import { MultiCartCreate } from 'ordering-components-external'
+
+const MultiCartUI = () => {
+  return (
+    <Container>
+      <WrapperLeftContainer>
+        <Skeleton height={30} />
+        <Skeleton height={100} style={{ marginBottom: '15px' }} />
+        <Skeleton height={25} />
+        <Skeleton height={50} style={{ marginBottom: '15px' }} />
+        <Skeleton height={25} />
+        <Skeleton height={50} style={{ marginBottom: '15px' }} />
+        <Skeleton height={25} />
+        <Skeleton height={25} />
+      </WrapperLeftContainer>
+      <WrapperRightContainer>
+        <Skeleton height={25} />
+        <Skeleton height={50} style={{ marginBottom: '20px' }} />
+        <Skeleton height={25} />
+        <Skeleton height={60} />
+        <Skeleton height={80} style={{ marginBottom: '20px' }} />
+        <Skeleton height={25} />
+      </WrapperRightContainer>
+    </Container>
+  )
+}
+
+export const MultiCart = (props) => {
+  const mulcartProps = {
+    ...props,
+    UIComponent: MultiCartUI
+  }
+  return <MultiCartCreate {...mulcartProps} />
+}

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

@@ -63,7 +63,6 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
     businessIds,
     paymethodsAndWallets,
     walletsState,
-    businessPaymethods,
     paymethodSelected,
     handleSelectPaymethod,
     handleSelectWallet,
@@ -98,14 +97,14 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
             </PayCard>
           ))
         ) : (
-          businessPaymethods.result.filter(paymethod => paymethodsAndWallets.paymethods.find(item => item.id === paymethod.paymethod_id)).map(paymethod => (
+          paymethodsAndWallets.paymethods.map(paymethod => (
             <PayCard
               key={paymethod.id}
-              isActive={paymethodSelected?.paymethod_id === paymethod.paymethod_id}
-              onClick={() => handleSelectPaymethod(paymethod)}
+              isActive={paymethodSelected?.id === paymethod.id}
+              onClick={() => handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })}
             >
-              <div>{getPayIcon(paymethod.paymethod_id)}</div>
-              <p>{t(paymethod?.paymethod?.gateway.toUpperCase(), paymethod?.paymethod?.name)}</p>
+              <div>{getPayIcon(paymethod.id)}</div>
+              <p>{t(paymethod?.gateway.toUpperCase(), paymethod?.name)}</p>
             </PayCard>
           ))
         )}

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

@@ -59,7 +59,9 @@ const MultiCheckoutUI = (props) => {
     handleSelectPaymethod,
     handleSelectWallet,
     handlePaymethodDataChange,
-    onRedirectPage
+    onRedirectPage,
+    cartGroup,
+    cartUuid
   } = props
 
   const [, t] = useLanguage()
@@ -76,7 +78,7 @@ const MultiCheckoutUI = (props) => {
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(null)
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const maximumCarts = 5
-  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts
+  const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || openCarts.length > maximumCarts || (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data)
   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'
@@ -198,6 +200,7 @@ const MultiCheckoutUI = (props) => {
                   handleSelectPaymethod={handleSelectPaymethod}
                   handleSelectWallet={handleSelectWallet}
                   handlePaymethodDataChange={handlePaymethodDataChange}
+                  cartUuid={cartUuid}
                 />
               </PaymentMethodContainer>
 
@@ -265,7 +268,7 @@ const MultiCheckoutUI = (props) => {
             <WrapperPlaceOrderButton>
               <Button
                 color='primary'
-                disabled={isDisablePlaceOrderButton || placing}
+                disabled={isDisablePlaceOrderButton || placing || cartGroup?.loading}
                 onClick={handlePlaceOrder}
               >
                 {placing ? t('PLACING', 'Placing') : t('PLACE_ORDER', 'Place Order')}

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

@@ -5,7 +5,6 @@ import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { Alert } from '../Confirm'
 import { SingleOrderCard } from './SingleOrderCard'
-
 import {
   Container,
   HeaderContainer,
@@ -18,16 +17,19 @@ import {
   SingleOrderContainer,
   Divider
 } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
+import { useTheme } from 'styled-components'
 
 const MultiOrdersDetailsUI = (props) => {
   const {
     customer,
     paymentEvents,
-    ordersSummary
+    ordersSummary,
+    handleOrderRedirect
   } = props
 
   const { loading, orders, error } = props.ordersList
-
+  const theme = useTheme()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
@@ -52,96 +54,100 @@ const MultiOrdersDetailsUI = (props) => {
 
   return (
     <Container>
-      <HeaderContainer>
-        {loading ? (
-          <>
-            <Skeleton height={36} width={250} style={{ marginBottom: '6px' }} />
-            <Skeleton height={21} />
-          </>
-        ) : (
-          <>
-            <h1>
-              <span>{t('HEY', 'Hey')}</span>
-              <span className='name'>{customer?.name} {customer?.lastname}</span>
-            </h1>
-            <p>{t('ORDER_MESSAGE_HEADER_TEXT', 'Once business accepts your order, we will send you an email, thank you!')}</p>
-          </>
-        )}
-      </HeaderContainer>
+      {(orders?.length > 0 || loading) && (
+        <>
+          <HeaderContainer>
+            {loading ? (
+              <>
+                <Skeleton height={36} width={250} style={{ marginBottom: '6px' }} />
+                <Skeleton height={21} />
+              </>
+            ) : (
+              <>
+                <h1>
+                  <span>{t('HEY', 'Hey')}</span>
+                  <span className='name'>{customer?.name} {customer?.lastname}</span>
+                </h1>
+                <p>{t('ORDER_MESSAGE_HEADER_TEXT', 'Once business accepts your order, we will send you an email, thank you!')}</p>
+              </>
+            )}
+          </HeaderContainer>
 
-      {loading ? (
-        <Skeleton height={220} style={{ margin: '50px 0' }} />
-      ) : (
-        <CustomerInfoContainer>
-          <CustomerDetails>
-            <h3>{t('CUSTOMER_DETAILS', 'Customer details')}</h3>
-            <div>
-              <PhotoWrapper>
-                <Image
-                  src={customer?.photo}
-                  fallback={<FaUserAlt />}
-                />
-              </PhotoWrapper>
-              <CustomerData>
-                <p>{customer?.name} {customer?.lastname}</p>
-                <p>{customer?.email}</p>
-                <p>{customer?.cellphone || customer?.phone}</p>
-              </CustomerData>
-            </div>
-          </CustomerDetails>
-          <PaymentDetails>
-            <h3>{t('PAYMETHOD', 'Payment method')}</h3>
-            {paymentEvents.map(event => (
-              <p key={event.id}>
-                {event?.wallet_event
-                  ? walletName[event?.wallet_event?.wallet?.type]?.name
-                  : event?.paymethod?.name}
-              </p>
-            ))}
-            <h3 className='address'>{t('DELIVERYA_V21', 'Delivery address')}</h3>
-            <p>{customer?.address}</p>
-          </PaymentDetails>
-        </CustomerInfoContainer>
-      )}
+          {loading ? (
+            <Skeleton height={220} style={{ margin: '50px 0' }} />
+          ) : (
+            <CustomerInfoContainer>
+              <CustomerDetails>
+                <h3>{t('CUSTOMER_DETAILS', 'Customer details')}</h3>
+                <div>
+                  <PhotoWrapper>
+                    <Image
+                      src={customer?.photo}
+                      fallback={<FaUserAlt />}
+                    />
+                  </PhotoWrapper>
+                  <CustomerData>
+                    <p>{customer?.name} {customer?.lastname}</p>
+                    <p>{customer?.email}</p>
+                    <p>{customer?.cellphone || customer?.phone}</p>
+                  </CustomerData>
+                </div>
+              </CustomerDetails>
+              <PaymentDetails>
+                <h3>{t('PAYMETHOD', 'Payment method')}</h3>
+                {paymentEvents.map(event => (
+                  <p key={event.id}>
+                    {event?.wallet_event
+                      ? walletName[event?.wallet_event?.wallet?.type]?.name
+                      : event?.paymethod?.name}
+                  </p>
+                ))}
+                <h3 className='address'>{t('DELIVERYA_V21', 'Delivery address')}</h3>
+                <p>{customer?.address}</p>
+              </PaymentDetails>
+            </CustomerInfoContainer>
+          )}
 
-      {loading ? (
-        <Skeleton height={250} style={{ marginBottom: '50px' }} />
-      ) : (
-        <OrderSummary>
-          <h3>{t('ORDER_SUMMARY', 'Order summary')}</h3>
-          <table>
-            <tbody>
-              {orders.map(order => (
-                <tr key={order.id}>
-                  <td>{t('ORDER', 'Order')} #{order.id}</td>
-                  <td>{parsePrice(order?.summary?.total ?? order?.total)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          <Divider />
-          <table>
-            <tbody>
-              <tr>
-                <td>{t('TOTAL_BEFORE_TAX', 'Total before tax')}:</td>
-                <td>{parsePrice(ordersSummary?.subtotal)}</td>
-              </tr>
-              <tr>
-                <td>{t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:</td>
-                <td>{parsePrice(ordersSummary?.tax)}</td>
-              </tr>
-            </tbody>
-          </table>
-          <Divider />
-          <table>
-            <tbody>
-              <tr>
-                <td>{t('PAYMENT_TOTAL', 'Payment total')}:</td>
-                <td>{parsePrice(ordersSummary?.total)}</td>
-              </tr>
-            </tbody>
-          </table>
-        </OrderSummary>
+          {loading ? (
+            <Skeleton height={250} style={{ marginBottom: '50px' }} />
+          ) : (
+            <OrderSummary>
+              <h3>{t('ORDER_SUMMARY', 'Order summary')}</h3>
+              <table>
+                <tbody>
+                  {orders.map(order => (
+                    <tr key={order.id}>
+                      <td>{t('ORDER', 'Order')} #{order.id}</td>
+                      <td>{parsePrice(order?.summary?.total ?? order?.total)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              <Divider />
+              <table>
+                <tbody>
+                  <tr>
+                    <td>{t('TOTAL_BEFORE_TAX', 'Total before tax')}:</td>
+                    <td>{parsePrice(ordersSummary?.subtotal)}</td>
+                  </tr>
+                  <tr>
+                    <td>{t('ESTIMATED_TAX_TO_BE_COLLECTED', 'Estimated tax to be collected')}:</td>
+                    <td>{parsePrice(ordersSummary?.tax)}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <Divider />
+              <table>
+                <tbody>
+                  <tr>
+                    <td>{t('PAYMENT_TOTAL', 'Payment total')}:</td>
+                    <td>{parsePrice(ordersSummary?.total)}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </OrderSummary>
+          )}
+        </>
       )}
 
       {loading ? (
@@ -160,6 +166,19 @@ const MultiOrdersDetailsUI = (props) => {
           ))}
         </>
       )}
+      {!loading && (error || orders?.length === 0) && (
+        error?.includes('ERROR_ACCESS_EXPIRED') ? (
+          <NotFoundSource
+            content={t(error[0], 'Sorry, the order has expired.')}
+          />
+        ) : (
+          <NotFoundSource
+            content={t('NOT_FOUND_ORDER', theme?.defaultLanguages?.NOT_FOUND_ORDER || 'Sorry, we couldn\'t find the requested order.')}
+            btnTitle={t('ORDERS_REDIRECT', theme?.defaultLanguages?.ORDERS_REDIRECT || 'Go to Orders')}
+            onClickButton={handleOrderRedirect}
+          />
+        )
+      )}
       <Alert
         title={t('WEB_APPNAME', 'Ordering')}
         content={alertState.content}

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

@@ -76,7 +76,31 @@ const OrdersOptionUI = (props) => {
   const { width } = useWindowSize()
   const { loading, error, orders: values } = orderList
 
-  const orders = customArray || values || []
+  const _orders = customArray || values || []
+  const uniqueOrders = []
+  const orders = _orders.map(order => order?.cart_group_id
+    ? _orders
+      .filter(_order => _order?.cart_group_id === order?.cart_group_id)
+      ?.reduce((orderCompleted, currentOrder) => ({
+        ...orderCompleted,
+        total: orderCompleted.summary?.total + currentOrder?.summary?.total,
+        business: [orderCompleted.business, currentOrder.business].flat(),
+        business_id: [orderCompleted.business_id, currentOrder.business_id].flat(),
+        id: [orderCompleted.id, currentOrder.id].flat(),
+        review: orderCompleted.review && currentOrder.review,
+        user_review: orderCompleted.user_review && currentOrder.user_review,
+        products: [orderCompleted.products, currentOrder.products].flat()
+      }))
+    : order)
+    .filter(order => {
+      const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+      if (!isDuplicate) {
+        uniqueOrders.push(order?.cart_group_id)
+        return true
+      }
+      return false
+    })
+
   const isShowTitles = businessesIds
     ? orders && orders.length > 0 && !orders.map(order => businessesIds && businessesIds.includes(order.business_id)).every(i => !i)
     : orders.length > 0

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

@@ -148,8 +148,9 @@ export const PaymentCard = (props) => {
     handleDeleteCard,
     card,
     handleCardClick,
-    onSelectCard 
+    onSelectCard
   } = props
+
   const [, t] = useLanguage()
   const theme = useTheme()
   const [isShowActions, setIsShowActions] = useState(false)

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

@@ -17,10 +17,10 @@ import {
   LogoAndReviewWrapper,
   CommentsList,
   CommentButton,
-  ContinueContainer
+  ContinueContainer,
+  MultiLogosContainer
 } from './styles'
 import { Alert } from '../Confirm'
-
 import { TextArea } from '../../styles/Inputs'
 import { Button } from '../../styles/Buttons'
 import { useTheme } from 'styled-components'
@@ -128,8 +128,16 @@ const ReviewOrderUI = (props) => {
         <BeforeComponent key={i} {...props} />))}
       <>
         <LogoAndReviewWrapper>
-          <WrapperBusinessLogo>
-            {(order?.business?.logo || theme.images?.dummies?.businessLogo) && (
+          <WrapperBusinessLogo isMulti={order?.business?.length > 1}>
+            {order?.business?.length > 1 ? (
+              <MultiLogosContainer>
+                {order?.business?.map((business, i) => (
+                  <React.Fragment key={business?.id}>
+                    <BusinessLogo isMulti bgimage={optimizeImage(business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
+                  </React.Fragment>
+                ))}
+              </MultiLogosContainer>
+            ) : (
               <BusinessLogo bgimage={optimizeImage(order?.business?.logo || theme.images?.dummies?.businessLogo, 'h_200,c_limit')} />
             )}
           </WrapperBusinessLogo>

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

@@ -78,6 +78,10 @@ const BusinessLogoStyled = styled.div`
   @media (min-width: 481px){
     width: 100%;
     height: 100%;
+    ${({ isMulti }) => isMulti && css`
+      width: 124px;
+      height: 124px;
+    `}
     min-height: 124px;
   }
 `
@@ -101,6 +105,10 @@ export const WrapperBusinessLogo = styled.div`
   height: 124px;
   min-height: 124px;
   max-width: 124px;
+  ${({ isMulti }) => isMulti && css`
+    max-width: initial;
+    width: 100%;
+  `}
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
   border-radius: 7.6px;
 `
@@ -251,3 +259,8 @@ export const ContinueContainer = styled.div`
     flex: 1
   }
 `
+
+export const MultiLogosContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+`