ordering-ui-external 2.0.0 → 2.0.2

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

@@ -429,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>

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

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
-import { useTheme } from 'styled-components'
 import {
   useLanguage,
   useUtils,
@@ -66,7 +65,6 @@ const MultiCheckoutUI = (props) => {
     handleSearchRedirect
   } = props
 
-  const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
@@ -81,7 +79,7 @@ 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 = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -201,6 +199,7 @@ const MultiCheckoutUI = (props) => {
               <PaymentMethodContainer>
                 <h1>{t('PAYMENT_METHODS', 'Payment Methods')}</h1>
                 <MultiCartsPaymethodsAndWallets
+                  userId={props.userId}
                   openCarts={openCarts}
                   paymethodSelected={paymethodSelected}
                   handleSelectPaymethod={handleSelectPaymethod}
@@ -247,7 +246,7 @@ const MultiCheckoutUI = (props) => {
                   <Cart
                     isCartPending={cart?.status === 2}
                     cart={cart}
-                    isMultiCheckout={isMultiDriverTips}
+                    isMultiCheckout
                     isProducts={cart?.products?.length || 0}
                     hideDeliveryFee={configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'}
                     hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
@@ -262,7 +261,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,40 +42,10 @@ 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: !props.isMultiOrders })
@@ -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 => (
@@ -171,6 +183,7 @@ const MultiOrdersDetailsUI = (props) => {
               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/OrderDetails/index.js

@@ -74,7 +74,7 @@ import {
 import { useTheme } from 'styled-components'
 import { TaxInformation } from '../TaxInformation'
 
-import { getGoogleMapImage } from '../../../../../utils'
+import { getGoogleMapImage, getOrderStatus } from '../../../../../utils'
 import { OrderHistory } from './OrderHistory'
 import { ReviewProfessional } from '../ReviewProfessional'
 import { OrderActionsSection } from './OrderActionsSection'
@@ -148,40 +148,6 @@ const OrderDetailsUI = (props) => {
   const showCustomerEmail = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.email?.hidden
   const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
 
-  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 validTrackingStatus = [9, 19, 23]
   const mapConfigs = { zoom: 15 }
 

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

@@ -23,6 +23,7 @@ import {
   TimeWrapper,
   OrderProgressWrapper
 } from './styles'
+import { getOrderStatus } from '../../../../../utils'
 
 const OrderProgressUI = (props) => {
   const {
@@ -35,40 +36,6 @@ const OrderProgressUI = (props) => {
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
 
-  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 convertDiffToHours = (time) => {
     if (!time) return
     const deliveryTime = lastOrder?.delivery_datetime_utc

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

@@ -47,7 +47,7 @@ export const BusinessCategoryProductWrapper = styled.div`
     scrollbar-width: none;
   }
   @media (min-width: 1000px) {
-    width: ${({ showCartOnProductList }) => showCartOnProductList ? '70%' : '85%'};
+    width: 70%;
   }
 `
 

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

@@ -6,7 +6,7 @@ import { ReviewProduct } from '../ReviewProduct'
 import { ReviewDriver } from '../ReviewDriver'
 
 import { useTheme } from 'styled-components'
-import { getGoogleMapImage } from '../../../../../utils'
+import { getGoogleMapImage, getOrderStatus } from '../../../../../utils'
 import BsDot from '@meronex/icons/bs/BsDot'
 import { Button } from '../../styles/Buttons'
 import Skeleton from 'react-loading-skeleton'
@@ -33,7 +33,6 @@ import {
 const SingleOrderCardUI = (props) => {
   const {
     order,
-    getOrderStatus,
     isBusinessesPage,
     handleReorder,
     customArray,