@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.20-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';
@@ -26,11 +27,13 @@ import styled from 'styled-components';
 import { Select } from 'antd';
 import { useLocationOptions } from '../../order-view/store';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../common/interface';
 
 export const clickedState = atom<boolean>(false);
 
 function SelectionFilter() {
-  const [customers] = useCustomerData();
+  const [customers, setCustomers] = useCustomerData();
   const [selectedFilterValue, setSelectedFilterValue] = useSelectedAction();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [
@@ -45,8 +48,29 @@ 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
+  >({
+    endpoint: `/v1/return/product/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
 
+  useEffect(() => {
+    if (!clientPortal && clientPortal !== undefined) {
+      fetchData();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading]);
   //new codee
   const urlCustomerId = searchParams.get('customerId');
   const urlActiontype = searchParams.get('type');
@@ -54,7 +78,6 @@ function SelectionFilter() {
   const selectedCustomer = customers?.find(
     (customer: any) => customer?.customer_id?.toString() === urlCustomerId
   );
-
   const accountNumber = selectedCustomer?.account_number;
 
   //customer name
@@ -91,10 +114,14 @@ function SelectionFilter() {
       setActionTypeOptions(mappedActions);
 
       const mappedLocations = Array.isArray(filteredClient?.return_locations)
-        ? filteredClient?.return_locations?.map((location: any) => ({
-            label: location?.location_name,
-            value: location?.token,
-          }))
+        ? filteredClient.return_locations
+            .filter(
+              (location: any) => location?.location_name && location?.token
+            )
+            .map((location: any) => ({
+              label: location.location_name,
+              value: location.token,
+            }))
         : [];
 
       setLocationOptions(mappedLocations);
@@ -135,10 +162,16 @@ function SelectionFilter() {
         setActionTypeOptions(mappedActions);
 
         const mappedLocations = Array.isArray(filteredClient?.return_locations)
-          ? filteredClient?.return_locations?.map((location: any) => ({
-              label: location?.location_name,
-              value: location?.token,
-            }))
+          ? filteredClient.return_locations
+              .filter((location: any) => {
+                const name = location?.location_name;
+                const token = location?.token;
+                return name && name !== 'null' && token && token !== 'null';
+              })
+              .map((location: any) => ({
+                label: location?.location_name,
+                value: location?.token,
+              }))
           : [];
 
         setLocationOptions(mappedLocations);
@@ -166,9 +199,7 @@ function SelectionFilter() {
       console.log(currentSearch, 'currentSearch');
 
       if (!currentSearch.includes('filter')) {
-        console.log('inside include');
         // for dev
-        //navigate(`filter?${queryParams.toString()}`);
         navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
         // for local
@@ -328,7 +359,7 @@ function SelectionFilter() {
                 options={clientOptions}
                 placeholder="Select Client Name"
                 onChange={handleClientChange}
-                style={{ minWidth: '150px' }}
+                style={{ minWidth: '250px' }}
                 value={selectedClient}
                 allowClear
                 onClear={handleClear}
@@ -349,7 +380,7 @@ function SelectionFilter() {
                     placeholder="Select Action Type"
                     value={selectedFilterValue}
                     onChange={handleActionClick}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     onClear={handleClearAction}
                   />
@@ -362,7 +393,7 @@ function SelectionFilter() {
                     value={selectedLocationValue}
                     placeholder="Select Location"
                     onChange={handleLocationChange}
-                    style={{ minWidth: '150px' }}
+                    style={{ minWidth: '200px' }}
                     allowClear
                     mode="multiple"
                   />