From 8f08862aab884af2ab772035e8ec7c64842ce377 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 11 Jun 2021 11:53:09 +0800
Subject: [PATCH 1/5] Make tapping the entire IOU preview component open the
 IOU Details modal

---
 src/components/ReportActionItemIOUAction.js  |  1 +
 src/components/ReportActionItemIOUPreview.js | 98 ++++++++++----------
 src/libs/actions/IOU.js                      | 22 ++++-
 src/libs/actions/Report.js                   |  1 +
 src/styles/styles.js                         |  1 +
 5 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/src/components/ReportActionItemIOUAction.js b/src/components/ReportActionItemIOUAction.js
index 869539015fcf..12a8875478ce 100644
--- a/src/components/ReportActionItemIOUAction.js
+++ b/src/components/ReportActionItemIOUAction.js
@@ -52,6 +52,7 @@ const ReportActionItemIOUAction = ({
                     iouReportID={action.originalMessage.IOUReportID}
                     chatReportID={chatReportID}
                     onPayButtonPressed={launchDetailsModal}
+                    onPreviewPressed={launchDetailsModal}
                 />
             )}
         </>
diff --git a/src/components/ReportActionItemIOUPreview.js b/src/components/ReportActionItemIOUPreview.js
index e96236f9f86b..071649f7ecf6 100644
--- a/src/components/ReportActionItemIOUPreview.js
+++ b/src/components/ReportActionItemIOUPreview.js
@@ -20,6 +20,7 @@ import themeColors from '../styles/themes/default';
 import Icon from './Icon';
 import CONST from '../CONST';
 import {Checkmark} from './Icon/Expensicons';
+import {TouchableWithoutFeedback} from 'react-native-web';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */
@@ -81,6 +82,7 @@ const ReportActionItemIOUPreview = ({
     session,
     shouldHidePayButton,
     onPayButtonPressed,
+    onPreviewPressed,
     translate,
 }) => {
     // Usually the parent determines whether the IOU Preview is displayed. But as the iouReport total cannot be known
@@ -110,56 +112,58 @@ const ReportActionItemIOUPreview = ({
     const ownerAvatar = lodashGet(personalDetails, [ownerEmail, 'avatar'], '');
     const cachedTotal = iouReport.cachedTotal ? iouReport.cachedTotal.replace(/[()]/g, '') : '';
     return (
-        <View style={styles.iouPreviewBox}>
-            {reportIsLoading
-                ? <ActivityIndicator style={styles.iouPreviewBoxLoading} color={themeColors.text} />
-                : (
-                    <View>
-                        <View style={styles.flexRow}>
-                            <View style={styles.flex1}>
-                                <View style={styles.flexRow}>
-                                    <Text style={styles.h1}>
-                                        {cachedTotal}
-                                    </Text>
-                                    {!iouReport.hasOutstandingIOU && (
-                                        <View style={styles.iouPreviewBoxCheckmark}>
-                                            <Icon src={Checkmark} fill={themeColors.iconSuccessFill} />
-                                        </View>
-                                    )}
+        <TouchableWithoutFeedback onPress={onPreviewPressed}>
+            <View style={styles.iouPreviewBox}>
+                {reportIsLoading
+                    ? <ActivityIndicator style={styles.iouPreviewBoxLoading} color={themeColors.text} />
+                    : (
+                        <View>
+                            <View style={styles.flexRow}>
+                                <View style={styles.flex1}>
+                                    <View style={styles.flexRow}>
+                                        <Text style={styles.h1}>
+                                            {cachedTotal}
+                                        </Text>
+                                        {!iouReport.hasOutstandingIOU && (
+                                            <View style={styles.iouPreviewBoxCheckmark}>
+                                                <Icon src={Checkmark} fill={themeColors.iconSuccessFill} />
+                                            </View>
+                                        )}
+                                    </View>
+                                </View>
+                                <View style={styles.iouPreviewBoxAvatar}>
+                                    <MultipleAvatars
+                                        avatarImageURLs={[managerAvatar, ownerAvatar]}
+                                        secondAvatarStyle={[styles.secondAvatarInline]}
+                                    />
                                 </View>
                             </View>
-                            <View style={styles.iouPreviewBoxAvatar}>
-                                <MultipleAvatars
-                                    avatarImageURLs={[managerAvatar, ownerAvatar]}
-                                    secondAvatarStyle={[styles.secondAvatarInline]}
-                                />
-                            </View>
-                        </View>
-                        <Text>
-                            {iouReport.hasOutstandingIOU
-                                ? translate('iou.owes', {manager: managerName, owner: ownerName})
-                                : translate('iou.paid', {manager: managerName, owner: ownerName})}
-                        </Text>
-                        {(isCurrentUserManager
-                            && !shouldHidePayButton
-                            && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
-                            <TouchableOpacity
-                                style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
-                                onPress={onPayButtonPressed}
-                            >
-                                <Text
-                                    style={[
-                                        styles.buttonSmallText,
-                                        styles.buttonSuccessText,
-                                    ]}
+                            <Text>
+                                {iouReport.hasOutstandingIOU
+                                    ? translate('iou.owes', {manager: managerName, owner: ownerName})
+                                    : translate('iou.paid', {manager: managerName, owner: ownerName})}
+                            </Text>
+                            {(isCurrentUserManager
+                                && !shouldHidePayButton
+                                && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
+                                <TouchableOpacity
+                                    style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
+                                    onPress={onPayButtonPressed}
                                 >
-                                    {translate('iou.pay')}
-                                </Text>
-                            </TouchableOpacity>
-                        ))}
-                    </View>
-                )}
-        </View>
+                                    <Text
+                                        style={[
+                                            styles.buttonSmallText,
+                                            styles.buttonSuccessText,
+                                        ]}
+                                    >
+                                        {translate('iou.pay')}
+                                    </Text>
+                                </TouchableOpacity>
+                            ))}
+                        </View>
+                    )}
+            </View>
+        </TouchableWithoutFeedback>
     );
 };
 
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 3e64047eedc8..ae7179723e64 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -5,7 +5,7 @@ import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
 import ROUTES from '../../ROUTES';
 import * as API from '../API';
