IOU Details Modal

src/Expensify.js

@@ -26,7 +26,7 @@ Onyx.init({
         [ONYXKEYS.SESSION]: {loading: false, shouldShowComposeInput: true},
         [ONYXKEYS.ACCOUNT]: CONST.DEFAULT_ACCOUNT_DATA,
         [ONYXKEYS.NETWORK]: {isOffline: false},
-        [ONYXKEYS.IOU]: {loading: false},
+        [ONYXKEYS.IOU]: {loading: false, error: false, creatingIOUTransaction: false},
     },
     registerStorageEventListener: (onStorageEvent) => {
         listenToStorageEvents(onStorageEvent);

src/ROUTES.js

@@ -25,6 +25,9 @@ export default {
     getIouRequestRoute: reportID => `iou/request/${reportID}`,
     IOU_BILL: 'iou/split/:reportID',
     getIouSplitRoute: reportID => `iou/split/${reportID}`,
+    IOU_DETAILS: 'iou/details',
+    IOU_DETAILS_WITH_IOU_REPORT_ID: 'iou/details/:chatReportID/:iouReportID/',
+    getIouDetailsRoute: (chatReportID, iouReportID) => `iou/details/${chatReportID}/${iouReportID}`,
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',

src/components/ReportActionItem/IOUPreview.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import {View, TouchableOpacity, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import Str from 'expensify-common/lib/str';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
+import compose from '../../libs/compose';
+import styles from '../../styles/styles';
+import ONYXKEYS from '../../ONYXKEYS';
+import MultipleAvatars from '../MultipleAvatars';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    // Additional logic for displaying the pay button
+    shouldHidePayButton: PropTypes.bool,
+
+    // Callback for the Pay/Settle button
+    onPayButtonPressed: PropTypes.func,
+
+    // The active IOUReport, used for Onyx subscription
+    // eslint-disable-next-line react/no-unused-prop-types
+    iouReportID: PropTypes.number,
+
+    /* --- Onyx Props --- */
+    // Active IOU Report for current report
+    iou: PropTypes.shape({
+        // Email address of the manager in this iou report
+        managerEmail: PropTypes.string,
+
+        // Email address of the creator of this iou report
+        ownerEmail: PropTypes.string,
+
+        // Outstanding amount of this transaction
+        cachedTotal: PropTypes.string,
+
+        // Does the report have an outstanding IOU that needs to be paid?
+        hasOutstandingIOU: PropTypes.bool,
+    }),
+
+    // All of the personal details for everyone
+    personalDetails: PropTypes.objectOf(PropTypes.shape({
+
+        // This is either the user's full name, or their login if full name is an empty string
+        displayName: PropTypes.string.isRequired,
+    })).isRequired,
+
+    // Session info for the currently logged in user.
+    session: PropTypes.shape({
+        // Currently logged in user email
+        email: PropTypes.string,
+    }).isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    iou: {},
+    iouReportID: undefined,
+    shouldHidePayButton: false,
+    onPayButtonPressed: null,
+};
+
+const ReportActionItemIOUPreview = ({
+    iou,
+    personalDetails,
+    session,
+    shouldHidePayButton,
+    onPayButtonPressed,
+    translate,
+}) => {
+    const sessionEmail = lodashGet(session, 'email', null);
+
+    // Pay button should only be visible to the manager of the report.
+    const isCurrentUserManager = iou.managerEmail === sessionEmail;
+
+    const managerName = lodashGet(
+        personalDetails,
+        [iou.managerEmail, 'displayName'],
+        iou.managerEmail ? Str.removeSMSDomain(iou.managerEmail) : '',
+    );
+    const ownerName = lodashGet(
+        personalDetails,
+        [iou.ownerEmail, 'displayName'],
+        iou.ownerEmail ? Str.removeSMSDomain(iou.ownerEmail) : '',
+    );
+    const managerAvatar = lodashGet(personalDetails, [iou.managerEmail, 'avatar'], '');
+    const ownerAvatar = lodashGet(personalDetails, [iou.ownerEmail, 'avatar'], '');
+    const cachedTotal = iou.cachedTotal ? iou.cachedTotal.replace(/[()]/g, '') : '';
+
+    return (
+        <View style={styles.iouPreviewBox}>
+            <View style={styles.flexRow}>
+                <View style={styles.flex1}>
+                    <Text style={styles.h1}>{cachedTotal}</Text>
+                    <Text style={styles.mt2}>
+                        {iou.hasOutstandingIOU
+                            ? translate('iou.owes', {manager: managerName, owner: ownerName})
+                            : translate('iou.paid', {manager: managerName, owner: ownerName})}
+                    </Text>
+                </View>
+                <View style={styles.iouPreviewBoxAvatar}>
+                    <MultipleAvatars
+                        avatarImageURLs={[managerAvatar, ownerAvatar]}
+                        secondAvatarStyle={[styles.secondAvatarInline]}
+                    />
+                </View>
+            </View>
+            {isCurrentUserManager && !shouldHidePayButton && (
+                <TouchableOpacity
+                    style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
+                    onPress={onPayButtonPressed}
+                >
+                    <Text
+                        style={[
+                            styles.buttonSmallText,
+                            styles.buttonSuccessText,
+                        ]}
+                    >
+                        {translate('iou.pay')}
+                    </Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+ReportActionItemIOUPreview.propTypes = propTypes;
+ReportActionItemIOUPreview.defaultProps = defaultProps;
+ReportActionItemIOUPreview.displayName = 'ReportActionItemIOUPreview';
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS,
+        },
+        iou: {
+            key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${iouReportID}`,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    }),
+)(ReportActionItemIOUPreview);

src/components/ReportActionItem/IOUQuote.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '../../styles/styles';
+import ReportActionPropTypes from '../../pages/home/report/ReportActionPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    // All the data of the action
+    action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+    // Should the View Details link be displayed?
+    shouldShowViewDetailsLink: PropTypes.bool,
+
+    // Callback invoked when View Details is pressed
+    onViewDetailsPressed: PropTypes.func,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    shouldShowViewDetailsLink: false,
+    onViewDetailsPressed: null,
+};
+
+const ReportActionItemIOUQuote = ({
+    action,
+    shouldShowViewDetailsLink,
+    onViewDetailsPressed,
+    translate,
+}) => (
+    <View style={[styles.chatItemMessage]}>
+        {_.map(action.message, (fragment, index) => (
+            <View key={`iouQuote-${action.sequenceNumber}-${index}`}>
+                <View style={[styles.blockquote]}>
+                    <Text style={[styles.chatItemMessage]}>
+                        {fragment.text}
+                    </Text>
+                    {shouldShowViewDetailsLink && (
+                        <Text
+                            style={[styles.chatItemMessageLink]}
+                            onPress={onViewDetailsPressed}
+                        >
+                            {translate('iou.viewDetails')}
+                        </Text>
+                    )}
+                </View>
+            </View>
+        ))}
+    </View>
+);
+
+ReportActionItemIOUQuote.propTypes = propTypes;
+ReportActionItemIOUQuote.defaultProps = defaultProps;
+ReportActionItemIOUQuote.displayName = 'ReportActionItemIOUQuote';
+
+export default withLocalize(ReportActionItemIOUQuote);

src/components/ReportActionItem/IOUReportAction.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import ReportActionItemIOUQuote from './IOUQuote';
+import ReportActionPropTypes from '../../pages/home/report/ReportActionPropTypes';
+import ReportActionItemIOUPreview from './IOUPreview';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+
+const propTypes = {
+    // All the data of the action
+    action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+    // The associated chatReport
+    chatReportID: PropTypes.number.isRequired,
+
+    // Should render the preview Component?
+    shouldDisplayPreview: PropTypes.bool.isRequired,
+
+    /* --- Onyx Props --- */
+    // ChatReport associated with iouReport
+    chatReport: PropTypes.shape({
+        // The participants of this report
+        participants: PropTypes.arrayOf(PropTypes.string),
+    }),
+};
+
+const defaultProps = {
+    chatReport: {},
+};
+
+const ReportActionItemIOUAction = ({
+    action,
+    chatReportID,
+    shouldDisplayPreview,
+    chatReport,
+}) => {
+    const launchDetailsModal = () => {
+        Navigation.navigate(ROUTES.getIouDetailsRoute(chatReportID, action.originalMessage.IOUReportID));
+    };
+    const hasMultipleParticipants = chatReport.participants.length >= 2;
+    return (
+        <>
+            <ReportActionItemIOUQuote
+                action={action}
+                shouldShowViewDetailsLink={!hasMultipleParticipants}
+                onViewDetailsPressed={launchDetailsModal}
+            />
+            {shouldDisplayPreview && (
+                <ReportActionItemIOUPreview
+                    iouReportID={action.originalMessage.IOUReportID}
+                    onPayButtonPressed={launchDetailsModal}
+                />
+            )}
+        </>
+    );
+};
+
+ReportActionItemIOUAction.propTypes = propTypes;
+ReportActionItemIOUAction.defaultProps = defaultProps;
+ReportActionItemIOUAction.displayName = 'ReportActionItemIOUAction';
+
+export default withOnyx({
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+})(ReportActionItemIOUAction);