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

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

@@ -7,112 +7,53 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import {
   useAtom,
-  useClientPortal,
-  useEndDate,
+  useClientOutstandingReturnData,
   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 { useReturnData } from '../order-view/store';
-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 [, setReturnData] = useReturnData();
-  const { status } = useParams();
-  //condition on client view
-  const [clientPortal] = useClientPortal();
+  const [, setOutstandingData] = useClientOutstandingReturnData();
   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 { 'x-pagination': pagination } = state;
-
-  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]);
-
-  const {
-    loading,
-    paginationData,
-    fetchData: getPendingData,
-    data: fetchedReturnOrderData,
-  } = useAxios<ApiResponse>({
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = state;
+  const [statePagination] = useAtom(filtersReducerAtom);
+  const [, setCount] = useStatsCPCount();
+  const { 'x-pagination': pagination } = statePagination;
+
+  const baseFilters = [
+    { field: 'isdeleted', op: '=', value: 0 },
+    { field: 'product_return_action_id', op: '=', value: 'RTS' },
+  ];
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
+
+  const modifiedFilters = [...baseFilters, ...cleanedFilters];
+  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(
@@ -123,22 +64,18 @@ function ReturnSearchBar() {
         }
 
         if (response?.data?.length > 0) {
-          setReturnData(response?.data);
+          setOutstandingData(response.data);
         } else {
-          setReturnData([]);
+          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, fetchedReturnOrderData, loading]);
+  }, [debouncedSearchText, JSON.stringify(modifiedFilters)]);
 
