ordering-ui-external 1.9.5 → 2.0.0

package/src/components/CancellationComponent/index.js

@@ -17,45 +17,49 @@ export const CancellationComponent = props => {
     <>
       <Hero>
         {(bgUrl || theme.images?.general?.businessHero) && (
-          <BgImg src={bgUrl || theme.images?.general?.businessHero} alt="bg"/>
+          <BgImg src={bgUrl || theme.images?.general?.businessHero} alt='bg' />
         )}
         <HeroText>
-        {(logoUrl || theme.images?.logos?.logotype) && (
-          <LogoImg src={logoUrl || theme.images?.logos?.logotype} alt="logo"/>
-        )}
-          <h1 className="title">{t('CANCELLATION_TITLE', 'SITE OUT OF SERVICE')}</h1>
-          <h4 className="sub-title" dangerouslySetInnerHTML={{
-            __html:t('CANCELLATION_SUBTITLE', 'This website has been archived or suspended in accordance with our :Terms of Service').replace(':Terms of Service', `<b><i>${t('CANCELLATION_TERMS', 'Terms of Service')}</i></b>`)
-          }}/>
+          {(logoUrl || theme.images?.logos?.logotype) && (
+            <LogoImg src={logoUrl || theme.images?.logos?.logotype} alt='logo' />
+          )}
+          <h1 className='title'>{t('CANCELLATION_TITLE', 'SITE OUT OF SERVICE')}</h1>
+          <h4
+            className='sub-title' dangerouslySetInnerHTML={{
+              __html: t('CANCELLATION_SUBTITLE', 'This website has been archived or suspended in accordance with our :Terms of Service').replace(':Terms of Service', `<b><i>${t('CANCELLATION_TERMS', 'Terms of Service')}</i></b>`)
+            }}
+          />
         </HeroText>
       </Hero>
       <Content>
         <p dangerouslySetInnerHTML={{
-            __html:t('CANCELLATION_OWNER_TEXT', 'If you are the :owner of this website contact us to reactivate your website.').replace(':owner', `<b>${t('CANCELLATION_OWNER', 'owner')}</b>`)
-          }}/>
-          {ButtonComponent &&(
-            <ButtonComponent color='primary'>{t('CANCELLATION_CONTACT_US', 'Contact us')}</ButtonComponent>
-          )}
+          __html: t('CANCELLATION_OWNER_TEXT', 'If you are the :owner of this website contact us to reactivate your website.').replace(':owner', `<b>${t('CANCELLATION_OWNER', 'owner')}</b>`)
+        }}
+        />
+        {ButtonComponent && (
+          <ButtonComponent color='primary'>{t('CANCELLATION_CONTACT_US', 'Contact us')}</ButtonComponent>
+        )}
       </Content>
       <Segment>
-          <p dangerouslySetInnerHTML={{
-            __html:t('CANCELLATION_OWNER_TEXT', 'If you are a :customer let the owner know you midd this website, just write your email below.').replace(':customer', `<b>${t('CANCELLATION_CUSTOMER', 'customer')}</b>`)
-          }}/>
-          <InputWrapper>
+        <p dangerouslySetInnerHTML={{
+          __html: t('CANCELLATION_OWNER_TEXT', 'If you are a :customer let the owner know you midd this website, just write your email below.').replace(':customer', `<b>${t('CANCELLATION_CUSTOMER', 'customer')}</b>`)
+        }}
+        />
+        <InputWrapper>
           <BusinessSearch>
-          {InputComponent &&(
+            {InputComponent && (
               <InputComponent
-              name='Email'
-              placeholder={t('CANCELLATION_INPUT_PLACEHOLDER', 'Email')}
-            />
-          )}
+                name='Email'
+                placeholder={t('CANCELLATION_INPUT_PLACEHOLDER', 'Email')}
+              />
+            )}
           </BusinessSearch>