-import {getSimplifiedIOUReport, fetchChatReportsByIDs, fetchIOUReportByIDAndUpdateChatReport} from './Report';
+import {getSimplifiedIOUReport, fetchChatReportsByIDs, fetchIOUReportByIDAndUpdateChatReport, getSimplifiedReportObject} from './Report';
 import Navigation from '../Navigation/Navigation';
 
 /**
@@ -204,6 +204,26 @@ function payIOUReport({
             if (response.jsonCode !== 200) {
                 throw new Error(response.message);
             }
+
+            // Save the updated chat and iou reports sent back in the response
+            // NOTE: since the API doesn't handle syncing chat reports with IOU reports,
+            // we also need to set the iouReportID and hasOutstandingIOU fields of the chatReport in Onyx manually
+            // If we didn't sync the reportIDs, the paid IOU would still be shown to users as unpaid. The
+            // iouReport being fetched here must be open, because only an open iouReport can be paid.
+            // const {chatReport, iouReport} = response;
+            // const iouReportData = {};
+            // const chatReportData = {};
+            // const chatReportKey = `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`;
+            // const iouReportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
+            // chatReportData[chatReportKey] = getSimplifiedReportObject(chatReport);
+            // chatReportData[chatReportKey].iouReportID = reportID;
+            // chatReportData[chatReportKey].hasOutstandingIOU = iouReportData.stateNum
+            //     === CONST.REPORT.STATE_NUM.PROCESSING && iouReportData.total !== 0;
+            // iouReportData[iouReportKey] = getSimplifiedIOUReport(iouReport, chatReportID);
+            // Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT_IOUS, iouReportData);
+            // Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, chatReportData);
+
+
             fetchChatReportsByIDs([chatReportID]);
 
             // If an iouReport is open (has an IOU, but is not yet paid) then we sync the chatReport's 'iouReportID'
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index ce05c41675b7..0f9a12f74fce 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1287,4 +1287,5 @@ export {
     saveReportActionDraft,
     deleteReportComment,
     getSimplifiedIOUReport,
+    getSimplifiedReportObject,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 3a2fac4347a2..daa8148bec93 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1404,6 +1404,7 @@ const styles = {
         marginTop: 16,
         maxWidth: variables.sideBarWidth,
         width: '100%',
+        cursor: 'pointer',
     },
 
     iouPreviewBoxLoading: {

From a5801aa6c136408ddc70d6a043840ad91b5f564f Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 11 Jun 2021 12:27:01 +0800
Subject: [PATCH 2/5] Fix import

---
 src/components/ReportActionItemIOUPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItemIOUPreview.js b/src/components/ReportActionItemIOUPreview.js
index 071649f7ecf6..61361f53a8dd 100644
--- a/src/components/ReportActionItemIOUPreview.js
+++ b/src/components/ReportActionItemIOUPreview.js
@@ -4,6 +4,7 @@ import {
     ActivityIndicator,
     TouchableOpacity,
     Text,
+    TouchableWithoutFeedback,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -20,7 +21,6 @@ import themeColors from '../styles/themes/default';
 import Icon from './Icon';
 import CONST from '../CONST';
 import {Checkmark} from './Icon/Expensicons';
-import {TouchableWithoutFeedback} from 'react-native-web';
 
 const propTypes = {
     /** Additional logic for displaying the pay button */

