Merge pull request #18698 from Expensify/amy-iou-preview

Changes to IOUAction and IOUPreview
Expensify · May 10, 2023 · 7cf6631 · 7cf6631
2 parents e470bcd + 0f1c50c
commit 7cf6631
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 18 deletions.
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
@@ -26,6 +26,8 @@ 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 */
@@ -142,7 +144,7 @@ const IOUPreview = (props) => {
     const managerEmail = props.iouReport.managerEmail || '';
     const ownerEmail = props.iouReport.ownerEmail || '';
 
-    // When displaying within a IOUDetailsModal we cannot guarentee that participants are included in the originalMessage data
+    // When displaying within a IOUDetailsModal we cannot guarantee that participants are included in the originalMessage data
     // Because an IOUPreview of type split can never be rendered within the IOUDetailsModal, manually building the email array is only needed for non-billSplit ious
     const participantEmails = props.isBillSplit ? props.action.originalMessage.participants : [managerEmail, ownerEmail];
     const participantAvatars = OptionsListUtils.getAvatarsForLogins(participantEmails, props.personalDetails);
@@ -154,6 +156,19 @@ const IOUPreview = (props) => {
     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;
 
+    const getSettledMessage = () => {
+        switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
+            case CONST.IOU.PAYMENT_TYPE.PAYPAL_ME:
+                return props.translate('iou.settledPaypalMe');
+            case CONST.IOU.PAYMENT_TYPE.ELSEWHERE:
+                return props.translate('iou.settledElsewhere');
+            case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
+                return props.translate('iou.settledExpensify');
+            default:
+                return '';
+        }
+    };
+
     const showContextMenu = (event) => {
         // Use action and shouldHidePayButton props to check if we are in IOUDetailsModal,
         // if it's true, do nothing when user long press, otherwise show context menu.
@@ -177,10 +192,30 @@ const IOUPreview = (props) => {
                 needsOffscreenAlphaCompositing
             >
                 <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
-                    <Text>{props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}</Text>
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                            <Text style={styles.h1}>{CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}</Text>
+                            <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}</Text>
+                            {Boolean(getSettledMessage()) && (
+                                <>
+                                    <Icon
+                                        src={Expensicons.DotIndicator}
+                                        width={4}
+                                        height={4}
+                                        additionalStyles={[styles.mr1, styles.ml1]}
+                                    />
+                                    <Text style={[styles.textLabelSupporting, styles.lh16]}>{getSettledMessage()}</Text>
+                                </>
+                            )}
+                        </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]}>
+                            <Text style={styles.textHeadline}>{CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}</Text>
                             {!props.iouReport.hasOutstandingIOU && !props.isBillSplit && (
                                 <View style={styles.iouPreviewBoxCheckmark}>
                                     <Icon
@@ -190,20 +225,22 @@ const IOUPreview = (props) => {
                                 </View>
                             )}
                         </View>
-                        <View style={styles.iouPreviewBoxAvatar}>
-                            <MultipleAvatars
-                                icons={participantAvatars}
-                                secondAvatarStyle={[styles.secondAvatarInline, props.isHovered ? styles.iouPreviewBoxAvatarHover : undefined]}
-                                avatarTooltips={participantEmails}
-                            />
-                        </View>
+                        {props.isBillSplit && (
+                            <View style={styles.iouPreviewBoxAvatar}>
+                                <MultipleAvatars
+                                    icons={participantAvatars}
+                                    secondAvatarStyle={[styles.secondAvatarInline, props.isHovered ? styles.iouPreviewBoxAvatarHover : undefined]}
+                                    avatarTooltips={participantEmails}
+                                />
+                            </View>
+                        )}
                     </View>
 
                     {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
                         <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
                     )}
 
-                    <Text>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
+                    <Text style={[styles.colorMuted]}>{Str.htmlDecode(lodashGet(props.action, 'originalMessage.comment', ''))}</Text>
 
                     {isCurrentUserManager && !props.shouldHidePayButton && props.iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
                         <Button

diff --git a/src/components/ReportActionItem/IOUAction.js → ...ts/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/IOUAction.js → ...ts/ReportActionItem/MoneyRequestAction.js
@@ -68,7 +68,7 @@ const defaultProps = {
     isHovered: false,
 };
 
-const IOUAction = (props) => {
+const MoneyRequestAction = (props) => {
     const hasMultipleParticipants = props.chatReport.participants.length > 1;
     const onIOUPreviewPressed = () => {
         if (hasMultipleParticipants) {
@@ -121,9 +121,9 @@ const IOUAction = (props) => {
     );
 };
 
-IOUAction.propTypes = propTypes;
-IOUAction.defaultProps = defaultProps;
-IOUAction.displayName = 'IOUAction';
+MoneyRequestAction.propTypes = propTypes;
+MoneyRequestAction.defaultProps = defaultProps;
+MoneyRequestAction.displayName = 'MoneyRequestAction';
 
 export default compose(
     withOnyx({
@@ -139,4 +139,4 @@ export default compose(
         },
     }),
     withNetwork(),
-)(IOUAction);
+)(MoneyRequestAction);
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -317,6 +317,9 @@ export default {
         sendMoney: 'Send money',
         pay: 'Pay',
         viewDetails: 'View details',
+        settledExpensify: 'Settled',
+        settledElsewhere: 'Settled elsewhere',
+        settledPaypalMe: 'Settled using Paypal.me',
         settleExpensify: 'Pay with Expensify',
         settleElsewhere: "I'll settle up elsewhere",
         settlePaypalMe: 'Pay with PayPal.me',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -316,6 +316,9 @@ export default {
         sendMoney: 'Enviar dinero',
         pay: 'Pagar',
         viewDetails: 'Ver detalles',
+        settledExpensify: 'Pagado',
+        settledElsewhere: 'Pagado de otra forma',
+        settledPaypalMe: 'Pagado con PayPal.me',
         settleExpensify: 'Pagar con Expensify',
         settleElsewhere: 'Voy a pagar de otra forma',
         settlePaypalMe: 'Pagar con PayPal.me',

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -12,7 +12,7 @@ import PressableWithSecondaryInteraction from '../../../components/PressableWith
 import Hoverable from '../../../components/Hoverable';
 import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemGrouped from './ReportActionItemGrouped';
-import IOUAction from '../../../components/ReportActionItem/IOUAction';
+import MoneyRequestAction from '../../../components/ReportActionItem/MoneyRequestAction';
 import ReportActionItemMessage from './ReportActionItemMessage';
 import UnreadActionIndicator from '../../../components/UnreadActionIndicator';
 import ReportActionItemMessageEdit from './ReportActionItemMessageEdit';
@@ -180,7 +180,7 @@ class ReportActionItem extends Component {
             const iouReportID = this.props.action.originalMessage.IOUReportID ? this.props.action.originalMessage.IOUReportID.toString() : '0';
 
             children = (
-                <IOUAction
+                <MoneyRequestAction
                     chatReportID={this.props.report.reportID}
                     requestReportID={iouReportID}
                     action={this.props.action}