Reporting: Add preset date selector to the Payment activity widget

changelog/8734-add-date-selector

@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Changes behind a feature flag. The PR allows merchants to change the time period of stats shown in the payment activity widget.
+
+

client/components/payment-activity/hooks.ts

@@ -0,0 +1,132 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import moment from 'moment';
+
+interface DateRange {
+	/** The name of the date range preset. e.g. last_7_days */
+	preset_name: 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;
+}
+
+/**
+ * Hook to manage the selected date range and date range presets for the payment activity widget.
+ */
+export const usePaymentActivityDateRangePresets = (): {
+	selectedDateRange: DateRange;
+	setSelectedDateRange: ( dateRange: DateRange ) => void;
+	dateRangePresets: {
+		[ key: string ]: {
+			start: moment.Moment;
+			end: moment.Moment;
+			displayKey: string;
+		};
+	};
+} => {
+	const now = moment();
+	const yesterdayEndOfDay = moment()
+		.clone()
+		.subtract( 1, 'd' )
+		.set( { hour: 23, minute: 59, second: 59, millisecond: 0 } );
+	const todayEndOfDay = moment()
+		.clone()
+		.set( { hour: 23, minute: 59, second: 59, millisecond: 0 } );
+
+	const dateRangePresets: {
+		[ key: string ]: {
+			start: moment.Moment;
+			end: moment.Moment;
+			displayKey: string;
+		};
+	} = {
+		today: {
+			start: now
+				.clone()
+				.set( { hour: 0, minute: 0, second: 0, millisecond: 0 } ),
+			end: todayEndOfDay,
+			displayKey: __( 'Today', 'woocommerce-payments' ),
+		},
+		last_7_days: {
+			start: now
+				.clone()
+				.subtract( 7, 'days' )
+				.set( { hour: 0, minute: 0, second: 0, millisecond: 0 } ),
+			end: yesterdayEndOfDay,
+			displayKey: __( 'Last 7 days', 'woocommerce-payments' ),
+		},
+		last_4_weeks: {
+			start: now
+				.clone()
+				.subtract( 4, 'weeks' )
+				.set( { hour: 0, minute: 0, second: 0, millisecond: 0 } ),
+			end: yesterdayEndOfDay,
+			displayKey: __( 'Last 4 weeks', 'woocommerce-payments' ),
+		},
+		last_3_months: {
+			start: now
+				.clone()
+				.subtract( 3, 'months' )
+				.set( { hour: 0, minute: 0, second: 0, millisecond: 0 } ),
+			end: yesterdayEndOfDay,
+			displayKey: __( 'Last 3 months', 'woocommerce-payments' ),
+		},
+		last_12_months: {
+			start: now
+				.clone()
+				.subtract( 12, 'months' )
+				.set( { hour: 0, minute: 0, second: 0, millisecond: 0 } ),
+			end: yesterdayEndOfDay,
+			displayKey: __( 'Last 12 months', 'woocommerce-payments' ),
+		},
+		month_to_date: {
+			start: now.clone().startOf( 'month' ),
+			end: todayEndOfDay,
+			displayKey: __( 'Month to date', 'woocommerce-payments' ),
+		},
+		quarter_to_date: {
+			start: now.clone().startOf( 'quarter' ),
+			end: todayEndOfDay,
+			displayKey: __( 'Quarter to date', 'woocommerce-payments' ),
+		},
+		year_to_date: {
+			start: now.clone().startOf( 'year' ),
+			end: todayEndOfDay,
+			displayKey: __( 'Year to date', 'woocommerce-payments' ),
+		},
+		all_time: {
+			start: moment(
+				wcpaySettings.accountStatus.created,
+				'YYYY-MM-DD\\THH:mm:ss'
+			),
+			end: todayEndOfDay,
+			displayKey: __( 'All time', 'woocommerce-payments' ),
+		},
+	};
+
+	const defaultDateRange = {
+		preset_name: 'last_7_days',
+		date_start: dateRangePresets.last_7_days.start.format(
+			'YYYY-MM-DD\\THH:mm:ss'
+		),
+		date_end: dateRangePresets.last_7_days.end.format(
+			'YYYY-MM-DD\\THH:mm:ss'
+		),
+	};
+
+	const [ selectedDateRange, setSelectedDateRange ] = useState( {
+		preset_name: defaultDateRange.preset_name,
+		date_start: defaultDateRange.date_start,
+		date_end: defaultDateRange.date_end,
+	} );
+
+	return {
+		selectedDateRange,
+		setSelectedDateRange,
+		dateRangePresets,
+	};
+};

