Added ReportActionItemIOUQuote component

src/components/ReportActionItemIOUPreview.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../ONYXKEYS';
-import ReportActionItemMessage from '../pages/home/report/ReportActionItemMessage';
+import ReportActionItemIOUQuote from './ReportActionItemIOUQuote';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 
 const propTypes = {
@@ -24,7 +24,6 @@ const propTypes = {
     // Active IOU Report for current report
     // eslint-disable-next-line react/forbid-prop-types
     iou: PropTypes.object.isRequired,
-
 };
 
 const ReportActionItemIOUPreview = ({
@@ -33,10 +32,12 @@ const ReportActionItemIOUPreview = ({
     report,
     iou,
 }) => (
-    <ReportActionItemMessage action={action} />
+    <ReportActionItemIOUQuote action={action} />
 );
 
 ReportActionItemIOUPreview.propTypes = propTypes;
+ReportActionItemIOUPreview.displayName = 'ReportActionItemIOUPreview';
+
 export default withOnyx({
     iou: {
         key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${report.iouReportID}`,

src/components/ReportActionItemIOUQuote.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import styles from '../styles/styles';
+import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
+import RenderHTML from './RenderHTML';
+
+const propTypes = {
+    // All the data of the action
+    action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+};
+const ReportActionItemIOUQuote = ({action}) => (
+    <View style={[styles.chatItemMessage]}>
+        {_.map(_.compact(action.message), (fragment, index) => {
+            const viewDetails = '<br /><a href="#" style="text-decoration:none;">View Details</a>';
+            const html = `<blockquote>${fragment.text}${viewDetails}</blockquote>`;
+            return (
+                <RenderHTML key={`iouQuote-${action.sequenceNumber}-${index}`} html={html} debug={false} />
+            );
+        })}
+    </View>
+
+);
+
+ReportActionItemIOUQuote.propTypes = propTypes;
+ReportActionItemIOUQuote.displayName = 'ReportActionItemIOUQuote';
+
+export default ReportActionItemIOUQuote;

src/pages/home/report/ReportActionItemFragment.js

@@ -19,9 +19,6 @@ const propTypes = {
     // Is this fragment an attachment?
     isAttachment: PropTypes.bool,
 
-    // Type of the current action
-    actionName: PropTypes.string,
-
     // Does this fragment belong to a reportAction that has not yet loaded?
     loading: PropTypes.bool,
 };
@@ -30,7 +27,6 @@ const defaultProps = {
     isAttachment: false,
     loading: false,
     tooltipText: '',
-    actionName: '',
 };
 
 class ReportActionItemFragment extends React.PureComponent {
@@ -58,13 +54,6 @@ class ReportActionItemFragment extends React.PureComponent {
                     <Text selectable>{Str.htmlDecode(fragment.text)}</Text>
                 );
             case 'TEXT':
-                if (this.props.actionName === 'IOU') {
-                    const viewDetails = '<br /><a href="#" style="text-decoration:none;">View Details</a>';
-                    const html = `<blockquote>${fragment.text}${viewDetails}</blockquote>`;
-                    return (
-                        <RenderHTML html={html} debug={false} />
-                    );
-                }
                 return (
                     <Tooltip text={tooltipText}>
                         <Text

src/pages/home/report/ReportActionItemMessage.js

@@ -19,7 +19,6 @@ const ReportActionItemMessage = ({action}) => (
                 fragment={fragment}
                 isAttachment={action.isAttachment}
                 loading={action.loading}
-                actionName={action.actionName}
             />
         ))}
     </View>