Use correct currency in Payment Activity Card (#8701)

Co-authored-by: Shendy <[email protected]>
Automattic · Apr 29, 2024 · 15e8a88 · 15e8a88
1 parent ebee3fe
commit 15e8a88
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 51 deletions.
diff --git a/changelog/fix-8700-payment-activity-card-default-account-currency 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
@@ -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 (
 		<div className="wcpay-payment-activity-data">
 			<PaymentDataTile
 				id="wcpay-payment-activity-data__total-payment-volume"
 				label={ __( 'Total payment volume', 'woocommerce-payments' ) }
-				currencyCode={ storeCurrency }
+				currencyCode={ currency }
 				tooltip={
 					<ClickTooltip
 						className="wcpay-payment-activity-data__total-payment-volume__tooltip"
@@ -100,7 +100,7 @@ const PaymentActivityData: React.FC = () => {
 				<PaymentDataTile
 					id="wcpay-payment-data-highlights__charges"
 					label={ __( 'Charges', 'woocommerce-payments' ) }
-					currencyCode={ storeCurrency }
+					currencyCode={ currency }
 					tooltip={
 						<ClickTooltip
 							className="payment-data-highlights__charges__tooltip"
@@ -132,7 +132,7 @@ const PaymentActivityData: React.FC = () => {
 				<PaymentDataTile
 					id="wcpay-payment-data-highlights__refunds"
 					label={ __( 'Refunds', 'woocommerce-payments' ) }
-					currencyCode={ storeCurrency }
+					currencyCode={ currency }
 					amount={ refunds }
 					reportLink={ getAdminUrl( {
 						page: 'wc-admin',
@@ -151,7 +151,7 @@ const PaymentActivityData: React.FC = () => {
 				<PaymentDataTile
 					id="wcpay-payment-data-highlights__disputes"
 					label={ __( 'Disputes', 'woocommerce-payments' ) }
-					currencyCode={ storeCurrency }
+					currencyCode={ currency }
 					amount={ disputes }
 					reportLink={ getAdminUrl( {
 						page: 'wc-admin',
@@ -170,7 +170,7 @@ const PaymentActivityData: React.FC = () => {
 				<PaymentDataTile
 					id="wcpay-payment-data-highlights__fees"
 					label={ __( 'Fees', 'woocommerce-payments' ) }
-					currencyCode={ storeCurrency }
+					currencyCode={ currency }
 					tooltip={
 						<ClickTooltip
 							className="payment-data-highlights__fees__tooltip"

diff --git a/client/components/payment-activity/payment-data-tile.tsx b/client/components/payment-activity/payment-data-tile.tsx
@@ -8,10 +8,10 @@ import { Link } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-
 import { formatCurrency } from 'wcpay/utils/currency';
 import Loadable from '../loadable';
 import './style.scss';
+
 interface PaymentDataTileProps {
 	/**
 	 * The id for the tile, can be used for CSS styling.
@@ -24,7 +24,7 @@ interface PaymentDataTileProps {
 	/**
 	 * The currency code for the amount displayed.
 	 */
-	currencyCode: string;
+	currencyCode?: string;
 	/**
 	 * For optionally passing a ClickTooltip component.
 	 */
@@ -53,9 +53,9 @@ const PaymentDataTile: React.FC< PaymentDataTileProps > = ( {
 	reportLink,
 } ) => {
 	return (
-		<div id={ id } className="wcpay-payment-data-highlights__item">
+		<div className="wcpay-payment-data-highlights__item">
 			<p className="wcpay-payment-data-highlights__item__label">
-				<span>{ label }</span>
+				<span id={ id }>{ label }</span>
 				{ ! isLoading && tooltip }
 			</p>
 			<div className="wcpay-payment-data-highlights__item__wrapper">

diff --git 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`] = `
         >
           <div
             class="wcpay-payment-data-highlights__item"
-            id="wcpay-payment-activity-data__total-payment-volume"
           >
             <p
               class="wcpay-payment-data-highlights__item__label"
             >
-              <span>
+              <span
+                id="wcpay-payment-activity-data__total-payment-volume"
+              >
                 Total payment volume
               </span>
               <button
@@ -71,7 +72,7 @@ exports[`PaymentActivity component should render 1`] = `
                 aria-labelledby="wcpay-payment-activity-data__total-payment-volume"
                 class="wcpay-payment-data-highlights__item__wrapper__amount"
               >
-                $1,234.56
+                €1.234,56
               </p>
               <a
                 data-link-type="wc-admin"
@@ -86,12 +87,13 @@ exports[`PaymentActivity component should render 1`] = `
           >
             <div
               class="wcpay-payment-data-highlights__item"
-              id="wcpay-payment-data-highlights__charges"
             >
               <p
                 class="wcpay-payment-data-highlights__item__label"
               >
-                <span>
+                <span
+                  id="wcpay-payment-data-highlights__charges"
+                >
                   Charges
                 </span>
                 <button
@@ -130,7 +132,7 @@ exports[`PaymentActivity component should render 1`] = `
                   aria-labelledby="wcpay-payment-data-highlights__charges"
                   class="wcpay-payment-data-highlights__item__wrapper__amount"
                 >
-                  $98.76
+                  €98,76
                 </p>
                 <a
                   data-link-type="wc-admin"
@@ -142,12 +144,13 @@ exports[`PaymentActivity component should render 1`] = `
             </div>
             <div
               class="wcpay-payment-data-highlights__item"
-              id="wcpay-payment-data-highlights__refunds"
             >
               <p
                 class="wcpay-payment-data-highlights__item__label"
               >
-                <span>
+                <span
+                  id="wcpay-payment-data-highlights__refunds"
+                >
                   Refunds
                 </span>
               </p>
@@ -158,7 +161,7 @@ exports[`PaymentActivity component should render 1`] = `
                   aria-labelledby="wcpay-payment-data-highlights__refunds"
                   class="wcpay-payment-data-highlights__item__wrapper__amount"
                 >
-                  $44.44
+                  €44,44
                 </p>
                 <a
                   data-link-type="wc-admin"
@@ -170,12 +173,13 @@ exports[`PaymentActivity component should render 1`] = `
             </div>
             <div
               class="wcpay-payment-data-highlights__item"
-              id="wcpay-payment-data-highlights__disputes"
             >
               <p
                 class="wcpay-payment-data-highlights__item__label"
               >
-                <span>
+                <span
+                  id="wcpay-payment-data-highlights__disputes"
+                >
                   Disputes
                 </span>
               </p>
@@ -186,7 +190,7 @@ exports[`PaymentActivity component should render 1`] = `
                   aria-labelledby="wcpay-payment-data-highlights__disputes"
                   class="wcpay-payment-data-highlights__item__wrapper__amount"
                 >
-                  $55.55
+                  €55,55
                 </p>
                 <a
                   data-link-type="wc-admin"
@@ -198,12 +202,13 @@ exports[`PaymentActivity component should render 1`] = `
             </div>
             <div
               class="wcpay-payment-data-highlights__item"
-              id="wcpay-payment-data-highlights__fees"
             >
               <p
                 class="wcpay-payment-data-highlights__item__label"
               >
-                <span>
+                <span
+                  id="wcpay-payment-data-highlights__fees"
+                >
                   Fees
                 </span>
                 <button
@@ -242,7 +247,7 @@ exports[`PaymentActivity component should render 1`] = `
                   aria-labelledby="wcpay-payment-data-highlights__fees"
                   class="wcpay-payment-data-highlights__item__wrapper__amount"
                 >
-                  $12.34
+                  €12,34
                 </p>
               </div>
             </div>

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
@@ -4,12 +4,13 @@ exports[`PaymentDataTile renders correctly 1`] = `
 <div>
   <div
     class="wcpay-payment-data-highlights__item"
-    id="total-payment"
   >
     <p
       class="wcpay-payment-data-highlights__item__label"
     >
-      <span>
+      <span
+        id="total-payment"
+      >
         Total payment volume
       </span>
     </p>

diff --git 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( <PaymentActivity /> );
+		const { container, getByText, getByLabelText } = render(
+			<PaymentActivity />
+		);
 
 		// 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
@@ -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(
 			<PaymentDataTile
 				id="total-payment"
-				currencyCode="USD"
+				currencyCode="usd"
 				label="Total payment volume"
 			/>
 		);
@@ -55,17 +55,18 @@ describe( 'PaymentDataTile', () => {
 		render(
 			<PaymentDataTile
 				id="total-payment"
-				currencyCode="USD"
+				currencyCode="usd"
 				label={ label }
+				amount={ 123 }
 			/>
 		);
-		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(
 			<PaymentDataTile
 				id="charges-test-tile"
@@ -85,7 +86,7 @@ describe( 'PaymentDataTile', () => {
 				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
@@ -13,15 +13,15 @@ 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.
  *
  * @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
@@ -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
@@ -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
@@ -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', () => {