Implement the RequestPreview component and update the IOUPreview

src/components/MoneyRequestHeader.js

@@ -18,6 +18,7 @@ import compose from '../libs/compose';
 import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import Icon from './Icon';
+import * as CurrencyUtils from '../libs/CurrencyUtils';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -43,11 +44,8 @@ const defaultProps = {
 };
 
 const MoneyRequestHeader = (props) => {
-    const formattedAmount = props.numberFormat(props.report.total / 100, {
-        style: 'currency',
-        currency: props.report.currency,
-    });
-    const isSettled = false; // TODO: use ReportUtils.isSettled(props.report.reportID) once that method is added
+    const formattedAmount = CurrencyUtils.convertToDisplayString(props.report.total, props.report.currency);
+    const isSettled = ReportUtils.isSettled(props.report.reportID);
     const isExpenseReport = ReportUtils.isExpenseReport(props.report);
     const payeeName = isExpenseReport ? ReportUtils.getPolicyName(props.report, props.policies) : ReportUtils.getDisplayNameForParticipant(props.report.managerEmail);
     const payeeAvatar = isExpenseReport

src/components/ReportActionItem/IOUPreview.js

@@ -24,18 +24,9 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
-import Button from '../Button';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
-import * as StyleUtils from '../../styles/StyleUtils';
-import getButtonState from '../../libs/getButtonState';
 
 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.string.isRequired,
@@ -82,6 +73,9 @@ const propTypes = {
     /** True if this is this IOU is a split instead of a 1:1 request */
     isBillSplit: PropTypes.bool.isRequired,
 
+    /** True if the IOU Preview is rendered within a single IOUAction */
+    isIOUAction: PropTypes.bool,
+
     /** True if the IOU Preview card is hovered */
     isHovered: PropTypes.bool,
 
@@ -115,15 +109,14 @@ const propTypes = {
 
 const defaultProps = {
     iouReport: {},
-    shouldHidePayButton: false,
-    onPayButtonPressed: null,
     onPreviewPressed: null,
     action: undefined,
     contextMenuAnchor: undefined,
     checkIfContextMenuActive: () => {},
     containerStyles: [],
     walletTerms: {},
     pendingAction: null,
+    isIOUAction: true,
     isHovered: false,
     personalDetails: {},
     session: {
@@ -152,9 +145,9 @@ const IOUPreview = (props) => {
     // Pay button should only be visible to the manager of the report.
     const isCurrentUserManager = managerEmail === sessionEmail;
 
-    // Get request formatting options, as long as currency is provided
-    const requestAmount = props.isBillSplit ? props.action.originalMessage.amount : props.iouReport.total;
-    const requestCurrency = props.isBillSplit ? lodashGet(props.action, 'originalMessage.currency', CONST.CURRENCY.USD) : props.iouReport.currency;
+    // If props.action is undefined then we are displaying within IOUDetailsModal and should use the full report amount
+    const requestAmount = props.isIOUAction ? lodashGet(props.action, 'originalMessage.amount', 0) : props.iouReport.total;
+    const requestCurrency = props.isIOUAction ? lodashGet(props.action, 'originalMessage.currency', CONST.CURRENCY.USD) : props.iouReport.currency;
 
     const getSettledMessage = () => {
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
@@ -170,9 +163,9 @@ const IOUPreview = (props) => {
     };
 
     const showContextMenu = (event) => {
-        // Use action and shouldHidePayButton props to check if we are in IOUDetailsModal,
+        // Use action prop to check if we are in IOUDetailsModal,
         // if it's true, do nothing when user long press, otherwise show context menu.
-        if (!props.action && props.shouldHidePayButton) {
+        if (!props.action) {
             return;
         }
 
@@ -207,11 +200,6 @@ const IOUPreview = (props) => {
                                 </>
                             )}
                         </View>
-                        <Icon
-                            src={Expensicons.ArrowRight}
-                            fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
-                            additionalStyles={[styles.mb1]}
-                        />
                     </View>
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
@@ -241,19 +229,6 @@ const IOUPreview = (props) => {
                     )}
 
                     <Text style={[styles.colorMuted]}>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
-
-                    {isCurrentUserManager && !props.shouldHidePayButton && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
-                        <Button
-                            style={styles.mt4}
-                            onPress={props.onPayButtonPressed}
-                            onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                            onPressOut={() => ControlSelection.unblock()}
-                            onLongPress={showContextMenu}
-                            text={props.translate('iou.pay')}
-                            success
-                            medium
-                        />
-                    )}
                 </View>
             </OfflineWithFeedback>
         </View>

src/components/ReportActionItem/MoneyRequestAction.js

@@ -6,7 +6,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import {withNetwork} from '../OnyxProvider';
 import compose from '../../libs/compose';
-import IOUQuote from './IOUQuote';
+import ReportPreview from './ReportPreview';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import networkPropTypes from '../networkPropTypes';
 import iouReportPropTypes from '../../pages/iouReportPropTypes';
@@ -78,8 +78,6 @@ const MoneyRequestAction = (props) => {
         }
     };
 
-    const shouldShowIOUPreview = props.isMostRecentIOUReportAction || props.action.originalMessage.type === 'pay';
-
     let shouldShowPendingConversionMessage = false;
     if (
         !_.isEmpty(props.iouReport) &&
@@ -94,26 +92,26 @@ const MoneyRequestAction = (props) => {
 
     return (
         <>
-            <IOUQuote
-                action={props.action}
+            <IOUPreview
+                iouReportID={props.requestReportID}
                 chatReportID={props.chatReportID}
+                isBillSplit={hasMultipleParticipants}
+                action={props.action}
                 contextMenuAnchor={props.contextMenuAnchor}
-                onViewDetailsPressed={onIOUPreviewPressed}
                 checkIfContextMenuActive={props.checkIfContextMenuActive}
+                shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
+                onPreviewPressed={onIOUPreviewPressed}
+                containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined]}
                 isHovered={props.isHovered}
             />
-            {shouldShowIOUPreview && (
-                <IOUPreview
-                    iouReportID={props.requestReportID}
-                    chatReportID={props.chatReportID}
-                    isBillSplit={hasMultipleParticipants}
+            {props.isMostRecentIOUReportAction && !hasMultipleParticipants && (
+                <ReportPreview
                     action={props.action}
+                    chatReportID={props.chatReportID}
+                    iouReportID={props.requestReportID}
                     contextMenuAnchor={props.contextMenuAnchor}
+                    onViewDetailsPressed={onIOUPreviewPressed}
                     checkIfContextMenuActive={props.checkIfContextMenuActive}
-                    shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
-                    onPayButtonPressed={onIOUPreviewPressed}
-                    onPreviewPressed={onIOUPreviewPressed}
-                    containerStyles={[styles.cursorPointer, props.isHovered ? styles.iouPreviewBoxHover : undefined]}
                     isHovered={props.isHovered}
                 />
             )}