ordering-ui-external 1.9.6 → 2.0.1

package/src/themes/callcenterOriginal/src/components/Orders/OrdersTable/index.js

@@ -309,7 +309,18 @@ export const OrdersTable = (props) => {
           {!isSelectedOrders && (
             <thead>
               <tr>
-                {allowColumns && Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
+                {allowColumns && (Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)?.length === 0 ?
+                (
+                  <th className='orderPrice' key={`noDragTh-${i}`}>
+                    <ColumnAllowSettingPopover
+                      allowColumns={allowColumns}
+                      optionsDefault={optionsDefault}
+                      handleChangeAllowColumns={handleChangeAllowColumns}
+                      isOrder
+                    />
+                  </th>
+                ) : (
+                  Object.keys(allowColumns).filter(col => allowColumns[col]?.visable && allowColumns[col]?.order !== 0)
                   .sort((col1, col2) => allowColumns[col1]?.order - allowColumns[col2]?.order)
                   .map((column, i, array) => {
                     if (column === 'slaBar') {
@@ -317,24 +328,36 @@ export const OrdersTable = (props) => {
                     }
                     if (column === 'orderNumber') {
                       return (
-                        <th
-                          className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
-                          key={`noDragTh-${i}`}
-                          colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
-                        >
-                          <CheckBox
-                            isChecked={!orderList.loading && isAllChecked}
-                            onClick={() => handleSelecteAllOrder()}
-                            className='orderCheckBox'
+                        <React.Fragment key={i}>
+                          <th
+                            className={!(allowColumns?.orderNumber?.visable || allowColumns?.dateTime?.visable) ? 'orderNo small' : 'orderNo'}
+                            key={`noDragTh-${i}`}
+                            colSpan={allowColumns?.slaBar?.visable ? 2 : 1}
                           >
-                            {(!orderList.loading && isAllChecked) ? (
-                              <RiCheckboxFill />
-                            ) : (
-                              <RiCheckboxBlankLine />
-                            )}
-                          </CheckBox>
-                          {t('ORDER', 'Order')}
-                        </th>
+                            <CheckBox
+                              isChecked={!orderList.loading && isAllChecked}
+                              onClick={() => handleSelecteAllOrder()}
+                              className='orderCheckBox'
+                            >
+                              {(!orderList.loading && isAllChecked) ? (
+                                <RiCheckboxFill />
+                              ) : (
+                                <RiCheckboxBlankLine />
+                              )}
+                            </CheckBox>
+                            {t('ORDER', 'Order')}
+                          </th>
+                          {column === [...array].pop() && (
+                            <th className='orderPrice' key={`noDragTh-${i}`}>
+                              <ColumnAllowSettingPopover
+                                allowColumns={allowColumns}
+                                optionsDefault={optionsDefault}
+                                handleChangeAllowColumns={handleChangeAllowColumns}
+                                isOrder
+                              />
+                            </th>
+                          )}
+                        </React.Fragment>
                       )
                     }
                     if (column === 'total' || (column !== 'total' && column === [...array].pop())) {
@@ -388,7 +411,8 @@ export const OrdersTable = (props) => {
                           <span>{allowColumns[column]?.title}</span>
                         </div>
                       </DragTh>)
-                  })}
+                  })
+                ))}
               </tr>
             </thead>
           )}

package/src/themes/callcenterOriginal/src/components/Orders/OrdersTable/styles.js

@@ -29,6 +29,7 @@ export const OrdersContainer = styled.div`
 export const Table = styled.table`
   width: calc(100% - 10px);
   min-width: 900px;
+  min-height: 35vh;
 
   th,
   td {

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

@@ -48,7 +48,8 @@ const BusinessProductsListUI = (props) => {
     subcategoriesSelected,
     onClickCategory,
     handleUpdateProducts,
-    isSearchMode
+    isSearchMode,
+    business
   } = props
 
   const [, t] = useLanguage()
@@ -193,7 +194,7 @@ const BusinessProductsListUI = (props) => {
                           productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                         />
                       ))}
