Transaction Details → Dispute Details – show dispute amount in store/…

…dispute currency (#7287)

Co-authored-by: Shendy <[email protected]>
Co-authored-by: Rua Haszard <[email protected]>

changelog/update-7124-transaction-details-dispute-amount-currency

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Behind feature flag: show transaction details dispute amount in store's currency
+
+

client/disputes/utils.ts

@@ -76,7 +76,7 @@ export const isInquiry = ( dispute: Pick< Dispute, 'status' > ): boolean => {
  * Returns the dispute fee balance transaction for a dispute if it exists
  * and the deduction has not been reversed.
  */
-const getDisputeDeductedBalanceTransaction = (
+export const getDisputeDeductedBalanceTransaction = (
 	dispute: Pick< Dispute, 'balance_transactions' >
 ): BalanceTransaction | undefined => {
 	// Note that there can only be, at most, two balance transactions for a given dispute:

client/payment-details/dispute-details/dispute-summary-row.tsx

@@ -15,11 +15,12 @@ import classNames from 'classnames';
  */
 import type { Dispute } from 'wcpay/types/disputes';
 import { HorizontalList } from 'wcpay/components/horizontal-list';
-import { formatCurrency } from 'wcpay/utils/currency';
+import { formatExplicitCurrency } from 'wcpay/utils/currency';
 import { reasons } from 'wcpay/disputes/strings';
 import { formatStringValue } from 'wcpay/utils';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import Paragraphs from 'wcpay/components/paragraphs';
+import { getDisputeDeductedBalanceTransaction } from 'wcpay/disputes/utils';
 
 interface Props {
 	dispute: Dispute;
@@ -38,11 +39,22 @@ const DisputeSummaryRow: React.FC< Props > = ( { dispute, daysRemaining } ) => {
 		reasons[ dispute.reason ]?.display || dispute.reason
 	);
 	const disputeReasonSummary = reasons[ dispute.reason ]?.summary || [];
+	const disputeBalanceTransaction = getDisputeDeductedBalanceTransaction(
+		dispute
+	);
+	// If there is a dispute deduction balance transaction, show the dispute amount in the store's currency.
+	// Otherwise (if the dispute is an inquiry) use the dispute/charge amount and currency.
+	const disputeAmountFormatted = disputeBalanceTransaction
+		? formatExplicitCurrency(
+				Math.abs( disputeBalanceTransaction.amount ),
+				disputeBalanceTransaction.currency
+		  )
+		: formatExplicitCurrency( dispute.amount, dispute.currency );
 
 	const columns = [
 		{
 			title: __( 'Dispute Amount', 'woocommerce-payments' ),
-			content: formatCurrency( dispute.amount, dispute.currency ),
+			content: disputeAmountFormatted,
 		},
 		{
 			title: __( 'Disputed On', 'woocommerce-payments' ),

client/payment-details/summary/test/index.test.tsx

@@ -25,6 +25,7 @@ declare const global: {
 	};
 	wcpaySettings: {
 		isSubscriptionsActive: boolean;
+		shouldUseExplicitPrice: boolean;
 		zeroDecimalCurrencies: string[];
 		currencyData: Record< string, any >;
 		connect: {
@@ -104,7 +105,7 @@ const getBaseDispute = (): Dispute =>
 		order: null,
 		balance_transactions: [
 			{
-				amount: -1500,
+				amount: -2000,
 				currency: 'usd',
 				fee: 1500,
 				reporting_category: 'dispute',
@@ -160,7 +161,8 @@ describe( 'PaymentDetailsSummary', () => {
 
 		global.wcpaySettings = {
 			isSubscriptionsActive: false,
-			zeroDecimalCurrencies: [],
+			shouldUseExplicitPrice: false,
+			zeroDecimalCurrencies: [ 'jpy' ],
 			connect: {
 				country: 'US',
 			},
@@ -177,6 +179,14 @@ describe( 'PaymentDetailsSummary', () => {
 					decimalSeparator: '.',
 					precision: 2,
 				},
+				JP: {
+					code: 'JPY',
+					symbol: '¥',
+					symbolPosition: 'left',
+					thousandSeparator: ',',
+					decimalSeparator: '.',
+					precision: 0,
+				},
 			},
 		};
 
@@ -514,6 +524,70 @@ describe( 'PaymentDetailsSummary', () => {
 			} );
 		} );
 
+		test( 'renders the information of a disputed charge when the store/charge currency differ', () => {
+			// True when multi-currency is enabled.
+			global.wcpaySettings.shouldUseExplicitPrice = true;
+
+			// In this case, charge currency is JPY, but store currency is NOK.
+			const charge = getBaseCharge();
+			charge.currency = 'jpy';
+			charge.amount = 10000;
+			charge.balance_transaction = {
+				amount: 72581,
+				currency: 'nok',
+				reporting_category: 'charge',
+				fee: 4152,
+			};
+			charge.disputed = true;
+			charge.dispute = getBaseDispute();
+			charge.dispute.status = 'needs_response';
+			charge.dispute.amount = 10000;
+			charge.dispute.currency = 'jpy';
+			charge.dispute.balance_transactions = [
+				{
+					amount: -72581,
+					currency: 'nok',
+					fee: 15000,
+					reporting_category: 'dispute',
+				},
+			];
+			renderCharge( charge );
+
+			// Disputed amount should show the store (balance transaction) currency.
+			expect(
+				screen.getByText( /Dispute Amount/i ).nextSibling
+			).toHaveTextContent( /kr 725.81 NOK/i );
+		} );
+
+		test( 'renders the information of an inquiry when the store/charge currency differ', () => {
+			// True when multi-currency is enabled.
+			global.wcpaySettings.shouldUseExplicitPrice = true;
+
+			// In this case, charge currency is JPY, but store currency is NOK.
+			const charge = getBaseCharge();
+			charge.currency = 'jpy';
+			charge.amount = 10000;
+			charge.balance_transaction = {
+				amount: 72581,
+				currency: 'nok',
+				reporting_category: 'charge',
+				fee: 4152,
+			};
+			charge.disputed = true;
+			charge.dispute = getBaseDispute();
+			charge.dispute.status = 'warning_needs_response';
+			charge.dispute.amount = 10000;
+			charge.dispute.currency = 'jpy';
+			// Inquiries don't have balance transactions.
+			charge.dispute.balance_transactions = [];
+			renderCharge( charge );
+
+			// Disputed amount should show the dispute/charge currency.
+			expect(
+				screen.getByText( /Dispute Amount/i ).nextSibling
+			).toHaveTextContent( /¥10,000 JPY/i );
+		} );
+
 		test( 'correctly renders dispute details for a dispute with staged evidence', () => {
 			const charge = getBaseCharge();
 			charge.disputed = true;