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..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'; @@ -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 ( - - {reportIsLoading - ? - : ( - - - - - - {cachedTotal} - - {!iouReport.hasOutstandingIOU && ( - - - - )} + + + {reportIsLoading + ? + : ( + + + + + + {cachedTotal} + + {!iouReport.hasOutstandingIOU && ( + + + + )} + + + + - - - - - - {iouReport.hasOutstandingIOU - ? translate('iou.owes', {manager: managerName, owner: ownerName}) - : translate('iou.paid', {manager: managerName, owner: ownerName})} - - {(isCurrentUserManager - && !shouldHidePayButton - && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && ( - - + {iouReport.hasOutstandingIOU + ? translate('iou.owes', {manager: managerName, owner: ownerName}) + : translate('iou.paid', {manager: managerName, owner: ownerName})} + + {(isCurrentUserManager + && !shouldHidePayButton + && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && ( + - {translate('iou.pay')} - - - ))} - - )} - + + {translate('iou.pay')} + + + ))} + + )} + + ); }; 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: {