feature/IO-3586-Socket-Reconnect-Issues - Fix

client/src/pages/dms/dms.container.jsx

@@ -77,6 +77,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
   const { t } = useTranslation();
   const [resetAfterReconnect, setResetAfterReconnect] = useState(false);
   const [allocationsSummary, setAllocationsSummary] = useState(null);
+  const [reconnectNonce, setReconnectNonce] = useState(0);
 
   // Compute a single normalized mode and pick the proper socket
   const mode = getDmsMode(bodyshop, Fortellis.treatment); // "rr" | "fortellis" | "cdk" | "pbs" | "none"
@@ -114,7 +115,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
 
   const notification = useNotification();
 
-  const { socket: wsssocket } = useSocket();
+  const { socket: wsssocket, reconnectSocket } = useSocket();
   const activeSocket = useMemo(() => (isWssMode(mode) ? wsssocket : legacySocket), [mode, wsssocket]);
 
   const [isConnected, setIsConnected] = useState(!!activeSocket?.connected);
@@ -178,6 +179,27 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
   }`;
 
   const resetKey = useMemo(() => `${mode || "none"}-${jobId || "none"}`, [mode, jobId]);
+  const customerSelectorKey = useMemo(() => `${resetKey}-${reconnectNonce}`, [resetKey, reconnectNonce]);
+
+  const handleReconnectClick = async () => {
+    setResetAfterReconnect(true);
+    setReconnectNonce((n) => n + 1);
+
+    if (!activeSocket) return;
+
+    if (isWssMode(mode)) {
+      setActiveLogLevel(logLevel);
+      const didReconnect = await reconnectSocket?.({ forceRefreshToken: true });
+      if (!didReconnect) {
+        activeSocket.disconnect();
+        setTimeout(() => activeSocket.connect(), 100);
+      }
+      return;
+    }
+
+    activeSocket.disconnect();
+    setTimeout(() => activeSocket.connect(), 100);
+  };
 
   // 🔄 Hard reset of local + server-side DMS context when the page/job loads
   useEffect(() => {
@@ -428,7 +450,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
 
   // Check if Reynolds mode requires early RO
   const hasEarlyRO = !!(data.jobs_by_pk?.dms_id && data.jobs_by_pk?.dms_customer_id && data.jobs_by_pk?.dms_advisor_id);
-  
+
   if (isRrMode && !hasEarlyRO) {
     return (
       <Result
@@ -503,6 +525,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
         </Col>
 
         <DmsCustomerSelector
+          key={customerSelectorKey}
           jobid={jobId}
           job={data?.jobs_by_pk}
           bodyshop={bodyshop}
@@ -549,21 +572,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
                     <Select.Option key="ERROR">ERROR</Select.Option>
                   </Select>
                   <Button onClick={() => setLogs([])}>Clear Logs</Button>
-                  <Button
-                    onClick={() => {
-                      setLogs([]);
-                      setResetAfterReconnect(true);
-                      if (isWssMode(mode)) {
-                        setActiveLogLevel(logLevel);
-                      }
-                      if (activeSocket) {
-                        activeSocket.disconnect();
-                        setTimeout(() => activeSocket.connect(), 100);
-                      }
-                    }}
-                  >
-                    Reconnect
-                  </Button>
+                  <Button onClick={handleReconnectClick}>Reconnect</Button>
                 </Space>
               }
             >