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

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

@@ -8,163 +8,51 @@ import styled from 'styled-components';
 import {
   useAtom,
   useClientOutstandingReturnData,
-  useClientPortal,
-  useEndDate,
   useSearchText,
-  useStartDate,
   useStatsCPCount,
 } from '../store';
-import dayjs from 'dayjs';
 import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
 import { ApiResponse } from '../types';
 import { javascriptStringDumpToJSON } from '../utils';
 import { UsePaginationData } from '../order-daily-overview/store/store';
 import { notification } from 'antd';
-import { useParams } from 'react-router-dom';
 import { returnCountType } from './ReturnStatus';
+import { dateFilterCPReducer } from './DateFilterStore';
 
 function ReturnSearchBar() {
   const [searchText, setSearchText] = useState('');
   const [debouncedSearchText, setDebouncedSearchText] = useSearchText();
-  const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
   const [, setOutstandingData] = useClientOutstandingReturnData();
-  const { status } = useParams();
-  //condition on client view
-  const [clientPortal] = useClientPortal();
   const [, setPaginationObject] = UsePaginationData();
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(event.target.value);
   };
-  //CP
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
-  const [state] = useAtom(filtersReducerAtom);
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+  const [statePagination] = useAtom(filtersReducerAtom);
   const [, setCount] = useStatsCPCount();
-  const [modifiedStatsFilters, setModifiedStatsFilters] = useState<any[]>([]);
+  const { 'x-pagination': pagination } = statePagination;
 
-  const { 'x-pagination': pagination } = state;
+  const baseFilters = [
+    { field: 'isdeleted', op: '=', value: 0 },
+    { field: 'product_return_action_id', op: '=', value: 'RTS' },
+  ];
 
