@bjsdistribution/dms-client-return 0.1.37-prod → 0.1.38-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.37-prod",
+  "version": "0.1.38-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/client-portal/DateFilterStore.ts

@@ -18,7 +18,7 @@ interface FilterState {
 }
 
 const initialState: FilterState = {
-  'x-filters': [],
+  'x-filters': [{ field: 'order_status', op: '=', value: 'complete' }],
   'x-pagination': { page: 1, per_page: 50 },
 };
 

package/src/components/client-portal/ReturnStatus.tsx

@@ -70,10 +70,9 @@ const ReturnStatus = () => {
 
   useEffect(() => {
     if (
-      (clientPortal &&
-        debouncedSearchAfterText === '' &&
-        status == 'scheduled_for_return') ||
-      status == 'return_completed'
+      clientPortal &&
+      debouncedSearchAfterText === '' &&
+      (status == 'scheduled_for_return' || status == 'return_completed')
     ) {
       fetchData();
     }
@@ -87,13 +86,13 @@ const ReturnStatus = () => {
 
   const returnCounts = useMemo(
     () => [
-      {
-        id: 1,
-        icon: 'outstanding_return',
-        status: 'outstanding_return',
-        count: count?.outstanding_count,
-        label: 'Outstanding Return',
-      },
+      // {
+      //   id: 1,
+      //   icon: 'outstanding_return',
+      //   status: 'outstanding_return',
+      //   count: count?.outstanding_count,
+      //   label: 'Outstanding Return',
+      // },
       // {
       //   id: 2,
       //   icon: 'scheduled_for_return',
@@ -102,7 +101,7 @@ const ReturnStatus = () => {
       //   label: 'Scheduled For Return',
       // },
       {
-        id: 2,
+        id: 3,
         icon: 'return_completed',
         status: 'return_completed',
         count: count?.completed_count,

package/src/components/order-daily-overview/header-filters/HeaderFilter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
 import { useClientPortal } from '../../store';
-import ReturnStatus from '../../client-portal/ReturnStatus';
+// import ReturnStatus from '../../client-portal/ReturnStatus';
 
 function HeaderFilter() {
   const [clientPortal] = useClientPortal();
@@ -10,7 +10,8 @@ function HeaderFilter() {
   return (
     <>
       {clientPortal ? (
-        <ReturnStatus />
+        // <ReturnStatus />
+        <></>
       ) : (
         <>
           <CoverPage>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   StyledFIlterELements,
   StyledFiter,
@@ -6,14 +6,32 @@ import {
   Text,
 } from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
-import { useClientPortal, useCustomerData } from '../../../store';
+import {
+  useAtom,
+  useClientPortal,
+  useCustomerData,
+  useSearchAfterText,
+  useSearchText,
+  useStatsCPCount,
+} from '../../../store';
 import { useParams } from 'react-router-dom';
 import ReturnRTFilters from '../../../client-portal/ReturnRTFilters';
+import { returnCountType } from '../../../client-portal/ReturnStatus';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
 
 const ReturnFilter = () => {
   const [customers] = useCustomerData();
   const [clientPortal] = useClientPortal();
   const { status } = useParams();
+  const [count, setCount] = useStatsCPCount();
+  const [debouncedSearchAfterText] = useSearchAfterText();
+  const [debouncedSearchText] = useSearchText();
+
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
 
   const queryParams = new URLSearchParams(location.search);
   const customerId = queryParams.get('customerId');
@@ -32,7 +50,8 @@ const ReturnFilter = () => {
       case 'scheduled_for_return':
         return 'All Scheduled Orders';
       case 'return_completed':
-        return 'View Return Order';
+        // return 'View Return Order';
+        return 'Completed Return';
       default:
         return status
           .replace(/_/g, ' ')
@@ -40,6 +59,31 @@ const ReturnFilter = () => {
     }
   };
 
+  const { data: statsData, loading: statsApiLoading, fetchData } = useAxios<{
+    data: returnCountType[];
+  }>({
+    endpoint: `v1/portal/return/stats/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: cleanedFilters,
+  });
+
+  useEffect(() => {
+    if (
+      clientPortal &&
+      debouncedSearchAfterText === '' &&
+      status == 'return_completed'
+    ) {
+      fetchData();
+    }
+  }, [debouncedSearchAfterText, debouncedSearchText, JSON.stringify(filters)]);
+
+  useEffect(() => {
+    if (statsData?.data && typeof statsData?.data === 'object') {
+      setCount(statsData?.data);
+    }
+  }, [statsApiLoading]);
+
   return (
     <>
       <StyledFiter>
@@ -53,7 +97,12 @@ const ReturnFilter = () => {
           </>
         ) : (
           <>
-            <Text>{status ? getStatusLabel(status) : ''}</Text>
+            <Text>
+              {status
+                ? `${getStatusLabel(status)} (${count?.completed_count})`
+                : ''}
+            </Text>
+
             <ReturnRTFilters />
           </>
         )}

package/src/index.tsx

@@ -136,7 +136,7 @@ function ReturnClient() {
       <Suspense fallback={<LoadingMessage />}>
         {clientPortal ? (
           <Routes>
-            <Route path="" element={<Navigate to={'outstanding_return'} />} />
+            <Route path="" element={<Navigate to={'return_completed'} />} />
             <Route path=":status" element={<ReturnOverview />} />
             <Route
               path="view/:id"