ordering-ui-external 2.4.6 → 2.5.1

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/index.js

@@ -4,12 +4,15 @@ import Skeleton from 'react-loading-skeleton'
 import { Button } from '../../../styles/Buttons'
 import RiRadioButtonFill from '@meronex/icons/ri/RiRadioButtonFill'
 import MdRadioButtonUnchecked from '@meronex/icons/md/MdRadioButtonUnchecked'
+import { NotFoundSource } from '../../NotFoundSource'
 
 import {
   Container,
   GiftCardsListContainer,
+  GiftCardsWrapper,
   GiftCardItem,
-  IconControl
+  IconControl,
+  ActionButtonContainer
 } from './styles'
 
 const PurchaseGiftCardUI = (props) => {
@@ -24,39 +27,46 @@ const PurchaseGiftCardUI = (props) => {
   return (
     <Container>
       <h2>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</h2>
-      <p>{t('SELECT_ONE_OPTION', 'Select one option')}</p>
       <GiftCardsListContainer>
-        {productsListState.loading && (
-          [...Array(5).keys()].map(i => (
-            <GiftCardItem key={i}>
-              <Skeleton width={150} />
+        <p>{t('SELECT_ONE_OPTION', 'Select one option')}</p>
+        <GiftCardsWrapper>
+          {productsListState.loading && (
+            [...Array(5).keys()].map(i => (
+              <GiftCardItem key={i}>
+                <Skeleton width={150} />
+              </GiftCardItem>
+            ))
+          )}
+          {productsListState.products.map(product => (
+            <GiftCardItem
+              key={product.id}
+              onClick={() => setSelectedProduct(product)}
+            >
+              <IconControl>
+                {selectedProduct?.id === product.id ? (
+                  <RiRadioButtonFill />
+                ) : (
+                  <MdRadioButtonUnchecked disabled />
+                )}
+              </IconControl>
+              <span>{product.name}</span>
             </GiftCardItem>
-          ))
-        )}
-        {productsListState.products.map(product => (
-          <GiftCardItem
-            key={product.id}
-            onClick={() => setSelectedProduct(product)}
-          >
-            <IconControl>
-              {selectedProduct?.id === product.id ? (
-                <RiRadioButtonFill />
-              ) : (
-                <MdRadioButtonUnchecked disabled />
-              )}
-            </IconControl>
-            <span>{product.name}</span>
-          </GiftCardItem>
-        ))}
+          ))}
+          {!productsListState.loading && productsListState.products.length === 0 && (
+            <NotFoundSource />
+          )}
+        </GiftCardsWrapper>
       </GiftCardsListContainer>
-      <Button
-        type='button'
-        color='primary'
-        disabled={!selectedProduct}
-        onClick={() => handleAccept()}
-      >
-        {t('ACCEPT', 'Accept')}
-      </Button>
+      <ActionButtonContainer>
+        <Button
+          type='button'
+          color='primary'
+          disabled={!selectedProduct}
+          onClick={() => handleAccept()}
+        >
+          {t('ACCEPT', 'Accept')}
+        </Button>
+      </ActionButtonContainer>
     </Container>
   )
 }

package/src/themes/five/src/components/GiftCard/PurchaseGiftCard/styles.js

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components'
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
+  padding-top: 30px;
 
   h2 {
     font-size: 24px;
@@ -16,12 +17,12 @@ export const Container = styled.div`
     line-height: 24px;
     margin-top: 0;
   }
-  > button {
-    height: 44px;
-  }
 `
 export const GiftCardsListContainer = styled.div`
-  margin-bottom: 40px;
+  padding: 30px 20px;
+`
+export const GiftCardsWrapper = styled.div`
+  margin-bottom: 10px;
 `
 export const GiftCardItem = styled.div`
   cursor: pointer;
@@ -50,3 +51,13 @@ export const IconControl = styled.div`
     color: ${props => props.theme.colors.lightGray};
   }
 `
+export const ActionButtonContainer = styled.div`
+  position: sticky;
+  bottom: 0px;
+  background-color: ${props => props.theme.colors.backgroundPage};
+  padding: 15px 20px;
+  > button {
+    height: 44px;
+    width: 100%;
+  }
+`

package/src/themes/five/src/components/GiftCard/RedeemGiftCard/index.js

@@ -98,8 +98,8 @@ const RedeemGiftCardUI = (props) => {
             <p>{t('TYPE', 'Type')}: {redeemedGiftCard?.type}</p>
             <p>{t('AMOUNT', 'Amount')}: {parsePrice(redeemedGiftCard?.amount)}</p>
             <p>{t('FROM', 'From')}: {redeemedGiftCard?.receiver?.name} {redeemedGiftCard?.receiver?.lastname}</p>
-            <p>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</p>
-            <p>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</p>
+            {redeemedGiftCard?.title && <p>{t('TITLE', 'Title')}: {redeemedGiftCard?.title}</p>}
+            {redeemedGiftCard?.message && <p>{t('MESSAGES', 'Messages')}: {redeemedGiftCard?.message}</p>}
             <Button
               color='primary'
               onClick={() => onClose()}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useOrderingTheme } from 'ordering-components-external'
+import { useSession, useLanguage, useOrder, useEvent, useConfig, useCustomer, useUtils, useOrderingTheme, useBusiness } from 'ordering-components-external'
 import { useTheme } from 'styled-components'
 import AiOutlineClose from '@meronex/icons/ai/AiOutlineClose'
 import { LanguageSelector } from '../../../../../components/LanguageSelector'
@@ -47,7 +47,7 @@ import { Confirm } from '../Confirm'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
-import { getDistance } from '../../../../../utils'
+import { getDistance, getCateringValues } from '../../../../../utils'
 import { BusinessPreorder } from '../BusinessPreorder'
 import { SearchBar } from '../SearchBar'
 
@@ -73,6 +73,7 @@ export const Header = (props) => {
   const [configState] = useConfig()
   const [customerState, { deleteUserCustomer }] = useCustomer()
   const [orderingTheme] = useOrderingTheme()
+  const [{ business }] = useBusiness()
 
   const clearCustomer = useRef(null)
   const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -93,11 +94,18 @@ export const Header = (props) => {
 
   const userCustomer = JSON.parse(window.localStorage.getItem('user-customer'))
 
-  const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru')]
+  const orderTypeList = [t('DELIVERY', 'Delivery'), t('PICKUP', 'Pickup'), t('EAT_IN', 'Eat in'), t('CURBSIDE', 'Curbside'), t('DRIVE_THRU', 'Drive thru'), '', t('CATERING_DELIVERY', 'Catering Delivery'), t('CATERING_PICKUP', 'Catering pickup')]
   const configTypes = configState?.configs?.order_types_allowed?.value.split('|').map(value => Number(value)) || []
   const isPreOrderSetting = configState?.configs?.preorder_status_enabled?.value === '1'
   const isChew = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const isHideLanguages = theme?.header?.components?.language_selector?.hidden
+  const cateringTypeString = orderState?.options?.type === 7
+    ? 'catering_delivery'
+    : orderState?.options?.type === 8
+      ? 'catering_pickup'
+      : null
+
+  const cateringValues = getCateringValues(cateringTypeString, pathname.includes('store') && Object?.keys(business || {})?.length > 0 ? business?.configs : configState?.configs)
 
   const handleSuccessSignup = (user) => {
     login({
@@ -225,12 +233,12 @@ export const Header = (props) => {
               isChew={isChew}
             >
               <img alt='Logotype' width='170px' height={isChew ? '35px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.logotype} loading='lazy' />
-              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || (isHome ? theme?.images?.logos?.isotypeInvert : theme?.images?.logos?.isotype)} loading='lazy' />
+              <img alt='Isotype' width={isChew ? '70px' : '35px'} height={isChew ? '20px' : '45px'} src={isChew ? theme?.images?.logos?.chewLogo : (isHome && windowSize.width < 576 ? theme?.images?.logos?.isotypeInvert : orderingTheme?.theme?.my_products?.components?.images?.components?.logo?.components?.image || theme?.images?.logos?.isotype)} loading='lazy' />
             </LogoHeader>
           </LeftHeader>
           {isShowOrderOptions && !props.isCustomLayout && windowSize.width >= 576 && (
             <Menu id='center-side' className='left-header' isCustomerMode={isCustomerMode} isChew={isChew}>
-              {windowSize.width > 820 && isFarAway && (
+              {windowSize.width > 850 && isFarAway && (
                 <FarAwayMessage>
                   <TiWarningOutline />
                   <span>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</span>
@@ -484,6 +492,10 @@ export const Header = (props) => {
           {modalSelected === 'moment' && (
             <MomentContent
               onClose={() => setModalIsOpen(false)}
+              cateringPreorder={!!cateringTypeString}
+              isHeader
+              business={pathname.includes('store') && business}
+              {...cateringValues}
             />
           )}
           {modalSelected === 'delivery' && (

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

@@ -62,6 +62,10 @@ export const LogoHeader = styled.div`
       margin-left: 0;
     `}
     @media (min-width: 769px) {
+      ${({ theme }) =>
+      ['center', 'right']?.includes(theme?.header?.components?.logo?.components?.layout?.position) && css`
+        margin-right: 30px;
+      `};
       width: ${props => props.imgW ?? '150px'};
       height: ${props => props.isChew && '35px'};
     }
@@ -101,7 +105,6 @@ export const Menu = styled.div`
   display: flex;
   align-items: center;
   margin-right: 10px;
-
   #select-input {
     border-radius: 7.6px;
     #list {
@@ -137,7 +140,7 @@ export const Menu = styled.div`
     justify-content: center;
     position: relative;
     height: 44px;
-    @media (min-width: 821px) {
+    @media (min-width: 850px) {
       border: 1px solid #DEE2E6;
       justify-content: space-between;
     }
@@ -195,7 +198,7 @@ export const Menu = styled.div`
       padding: 0 20px;
     }
   }