-  useEffect(() => {
-    const isClientOutstanding = clientPortal && status === 'outstanding_return';
-    if (!isClientOutstanding) return;
-
-    setModifiedFilters([
-      { field: 'isdeleted', op: '=', value: 0 },
-      { field: 'product_return_action_id', op: '=', value: 'RTS' },
-    ]);
-  }, []);
-
-  useEffect(() => {
-    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 = [];
-
-    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 updatedFilters =
-      status === 'outstanding_return'
-        ? [
-            { field: 'isdeleted', op: '=', value: 0 },
-            { field: 'product_return_action_id', op: '=', value: 'RTS' },
-            ...dateFilters,
-          ]
-        : dateFilters;
-
-    setModifiedFilters(updatedFilters);
-  }, [startDate, endDate, status]);
-
-  //For stats
-
-  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 {
-    // loading,
-    paginationData,
-    fetchData: getPendingData,
-    // data: fetchedReturnOrderData,
-  } = useAxios<ApiResponse>({
+  const modifiedFilters = [...baseFilters, ...filters];
+  const { paginationData, fetchData: getPendingData } = useAxios<ApiResponse>({
     endpoint: '/v1/return/product/pending/',
     method: 'GET',
     filters: modifiedFilters,
     pagination: pagination,
   });
 
+  // Debouncing effect
   useEffect(() => {
-    if (debouncedSearchText?.length > 1) {
+    const trimmedText = debouncedSearchText?.trim() || '';
+
+    if (trimmedText.length > 2) {
       getPendingData({
-        endPointQuery: `?search_term=${debouncedSearchText}`,
+        endPointQuery: `?search_term=${trimmedText}`,
       }).then((response: any) => {
         if (paginationData) {
           const formattedPagination = javascriptStringDumpToJSON(
@@ -175,22 +63,18 @@ function ReturnSearchBar() {
         }
 
         if (response?.data?.length > 0) {
-          setOutstandingData(response?.data);
+          setOutstandingData(response.data);
         } else {
           setOutstandingData([]);
         }
       });
-    } else if (
-      debouncedSearchText?.length > 0 &&
-      debouncedSearchText?.length <= 2
-    ) {
+    } else if (trimmedText.length > 0 && trimmedText.length <= 2) {
       notification.warning({
-        message: 'Search Phrase cannot be less than 3 characters',
+        message: 'Search phrase cannot be less than 2 characters',
       });
     }
-  }, [debouncedSearchText]);
+  }, [debouncedSearchText, JSON.stringify(modifiedFilters)]);
 
-  // Debouncing effect
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedSearchText(searchText);
@@ -213,28 +97,33 @@ function ReturnSearchBar() {
     endpoint: `v1/portal/return/stats/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: modifiedStatsFilters,
+    filters: filters,
   });
 
   useEffect(() => {
-    const isClientOutstanding = clientPortal && status === 'outstanding_return';
-    if (!isClientOutstanding || debouncedSearchText?.length < 3) return;
+    const trimmedText = debouncedSearchText?.trim() || '';
 
-    const fetchStats = async () => {
-      const response = await fetchStatsData({
-        endPointQuery: `?search_term=${debouncedSearchText}&type=outstanding`,
-      });
-      //@ts-ignore
-      if (response?.data) {
+    if (trimmedText.length > 2) {
+      const fetchStats = async () => {
+        const response = await fetchStatsData({
+          endPointQuery: `?search_term=${trimmedText}&type=outstanding`,
+        });
         //@ts-ignore
-        setCount(response?.data); // Set the count here
-      } else {
-        setCount(null); // fallback if no data
-      }
-    };
+        if (response?.data) {
+          //@ts-ignore
+          setCount(response?.data);
+        } else {
+          setCount(null);
+        }
+      };
 
-    fetchStats();
-  }, [debouncedSearchText, status, clientPortal]);
+      fetchStats();
+    } else if (trimmedText.length > 0 && trimmedText.length <= 2) {
+      notification.warning({
+        message: 'Search phrase cannot be less than 3 characters',
+      });
+    }
+  }, [debouncedSearchText, JSON.stringify(modifiedFilters)]);
 
   const handleClear = () => {
     setSearchText('');

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

@@ -3,21 +3,19 @@ import {
   device,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import {
   useActiveCardId,
   useAtom,
   useClientPortal,
-  useEndDate,
   useSearchAfterText,
   useSearchText,
-  useStartDate,
   useStatsCPCount,
 } from '../store';
 import { useNavigate, useParams } from 'react-router-dom';
-import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
-import dayjs from 'dayjs';
+import { dateFilterCPReducer } from './DateFilterStore';
+// import dayjs from 'dayjs';
 export type returnCountType = {
   outstanding_count: number | null;
   scheduled_count: number;
@@ -31,66 +29,18 @@ const ReturnStatus = () => {
     completed_count: number;
   };
 
-  // const [count, setCount] = useState<returnCountType[] | undefined>();
   const [activeCardId, setActiveCardId] = useActiveCardId();
-  const [, dispatch] = useAtom(filtersReducerReturnAtom);
+  const [state, dispatch] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
   const { status } = useParams();
+  const navigate = useNavigate();
   const [count, setCount] = useStatsCPCount();
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
   const [clientPortal] = useClientPortal();
-  const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
-  const [debouncedSearchText] = useSearchText();
-  const [debouncedSearchAfterText] = useSearchAfterText();
-
-  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);
-    setModifiedFilters(dateFilters);
-  }, [startDate, endDate]);
-
-  //stats API
-
+  const [debouncedSearchText, setOutstandingSearch] = useSearchText();
+  const [
+    debouncedSearchAfterText,
+    setDebouncedSearchText,
+  ] = useSearchAfterText();
   const { data: statsData, loading: apiLoading, fetchData } = useAxios<{
     data: returnCountType[];
   }>({
@@ -98,33 +48,30 @@ const ReturnStatus = () => {
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
-    filters: modifiedFilters,
+    filters: filters,
   });
 
-  const prevSearchTextRef = useRef('');
-  const prevSearchAfterTextRef = useRef('');
-
   useEffect(() => {
-    const prev = prevSearchTextRef.current;
-    if (clientPortal && prev && debouncedSearchText === '') {
+    if (
+      clientPortal &&
+      debouncedSearchText === '' &&
+      status == 'outstanding_return'
+    ) {
       fetchData();
     }
-    prevSearchTextRef.current = debouncedSearchText;
-  }, [debouncedSearchText, startDate, endDate]);
+  }, [debouncedSearchText, debouncedSearchAfterText, JSON.stringify(filters)]);
 
   useEffect(() => {
-    const prev = prevSearchAfterTextRef.current;
-    if (clientPortal && prev && debouncedSearchAfterText === '') {
+    if (
+      (clientPortal &&
+        debouncedSearchAfterText === '' &&
+        status == 'scheduled_for_return') ||
+      status == 'return_completed'
+    ) {
+      console.log('CALL');
       fetchData();
     }
-    prevSearchAfterTextRef.current = debouncedSearchAfterText;
-  }, [debouncedSearchAfterText, startDate, endDate]);
-
-  console.log(debouncedSearchText, 'debouncedSearchText');
-  console.log(debouncedSearchAfterText, 'debouncedSearchAfterText');
-  useEffect(() => {
-    fetchData();
-  }, [startDate, endDate]);
+  }, [debouncedSearchAfterText, debouncedSearchText, JSON.stringify(filters)]);
 
   useEffect(() => {
     if (statsData && statsData?.data) {
@@ -138,33 +85,35 @@ const ReturnStatus = () => {
       id: 1,
       icon: 'outstanding_return',
       status: 'outstanding_return',
-      count: count?.outstanding_count || 0,
+      count: count?.outstanding_count,
       label: 'Outstanding Return',
     },
     {
       id: 2,
       icon: 'scheduled_for_return',
       status: 'scheduled_for_return',
-      count: count?.scheduled_count || 0,
+      count: count?.scheduled_count,
       label: 'Scheduled For Return',
     },
     {
       id: 3,
       icon: 'return_completed',
       status: 'return_completed',
-      count: count?.completed_count || 0,
+      count: count?.completed_count,
       label: 'Return Completed',
     },
   ];
-  const navigate = useNavigate();
-  const [, setDebouncedSearchText] = useSearchAfterText();
 
   const handleCardClick = (item: any) => {
     if (activeCardId === item?.id) {
       return;
     }
     setActiveCardId(item?.id);
+    //for dev
     navigate(`/return/${item?.status}`);
+    //for local
+    //navigate(`/${item?.status}`);
+    setOutstandingSearch('');
     setDebouncedSearchText('');
     if (item?.status == 'scheduled_for_return') {
       dispatch({

package/src/components/client-portal/return-confirm/ConfirmedMain.tsx

@@ -1,21 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-// import OrderTable from './table/OrderTable';
-// import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
-// import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
-// import {
-//   useItemsPerReturnPage,
-//   useLoading,
-//   UsePaginationData,
-//   UsePaginationReturnData,
-// } from '../store/store';
-// import { ApiResponse } from '../common/interface';
-// import { useAxios } from '@bjsdistribution/dms-component-library';
-// import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
-// import { notification } from 'antd';
-// import ReturnPagination from '../table-view/ReturnPagination';
 import {
   useAtom,
+  useClientPortal,
   // useCallApiAgain,
   useReturnConfirmedOrderData,
   useSearchAfterText,
@@ -32,14 +19,17 @@ import { useAxios } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../types';
 import { notification } from 'antd';
 import ReturnPagination from '../../order-daily-overview/table-view/ReturnPagination';
-import { useParams } from 'react-router-dom';
+// import { useParams } from 'react-router-dom';
+import { dateFilterCPReducer } from '../DateFilterStore';
 
 const ConfirmedMain = () => {
   const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
   const [, setLoading] = useLoading();
-  const [state] = useAtom(filtersReducerReturnAtom);
+  const [statePagination] = useAtom(filtersReducerReturnAtom);
   // const [callApi] = useCallApiAgain();
-  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const { 'x-pagination': pagination } = statePagination;
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
   const [paginationObj] = UsePaginationReturnData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
@@ -52,7 +42,8 @@ const ConfirmedMain = () => {
   const handleItemsPerPageChange = (itemsPerPage: number) => {
     setItemsPerPage(itemsPerPage);
   };
-  const { status } = useParams();
+  // const { status } = useParams();
+  const [clientPortal] = useClientPortal();
 
   const {
     data: fetchedReturnOrderData,
@@ -62,17 +53,15 @@ const ConfirmedMain = () => {
   } = useAxios<ApiResponse>({
     endpoint: '/v1/return/orders/',
     method: 'GET',
-    filters: filters && filters?.length > 0 ? filters : undefined,
+    filters: filters,
     pagination: pagination,
   });
 
   useEffect(() => {
-    const shouldFetch = debouncedSearchText === '' && filters?.length > 0;
-
-    if (shouldFetch) {
+    if (clientPortal && debouncedSearchText === '') {
       fetchData();
     }
-  }, [debouncedSearchText, status, JSON.stringify(filters)]);
+  }, [JSON.stringify(filters), debouncedSearchText]);
 
   useEffect(() => {
     setLoading(loading);

package/src/components/client-portal/return-confirm/ReturnConfirmedTable.tsx

@@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom';
 import {
   Checkbox,
   displayValueOrNA,
-  // useApiHook,
 } from '@bjsdistribution/dms-component-library';
 import {
   useLoading,
@@ -107,45 +106,18 @@ const ReturnConfirmedTable = () => {
     }
   };
 
-  // const handleSelectAll = (e: any) => {
-  //   setSelectAll(e.target.checked);
-  //   if (e.target.checked) {
-  //     setSelectedReturnOrder(
-  //       returnAfterOrder.map((e: any) => ({
-  //         id: e.id,
-  //         status_id: 3,
-  //       }))
-  //     );
-  //   } else {
-  //     setSelectedReturnOrder([]);
-  //   }
-  // };
-
-  // const handleSelectInvoice = (id: any) => {
-  //   setSelectedReturnOrder((prevSelectedInvoices: any) => {
-  //     const isSelected = prevSelectedInvoices?.some(
-  //       (item: any) => item.id === id
-  //     );
-
-  //     if (isSelected) {
-  //       return prevSelectedInvoices.filter((items: any) => items.id !== id);
-  //     } else {
-  //       return [...prevSelectedInvoices, { id, status_id: 3 }];
-  //     }
-  //   });
-  // };
-
   const getStatusClass = (status: string) => {
     switch (status) {
       case 'Cancelled':
+      case 'Failed':
         return { color: '#E95252', background: 'rgba(233, 82, 82, 0.15)' };
       case 'On Hold':
         return { color: '#F4A503', background: '#FFF1D6' };
       case 'Sub-Contracted':
+      case 'SC':
         return { color: '#F4A503', background: '#FFF1D6' };
       case 'Awaiting route':
-        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
-      case 'Awaiting':
+      case 'Awaiting Confirmation':
         return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
       case 'Completed':
         return {
@@ -161,56 +133,6 @@ const ReturnConfirmedTable = () => {
     }
   };
 
-  // API for Assign
-  // const {
-  //   data: actionResponse,
-  //   setShouldPerformAction: setAssignAction,
-  //   error: apiError,
-  // } = useApiHook<{
-  //   data: ApiResponse[];
-  // }>({
-  //   endpoint: `return_orders/update/assign/`,
-  //   method: 'PUT',
-  //   body: [assignPayload],
-  //   performAction: false,
-  // });
-
-  //client options
-  // const assignOptions = assignData?.map((option: any) => ({
-  //   label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
-  //   value: option?.bjs_delivery,
-  // }));
-
-  // const handleAssignPayload = (Id: number, value: boolean) => {
-  //   setCallAPi(false);
-  //   setAssign(value);
-  //   setAssignPayload({
-  //     ...assignPayload,
-  //     return_order_id: Id,
-  //     bjs_delivery: value,
-  //   });
-  //   setAssignAction(true);
-  // };
-
-  // useEffect(() => {
-  //   //@ts-ignore
-  //   if (actionResponse?.code === 200) {
-  //     setCallAPi(true);
-  //     notification.success({
-  //       message: 'Success',
-  //       // @ts-ignore
-  //       description: `${actionResponse?.message}`,
-  //     });
-  //     // @ts-ignore
-  //   } else if (apiError?.detail) {
-  //     notification.error({
-  //       message: 'Failure',
-  //       // @ts-ignore
-  //       description: `${apiError?.detail[0]?.msg}`,
-  //     });
-  //   }
-  // }, [actionResponse, apiError]);
-
   const handleSelectOrderId = (id: string | number) => {
     setSelectedOrderIds(prev =>
       prev.includes(id) ? prev.filter(orderId => orderId !== id) : [...prev, id]
@@ -228,8 +150,7 @@ const ReturnConfirmedTable = () => {
       setSelectedOrderIds([]);
     }
   };
-  console.log('selectedOrderIds===>', selectedOrderIds);
-  console.log('returnConfirmedTable=====>', returnConfirmedTable);
+
   return (
     <>
       <StyledTableWrapper className="fortables">
@@ -299,13 +220,15 @@ const ReturnConfirmedTable = () => {
                 const statusMapping: any = {
                   cancelled: 'Cancelled',
                   'on hold': 'On Hold',
+                  subcontracted: 'Sub-Contracted',
                   SC: 'Sub-Contracted',
-                  'awaiting route': 'Awaiting',
-                  'awaiting confirmation': 'Awaiting',
+                  'awaiting route': 'Awaiting route',
+                  'awaiting confirmation': 'Awaiting Confirmation',
                   complete: 'Completed',
                   outstanding: 'Outstanding',
                   routed: 'Routed',
                   failed: 'Failed',
+                  confirmed: 'Confirmed',
                 };
                 const status = statusMapping[item?.status_value] || 'Unknown';
                 const statusClass = getStatusClass(status);