@bjsdistribution/dms-client-return 0.1.68-prod → 0.1.69-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.68-prod",
+  "version": "0.1.69-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

@@ -1,5 +1,5 @@
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
-import { Empty, notification, Skeleton } from 'antd';
+import { Empty, notification, Skeleton, Tooltip } from 'antd';
 import { format } from 'date-fns';
 import { useAtom } from 'jotai';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -278,7 +278,7 @@ const ReturnOrderTable = () => {
 
         setSelectAll(
           updatedSelectedLocations?.length > 0 &&
-            updatedSelectedLocations?.length === totalItemsOfAction
+          updatedSelectedLocations?.length === totalItemsOfAction
         );
         return updatedSelectedLocations;
       } else {
@@ -419,29 +419,44 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {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
-                        )}
-                        onChange={() =>
-                          handleSelectOrderReturn(
-                            item?.id,
-                            item?.return_location,
-                            item?.return_location_name,
-                            item?.product_return_action,
-                            item?.legacy_product_id
-                          )
-                        }
-                      />
-                    ) : null}
+                    {isSelectableItem(item) ? (() => {
+                      const isDisabled =
+                        selectedReturnOrder?.length > 0 &&
+                        selectedReturnOrder[0]?.product_return_action !==
+                        item?.product_return_action;
+
+                      return (
+                        <Tooltip
+                          title={
+                            isDisabled
+                              ? 'Cannot select different return actions'
+                              : ''
+                          }
+                        >
+                          <span
+                            className={isDisabled ? 'disabled-wrapper' : ''}
+                          >
+                            <Checkbox
+                              className="custom-check"
+                              disabled={isDisabled}
+                              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
+                                )
+                              }
+                            />
+                          </span>
+                        </Tooltip>
+                      );
+                    })() : null}
                   </td>
 
                   <td>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -253,7 +253,7 @@ export const StyledTable = styled.table`
         }
       }
       .custom-check {
-        position: absloute;
+        position: absolute;
       }
       .emailInvoiceNo {
         padding-left: 0px;
@@ -305,6 +305,13 @@ export const StyledTable = styled.table`
         border-right: none;
         border-left: none;
         position: relative;
+        .disabled-wrapper {
+          cursor: not-allowed !important;
+          display: inline-block;
+          * {
+            pointer-events: none !important;
+          }
+        }
         .actionbox {
           display: flex;
           gap: 5px;

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -26,6 +26,7 @@ import { useNavigate } from 'react-router-dom';
 
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
+  const [hasStartedLoading, setHasStartedLoading] = useState(false);
   const [selectedRows] = useDeleteProdsID();
   const [, setIsFormValid] = useState(false);
   const [newGrouped] = useFinalPayload();
@@ -60,7 +61,7 @@ const ModalManager = () => {
     data: response,
     setShouldPerformAction,
     loading: confirmLoading,
-    // error: apiError,
+    error: apiError,
     setError,
   } = useApiHook<{
     data: ApiResponse[];
@@ -90,13 +91,24 @@ const ModalManager = () => {
   });
 
   useEffect(() => {
+    if (confirmLoading) {
+      setHasStartedLoading(true);
+    }
+  }, [confirmLoading]);
+
+  useEffect(() => {
+    if (!hasStartedLoading) return;
+    if (confirmLoading || postLoading) return;
+
     // @ts-ignore
-    if ((response && response?.code == 500) || response?.code == 400) {
+    if (apiError || (response && (response?.code == 500 || response?.code == 400))) {
+      setHasStartedLoading(false);
+      
       // @ts-ignore
+      const errorMessage = apiError?.message || response?.message || 'Failed to create return';
       notification.error({
         message: 'Failure',
-        // @ts-ignore
-        description: `${response?.message}`,
+        description: errorMessage,
       });
       dispatch({ type: 'close' });
       setSendEmailNotification(true);
@@ -109,6 +121,7 @@ const ModalManager = () => {
       setError(null);
       // @ts-ignore
     } else if (response?.code === 201 || response?.code === 200) {
+      setHasStartedLoading(false);
       notification.success({
         message: 'Success',
         // @ts-ignore
@@ -150,7 +163,7 @@ const ModalManager = () => {
       // for dev
       //navigate('/orders/view/return/overview');
     }
-  }, [postLoading]);
+  }, [postLoading, confirmLoading, hasStartedLoading, response]);
 
   return (
     <>