@bjsdistribution/dms-client-return 0.1.16-prod → 0.1.17-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.16-prod",
+  "version": "0.1.17-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.3.51-prod",
+    "@bjsdistribution/dms-component-library": "0.3.50-staging",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

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

@@ -0,0 +1,139 @@
+import { atom } from 'jotai';
+
+interface Filter {
+  field: string;
+  op: string;
+  value: any;
+}
+
+interface Pagination {
+  page: number;
+  per_page: number;
+}
+
+interface FilterState {
+  'x-filters': Filter[];
+  'x-pagination': Pagination;
+}
+
+const initialState: FilterState = {
+  'x-filters': [],
+  'x-pagination': { page: 1, per_page: 50 },
+};
+
+const overviewFilterReducer = (
+  state: FilterState,
+  action: any
+): FilterState => {
+  switch (action.type) {
+    case 'SET_CP_DATE_FILTER': {
+      const { startDate, endDate } = action.payload;
+
+      const filters: Filter[] = [];
+
+      if (startDate) {
+        filters.push({
+          field: 'created_at',
+          op: '>=',
+          value: `${startDate}T00:00:00+00:00`,
+        });
+      }
+
+      if (endDate) {
+        filters.push({
+          field: 'created_at',
+          op: '<=',
+          value: `${endDate}T23:59:59+00:00`,
+        });
+      }
+
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'created_at'),
+          ...filters,
+        ],
+      };
+    }
+
+    //client portal
+    case 'SET_SCHEDULED_RETURN_FILTER':
+      if (action.payload) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'order_status'),
+            {
+              field: 'order_status',
+              op: '=',
+              value: action.payload,
+            },
+          ],
+        };
+      } else {
+        return {
+          ...state,
+          'x-filters': state['x-filters'].filter(
+            f => f.field !== 'order_status'
+          ),
+        };
+      }
+
+    case 'SET_RETURN_COMPLETED_FILTER':
+      if (action.payload) {
+        return {
+          ...state,
+          'x-filters': [
+            ...state['x-filters'].filter(f => f.field !== 'order_status'),
+            {
+              field: 'order_status',
+              op: '=',
+              value: action.payload,
+            },
+          ],
+        };
+      } else {
+        return {
+          ...state,
+          'x-filters': state['x-filters'].filter(
+            f => f.field !== 'order_status'
+          ),
+        };
+      }
+
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+    default:
+      return state;
+  }
+};
+
+const overviewfiltersStateAtom = atom(initialState);
+
+export const dateFilterCPReducer = atom(
+  get => get(overviewfiltersStateAtom),
+  (get, set, action) =>
+    set(
+      overviewfiltersStateAtom,
+      overviewFilterReducer(get(overviewfiltersStateAtom), action)
+    )
+);

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

@@ -7,17 +7,14 @@ import { Empty, notification, Skeleton } from 'antd';
 import { format } from 'date-fns';
 import { useAtom } from 'jotai';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { NavLink, useParams } from 'react-router-dom';
