Transactions: Use server based export for both sync download on browser and async email export

changelog/refactor-server-export-sync-download

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Change Transactions sync download to use server export.

client/data/transactions/resolvers.js

@@ -89,10 +89,10 @@ export function* getTransactions( query ) {
 }
 
 export function getTransactionsCSV( query ) {
-	const path = addQueryArgs(
-		`${ NAMESPACE }/transactions/download`,
-		formatQueryFilters( query )
-	);
+	const path = addQueryArgs( `${ NAMESPACE }/transactions/download`, {
+		...formatQueryFilters( query ),
+		download_type: query.downloadType,
+	} );
 
 	return path;
 }

client/transactions/list/index.tsx

@@ -8,6 +8,7 @@ import { uniq } from 'lodash';
 import { useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
+
 import {
 	TableCard,
 	Search,
@@ -19,11 +20,6 @@ import {
 	getQuery,
 	updateQueryString,
 } from '@woocommerce/navigation';
-import {
-	downloadCSVFile,
-	generateCSVDataFromTable,
-	generateCSVFileName,
-} from '@woocommerce/csv-export';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
@@ -96,6 +92,11 @@ interface Column extends TableCardColumn {
 	labelInCsv?: string;
 }
 
+interface TransactionExportResponse {
+	download_url?: string;
+	exported_transactions: number;
+}
+
 const getPaymentSourceDetails = ( txn: Transaction ) => {
 	if ( ! txn.source_identifier ) {
 		return <Fragment></Fragment>;
@@ -600,6 +601,7 @@ export const TransactionsList = (
 	const downloadable = !! rows.length;
 
 	const endpointExport = async ( language: string ) => {
+		const downloadType = totalRows > rows.length ? 'async' : 'sync';
 		// We destructure page and path to get the right params.
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { page, path, ...params } = getQuery();
@@ -662,7 +664,7 @@ export const TransactionsList = (
 			window.confirm( confirmMessage )
 		) {
 			try {
-				await apiFetch( {
+				const response = await apiFetch< TransactionExportResponse >( {
 					path: getTransactionsCSV( {
 						userEmail,
 						locale,
@@ -686,20 +688,29 @@ export const TransactionsList = (
 						riskLevelIs,
 						riskLevelIsNot,
 						depositId,
+						downloadType,
 					} ),
 					method: 'POST',
 				} );
 
-				createNotice(
-					'success',
-					sprintf(
-						__(
-							'Your export will be emailed to %s',
-							'woocommerce-payments'
-						),
-						userEmail
-					)
-				);
+				if ( response?.download_url ) {
+					const link = document.createElement( 'a' );
+					// Add force_download=true to the URL to force the download, which adds the appropriate `Content-Disposition: attachment` header when using production server.
+					link.href = response.download_url + '?force_download=true';
+					link.click();
+				} else {
+					// Show email notification if no direct download URL
+					createNotice(
+						'success',
+						sprintf(
+							__(
+								'Your export will be emailed to %s',
+								'woocommerce-payments'
+							),
+							userEmail
+						)
+					);
+				}
 			} catch {
 				createNotice(
 					'error',
@@ -718,32 +729,17 @@ export const TransactionsList = (
 		// We destructure page and path to get the right params.
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { page, path, ...params } = getQuery();
-		const downloadType = totalRows > rows.length ? 'endpoint' : 'browser';
 
 		recordEvent( 'wcpay_transactions_download_csv_click', {
 			location: props.depositId ? 'deposit_details' : 'transactions',
-			download_type: downloadType,
 			exported_transactions: rows.length,
 			total_transactions: transactionsSummary.count,
 		} );
 
-		if ( 'endpoint' === downloadType ) {
-			if ( ! isDefaultSiteLanguage() && ! isExportModalDismissed() ) {
-				setCSVExportModalOpen( true );
-			} else {
-				endpointExport( '' );
-			}
+		if ( ! isDefaultSiteLanguage() && ! isExportModalDismissed() ) {
+			setCSVExportModalOpen( true );
 		} else {
-			const columnsToDisplayInCsv = columnsToDisplay.map( ( column ) => {
-				if ( column.labelInCsv ) {
-					return { ...column, label: column.labelInCsv };
-				}
-				return column;
-			} );
-			downloadCSVFile(
-				generateCSVFileName( title, params ),
-				generateCSVDataFromTable( columnsToDisplayInCsv, rows )
-			);
+			endpointExport( '' );
 		}
 
 		setIsDownloading( false );

client/transactions/list/test/index.tsx

@@ -7,12 +7,8 @@ import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import user from '@testing-library/user-event';
 import apiFetch from '@wordpress/api-fetch';
-import { dateI18n } from '@wordpress/date';
-import { downloadCSVFile } from '@woocommerce/csv-export';
 import { getQuery, updateQueryString } from '@woocommerce/navigation';
 import { getUserTimeZone } from 'wcpay/utils/test-utils';
-import moment from 'moment';
-import os from 'os';
 
 /**
  * Internal dependencies
@@ -25,15 +21,6 @@ import {
 } from 'data/index';
 import type { Transaction } from 'data/transactions/hooks';
 
-jest.mock( '@woocommerce/csv-export', () => {
-	const actualModule = jest.requireActual( '@woocommerce/csv-export' );
-
-	return {
-		...actualModule,
-		downloadCSVFile: jest.fn(),
-	};
-} );
-
 jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 
 // Workaround for mocking @wordpress/data.
@@ -67,10 +54,6 @@ jest.mock( '@wordpress/date', () => ( {
 	} ),
 } ) );
 
-const mockDownloadCSVFile = downloadCSVFile as jest.MockedFunction<
-	typeof downloadCSVFile
->;
-
 const mockApiFetch = apiFetch as jest.MockedFunction< typeof apiFetch >;
 
 const mockUseTransactions = useTransactions as jest.MockedFunction<
@@ -208,18 +191,6 @@ const getMockTransactions: () => Transaction[] = () => [
 	},
 ];
 
-function getUnformattedAmount( formattedAmount: string ) {
-	const amount = formattedAmount.replace( /[^0-9,.' ]/g, '' ).trim();
-	return amount.replace( ',', '.' ); // Euro fix
-}
-
-function formatDate( date: string ) {
-	return dateI18n(
-		'M j, Y / g:iA',
-		moment.utc( date ).local().toISOString()
-	);
-}
-
 describe( 'Transactions list', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
@@ -615,115 +586,33 @@ describe( 'Transactions list', () => {
 
 			getByRole( 'button', { name: 'Download' } ).click();
 
+			// Check if the API request is made with the correct download type = 'async'.
 			await waitFor( () => {
 				expect( mockApiFetch ).toHaveBeenCalledTimes( 1 );
 				expect( mockApiFetch ).toHaveBeenCalledWith( {
 					method: 'POST',
 					path: `/wc/v3/payments/transactions/download?user_email=mock%40example.com&deposit_id=po_mock&user_timezone=${ encodeURIComponent(
 						getUserTimeZone()
-					) }&locale=en`,
+					) }&locale=en&download_type=async`,
 				} );
 			} );
 		} );
 
-		test( 'should render expected columns in CSV when the download button is clicked', () => {
+		test( 'should fetch export when number of transactions is less than 100', async () => {
 			const { getByRole } = render( <TransactionsList /> );
 
 			getByRole( 'button', { name: 'Download' } ).click();
 
-			const expected = [
-				'"Transaction ID"',
-				'"Date / Time (UTC)"',
-				'Type',
-				'Channel',
-				'"Paid Currency"',
-				'"Amount Paid"',
-				'"Payout Currency"',
-				'Amount',
-				'Fees',
-				'Net',
-				'"Order #"',
-				'"Payment Method"',
-				'Customer',
-				'Email',
-				'Country',
-				'"Risk level"',
-				'"Payout ID"',
-				'"Payout date"',
-				'"Payout status"',
-			];
-
-			// checking if columns in CSV are rendered correctly
-			expect(
-				mockDownloadCSVFile.mock.calls[ 0 ][ 1 ]
-					.split( '\n' )[ 0 ]
-					.split( ',' )
-			).toEqual( expected );
-		} );
-
-		test( 'should match the visible rows', () => {
-			const { getByRole, getAllByRole } = render( <TransactionsList /> );
-
-			getByRole( 'button', { name: 'Download' } ).click();
-
-			const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];
-			const csvRows = csvContent.split( os.EOL );
-			const displayRows: HTMLElement[] = getAllByRole( 'row' );
-
-			expect( csvRows.length ).toEqual( displayRows.length );
-
-			const csvFirstTransaction = csvRows[ 1 ].split( ',' );
-			const displayFirstTransaction: string[] = Array.from(
-				displayRows[ 1 ].querySelectorAll( 'td' )
-			).map( ( td: HTMLElement ) => td.textContent || '' );
-
-			// Date/Time column is a th
-			// Extract is separately and prepend to csvFirstTransaction
-			const displayFirstRowHead: string[] = Array.from(
-				displayRows[ 1 ].querySelectorAll( 'th' )
-			).map( ( th: HTMLElement ) => th.textContent || '' );
-			displayFirstTransaction.unshift( displayFirstRowHead[ 0 ] );
-
-			// Note:
-			//
-			// 1. CSV and display indexes are off by 1 because the first field in CSV is transaction id,
-			//    which is missing in display.
-			//
-			// 2. The indexOf check in amount's expect is because the amount in CSV may not contain
-			//    trailing zeros as in the display amount.
-			//
-			expect( displayFirstTransaction[ 0 ] ).toBe(
-				formatDate( csvFirstTransaction[ 1 ].replace( /['"]+/g, '' ) ) // strip extra quotes
-			); // date
-			expect( displayFirstTransaction[ 1 ] ).toBe(
-				csvFirstTransaction[ 2 ]
-			); // type
-			expect( displayFirstTransaction[ 2 ] ).toBe(
-				csvFirstTransaction[ 3 ]
-			); // channel
-			expect(
-				getUnformattedAmount( displayFirstTransaction[ 3 ] ).indexOf(
-					csvFirstTransaction[ 7 ]
-				)
-			).not.toBe( -1 ); // amount
-			expect(
-				-Number( getUnformattedAmount( displayFirstTransaction[ 4 ] ) )
-			).toEqual(
-				Number(
-					csvFirstTransaction[ 8 ].replace( /['"]+/g, '' ) // strip extra quotes
-				)
-			); // fees
-			expect(
-				getUnformattedAmount( displayFirstTransaction[ 5 ] ).indexOf(
-					csvFirstTransaction[ 9 ]
-				)
-			).not.toBe( -1 ); // net
-			expect( displayFirstTransaction[ 6 ] ).toBe(
-				csvFirstTransaction[ 10 ]
-			); // order number
-			expect( displayFirstTransaction[ 8 ] ).toBe(
-				csvFirstTransaction[ 12 ].replace( /['"]+/g, '' ) // strip extra quotes
-			); // customer
+			// Check if the API request is made with the correct download type = 'sync'.
+			await waitFor( () => {
+				expect( mockApiFetch ).toHaveBeenCalledTimes( 1 );
+				expect( mockApiFetch ).toHaveBeenCalledWith( {
+					method: 'POST',
+					path: `/wc/v3/payments/transactions/download?user_email=mock%40example.com&user_timezone=${ encodeURIComponent(
+						getUserTimeZone()
+					) }&locale=en&download_type=sync`,
+				} );
+			} );
 		} );
 	} );
 } );

includes/admin/class-wc-rest-payments-transactions-controller.php

@@ -171,12 +171,13 @@ public function get_fraud_outcome_transactions_export( $request ) {
 	 * @param WP_REST_Request $request Full data about the request.
 	 */
 	public function get_transactions_export( $request ) {
-		$user_email = $request->get_param( 'user_email' );
-		$deposit_id = $request->get_param( 'deposit_id' );
-		$locale     = $request->get_param( 'locale' );
-		$filters    = $this->get_transactions_filters( $request );
+		$user_email    = $request->get_param( 'user_email' );
+		$deposit_id    = $request->get_param( 'deposit_id' );
+		$locale        = $request->get_param( 'locale' );
+		$download_type = $request->get_param( 'download_type' );
+		$filters       = $this->get_transactions_filters( $request );
 
-		return $this->forward_request( 'get_transactions_export', [ $filters, $user_email, $deposit_id, $locale ] );
+		return $this->forward_request( 'get_transactions_export', [ $filters, $user_email, $deposit_id, $locale, $download_type ] );
 	}
 
 	/**

includes/wc-payment-api/class-wc-payments-api-client.php

@@ -432,12 +432,13 @@ public function get_fraud_outcome_transactions_export( $request ) {
 	 * @param string $user_email The email to search for.
 	 * @param string $deposit_id The deposit to filter on.
 	 * @param string $locale     Site locale.
+	 * @param string $download_type The type of download to perform.
 	 *
 	 * @return array Export summary
 	 *
 	 * @throws API_Exception - Exception thrown on request failure.
 	 */
-	public function get_transactions_export( $filters = [], $user_email = '', $deposit_id = null, $locale = null ) {
+	public function get_transactions_export( $filters = [], $user_email = '', $deposit_id = null, $locale = null, $download_type = null ) {
 		// Map Order # terms to the actual charge id to be used in the server.
 		if ( ! empty( $filters['search'] ) ) {
 			$filters['search'] = WC_Payments_Utils::map_search_orders_to_charge_ids( $filters['search'] );
@@ -451,6 +452,9 @@ public function get_transactions_export( $filters = [], $user_email = '', $depos
 		if ( ! empty( $locale ) ) {
 			$filters['locale'] = $locale;
 		}
+		if ( ! empty( $download_type ) ) {
+			$filters['download_type'] = $download_type;
+		}
 
 		return $this->request( $filters, self::TRANSACTIONS_API . '/download', self::POST );
 	}