ordering-ui-external 2.4.5 → 2.5.0

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

@@ -319,10 +319,16 @@ export const MobileWrapperPlaceOrderButton = styled.div`
 export const OrderContextUIWrapper = styled.div`
   flex: 1;
   margin-left: 15px;
+  max-width: 85%;
+
   ${props => props.theme.rtl && css`
     margin-left: 0px;
     margin-right: 15px;
   `}
+
+  @media (min-width: 480px) {
+    max-width: 90%;
+  }
 `
 
 export const HeaderContent = styled.div`
@@ -349,3 +355,19 @@ export const AuthButtonList = styled.div`
     margin-top: 22px;
   }
 `
+export const Flag = styled.span`
+  font-size: 13px;
+  margin: 0px;
+  text-transform: capitalize;
+  color: #E63757;
+  font-weight: 500;
+
+  @media (min-width: 381px) {
+    font-size: 14px;
+  }
+`
+export const SectionTitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`

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

@@ -40,6 +40,7 @@ export const GiftCardUI = (props) => {
       </ActionWrapper>
       <Modal
         width='700px'
+        padding='0px'
         open={openModal === 'purchase'}
         onClose={() => setOpenModal(null)}
       >

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

@@ -101,10 +101,13 @@ const MultiCheckoutUI = (props) => {
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
 
-  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 +119,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) {

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;

package/src/themes/five/src/components/OrderDetails/OrderEta.js

@@ -12,7 +12,7 @@ export const OrderEta = (props) => {
   const [estimatedDeliveryTime, setEstimatedDeliveryTime] = useState(null)
 
   const getEstimatedDeliveryTime = () => {
-    let _estimatedTime
+    let _estimatedTime = null
     let totalEta = 0
     const _delivery = order?.delivery_datetime_utc
       ? order?.delivery_datetime_utc
@@ -40,7 +40,8 @@ export const OrderEta = (props) => {
     } else {
       _estimatedTime = moment.utc(_delivery).add(order?.eta_time, 'minutes')
     }
-    _estimatedTime = outputFormat ? moment(_estimatedTime).format(outputFormat) : parseDate(_estimatedTime, { utc: false })
+    if (order?.delivered_in) { _estimatedTime = moment.utc(_delivery).add(order?.delivered_in, 'minutes')}
+    _estimatedTime = outputFormat ? moment(_estimatedTime).local().format(outputFormat) : parseDate(_estimatedTime, { utc: false })
     setEstimatedDeliveryTime(_estimatedTime)
   }
 

package/src/themes/five/src/components/OrderDetails/OrderHistory.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { useLanguage, useUtils } from 'ordering-components-external'
 import { ArrowRight, CheckCircleFill } from 'react-bootstrap-icons'
 import { Button } from '../../styles/Buttons'
-import { getTraduction } from '../../../../../utils'
+import { formatSeconds, getTraduction } from '../../../../../utils'
 import {
   OrderHistoryContainer,
   HistoryItemWrapper,
@@ -127,7 +127,13 @@ export const OrderHistory = (props) => {
               <h3>
                 {message.change?.attribute === 'logistic_status'
                   ? getLogisticTagStatus(parseInt(message.change.new, 10))
-                  : t(getStatus(parseInt(message.change.new, 10)))
+                  : message.change?.attribute === 'delivered_in' ? (
+                    <h3>
+                        <strong>{t('TIME_ADDED_BY_DRIVER', 'Time added by driver')}</strong><br />
+                        {formatSeconds(parseInt(message.change.new, 10))}
+                    </h3>
+                  )
+                    :t(getStatus(parseInt(message.change.new, 10)))
                 }
               </h3>
             ) : (

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

@@ -127,7 +127,7 @@ const OrderDetailsUI = (props) => {
   const acceptedStatus = [1, 2, 5, 6, 10, 11, 12]
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
-  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
@@ -515,7 +515,7 @@ const OrderDetailsUI = (props) => {
                           </p>
                         </PlaceSpotSection>
                       )}
-                      {hideOrderActions && (
+                      {!hideOrderActions && (
                         <DirectionButtonWrapper>
                           <Button
                             color='primary'

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  padding-top: 5px;
+  padding-top: 25px;
   margin: 0px;
   ${props => props.theme.rtl && css`
     margin-left: 30px;

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

