STATS-63: Download CSV for email. (#103581)

* STATS-63: Add an option to modify export array.

* STATS-63: Add an option to modify CSV data.

* STATS-63: Add Email CSV download functionality.

* STATS-63: Add headers support in CSV.

* STATS-63: Add headers in email CSV.

* STATS-63: Use proper array checking.

Co-authored-by: Dognose <[email protected]>

* STATS-63: Preserve the args order in buildExportArray.

* STATS-63: Align CSV button in the middle.

---------

Co-authored-by: Dognose <[email protected]>

Author: halfo

client/my-sites/stats/stats-download-csv/index.jsx

@@ -30,6 +30,8 @@ class StatsDownloadCsv extends Component {
 		siteId: PropTypes.number,
 		isMobile: PropTypes.bool,
 		hideIfNoData: PropTypes.bool,
+		headers: PropTypes.array,
+		rowModifierFn: PropTypes.func,
 	};
 
 	processExportData = ( data ) => {
@@ -51,7 +53,7 @@ class StatsDownloadCsv extends Component {
 
 	downloadCsv = ( event ) => {
 		event.preventDefault();
-		const { siteSlug, path, period, data } = this.props;
+		const { siteSlug, path, period, data, headers } = this.props;
 
 		const fileName =
 			[
@@ -64,7 +66,11 @@ class StatsDownloadCsv extends Component {
 
 		this.props.recordGoogleEvent( 'Stats', 'CSV Download ' + titlecase( path ) );
 
-		const csvData = this.processExportData( data )
+		const csvData = headers
+			? [ headers, ...this.processExportData( data ) ]
+			: this.processExportData( data );
+
+		const csvString = csvData
 			.map( ( row ) => {
 				if ( Array.isArray( row ) ) {
 					return row.join( ',' );
@@ -76,7 +82,7 @@ class StatsDownloadCsv extends Component {
 			} )
 			.join( '\n' );
 
-		const blob = new Blob( [ csvData ], { type: 'text/csv;charset=utf-8' } );
+		const blob = new Blob( [ csvString ], { type: 'text/csv;charset=utf-8' } );
 
 		saveAs( blob, fileName );
 	};
@@ -137,11 +143,11 @@ const connectComponent = connect(
 			return { data: ownProps.data, siteSlug, siteId, isLoading: false };
 		}
 
-		const { statType, query } = ownProps;
+		const { statType, query, rowModifierFn } = ownProps;
 		const data =
 			statType === 'statsVideoPlays'
 				? getSiteStatsNormalizedData( state, siteId, statType, query )
-				: getSiteStatsCSVData( state, siteId, statType, query );
+				: getSiteStatsCSVData( state, siteId, statType, query, rowModifierFn );
 		const isLoading = isRequestingSiteStatsForQuery( state, siteId, statType, query );
 
 		return { data, siteSlug, siteId, isLoading };

client/my-sites/stats/stats-email-summary/index.jsx

@@ -6,10 +6,14 @@ import { useMemo, useEffect } from 'react';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
 import NavigationHeader from 'calypso/components/navigation-header';
 import Main from 'calypso/my-sites/stats/components/stats-main';
+import { useShouldGateStats } from 'calypso/my-sites/stats/hooks/use-should-gate-stats';
 import { recordCurrentScreen } from 'calypso/my-sites/stats/hooks/use-stats-navigation-history';
+import DownloadCsv from 'calypso/my-sites/stats/stats-download-csv';
+import DownloadCsvUpsell from 'calypso/my-sites/stats/stats-download-csv-upsell';
 import { useSelector } from 'calypso/state';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
 import PageHeader from '../components/headers/page-header';
+import { STATS_FEATURE_DOWNLOAD_CSV } from '../constants';
 import {
 	TooltipWrapper,
 	OpensTooltipContent,
@@ -28,6 +32,7 @@ const StatsEmailSummary = ( { period, query, context } ) => {
 	const translate = useTranslate();
 	const siteId = useSelector( getSelectedSiteId );
 	const siteSlug = useSelector( ( state ) => getSelectedSiteSlug( state, siteId ) );
+	const shouldGateCsvDownloads = useShouldGateStats( STATS_FEATURE_DOWNLOAD_CSV );
 
 	// TODO: align with all summary pages.
 	const navigationItems = useMemo( () => {
@@ -79,6 +84,26 @@ const StatsEmailSummary = ( { period, query, context } ) => {
 		titleLogo: null,
 	};
 
+	const downloadCsvElement = shouldGateCsvDownloads ? (
+		<DownloadCsvUpsell siteId={ siteId } borderless />
+	) : (
+		<DownloadCsv
+			statType="statsEmailsSummary"
+			path="emails"
+			query={ query }
+			period={ period }
+			headers={ [ 'title', 'opens_rate', 'unique_clicks', 'link' ] }
+			rowModifierFn={ ( row, data ) => {
+				if ( ! Array.isArray( row ) || row.length === 0 ) {
+					return row;
+				}
+
+				const [ label, ...rest ] = row;
+				return [ label, data.opens_rate, ...rest ];
+			} }
+		/>
+	);
+
 	return (
 		<Main
 			className={ clsx( {
@@ -93,6 +118,9 @@ const StatsEmailSummary = ( { period, query, context } ) => {
 						className="stats__section-header modernized-header"
 						titleProps={ titleProps }
 						backLinkProps={ backLinkProps }
+						rightSection={
+							<div className="stats-module__header-nav-button">{ downloadCsvElement }</div>
+						}
 					/>
 				) }
 

client/state/stats/lists/selectors.js

@@ -160,21 +160,23 @@ export const getSiteStatsNormalizedData = treeSelect(
 
 /**
  * Returns an array of stats data ready for csv export
- * @param   {Object}  state    Global state tree
- * @param   {number}  siteId   Site ID
- * @param   {string}  statType Type of stat
- * @param   {Object}  query    Stats query object
- * @returns {Array}            Array of stats data ready for CSV export
+ * @template T
+ * @param   {Object}  state                                             Global state tree
+ * @param   {number}  siteId                                            Site ID
+ * @param   {string}  statType                                          Type of stat
+ * @param   {Object}  query                                             Stats query object
+ * @param   {(value: unknown[], data?: Object) => unknown[]} modifierFn Modifies the export row.
+ * @returns {Array}                                                     Array of stats data ready for CSV export
  */
-export function getSiteStatsCSVData( state, siteId, statType, query ) {
+export function getSiteStatsCSVData( state, siteId, statType, query, modifierFn = null ) {
 	const data = getSiteStatsNormalizedData( state, siteId, statType, query );
 	if ( ! data || ! Array.isArray( data ) ) {
 		return [];
 	}
 
 	return flatten(
 		map( data, ( item ) => {
-			return buildExportArray( item );
+			return buildExportArray( item, null, modifierFn );
 		} )
 	);
 }

client/state/stats/lists/test/utils.js

@@ -199,6 +199,26 @@ describe( 'utils', () => {
 			).toEqual( [ [ '"Chicken and ""Ribs""', 10, 'https://example.com/chicken' ] ] );
 		} );
 
+		test( 'should modify each row in csv by a modifier function', () => {
+			expect(
+				buildExportArray(
+					{
+						actions: [
+							{
+								type: 'link',
+								data: 'https://example.com/chicken',
+							},
+						],
+						label: 'Chicken',
+						value: 10,
+						others: [ 1, 2, 3 ],
+					},
+					null,
+					( row, data ) => [ ...row, data.others[ 2 ] ]
+				)
+			).toEqual( [ [ '"Chicken"', 10, 'https://example.com/chicken', 3 ] ] );
+		} );
+
 		test( 'should recurse child data', () => {
 			expect(
 				buildExportArray( {

client/state/stats/lists/utils.js

@@ -84,11 +84,12 @@ export function parseAvatar( avatarUrl ) {
 
 /**
  * Builds data into escaped array for CSV export
- * @param   {Object} data   Normalized stats data object
- * @param   {string} parent Label of parent
- * @returns {Array}         CSV Row
+ * @param   {Object} data                                               Normalized stats data object
+ * @param   {string} parent                                             Label of parent
+ * @param   {(value: unknown[], data?: Object) => unknown[]} modifierFn Modifies the export row.
+ * @returns {Array}                                                     CSV Row
  */
-export function buildExportArray( data, parent = null ) {
+export function buildExportArray( data, parent = null, modifierFn = null ) {
 	if ( ! data || ! data.label || ! data.value ) {
 		return [];
 	}
@@ -102,9 +103,13 @@ export function buildExportArray( data, parent = null ) {
 		exportData = [ [ '"' + escapedLabel + '"', data.value, data.actions[ 0 ].data ] ];
 	}
 
+	if ( modifierFn ) {
+		exportData = [ modifierFn( exportData[ 0 ], data ) ];
+	}
+
 	if ( data.children ) {
 		const childData = map( data.children, ( child ) => {
-			return buildExportArray( child, label );
+			return buildExportArray( child, label, modifierFn );
 		} );
 
 		exportData = exportData.concat( flatten( childData ) );