-  // Debouncing effect
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedSearchText(searchText);
@@ -149,14 +86,47 @@ function ReturnSearchBar() {
   }, [searchText]);
 
   useEffect(() => {
-    if (debouncedSearchText.length === 0) {
+    if (debouncedSearchText?.length === 0) {
       setSearchText('');
     }
   }, [debouncedSearchText]);
+  //
+  const { fetchData: fetchStatsData } = useAxios<{
+    data: returnCountType[];
+  }>({
+    endpoint: `v1/portal/return/stats/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: [...cleanedFilters],
+  });
+
+  useEffect(() => {
+    const trimmedText = debouncedSearchText?.trim() || '';
+
+    if (trimmedText.length > 2) {
+      const fetchStats = async () => {
+        const response = await fetchStatsData({
+          endPointQuery: `?search_term=${trimmedText}&type=outstanding`,
+        });
+        //@ts-ignore
+        if (response?.data) {
+          //@ts-ignore
+          setCount(response?.data);
+        } else {
+          setCount(null);
+        }
+      };
+
+      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('');
-    setDebouncedSearchText('');
   };
   return (
     <Search>

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

@@ -3,19 +3,24 @@ import {
   device,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import {
   useActiveCardId,
   useAtom,
   useClientPortal,
-  useEndDate,
-  useStartDate,
+  useSearchAfterText,
+  useSearchText,
+  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;
+  completed_count: number;
+};
 const ReturnStatus = () => {
   //CP
   type returnCountType = {
@@ -24,64 +29,21 @@ 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 [count, setCount] = useState<any>();
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
+  const navigate = useNavigate();
+  const [count, setCount] = useStatsCPCount();
   const [clientPortal] = useClientPortal();
-  const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
-
-  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 [debouncedSearchText, setOutstandingSearch] = useSearchText();
 
-    const dateFilters = getDateFilters(startDate, endDate);
-    setModifiedFilters(dateFilters);
-  }, [startDate, endDate]);
-
-  //stats API
+  const cleanedFilters = filters.filter(f => f.field !== 'order_status');
 
+  const [
+    debouncedSearchAfterText,
+    setDebouncedSearchText,
+  ] = useSearchAfterText();
   const { data: statsData, loading: apiLoading, fetchData } = useAxios<{
     data: returnCountType[];
   }>({
@@ -89,12 +51,29 @@ const ReturnStatus = () => {
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
-    filters: modifiedFilters,
+    filters: cleanedFilters,
   });
 
   useEffect(() => {
-    fetchData();
-  }, [startDate, endDate]);
+    if (
+      clientPortal &&
+      debouncedSearchText === '' &&
+      status == 'outstanding_return'
+    ) {
+      fetchData();
+    }
+  }, [debouncedSearchText, debouncedSearchAfterText, JSON.stringify(filters)]);
+
+  useEffect(() => {
+    if (
+      (clientPortal &&
+        debouncedSearchAfterText === '' &&
+        status == 'scheduled_for_return') ||
+      status == 'return_completed'
+    ) {
+      fetchData();
+    }
+  }, [debouncedSearchAfterText, debouncedSearchText, JSON.stringify(filters)]);
 
   useEffect(() => {
     if (statsData && statsData?.data) {
@@ -108,31 +87,36 @@ 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 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({
         type: 'SET_SCHEDULED_RETURN_FILTER',

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

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  useAtom,
+  useClientPortal,
+  // useCallApiAgain,
+  useReturnConfirmedOrderData,
+  useSearchAfterText,
+} from '../../store';
+import ReturnConfirmedTable from './ReturnConfirmedTable';
+import {
+  useItemsPerReturnPage,
+  useLoading,
+  UsePaginationData,
+  UsePaginationReturnData,
+} from '../../order-daily-overview/store/store';
+import { filtersReducerReturnAtom } from '../../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+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 { dateFilterCPReducer } from '../DateFilterStore';
+
+const ConfirmedMain = () => {
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
+  const [, setLoading] = useLoading();
+  const [statePagination] = useAtom(filtersReducerReturnAtom);
+  // const [callApi] = useCallApiAgain();
+  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();
+  const [, setPaginationObject] = UsePaginationData();
+  const { page, total } = paginationObj;
+  const [debouncedSearchText] = useSearchAfterText();
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+  // const { status } = useParams();
+  const [clientPortal] = useClientPortal();
+
+  const {
+    data: fetchedReturnOrderData,
+    loading,
+    paginationData,
+    fetchData,
+  } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/orders/',
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    if (clientPortal && debouncedSearchText === '') {
+      fetchData();
+    }
+  }, [JSON.stringify(filters), debouncedSearchText]);
+
+  useEffect(() => {
+    setLoading(loading);
+
+    if (fetchedReturnOrderData?.data) {
+      setReturnConfirmedData(fetchedReturnOrderData?.data);
+
+      if (paginationData) {
+        try {
+          const { count, ...rest } = JSON.parse(paginationData);
+          setPaginationObject(rest);
+        } catch (error) {
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data',
+          });
+        }
+      }
+    }
+  }, [fetchedReturnOrderData, loading]);
+
+  return (
+    <div>
+      <DashBoardWrapper>
+        {/* <RouterHeader /> */}
+        <div className="Tableconatiner">
+          {/* <HeaderFilter /> */}
+          <Container>
+            <ReturnConfirmedTable />
+            {total > 0 && (
+              <ReturnPagination
+                currentPage={page}
+                totalItems={total}
+                itemsPerPage={itemsPerPage}
+                onPageChange={handlePageChange}
+                onItemsPerPageChange={handleItemsPerPageChange}
+              ></ReturnPagination>
+            )}
+          </Container>
+        </div>
+      </DashBoardWrapper>
+    </div>
+  );
+};
+const Container = styled.div`
+  position: relative;
+  /* top: -30px; */
+`;
+const DashBoardWrapper = styled.section`
+  .Tableconatiner {
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    display: block;
+    padding: 15px 20px;
+  }
+  .headerWrap,
+  .tableData,
+  .styleCovered {
+    transition: all ease 0.5s;
+  }
+  &.stickyTableHead {
+    h2 {
+      font-size: 21px;
+    }
+    .headerWrap {
+      height: 84px;
+      padding: 10px;
+      border-radius: 0px 0px 15px 15px;
+      > div {
+        position: relative;
+        z-index: 10;
+      }
+    }
+    .styleCovered {
+      margin-top: -32px;
+      width: 67%;
+      float: right;
+      gap: 5px;
+      padding-right: 11px;
+
+      li {
+        padding: 4px 10px 5px 5px;
+        gap: 5px;
+        .svgCover {
+          width: 30px;
+          height: 30px;
+          svg {
+            height: auto;
+            width: 58%;
+          }
+        }
+        .countDigit {
+          font-size: 19px;
+        }
+      }
+      .countMess {
+        font-size: 13px;
+      }
+    }
+    .dmsBulkFilter {
+      min-height: unset;
+      gap: 4px;
+      > div {
+        padding: 4px 12px;
+        label {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .StyledFilterList {
+      gap: 4px;
+      li {
+        height: 29px;
+        padding: 3px 8px;
+        gap: 4px;
+        .StyledFilterBtnIcon {
+          width: 20px;
+          height: 20px;
+          svh {
+            width: 10px;
+            height: auto;
+          }
+        }
+        .StyledFilterBtnLabel {
+          font-size: 13px;
+        }
+      }
+    }
+    .StyledFilterLabel {
+      padding-left: 10px;
+      span {
+        font-size: 13px;
+      }
+    }
+    .cardcontainer.tableData {
+      max-height: calc(100vh - 310px);
+      min-height: calc(100vh - 310px);
+    }
+
+    .tableData {
+      max-height: calc(100vh - 320px);
+      min-height: calc(100vh - 320px);
+
+      margin-top: 8px;
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        th {
+          font-size: 13px;
+          padding: 2px 15px;
+        }
+      }
+    }
+  }
+`;
+
+export default ConfirmedMain;