@@ -35,6 +35,7 @@ const OrderProgressUI = (props) => {
   const theme = useTheme()
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
+  const statusToShow = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21]
 
   const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 
@@ -45,7 +46,15 @@ const OrderProgressUI = (props) => {
   useEffect(() => {
     if (orderList?.orders.length > 0) {
       const sortedOrders = orderList.orders.sort((a, b) => a.id > b.id ? -1 : 1)
-      setLastOrder(sortedOrders[0])
+      const orderInProgress = sortedOrders.find(({ status }) => (statusToShow.includes(status)))
+
+      let _lastOrder = null
+      if (orderInProgress) {
+        _lastOrder = orderInProgress
+      } else {
+        _lastOrder = sortedOrders[0]
+      }
+      setLastOrder(_lastOrder)
     }
   }, [orderList?.orders])
 
@@ -66,8 +75,10 @@ const OrderProgressUI = (props) => {
                   : isChew ? theme.images.logos.chewLogoReverse : theme.images.logos.logotype}
               />
               <ProgressDescriptionWrapper>
-                <h2>{t('ORDER_IN_PROGRESS', 'Order in progress')}</h2>
-                <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
+                <h2>{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', 'Order')}</h2>
+                {statusToShow.includes(lastOrder?.status) && (
+                  <p>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</p>
+                )}
                 <Button
                   color='primaryContrast'
                   naked
@@ -93,7 +104,7 @@ const OrderProgressUI = (props) => {
               <ProgressTextWrapper>
                 <StatusWrapper>{getOrderStatus(lastOrder?.status)?.value}</StatusWrapper>
                 <TimeWrapper>
-                  <span>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}:&nbsp;</span>
+                  <span>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}:&nbsp;</span>
                   <span>
                     {lastOrder?.delivery_datetime_utc
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A', utc: false })
@@ -116,7 +127,7 @@ export const OrderProgress = (props) => {
   const orderProgressProps = {
     ...props,
     UIComponent: OrderProgressUI,
-    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23],
+    orderStatus: [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
     useDefualtSessionManager: true,
     paginationSettings: {
       initialPage: 1,

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

@@ -28,7 +28,10 @@ export const OrderTypeSelectorContentUI = (props) => {
     handleChangeOrderType && handleChangeOrderType(orderType)
   }
 
-  const orderTypeImage = (type) => theme?.header?.components?.order_types?.components?.[type]?.components?.image
+  const orderTypeImage = (type) => theme?.order_types?.components?.[type]?.components?.image
+  const orderTypeTitle = (type) => theme?.order_types?.components?.[type]?.components?.title
+  const orderTypeDescription = (type) => theme?.order_types?.components?.[type]?.components?.description
+  const orderTypeCallAction = (type) => theme?.order_types?.components?.[type]?.components?.call_to_action
 
   return (
     <div className='order-type' style={{ overflow: 'hidden' }}>
@@ -48,10 +51,10 @@ export const OrderTypeSelectorContentUI = (props) => {
               onClick={() => handleClickOrderType(item.value)}
               active={orderStatus?.options?.type === item?.value}
             >
-              <OrderTypeTitle>{item.text}</OrderTypeTitle>
-              <OrderTypeDescription>{item.description}</OrderTypeDescription>
+              <OrderTypeTitle>{orderTypeTitle(item?.text?.replace(' ', '_')?.toLowerCase()) || item.text}</OrderTypeTitle>
+              <OrderTypeDescription>{orderTypeDescription(item?.text?.replace(' ', '_')?.toLowerCase()) || item.description}</OrderTypeDescription>
               <OrderStartWrapper>
-                <span>{t('START_MY_ORDER', 'start my order')}</span>
+                <span>{orderTypeCallAction(item?.text?.replace(' ', '_')?.toLowerCase()) || t('START_MY_ORDER', 'start my order')}</span>
                 <BsArrowRight />
               </OrderStartWrapper>
               <OrderTypeOverlay />

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

@@ -43,7 +43,7 @@ export const BannerContainer = styled.div`
 export const ImageWrapper = styled.div`
   cursor: pointer;
   width: 100%;
-  padding-top: 260px;
+  padding-top: 18%;
   position: relative;
   .banner-img {
     position: absolute;
@@ -53,7 +53,4 @@ export const ImageWrapper = styled.div`
     height: 100%;
     object-fit: cover;
   }
-  @media (min-width: 768px) {
-    padding-top: 18%;
-  }
 `