From de978a75f7a7ebdc8b09fb7dd71585b174087494 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 20 Apr 2023 11:47:22 +0500
Subject: [PATCH 1/3] fix: make the whole iouprevie row clickable

---
 src/components/ReportActionItem/IOUPreview.js | 164 +++++++++---------
 1 file changed, 86 insertions(+), 78 deletions(-)

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index a835f1d1a4a3..ddd34a7dd9ca 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
     View,
-    TouchableWithoutFeedback,
+    Pressable,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -179,89 +179,97 @@ const IOUPreview = (props) => {
         );
     };
 
+    const childContainer = (
+        <View>
+            <OfflineWithFeedback
+                pendingAction={props.pendingAction}
+                errors={props.walletTerms.errors}
+                onClose={() => {
+                    PaymentMethods.clearWalletTermsError();
+                    Report.clearIOUError(props.chatReportID);
+                }}
+                errorRowStyles={[styles.mbn1]}
+                needsOffscreenAlphaCompositing
+            >
+                <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
+                    <View style={[styles.flexRow]}>
+                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                            <Text style={styles.h1}>
+                                {cachedTotal}
+                            </Text>
+                            {!props.iouReport.hasOutstandingIOU && (
+                                <View style={styles.iouPreviewBoxCheckmark}>
+                                    <Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
+                                </View>
+                            )}
+                        </View>
+                        <View style={styles.iouPreviewBoxAvatar}>
+                            <MultipleAvatars
+                                icons={[managerAvatar, ownerAvatar]}
+                                secondAvatarStyle={[
+                                    styles.secondAvatarInline,
+                                    props.isHovered
+                                        ? styles.iouPreviewBoxAvatarHover
+                                        : undefined,
+                                ]}
+                                avatarTooltips={avatarTooltip}
+                            />
+                        </View>
+                    </View>
+                    {isCurrentUserManager
+                        ? (
+                            <Text>
+                                {props.iouReport.hasOutstandingIOU
+                                    ? props.translate('iou.youowe', {owner: ownerName})
+                                    : props.translate('iou.youpaid', {owner: ownerName})}
+                            </Text>
+                        )
+                        : (
+                            <>
+                                <Text>
+                                    {props.iouReport.hasOutstandingIOU
+                                        ? props.translate('iou.owesyou', {manager: managerName})
+                                        : props.translate('iou.paidyou', {manager: managerName})}
+                                </Text>
+                                {props.shouldShowPendingConversionMessage && (
+                                    <Text style={[styles.textLabel, styles.colorMuted]}>
+                                        {props.translate('iou.pendingConversionMessage')}
+                                    </Text>
+                                )}
+                            </>
+                        )}
+                    {(isCurrentUserManager
+                        && !props.shouldHidePayButton
+                        && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
+                            <Button
+                                style={styles.mt4}
+                                onPress={props.onPayButtonPressed}
+                                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                                onPressOut={() => ControlSelection.unblock()}
+                                onLongPress={showContextMenu}
+                                text={props.translate('iou.pay')}
+                                success
+                                medium
+                            />
+                    ))}
+                </View>
+            </OfflineWithFeedback>
+        </View>
+    );
+
+    if (!props.onPreviewPressed) {
+        return childContainer;
+    }
+
     return (
-        <TouchableWithoutFeedback
+        <Pressable
             onPress={props.onPreviewPressed}
             onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
         >
-            <View>
-                <OfflineWithFeedback
-                    pendingAction={props.pendingAction}
-                    errors={props.walletTerms.errors}
-                    onClose={() => {
-                        PaymentMethods.clearWalletTermsError();
-                        Report.clearIOUError(props.chatReportID);
-                    }}
-                    errorRowStyles={[styles.mbn1]}
-                    needsOffscreenAlphaCompositing
-                >
-                    <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.h1}>
-                                    {cachedTotal}
-                                </Text>
-                                {!props.iouReport.hasOutstandingIOU && (
-                                    <View style={styles.iouPreviewBoxCheckmark}>
-                                        <Icon src={Expensicons.Checkmark} fill={themeColors.iconSuccessFill} />
-                                    </View>
-                                )}
-                            </View>
-                            <View style={styles.iouPreviewBoxAvatar}>
-                                <MultipleAvatars
-                                    icons={[managerAvatar, ownerAvatar]}
-                                    secondAvatarStyle={[
-                                        styles.secondAvatarInline,
-                                        props.isHovered
-                                            ? styles.iouPreviewBoxAvatarHover
-                                            : undefined,
-                                    ]}
-                                    avatarTooltips={avatarTooltip}
-                                />
-                            </View>
-                        </View>
-                        {isCurrentUserManager
-                            ? (
-                                <Text>
-                                    {props.iouReport.hasOutstandingIOU
-                                        ? props.translate('iou.youowe', {owner: ownerName})
-                                        : props.translate('iou.youpaid', {owner: ownerName})}
-                                </Text>
-                            )
-                            : (
-                                <>
-                                    <Text>
-                                        {props.iouReport.hasOutstandingIOU
-                                            ? props.translate('iou.owesyou', {manager: managerName})
-                                            : props.translate('iou.paidyou', {manager: managerName})}
-                                    </Text>
-                                    {props.shouldShowPendingConversionMessage && (
-                                        <Text style={[styles.textLabel, styles.colorMuted]}>
-                                            {props.translate('iou.pendingConversionMessage')}
-                                        </Text>
-                                    )}
-                                </>
-                            )}
-                        {(isCurrentUserManager
-                            && !props.shouldHidePayButton
-                            && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
-                                <Button
-                                    style={styles.mt4}
-                                    onPress={props.onPayButtonPressed}
-                                    onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                                    onPressOut={() => ControlSelection.unblock()}
-                                    onLongPress={showContextMenu}
-                                    text={props.translate('iou.pay')}
-                                    success
-                                    medium
-                                />
-                        ))}
-                    </View>
-                </OfflineWithFeedback>
-            </View>
-        </TouchableWithoutFeedback>
+            {childContainer}
+        </Pressable>
     );
 };
 

From 5b8b2f44fd27f14b12295b68e404491525872afc Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 20 Apr 2023 14:47:12 +0500
Subject: [PATCH 2/3] fix: use Pressable for IOUPreview

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

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index ddd34a7dd9ca..9a01f1f91334 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -113,7 +113,7 @@ const defaultProps = {
     iouReport: {},
     shouldHidePayButton: false,
     onPayButtonPressed: null,
-    onPreviewPressed: () => {},
+    onPreviewPressed: null,
     action: undefined,
     contextMenuAnchor: undefined,
     checkIfContextMenuActive: () => {},

From 8c24835d11b7b5f763ab378f080dd428ede2f3fd Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 21 Apr 2023 22:25:35 +0500
Subject: [PATCH 3/3] Update src/components/ReportActionItem/IOUPreview.js

Co-authored-by: Sahil <thesahindia@gmail.com>
---
 src/components/ReportActionItem/IOUPreview.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index 9a01f1f91334..e3ea5b09b2f5 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -223,8 +223,7 @@ const IOUPreview = (props) => {
                                     ? props.translate('iou.youowe', {owner: ownerName})
                                     : props.translate('iou.youpaid', {owner: ownerName})}
                             </Text>
-                        )
-                        : (
+                        ) : (
                             <>
                                 <Text>
                                     {props.iouReport.hasOutstandingIOU