client/components/payment-activity/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import * as React from 'react';
+import React from 'react';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
@@ -12,27 +12,16 @@ import moment from 'moment';
  */
 
 import EmptyStateAsset from 'assets/images/payment-activity-empty-state.svg?asset';
+import InlineLabelSelect from '../inline-label-select';
 import PaymentActivityDataComponent from './payment-activity-data';
 import Survey from './survey';
-import { WcPayOverviewSurveyContextProvider } from './survey/context';
+import { recordEvent } from 'wcpay/tracks';
 import { usePaymentActivityData } from 'wcpay/data';
+import { usePaymentActivityDateRangePresets } from './hooks';
 import { useSelectedCurrency } from 'wcpay/overview/hooks';
-import type { DateRange } from './types';
+import { WcPayOverviewSurveyContextProvider } from './survey/context';
 import './style.scss';
 
-/**
- * This will be replaces in the future with a dynamic date range picker.
- */
-const getDateRange = (): DateRange => {
-	return {
-		// Subtract 7 days from the current date.
-		date_start: moment()
-			.subtract( 7, 'd' )
-			.format( 'YYYY-MM-DD\\THH:mm:ss' ),
-		date_end: moment().format( 'YYYY-MM-DD\\THH:mm:ss' ),
-	};
-};
-
 const PaymentActivityEmptyState: React.FC = () => (
 	<Card>
 		<CardHeader>
@@ -62,15 +51,40 @@ const PaymentActivityEmptyState: React.FC = () => (
 	</Card>
 );
 
+const formatDateRange = (
+	start: moment.Moment,
+	end: moment.Moment
+): string => {
+	// Today - show only today's date.
+	if ( start.isSame( end, 'day' ) ) {
+		return start.format( 'MMMM D, YYYY' );
+	}
+
+	// Different years - show year for both start and end
+	if ( ! start.isSame( end, 'year' ) ) {
+		return `${ start.format( 'MMMM D, YYYY' ) } - ${ end.format(
+			'MMMM D, YYYY'
+		) }`;
+	}
+
+	// Same year - show year only for end date.
+	return `${ start.format( 'MMMM D' ) } - ${ end.format( 'MMMM D, YYYY' ) }`;
+};
+
 const PaymentActivity: React.FC = () => {
 	const isOverviewSurveySubmitted =
 		wcpaySettings.isOverviewSurveySubmitted ?? false;
 
 	const { selectedCurrency } = useSelectedCurrency();
-
+	const {
+		selectedDateRange,
+		setSelectedDateRange,
+		dateRangePresets,
+	} = usePaymentActivityDateRangePresets();
 	const { paymentActivityData, isLoading } = usePaymentActivityData( {
 		currency: selectedCurrency ?? wcpaySettings.accountDefaultCurrency,
-		...getDateRange(),
+		date_start: selectedDateRange.date_start,
+		date_end: selectedDateRange.date_end,
 		timezone: moment( new Date() ).format( 'Z' ),
 	} );
 
@@ -83,11 +97,53 @@ const PaymentActivity: React.FC = () => {
 		return <></>;
 	}
 
+	const options = Object.keys( dateRangePresets ).map( ( presetName ) => {
+		const preset = dateRangePresets[ presetName ];
+		return {
+			key: presetName,
+			name: preset.displayKey,
+			hint: formatDateRange( preset.start, preset.end ),
+		};
+	} );
+
 	return (
 		<Card>
-			<CardHeader>
+			<CardHeader className="wcpay-payment-activity__card__header">
 				{ __( 'Your payment activity', 'woocommerce-payments' ) }
-				{ /* Filters go here */ }
+				<InlineLabelSelect
+					label="Period"
+					options={ options }
+					value={ options.find(
+						( option ) =>
+							option.key === selectedDateRange.preset_name
+					) }
+					placeholder="Select an option..."
+					onChange={ ( changes ) => {
+						const selectedItem = changes.selectedItem;
+						if ( selectedItem ) {
+							const start = dateRangePresets[
+								selectedItem.key
+							].start
+								.clone()
+								.format( 'YYYY-MM-DD\\THH:mm:ss' );
+							const end = dateRangePresets[ selectedItem.key ].end
+								.clone()
+								.format( 'YYYY-MM-DD\\THH:mm:ss' );
+							const { key: presetName } = selectedItem;
+							recordEvent(
+								'wcpay_overview_payment_activity_period_change',
+								{
+									preset_name: presetName,
+								}
+							);
+							setSelectedDateRange( {
+								date_start: start,
+								date_end: end,
+								preset_name: presetName,
+							} );
+						}
+					} }
+				/>
 			</CardHeader>
 			<CardBody className="wcpay-payment-activity__card__body">
 				<PaymentActivityDataComponent

client/components/payment-activity/style.scss

@@ -23,6 +23,28 @@
 				padding: 16px 0 19px;
 			}
 		}
+
+		&__header {
+			.wcpay-filter.components-custom-select-control {
+				.wcpay-filter.components-custom-select-control {
+					&__menu {
+						// Ensure date preset items are shown without vertical scroll.
+						max-height: fit-content;
+					}
+
+					&__item {
+						// Set alignment of columns in the date preset dropdown.
+						grid-template-columns: 10% 25% 65%;
+					}
+				}
+			}
+
+			@include breakpoint( '<660px' ) {
+				// Sets Mobile view of the payment activity widget header. Date preset dropdown is moved to a new line.
+				flex-direction: column !important;
+				gap: 16px;
+			}
+		}
 	}
 }
 

