[No QA] Created IOU preview component within chat

src/components/ReportActionItemIOUPreview.js

@@ -11,18 +11,23 @@ import Text from './Text';
 import MultipleAvatars from './MultipleAvatars';
 import styles from '../styles/styles';
 
-const personalDetailsPropTypes = PropTypes.shape({
-    // This is either the user's full name, or their login if full name is an empty string
-    displayName: PropTypes.string.isRequired,
-});
-
 const propTypes = {
     // All the data of the action
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
 
     // Is this the most recent IOU Action?
     isMostRecentIOUReport: PropTypes.bool.isRequired,
 
+    // The report currently being looked at
+    report: PropTypes.shape({
+
+        // IOU report ID associated with current report
+        iouReportID: PropTypes.number,
+
+        // Whether there is an outstanding amount in IOU
+        hasOutstandingIOU: PropTypes.bool,
+    }).isRequired,
+
     /* Window Dimensions Props */
     ...windowDimensionsPropTypes,
 
@@ -40,7 +45,11 @@ const propTypes = {
     }),
 
     // All of the personal details for everyone
-    personalDetails: PropTypes.objectOf(personalDetailsPropTypes).isRequired,
+    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({
@@ -50,7 +59,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    iou: null,
+    iou: {},
 };
 
 class ReportActionItemIOUPreview extends React.Component {
@@ -96,11 +105,6 @@ class ReportActionItemIOUPreview extends React.Component {
         const ownerAvatar = lodashGet(this.props.personalDetails, [this.props.iou.ownerEmail, 'avatar'], '');
         const sessionEmail = lodashGet(this.props.session, 'email', null);
         const cachedTotal = this.props.iou.cachedTotal.replace(/[()]/g, '');
-        const amount = Number(cachedTotal.substring(1));
-
-        if (amount === 0) {
-            return null;
-        }
 
         return (
             <View style={[styles.iouPreviewBox, {width: this.props.isSmallScreenWidth ? '100%' : '50%'}]}>
@@ -115,12 +119,7 @@ class ReportActionItemIOUPreview extends React.Component {
                     </View>
                     <MultipleAvatars
                         avatarImageURLs={[managerAvatar, ownerAvatar]}
-                        styles={{
-                            secondAvatar: {
-                                bottom: -3,
-                                right: -25,
-                            },
-                        }}
+                        styles={{secondAvatar: styles.secondAvatarInline}}
                     />
                 </View>
                 {(this.props.iou.managerEmail === sessionEmail) ? (
@@ -135,9 +134,11 @@ class ReportActionItemIOUPreview extends React.Component {
         return (
             <View>
                 <ReportActionItemIOUQuote action={this.props.action} />
-                {this.props.isMostRecentIOUReport && this.props.iou ? (
-                    this.createPreviewBox()
-                )
+                {this.props.isMostRecentIOUReport
+                    && this.props.report.hasOutstandingIOU
+                    && this.props.iou ? (
+                        this.createPreviewBox()
+                    )
                     : null}
             </View>
         );
@@ -150,7 +151,7 @@ ReportActionItemIOUPreview.displayName = 'ReportActionItemIOUPreview';
 
 export default withWindowDimensions(withOnyx({
     iou: {
-        key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${iouReportID}`,
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${report.iouReportID}`,
     },
     personalDetails: {
         key: ONYXKEYS.PERSONAL_DETAILS,

src/libs/actions/Report.js

@@ -307,6 +307,7 @@ function fetchChatReportsByIDs(chatList) {
                 simplifiedReports[reportKey].iouReportID = iouReportObject.reportID;
                 simplifiedReports[reportKey].hasOutstandingIOU = iouReportObject.stateNum === 1
                     && iouReportObject.total !== 0;
+                Onyx.merge(iouReportKey, iouReportObject);
             });
 
             // We use mergeCollection such that it updates the collection in one go.

src/pages/home/report/ReportActionItem.js

@@ -68,7 +68,8 @@ class ReportActionItem extends Component {
     shouldComponentUpdate(nextProps, nextState) {
         return this.state.isPopoverVisible !== nextState.isPopoverVisible
             || this.props.displayAsGroup !== nextProps.displayAsGroup
-            || !_.isEqual(this.props.action, nextProps.action);
+            || !_.isEqual(this.props.action, nextProps.action)
+            || this.props.isMostRecentIOUReport !== nextProps.isMostRecentIOUReport;
     }
 
     /**
@@ -124,14 +125,14 @@ class ReportActionItem extends Component {
                                     ? (
                                         <ReportActionItemSingle
                                             action={this.props.action}
-                                            iouReportID={this.props.report.iouReportID}
+                                            report={this.props.report}
                                             isMostRecentIOUReport={this.props.isMostRecentIOUReport}
                                         />
                                     )
                                     : (
                                         <ReportActionItemGrouped
                                             action={this.props.action}
-                                            iouReportID={this.props.report.iouReportID}
+                                            report={this.props.report}
                                             isMostRecentIOUReport={this.props.isMostRecentIOUReport}
                                         />
                                     )}

src/pages/home/report/ReportActionItemGrouped.js

@@ -13,21 +13,21 @@ const propTypes = {
     // Is this the most recent IOU Action?
     isMostRecentIOUReport: PropTypes.bool.isRequired,
 
-    // IOU report ID associated with current report
-    iouReportID: PropTypes.number,
-};
+    // The report currently being looked at
+    report: PropTypes.shape({
 
-const defaultProps = {
-    iouReportID: null,
+        // IOU report ID associated with current report
+        iouReportID: PropTypes.number,
+    }).isRequired,
 };
 
-const ReportActionItemGrouped = ({action, iouReportID, isMostRecentIOUReport}) => (
+const ReportActionItemGrouped = ({action, report, isMostRecentIOUReport}) => (
     <View style={[styles.chatItem]}>
         <View style={[styles.chatItemRightGrouped]}>
             {action.actionName === 'IOU'
                 ? (
                     <ReportActionItemIOUPreview
-                        iouReportID={iouReportID}
+                        report={report}
                         action={action}
                         isMostRecentIOUReport={isMostRecentIOUReport}
                     />
@@ -38,5 +38,4 @@ const ReportActionItemGrouped = ({action, iouReportID, isMostRecentIOUReport}) =
 );
 
 ReportActionItemGrouped.propTypes = propTypes;
-ReportActionItemGrouped.defaultProps = defaultProps;
 export default ReportActionItemGrouped;

src/pages/home/report/ReportActionItemSingle.js

@@ -18,15 +18,15 @@ const propTypes = {
     // Is this the most recent IOU Action?
     isMostRecentIOUReport: PropTypes.bool.isRequired,
 
-    // IOU report ID associated with current report
-    iouReportID: PropTypes.number,
-};
+    // The report currently being looked at
+    report: PropTypes.shape({
 
-const defaultProps = {
-    iouReportID: null,
+        // IOU report ID associated with current report
+        iouReportID: PropTypes.number,
+    }).isRequired,
 };
 
-const ReportActionItemSingle = ({action, iouReportID, isMostRecentIOUReport}) => {
+const ReportActionItemSingle = ({action, report, isMostRecentIOUReport}) => {
     const avatarUrl = action.automatic
         ? `${CONST.CLOUDFRONT_URL}/images/icons/concierge_2019.svg`
         : action.avatar;
@@ -52,7 +52,7 @@ const ReportActionItemSingle = ({action, iouReportID, isMostRecentIOUReport}) =>
                 {action.actionName === 'IOU'
                     ? (
                         <ReportActionItemIOUPreview
-                            iouReportID={iouReportID}
+                            report={report}
                             action={action}
                             isMostRecentIOUReport={isMostRecentIOUReport}
                         />
@@ -64,5 +64,4 @@ const ReportActionItemSingle = ({action, iouReportID, isMostRecentIOUReport}) =>
 };
 
 ReportActionItemSingle.propTypes = propTypes;
-ReportActionItemSingle.defaultProps = defaultProps;
 export default ReportActionItemSingle;

src/styles/styles.js

@@ -884,6 +884,11 @@ const styles = {
         borderColor: 'transparent',
     },
 
+    secondAvatarInline: {
+        bottom: -3,
+        right: -25,
+    },
+
     avatarNormal: {
         height: variables.componentSizeNormal,
         width: variables.componentSizeNormal,