@bjsdistribution/dms-client-return 0.1.65-prod → 0.1.66-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.65-prod",
+  "version": "0.1.66-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -31,6 +31,13 @@ import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
 import { NavLink, useSearchParams } from 'react-router-dom';
 import { WEIGHT_UNIT } from '../../../../common/utils';
 
+const SELECTABLE_ACTIONS = ['RTS', 'CLAIMS PAID', 'DISPOSE', 'RE-ALLOCATE', 'RECYCLE', 'UNKNOWN'];
+
+const isSelectableItem = (item: any) =>
+  SELECTABLE_ACTIONS.includes(item?.product_return_action) &&
+  item?.return_location !== 'null' &&
+  item?.return_location !== null;
+
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
   const [selectedReturnOrder, setSelectedReturnOrder] = useSelectedOrders();
@@ -186,8 +193,15 @@ const ReturnOrderTable = () => {
     setSelectAll(isChecked);
 
     if (isChecked) {
+      const firstSelectable = returnData?.find((loc: any) => isSelectableItem(loc));
+      const targetAction = selectedReturnOrder.length > 0
+        ? selectedReturnOrder[0]?.product_return_action
+        : firstSelectable?.product_return_action;
+
+      if (!targetAction) return;
+
       const filteredData = returnData?.filter(
-        (loc: any) => loc?.product_return_action === 'RTS'
+        (loc: any) => isSelectableItem(loc) && loc?.product_return_action === targetAction
       );
       const selectedOrders = filteredData.map((loc: any) => ({
         id: loc.id,
@@ -236,14 +250,21 @@ const ReturnOrderTable = () => {
           products: legacy_product_id,
           return_action: product_return_action || null,
           return_location_token: return_location || null,
-          // new_location: new_location,
         }));
 
         setNewPayload((prevPayload: any) =>
           prevPayload.filter((item: any) => item.id !== id)
         );
 
-        setSelectAll(false); // Ensure "select all" is false if one is deselected
+        const targetAction = product_return_action;
+        const totalItemsOfAction = returnData?.filter(
+          (loc: any) => isSelectableItem(loc) && loc?.product_return_action === targetAction
+        )?.length;
+
+        setSelectAll(
+          updatedSelectedLocations?.length > 0 &&
+          updatedSelectedLocations?.length === totalItemsOfAction
+        );
         return updatedSelectedLocations;
       } else {
         const newReturnPayload = {
@@ -266,11 +287,14 @@ const ReturnOrderTable = () => {
             product_return_action,
           },
         ];
+
+        const targetAction = product_return_action;
+        const totalItemsOfAction = returnData?.filter(
+          (loc: any) => isSelectableItem(loc) && loc?.product_return_action === targetAction
+        )?.length;
+
         setSelectAll(
-          updatedSelectedLocations?.length ===
-            returnData?.filter(
-              (loc: any) => loc?.product_return_action === 'RTS'
-            )?.length
+          updatedSelectedLocations?.length === totalItemsOfAction
         );
         return updatedSelectedLocations;
       }
@@ -278,35 +302,37 @@ const ReturnOrderTable = () => {
   };
 
   useEffect(() => {
-    if (newpayload?.length === 0) return;
+    if (newpayload?.length === 0) {
+      setGrouped([]);
+      return;
+    }
 
     const groupedPayload = newpayload?.reduce((acc: any, item: any) => {
-      const { return_location_token } = item;
+      const { return_location_token, id } = item;
+      const key = return_location_token || `no_token_${id}`;
 
-      if (!return_location_token) {
-        acc.push(item);
-      } else {
-        if (!acc[return_location_token]) {
-          acc[return_location_token] = {
-            ...item,
-            products: [],
-            return_action: [],
-          };
-        }
+      if (!acc[key]) {
+        acc[key] = {
+          ...item,
+          products: [],
+          return_action: [],
+        };
+      }
 
-        acc[return_location_token].products = [
-          ...acc[return_location_token].products,
-          ...item.products,
-        ];
+      acc[key].products = [
+        ...acc[key].products,
+        ...item.products,
+      ];
 
-        acc[return_location_token].return_action = [
-          ...acc[return_location_token].return_action,
+      acc[key].return_action = Array.from(
+        new Set([
+          ...acc[key].return_action,
           ...item.return_action,
-        ];
-      }
+        ])
+      );
 
       return acc;
-    }, []);
+    }, {});
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
@@ -319,12 +345,7 @@ const ReturnOrderTable = () => {
               {/* <th className="emailInvoiceCheckbox">
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th> */}
-              {returnData?.some(
-                (item: any) =>
-                  item?.product_return_action === 'RTS' &&
-                  item?.return_location !== 'null' &&
-                  item?.return_location !== null
-              ) ? (
+              {returnData?.some((item: any) => isSelectableItem(item)) ? (
                 <th className="emailInvoiceCheckbox">
                   <Checkbox checked={selectAll} onChange={handleSelectAll} />
                 </th>
@@ -390,11 +411,13 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {item?.product_return_action === 'RTS' &&
-                    item?.return_location !== 'null' &&
-                    item?.return_location !== null ? (
+                    {isSelectableItem(item) ? (
                       <Checkbox
                         className="custom-check"
+                        disabled={
+                          selectedReturnOrder.length > 0 &&
+                          selectedReturnOrder[0]?.product_return_action !== item?.product_return_action
+                        }
                         checked={selectedReturnOrder.some(
                           (selectedInvoice: any) =>
                             selectedInvoice?.id === item?.id

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

@@ -128,7 +128,7 @@ const ReturnTable: React.FC = () => {
     navigate(`/orders/view/return/filter?${queryParams.toString()}`);
 
     //for local
-    //navigate(`/filter?${queryParams.toString()}`);
+    // navigate(`/filter?${queryParams.toString()}`);
   };
 
   //for RTS
@@ -278,19 +278,82 @@ const ReturnTable: React.FC = () => {
                           <GreyBox>{rowKey?.PENDING ?? 0}</GreyBox>
                         </ColumStyle>
                       </td>
-                      <td style={{ textAlign: 'center' }}>
+                      <td
+                        style={{
+                          color: rowKey?.['CLAIMS PAID'] > 0 ? '#0099ff' : 'inherit',
+                          fontWeight: rowKey?.['CLAIMS PAID'] > 0 ? 600 : 'normal',
+                          cursor: rowKey?.['CLAIMS PAID'] > 0 ? 'pointer' : 'default',
+                          textAlign: 'center',
+                        }}
+                        onClick={
+                          rowKey?.['CLAIMS PAID'] > 0
+                            ? () => handleRedirectRTS(rowKey?.customer_id, 'CLAIMS PAID')
+                            : undefined
+                        }
+                      >
                         <ColumStyle>
-                          <GreyBox>{rowKey?.['CLAIMS PAID'] ?? 0}</GreyBox>
+                          <GreyBox
+                            style={{
+                              backgroundColor:
+                                rowKey?.['CLAIMS PAID'] > 0
+                                  ? 'rgba(99, 150, 229, 0.1)'
+                                  : 'rgba(153, 153, 153, 0.1)',
+                            }}
+                          >
+                            {rowKey?.['CLAIMS PAID'] ?? 0}
+                          </GreyBox>
                         </ColumStyle>
                       </td>
-                      <td style={{ textAlign: 'center' }}>
+                      <td
+                        style={{
+                          color: rowKey?.DISPOSE > 0 ? '#0099ff' : 'inherit',
+                          fontWeight: rowKey?.DISPOSE > 0 ? 600 : 'normal',
+                          cursor: rowKey?.DISPOSE > 0 ? 'pointer' : 'default',
+                          textAlign: 'center',
+                        }}
+                        onClick={
+                          rowKey?.DISPOSE > 0
+                            ? () => handleRedirectRTS(rowKey?.customer_id, 'DISPOSE')
+                            : undefined
+                        }
+                      >
                         <ColumStyle>
-                          <GreyBox>{rowKey?.DISPOSE ?? 0}</GreyBox>
+                          <GreyBox
+                            style={{
+                              backgroundColor:
+                                rowKey?.DISPOSE > 0
+                                  ? 'rgba(99, 150, 229, 0.1)'
+                                  : 'rgba(153, 153, 153, 0.1)',
+                            }}
+                          >
+                            {rowKey?.DISPOSE ?? 0}
+                          </GreyBox>
                         </ColumStyle>
                       </td>
-                      <td style={{ textAlign: 'center' }}>
+                      <td
+                        style={{
+                          color: rowKey?.['RE-ALLOCATE'] > 0 ? '#0099ff' : 'inherit',
+                          fontWeight: rowKey?.['RE-ALLOCATE'] > 0 ? 600 : 'normal',
+                          cursor: rowKey?.['RE-ALLOCATE'] > 0 ? 'pointer' : 'default',
+                          textAlign: 'center',
+                        }}
+                        onClick={
+                          rowKey?.['RE-ALLOCATE'] > 0
+                            ? () => handleRedirectRTS(rowKey?.customer_id, 'RE-ALLOCATE')
+                            : undefined
+                        }
+                      >
                         <ColumStyle>
-                          <GreyBox>{rowKey?.['RE-ALLOCATE'] ?? 0}</GreyBox>
+                          <GreyBox
+                            style={{
+                              backgroundColor:
+                                rowKey?.['RE-ALLOCATE'] > 0
+                                  ? 'rgba(99, 150, 229, 0.1)'
+                                  : 'rgba(153, 153, 153, 0.1)',
+                            }}
+                          >
+                            {rowKey?.['RE-ALLOCATE'] ?? 0}
+                          </GreyBox>
                         </ColumStyle>
                       </td>
                       <td style={{ textAlign: 'center' }}>
@@ -298,14 +361,56 @@ const ReturnTable: React.FC = () => {
                           <GreyBox>{rowKey?.['RE-DEL'] ?? 0}</GreyBox>
                         </ColumStyle>
                       </td>
-                      <td style={{ textAlign: 'center' }}>
+                      <td
+                        style={{
+                          color: rowKey?.RECYCLE > 0 ? '#0099ff' : 'inherit',
+                          fontWeight: rowKey?.RECYCLE > 0 ? 600 : 'normal',
+                          cursor: rowKey?.RECYCLE > 0 ? 'pointer' : 'default',
+                          textAlign: 'center',
+                        }}
+                        onClick={
+                          rowKey?.RECYCLE > 0
+                            ? () => handleRedirectRTS(rowKey?.customer_id, 'RECYCLE')
+                            : undefined
+                        }
+                      >
                         <ColumStyle>
-                          <GreyBox>{rowKey?.RECYCLE ?? 0}</GreyBox>
+                          <GreyBox
+                            style={{
+                              backgroundColor:
+                                rowKey?.RECYCLE > 0
+                                  ? 'rgba(99, 150, 229, 0.1)'
+                                  : 'rgba(153, 153, 153, 0.1)',
+                            }}
+                          >
+                            {rowKey?.RECYCLE ?? 0}
+                          </GreyBox>
                         </ColumStyle>
                       </td>
-                      <td style={{ textAlign: 'center' }}>
+                      <td
+                        style={{
+                          color: rowKey?.UNKNOWN > 0 ? '#0099ff' : 'inherit',
+                          fontWeight: rowKey?.UNKNOWN > 0 ? 600 : 'normal',
+                          cursor: rowKey?.UNKNOWN > 0 ? 'pointer' : 'default',
+                          textAlign: 'center',
+                        }}
+                        onClick={
+                          rowKey?.UNKNOWN > 0
+                            ? () => handleRedirectRTS(rowKey?.customer_id, 'UNKNOWN')
+                            : undefined
+                        }
+                      >
                         <ColumStyle>
-                          <GreyBox>{rowKey?.UNKNOWN ?? 0}</GreyBox>
+                          <GreyBox
+                            style={{
+                              backgroundColor:
+                                rowKey?.UNKNOWN > 0
+                                  ? 'rgba(99, 150, 229, 0.1)'
+                                  : 'rgba(153, 153, 153, 0.1)',
+                            }}
+                          >
+                            {rowKey?.UNKNOWN ?? 0}
+                          </GreyBox>
                         </ColumStyle>
                       </td>
                     </tr>

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

@@ -2,18 +2,30 @@ import React from 'react';
 import styled from 'styled-components';
 import { useCustomerInfo, useGlobalEscData } from '../../store';
 
+import { Skeleton } from 'antd';
+
 const Details = () => {
   // const [orderDetails] = useOrderDetails();
   const [customerInfo] = useCustomerInfo();
   const recipient = customerInfo?.recipient_name || '';
   const postcodeShow = customerInfo?.postcode || '';
+  const returnActionString = customerInfo?.return_action?.length 
+    ? `${customerInfo.return_action.join(', ')} - ` 
+    : '';
+
   const [globalEscData] = useGlobalEscData();
 
+  const isLoading = !recipient && !postcodeShow;
+
   return (
     <DetailsContainer>
       <Typo>
-        CUSTOMER RETURN - {recipient} , {postcodeShow} {}
-        {globalEscData?.length > 0 && (
+        {isLoading ? (
+          <Skeleton.Input active size="small" style={{ width: 350, borderRadius: 8 }} />
+        ) : (
+          `RETURN - ${returnActionString}${recipient} - ${postcodeShow}`
+        )}
+        {globalEscData?.length > 0 && !isLoading && (
           <EscInfo>
             {`${globalEscData[0]?.escalation_type?.level} (${globalEscData[0]?.escalation_type?.name})`}
           </EscInfo>

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

@@ -218,6 +218,7 @@ function OrderView({ locationloading }: any) {
         recipient_name:
           requiredData[0]?.order_recipient?.recipient_name ?? null,
         postcode: requiredData[0]?.order_recipient?.postcode ?? null,
+        return_action: requiredData[0]?.return_action ?? null,
       });
 
       setPrevOrderDetails(requiredData[0]);

package/src/components/order-view/order-details/expanded-content/footer/index.tsx

@@ -197,6 +197,8 @@ function OrderDetailsFooter() {
       setCustomerInfo({
         recipient_name: response?.data[0]?.order_recipient?.recipient_name,
         postcode: response?.data[0]?.order_recipient?.postcode,
+        return_action: response?.data[0]?.return_action,
+
       });
       setRecallAuditLog(true);
     } else {

package/src/components/order-view/store.ts

@@ -26,6 +26,7 @@ const orderStaticDataAtom = atom<any>({});
 interface OrderRecipient {
   recipient_name: string | null;
   postcode: string | null;
+  return_action?: string[] | null;
 }
 
 const customerInfoAtom = atom<OrderRecipient>({

package/src/components/order-view/types.ts

@@ -221,6 +221,7 @@ export interface OrdersType {
   order_customs_details?: OrderCustomsDetails;
   show_customs_details?: false;
   import_reference: string | null;
+  return_action?: string[] | null;
 }
 
 export type DeleteProds = {