Skip to content
1 change: 1 addition & 0 deletions src/CONST/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6852,6 +6852,7 @@ const CONST = {
COMPLETED: 'completed',
},
},
GROUP_COLUMN_PREFIX: 'group',
TABLE_COLUMNS: {
RECEIPT: 'receipt',
DATE: 'date',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
openReportInRHP(transaction);
};

const minTableWidth = getTableMinWidth(columns ?? []);
const minTableWidth = getTableMinWidth(currentColumns.filter((column) => !column.startsWith(CONST.SEARCH.GROUP_COLUMN_PREFIX)) ?? []);
const shouldScrollHorizontally = isLargeScreenWidth && minTableWidth > windowWidth;

const content = (
Expand Down
30 changes: 8 additions & 22 deletions src/components/TransactionItemRow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,16 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {isCategoryMissing} from '@libs/CategoryUtils';
import getBase62ReportID from '@libs/getBase62ReportID';
import {computeReportName} from '@libs/ReportNameUtils';
import {isExpenseReport, isSettled} from '@libs/ReportUtils';
import StringUtils from '@libs/StringUtils';
import {
getDescription,
getExchangeRate,
getMerchant,
getOriginalAmount,
getOriginalCurrency,
getOriginalAmountForDisplay,
getOriginalCurrencyForDisplay,
getTaxName,
getCreated as getTransactionCreated,
hasMissingSmartscanFields,
isAmountMissing,
Expand Down Expand Up @@ -202,21 +204,6 @@ function TransactionItemRow({
const merchant = useMemo(() => getMerchantName(transactionItem, translate), [transactionItem, translate]);
const description = getDescription(transactionItem);

const formattedTaxRate = useMemo(() => {
const taxRateName = transactionItem?.policy?.taxRates?.taxes?.[transactionItem.taxCode ?? '']?.name ?? '';
const taxRateValue = transactionItem?.policy?.taxRates?.taxes?.[transactionItem.taxCode ?? '']?.value ?? '';

if (!taxRateName && !taxRateValue) {
return '';
}

if (!taxRateValue) {
return taxRateName;
}

return `${taxRateName} (${taxRateValue})`;
}, [transactionItem?.policy?.taxRates?.taxes, transactionItem.taxCode]);

// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const merchantOrDescription = merchant || description;

Expand Down Expand Up @@ -505,8 +492,8 @@ function TransactionItemRow({
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, undefined, isAmountColumnWide)]}
>
<AmountCell
total={isExpenseReport(transactionItem.report) ? -(transactionItem.originalAmount ?? 0) : getOriginalAmount(transactionItem)}
currency={getOriginalCurrency(transactionItem)}
total={getOriginalAmountForDisplay(transactionItem, isExpenseReport(transactionItem.report))}
currency={getOriginalCurrencyForDisplay(transactionItem)}
/>
</View>
),
Expand All @@ -525,7 +512,7 @@ function TransactionItemRow({
key={CONST.SEARCH.TABLE_COLUMNS.TAX_RATE}
style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_RATE)]}
>
<TextCell text={formattedTaxRate} />
<TextCell text={getTaxName(transactionItem.policy, transactionItem) ?? transactionItem.taxValue ?? ''} />
</View>
),
[CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: (
Expand All @@ -550,7 +537,7 @@ function TransactionItemRow({
[CONST.SEARCH.TABLE_COLUMNS.TITLE]: (
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TITLE)]}>
<TextCell
text={transactionItem.report?.reportName ?? ''}
text={computeReportName(transactionItem.report) ?? transactionItem.report?.reportName ?? ''}
Copy link
Contributor

Choose a reason for hiding this comment

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

@luacmartins I believe you should fetch report name from report attributes key. Can you please raise a fix to fix this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is this causing an issue? AFAIK we use computeReportName to compute the report name since report.reportName doesn't have the correct name for IOUs for example

Copy link
Contributor

Choose a reason for hiding this comment

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

@luacmartins computeReportName is a very expensive function for generating report names. We do the report name generation in the derived value system. Using derived values, we can get rid of redundant operations.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I see. I think we should update this comment then to suggest using the derived value

isLargeScreenWidth={isLargeScreenWidth}
/>
</View>
Expand Down Expand Up @@ -595,7 +582,6 @@ function TransactionItemRow({
isInSingleTransactionReport,
exchangeRateMessage,
isAmountColumnWide,
formattedTaxRate,
isTaxAmountColumnWide,
isLargeScreenWidth,
],
Expand Down
14 changes: 12 additions & 2 deletions src/libs/SearchUIUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,10 @@ import {
getCategory,
getDescription,
getExchangeRate,
getOriginalAmountForDisplay,
getTag,
getTaxAmount,
getTaxName,
getAmount as getTransactionAmount,
getCreated as getTransactionCreatedDate,
getMerchant as getTransactionMerchant,
Expand Down Expand Up @@ -2235,12 +2237,20 @@ function getSortedTransactionData(

if (sortBy === CONST.SEARCH.TABLE_COLUMNS.TAX_RATE) {
return data.sort((a, b) => {
const aValue = `${a.policy?.taxRates?.taxes?.[a.taxCode ?? '']?.name ?? ''} (${a.policy?.taxRates?.taxes?.[a.taxCode ?? '']?.value ?? ''})`;
const bValue = `${b.policy?.taxRates?.taxes?.[b.taxCode ?? '']?.name ?? ''} (${b.policy?.taxRates?.taxes?.[b.taxCode ?? '']?.value ?? ''})`;
const aValue = getTaxName(a.policy, a);
const bValue = getTaxName(b.policy, b);
return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare);
});
}

if (sortBy === CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT) {
return data.sort((a, b) => {
const aValue = getOriginalAmountForDisplay(a, a.report?.type === CONST.REPORT.TYPE.EXPENSE);
const bValue = getOriginalAmountForDisplay(b, b.report?.type === CONST.REPORT.TYPE.EXPENSE);
return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare, true);
});
}

if (!sortingProperty) {
return data;
}
Expand Down
25 changes: 25 additions & 0 deletions src/libs/TransactionUtils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
};

let deprecatedAllReports: OnyxCollection<Report> = {};
Onyx.connect({

Check warning on line 128 in src/libs/TransactionUtils/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.REPORT,
waitForCollectionCallback: true,
callback: (value) => {
Expand All @@ -134,7 +134,7 @@
});

let deprecatedAllTransactionViolations: OnyxCollection<TransactionViolations> = {};
Onyx.connect({

Check warning on line 137 in src/libs/TransactionUtils/index.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
waitForCollectionCallback: true,
callback: (value) => (deprecatedAllTransactionViolations = value),
Expand Down Expand Up @@ -843,6 +843,29 @@
return Math.abs(amount);
}

/**
* Return the original amount for display/sorting purposes.
* For expense reports, returns the negated value of (originalAmount || amount || modifiedAmount).
* For non-expense reports, returns getOriginalAmount() or Math.abs(amount) or Math.abs(modifiedAmount).
*/
function getOriginalAmountForDisplay(transaction: Pick<Transaction, 'originalAmount' | 'amount' | 'modifiedAmount'>, isExpenseReport: boolean): number {
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
if (isExpenseReport) {
return -((transaction.originalAmount || transaction.amount || transaction.modifiedAmount) ?? 0);
}
return getOriginalAmount(transaction as Transaction) || Math.abs(transaction.amount ?? 0) || Math.abs(transaction.modifiedAmount ?? 0);
/* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
}

/**
* Return the original currency for display/sorting purposes.
* Falls back to originalCurrency, then currency, then modifiedCurrency.
*/
function getOriginalCurrencyForDisplay(transaction: Pick<Transaction, 'originalCurrency' | 'currency' | 'modifiedCurrency' | 'amount'>): string {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
return transaction.originalCurrency || (transaction.amount === 0 ? transaction.modifiedCurrency : transaction.currency) || CONST.CURRENCY.USD;
}

/**
* Verify if the transaction is expecting the distance to be calculated on the server
*/
Expand Down Expand Up @@ -2428,6 +2451,8 @@
getReportOwnerAsAttendee,
getExchangeRate,
shouldReuseInitialTransaction,
getOriginalAmountForDisplay,
getOriginalCurrencyForDisplay,
};

export type {TransactionChanges};
2 changes: 1 addition & 1 deletion src/pages/iou/MoneyRequestAmountForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function MoneyRequestAmountForm({
*/
const submitAndNavigateToNextPage = useCallback(
(iouPaymentType?: PaymentMethodType | undefined) => {
const isTaxAmountForm = Navigation.getActiveRoute().includes('taxAmount');
const isTaxAmountForm = Navigation.getActiveRouteWithoutParams().includes('taxAmount');

// Skip the check for tax amount form as 0 is a valid input
const currentAmount = moneyRequestAmountInputRef.current?.getNumber() ?? '';
Expand Down
Loading