@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.20-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.20-dev",
+  "version": "0.1.20-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.39-staging",
+    "@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",
@@ -82,7 +82,8 @@
     "styled-components": "^6.1.8",
     "tsdx": "^0.14.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@types/uuid": "^10.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -95,6 +96,7 @@
     "jotai": "^2.6.3",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-redux": "^9.2.0",
-    "react-switch-selector": "^2.2.1"
+    "react-switch-selector": "^2.2.1",
+    "uuid": "^10.0.0"
   }
 }

package/src/assets/icons/ActionIcon.tsx

@@ -11,7 +11,7 @@ const ActionIcon = () => (
     <path
       d="M0.5 12.2432C0.5 5.61581 5.87258 0.243225 12.5 0.243225C19.1274 0.243225 24.5 5.61581 24.5 12.2432C24.5 18.8706 19.1274 24.2432 12.5 24.2432C5.87258 24.2432 0.5 18.8706 0.5 12.2432Z"
       fill="#E95252"
-      fill-opacity="0.5"
+      fillOpacity="0.5"
     />
     <path
       d="M16.566 9.23825C16.6377 9.16909 16.6948 9.08636 16.7342 8.99488C16.7735 8.90339 16.7943 8.80499 16.7952 8.70541C16.7961 8.60582 16.7772 8.50705 16.7395 8.41486C16.7018 8.32267 16.6462 8.23891 16.5758 8.16846C16.5054 8.098 16.4217 8.04228 16.3295 8.00452C16.2374 7.96677 16.1386 7.94774 16.0391 7.94856C15.9395 7.94938 15.841 7.97002 15.7495 8.00929C15.658 8.04855 15.5752 8.10565 15.506 8.17725L12.5 11.1822L9.495 8.17725C9.42634 8.10356 9.34354 8.04446 9.25154 8.00347C9.15954 7.96247 9.06022 7.94043 8.95952 7.93865C8.85882 7.93688 8.75879 7.9554 8.6654 7.99312C8.57201 8.03084 8.48718 8.08699 8.41596 8.15821C8.34474 8.22943 8.2886 8.31426 8.25087 8.40765C8.21315 8.50104 8.19463 8.60107 8.19641 8.70177C8.19818 8.80247 8.22022 8.90178 8.26122 8.99378C8.30221 9.08578 8.36131 9.16858 8.435 9.23725L11.438 12.2432L8.433 15.2482C8.30052 15.3904 8.22839 15.5785 8.23182 15.7728C8.23525 15.9671 8.31396 16.1525 8.45138 16.2899C8.58879 16.4273 8.77417 16.506 8.96847 16.5094C9.16278 16.5128 9.35082 16.4407 9.493 16.3082L12.5 13.3032L15.505 16.3092C15.6472 16.4417 15.8352 16.5139 16.0295 16.5104C16.2238 16.507 16.4092 16.4283 16.5466 16.2909C16.684 16.1535 16.7627 15.9681 16.7662 15.7738C16.7696 15.5795 16.6975 15.3914 16.565 15.2492L13.562 12.2432L16.566 9.23825Z"

package/src/assets/icons/ArrowDownIcon.tsx

@@ -16,8 +16,8 @@ const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({ fill = '#3A3630' }) => {
       <rect width="24" height="24" fill={fill} />
       <path
         opacity="0.4"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.69104 9.8912C6.82604 9.75637 7.00903 9.68063 7.19984 9.68063C7.39064 9.68063 7.57363 9.75637 7.70864 9.8912L11.9998 14.1824L16.291 9.8912C16.4275 9.76402 16.608 9.69478 16.7946 9.69807C16.9811 9.70136 17.1591 9.77693 17.291 9.90884C17.4229 10.0408 17.4985 10.2187 17.5018 10.4053C17.5051 10.5918 17.4358 10.7723 17.3086 10.9088L12.5086 15.7088C12.3736 15.8436 12.1906 15.9194 11.9998 15.9194C11.809 15.9194 11.626 15.8436 11.491 15.7088L6.69104 10.9088C6.5562 10.7738 6.48047 10.5908 6.48047 10.4C6.48047 10.2092 6.5562 10.0262 6.69104 9.8912Z"
         fill="#3A3630"
       />

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">