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

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);
@@ -329,7 +252,7 @@ const ReturnConfirmedTable = () => {
                             paddingLeft: 0,
                           }}
                         >
-                          <NavLink to={`../${item.id}`}>
+                          <NavLink to={`/return/view/${item.id}`}>
                             {displayValueOrNA(item?.recipient_name)}
                           </NavLink>
                         </li>

package/src/components/order-daily-overview/header/route-header/ClientRouterHeader.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect } from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
+import HeaderTitle from './title/HeaderTitle';
+import Breadcrumb from './breadCrumb/BreadCrumb';
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+import { DatePicker, DatePickerProps } from 'antd';
+import {
+  useAtom,
+  useClientPortal,
+  useEndDate,
+  useStartDate,
+} from '../../../store';
+import ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
+import { useParams } from 'react-router-dom';
+import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
+import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
+
+interface RouterHeaderProps {
+  breadcrumbTitle?: string;
+  breadcrumbSubtitle?: string;
+  breadcrumbSubPart?: string;
+  showDateFilter?: boolean;
+}
+
+const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
+  breadcrumbTitle = 'Clients >', // Default value
+  breadcrumbSubtitle = ' Return', // Default value
+  breadcrumbSubPart, // Optional
+}) => {
+  const [clientPortal] = useClientPortal();
+  const [, dispatch] = useAtom(dateFilterCPReducer);
+  //CP
+  const [startDate, setStartDate] = useStartDate();
+  const [endDate, setEndDate] = useEndDate();
+  const { status } = useParams();
+
+  useEffect(() => {
+    if (clientPortal) {
+      const formattedStart = startDate?.format('YYYY-MM-DD');
+      const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
+      //   const payload = {
+      //     startDate: formattedStart,
+      //     endDate: formattedEnd,
+      //   };
+
+      if (formattedStart || formattedEnd) {
+        dispatch({
+          type: 'SET_CP_DATE_FILTER',
+          payload: {
+            startDate: formattedStart,
+            endDate: formattedEnd,
+          },
+        });
+      }
+    }
+  }, [startDate, endDate]);
+
+  const handleStartDateChange: DatePickerProps['onChange'] = date => {
+    setStartDate(date ?? null);
+  };
+
+  const handleEndDateChange: DatePickerProps['onChange'] = date => {
+    setEndDate(date);
+  };
+
+  const validStatuses = [
+    'outstanding_return',
+    'scheduled_for_return',
+    'return_completed',
+  ];
+
+  return (
+    <>
+      <HeaderWrapper className="headerWrap">
+        <StyledFlex>
+          <div>
+            <HeaderTitle title={'Return'} />
+            <Breadcrumb
+              title={breadcrumbTitle}
+              subtitle={breadcrumbSubtitle}
+              subPart={breadcrumbSubPart}
+            />
+          </div>
+        </StyledFlex>
+
+        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
+
+        {clientPortal &&
+          (status === 'scheduled_for_return' ||
+            status === 'return_completed') && <ReturnAfterSearchBar />}
+
+        {clientPortal &&
+          typeof status === 'string' &&
+          validStatuses.includes(status) && (
+            <DatePickerWrap>
+              <DatePicker
+                value={startDate ? dayjs(startDate) : null}
+                onChange={handleStartDateChange}
+                format={'MMMM D, YYYY'}
+                allowClear={false}
+                disabledDate={current =>
+                  !!endDate && current.isAfter(dayjs(endDate), 'day')
+                }
+              />
+              <DatePicker
+                value={endDate ? dayjs(endDate) : null}
+                onChange={handleEndDateChange}
+                format={'MMMM D, YYYY'}
+                disabledDate={current =>
+                  !!startDate && current.isBefore(dayjs(startDate), 'day')
+                }
+              />
+            </DatePickerWrap>
+          )}
+      </HeaderWrapper>
+    </>
+  );
+};
+export const DatePickerWrap = styled.div`
+  display: flex;
+  padding-right: 10px;
+  padding-left: 7px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 20px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  min-width: 22vw;
+  height: 35px;
+  input[type='text'] {
+    border-radius: 20px;
+    background: var(--Flowkit-White, #fff);
+    border: none;
+    color: #6a7378;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 8px 0;
+    padding-left: 10px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .ant-picker-outlined {
+    border-style: none !important;
+  }
+
+  .ant-picker-focused {
+    box-shadow: none;
+  }
+
+  /* .ant-picker {
+    .ant-picker-input {
+      width: 150px;
+    }
+  } */
+  .ant-btn {
+    background-color: #3348ff !important;
+  }
+`;
+export default ClientRouterHeader;

