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

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

@@ -6,9 +6,12 @@ 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 { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
 import { useAtom, useClientData } from '../order-view/store';
 import { ClientData } from './common/interface';
 import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
@@ -33,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');
 
@@ -44,15 +48,22 @@ 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/`,
     method: 'GET',
     //@ts-ignore
     pagination: { is_pagination: false },
+    showLoader: false,
   });
 
+  useEffect(() => {
+    if (!clientPortal && clientPortal !== undefined) {
+      fetchData();
+    }
+  }, []);
+
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
       setCustomers(fetchedCustomerData?.data);
@@ -63,7 +74,8 @@ function ReturnMainTable() {
     data: fetchedClientData,
     loading: statsDataLoading,
     paginationData,
-  } = useApiHook<{
+    fetchData: fetchProductStats,
+  } = useAxios<{
     data: ClientData[];
   }>({
     endpoint: `/v1/return/product/stats/`,
@@ -71,7 +83,13 @@ function ReturnMainTable() {
     //@ts-ignore
     pagination: pagination,
     filters: filters,
+    showLoader: false,
   });
+  useEffect(() => {
+    if (!clientPortal && clientPortal !== undefined) {
+      fetchProductStats();
+    }
+  }, []);
 
   useEffect(() => {
     setLoading(statsDataLoading);
@@ -95,6 +113,7 @@ function ReturnMainTable() {
 
   return (
     <>
+      <DocumentTitle title="Client Return Products" />
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
         {/* <RouterHeader /> */}
         <div className="Tableconatiner">

package/src/components/order-daily-overview/return-after-table/ReturnAfterTable.tsx

@@ -10,7 +10,10 @@ import {
   UsePaginationReturnData,
 } from '../store/store';
 import { ApiResponse } from '../common/interface';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
 import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
 import { notification } from 'antd';
 import ReturnPagination from '../table-view/ReturnPagination';
@@ -47,6 +50,7 @@ const ReturnAfterTable = () => {
     filters: filters && filters?.length > 0 ? filters : undefined,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -79,6 +83,7 @@ const ReturnAfterTable = () => {
 
   return (
     <div>
+      <DocumentTitle title="Return Order List" />
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
         <div className="Tableconatiner">

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -239,6 +239,7 @@ const OrderTable = () => {
               <th>Consignment</th>
               <th>Return Order No</th>
               <th> Total Parts</th>
+              <th> Total Orders</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
                   Total Weight {renderSortIcon('weight')}
@@ -328,6 +329,8 @@ const OrderTable = () => {
                     <td>{displayValueOrNA(item?.order_number)}</td>
 
                     <td>{displayValueOrNA(item?.total_products)}</td>
+                    <td>{displayValueOrNA(item?.total_orders)}</td>
+
                     <td>
                       {displayValueOrNA(item?.weight)}{' '}
                       {item?.weight && item?.weight > 0 ? 'KG' : ''}

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,

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnOrderFilter.tsx

@@ -209,7 +209,7 @@ const ReturnOrderFilter = () => {
                   className="custom-select"
                   placeholder="Status of Order"
                   onChange={handleStatusOfOrder}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{ minWidth: '250px', maxWidth: '300px' }}
                   value={statusOrder}
                   onClear={handleClear}
                   allowClear
@@ -227,9 +227,19 @@ const ReturnOrderFilter = () => {
                   placeholder="Clients"
                   onChange={handleClientChange}
                   value={selectedClient}
-                  style={{ minWidth: '150px', width: 'auto' }}
+                  style={{
+                    minWidth: '150px',
+                    width: 'auto',
+                    cursor: 'pointer',
+                  }}
                   allowClear
                   onClear={handleClearClient}
+                  filterOption={(input: any, option: any) =>
+                    (option?.label ?? '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                  }
+                  showSearch
                 />
               </StyledAntSelect>
             </div>

package/src/components/order-daily-overview/return-order-table/ReturnTable.tsx

@@ -8,12 +8,15 @@ import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
 import ModalManager from '../../order-view/modalsPopup/ModalManager';
 import { useItemsPerPage, UsePaginationData } from '../store/store';
 import Pagination from '../table-view/Pagination';
+import { useCustomerData } from '../../store';
+import { DocumentTitle } from '@bjsdistribution/dms-component-library';
 // import { useLocation } from 'react-router-dom';
 
 const ReturnTable = () => {
   const [paginationObj] = UsePaginationData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+  const [customers] = useCustomerData();
   // const location = useLocation();
   const { page, total } = paginationObj;
 
@@ -30,10 +33,23 @@ const ReturnTable = () => {
   //   const clientId = queryParams.get('customerId');
   // }, [location]);
 
+  const queryParams = new URLSearchParams(location.search);
+
+  const customerId = queryParams.get('customerId');
+
+  const selectedCustomer = customers?.find(
+    (customer: any) => customer?.customer_id?.toString() === customerId
+  );
+
+  const customerName = selectedCustomer?.customer_name;
+
+  const docTitle = `${customerName}: Return Product`;
+
   return (
     <div>
       <DashBoardWrapper>
         {/* <RouterHeader /> */}
+        <DocumentTitle title={docTitle} />
         <div className="Tableconatiner">
           <HeaderFilter />
           <Container>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -10,6 +10,7 @@ import SortIcon from '../../../../common/SortIcon';
 import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { usefetchAgain, useReturnData } from '../../../order-view/store';
 import {
+  useCustomerData,
   useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
@@ -27,7 +28,7 @@ import {
 } from '../../store/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -39,13 +40,14 @@ const ReturnOrderTable = () => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
-  const [createReturn, setReturnPayload] = useReturnPayload();
+  const [, setReturnPayload] = useReturnPayload();
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
   const [locationData] = useLocationData();
   const [, setPaginationObject] = UsePaginationData();
   const [callForFetch] = usefetchAgain();
-
+  const [searchParams] = useSearchParams();
+  const urlCustomerId = searchParams.get('customerId');
   //sorting
   const [sortConfig, setSortConfig] = useState<{
     key: string;
@@ -122,6 +124,7 @@ const ReturnOrderTable = () => {
     filters: filters,
     pagination: pagination,
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -168,7 +171,15 @@ const ReturnOrderTable = () => {
     }
     // setShouldPerformAction(false);
   }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+  const [customers] = useCustomerData();
+
+  const selectedCustomer = customers?.find((customer: any) => {
+    const customerId = customer?.customer_id?.toString();
+    return customerId && customerId === urlCustomerId;
+  });
 
+  const accountNumber = selectedCustomer?.account_number;
+  console.log(selectedCustomer, 'selectedCustomer');
   const handleSelectAll = (e: any) => {
     const isChecked = e.target.checked;
     setSelectAll(isChecked);
@@ -187,8 +198,8 @@ const ReturnOrderTable = () => {
       }));
       const newPayload = filteredData.map((loc: any) => ({
         id: loc.id,
-        account_number: createReturn?.account_number,
-        customer_id: +createReturn?.customer_id,
+        account_number: accountNumber,
+        customer_id: Number(urlCustomerId),
         products: [loc?.legacy_product_id],
         return_action: loc?.product_return_action,
         return_location_token: loc?.return_location || null,
@@ -214,7 +225,6 @@ const ReturnOrderTable = () => {
       const isSelected = prevSelectedLocations?.some(
         (loc: any) => loc.id === id
       );
-
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id
@@ -237,8 +247,8 @@ const ReturnOrderTable = () => {
       } else {
         const newReturnPayload = {
           id,
-          account_number: createReturn?.account_number,
-          customer_id: +createReturn?.customer_id,
+          account_number: accountNumber,
+          customer_id: Number(urlCustomerId),
           products: [legacy_product_id],
           return_action: product_return_action || null,
           return_location_token: return_location || null,
@@ -299,7 +309,6 @@ const ReturnOrderTable = () => {
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-
   return (
     <>
       <StyledTableWrapper className="fortables">
@@ -310,7 +319,10 @@ const ReturnOrderTable = () => {
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th> */}
               {returnData?.some(
-                (item: any) => item?.product_return_action === 'RTS'
+                (item: any) =>
+                  item?.product_return_action === 'RTS' &&
+                  item?.return_location !== 'null' &&
+                  item?.return_location !== null
               ) ? (
                 <th className="emailInvoiceCheckbox">
                   <Checkbox checked={selectAll} onChange={handleSelectAll} />
@@ -376,7 +388,9 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {item?.product_return_action === 'RTS' ? (
+                    {item?.product_return_action === 'RTS' &&
+                    item?.return_location !== 'null' &&
+                    item?.return_location !== null ? (
                       <Checkbox
                         className="custom-check"
                         checked={selectedReturnOrder.some(

package/src/components/order-daily-overview/table/ReturnTable.tsx

@@ -108,7 +108,6 @@ const ReturnTable: React.FC = () => {
       customerId: customerId?.toString(),
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -138,7 +137,6 @@ const ReturnTable: React.FC = () => {
       type: RTS,
     });
     //for dev
-    //navigate(`filter?${queryParams.toString()}`);
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
@@ -158,6 +156,7 @@ const ReturnTable: React.FC = () => {
                 { label: 'Products', key: 'return_order_products' },
                 { label: 'RTS', key: 'RTS' },
                 { label: 'Pending', key: 'PENDING' },
+                { label: 'Claims Paid', key: 'CLAIMS PAID' },
                 { label: 'Dispose', key: 'DISPOSE' },
                 { label: 'Re-allocate', key: 'RE-ALLOCATE' },
                 { label: 'Re-Del', key: 'RE-DEL' },
@@ -175,13 +174,13 @@ const ReturnTable: React.FC = () => {
           <tbody>
             {statsLoading ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <Skeleton active />
                 </td>
               </tr>
             ) : sortedData?.length === 0 ? (
               <tr>
-                <td colSpan={11}>
+                <td colSpan={12}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>
@@ -249,6 +248,11 @@ const ReturnTable: React.FC = () => {
                         <GreyBox>{key?.PENDING}</GreyBox>
                       </ColumStyle>
                     </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.['CLAIMS PAID']}</GreyBox>
+                      </ColumStyle>
+                    </td>
                     <td>
                       <ColumStyle>
                         <GreyBox>{key?.DISPOSE}</GreyBox>

package/src/components/order-view/DynamicTable.tsx

@@ -8,14 +8,19 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import CustomScrollBar from '../../common/scrollbar';
 import { atom, useAtom } from 'jotai';
+import { Skeleton } from 'antd';
 export const selectedID = atom<any>([]);
 
 interface DynamicTableProps {
   columns: any;
   data: any[];
+  loading: boolean;
 }
 
-function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
+function DynamicTable(
+  { columns, data, loading }: DynamicTableProps,
+  props: any
+) {
   const tableColumns = useMemo(() => columns, [columns]);
   const tableData = useMemo(() => data, [data]);
 
@@ -44,6 +49,8 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
   const largeColumns = ['details', 'datetime'];
   const noFlexColumns = ['id'];
 
+  console.log(rows, '<===========rows');
+  console.log(props, 'props');
   return (
     <MainContainer>
       <Container>
@@ -78,7 +85,19 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
                 ))}
               </TableHead>
               <TableBody>
-                {rows?.length > 0 ? (
+                {loading ? (
+                  <tr>
+                    <td colSpan={5}>
+                      <Skeleton active />
+                    </td>
+                  </tr>
+                ) : rows?.length === 0 ? (
+                  <TableRow>
+                    <TableData colSpan={columns.length}>
+                      No entries found.
+                    </TableData>
+                  </TableRow>
+                ) : (
                   rows?.map(row => (
                     <TableRow
                       key={row.id}
@@ -115,12 +134,6 @@ function DynamicTable({ columns, data }: DynamicTableProps, props: any) {
                       ))}
                     </TableRow>
                   ))
-                ) : (
-                  <TableRow>
-                    <TableData colSpan={columns.length}>
-                      No entries found.
-                    </TableData>
-                  </TableRow>
                 )}
               </TableBody>
             </Table>

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx

@@ -41,7 +41,7 @@ function DropDowns() {
             onClick={action.onClick}
             style={{ cursor: 'pointer' }}
           >
-            {action.label}
+            {action?.label}
           </FontContainer>
         ))}
       </DashBoardWrapper>

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -40,6 +40,7 @@ function Options() {
   };
 
   const isReleased = orderStatus[0]?.released;
+  // const routedValue = orderStatus[0]?.routed;
   const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
   const isOrderOnHold = orderDetails?.status === 'OO';
   const isOrderCancelled = orderDetails?.status === 'CO';
@@ -73,6 +74,14 @@ function Options() {
       shouldExclude = true;
     }
 
+    if (isRouted && option.value === 'clear-date') {
+      shouldExclude = true;
+    }
+
+    // if (routedValue && option.value === 'remove-from-route') {
+    //   shouldExclude = true;
+    // }
+
     return !shouldExclude;
   });
 

package/src/components/order-view/details-filters/right-side-filters/Details.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useCustomerInfo } from '../../store';
+import { useCustomerInfo, useGlobalEscData } from '../../store';
 
 const Details = () => {
   // const [orderDetails] = useOrderDetails();
   const [customerInfo] = useCustomerInfo();
   const recipient = customerInfo?.recipient_name || '';
   const postcodeShow = customerInfo?.postcode || '';
+  const [globalEscData] = useGlobalEscData();
 
   return (
     <DetailsContainer>
       <Typo>
-        CUSTOMER RETURN - {recipient} , {postcodeShow}
+        CUSTOMER RETURN - {recipient} , {postcodeShow} {}
+        {globalEscData?.length > 0 && (
+          <EscInfo>
+            {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}
+          </EscInfo>
+        )}
       </Typo>
     </DetailsContainer>
   );
@@ -27,10 +33,14 @@ const DetailsContainer = styled.div`
 `;
 
 const Typo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  align-items: center;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 32px; /* 160% */
+  line-height: 32px;
   text-transform: uppercase;
   margin: 0;
   padding: 0;
@@ -40,4 +50,19 @@ const Typo = styled.div`
   }
 `;
 
+const Name = styled.div`
+  /* heading/h3-subHeader */
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 32px; /* 160% */
+  text-transform: uppercase;
+`;
+
+const EscInfo = styled(Name)`
+  color: #6396e5;
+  font-size: 16px;
+`;
+
 export default Details;

package/src/components/order-view/flags-action-modal/Dropdowns.tsx

@@ -75,6 +75,7 @@ function ButtonsSection() {
           placeholder="Select Type"
           onChange={handleTaskTypeChange}
           value={selectedTypeId}
+          style={{ minWidth: '200px', width: 'auto' }}
         />
       </Flex>
       <Flex>
@@ -84,6 +85,7 @@ function ButtonsSection() {
           placeholder="Select Type"
           onChange={handlePriorityChange}
           value={taskPayload?.priority || flagById?.priority}
+          style={{ minWidth: '100px', width: 'auto' }}
         />
       </Flex>
       <Flex>