From cc806986bd0f2e981fa7e4dd207d24bc5fc9636e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 11 Jun 2021 12:33:14 +0800
Subject: [PATCH 3/5] revert changes accidentally added in

---
 src/libs/actions/IOU.js    | 19 -------------------
 src/libs/actions/Report.js |  1 -
 2 files changed, 20 deletions(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index ae7179723e64..7558bd73bfad 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -205,25 +205,6 @@ function payIOUReport({
                 throw new Error(response.message);
             }
 
-            // Save the updated chat and iou reports sent back in the response
-            // NOTE: since the API doesn't handle syncing chat reports with IOU reports,
-            // we also need to set the iouReportID and hasOutstandingIOU fields of the chatReport in Onyx manually
-            // If we didn't sync the reportIDs, the paid IOU would still be shown to users as unpaid. The
-            // iouReport being fetched here must be open, because only an open iouReport can be paid.
-            // const {chatReport, iouReport} = response;
-            // const iouReportData = {};
-            // const chatReportData = {};
-            // const chatReportKey = `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`;
-            // const iouReportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
-            // chatReportData[chatReportKey] = getSimplifiedReportObject(chatReport);
-            // chatReportData[chatReportKey].iouReportID = reportID;
-            // chatReportData[chatReportKey].hasOutstandingIOU = iouReportData.stateNum
-            //     === CONST.REPORT.STATE_NUM.PROCESSING && iouReportData.total !== 0;
-            // iouReportData[iouReportKey] = getSimplifiedIOUReport(iouReport, chatReportID);
-            // Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT_IOUS, iouReportData);
-            // Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, chatReportData);
-
-
             fetchChatReportsByIDs([chatReportID]);
 
             // If an iouReport is open (has an IOU, but is not yet paid) then we sync the chatReport's 'iouReportID'
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 0f9a12f74fce..ce05c41675b7 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1287,5 +1287,4 @@ export {
     saveReportActionDraft,
     deleteReportComment,
     getSimplifiedIOUReport,
-    getSimplifiedReportObject,
 };

From 709747eae276160ebbb19241cf3b319cf0a0d926 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 11 Jun 2021 12:36:01 +0800
Subject: [PATCH 4/5] revert changes accidentally added in

---
 src/libs/actions/IOU.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 7558bd73bfad..2305fec6a8e9 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -5,7 +5,7 @@ import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
 import ROUTES from '../../ROUTES';
 import * as API from '../API';
-import {getSimplifiedIOUReport, fetchChatReportsByIDs, fetchIOUReportByIDAndUpdateChatReport, getSimplifiedReportObject} from './Report';
+import {getSimplifiedIOUReport, fetchChatReportsByIDs, fetchIOUReportByIDAndUpdateChatReport} from './Report';
 import Navigation from '../Navigation/Navigation';
 
 /**

From a37e51c6f9bd49201833889d1ece6c9d7fa31ef9 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Fri, 11 Jun 2021 13:47:03 +0800
Subject: [PATCH 5/5] remove whitespace

---
 src/libs/actions/IOU.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 2305fec6a8e9..3e64047eedc8 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -204,7 +204,6 @@ function payIOUReport({
             if (response.jsonCode !== 200) {
                 throw new Error(response.message);
             }
-
             fetchChatReportsByIDs([chatReportID]);
 
             // If an iouReport is open (has an IOU, but is not yet paid) then we sync the chatReport's 'iouReportID'