package/src/components/order-daily-overview/header/route-header/RouterHeader.tsx

@@ -1,21 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
 import HeaderTitle from './title/HeaderTitle';
 import Breadcrumb from './breadCrumb/BreadCrumb';
 import styled from 'styled-components';
-import dayjs from 'dayjs';
-import { DatePicker, DatePickerProps } from 'antd';
-import {
-  useAtom,
-  useClientPortal,
-  useEndDate,
-  useStartDate,
-} from '../../../store';
-import { filtersReducerReturnAtom } from '../../return-after-table/table-filters/ReturnFilterStore';
-import ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
-import { useParams } from 'react-router-dom';
-import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -29,50 +17,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubtitle = ' Return', // Default value
   breadcrumbSubPart, // Optional
 }) => {
-  const [clientPortal] = useClientPortal();
-  const [, dispatch] = useAtom(filtersReducerReturnAtom);
-  //CP
-  const [startDate, setStartDate] = useStartDate();
-  const [endDate, setEndDate] = useEndDate();
-  const { status } = useParams();
-
-  useEffect(() => {
-    const storedDates = JSON.parse(localStorage.getItem('returnDate') || '{}');
-    const initialStart = storedDates?.startDate
-      ? dayjs(storedDates.startDate)
-      : null;
-    const initialEnd = storedDates?.endDate ? dayjs(storedDates.endDate) : null;
-
-    if (initialStart) setStartDate(initialStart);
-    if (initialEnd) setEndDate(initialEnd);
-  }, []);
-
-  useEffect(() => {
-    if (clientPortal) {
-      const formattedStart = startDate?.format('YYYY-MM-DD');
-      const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
-
-      const payload = {
-        startDate: formattedStart,
-        endDate: formattedEnd,
-      };
-      localStorage.setItem('returnDate', JSON.stringify(payload));
-      if (formattedStart || formattedEnd) {
-        dispatch({
-          type: 'SET_CP_DATE_FILTER',
-          payload,
-        });
-      }
-    }
-  }, [startDate, endDate]);
-
-  const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? dayjs());
-  };
-
-  const handleEndDateChange: DatePickerProps['onChange'] = date => {
-    setEndDate(date);
-  };
   return (
     <>
       <HeaderWrapper className="headerWrap">
@@ -86,34 +30,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
             />
           </div>
         </StyledFlex>
-
-        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
-
-        {clientPortal &&
-          (status === 'scheduled_for_return' ||
-            status === 'return_completed') && <ReturnAfterSearchBar />}
-
-        {clientPortal && (
-          <DatePickerWrap>
-            <DatePicker
-              value={startDate ? dayjs(startDate) : null}
-              onChange={handleStartDateChange}
-              format={'MMMM D, YYYY'}
-              allowClear={false}
-              disabledDate={current =>
-                !!endDate && current.isAfter(dayjs(endDate), 'day')
-              }
-            />
-            <DatePicker
-              value={endDate ? dayjs(endDate) : null}
-              onChange={handleEndDateChange}
-              format={'MMMM D, YYYY'}
-              disabledDate={current =>
-                !!startDate && current.isBefore(dayjs(startDate), 'day')
-              }
-            />
-          </DatePickerWrap>
-        )}
       </HeaderWrapper>
     </>
   );
