Merge branch 'develop' into 8249/add-bnpl-icons-to-thank-you-page

Automattic · Apr 30, 2024 · 9f92c52 · 9f92c52
2 parents 4a409b4 + 15e8a88
commit 9f92c52
Show file tree

Hide file tree

Showing 36 changed files with 254 additions and 123 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/changelog/fix-8724-are-these-metrics b/changelog/fix-8724-are-these-metrics
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: This is covered by emoji survey changelog from #8506
+
+
diff --git a/changelog/fix-fatals-on-plugin-update b/changelog/fix-fatals-on-plugin-update
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Avoid warnings about fatal error during plugin update due to problems with plugin initialization.
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/survey/index.tsx b/client/components/payment-activity/survey/index.tsx
@@ -99,7 +99,7 @@ const Survey: React.FC = () => {
 			<div className="wcpay-payments-activity__survey">
 				<div className="survey_container">
 					{ __(
-						'Are those metrics helpful?',
+						'Are these metrics helpful?',
 						'woocommerce-payments'
 					) }
 

diff --git a/client/components/payment-activity/survey/test/__snapshots__/index.test.tsx.snap b/client/components/payment-activity/survey/test/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`WcPayOverviewSurveyContextProvider test survey initial display 1`] = `
       <div
         class="survey_container"
       >
-        Are those metrics helpful?
+        Are these metrics helpful?
         <div
           class="survey_container__emoticons"
         >
@@ -92,7 +92,7 @@ exports[`WcPayOverviewSurveyContextProvider test survey with comments textbox 1`
       <div
         class="survey_container"
       >
-        Are those metrics helpful?
+        Are these metrics helpful?
         <div
           class="survey_container__emoticons"
         >

diff --git a/client/components/payment-activity/survey/test/index.test.tsx b/client/components/payment-activity/survey/test/index.test.tsx
@@ -53,7 +53,7 @@ describe( 'WcPayOverviewSurveyContextProvider', () => {
 			</WcPayOverviewSurveyContextProvider>
 		);
 
-		const surveyText = screen.getByText( 'Are those metrics helpful?' );
+		const surveyText = screen.getByText( 'Are these metrics helpful?' );
 		expect( surveyText ).toBeInTheDocument();
 
 		const buttons = screen.getAllByRole( 'button' );

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>
@@ -260,7 +265,7 @@ exports[`PaymentActivity component should render 1`] = `
           <div
             class="survey_container"
           >
-            Are those metrics helpful?
+            Are these metrics helpful?
             <div
               class="survey_container__emoticons"
             >

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,10 +122,16 @@ describe( 'PaymentActivity component', () => {
 	} );
 
 	it( 'should render', () => {
-		const { container, getByText } = render( <PaymentActivity /> );
+		const { container, getByText, getByLabelText } = render(
+			<PaymentActivity />
+		);
 
 		// Check survey is rendered.
-		getByText( 'Are those metrics helpful?' );
+		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();
 	} );
@@ -140,7 +151,7 @@ describe( 'PaymentActivity component', () => {
 		const { queryByText } = render( <PaymentActivity /> );
 
 		expect(
-			queryByText( 'Are those metrics helpful?' )
+			queryByText( 'Are these metrics helpful?' )
 		).not.toBeInTheDocument();
 	} );
 } );
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 }
 			/>
 		);