From 15e8a88e3f28e8da450391587d589aff236a8077 Mon Sep 17 00:00:00 2001 From: Eric Jinks <3147296+Jinksi@users.noreply.github.com> Date: Tue, 30 Apr 2024 07:53:55 +1000 Subject: [PATCH] Use correct currency in Payment Activity Card (#8701) Co-authored-by: Shendy <73803630+shendy-a8c@users.noreply.github.com> --- ...ent-activity-card-default-account-currency | 5 +++ .../payment-activity-data.tsx | 12 +++---- .../payment-activity/payment-data-tile.tsx | 8 ++--- .../test/__snapshots__/index.test.tsx.snap | 35 +++++++++++-------- .../payment-data-tile.test.tsx.snap | 5 +-- .../payment-activity/test/index.test.tsx | 17 +++++++-- .../test/payment-data-tile.test.tsx | 15 ++++---- client/data/payment-activity/resolvers.ts | 4 +-- client/data/payment-activity/selectors.ts | 6 ++-- .../data/payment-activity/test/hooks.test.ts | 1 + .../payment-activity/test/reducer.test.ts | 5 +++ client/data/payment-activity/types.d.ts | 33 +++++++++++------ 12 files changed, 95 insertions(+), 51 deletions(-) create mode 100644 changelog/fix-8700-payment-activity-card-default-account-currency diff --git a/changelog/fix-8700-payment-activity-card-default-account-currency b/changelog/fix-8700-payment-activity-card-default-account-currency new file mode 100644 index 00000000000..73671f1477b --- /dev/null +++ b/changelog/fix-8700-payment-activity-card-default-account-currency @@ -0,0 +1,5 @@ +Significance: patch +Type: fix +Comment: Update Payment Activity Card to use correct currency for rendering amounts. + + diff --git a/client/components/payment-activity/payment-activity-data.tsx b/client/components/payment-activity/payment-activity-data.tsx index 5816c6fc540..2596079ceba 100644 --- a/client/components/payment-activity/payment-activity-data.tsx +++ b/client/components/payment-activity/payment-activity-data.tsx @@ -41,14 +41,14 @@ const PaymentActivityData: React.FC = () => { const fees = paymentActivityData?.fees ?? 0; const disputes = paymentActivityData?.disputes ?? 0; const refunds = paymentActivityData?.refunds ?? 0; - const { storeCurrency } = wcpaySettings; + const currency = paymentActivityData?.currency; return (
{ { { { = ( { reportLink, } ) => { return ( -
+

- { label } + { label } { ! isLoading && tooltip }

diff --git a/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap b/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap index 1b655775699..0b4f5e397a8 100644 --- a/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap +++ b/client/components/payment-activity/test/__snapshots__/index.test.tsx.snap @@ -27,12 +27,13 @@ exports[`PaymentActivity component should render 1`] = ` >

- + Total payment volume

diff --git a/client/components/payment-activity/test/__snapshots__/payment-data-tile.test.tsx.snap b/client/components/payment-activity/test/__snapshots__/payment-data-tile.test.tsx.snap index b822f04944a..b2b397d5d5f 100644 --- a/client/components/payment-activity/test/__snapshots__/payment-data-tile.test.tsx.snap +++ b/client/components/payment-activity/test/__snapshots__/payment-data-tile.test.tsx.snap @@ -4,12 +4,13 @@ exports[`PaymentDataTile renders correctly 1`] = `

- + Total payment volume

diff --git a/client/components/payment-activity/test/index.test.tsx b/client/components/payment-activity/test/index.test.tsx index 49e8726c02e..cfd35de8451 100644 --- a/client/components/payment-activity/test/index.test.tsx +++ b/client/components/payment-activity/test/index.test.tsx @@ -38,11 +38,16 @@ const mockUsePaymentActivityData = usePaymentActivityData as jest.MockedFunction mockUsePaymentActivityData.mockReturnValue( { paymentActivityData: { + currency: 'eur', total_payment_volume: 123456, charges: 9876, fees: 1234, disputes: 5555, refunds: 4444, + date_start: '2024-01-01', + date_end: '2024-01-31', + timezone: 'UTC', + interval: 'daily', }, isLoading: false, } ); @@ -83,10 +88,10 @@ describe( 'PaymentActivity component', () => { }, }, }, - accountDefaultCurrency: 'USD', + accountDefaultCurrency: 'eur', zeroDecimalCurrencies: [], connect: { - country: 'US', + country: 'DE', }, currencyData: { US: { @@ -117,11 +122,17 @@ describe( 'PaymentActivity component', () => { } ); it( 'should render', () => { - const { container, getByText } = render( ); + const { container, getByText, getByLabelText } = render( + + ); // Check survey is rendered. getByText( 'Are these metrics helpful?' ); + // Check correct currency/value is displayed. + const tpvElement = getByLabelText( 'Total payment volume' ); + expect( tpvElement ).toHaveTextContent( '€1.234,56' ); + expect( container ).toMatchSnapshot(); } ); diff --git a/client/components/payment-activity/test/payment-data-tile.test.tsx b/client/components/payment-activity/test/payment-data-tile.test.tsx index 2409d4f634e..2621cbbf8ac 100644 --- a/client/components/payment-activity/test/payment-data-tile.test.tsx +++ b/client/components/payment-activity/test/payment-data-tile.test.tsx @@ -22,7 +22,7 @@ declare const global: { describe( 'PaymentDataTile', () => { global.wcpaySettings = { - accountDefaultCurrency: 'USD', + accountDefaultCurrency: 'usd', zeroDecimalCurrencies: [], connect: { country: 'US', @@ -43,7 +43,7 @@ describe( 'PaymentDataTile', () => { const { container } = render( ); @@ -55,17 +55,18 @@ describe( 'PaymentDataTile', () => { render( ); - const labelElement = screen.getByText( label ); - expect( labelElement ).toBeInTheDocument(); + expect( screen.getByText( label ) ).toBeInTheDocument(); + expect( screen.getByLabelText( label ) ).toHaveTextContent( '$1.23' ); } ); test( 'renders amount correctly', () => { const amount = 10000; - const currencyCode = 'USD'; + const currencyCode = 'usd'; render( { id="charges-test-tile" label="Charges" amount={ 10000 } - currencyCode="USD" + currencyCode="usd" reportLink={ reportLink } /> ); diff --git a/client/data/payment-activity/resolvers.ts b/client/data/payment-activity/resolvers.ts index 9df0602577f..64d9ade814a 100644 --- a/client/data/payment-activity/resolvers.ts +++ b/client/data/payment-activity/resolvers.ts @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n'; */ import { NAMESPACE } from '../constants'; import { updatePaymentActivity } from './actions'; -import { PaymentActivityData, QueryDate } from './types'; +import type { PaymentActivityData, PaymentActivityQuery } from './types'; /** * Retrieves payment activity data from the reporting API. @@ -21,7 +21,7 @@ import { PaymentActivityData, QueryDate } from './types'; * @param {string} query Data on which to parameterize the selection. */ export function* getPaymentActivityData( - query: QueryDate + query: PaymentActivityQuery ): Generator< unknown > { const path = addQueryArgs( `${ NAMESPACE }/reporting/payment_activity`, diff --git a/client/data/payment-activity/selectors.ts b/client/data/payment-activity/selectors.ts index ab7a58201b7..3432c80d9fc 100644 --- a/client/data/payment-activity/selectors.ts +++ b/client/data/payment-activity/selectors.ts @@ -6,6 +6,8 @@ import { State } from 'wcpay/data/types'; import { PaymentActivityData } from './types'; -export const getPaymentActivityData = ( state: State ): PaymentActivityData => { - return state?.paymentActivity?.paymentActivityData || {}; +export const getPaymentActivityData = ( + state: State +): PaymentActivityData | undefined => { + return state?.paymentActivity?.paymentActivityData; }; diff --git a/client/data/payment-activity/test/hooks.test.ts b/client/data/payment-activity/test/hooks.test.ts index a11822f17c9..03d1d2834d7 100644 --- a/client/data/payment-activity/test/hooks.test.ts +++ b/client/data/payment-activity/test/hooks.test.ts @@ -13,6 +13,7 @@ jest.mock( '@wordpress/data' ); describe( 'usePaymentActivityData', () => { test( 'should return the correct payment activity data and loading state', () => { const mockPaymentActivityData = { + currency: 'jpy', total_payment_volume: 2500, charges: 3000, fees: 300, diff --git a/client/data/payment-activity/test/reducer.test.ts b/client/data/payment-activity/test/reducer.test.ts index b5943426212..cbbbd1eb5b2 100644 --- a/client/data/payment-activity/test/reducer.test.ts +++ b/client/data/payment-activity/test/reducer.test.ts @@ -12,6 +12,11 @@ describe( 'receivePaymentActivity', () => { fees: 300, disputes: 315, refunds: 200, + currency: 'jpy', + timezone: 'UTC', + date_start: '2024-01-01', + date_end: '2024-01-31', + interval: 'daily', }; test( 'should set payment activity data correctly', () => { diff --git a/client/data/payment-activity/types.d.ts b/client/data/payment-activity/types.d.ts index d7c4315b16e..ef388d2b899 100644 --- a/client/data/payment-activity/types.d.ts +++ b/client/data/payment-activity/types.d.ts @@ -1,11 +1,26 @@ /** @format */ export interface PaymentActivityData { - total_payment_volume?: number; // Total payment volume - charges?: number; // Charges - fees?: number; // Fees - disputes?: number; // Disputes - refunds?: number; // Refunds + /** The currency code for the amounts below, e.g. `usd` */ + currency: string; + /** Total payment volume amount */ + total_payment_volume: number; + /** Charges total amount */ + charges: number; + /** Fees total amount */ + fees: number; + /** Disputes total amount */ + disputes: number; + /** Refunds total amount */ + refunds: number; + /** The timezone used to calculate the date range, e.g. 'UTC' */ + timezone: string; + /** The date range start datetime used to calculate transaction data, e.g. 2024-04-29T16:19:29 */ + date_start: string; + /** The date range end datetime used to calculate transaction data, e.g. 2024-04-29T16:19:29 */ + date_end: string; + /** The interval used to calculate transaction data, e.g. 'daily' */ + interval: string; } export interface PaymentActivityState { @@ -18,13 +33,11 @@ export interface PaymentActivityAction { data: PaymentActivityData; } -export interface QueryDate { - date_start: string; - date_end: string; -} - export interface PaymentActivityQuery { + /** The date range start datetime used to calculate transaction data, e.g. 2024-04-29T16:19:29 */ date_start: string; + /** The date range end datetime used to calculate transaction data, e.g. 2024-04-29T16:19:29 */ date_end: string; + /** The timezone used to calculate the transaction data date range, e.g. 'UTC' */ timezone?: string; }