-  @media (min-width: 821px) {
+  @media (min-width: 850px) {
     .moment-popover,
     .address-popover {
       display: flex;
@@ -233,7 +236,7 @@ export const SubMenu = styled(InnerHeader)`
   box-sizing: border-box;
   margin: 0px;
   position: relative;
-  @media (min-width: 821px) {
+  @media (min-width: 850px) {
     display: none;
   }
 `
@@ -326,7 +329,7 @@ export const MomentMenu = styled.div`
   width: 200px;
   display: none;
   
-  @media (min-width: 821px) {
+  @media (min-width: 850px) {
     display: flex;
   }
   @media (min-width: 1175px) {
@@ -455,7 +458,7 @@ export const LeftSide = styled.div`
   width: 100%;
   @media (min-width: 769px){
     flex-direction: ${({ theme }) =>
-    theme?.header?.components?.logo?.components?.layout?.position === 'center' ? 'row-reverse' : 'row'};
+    ['center', 'right']?.includes(theme?.header?.components?.logo?.components?.layout?.position) ? 'row-reverse' : 'row'};
     width: 60%;
   }
 `

package/src/themes/five/src/components/HomeHero/layouts/OriginalHomeHero/index.js

@@ -115,7 +115,7 @@ export const OriginalHomeHero = (props) => {
       <ContentWrapper>
         {windowSize.width < 576 && !isChew && (
           <LogoWrapper>
-            <img alt='Logotype' src={logo || theme?.images?.logos?.logotypeInvert} loading='lazy' />
+            <img alt='Logotype' src={theme?.images?.logos?.logotypeInvert} loading='lazy' />
           </LogoWrapper>
         )}
         <HeroContent>

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   useLanguage,
   useConfig,
@@ -28,6 +28,8 @@ import {
   SectionLeft,
   SectionLeftText
 } from './styles'
+import { StripeElementsForm } from '../StripeElementsForm'
+import Modal from '../Modal'
 
 const stripeOptions = ['stripe_direct', 'stripe', 'stripe_connect']
 
@@ -72,17 +74,21 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
     handlePaymethodDataChange,
     setCardList,
     walletsPaymethod,
-    isCustomerMode
+    isCustomerMode,
+    handlePlaceOrder,
+    cartGroup
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
+  const [openPaymethod, setOpenPaymethod] = useState(null)
 
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
-
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
   const walletName = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -109,7 +115,10 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
               {(!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
                 <PayCard
                   isActive={paymethodSelected?.id === paymethod.id}
-                  onClick={() => handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })}
+                  onClick={() => {
+                    handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })
+                    setOpenPaymethod(paymethod)
+                  }}
                 >
                   <div>{getPayIcon(paymethod.id)}</div>
                   <p>{t(paymethod?.gateway.toUpperCase(), paymethod?.name)}</p>
@@ -161,57 +170,80 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
               {walletsState?.result?.filter(wallet =>
                 paymethodsAndWallets.wallets.find(item => item.type === wallet.type))
                 .map((wallet, idx) => walletName[wallet.type]?.isActive &&
-              (
-                <WalletOptionContainer
-                  key={wallet.type}
-                  isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
-                >
-                  <SectionLeft>
-                    <Checkbox
-                      name={`payment_option_${wallet.type}`}
-                      id={`custom-checkbox-${idx}`}
-                      disabled={
-                        (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
-                        wallet.balance === 0
-                      }
-                      value={`payment_option_${wallet.type}`}
-                      checked={!!walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id}
-                      onChange={() => handleSelectWallet(
-                        !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id,
-                        wallet
-                      )}
-                    />
-                    <SectionLeftText>
-                      <label
-                        style={{
-                          color: (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
-                            wallet.balance === 0 ? theme.colors.darkGray : 'black'
-                        }}
-                        htmlFor={`custom-checkbox-${idx}`}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </label>
-                    </SectionLeftText>
-                  </SectionLeft>
-                  <div>
-                    {wallet.type === 'cash' && (
-                      <span>{parsePrice(wallet?.balance, { isTruncable: true })}</span>
-                    )}
-                    {wallet.type === 'credit_point' && (
-                      <span>
-                        <span style={{ color: theme.colors.primary }}>
-                          {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                        </span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate, { isTruncable: true })}`}
-                      </span>
-                    )}
-                  </div>
-                </WalletOptionContainer>
-              ))}
+                  (
+                    <WalletOptionContainer
+                      key={wallet.type}
+                      isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+                    >
+                      <SectionLeft>
+                        <Checkbox
+                          name={`payment_option_${wallet.type}`}
+                          id={`custom-checkbox-${idx}`}
+                          disabled={
+                            (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
+                            wallet.balance === 0
+                          }
+                          value={`payment_option_${wallet.type}`}
+                          checked={!!walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id}
+                          onChange={() => handleSelectWallet(
+                            !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id,
+                            wallet
+                          )}
+                        />
+                        <SectionLeftText>
+                          <label
+                            style={{
+                              color: (balance === 0 && !walletsPaymethod?.find(walletPay => walletPay.wallet_id === wallet.id)?.id) ||
+                                wallet.balance === 0 ? theme.colors.darkGray : 'black'
+                            }}
+                            htmlFor={`custom-checkbox-${idx}`}
+                          >
+                            {walletName[wallet.type]?.name}
+                          </label>
+                        </SectionLeftText>
+                      </SectionLeft>
+                      <div>
+                        {wallet.type === 'cash' && (
+                          <span>{parsePrice(wallet?.balance, { isTruncable: true })}</span>
+                        )}
+                        {wallet.type === 'credit_point' && (
+                          <span>
+                            <span style={{ color: theme.colors.primary }}>
+                              {`${wallet?.balance} ${t('POINTS', 'Points')}`}
+                            </span> {wallet?.balance > 0 && `= ${parsePrice(wallet?.balance / wallet?.redemption_rate, { isTruncable: true })}`}
+                          </span>
+                        )}
+                      </div>
+                    </WalletOptionContainer>
+                  ))}
             </>
           )}
         </WalletPaymentOptionContainer>
       )}
