ordering-ui-admin-external 1.42.16 → 1.43.0

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { PlusCircle, Trash3, Funnel } from 'react-bootstrap-icons'
 import MdcFilterOff from '@meronex/icons/mdc/MdcFilterOff'
 import TiWarningOutline from '@meronex/icons/ti/TiWarningOutline'
-import { useLanguage, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
+import { useLanguage, useConfig, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
 import { BusinessesSelector } from '../BusinessesSelector'
 import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
 import { DateTypeSelector } from '../DateTypeSelector'
@@ -16,6 +16,7 @@ import { Button, IconButton, Input, LinkButton } from '../../../styles'
 import { CurrencyFilter } from '../CurrencyFilter'
 import { getUniqueId } from '../../../utils'
 import { Select } from '../../../styles/Select/FirstSelect'
+import { useFilterValues } from '../../../contexts/FilterValuesContext'
 
 import {
   FilterGroupListContainer,
@@ -71,6 +72,8 @@ const OrdersFilterGroupUI = (props) => {
   const [isShow, setIsShow] = useState(false)
   const [filterApplied, setFilterApplied] = useState(false)
   const metafieldRef = useRef()
+  const [{ configs }] = useConfig()
+  const configFilter = configs?.filter_order_options?.value.split('|').map(value =>(value)) || []
 
   const logisticStatusList = [
     { value: 0, content: <Option>{t('PENDING', 'Pending')}<LogisticStatusDot status={0} /></Option> },
@@ -175,13 +178,19 @@ const OrdersFilterGroupUI = (props) => {
               value={filterValues?.orderId || ''}
               onChange={(e) => handleChangeOrderId(e)}
             />
-            <Input
-              type='text'
-              placeholder={t('EXTERNAL_ID', 'External Id')}
-              autoComplete='off'
-              value={filterValues?.externalId || ''}
-              onChange={handleChangeExternalId}
+            <DateTypeSelector
+              filterValues={filterValues}
+              handleChangeDateType={handleChangeDateType}
+              handleChangeFromDate={handleChangeFromDate}
+              handleChangeEndDate={handleChangeEndDate}
             />
+            {/* <Input
+                type='text'
+                placeholder={t('EXTERNAL_ID', 'External Id')}
+                autoComplete='off'
+                value={filterValues?.externalId || ''}
+                onChange={handleChangeExternalId}
+              /> */}
           </WrapperRow>
           <WrapperRow>
             <Input
@@ -222,14 +231,19 @@ const OrdersFilterGroupUI = (props) => {
               filterValues={filterValues.groupTypes}
               title={t('DRIVER_GROUP_ASSIGNED', 'Driver group (assigned)')}
             />
-            <DriversGroupTypeSelector
+            <BusinessesSelector
+              filterValues={filterValues}
+              businessesList={businessesList}
+              handleChangeBusinesses={handleChangeBusinesses}
+            />
+            {/* <DriversGroupTypeSelector
               driverGroupList={driverGroupList}
               handleChangeGroup={handleChangeGroupUnassigned}
               filterValues={filterValues.groupTypesUnassigned}
               title={t('DRIVER_GROUP_NOT_ASSIGNED', 'Driver group (general)')}
-            />
+            /> */}
           </WrapperRow>
-          <WrapperRow>
+          {/* <WrapperRow>
             <BusinessesSelector
               filterValues={filterValues}
               businessesList={businessesList}
@@ -240,7 +254,7 @@ const OrdersFilterGroupUI = (props) => {
               filterValues={filterValues}
               handleChangeDriver={handleChangeDriver}
             />
-          </WrapperRow>
+          </WrapperRow> */}
           <WrapperRow>
             <CountryFilter
               filterValues={filterValues}
@@ -295,12 +309,6 @@ const OrdersFilterGroupUI = (props) => {
                 onChange={(value) => handleChangeChildFilterValue({ assigned: value })}
               />
             </SelectWrapper>
-            <DateTypeSelector
-              filterValues={filterValues}
-              handleChangeDateType={handleChangeDateType}
-              handleChangeFromDate={handleChangeFromDate}
-              handleChangeEndDate={handleChangeEndDate}
-            />
           </WrapperRow>
           {filterValues?.metafield.map(item => (
             <WrapperRow key={item.id}>
@@ -388,10 +396,14 @@ const OrdersFilterGroupUI = (props) => {
 }
 
 export const OrdersFilterGroup = (props) => {
+  const [filterValues, { handleFilterValues }] = useFilterValues()
+
   const FilterControlProps = {
     ...props,
     UIComponent: OrdersFilterGroupUI,
-    driverGroupList: props.driverGroupList
+    driverGroupList: props.driverGroupList,
+    filterValues: filterValues,
+    setFilterValues: handleFilterValues
   }
   return (
     <>

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

@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useLanguage, useConfig, OrdersFilter as OrdersFilterController } from 'ordering-components-admin-external'
+import { DriversGroupTypeSelector } from '../DriversGroupTypeSelector'
+import { DriverMultiSelector } from '../DriverMultiSelector'
+import { Input } from '../../../styles'
+import {
+  WrapperRow
+} from './styles'
+import { useFilterValues } from '../../../contexts/FilterValuesContext'
+
+const OrdersHeaderFilterGroupUI = (props) => {
+  const {
+    filterValues,
+    driverGroupList,
+    driversList,
+    handleChangeDriver,
+    handleChangeFilterValues,
+    handleChangeExternalId,
+    handleChangeGroupUnassigned
+  } = props
+
+  const [{ dictionary }] = useLanguage()
+  const [isShow, setIsShow] = useState(false)
+  const metafieldRef = useRef()
+  const [{ configs, loading }] = useConfig()
+  const configFilter = configs?.filter_order_options?.value.split('|').map(value => (value)) || []
+
+  const handleClickOutside = (e) => {
+    if (!isShow) return
+    const outsideCalendar = !metafieldRef.current?.contains(e.target)
+    if (outsideCalendar) {
+      setIsShow(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleClickOutside)
+    return () => window.removeEventListener('mouseup', handleClickOutside)
+  }, [isShow])
+
+  useEffect(() => {
+    if (Object.keys(filterValues).length > 0) {
+      handleChangeFilterValues(filterValues)
+    }
+  }, [filterValues])
+
+  return (
+    <>
+      <WrapperRow>
+        {!loading && configFilter.includes('external_id') && (
+          <Input
+            type='text'
+            placeholder={dictionary?.EXTERNAL_ID ?? 'External Id'}
+            autoComplete='off'
+            value={filterValues?.externalId || ''}
+            onChange={handleChangeExternalId}
+          />
+        )}
+        {!loading && configFilter.includes('driver') && (
+          <DriverMultiSelector
+            drivers={driversList.drivers}
+            filterValues={filterValues}
+            handleChangeDriver={handleChangeDriver}
+          />
+        )}
+        {!loading && configFilter.includes('driver_group_general') && (
+          <DriversGroupTypeSelector
+            driverGroupList={driverGroupList}
+            handleChangeGroup={handleChangeGroupUnassigned}
+            filterValues={filterValues.groupTypesUnassigned}
+            title={dictionary?.DRIVER_GROUP_NOT_ASSIGNED ?? 'Driver group (general)'}
+          />
+        )}
+      </WrapperRow>
+    </>
+  )
+}
+
+export const OrdersHeaderFilterGroup = (props) => {
+  const [filterValues, { handleFilterValues }] = useFilterValues()
+
+  const FilterControlProps = {
+    ...props,
+    UIComponent: OrdersHeaderFilterGroupUI,
+    driverGroupList: props.driverGroupList,
+    filterValues: filterValues,
+    setFilterValues: handleFilterValues
+  }
+  return (
+    <>
+      <OrdersFilterController {...FilterControlProps} />
+    </>
+  )
+}

package/src/components/Orders/OrdersHeaderFilterGroup/styles.js

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components'
+
+export const WrapperRow = styled.div`
+  display: flex;
+  width: 100% !important;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-bottom: 0px;
+
+  & > div {
+    width: 100%;
+    height: 47px;
+    margin-bottom: 20px;
+    background-color: ${props => props.theme.colors.secundary};
+    border: none;
+    font-size: 14px;
+    border-radius: 8px;
+    > div:first-child {
+      height: 100%;
+    }
+  }
+
+  .order-status-multi-select {
+    p {
+      padding: 0;
+      color: ${props => props.theme.colors.headingColor} !important;
+    }
+  }
+
+  .date-filter-container {
+    z-index: 100;
+  }
+
+  > input {
+    width: 100%;
+    height: 47px;
+    margin-bottom: 20px;
+    padding: 10px 25px;
+    box-sizing: border-box;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    -moz-appearance: textfield;
+  }
+
+  @media (min-width: 992px) {
+    flex-direction: row;
+    & > div {
+      width: 48%;
+    }
+
+    > input {
+      width: 48%;
+    }
+  }
+`
+export const Option = styled.div`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: ${props => props.theme.colors.secundaryContrast};
+  display: flex;
+  align-items: center;
+  padding: 5px;
+`

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

@@ -19,6 +19,7 @@ import { OrdersDashboard } from '../OrdersDashboard'
 import { OrderStatusSubFilter } from '../OrderStatusSubFilter'
 import { OrderNotification } from '../OrderNotification'
 import { WizardOrders } from '../WizardOrders'
+import { OrdersHeaderFilterGroup } from '../OrdersHeaderFilterGroup'
 
 const OrdersManagerUI = (props) => {
   const {
@@ -194,6 +195,11 @@ const OrdersManagerUI = (props) => {
           setSlaSettingTime={setSlaSettingTime}
           isLateralBar={isLateralBar}
         />
+        <OrdersHeaderFilterGroup
+          driverGroupList={driverGroupList}
+          driversList={driversList}
+          handleChangeFilterValues={handleChangeFilterValues}
+        />
         <OrderStatusFilterBar
           isUseQuery={isUseQuery}
           selectedOrderStatus={ordersStatusGroup}

package/src/components/Settings/SettingsList/index.js

@@ -187,7 +187,25 @@ export const SettingsListUI = (props) => {
                               <p>{config?.description}</p>
                             )}
                             {
-                              config?.options?.length > 0 && config?.options?.map((item, j) => (
+                              config?.key !== 'filter_order_options' && config?.options?.length > 0 && config?.options?.map((item, j) => (
+                                <FormGroupWrapper key={j}>
+                                  <FormGroupCheck className='checkbox'>
+                                    <label>
+                                      <input
+                                        type='checkbox'
+                                        name={item?.value}
+                                        data-id={config?.id}
+                                        defaultChecked={config?.value.split('|').includes(item?.value)}
+                                        onChange={(e) => handleCheckBoxChange(e, true, config?.value)}
+                                      />
+                                      {t(item.text.toUpperCase(), item.text.replace(/_/g, ' ').toLowerCase())}
+                                    </label>
+                                  </FormGroupCheck>
+                                </FormGroupWrapper>
+                              ))
+                            }
+                            {
+                              config?.key === 'filter_order_options' && config?.options?.length > 0 && config?.options?.filter(option => ((option.value === 'external_id') || (option.value === 'driver') || (option.value === 'driver_group_general'))).map((item, j) => (
                                 <FormGroupWrapper key={j}>
                                   <FormGroupCheck className='checkbox'>
                                     <label>

package/src/components/Users/CustomersListing/index.js

@@ -238,7 +238,10 @@ export const CustomersListing = (props) => {
       initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
       pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
       controlType: 'pages'
-    }
+    },
+    propsToFetch: [
+      'name', 'lastname', 'email', 'phone', 'photo', 'cellphone', 'loyalty_level', 'loyalty_level_id', 'country_phone_code', 'city_id', 'city', 'address', 'addresses', 'address_notes', 'dropdown_option_id', 'dropdown_option', 'location', 'zipcode', 'level', 'enabled', 'middle_name', 'second_lastname', 'birthdate', 'phone_verified', 'email_verified', 'wallets', 'orders_count', 'push_tokens'
+    ]
   }
   return (
     <UsersListController {...customersProps} />

package/src/contexts/FilterValuesContext/index.js

@@ -0,0 +1,60 @@
+import React, { useState, createContext } from 'react'
+/**
+ * Create FilterValuesContext
+ * This context will manage the info between pages and provide an easy interface
+ */
+export const FilterValuesContext = createContext()
+
+/**
+  * Custom provider to mange shared info
+  * @param {props} props
+  */
+export const FilterValuesProvider = ({ children }) => {
+  const [filterValues, setFilterValues] = useState({
+    orderId: null,
+    externalId: null,
+    groupTypes: [],
+    groupTypesUnassigned: [],
+    dateType: null,
+    deliveryFromDatetime: null,
+    deliveryEndDatetime: null,
+    businessIds: [],
+    driverIds: [],
+    driverGroupIds: [],
+    cityIds: [],
+    statuses: [],
+    deliveryTypes: [],
+    paymethodIds: [],
+    countryCode: [],
+    currency: [],
+    metafield: [],
+    logisticStatus: null,
+    assigned: null,
+    driverGroupBusinessIds: [],
+    customerName: null,
+    customerEmail: null,
+    customerCellphone: null,
+    customerLastname: null
+  })
+
+  const handleFilterValues = (filterValues) => {
+    setFilterValues(filterValues)
+  }
+
+  const functions = {
+    handleFilterValues
+  }
+
+  return (
+    <FilterValuesContext.Provider value={[filterValues, functions]}>
+      {children}
+    </FilterValuesContext.Provider>
+  )
+}
+
+// hook context
+
+export function useFilterValues () {
+  const filterValuesManager = React.useContext(FilterValuesContext)
+  return filterValuesManager || [{}, () => {}]
+}

package/src/index.js

@@ -411,6 +411,7 @@ import { ThemeContext, ThemeProvider, useTheme } from './contexts/ThemeContext'
 import { ConfigFileContext } from './contexts/ConfigFileContext'
 import { ProjectContext, ProjectProvider, useProjectState } from './contexts/ProjectContext'
 import { InfoShareContext, InfoShareProvider, useInfoShare } from './contexts/InfoShareContext'
+import { FilterValuesContext, FilterValuesProvider, useFilterValues } from './contexts/FilterValuesContext'
 
 // hooks
 import { useOnlineStatus } from './hooks/useOnlineStatus'
@@ -842,6 +843,9 @@ export {
   InfoShareContext,
   InfoShareProvider,
   useInfoShare,
+  FilterValuesContext,
+  FilterValuesProvider,
+  useFilterValues,
   ProjectContext,
   ProjectProvider,
   useProjectState,