Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Paid in money request preview #33020

Merged
merged 4 commits into from
Dec 13, 2023
Merged

Use Paid in money request preview #33020

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
820b50c
Also VBBA is paid via expensify
mountiny Dec 13, 2023
4db49a7
Use Paid in money request preview consistently
mountiny Dec 13, 2023
05e17a1
Resolve merge conflicts
mountiny Dec 13, 2023
517f7b5
Prettier
mountiny Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 46 additions & 61 deletions src/components/ReportActionItem/MoneyRequestPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,18 @@ import refPropTypes from '@components/refPropTypes';
import {showContextMenuForReport} from '@components/ShowContextMenuContext';
import Text from '@components/Text';
import transactionPropTypes from '@components/transactionPropTypes';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import compose from '@libs/compose';
import ControlSelection from '@libs/ControlSelection';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import * as DeviceCapabilities from '@libs/DeviceCapabilities';
import * as IOUUtils from '@libs/IOUUtils';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import iouReportPropTypes from '@pages/iouReportPropTypes';
import reportPropTypes from '@pages/reportPropTypes';
import * as ReceiptUtils from '@libs/ReceiptUtils';
import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
Expand Down Expand Up @@ -64,20 +65,11 @@ const propTypes = {

/* Onyx Props */

/** Active IOU Report for current report */
iouReport: PropTypes.shape({
/** Account ID of the manager in this iou report */
managerID: PropTypes.number,
/** chatReport associated with iouReport */
chatReport: reportPropTypes,

/** Account ID of the creator of this iou report */
ownerAccountID: PropTypes.number,

/** Outstanding amount in cents of this transaction */
total: PropTypes.number,

/** Currency of outstanding amount of this transaction */
currency: PropTypes.string,
}),
/** IOU report data object */
iouReport: iouReportPropTypes,

/** True if this is this IOU is a split instead of a 1:1 request */
isBillSplit: PropTypes.bool.isRequired,
Expand Down Expand Up @@ -113,7 +105,6 @@ const propTypes = {
/** Whether a message is a whisper */
isWhisper: PropTypes.bool,

...withLocalizePropTypes,
};

const defaultProps = {
Expand All @@ -124,6 +115,7 @@ const defaultProps = {
checkIfContextMenuActive: () => {},
containerStyles: [],
walletTerms: {},
chatReport: {},
isHovered: false,
personalDetails: {},
session: {
Expand All @@ -138,6 +130,7 @@ function MoneyRequestPreview(props) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const {isSmallScreenWidth, windowWidth} = useWindowDimensions();

if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
Expand Down Expand Up @@ -179,14 +172,9 @@ function MoneyRequestPreview(props) {

const getSettledMessage = () => {
if (isExpensifyCardTransaction) {
return props.translate('common.done');
}
switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
return props.translate('iou.settledExpensify');
default:
return props.translate('iou.settledElsewhere');
return translate('common.done');
}
return translate('iou.settledExpensify');
Comment on lines 172 to +176
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the important change, the rest is beauty

};

const showContextMenu = (event) => {
Expand All @@ -195,43 +183,43 @@ function MoneyRequestPreview(props) {

const getPreviewHeaderText = () => {
if (isDistanceRequest) {
return props.translate('common.distance');
return translate('common.distance');
}

if (isScanning) {
return props.translate('common.receipt');
return translate('common.receipt');
}

if (props.isBillSplit) {
return props.translate('iou.split');
return translate('iou.split');
}

if (isExpensifyCardTransaction) {
let message = props.translate('iou.card');
let message = translate('iou.card');
if (TransactionUtils.isPending(props.transaction)) {
message += ` • ${props.translate('iou.pending')}`;
message += ` • ${translate('iou.pending')}`;
}
return message;
}

let message = props.translate('iou.cash');
let message = translate('iou.cash');
if (ReportUtils.isGroupPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) {
message += ` • ${props.translate('iou.approved')}`;
message += ` • ${translate('iou.approved')}`;
} else if (props.iouReport.isWaitingOnBankAccount) {
message += ` • ${props.translate('iou.pending')}`;
message += ` • ${translate('iou.pending')}`;
} else if (props.iouReport.isCancelledIOU) {
message += ` • ${props.translate('iou.canceled')}`;
message += ` • ${translate('iou.canceled')}`;
}
return message;
};

const getDisplayAmountText = () => {
if (isDistanceRequest) {
return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : props.translate('common.tbd');
return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : translate('common.tbd');
}

if (isScanning) {
return props.translate('iou.receiptScanning');
return translate('iou.receiptScanning');
}

if (TransactionUtils.hasMissingSmartscanFields(props.transaction)) {
Expand Down Expand Up @@ -331,22 +319,22 @@ function MoneyRequestPreview(props) {
{shouldShowMerchant && !props.isBillSplit && (
<View style={[styles.flexRow]}>
<Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>
{hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd')) : requestMerchant}
{hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')) : requestMerchant}
</Text>
</View>
)}
<View style={[styles.flexRow, styles.mt1]}>
<View style={[styles.flex1]}>
{!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
<Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
<Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
)}
{(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
<Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
)}
</View>
{props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
<Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
{props.translate('iou.amountEach', {
{translate('iou.amountEach', {
amount: CurrencyUtils.convertToDisplayString(
IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
requestCurrency,
Expand Down Expand Up @@ -374,7 +362,7 @@ function MoneyRequestPreview(props) {
onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
onPressOut={() => ControlSelection.unblock()}
onLongPress={showContextMenu}
accessibilityLabel={props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}
accessibilityLabel={props.isBillSplit ? translate('iou.split') : translate('iou.cash')}
accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}
style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]}
>
Expand All @@ -387,26 +375,23 @@ MoneyRequestPreview.propTypes = propTypes;
MoneyRequestPreview.defaultProps = defaultProps;
MoneyRequestPreview.displayName = 'MoneyRequestPreview';

export default compose(
withLocalize,
withOnyx({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
chatReport: {
key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
},
iouReport: {
key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
},
session: {
key: ONYXKEYS.SESSION,
},
transaction: {
key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
},
walletTerms: {
key: ONYXKEYS.WALLET_TERMS,
},
}),
)(MoneyRequestPreview);
export default withOnyx({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
chatReport: {
key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
},
iouReport: {
key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
},
session: {
key: ONYXKEYS.SESSION,
},
transaction: {
key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
},
walletTerms: {
key: ONYXKEYS.WALLET_TERMS,
},
})(MoneyRequestPreview);
Loading