client/components/payment-activity/test/__snapshots__/index.test.tsx.snap

@@ -11,11 +11,58 @@ exports[`PaymentActivity component should render 1`] = `
       class="css-mgwsf4-View-Content em57xhy0"
     >
       <div
-        class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+        class="components-flex components-card__header components-card-header wcpay-payment-activity__card__header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Your payment activity
+        <div
+          class="wcpay-filter components-custom-select-control"
+        >
+          <button
+            aria-describedby="Currently selected: Last 7 days"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Period"
+            class="components-button wcpay-filter components-custom-select-control__button"
+            id="downshift-0-toggle-button"
+            type="button"
+          >
+            <label
+              class="wcpay-filter components-custom-select-control__label"
+              for="downshift-0-toggle-button"
+              id="downshift-0-label"
+            >
+              Period
+            </label>
+            <span
+              class="wcpay-filter components-custom-select-control__button-value"
+            >
+              Last 7 days
+            </span>
+            <svg
+              aria-hidden="true"
+              class="wcpay-filter components-custom-select-control__button-icon"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
+              />
+            </svg>
+          </button>
+          <ul
+            aria-hidden="true"
+            aria-labelledby="downshift-0-label"
+            class="wcpay-filter components-custom-select-control__menu"
+            id="downshift-0-menu"
+            role="listbox"
+            tabindex="-1"
+          />
+        </div>
       </div>
       <div
         class="components-card__body components-card-body wcpay-payment-activity__card__body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"

client/data/payment-activity/actions.ts

@@ -4,13 +4,19 @@
  * Internal Dependencies
  */
 import TYPES from './action-types';
-import { PaymentActivityData, PaymentActivityAction } from './types';
+import type {
+	PaymentActivityData,
+	PaymentActivityAction,
+	PaymentActivityQuery,
+} from './types';
 
 export function updatePaymentActivity(
-	data: PaymentActivityData
+	data: PaymentActivityData,
+	query: PaymentActivityQuery
 ): PaymentActivityAction {
 	return {
 		type: TYPES.SET_PAYMENT_ACTIVITY_DATA,
+		query,
 		data,
 	};
 }