ordering-ui-external 1.8.7 → 1.8.9

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/PhoneAutocomplete/index.js

@@ -86,6 +86,7 @@ const PhoneAutocompleteUI = (props) => {
     }
     if (!inputValue) {
       setInputValue(inputValue)
+      onChangeNumber(inputValue)
     }
     if ((inputValue && inputValue.length > 10) || !(/^[0-9]+$/.test(inputValue))) {
       return
@@ -95,6 +96,7 @@ const PhoneAutocompleteUI = (props) => {
   }
 
   const onChange = (option) => {
+    if (!option) { onChangeNumber('') }
     setOptSelected(option)
     setInputValue(option ? option?.value : '')
     const user = customersPhones.users?.find(user => user.cellphone === option?.value || user.phone === option?.value)

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

@@ -36,7 +36,8 @@ const PlaceSpotUI = (props) => {
     setVehicle,
     setSpotState,
     handleChangeSpot,
-    setHasBusinessPlaces
+    setHasBusinessPlaces,
+    setPlaceSpotNumber
   } = props
 
   const el = useRef()
@@ -92,6 +93,7 @@ const PlaceSpotUI = (props) => {
       let spotNumber = parseFloat(e?.target?.value)
       spotNumber = isNaN(spotNumber) ? null : spotNumber
       setSpotNumber(spotNumber)
+      setPlaceSpotNumber(spotNumber)
     }
   }
 

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

@@ -508,6 +508,7 @@ export const Properties = styled.div`
 export const ProductDescription = styled.p`
   margin-top: 0px;
   white-space: pre-wrap;
+  color: #909BA9;
 `
 export const PriceContent = styled.div`
   display: flex;

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

@@ -147,7 +147,6 @@ export const SuboptionPrice = styled.div`
   color: ${props => props.theme.colors.darkGray};
   margin-left: 5px;
   min-width: 60px;
-  max-width: 60px;
   ${props => props.theme?.rtl && css`
     margin-right: 5px;
     margin-left: 0px;

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;
+`

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage, ReviewProduct as ReviewProductController } from 'ordering-components-external'
 import { useForm } from 'react-hook-form'
-
 import {
   ReviewProductContainer,
   ActionBlock,
@@ -15,7 +14,7 @@ import {
   Comments,
   CommentsList,
   WrapperProductLogo,
-  ProductLogo,
+  ProductLogo
 } from './styles'
 import AiOutlineLike from '@meronex/icons/ai/AiOutlineLike'
 import AiOutlineDislike from '@meronex/icons/ai/AiOutlineDislike'
@@ -91,12 +90,12 @@ const SingleProductReview = (props) => {
 
   return (
     <SingleProductReviewContainer>
-        {(product?.images || theme.images?.dummies?.businessLogo) && (
-          <WrapperProductLogo>
-                  <ProductLogo bgimage={product?.images || theme.images?.dummies?.businessLogo} />
-          </WrapperProductLogo>
-        )}
-        <HandReviewWrapper>
+      {(product?.images || theme.images?.dummies?.businessLogo) && (
+        <WrapperProductLogo>
+          <ProductLogo bgimage={product?.images || theme.images?.dummies?.businessLogo} />
+        </WrapperProductLogo>
+      )}
+      <HandReviewWrapper>
         <p>{product?.name}</p>
         <HandReviewContent>
           <HandIconWrapper onClick={() => setIsLike(true)} active={isLike}>