-import dayjs from 'dayjs';
+import { NavLink } from 'react-router-dom';
 import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
 import {
   useClientOutstandingReturnData,
   useClientPortal,
-  useEndDate,
   useLocationData,
   useSearchText,
   useSelectedClientPortOrders,
-  useStartDate,
 } from '../store';
 import { usefetchAgain } from '../order-view/store';
 import {
@@ -37,10 +34,11 @@ import {
 import PrinterIcon from '../../assets/icons/PrinterIcon';
 import DownIcon from '../../assets/icons/DownIcon';
 import PrintDropDownReturn from '../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
+import { dateFilterCPReducer } from './DateFilterStore';
 
 const OutstandingTable = () => {
-  const [state] = useAtom(filtersReducerAtom);
-  const { 'x-pagination': pagination } = state;
+  const [statePagination] = useAtom(filtersReducerAtom);
+  const { 'x-pagination': pagination } = statePagination;
   const [
     outstandingReturnData,
     setOutstandingReturnData,
@@ -53,11 +51,13 @@ const OutstandingTable = () => {
   const [, setPaginationObject] = UsePaginationData();
   const [callForFetch] = usefetchAgain();
   const [clientPortal] = useClientPortal();
-  const { status } = useParams();
   const [selectedOrderIds, setSelectedOrderIds] = useSelectedClientPortOrders();
   const [selectClientAll, setSelectClientAll] = useState(false);
   const [debouncedSearchText] = useSearchText();
 
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+
   //sorting
   const [sortConfig, setSortConfig] = useState<{
     key: string;
@@ -123,56 +123,13 @@ const OutstandingTable = () => {
     }
   };
 
-  //CP
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
-
-  const filters = useMemo(() => {
-    if (!clientPortal) return [];
-
-    const stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
-
-    const sDate = startDate?.isValid?.() ? startDate : dayjs(stored?.startDate);
-    const eDate = endDate?.isValid?.()
-      ? endDate
-      : stored?.endDate
-      ? dayjs(stored?.endDate)
-      : null;
-
-    if (!sDate?.isValid?.()) return [];
-
-    let dateFilters: any[] = [];
-
-    if (eDate && eDate.isValid()) {
-      dateFilters = [
-        { field: 'created_at', op: '>=', value: sDate.format('YYYY-MM-DD') },
-        {
-          field: 'created_at',
-          op: '<=',
-          value: eDate.add(1, 'day').format('YYYY-MM-DD'),
-        },
-      ];
-    } else {
-      dateFilters = [
-        {
-          field: 'created_at',
-          op: '=',
-          value: sDate.format('YYYY-MM-DD'),
-        },
-      ];
-    }
-
-    const baseFilters: any[] =
-      status === 'outstanding_return'
-        ? [
-            { field: 'isdeleted', op: '=', value: 0 },
-            { field: 'product_return_action_id', op: '=', value: 'RTS' },
-          ]
-        : [];
-
-    return [...baseFilters, ...dateFilters];
-  }, [startDate, endDate, status]);
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
+  const baseFilters = [
+    { field: 'isdeleted', op: '=', value: 0 },
+    { field: 'product_return_action_id', op: '=', value: 'RTS' },
+  ];
 
+  const modifiedFilters = [...baseFilters, ...cleanedFilters];
   const {
     data: fetchedOrderData,
     loading: returnDataLoad,
@@ -181,27 +138,15 @@ const OutstandingTable = () => {
   } = useAxios<ApiResponse>({
     endpoint: '/v1/return/product/pending/',
     method: 'GET',
-    filters: filters,
+    filters: modifiedFilters,
     pagination: pagination,
   });
-  console.log(filters, 'outstanding filters');
-  const hasFetchedRef = useRef(false);
 
   useEffect(() => {
-    const shouldFetch =
-      clientPortal &&
-      debouncedSearchText === '' &&
-      filters?.length > 0 &&
-      !hasFetchedRef.current;
-
-    if (shouldFetch) {
+    if (clientPortal && debouncedSearchText === '') {
       fetchData();
-      hasFetchedRef.current = true;
     }
-  }, [debouncedSearchText, filters, clientPortal]);
-  useEffect(() => {
-    hasFetchedRef.current = false;
-  }, [debouncedSearchText, filters]);
+  }, [JSON.stringify(modifiedFilters), debouncedSearchText]);
 
   useEffect(() => {
     setLoading(returnDataLoad);
@@ -227,7 +172,6 @@ const OutstandingTable = () => {
     }
   }, [fetchedOrderData, returnDataLoad]);
 
-  // console.log(modifiedFilters, 'modifiedFilters');
   useEffect(() => {
     setLoading(returnDataLoad);
     if (fetchedOrderData && fetchedOrderData?.data && locationData) {

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

@@ -8,10 +8,8 @@ import styled from 'styled-components';
 import {
   useAtom,
   useClientPortal,
-  useEndDate,
   useReturnConfirmedOrderData,
   useSearchAfterText,
-  useStartDate,
   useStatsCPCount,
 } from '../store';
 
@@ -20,38 +18,37 @@ import { javascriptStringDumpToJSON } from '../utils';
 import { UsePaginationData } from '../order-daily-overview/store/store';
 import { notification } from 'antd';
 import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
-import dayjs from 'dayjs';
 import { returnCountType } from './ReturnStatus';
 import { useParams } from 'react-router-dom';
+import { dateFilterCPReducer } from './DateFilterStore';
 
 function ReturnAfterSearchBar() {
   const [searchText, setSearchText] = useState('');
   const [debouncedSearchText, setDebouncedSearchText] = useSearchAfterText();
   const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
-  //condition on client view
   const [, setPaginationObject] = UsePaginationData();
+
+  const [statePagination] = useAtom(filtersReducerReturnAtom);
+  const { 'x-pagination': pagination } = statePagination;
+  const [, setCount] = useStatsCPCount();
+  const [clientPortal] = useClientPortal();
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+  const { status } = useParams();
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
   };
-  //CP
-  const [modifiedStatsFilters, setModifiedStatsFilters] = useState<any[]>([]);
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
-  const [state] = useAtom(filtersReducerReturnAtom);
-  const { 'x-filters': filters, 'x-pagination': pagination } = state;
-  const [count, setCount] = useStatsCPCount();
-  const [clientPortal] = useClientPortal();
-  const { status } = useParams();
 
   const { paginationData, fetchData: returnAfterCall } = useAxios<ApiResponse>({
     endpoint: '/v1/return/orders/',
     method: 'GET',
-    filters: filters && filters?.length > 0 ? filters : undefined,
+    filters: filters,
     pagination: pagination,
   });
 
   useEffect(() => {
-    if (debouncedSearchText?.length > 1) {
+    if (debouncedSearchText?.length > 2) {
       returnAfterCall({
         endPointQuery: `?search_term=${debouncedSearchText}`,
       }).then((response: any) => {
@@ -76,7 +73,8 @@ function ReturnAfterSearchBar() {
         message: 'Search Phrase cannot be less than 3 characters',
       });
     }
-  }, [debouncedSearchText]);
+  }, [debouncedSearchText, JSON.stringify(filters)]);
+
   // Debouncing effect
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -92,70 +90,31 @@ function ReturnAfterSearchBar() {
       setSearchText('');
     }
   }, [debouncedSearchText]);
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
 
-  //
-
-  const getDateFilters = (
-    startDate: dayjs.Dayjs | null,
-    endDate: dayjs.Dayjs | null
-  ) => {
-    const stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
-
-    const sDate = startDate?.isValid?.() ? startDate : dayjs(stored?.startDate);
-    const eDate = endDate?.isValid?.()
-      ? endDate
-      : stored?.endDate
-      ? dayjs(stored?.endDate)
-      : null;
-
-    if (!sDate?.isValid?.()) return [];
-
-    let dateFilters = [];
-
-    if (eDate && eDate.isValid()) {
-      dateFilters = [
-        { field: 'created_at', op: '>=', value: sDate.format('YYYY-MM-DD') },
-        {
-          field: 'created_at',
-          op: '<=',
-          value: eDate.add(1, 'day').format('YYYY-MM-DD'),
-        },
-      ];
-    } else {
-      dateFilters = [
-        {
-          field: 'created_at',
-          op: '=',
-          value: sDate.format('YYYY-MM-DD'),
-        },
-      ];
-    }
-
-    return dateFilters;
-  };
-
-  useEffect(() => {
-    if (!clientPortal) return;
-
-    const dateFilters = getDateFilters(startDate, endDate);
-    setModifiedStatsFilters(dateFilters);
-  }, [startDate, endDate]);
-
-  const { data: statsData, fetchData: fetchStatsData } = useAxios<{
+  const { fetchData: fetchStatsData } = useAxios<{
     data: returnCountType[];
   }>({
     endpoint: `v1/portal/return/stats/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: modifiedStatsFilters,
+    filters: [...cleanedFilters],
   });
 
   useEffect(() => {
     const validStatuses = ['scheduled_for_return', 'return_completed'];
     const isClientView = clientPortal && validStatuses.includes(status || '');
 
-    if (!isClientView || debouncedSearchText?.length < 3) return;
-    console.log('IN after view entered');
+    if (!isClientView) return;
+
+    const trimmedText = debouncedSearchText?.trim() || '';
+    if (trimmedText.length > 0 && trimmedText.length <= 2) {
+      notification.warning({
+        message: 'Search phrase cannot be less than 2 characters',
+      });
+      return;
+    }
+    if (trimmedText.length === 0) return;
     const statusTypeMap: Record<string, string> = {
       scheduled_for_return: 'scheduled',
       return_completed: 'complete',
@@ -163,26 +122,22 @@ function ReturnAfterSearchBar() {
 
     const type = statusTypeMap[status as keyof typeof statusTypeMap];
 
-    const fetchStats = async () => {
-      const response = await fetchStatsData({
-        endPointQuery: `?search_term=${debouncedSearchText}&type=${type}`,
-      });
-      //@ts-ignore
-      if (response?.data) {
-        console.log('inside response', response);
-        // @ts-ignore
-        setCount(response?.data);
-      } else {
+    fetchStatsData({
+      endPointQuery: `?search_term=${trimmedText}&type=${type}`,
+    })
+      .then((response: any) => {
+        if (response?.data) {
+          console.log('inside response', response);
+          setCount(response.data);
+        } else {
+          setCount(null);
+        }
+      })
+      .catch((error: any) => {
+        console.error('Error fetching stats:', error);
         setCount(null);
-      }
-    };
-
-    fetchStats();
-  }, [debouncedSearchText, status, clientPortal]);
-
-  console.log(statsData, 'statsData');
-
-  console.log(count, 'new count');
+      });
+  }, [debouncedSearchText, status]);
 
   const handleClear = () => {
     setSearchText('');

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

@@ -9,9 +9,9 @@ import {
 } from '../order-daily-overview/store/store';
 import { useClientPortal } from '../store';
 import { useParams } from 'react-router-dom';
-import RouterHeader from '../order-daily-overview/header/route-header/RouterHeader';
 import OutstandingTable from './OutstandingTable';
 import ConfirmedMain from './return-confirm/ConfirmedMain';
+import ClientRouterHeader from '../order-daily-overview/header/route-header/ClientRouterHeader';
 
 const ReturnOverview = () => {
   const [paginationObj] = UsePaginationData();
@@ -32,9 +32,18 @@ const ReturnOverview = () => {
   const shouldShowReturnAfterTable =
     (clientPortal && status === 'scheduled_for_return') ||
     (clientPortal && status === 'return_completed');
+
+  const validStatuses = [
+    'outstanding_return',
+    'scheduled_for_return',
+    'return_completed',
+  ];
+
   return (
     <>
-      <RouterHeader />
+      {clientPortal &&
+        typeof status === 'string' &&
+        validStatuses.includes(status) && <ClientRouterHeader />}
       <div>
         <DashBoardWrapper>
           <div className="Tableconatiner">