From 972b02d80cf3fc0430a3d87db5a70c3e55428e74 Mon Sep 17 00:00:00 2001
From: "Marc Glasser (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Fri, 17 Jul 2026 19:08:13 +0000
Subject: [PATCH] Show inline Explain link on integration sync failure messages

Co-authored-by: Marc Glasser <marcaaron@users.noreply.github.com>
---
 .../actionContents/ActionContentRouter.tsx    |  1 +
 .../IntegrationSyncFailedMessage.tsx          | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/pages/inbox/report/actionContents/ActionContentRouter.tsx b/src/pages/inbox/report/actionContents/ActionContentRouter.tsx
index ed2eb4ba9015..4a29ea4ae7b2 100644
--- a/src/pages/inbox/report/actionContents/ActionContentRouter.tsx
+++ b/src/pages/inbox/report/actionContents/ActionContentRouter.tsx
@@ -451,6 +451,7 @@ function ActionContentRouter({
             <IntegrationSyncFailedMessage
                 action={action}
                 policyID={policyID}
+                originalReport={originalReport}
             />
         );
     }
diff --git a/src/pages/inbox/report/actionContents/IntegrationSyncFailedMessage.tsx b/src/pages/inbox/report/actionContents/IntegrationSyncFailedMessage.tsx
index 7d3243086763..8c73a87a7420 100644
--- a/src/pages/inbox/report/actionContents/IntegrationSyncFailedMessage.tsx
+++ b/src/pages/inbox/report/actionContents/IntegrationSyncFailedMessage.tsx
@@ -3,9 +3,11 @@ import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 
-import {getIntegrationSyncFailedMessage} from '@libs/ReportActionsUtils';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import {getIntegrationSyncFailedMessage, hasReasoning} from '@libs/ReportActionsUtils';
 
 import ReportActionItemBasicMessage from '@pages/inbox/report/ReportActionItemBasicMessage';
+import ReportActionItemMessageWithExplain from '@pages/inbox/report/ReportActionItemMessageWithExplain';
 
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -17,16 +19,32 @@ import React from 'react';
 type IntegrationSyncFailedMessageProps = {
     action: OnyxEntry<OnyxTypes.ReportAction>;
     policyID: string | undefined;
+
+    /** Original report from which the given reportAction is first created */
+    originalReport: OnyxEntry<OnyxTypes.Report>;
 };
 
-function IntegrationSyncFailedMessage({action, policyID}: IntegrationSyncFailedMessageProps) {
+function IntegrationSyncFailedMessage({action, policyID, originalReport}: IntegrationSyncFailedMessageProps) {
     const {translate} = useLocalize();
     const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRY_NEW_DOT);
+    const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(action?.childReportID)}`);
     const isTryNewDotNVPDismissed = !!tryNewDot?.classicRedirect?.dismissed;
+    const message = getIntegrationSyncFailedMessage(translate, action, policyID, isTryNewDotNVPDismissed);
+
+    if (hasReasoning(action)) {
+        return (
+            <ReportActionItemMessageWithExplain
+                message={message}
+                action={action}
+                childReport={childReport}
+                originalReport={originalReport}
+            />
+        );
+    }
 
     return (
         <ReportActionItemBasicMessage message="">
-            <RenderHTML html={`<comment><muted-text>${getIntegrationSyncFailedMessage(translate, action, policyID, isTryNewDotNVPDismissed)}</muted-text></comment>`} />
+            <RenderHTML html={`<comment><muted-text>${message}</muted-text></comment>`} />
         </ReportActionItemBasicMessage>
     );
 }