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

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

@@ -1,4 +1,4 @@
-import { Checkbox, useAxios } from '@bjsdistribution/dms-component-library';
+import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import { Empty, notification, Skeleton } from 'antd';
 import { format } from 'date-fns';
 import { useAtom } from 'jotai';
@@ -10,17 +10,13 @@ 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 {
-  useClientPortal,
-  useEndDate,
+  useCustomerData,
   useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
   useReturnPayload,
-  useSearchText,
   useSelectAll,
-  useSelectedClientPortOrders,
   useSelectedOrders,
-  useStartDate,
 } from '../../../store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
@@ -32,8 +28,7 @@ import {
 } from '../../store/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
-import { NavLink, useParams } from 'react-router-dom';
-import dayjs from 'dayjs';
+import { NavLink, useSearchParams } from 'react-router-dom';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -45,18 +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 [clientPortal] = useClientPortal();
-  const { status } = useParams();
-  const [selectedOrderIds, setSelectedOrderIds] = useSelectedClientPortOrders();
-  const [selectClientAll, setSelectClientAll] = useState(false);
-  const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
-
+  const [searchParams] = useSearchParams();
+  const urlCustomerId = searchParams.get('customerId');
   //sorting
   const [sortConfig, setSortConfig] = useState<{
     key: string;
@@ -122,67 +113,18 @@ const ReturnOrderTable = () => {
     }
   };
 
-  //CP
-  const [startDate] = useStartDate();
-  const [endDate] = useEndDate();
-
-  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 {
     data: fetchedOrderData,
     loading: returnDataLoad,
     paginationData,
-    fetchData,
-  } = useAxios<ApiResponse>({
+    setShouldPerformAction,
+  } = useApiHook<ApiResponse>({
     endpoint: '/v1/return/product/pending/',
     method: 'GET',
-    filters: clientPortal ? modifiedFilters : filters,
+    filters: filters,
     pagination: pagination,
+    performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -209,21 +151,9 @@ const ReturnOrderTable = () => {
     }
   }, [fetchedOrderData, returnDataLoad]);
 
-  useEffect(() => {
-    if (!clientPortal) {
-      fetchData();
-    }
-  }, []);
-  const [debouncedSearchText] = useSearchText();
-
-  useEffect(() => {
-    if (clientPortal && debouncedSearchText == '') {
-      fetchData();
-    }
-  }, [debouncedSearchText]);
-
   useEffect(() => {
     setLoading(returnDataLoad);
+    setShouldPerformAction(true);
     if (fetchedOrderData && fetchedOrderData?.data && locationData) {
       const updatedReturnData = fetchedOrderData.data.map(returnItem => {
         const matchingLocation = locationData.find(
@@ -241,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);
@@ -250,7 +188,7 @@ const ReturnOrderTable = () => {
       const filteredData = returnData?.filter(
         (loc: any) => loc?.product_return_action === 'RTS'
       );
-      const selectedOrders = filteredData?.map((loc: any) => ({
+      const selectedOrders = filteredData.map((loc: any) => ({
         id: loc.id,
         return_locations: loc?.return_location_name,
         return_location: loc?.return_location,
@@ -260,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,
@@ -287,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
@@ -310,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,
@@ -372,25 +309,6 @@ const ReturnOrderTable = () => {
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-
-  //Client Portal
-  const handleSelectOrderId = (id: string | number) => {
-    setSelectedOrderIds(prev =>
-      prev.includes(id) ? prev.filter(orderId => orderId !== id) : [...prev, id]
-    );
-  };
-
-  const handleClientSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const isChecked = e.target.checked;
-    setSelectClientAll(isChecked);
-
-    if (isChecked) {
-      setSelectedOrderIds(returnData?.map((item: any) => item?.order_id) || []);
-    } else {
-      setSelectedOrderIds([]);
-    }
-  };
-
   return (
     <>
       <StyledTableWrapper className="fortables">
@@ -401,28 +319,22 @@ 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} />
                 </th>
-              ) : clientPortal ? (
-                <th className="emailInvoiceCheckbox">
-                  <Checkbox
-                    checked={selectClientAll}
-                    onChange={handleClientSelectAll}
-                  />
-                </th>
               ) : (
                 <th></th>
               )}
-              {!clientPortal && (
-                <th onClick={() => handleSort('location')}>
-                  <div className="sortIconClass">
-                    Product Location {renderSortIcon('location')}
-                  </div>
-                </th>
-              )}
+              <th onClick={() => handleSort('location')}>
+                <div className="sortIconClass">
+                  Product Location {renderSortIcon('location')}
+                </div>
+              </th>
               <th onClick={() => handleSort('return_location_name')}>
                 <div className="sortIconClass">
                   Return Location {renderSortIcon('return_location_name')}
@@ -476,44 +388,35 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {clientPortal ? (
+                    {item?.product_return_action === 'RTS' &&
+                    item?.return_location !== 'null' &&
+                    item?.return_location !== null ? (
                       <Checkbox
-                        checked={selectedOrderIds.includes(item?.order_id)}
-                        onChange={() => handleSelectOrderId(item?.order_id)}
+                        className="custom-check"
+                        checked={selectedReturnOrder.some(
+                          (selectedInvoice: any) =>
+                            selectedInvoice?.id === item?.id
+                        )}
+                        onChange={() =>
+                          handleSelectOrderReturn(
+                            item?.id,
+                            item?.return_location,
+                            item?.return_location_name,
+                            item?.product_return_action,
+                            item?.legacy_product_id
+                          )
+                        }
                       />
+                    ) : null}
+                  </td>
+
+                  <td>
+                    {item?.location !== null && item?.location !== undefined ? (
+                      item?.location
                     ) : (
-                      <>
-                        {item?.product_return_action === 'RTS' ? (
-                          <Checkbox
-                            className="custom-check"
-                            checked={selectedReturnOrder?.some(
-                              (selectedInvoice: any) =>
-                                selectedInvoice?.id === item?.id
-                            )}
-                            onChange={() =>
-                              handleSelectOrderReturn(
-                                item?.id,
-                                item?.return_location,
-                                item?.return_location_name,
-                                item?.product_return_action,
-                                item?.legacy_product_id
-                              )
-                            }
-                          />
-                        ) : null}
-                      </>
+                      <div className="awaiting">Awaiting</div>
                     )}
                   </td>
-                  {!clientPortal && (
-                    <td>
-                      {item?.location !== null &&
-                      item?.location !== undefined ? (
-                        item?.location
-                      ) : (
-                        <div className="awaiting">Awaiting</div>
-                      )}
-                    </td>
-                  )}
                   <td> {displayValueOrNA(item?.return_location_name)}</td>
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>

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>