ordering-ui-admin-external 1.42.15 → 1.43.0

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

@@ -8,6 +8,7 @@ import {
   OrderingProductDetails
 } from './components/OrderingProducts'
 import { PageNotFound } from './components/PageNotFound'
+import { Banners } from './components/Banners'
 import {
   AllInOne,
   Appointments,
@@ -410,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'
@@ -436,6 +438,7 @@ export {
   ChatBusinessesList,
   OrdersManager,
   PageNotFound,
+  Banners,
   Messages,
   OrdersContentHeader,
   OrdersDashboardList,
@@ -840,6 +843,9 @@ export {
   InfoShareContext,
   InfoShareProvider,
   useInfoShare,
+  FilterValuesContext,
+  FilterValuesProvider,
+  useFilterValues,
   ProjectContext,
   ProjectProvider,
   useProjectState,

package/src/styles/Buttons/index.js

@@ -219,6 +219,17 @@ export const Button = styled.button`
       background: ${props => darken(0.1, props.theme.colors.lightPrimary)};
     }
   `}
+  ${({ color }) => color === 'warning' && css`
+    background: ${props => props.theme.colors.warning};
+    color: #FFF;
+    border-color: ${props => props.theme.colors.warning};
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.warning)};
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.warning)};
+    }
+  `}
   ${({ color }) => color === 'secundaryDark' && css`
     background: ${props => props.theme.colors.secundaryDarkContrast};
     color: ${props => props.theme.colors.secundaryDark};

package/template/app.js

@@ -86,14 +86,18 @@ import { CustomProject } from './pages/CustomProject'
 import { OrderingWidgets } from './pages/OrderingWidgets'
 import { BusinessDevicesList } from './pages/BusinessDevicesList'
 import { SettingsLogs } from './pages/SettingsLogs'
+import { Banners } from '../src/components/Banners'
+import { useProjectState } from '../src/contexts/ProjectContext'
 
 export const App = () => {
   const history = useHistory()
   const [events] = useEvent()
   const [{ auth, loading, user }] = useSession()
   const [orderStatus] = useOrder()
+  const [projectStatus] = useProjectState()
   const [{ configs, loading: configLoading }] = useConfig()
   const [loaded, setLoaded] = useState(false)
+  const [layoutPT, setLayoutPT] = useState(0)
   const [oneSignalState, setOneSignalState] = useState({
     notification_app: settings.notification_app
   })
@@ -102,6 +106,8 @@ export const App = () => {
   const { height } = useWindowSize()
 
   const cannyAppId = '5b05e5e2d3f6c47201694ad4'
+  const isPastDue = projectStatus.project?.current_status === 'past_due'
+  const showBanner = auth && isPastDue
 
   const { search } = useLocation()
   let queryProject
@@ -207,7 +213,14 @@ export const App = () => {
             {cannyAppId && (
               <CannyIdentification appId={cannyAppId} />
             )}
-            <Layout>
+            {showBanner && (
+              <Banners
+                type={projectStatus.project?.current_status}
+                urlToGo={settings?.billing_url}
+                setLayoutPT={setLayoutPT}
+              />
+            )}
+            <Layout pt={showBanner && `${layoutPT}px`}>
               {auth && (
                 <SidebarMenu billingUrl={settings?.billing_url} />
               )}

package/template/config.json

@@ -2,7 +2,7 @@
   "app_id": "ordering-admin-react",
   "notification_app": "dashboardweb",
   "app_name": "Ordering Admin",
-  "billing_url": "https://billing-dashboard.tryordering.com",
+  "billing_url": "https://start-free.tryordering.com",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",