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

Jump to bottom

Display Money Request reports as Cards in the chat #20900

Merged
merged 30 commits into from
Jul 7, 2023
Merged

Display Money Request reports as Cards in the chat #20900

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
32c17e7
Display IOUs as card
Gonals Jun 16, 2023
f80c5f5
add arrow
Gonals Jun 16, 2023
aca525e
remove extra arrow
Gonals Jun 16, 2023
4db3f62
style
Gonals Jun 16, 2023
4b76b00
prettier
Gonals Jun 16, 2023
5721370
conflicts
Gonals Jun 19, 2023
6456f1b
conflicts
Gonals Jun 20, 2023
64b4380
import issue
Gonals Jun 20, 2023
e6b9b7b
fix display
Gonals Jun 20, 2023
80cc624
lint
Gonals Jun 20, 2023
3ea662b
typo
Gonals Jun 20, 2023
4425403
translation
Gonals Jun 20, 2023
172c7ef
styles
Gonals Jun 21, 2023
34d5f7c
better syntax
Gonals Jun 21, 2023
6f79bb7
prettier
Gonals Jun 21, 2023
e7c1a5a
typo
Gonals Jun 22, 2023
767b057
Merge branch 'main' into alberto-card
Gonals Jun 23, 2023
159edd8
remove carat
Gonals Jun 23, 2023
ddb57fa
lint
Gonals Jun 23, 2023
73041e7
use isSettled
Gonals Jun 23, 2023
13d7441
conflicts
Gonals Jul 3, 2023
75183ed
Merge branch 'main' into alberto-card
Gonals Jul 4, 2023
d4a0570
conflicts
Gonals Jul 4, 2023
bf341b3
styles
Gonals Jul 4, 2023
7591fc8
conflicts
Gonals Jul 5, 2023
392f9d8
remove unneeded imports
Gonals Jul 5, 2023
777c1fa
remove map
Gonals Jul 5, 2023
e45ae49
styles
Gonals Jul 6, 2023
e68594b
Merge branch 'main' into alberto-card
Gonals Jul 7, 2023
7f02e90
checkmark style
Gonals Jul 7, 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
44 changes: 28 additions & 16 deletions src/components/ReportActionItem/ReportPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import getButtonState from '../../libs/getButtonState';
import * as IOU from '../../libs/actions/IOU';
import refPropTypes from '../refPropTypes';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
import themeColors from '../../styles/themes/default';

const propTypes = {
/** All the data of the action */
Expand Down Expand Up @@ -97,11 +98,13 @@ const defaultProps = {
function ReportPreview(props) {
const reportAmount = CurrencyUtils.convertToDisplayString(ReportUtils.getMoneyRequestTotal(props.iouReport), props.iouReport.currency);
const managerEmail = props.iouReport.managerEmail || '';
const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
const managerAccountID = props.iouReport.managerID || 0;
const managerName =
(ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerAccountID, true)) || managerEmail;
Copy link
Contributor

Choose a reason for hiding this comment

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

do you need () around ReportUtils.isPolicyExpenseChat(props.chatReport)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Seems like it

const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
return (
<View style={[styles.chatItemMessage]}>
<View style={styles.chatItemMessage}>
{_.map(props.action.message, (message, index) => (
<PressableWithoutFeedback
key={`ReportPreview-${props.action.reportActionID}-${index}`}
Expand All @@ -115,23 +118,32 @@ function ReportPreview(props) {
accessibilityRole="button"
accessibilityLabel={props.translate('iou.viewDetails')}
>
<View style={[styles.flexShrink1]}>
{props.iouReport.hasOutstandingIOU ? (
<Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
{lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
</Text>
) : (
<View style={[styles.flexRow]}>
<Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
{lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}
<View style={styles.iouPreviewBox}>
<View style={styles.flexRow}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={[styles.textLabelSupporting, styles.lh16]}>
{props.translate(props.iouReport.hasOutstandingIOU ? 'iou.payerPaid' : 'iou.payerPaid', {payer: managerName})}
</Text>
</View>
)}
<Icon
src={Expensicons.ArrowRight}
fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
/>
</View>
<View style={styles.flexRow}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<Text style={styles.textHeadline}>{reportAmount}</Text>
{!props.iouReport.hasOutstandingIOU && (
Gonals marked this conversation as resolved.
Show resolved Hide resolved
<View style={styles.iouPreviewBoxCheckmark}>
<Icon
src={Expensicons.Checkmark}
fill={themeColors.iconSuccessFill}
/>
</View>
)}
</View>
</View>
</View>
<Icon
src={Expensicons.ArrowRight}
fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
/>
</PressableWithoutFeedback>
))}
{isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
Expand Down
2 changes: 2 additions & 0 deletions src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,9 @@ export default {
splitAmount: ({amount}) => `split ${amount}`,
amountEach: ({amount}) => `${amount} each`,
payerOwesAmount: ({payer, amount}) => `${payer} owes ${amount}`,
payerOwes: ({payer}) => `${payer} owes: `,
payerPaidAmount: ({payer, amount}) => `${payer} paid ${amount}`,
payerPaid: ({payer}) => `${payer} paid: `,
payerSettled: ({amount}) => `paid ${amount}`,
noReimbursableExpenses: 'This report has an invalid amount',
pendingConversionMessage: "Total will update when you're back online",
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,9 @@ export default {
splitAmount: ({amount}) => `dividir ${amount}`,
amountEach: ({amount}) => `${amount} cada uno`,
payerOwesAmount: ({payer, amount}) => `${payer} debe ${amount}`,
payerOwes: ({payer}) => `${payer} debe: `,
payerPaidAmount: ({payer, amount}) => `${payer} pagó ${amount}`,
payerPaid: ({payer}) => `${payer} pagó: `,
payerSettled: ({amount}) => `pagó ${amount}`,
noReimbursableExpenses: 'El monto de este informe es inválido',
pendingConversionMessage: 'El total se actualizará cuando estés online',
Expand Down