@@ -127,7 +43,7 @@ export const DatePickerWrap = styled.div`
   align-self: stretch;
   border-radius: 20px;
   border: 1px solid #e0e2e7;
-  background: var(--Neutral-White, #fff);
+  background: #fff;
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   min-width: 22vw;
   height: 35px;

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

@@ -12,6 +12,7 @@ import { atom, useAtom } from 'jotai';
 import {
   useActionTypeOptions,
   useClearState,
+  useClientPortal,
   useCustomerData,
   useReturnPayload,
 } from '../../store';
@@ -47,8 +48,8 @@ function SelectionFilter() {
   const [actionTypeOptions, setActionTypeOptions] = useActionTypeOptions();
   const [locationOptions, setLocationOptions] = useLocationOptions();
   const [searchParams] = useSearchParams();
+  const [clientPortal] = useClientPortal();
   const navigate = useNavigate();
-
   //API for client data
   const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
@@ -60,7 +61,9 @@ function SelectionFilter() {
   });
 
   useEffect(() => {
-    fetchData();
+    if (!clientPortal) {
+      fetchData();
+    }
   }, []);
 
   useEffect(() => {

package/src/components/order-daily-overview/index.tsx

@@ -6,11 +6,11 @@ import {
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
-import { useCustomerData, useStickyStatus } from '../store';
+import { useClientPortal, useCustomerData, useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import {
   DocumentTitle,
-  useApiHook,
+  useAxios,
 } from '@bjsdistribution/dms-component-library';
 import { useAtom, useClientData } from '../order-view/store';
 import { ClientData } from './common/interface';
@@ -36,6 +36,7 @@ function ReturnMainTable() {
   const [, setCustomers] = useCustomerData();
   // const [tableName] = useTableName();
   const queryParams = new URLSearchParams(location.search);
+  const [clientPortal] = useClientPortal();
 
   const customerId = queryParams.get('customerId');
 
@@ -47,7 +48,7 @@ function ReturnMainTable() {
   };
 
   //API for client data
-  const { data: fetchedCustomerData, loading: loading } = useApiHook<
+  const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
   >({
     endpoint: `/v1/return/product/customers/`,
@@ -56,6 +57,11 @@ function ReturnMainTable() {
     pagination: { is_pagination: false },
     showLoader: false,
   });
+  useEffect(() => {
+    if (!clientPortal) {
+      fetchData();
+    }
+  }, []);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
@@ -67,7 +73,8 @@ function ReturnMainTable() {
     data: fetchedClientData,
     loading: statsDataLoading,
     paginationData,
-  } = useApiHook<{
+    fetchData: fetchProductStats,
+  } = useAxios<{
     data: ClientData[];
   }>({
     endpoint: `/v1/return/product/stats/`,
@@ -77,6 +84,11 @@ function ReturnMainTable() {
     filters: filters,
     showLoader: false,
   });
+  useEffect(() => {
+    if (!clientPortal) {
+      fetchProductStats();
+    }
+  }, []);
 
   useEffect(() => {
     setLoading(statsDataLoading);

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnFilterStore.ts

@@ -171,46 +171,46 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       }
 
     //client portal
-    case 'SET_CP_DATE_FILTER': {
-      let { startDate, endDate } = action.payload;
+    // case 'SET_CP_DATE_FILTER': {
+    //   let { startDate, endDate } = action.payload;
 
-      if (!startDate || !endDate) {
-        const storedDates = JSON.parse(
-          localStorage.getItem('returnDate') || '{}'
-        );
-        startDate = startDate ?? storedDates?.startDate;
-        endDate = endDate ?? storedDates?.endDate ?? startDate;
-      }
+    //   if (!startDate || !endDate) {
+    //     const storedDates = JSON.parse(
+    //       localStorage.getItem('returnDate') || '{}'
+    //     );
+    //     startDate = startDate ?? storedDates?.startDate;
+    //     endDate = endDate ?? storedDates?.endDate ?? startDate;
+    //   }
 
-      const filters = state['x-filters'].filter(f => f.field !== 'created_at');
+    //   const filters = state['x-filters'].filter(f => f.field !== 'created_at');
 
-      if (startDate === endDate) {
-        filters.push({
-          field: 'created_at',
-          op: '=',
-          value: format(new Date(startDate), 'yyyy-MM-dd'),
-        });
-      } else if (startDate && endDate) {
-        filters.push(
-          {
-            field: 'created_at',
-            op: '>=',
-            value: format(new Date(startDate), 'yyyy-MM-dd'),
-          },
-          {
-            field: 'created_at',
-            op: '<=',
-            value: format(new Date(endDate), 'yyyy-MM-dd'),
-          }
-        );
-      }
+    //   if (startDate === endDate) {
+    //     filters.push({
+    //       field: 'created_at',
+    //       op: '=',
+    //       value: format(new Date(startDate), 'yyyy-MM-dd'),
+    //     });
+    //   } else if (startDate && endDate) {
+    //     filters.push(
+    //       {
+    //         field: 'created_at',
+    //         op: '>=',
+    //         value: format(new Date(startDate), 'yyyy-MM-dd'),
+    //       },
+    //       {
+    //         field: 'created_at',
+    //         op: '<=',
+    //         value: format(new Date(endDate), 'yyyy-MM-dd'),
+    //       }
+    //     );
+    //   }
 
-      return {
-        ...state,
-        'x-filters': filters,
-        'x-pagination': { ...state['x-pagination'], page: 1 },
-      };
-    }
+    //   return {
+    //     ...state,
+    //     'x-filters': filters,
+    //     'x-pagination': { ...state['x-pagination'], page: 1 },
+    //   };
+    // }
     // case 'CLEAR_CLIENT':
     //   return {
     //     ...state,