ordering-ui-admin-external 1.30.7 → 1.31.1

package/src/components/Delivery/DriversGroupAutoassign/index.js

@@ -19,7 +19,8 @@ import {
   AreaWrapper,
   LargeArea,
   MediumArea,
-  SmallArea
+  SmallArea,
+  CheckboxContainer
 } from './styles'
 
 const DriversGroupAutoassignUI = (props) => {
@@ -125,8 +126,8 @@ const DriversGroupAutoassignUI = (props) => {
             />
           </FieldContainer>
         </div>
-        <div>
-          {(autoAssign !== 2 && (changesState?.autoassign_amount_drivers < 2 || (typeof changesState?.autoassign_amount_drivers === 'undefined' && curDriversGroup?.autoassign_amount_drivers < 2))) && (
+        {(autoAssign !== 2 && (changesState?.autoassign_amount_drivers < 2 || (typeof changesState?.autoassign_amount_drivers === 'undefined' && curDriversGroup?.autoassign_amount_drivers < 2))) && (
+          <CheckboxContainer>
             <CheckboxWrapper>
               <Checkbox
                 checked={changesState?.autoassign_autoaccept_by_driver ?? curDriversGroup?.autoassign_autoaccept_by_driver}
@@ -134,11 +135,21 @@ const DriversGroupAutoassignUI = (props) => {
               />
               <span>{t('ORDER_CONFIRMED_ACCEPTED_BY_DRIVER', 'Accepted by Driver')}</span>
             </CheckboxWrapper>
-          )}
-        </div>
+            {(typeof changesState?.autoassign_autoaccept_by_driver === 'undefined' ? !curDriversGroup?.autoassign_autoaccept_by_driver : !changesState?.autoassign_autoaccept_by_driver) && (
+              <CheckboxWrapper>
+                <Checkbox
+                  checked={changesState?.autoassign_autoassign_driver ?? curDriversGroup?.autoassign_autoassign_driver}
+                  onChange={e => onChangeSave({ autoassign_autoassign_driver: e.target.checked })}
+                />
+                <span>{t('AUTO_ASSIGNED', 'Auto assigned')}</span>
+              </CheckboxWrapper>
+            )}
+          </CheckboxContainer>
+        )}
       </RowGroupContainer>
 
-      {(((typeof changesState?.autoassign_autoaccept_by_driver === 'undefined' ? !curDriversGroup?.autoassign_autoaccept_by_driver : !changesState?.autoassign_autoaccept_by_driver)) ||
+      {(((typeof changesState?.autoassign_autoaccept_by_driver === 'undefined' ? !curDriversGroup?.autoassign_autoaccept_by_driver : !changesState?.autoassign_autoaccept_by_driver) &&
+      (typeof changesState?.autoassign_autoassign_driver === 'undefined' ? !curDriversGroup?.autoassign_autoassign_driver : !changesState?.autoassign_autoassign_driver)) ||
       (changesState?.type === 1 || (typeof changesState?.type === 'undefined' && curDriversGroup?.type === 1))) && (
         <FieldContainer>
           <label>{t('AUTO_REJECT_ORDER_GROUP_AFTER', 'Auto reject Orders After')}</label>

package/src/components/Delivery/DriversGroupAutoassign/styles.js

@@ -220,3 +220,13 @@ export const SmallArea = styled.div`
     border-color: ${props => props.theme.colors.primary};
   `}
 `
+export const CheckboxContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    &:not(:first-child) {
+      margin-top: 5px;
+    }
+  }
+`

package/src/components/Home/HomePage/index.js

@@ -71,6 +71,8 @@ const HomeUI = (props) => {
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [ordering] = useApi()
 
+  const isEnabledWhiteLabelModule = configs?.white_label_module?.value
+
   const project = {
     active: {
       description: t('ORDERING_GUIDE_MSG', 'Our guide helps you to configure your Ordering products.'),
@@ -234,7 +236,9 @@ const HomeUI = (props) => {
         {width > 997 && (
           <OrderingButtonWrapper>
             <span>{t('WHAT_DO_YOU_WANT_SEE_ORDERING', 'What do you want to see in ordering?')}</span>
-            <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+            {!isEnabledWhiteLabelModule && (
+              <Button color='primary' onClick={() => setShowForm(true)}>{t('CLICK_HERE', 'Click here')}</Button>
+            )}
           </OrderingButtonWrapper>
         )}
         <Breadcrumb>

package/src/components/MyProducts/OrderingWebsite/index.js

@@ -71,7 +71,8 @@ const OrderingWebsiteUI = (props) => {
     site,
     setSite,
     businessesList,
-    franchisesList
+    franchisesList,
+    handleChangeInput
   } = props
 
   const [, t] = useLanguage()
@@ -178,6 +179,7 @@ const OrderingWebsiteUI = (props) => {
 
   const handleChangeSiteSettings = (e) => {
     handleChangeValue(e.target.value, 'website_settings', `values.${e.target.name}`)
+    handleChangeInput(e)
   }
 
   const handleChangeContent = (type, content) => {
@@ -290,7 +292,7 @@ const OrderingWebsiteUI = (props) => {
                     <Input
                       name='name'
                       placeholder={t('SOURCE_DEMO_WEBSITE', 'Source demo website')}
-                      value={themeValues?.website_settings?.components?.values?.name || ''}
+                      value={site?.name || ''}
                       onChange={handleChangeSiteSettings}
                     />
                   )}
@@ -311,7 +313,7 @@ const OrderingWebsiteUI = (props) => {
                     <TextArea
                       name='description'
                       placeholder={t('DESCRIPTION', 'Decription')}
-                      value={themeValues?.website_settings?.components?.values?.description || ''}
+                      value={site?.description || ''}
                       onChange={handleChangeSiteSettings}
                     />
                   )}
@@ -587,15 +589,26 @@ const OrderingWebsiteUI = (props) => {
               <InputFormWrapper>
                 <h4>{t('THEME_SETTINGS', 'Theme Settings')}</h4>
                 <InnerBlock>
-                  <ColorPickerWrapper>
-                    <div>
-                      <p>{t('PRIMARY_COLOR_BUTTONS', 'Primary Color for Buttons')}</p>
-                      <ColorPicker
-                        defaultColor={themeValues?.theme_settings?.components?.style?.primary_btn_color}
-                        onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.primary_btn_color')}
-                      />
-                    </div>
-                  </ColorPickerWrapper>
+                  <ContentWrapper>
+                    <ColorPickerWrapper>
+                      <div>
+                        <p>{t('BACKGROUND_COLOR', 'Background color')}</p>
+                        <ColorPicker
+                          defaultColor={themeValues?.theme_settings?.components?.style?.background_page ?? '#FFFFFF'}
+                          onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.background_page')}
+                        />
+                      </div>
+                    </ColorPickerWrapper>
+                    <ColorPickerWrapper>
+                      <div>
+                        <p>{t('PRIMARY_COLOR_BUTTONS', 'Primary Color for Buttons')}</p>
+                        <ColorPicker
+                          defaultColor={themeValues?.theme_settings?.components?.style?.primary_btn_color}
+                          onChangeColor={(color) => handleChangeValue(color, 'theme_settings', 'style.primary_btn_color')}
+                        />
+                      </div>
+                    </ColorPickerWrapper>
+                  </ContentWrapper>
                   <ContentWrapper>
                     <div>
                       <p>{t('HOMEPAGE_CONTENT', 'Homepage Content')}</p>

package/src/components/MyProducts/OrderingWebsite/styles.js

@@ -309,12 +309,10 @@ export const CheckBoxWrapper = styled.div`
 `
 
 export const ColorPickerWrapper = styled.div`
-  padding-top: 25px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   > div {
-    margin-top: 25px;
     > p {
       font-weight: 400;
       font-size: 14px;

package/src/components/Orders/AllInOne/index.js

@@ -54,7 +54,6 @@ const OrdersManagerUI = (props) => {
     handleSelectedSubOrderStatus,
     handleCustomOrderDetail,
     setSelectedOrderIds,
-    numberOfOrdersByStatus,
     allowColumns,
     setAllowColumns
   } = props
@@ -75,6 +74,12 @@ const OrdersManagerUI = (props) => {
   const [timeStatus, setTimeStatus] = useState(null)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
   const [totalSelectedOrder, setTotalSelectedOrder] = useState(0)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [mapsData, setMapsData] = useState({
     driversIsOnline: true,
@@ -213,7 +218,7 @@ const OrdersManagerUI = (props) => {
               <OrderStatusFilterBar
                 selectedOrderStatus={ordersStatusGroup}
                 changeOrderStatus={handleOrdersStatusGroupFilter}
-                numberOfOrdersByStatus={numberOfOrdersByStatus}
+                ordersAmountByStatus={ordersAmountByStatus}
               />
               <OrderSubFilterControls isColumn={selectedOrderIds?.length}>
                 <OrderStatusSubFilterWrapper isColumn={selectedOrderIds?.length}>
@@ -261,6 +266,7 @@ const OrdersManagerUI = (props) => {
                       slaSettingTime={slaSettingTime}
                       allowColumns={allowColumns}
                       setAllowColumns={setAllowColumns}
+                      setOrdersAmountByStatus={setOrdersAmountByStatus}
                     />
                   </WrapItemView>
                 </OrdersInnerContent>

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { useLanguage, useOrder, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-admin-external'
+import { useLanguage, useOrder, useValidationFields, CustomOrderDetails as CustomOrderDetailsController } from 'ordering-components-admin-external'
 import { SelectCustomer } from '../SelectCustomer'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { SelectBusinesses } from '../SelectBusinesses'
@@ -7,9 +7,15 @@ import { Map } from '../Map'
 import { SelectProducts } from '../SelectProducts'
 import { Checkout } from '../Checkout'
 import { Alert } from '../../../Shared'
+import { Button, Input, TextArea } from '../../../../styles'
+import { RecordCircleFill, Circle } from 'react-bootstrap-icons'
 
 import {
-  DetailsContainer
+  DetailsContainer,
+  FormControl,
+  ToggleOptions,
+  RaidoButton,
+  ButtonWrapper
 } from './styles'
 
 const CustomOrderDetailsUI = (props) => {
@@ -31,19 +37,56 @@ const CustomOrderDetailsUI = (props) => {
     cart,
     onClose,
     handleOpenCustomOrderDetail,
-    defaultCountryCodeState
+    handlePlaceOrderByTotal,
+    extraFields,
+    setExtraFields,
+    actionState
   } = props
 
   const [, t] = useLanguage()
+  const [validationFields] = useValidationFields()
   const [orderState, { changeAddress }] = useOrder()
 
   const [alertState, setAlertState] = useState({ open: false, content: [] })
+  const [isOrderByProducts, setIsOrderByProducts] = useState(true)
 
   const handleCloseAlert = () => {
     setCustomersPhones({ ...customersPhones, error: null })
     setAlertState({ open: false, content: [] })
   }
 
+  const handlePlaceOrder = () => {
+    const errMessage = []
+
+    if (!selectedBusiness) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('BUSINESS', 'Business')))
+    }
+    if (!extraFields?.total) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('TOTAL', 'Total')))
+    }
+    if (validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && !extraFields?.comment) {
+      errMessage.push(t(
+        'VALIDATION_ERROR_REQUIRED',
+        'Name is required'
+      ).replace('_attribute_', t('COMMENT', 'Comment')))
+    }
+    if (errMessage.length > 0) {
+      setAlertState({
+        open: true,
+        content: errMessage
+      })
+      return
+    }
+
+    handlePlaceOrderByTotal()
+  }
+
   const customerAddress = useMemo(() => {
     let address = null
     if (selectedUser?.addresses) {
@@ -68,6 +111,18 @@ const CustomOrderDetailsUI = (props) => {
     }
   }, [customersPhones?.error])
 
+  useEffect(() => {
+    if (actionState?.error) {
+      setAlertState({ open: true, content: actionState?.error })
+    }
+  }, [actionState])
+
+  useEffect(() => {
+    if (!isOrderByProducts) {
+      setExtraFields({ external_id: extraFields?.external_id })
+    }
+  }, [isOrderByProducts])
+
   return (
     <>
       <DetailsContainer className='custom-order-content'>
@@ -80,7 +135,6 @@ const CustomOrderDetailsUI = (props) => {
           onChangeNumber={onChangeNumber}
           handleParentSidebarMove={handleParentSidebarMove}
           customerAddress={customerAddress}
-          defaultCountryCodeState={defaultCountryCodeState}
         />
         {customerAddress?.location && (
           <>
@@ -95,7 +149,53 @@ const CustomOrderDetailsUI = (props) => {
               customerLocation={customerAddress?.location}
               business={selectedBusiness}
             />
-            {selectedBusiness && (
+            <ToggleOptions>
+              <RaidoButton onClick={() => setIsOrderByProducts(true)}>
+                {isOrderByProducts ? <RecordCircleFill className='active' /> : <Circle />}
+                <span>{t('ORDER_BY_PRODUCTS', 'Order by products')}</span>
+              </RaidoButton>
+              <RaidoButton onClick={() => setIsOrderByProducts(false)}>
+                {isOrderByProducts ? <Circle /> : <RecordCircleFill className='active' />}
+                <span>{t('ORDER_BY_TOTAL', 'Order by total')}</span>
+              </RaidoButton>
+            </ToggleOptions>
+            {!isOrderByProducts && (
+              <FormControl>
+                <label>{t('TOTAL', 'Total')}</label>
+                <Input
+                  value={extraFields?.total || ''}
+                  onKeyPress={(e) => {
+                    if (!/^[0-9]$/.test(e.key)) {
+                      e.preventDefault()
+                    }
+                  }}
+                  onChange={(e) => setExtraFields({ ...extraFields, total: e.target.value })}
+                  placeholder={t('TOTAL', 'Total')}
+                />
+              </FormControl>
+            )}
+            <FormControl>
+              <label>
+                {t('EXTERNAL_ID', 'External id')}
+                <span>{t('OPTIONAL', 'Optional')}</span>
+              </label>
+              <Input
+                value={extraFields?.external_id || ''}
+                onChange={(e) => setExtraFields({ ...extraFields, external_id: e.target.value })}
+                placeholder={t('EXTERNAL_ID', 'External id')}
+              />
+            </FormControl>
+            {!isOrderByProducts && (
+              <FormControl>
+                <label>{t('COMMENT', 'Comment')}</label>
+                <TextArea
+                  value={extraFields?.comment || ''}
+                  onChange={(e) => setExtraFields({ ...extraFields, comment: e.target.value })}
+                  placeholder={t('COMMENT', 'Comment')}
+                />
+              </FormControl>
+            )}
+            {selectedBusiness && isOrderByProducts && (
               <SelectProducts
                 productList={productList}
                 getProducts={getProducts}
@@ -104,15 +204,27 @@ const CustomOrderDetailsUI = (props) => {
                 business={selectedBusiness}
               />
             )}
-            {cart && cart?.products.length > 0 && (
+            {cart && cart?.products.length > 0 && isOrderByProducts && (
               <Checkout
                 cartUuid={cart.uuid}
                 onPlaceOrderClick={(data, paymethod, cart) => {
                   cart?.uuid && handleOpenCustomOrderDetail(cart.uuid)
                   onClose()
                 }}
+                extraFields={extraFields}
               />
             )}
+            {!isOrderByProducts && (
+              <ButtonWrapper>
+                <Button
+                  color='primary'
+                  onClick={handlePlaceOrder}
+                  disabled={actionState?.loading}
+                >
+                  {t('PLACE_ORDER', 'Place Order')}
+                </Button>
+              </ButtonWrapper>
+            )}
           </>
         )}
         <Alert

package/src/components/Orders/CreateCustomOrder/CustomOrderDetails/styles.js

@@ -26,3 +26,59 @@ export const DetailsContainer = styled.div`
     margin-bottom: 4px;
   }
 `
+
+export const FormControl = styled.div`
+  margin-top: 20px;
+  label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin-bottom: 10px;
+    span {
+      font-size: 12px;
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+  input, textarea {
+    width: 100%;
+  }
+`
+
+export const ToggleOptions = styled.div`
+  margin-top: 30px;
+`
+
+export const RaidoButton = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  cursor: pointer;
+
+  svg {
+    color: ${props => props.theme.colors.secundaryLight};
+    &.active {
+      color: ${props => props.theme.colors.primary};
+    }
+    font-size: 16px;
+    min-width: 16px;
+    margin-right: 12px;
+    ${props => props.theme.rtl && css`
+      margin-left: 13px;
+      margin-right: 0px;
+    `}
+  }
+  span {
+    font-size: 14px;
+    line-height: 24px;
+    margin: 0px;
+  }
+`
+
+export const ButtonWrapper = styled.div`
+  margin-top: 30px;
+  button {
+    border-radius: 8px;
+    height: 44px;
+  }
+`

package/src/components/Orders/CreateCustomOrder/OrderTypeSelector/index.js

@@ -28,7 +28,7 @@ const OrderTypeSelectorUI = (props) => {
       <p>{t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will you delivery type?')}</p>
       <Select
         placeholder={<Option>{t('SELECT_DELIVERY_TYPE', 'Select delivery type')}</Option>}
-        options={configTypes
+        options={configTypes.length > 0
           ? orderTypes.filter(type => configTypes?.includes(type.value)).filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))
           : orderTypes.filter(type => type.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()))}
         defaultValue={defaultType || typeSelected || defaultValue}

package/src/components/Orders/CreateCustomOrder/SelectCustomer/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, useUtils, useCustomer } from 'ordering-components-admin-external'
+import { useLanguage, useUtils, useCustomer, useConfig } from 'ordering-components-admin-external'
 import { UserAddForm } from '../../../Users'
 import { AddressList } from '../../../Delivery'
 import { Dot, HouseDoor } from 'react-bootstrap-icons'
@@ -29,13 +29,13 @@ export const SelectCustomer = (props) => {
     setSelectedUser,
     onChangeNumber,
     handleParentSidebarMove,
-    customerAddress,
-    defaultCountryCodeState
+    customerAddress
   } = props
 
   const [, t] = useLanguage()
   const [{ optimizeImage }] = useUtils()
   const [, { setUserCustomer }] = useCustomer()
+  const [{ configs }] = useConfig()
 
   const [searchInputFocus, setSearchInputFocus] = useState(false)
   const [showSearchbar, setShowSearchbar] = useState(true)
@@ -77,11 +77,22 @@ export const SelectCustomer = (props) => {
     onChangeNumber(trimmedValue)
   }
 
+  const handleOpenAddressListSidebar = () => {
+    setOpenSidebar('address_list')
+    handleParentSidebarMove(500)
+  }
+
   useEffect(() => {
     setOpenSidebar(null)
     handleParentSidebarMove(0)
   }, [customerAddress?.location])
 
+  useEffect(() => {
+    if (!customerAddress?.address && selectedUser) {
+      handleOpenAddressListSidebar()
+    }
+  }, [customerAddress?.address, selectedUser])
+
   return (
     <>
       <SectionContainer>
@@ -169,7 +180,7 @@ export const SelectCustomer = (props) => {
           <Button
             borderRadius='8px'
             color='primary'
-            disabled={openSidebar === 'user_add_form' || defaultCountryCodeState.loading}
+            disabled={openSidebar === 'user_add_form'}
             onClick={() => handleOpenAddForm()}
           >
             {t('USERS_REGISTER', 'New user')}
@@ -184,10 +195,7 @@ export const SelectCustomer = (props) => {
               </div>
             )}
             <LinkButton
-              onClick={() => {
-                setOpenSidebar('address_list')
-                handleParentSidebarMove(500)
-              }}
+              onClick={() => handleOpenAddressListSidebar()}
             >
               {customerAddress?.address ? t('CHANGE', 'Change') : t('ADD_NEW_ADDRESS', 'Add new address')}
             </LinkButton>
@@ -205,8 +213,7 @@ export const SelectCustomer = (props) => {
           <UserAddForm
             isFromCustomOrder
             hideUserTypeSelector
-            defaultCountry={defaultCountryCodeState.code}
-            defaultPhoneNumber={(selectedUser?.cellphone || phone) && `+${findExitingCountryPhoneCode(defaultCountryCodeState?.code)} ${selectedUser?.cellphone || phone}`}
+            defaultPhoneNumber={(selectedUser?.cellphone || phone) && `+${findExitingCountryPhoneCode(configs?.default_country_code?.value?.toUpperCase())} ${selectedUser?.cellphone || phone}`}
             handleSuccessAdd={onSelectUser}
             onClose={() => handleCloseSidebar()}
           />
@@ -221,11 +228,12 @@ export const SelectCustomer = (props) => {
           open={openSidebar === 'address_list'}
           onClose={() => handleCloseSidebar()}
         >
-          <SavedPlaces>
+          <SavedPlaces openExtraAdddress={openExtraAdddress}>
             <h2>{selectedUser?.name} {selectedUser?.lastname}</h2>
             <p>{t('SELECT_CUSTOMER_ADDRESS', 'Select customer address')}</p>
             <AddressListWrapper>
               <AddressList
+                isAutoOpenAddNewAddress
                 isSeletectedUserAddresses
                 userId={selectedUser?.id}
                 addresses={selectedUser?.addresses}

package/src/components/Orders/CreateCustomOrder/SelectCustomer/styles.js

@@ -172,6 +172,9 @@ export const SavedPlaces = styled.div`
   width: 100%;
   padding: 25px 20px;
   overflow: auto;
+  ${({ openExtraAdddress }) => openExtraAdddress && css`
+    z-index: 10;
+  `}
 
   > h2 {
     font-size: 20px;

package/src/components/Orders/DeliveriesManager/index.js

@@ -29,7 +29,6 @@ const DeliveriesManagerUI = (props) => {
     selectedSubOrderStatus,
     handleSelectedSubOrderStatus,
     onOrderRedirect,
-    numberOfOrdersByStatus,
     numberOfOrdersBySubstatus,
     timeStatus,
     setTimeStatus
@@ -42,6 +41,12 @@ const DeliveriesManagerUI = (props) => {
   const [detailsOrder, setDetailsOrder] = useState(null)
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(60000)
+  const [ordersAmountByStatus, setOrdersAmountByStatus] = useState({
+    pending: null,
+    inProgress: null,
+    completed: null,
+    cancelled: null
+  })
 
   const [configState] = useConfig()
   const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value
@@ -104,7 +109,8 @@ const DeliveriesManagerUI = (props) => {
               setFilterModalOpen={setFilterModalOpen}
               slaSettingTime={slaSettingTime}
               timeStatus={timeStatus}
-              numberOfOrdersByStatus={numberOfOrdersByStatus}
+              ordersAmountByStatus={ordersAmountByStatus}
+              setOrdersAmountByStatus={setOrdersAmountByStatus}
               numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
             />
           </WrapItemView>

package/src/components/Orders/DeliveryDashboard/index.js

@@ -17,8 +17,8 @@ export const DeliveryDashboard = (props) => {
     selectedSubOrderStatus,
     handleOrdersStatusGroupFilter,
     handleSelectedSubOrderStatus,
-    numberOfOrdersByStatus,
-    numberOfOrdersBySubstatus
+    ordersAmountByStatus,
+    setOrdersAmountByStatus
   } = props
 
   const [interActionMapOrder, setInterActionMapOrder] = useState(null)
@@ -42,13 +42,12 @@ export const DeliveryDashboard = (props) => {
           <OrderStatusFilterBar
             selectedOrderStatus={ordersStatusGroup}
             changeOrderStatus={handleOrdersStatusGroupFilter}
-            numberOfOrdersByStatus={numberOfOrdersByStatus}
+            ordersAmountByStatus={ordersAmountByStatus}
           />
           <OrderStatusSubFilter
             ordersStatusGroup={ordersStatusGroup}
             selectedSubOrderStatus={selectedSubOrderStatus}
             handleSelectedSubOrderStatus={handleSelectedSubOrderStatus}
-            numberOfOrdersBySubstatus={numberOfOrdersBySubstatus}
           />
         </FilterContainer>
         <WrapperOrderlist id='cardOrders'>
@@ -59,6 +58,7 @@ export const DeliveryDashboard = (props) => {
             handleOrderCardClick={handleLocation}
             handleUpdateDriverLocation={handleUpdateDriverLocation}
             isDelivery
+            setOrdersAmountByStatus={setOrdersAmountByStatus}
           />
         </WrapperOrderlist>
       </OrdersContainer>