-                      {!categoryState?.loading && categoryState?.products?.length > 9 && (
+                      {!business?.food && !categoryState?.loading && categoryState?.products?.length > 9 && (
                         <SingleProductCard
                           useCustomFunctionality
                           onCustomClick={() => onClickCategory(category)}
@@ -266,7 +267,7 @@ const BusinessProductsListUI = (props) => {
                       <ProductsListing isSubcategorySearch={isSubcategorySearch}>
                         {isSearchMode && category?.subcategories?.length > 0 ? (
                           <>
-                            {products?.filter((product, i) => i < 9 && product?.category_id === category?.id)?.map((product, i) => (
+                            {products?.filter((product, i) => (i < 9 && product?.category_id === category?.id) || business?.food)?.map((product, i) => (
                               <SingleProductCard
                                 key={i}
                                 isSoldOut={product.inventoried && !product.quantity}
@@ -279,7 +280,7 @@ const BusinessProductsListUI = (props) => {
                                 productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                               />
                             ))}
-                            {!categoryState?.loading && products?.length > 9 && (
+                            {!business?.food && !categoryState?.loading && products?.length > 9 && (
                               <SingleProductCard
                                 useCustomFunctionality
                                 onCustomClick={() => onClickCategory(category)}
@@ -296,7 +297,7 @@ const BusinessProductsListUI = (props) => {
                         ) : (
                           <>
                             {
-                              products.filter((_, i) => i < 9).map((product, i) => (
+                              products.filter((_, i) => i < 9 || business?.food).map((product, i) => (
                                 <SingleProductCard
                                   key={i}
                                   isSoldOut={product.inventoried && !product.quantity}
@@ -310,7 +311,7 @@ const BusinessProductsListUI = (props) => {
                                 />
                               ))
                             }
-                            {!categoryState?.loading && products?.length > 9 && (
+                            {!business?.food && !categoryState?.loading && products?.length > 9 && (
                               <SingleProductCard
                                 useCustomFunctionality
                                 onCustomClick={() => onClickCategory(category)}

package/src/themes/five/src/components/BusinessProductsList/layouts/groceries/index.js

@@ -119,7 +119,7 @@ const BusinessProductsListUI = (props) => {
                 )}
               </div>
               <ProductsListing>
-                {featProducts?.filter((p, index) => index < 9)?.map((product, i) => product.featured && (
+                {featProducts?.filter((p, index) => business?.food || index < 9)?.map((product, i) => product.featured && (
                   <SingleProductCard
                     key={i}
                     isSoldOut={(product?.inventoried && !product?.quantity)}
@@ -131,7 +131,7 @@ const BusinessProductsListUI = (props) => {
                     productAddedToCartLength={currentCart?.products?.reduce((productsLength, Cproduct) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                   />
                 ))}
-                {!categoryState?.loading && featProducts?.length > 9 && (
+                {!business?.food && !categoryState?.loading && featProducts?.length > 9 && (
                   <SingleProductCard
                     useCustomFunctionality
                     onCustomClick={() => onClickCategory(category)}
@@ -206,7 +206,7 @@ const BusinessProductsListUI = (props) => {
                     </div>
                     <ProductsListing>
                       {
-                        products.filter((p, index) => index < 9).map((product, i) => (
+                        products.filter((p, index) => index < 9 || business?.food).map((product, i) => (
                           <SingleProductCard
                             key={i}
                             isSoldOut={product?.inventoried && !product?.quantity}
@@ -219,7 +219,7 @@ const BusinessProductsListUI = (props) => {
                           />
                         ))
                       }
-                      {!categoryState?.loading && products?.length > 9 && (
+                      {!business?.food && !categoryState?.loading && products?.length > 9 && (
                         <SingleProductCard
                           useCustomFunctionality
                           onCustomClick={() => onClickCategory(category)}

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

@@ -391,7 +391,9 @@ const CartUI = (props) => {
                             )}
                             <IconContainer>
                               <BsInfoCircle size='20' color={theme.colors.primary} onClick={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })} />
-                              <MdCloseCircle size='24' color={theme.colors.primary} onClick={() => onRemoveOffer(offer?.id)} />
+                              {!offer?.type && (
+                                <MdCloseCircle size='24' color={theme.colors.primary} onClick={() => onRemoveOffer(offer?.id)} />
+                              )}
                             </IconContainer>
                           </td>
                           <td>
@@ -403,7 +405,7 @@ const CartUI = (props) => {
                     {orderState?.options?.type === 1 && cart?.delivery_price > 0 && !hideDeliveryFee && (
                       <tr>
                         <td>{t('DELIVERY_FEE', 'Delivery Fee')}</td>
-                        <td>{parsePrice(cart?.delivery_price_with_discount ?? cart?.delivery_price)}</td>
+                        <td>{parsePrice(cart?.delivery_price)}</td>
                       </tr>
                     )}
                     {
@@ -416,7 +418,9 @@ const CartUI = (props) => {
                             )}
                             <IconContainer>
                               <BsInfoCircle size='20' color={theme.colors.primary} onClick={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })} />
-                              <MdCloseCircle size='24' color={theme.colors.primary} onClick={() => onRemoveOffer(offer?.id)} />
+                              {!offer?.type && (
+                                <MdCloseCircle size='24' color={theme.colors.primary} onClick={() => onRemoveOffer(offer?.id)} />
+                              )}
                             </IconContainer>
                           </td>
                           <td>
@@ -425,6 +429,12 @@ const CartUI = (props) => {
                         </tr>
                       ))
                     }
+                    {orderState?.options?.type === 1 && cart?.delivery_price > 0 && cart?.delivery_price_with_discount >= 0 && !hideDeliveryFee && (
+                      <tr>
+                        <td>{t('DELIVERY_FEE_AFTER_DISCOUNT', 'Delivery Fee After Discount')}</td>
+                        <td>{parsePrice(cart?.delivery_price_with_discount)}</td>
+                      </tr>
+                    )}
                     {cart?.driver_tip > 0 && !hideDriverTip && (
                       <tr>
                         <td>
@@ -450,7 +460,8 @@ const CartUI = (props) => {
                   </CouponContainer>
                 )}
                 {
-                  isMultiCheckout &&
+                  !isStore &&
+                  !isMultiCheckout &&
                   cart &&
                   cart?.business_id &&
                   orderState?.options?.type === 1 &&

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

@@ -784,6 +784,8 @@ export const Checkout = (props) => {
   useEffect(() => {
     if (token && cartUuid) {
       getOrder(cartUuid)
+    } else {
+      setCartState({ ...cartState, loading: false })
     }
   }, [token, cartUuid])
 

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

@@ -10,7 +10,7 @@ import { AutoScroll } from '../AutoScroll'
 import { SingleProductCard } from '../SingleProductCard'
 import { useTheme } from 'styled-components'
 import { SingleOrderCard } from '../SingleOrderCard'
-import { checkSiteUrl } from '../../../../../utils'
+import { checkSiteUrl, getOrderStatus } from '../../../../../utils'
 import { SingleProfessionalCard } from '../SingleProfessionalCard'
 
 import {
@@ -71,40 +71,6 @@ const FavoriteListUI = (props) => {
     setPreorderBusiness(null)
   }
 
-  const getOrderStatus = (s) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const onRedirectPage = (data) => {
     events.emit('go_to_page', data)
   }

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

@@ -63,3 +63,5 @@ export const Footer = ({ isFooterPage }) => {
     </Container>
   )
 }
+
+export default Footer

package/src/themes/five/src/components/Header/layouts/Kiosk/index.js

@@ -178,3 +178,5 @@ export const Header = (props) => {
     </HeaderContainer>
   )
 }
+
+export default Header

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

@@ -5,6 +5,7 @@ import { useTheme } from 'styled-components'
 import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
 import { NotFoundSource } from '../../../../../components/NotFoundSource'
+import { getOrderStatus } from '../../../../../utils'
 
 import {
   MessagesListingContainer,
@@ -51,40 +52,6 @@ const OrdersListingUI = (props) => {
   const [events] = useEvent()
   const [{ parseDate, optimizeImage }] = useUtils()
 
-  const getOrderStatus = (s) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const handleOrderClick = (e, order) => {
     const isInvalid = e.target.closest('.view-details') || e.target.closest('.driver-selector')
     if (isInvalid) return

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

@@ -104,3 +104,5 @@ export const Modal = (props) => {
     <Popup {...ModalProps} />
   )
 }
+
+export default Modal

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

@@ -34,7 +34,7 @@ const getPayIcon = (method) => {
     case 1:
       return <Cash />
     case 22:
-      return <BilStripe />
+      return <CreditCard />
     case 28:
       return <FaCcStripe />
     case 31:

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
+import { useTheme } from 'styled-components'
 import {
   useLanguage,
   useUtils,
@@ -62,9 +63,11 @@ const MultiCheckoutUI = (props) => {
     onRedirectPage,
     cartGroup,
     cartUuid,
-    totalCartsFee
+    totalCartsFee,
+    handleSearchRedirect
   } = props
 
+  const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
@@ -80,8 +83,11 @@ const MultiCheckoutUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || (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 isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew' ||
+    theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
   const totalFeeEnabled = configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -159,9 +165,11 @@ const MultiCheckoutUI = (props) => {
 
   return (
     <>
-      {!cartGroup?.loading && openCarts.length === 0 ? (
+      {((!cartGroup?.loading && openCarts.length === 0) || !cartUuid) ? (
         <NotFoundSource
-          content={t('CARTS_NOT_FOUND', 'You don’t have carts available')}
+          content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
+          btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+          onClickButton={handleSearchRedirect}
         />
       ) : (
         <Container>
@@ -196,6 +204,7 @@ const MultiCheckoutUI = (props) => {
               <PaymentMethodContainer>
                 <h1>{t('PAYMENT_METHODS', 'Payment Methods')}</h1>
                 <MultiCartsPaymethodsAndWallets
+                  userId={props.userId}
                   openCarts={openCarts}
                   paymethodSelected={paymethodSelected}
                   handleSelectPaymethod={handleSelectPaymethod}
@@ -257,7 +266,7 @@ const MultiCheckoutUI = (props) => {
               )}
               {openCarts.length > 0 && (
                 <MultiCartPriceContainer totalFeeEnabled={totalFeeEnabled}>
-                  {totalCartsFee &&
+                  {!!totalCartsFee &&
                     configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' &&
                   (
                     <span>

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

@@ -3,7 +3,8 @@ import {
   useLanguage,
   useEvent,
   useUtils,
-  OrderDetails as OrderDetailsController
+  OrderDetails as OrderDetailsController,
+  useConfig
 } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import { Messages } from '../../../../../components/Messages'
@@ -30,7 +31,9 @@ const SingleOrderCardUI = (props) => {
     orderTypes,
     readMessages,
     messages,
-    setMessages
+    setMessages,
+    showProgressBar,
+    getOrderStatus
   } = props
 
   const { order } = props.order
@@ -39,43 +42,13 @@ const SingleOrderCardUI = (props) => {
   const [, t] = useLanguage()
   const [events] = useEvent()
   const [{ parsePrice, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
   const [openMessages, setOpenMessages] = useState({ business: false, driver: false })
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
-
-  const getOrderStatus = (s) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending'), slug: 'PENDING', percentage: 25 },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed'), slug: 'COMPLETED', percentage: 100 },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected'), slug: 'REJECTED', percentage: 0 },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business'), slug: 'DRIVER_IN_BUSINESS', percentage: 60 },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed'), slug: 'PREPARATION_COMPLETED', percentage: 70 },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business'), slug: 'REJECTED_BY_BUSINESS', percentage: 0 },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver'), slug: 'REJECTED_BY_DRIVER', percentage: 0 },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business'), slug: 'ACCEPTED_BY_BUSINESS', percentage: 35 },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver'), slug: 'ACCEPTED_BY_DRIVER', percentage: 45 },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver'), slug: 'PICK_UP_COMPLETED_BY_DRIVER', percentage: 80 },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver'), slug: 'PICK_UP_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver'), slug: 'DELIVERY_COMPLETED_BY_DRIVER', percentage: 100 },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver'), slug: 'DELIVERY_FAILED_BY_DRIVER', percentage: 0 },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder'), slug: 'PREORDER', percentage: 0 },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready'), slug: 'ORDER_NOT_READY', percentage: 65 },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer'), slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', percentage: 100 },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer'), slug: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER', percentage: 0 },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer'), slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER', percentage: 0 },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', percentage: 55 },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer'), slug: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', percentage: 90 },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', percentage: 90 },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', percentage: 95 },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', percentage: 35 },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', percentage: 45 }
-    ]
-    const objectStatus = orderStatus.find((o) => o.key === status)
-    return objectStatus && objectStatus
-  }
+  const hideIndividualButton = configs.multi_business_checkout_remove_individual_buttons?.value === '1'
 
   const handleGoToOrderDetails = (uuid) => {
-    events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: true })
+    events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: !props.isMultiOrders })
   }
 
   const handleOpenMessages = (data) => {
@@ -119,13 +92,15 @@ const SingleOrderCardUI = (props) => {
             </p>
           </div>
         </div>
-        <Button
-          outline
-          color='primary'
-          onClick={() => handleGoToOrderDetails(order?.uuid)}
-        >
-          {t('ORDER_DETAILS', 'Order Details')}
-        </Button>
+        {!hideIndividualButton && (
+          <Button
+            outline
+            color='primary'
+            onClick={() => handleGoToOrderDetails(order?.uuid)}
+          >
+            {t('ORDER_DETAILS', 'Order Details')}
+          </Button>
+        )}
       </SingleOrderHeader>
       <OrderBusinessDetails>
         <OrderBusinessWrapper>
@@ -155,8 +130,12 @@ const SingleOrderCardUI = (props) => {
           </MessagesIcon>
         </ActionsBlock>
       </OrderBusinessDetails>
-      <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
-      <p className='order-status'>{getOrderStatus(order?.status)?.value}</p>
+      {showProgressBar && (
+        <>
+          <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
+          <p className='order-status'>{getOrderStatus(order?.status)?.value}</p>
+        </>
+      )}
       <p className='order-total'>{t('EXPORT_ORDER_TOTAL', 'Order total')}: {parsePrice(order?.summary?.total ?? order?.total)}</p>
 
       {openMessages.business && (
@@ -164,7 +143,7 @@ const SingleOrderCardUI = (props) => {
           open={openMessages.business}
           onClose={() => setOpenMessages({ driver: false, business: false })}
           width='70%'
-          // padding='0'
+        // padding='0'
         >
           <Messages
             orderId={order?.id}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useUtils, MultiOrdersDetails as MultiOrdersDetailsController } from 'ordering-components-external'
+import { useLanguage, useUtils, MultiOrdersDetails as MultiOrdersDetailsController, useConfig } from 'ordering-components-external'
 import { Image } from '../../../../../components/Image'
 import Skeleton from 'react-loading-skeleton'
 import FaUserAlt from '@meronex/icons/fa/FaUserAlt'
@@ -15,7 +15,9 @@ import {
   PhotoWrapper,
   OrderSummary,
   SingleOrderContainer,
-  Divider
+  Divider,
+  StatusBar,
+  StatusBarContainer
 } from './styles'
 import { NotFoundSource } from '../NotFoundSource'
 import { useTheme } from 'styled-components'
@@ -33,7 +35,11 @@ const MultiOrdersDetailsUI = (props) => {
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ parsePrice }] = useUtils()
+  const [{ configs }] = useConfig()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
+  const showBarInOrder = ['group', 'both']
+  const showBarInIndividual = ['individual', 'both']
 
   const isTaxIncludedOnPrice = orders.every(_order => _order.taxes?.length ? _order.taxes?.every(_tax => _tax.type === 1) : true)
 
@@ -116,6 +122,12 @@ const MultiOrdersDetailsUI = (props) => {
           ) : (
             <OrderSummary>
               <h3>{t('ORDER_SUMMARY', 'Order summary')}</h3>
+              {(showBarInOrder.includes(progressBarStyle)) && (
+                <StatusBarContainer>
+                  <StatusBar percentage={getOrderStatus(orders[0]?.status)?.percentage} />
+                  <p className='order-status'>{getOrderStatus(orders[0]?.status)?.value}</p>
+                </StatusBarContainer>
+              )}
               <table>
                 <tbody>
                   {orders.map(order => (
@@ -168,8 +180,10 @@ const MultiOrdersDetailsUI = (props) => {
           {orders.map(order => (
             <SingleOrderCard
               key={order.id}
+              isMultiOrders
               getOrderStatus={getOrderStatus}
               order={order}
+              showProgressBar={showBarInIndividual.includes(progressBarStyle)}
             />
           ))}
         </>

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

@@ -262,3 +262,11 @@ export const ExclamationWrapper = styled.div`
     color: ${props => props.theme?.colors?.primary}
   }
 `
+
+export const StatusBarContainer = styled.div`
+  margin-top: 10px;
+  p {
+    font-weight: 500;
+    margin-top: 0;
+  }
+`

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

@@ -216,3 +216,5 @@ export const NavigationBar = () => {
     </>
   )
 }
+
+export default NavigationBar

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

@@ -61,3 +61,5 @@ export const NotNetworkConnectivity = (props) => {
     </>
   )
 }
+
+export default NotNetworkConnectivity