From a1cf9fc0c2d29e2ab3f5189983210d3cd3b62b78 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Fri, 7 Feb 2025 14:47:51 -0800
Subject: [PATCH] add view original button

---
 src/languages/de.ts                              |  1 +
 src/languages/en.ts                              |  1 +
 src/languages/es.ts                              |  1 +
 src/languages/fr.ts                              |  1 +
 src/languages/ro.ts                              |  1 +
 src/pages/home/report/ReportActionItemSingle.tsx | 10 +++++++---
 src/types/onyx/ReportAction.ts                   |  2 ++
 7 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/languages/de.ts b/src/languages/de.ts
index 6343937d8a93..c2d314124857 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -1775,6 +1775,7 @@ const translations = {
         },
         translateMessage: 'Nachrichten übersetzen',
         viewOriginal: 'Original anzeigen',
+        showTranslation: 'Übersetzung anzeigen',
     },
     themePage: {
         theme: 'Thema',
diff --git a/src/languages/en.ts b/src/languages/en.ts
index f2a7b9a7b448..b5a49ea41e04 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1743,6 +1743,7 @@ const translations = {
         },
         translateMessage: 'Translate messages',
         viewOriginal: 'View original',
+        showTranslation: 'Show translation',
     },
     themePage: {
         theme: 'Theme',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 711b8e5e08e9..f86b4229aaac 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1746,6 +1746,7 @@ const translations = {
         },
         translateMessage: 'Traducir mensajes',
         viewOriginal: 'Ver original',
+        showTranslation: 'Mostrar traducción',
     },
     themePage: {
         theme: 'Tema',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index c59205e2add4..6da26688cca6 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -1772,6 +1772,7 @@ const translations = {
         },
         translateMessage: 'Traduire les messages',
         viewOriginal: "Voir l'original",
+        showTranslation: 'Afficher la traduction',
     },
     themePage: {
         theme: 'Th\u00E8me',
diff --git a/src/languages/ro.ts b/src/languages/ro.ts
index da6f6f7d77af..d50b37a937f6 100644
--- a/src/languages/ro.ts
+++ b/src/languages/ro.ts
@@ -1800,6 +1800,7 @@ const translations = {
         },
         translateMessage: 'Tradu mesajele',
         viewOriginal: 'Vezi originalul',
+        showTranslation: 'Afișează traducerea',
     },
     themePage: {
         theme: 'Tem\u0103',
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 1c6e3aaa25cc..e3292874bd62 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -101,6 +101,7 @@ function ReportActionItemSingle({
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const [showOriginal, setShowOriginal] = useState(false);
     const {translate} = useLocalize();
     const personalDetails = usePersonalDetails();
     const policy = usePolicy(report?.policyID);
@@ -281,6 +282,7 @@ function ReportActionItemSingle({
     const statusText = status?.text ?? '';
     const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
 
+    console.log('over here', action?.shouldShowTranslation)
     return (
         <View style={[styles.chatItem, wrapperStyle]}>
             <PressableWithoutFeedback
@@ -333,11 +335,13 @@ function ReportActionItemSingle({
                         {action?.message?.[0]?.translatedText && (
                             <PressableWithoutFeedback
                                 style={[styles.ml1]}
-                                onPress={() => console.log('pressed')}
+                                onPress={() => setShowOriginal(!showOriginal)}
                                 accessibilityLabel={actorHint}
                                 role={CONST.ROLE.BUTTON}
                             >
-                                <Text style={[styles.chatItemMessageHeaderTimestamp, styles.link]}>{translate('languagePage.viewOriginal')}</Text>
+                                <Text style={[styles.chatItemMessageHeaderTimestamp, styles.link]}>
+                                    {translate(showOriginal ? 'languagePage.showTranslation' : 'languagePage.viewOriginal')}
+                                </Text>
                             </PressableWithoutFeedback>
                         )}
                     </View>
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index 154b12085622..95806c185638 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -277,6 +277,8 @@ type ReportActionBase = OnyxCommon.OnyxValueWithOfflineFeedback<{
      * Note: This is sent by the backend but we don't use it locally
      */
     timestamp?: number;
+
+    shouldShowTranslation?: boolean;
 }>;
 
 /**