-
+      {/* Stripe direct, Google pay, Apple pay */}
+      <Modal
+        title={t('ADD_CARD', 'Add card')}
+        open={stripeDirectMethods?.includes(openPaymethod?.gateway) && !paymethodSelected?.paymethod_data?.id}
+        className='modal-info'
+        onClose={() => setOpenPaymethod(null)}
+      >
+        {!paymethodSelected?.data?.publishable &&
+          <Container>
+            <p>{t('ADD_PUBLISHABLE_KEY', 'Please add a publishable key')}</p>
+          </Container>}
+        {paymethodSelected?.data?.publishable && stripeDirectMethods?.includes(paymethodSelected?.paymethod?.gateway) && (
+          <StripeElementsForm
+            methodsPay={methodsPay}
+            paymethod={paymethodSelected?.paymethod?.gateway}
+            businessId={props.businessId}
+            cartGroup={cartGroup?.result}
+            publicKey={paymethodSelected?.data?.publishable || paymethodSelected?.data?.publishable_key}
+            handleSource={handlePaymethodDataChange}
+            onCancel={() => setOpenPaymethod(null)}
+            handlePlaceOrder={handlePlaceOrder}
+          />
+        )}
+      </Modal>
     </Container>
   )
 }

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

@@ -101,10 +101,18 @@ const MultiCheckoutUI = (props) => {
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
+  const methodsPay = ['global_google_pay', 'global_apple_pay']
   const creditPointPlan = loyaltyPlansState?.result?.find((loyal) => loyal.type === 'credit_point')
   const businessIds = openCarts.map((cart) => cart.business_id)
   const loyalBusinessIds = creditPointPlan?.businesses?.filter((b) => b.accumulates).map((item) => item.business_id) ?? []
   const creditPointPlanOnBusiness = businessIds.every((bid) => loyalBusinessIds.includes(bid)) && creditPointPlan
+  const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal) => loyal.type === 'credit_point')
+  const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b) => b.accumulates) ?? []
+
+  const accumulationRateBusiness = (businessId) => {
+    const value = loyalBusinessAvailable?.find((loyal) => loyal.business_id === businessId)?.accumulation_rate ?? 0
+    return value || (creditPointGeneralPlan?.accumulation_rate ?? 0)
+  }
 
   const getIncludedTaxes = (cart) => {
     if (cart?.taxes === null || !cart?.taxes) {
@@ -116,12 +124,8 @@ const MultiCheckoutUI = (props) => {
     }
   }
 
-  const subtotalAmount = openCarts.reduce((sum, cart) => sum + (cart?.subtotal + getIncludedTaxes(cart)), 0) *
-    creditPointPlanOnBusiness?.accumulation_rate
-
-  const loyaltyRewardValue = (creditPointPlanOnBusiness?.accumulation_rate
-    ? (Math.trunc(subtotalAmount * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2)
-    : 0)
+  const clearAmount = (value) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
+  const loyaltyRewardValue = openCarts.reduce((sum, cart) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
@@ -210,6 +214,15 @@ const MultiCheckoutUI = (props) => {
     }
   }, [walletState.error])
 
+  useEffect(() => {
+    if (methodsPay.includes(paymethodSelected?.paymethod?.gateway) && typeof paymethodSelected?.paymethod_data === 'string') {
+      const hasSource = JSON.parse(paymethodSelected?.paymethod_data)?.source_id
+      if (hasSource) {
+        handlePlaceOrder()
+      }
+    }
+  }, [paymethodSelected])
+
   return (
     <>
       {((!cartGroup?.loading && openCarts.length === 0) || !cartUuid) ? (
@@ -261,7 +274,9 @@ const MultiCheckoutUI = (props) => {
                   handlePaymethodDataChange={handlePaymethodDataChange}
                   cartUuid={cartUuid}
                   isCustomerMode={isCustomerMode}
+                  cartGroup={cartGroup}
                   setCardList={setCardList}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </PaymentMethodContainer>
 

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

@@ -12,6 +12,7 @@ import AiFillExclamationCircle from '@meronex/icons/ai/AiFillExclamationCircle'
 import { Phone, Chat } from 'react-bootstrap-icons'
 import { Button } from '../../styles/Buttons'
 import { Modal } from '../Modal'
+import { OrderEta } from '../OrderDetails/OrderEta'
 
 import {
   SingleOrderContainer,
@@ -47,6 +48,8 @@ const SingleOrderCardUI = (props) => {
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const hideIndividualButton = configs.multi_business_checkout_remove_individual_buttons?.value === '1'
 
+  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+
   const handleGoToOrderDetails = (uuid) => {
     events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: !props.isMultiOrders })
   }
@@ -84,11 +87,11 @@ const SingleOrderCardUI = (props) => {
               {orderTypes?.find(type => order?.delivery_type === type?.value)?.text}:
             </p>
             <p className='date'>
-              {
-                order?.delivery_datetime_utc
-                  ? parseDate(order?.delivery_datetime_utc)
-                  : parseDate(order?.delivery_datetime, { utc: false })
-              }
+              {activeStatus.includes(order?.status) ? (
+                <OrderEta order={order} />
+              ) : (
+                parseDate(order?.reporting_data?.at[`status:${order.status}`])
+              )}
             </p>
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useLanguage, useOrderingTheme } from 'ordering-components-external'
+import { useLanguage } from 'ordering-components-external'
 import { ProfileOptions } from '../../../../../components/UserProfileForm/ProfileOptions'
 import { OrdersOption } from '../OrdersOption'
 import { Button } from '../../styles/Buttons'
@@ -13,19 +13,20 @@ import {
   MyOrdersMenuContainer
 } from './styles'
 import { Tab, Tabs } from '../../styles/Tabs'
+import { useTheme } from 'styled-components'
 
 export const MyOrders = (props) => {
   const {
     hideOrders,
+    isFromBusinessListingSearch,
     businessesSearchList,
     onProductRedirect
   } = props
 
   const [, t] = useLanguage()
   const history = useHistory()
-
-  const [orderingTheme] = useOrderingTheme()
-  const layout = orderingTheme?.theme?.orders?.components?.layout?.type || 'original'
+  const theme = useTheme()
+  const layout = theme?.orders?.components?.layout?.type || 'original'
 
   const [isEmptyActive, setIsEmptyActive] = useState(false)
   const [isEmptyPast, setIsEmptyPast] = useState(false)
@@ -34,10 +35,13 @@ export const MyOrders = (props) => {
   const [isEmptyBusinesses, setIsEmptyBusinesses] = useState(false)
   const [businessOrderIds, setBusinessOrderIds] = useState([])
 
+  const hideProductsTab = theme?.orders?.components?.products_tab?.hidden
+  const hideBusinessTab = theme?.orders?.components?.business_tab?.hidden
+
   const MyOrdersMenu = [
-    { key: 'orders', value: t('ORDERS', 'Orders') },
-    { key: 'business', value: t('BUSINESS', 'Business') },
-    { key: 'products', value: t('PRODUCTS', 'Products') }
+    { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false},
+    { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
+    { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
   ]
 
   const notOrderOptions = ['business', 'products', 'professionals']
@@ -54,14 +58,14 @@ export const MyOrders = (props) => {
       {hideOrders && !allEmpty && (
         <h2>{t('PREVIOUSLY_ORDERED', 'Previously ordered')}</h2>
       )}
-      <Container hideOrders={hideOrders}>
+      <Container hideOrders={hideOrders} initialHeight={isFromBusinessListingSearch}>
         {!hideOrders && (
           <h1>{layout === 'appointments' ? t('MY_APPOINTMENTS', 'My appointments') : t('MY_ORDERS', 'My orders')}</h1>
         )}
         {!allEmpty && (
           <MyOrdersMenuContainer className='category-lists'>
             <Tabs variant='primary'>
-              {MyOrdersMenu.filter(option => !hideOrders || option.key !== 'orders').map(option => (
+              {MyOrdersMenu.filter(option => (!hideOrders || option.key !== 'orders') && !option.disabled).map(option => (
                 <Tab
                   key={option.key}
                   onClick={() => setSelectedOption(option.key)}

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

@@ -7,7 +7,9 @@ export const Container = styled.div`
   width: 100%;
   box-sizing: border-box;
   position: relative;
-  min-height: calc(100vh - 320px);
+  ${({ initialHeight }) => !initialHeight && css`
+    min-height: calc(100vh - 320px);
+  `}
 
   > h1 {
     font-weight: 600;