Merge pull request #3541 from Expensify/jasper-tappableIouDetailsPreview

Make tapping the entire IOU preview component open the IOU Details modal
Expensify · Jun 11, 2021 · 3284a15 · 3284a15
2 parents 58e1584 + a37e51c
commit 3284a15
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 47 deletions.
diff --git 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
@@ -4,6 +4,7 @@ import {
     ActivityIndicator,
     TouchableOpacity,
     Text,
+    TouchableWithoutFeedback,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Str from 'expensify-common/lib/str';
@@ -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/styles/styles.js b/src/styles/styles.js
@@ -1404,6 +1404,7 @@ const styles = {
         marginTop: 16,
         maxWidth: variables.sideBarWidth,
         width: '100%',
+        cursor: 'pointer',
     },
 
     iouPreviewBoxLoading: {