-          {ButtonComponent &&(
-              <ButtonComponent color='primary'>
-                {t('CANCELLATION_SEND_BUTTON', 'Send')}
-              </ButtonComponent>
+          {ButtonComponent && (
+            <ButtonComponent color='primary'>
+              {t('CANCELLATION_SEND_BUTTON', 'Send')}
+            </ButtonComponent>
           )}
-            </InputWrapper>
+        </InputWrapper>
       </Segment>
     </>
   )

package/src/components/Confirm/index.js

@@ -87,3 +87,5 @@ export const Confirm = (props) => {
 }
 
 export const Alert = Confirm
+
+export default Confirm

package/src/components/Header/index.js

@@ -443,3 +443,5 @@ const styles = {
 Header.defaultProps = {
   isShowOrderOptions: true
 }
+
+export default Header

package/src/components/SmartAppBanner/index.js

@@ -38,3 +38,5 @@ export const SmartAppBanner = (props) => {
   }
   return <SmartAppBannerController {...smartAppBannerProps} />
 }
+
+export default SmartAppBanner

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

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

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

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

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/OrdersSection/index.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { OrdersOption } from '../../../../OrdersOption'
+import { useLanguage, useOrder } from 'ordering-components-external'
+export const OrdersSection = (props) => {
+  const {
+    titleContent,
+    onRedirectPage,
+    businessesIds,
+    getCustomArray,
+    businessesList,
+    isCustomerMode,
+    userCustomer
+  } = props
+  const [orderState] = useOrder()
+  const [, t] = useLanguage()
+  return (
+    <>
+      {onRedirectPage && (
+        <>
+          <OrdersOption
+            horizontal
+            isBusinessesPage
+            onRedirectPage={onRedirectPage}
+            titleContent={t('CARTS', 'Carts')}
+            businessesIds={businessesIds}
+            customArray={
+              getCustomArray(orderState.carts)?.filter(cart => cart.products.length > 0)
+            }
+            isCustomLayout
+            isBusinessesLoading={businessesList.loading}
+            isCustomerMode={isCustomerMode}
+            franchiseId={props.franchiseId}
+          />
+          <OrdersOption
+            pastOrders
+            horizontal
+            asDashboard
+            isBusinessesPage
+            businessesIds={businessesIds}
+            onRedirectPage={onRedirectPage}
+            userCustomerId={userCustomer?.id}
+            isCustomLayout
+            titleContent={titleContent}
+            isBusinessesLoading={businessesList.loading}
+            isCustomerMode={isCustomerMode}
+            franchiseId={props.franchiseId}
+          />
+        </>
+      )}
+    </>
+  )
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
+import { useTheme } from 'styled-components'
 import {
   useLanguage,
   useUtils,
@@ -8,7 +9,6 @@ import {
   useSession,
   useValidationFields,
   useOrder,
-  useOrderingTheme,
   MultiCheckout as MultiCheckoutController
 } from 'ordering-components-external'
 
@@ -62,14 +62,15 @@ const MultiCheckoutUI = (props) => {
     onRedirectPage,
     cartGroup,
     cartUuid,
-    totalCartsFee
+    totalCartsFee,
+    handleSearchRedirect
   } = props
 
+  const theme = useTheme()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
   const [customerState] = useCustomer()
-  const [orderingTheme] = useOrderingTheme()
   const [validationFields] = useValidationFields()
   const [{ user }] = useSession()
   const [orderState] = useOrder()
@@ -80,8 +81,10 @@ const MultiCheckoutUI = (props) => {
   const [alertState, setAlertState] = useState({ open: false, content: [] })
   const isDisablePlaceOrderButton = !(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) || (paymethodSelected?.paymethod?.gateway === 'stripe' && !paymethodSelected?.paymethod_data)
   const walletCarts = (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && cart?.wallets) || null) || []
-  const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
   const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
+    ? JSON.parse(configs?.driver_tip_options?.value) || []
+    : configs?.driver_tip_options?.value || []
   const totalFeeEnabled = configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1'
     ? JSON.parse(configs?.driver_tip_options?.value) || []
     : configs?.driver_tip_options?.value || []
@@ -159,9 +162,11 @@ const MultiCheckoutUI = (props) => {
 
   return (
     <>
-      {!cartGroup?.loading && openCarts.length === 0 ? (
+      {((!cartGroup?.loading && openCarts.length === 0) || !cartUuid) ? (
         <NotFoundSource
-          content={t('CARTS_NOT_FOUND', 'You don’t have carts available')}
+          content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
+          btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
+          onClickButton={handleSearchRedirect}
         />
       ) : (
         <Container>

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

@@ -75,7 +75,7 @@ const SingleOrderCardUI = (props) => {
   }
 
   const handleGoToOrderDetails = (uuid) => {
-    events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: true })
+    events.emit('go_to_page', { page: 'order_detail', params: { orderId: uuid }, replace: !props.isMultiOrders })
   }
 
   const handleOpenMessages = (data) => {

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

@@ -168,6 +168,7 @@ const MultiOrdersDetailsUI = (props) => {
           {orders.map(order => (
             <SingleOrderCard
               key={order.id}
+              isMultiOrders
               getOrderStatus={getOrderStatus}
               order={order}
             />

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

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

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

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

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

@@ -5,8 +5,6 @@ import { useLanguage, useOrder, useEvent, OrderList } from 'ordering-components-
 import { HorizontalOrdersLayout } from '../HorizontalOrdersLayout'
 import { VerticalOrdersLayout } from '../../../../../components/VerticalOrdersLayout'
 
-import { useTheme } from 'styled-components'
-
 import {
   OptionTitle,
   OrdersContainer,
@@ -27,6 +25,7 @@ import { SingleProductCard } from '../SingleProductCard'
 import { useWindowSize } from '../../../../../hooks/useWindowSize'
 import { Alert } from '../Confirm'
 import { PreviousProfessionalOrdered } from './PreviousProfessionalOrdered'
+import { getOrderStatus } from '../../../../../utils'
 
 const OrdersOptionUI = (props) => {
   const {
@@ -70,7 +69,6 @@ const OrdersOptionUI = (props) => {
   } = props
 
   const [, t] = useLanguage()
-  const theme = useTheme()
   const [{ carts }] = useOrder()
   const [events] = useEvent()
   const { width } = useWindowSize()
@@ -81,16 +79,19 @@ const OrdersOptionUI = (props) => {
   const ordersReduced = _orders.map(order => order?.cart_group_id
     ? _orders
       .filter(_order => _order?.cart_group_id === order?.cart_group_id)
-      ?.reduce((orderCompleted, currentOrder) => ({
-        ...orderCompleted,
-        total: orderCompleted.summary?.total + currentOrder?.summary?.total,
-        business: [orderCompleted.business, currentOrder.business].flat(),
-        business_id: [orderCompleted.business_id, currentOrder.business_id].flat(),
-        id: [orderCompleted.id, currentOrder.id].flat(),
-        review: orderCompleted.review && currentOrder.review,
-        user_review: orderCompleted.user_review && currentOrder.user_review,
-        products: [orderCompleted.products, currentOrder.products].flat()
-      }))
+      .map((_o, _, _ordersList) => {
+        const obj = {
+          ..._o,
+          id: _ordersList.map(o => o.id),
+          review: _o.review,
+          user_review: _o.user_review,
+          total: _ordersList.reduce((acc, o) => acc + o.summary.total, 0),
+          business: _ordersList.map(o => o.business),
+          business_id: _ordersList.map(o => o.business_id),
+          products: _ordersList.map(o => o.products)
+        }
+        return obj
+      }).find(o => o)
     : order)
   const orders = ordersReduced?.filter(order => {
     if (!order?.cart_group_id) return true
@@ -123,41 +124,6 @@ const OrdersOptionUI = (props) => {
   }
 
   const showSkeletons = (!isBusiness && !isProducts && loading) || (businesses?.loading && isBusiness) || (products?.length === 0 && isProducts && ((!businessesSearchList && loading) || businessesSearchList?.loading))
-
-  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 onProductClick = (product, slug) => {
     if (slug) {
       onProductRedirect({

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

@@ -151,7 +151,7 @@ const ProductOptionsUI = (props) => {
   }
 
   const handleSaveProduct = () => {
-    const isErrors = Object.values(errors).length > 0
+    const isErrors = Object.values(errors)?.length > 0
     if (!isErrors) {
       handleSave && handleSave()
       return
@@ -212,7 +212,7 @@ const ProductOptionsUI = (props) => {
 
   const getOverFlowImage = (url) => {
     const keys = url.split('/')
-    const _videoId = keys[keys.length - 1]
+    const _videoId = keys[keys?.length - 1]
     const overFlowImg = 'http://img.youtube.com/vi/' + _videoId + '/0.jpg'
     return overFlowImg
   }
@@ -230,7 +230,7 @@ const ProductOptionsUI = (props) => {
 
   const scrollDown = () => {
     const adjustHeight = windowSize?.width > 768 ? 50 : 55
-    const isErrors = Object.values(errors).length > 0
+    const isErrors = Object.values(errors)?.length > 0
     if (!isErrors) {
       return
     }
@@ -272,8 +272,8 @@ const ProductOptionsUI = (props) => {
       if (product?.ingredients.length > 0 || product?.extras.length > 0) {
         const menuList = []
         if (product?.ingredients?.length > 0) menuList.push('ingredients')
-        product?.extras?.length > 0 && product.extras.sort((a, b) => a.rank - b.rank).forEach(extra => {
-          extra.options?.length > 0 && extra.options.sort((a, b) => a.rank - b.rank).forEach(option => {
+        product?.extras.length > 0 && product?.extras.sort((a, b) => a.rank - b.rank).forEach(extra => {
+          extra?.options.length > 0 && extra?.options.sort((a, b) => a.rank - b.rank).forEach(option => {
             showOption(option) && menuList.push(`id_${option?.id}`)
           })
         })
@@ -545,12 +545,12 @@ const ProductOptionsUI = (props) => {
             <Divider />
             <ProductEdition>
               {
-                (product?.ingredients.length > 0 || product?.extras.length > 0) && (
+                (product?.ingredients?.length > 0 || product?.extras?.length > 0) && (
                   <ProductTabContainer id='all'>
                     <Tabs>
                       <AutoScroll scrollId='optionList'>
                         {
-                          product?.ingredients.length > 0 && (
+                          product?.ingredients?.length > 0 && (
                             <Tab
                               key='ingredients'
                               id='menu_ingredients'
@@ -563,7 +563,7 @@ const ProductOptionsUI = (props) => {
                           )
                         }
                         {
-                          product?.extras.sort((a, b) => a.rank - b.rank).map(extra => extra.options.sort((a, b) => a.rank - b.rank).map(option => {
+                          product?.extras.sort((a, b) => a.rank - b.rank).map(extra => extra.options?.sort((a, b) => a.rank - b.rank).map(option => {
                             return (
                               showOption(option) && (
                                 <Tab
@@ -584,9 +584,9 @@ const ProductOptionsUI = (props) => {
                   </ProductTabContainer>
                 )
               }
-              {product?.ingredients.length > 0 && (
+              {product?.ingredients?.length > 0 && (
                 <div id='ingredients'>
-                  {product?.ingredients.length > 0 && (<SectionTitle>{t('INGREDIENTS', theme?.defaultLanguages?.INGREDIENTS || 'Ingredients')}</SectionTitle>)}
+                  {product?.ingredients?.length > 0 && (<SectionTitle>{t('INGREDIENTS', theme?.defaultLanguages.INGREDIENTS || 'Ingredients')}</SectionTitle>)}
                   <WrapperIngredients isProductSoldout={isSoldOut || maxProductQuantity <= 0}>
                     {product?.ingredients.map(ingredient => (
                       <ProductIngredient
@@ -602,7 +602,7 @@ const ProductOptionsUI = (props) => {
               )}
               <div>
                 {
-                  product?.extras.sort((a, b) => a.rank - b.rank).map(extra => extra.options.sort((a, b) => a.rank - b.rank).map(option => {
+                  product?.extras?.sort((a, b) => a.rank - b.rank).map(extra => extra.options.sort((a, b) => a.rank - b.rank).map(option => {
                     const currentState = productCart.options[`id:${option?.id}`] || {}
                     return (
                       <React.Fragment key={option?.id}>

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

@@ -251,3 +251,5 @@ export const ReviewDriver = (props) => {
 
   return <ReviewDriverController {...reviewDriverProps} />
 }
+
+export default ReviewDriver

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

@@ -247,3 +247,5 @@ export const ReviewOrder = (props) => {
 
   return <ReviewOrderController {...ReviewOrderProps} />
 }
+
+export default ReviewOrder

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

@@ -257,3 +257,5 @@ export const ReviewProduct = (props) => {
   }
   return <ReviewProductController {...reviewProductProps} />
 }
+
+export default ReviewProduct

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

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

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

@@ -106,3 +106,5 @@ export const SignUpApproval = (props) => {
     </Container>
   )
 }
+
+export default SignUpApproval