index.tsx

import config from '@automattic/calypso-config';
import page from '@automattic/calypso-router';
import { translate } from 'i18n-calypso';
import { Moment } from 'moment';
import qs from 'qs';
import { findShortcutForRange } from 'calypso/components/date-range/use-shortcuts';
import { useLocalizedMoment } from 'calypso/components/localized-moment';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import { useMomentInSite } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
import { useSelector } from 'calypso/state';
import getSiteId from 'calypso/state/sites/selectors/get-site-id';
import DateControl from '../date-control';
import { DateRangePickerShortcut } from '../date-range/shortcuts';
import type { JSX } from 'react';

type DateRange = {
	// Absent for shortcuts without a fixed range (e.g. "All time").
	chartStart?: string;
	chartEnd?: string;
	daysInRange: number;
	shortcutId?: string;
};
interface StatsDateControlProps {
	slug: string;
	// Either a raw query string or an already-parsed query object; both are accepted by `qs.parse`.
	queryParams: string | Record< string, string >;
	period: 'day' | 'week' | 'month' | 'year';
	dateRange: DateRange;
	shortcutList: DateRangePickerShortcut[];
	overlay?: JSX.Element;
	// Optional module segment used by summary pages so links resolve to
	// `/stats/{period}/{module}/{slug}` instead of the Traffic `/stats/{period}/{slug}`.
	module?: string;
	onGatedHandler: (
		events: { name: string; params?: object }[],
		event_from: string,
		stat_type: string
	) => void;
}

// Define the event name keys for tracking events
type EventNameKey =
	| 'today'
	| 'last_7_days'
	| 'last_30_days'
	| 'month_to_date'
	| 'last_12_months'
	| 'year_to_date'
	| 'last_3_years'
	| 'all_time'
	| 'custom_date_range'
	| 'apply_button'
	| 'trigger_button';

// Define the structure for tracking event names
interface EventNames {
	jetpack_odyssey: Record< EventNameKey, string >;
	calypso: Record< EventNameKey, string >;
}

// Define the tracking event names object. Hardcoding event names ensures consistency, searchability, and prevents errors per Tracks naming conventions.
const eventNames: EventNames = {
	jetpack_odyssey: {
		today: 'jetpack_odyssey_stats_date_picker_shortcut_today_clicked',
		last_7_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_7_days_clicked',
		last_30_days: 'jetpack_odyssey_stats_date_picker_shortcut_last_30_days_clicked',
		month_to_date: 'jetpack_odyssey_stats_date_picker_shortcut_month_to_date_clicked',
		last_12_months: 'jetpack_odyssey_stats_date_picker_shortcut_last_12_months_clicked',
		year_to_date: 'jetpack_odyssey_stats_date_picker_shortcut_year_to_date_clicked',
		last_3_years: 'jetpack_odyssey_stats_date_picker_shortcut_last_3_years_clicked',
		all_time: 'jetpack_odyssey_stats_date_picker_shortcut_all_time_clicked',
		custom_date_range: 'jetpack_odyssey_stats_date_picker_shortcut_custom_date_range_clicked',
		apply_button: 'jetpack_odyssey_stats_date_picker_apply_button_clicked',
		trigger_button: 'jetpack_odyssey_stats_date_picker_opened',
	},
	calypso: {
		today: 'calypso_stats_date_picker_shortcut_today_clicked',
		last_7_days: 'calypso_stats_date_picker_shortcut_last_7_days_clicked',
		last_30_days: 'calypso_stats_date_picker_shortcut_last_30_days_clicked',
		month_to_date: 'calypso_stats_date_picker_shortcut_month_to_date_clicked',
		last_12_months: 'calypso_stats_date_picker_shortcut_last_12_months_clicked',
		year_to_date: 'calypso_stats_date_picker_shortcut_year_to_date_clicked',
		last_3_years: 'calypso_stats_date_picker_shortcut_last_3_years_clicked',
		all_time: 'calypso_stats_date_picker_shortcut_all_time_clicked',
		custom_date_range: 'calypso_stats_date_picker_shortcut_custom_date_range_clicked',
		apply_button: 'calypso_stats_date_picker_apply_button_clicked',
		trigger_button: 'calypso_stats_date_picker_opened',
	},
};

const StatsDateControl = ( {
	slug,
	queryParams,
	dateRange,
	shortcutList,
	overlay,
	module,
	onGatedHandler,
}: StatsDateControlProps ) => {
	// ToDo: Consider removing period from shortcuts.
	// We could use the bestPeriodForDays() helper and keep the shortcuts
	// consistent with the custom ranges.

	const moment = useLocalizedMoment();
	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
	const siteId = useSelector( ( state ) => getSiteId( state, slug ) );
	const momentInSite = useMomentInSite( siteId );

	// Drop params that belong to the legacy summary date contract so it can't
	// coexist with the modern `chartStart`/`chartEnd` one in the same URL.
	const removeLegacyRangeParams = ( queryParamsObject: Record< string, unknown > ): void => {
		[
			'startDate',
			'endDate',
			'num',
			'summarize',
			'customRangeStart',
			'customRangeEnd',
			'shortcut',
			'navigation',
		].forEach( ( key ) => delete queryParamsObject[ key ] );
	};

	const basePath = ( period: string ) =>
		module ? `/stats/${ period }/${ module }/${ slug }` : `/stats/${ period }/${ slug }`;

	// Shared link generation helper.
	const generateNewLink = (
		period: string,
		startDate: string,
		endDate: string,
		shortcutId?: string
	) => {
		const queryParamsObject = qs.parse( queryParams );
		removeLegacyRangeParams( queryParamsObject );

		const dateRangeParams = Object.assign( {}, queryParamsObject, {
			chartStart: startDate,
			chartEnd: endDate,
		} );

		if ( shortcutId ) {
			dateRangeParams.shortcut = shortcutId;
		}

		const newRangeQuery = qs.stringify( dateRangeParams, {
			addQueryPrefix: true,
		} );
		return `${ basePath( period ) }${ newRangeQuery }`;
	};

	// "All time" keeps the legacy `num=-1&summarize=1` contract so the existing
	// query/label logic keeps working instead of a synthetic huge chart range.
	const generateAllTimeLink = () => {
		const queryParamsObject = qs.parse( queryParams );
		removeLegacyRangeParams( queryParamsObject );
		delete queryParamsObject.chartStart;
		delete queryParamsObject.chartEnd;

		const allTimeParams = Object.assign( {}, queryParamsObject, {
			startDate: momentInSite().format( 'YYYY-MM-DD' ),
			summarize: 1,
			num: -1,
		} );

		const newRangeQuery = qs.stringify( allTimeParams, {
			addQueryPrefix: true,
		} );
		return `${ basePath( 'day' ) }${ newRangeQuery }`;
	};

	// Determine period based on number of days in date range.
	const bestPeriodForDays = ( days: number ): string => {
		// 30 bars, one day is one bar
		if ( days <= 30 ) {
			return 'day';
		}
		// 25 bars, 7 days one bar
		if ( days <= 7 * 25 ) {
			return 'week';
		}
		// 25 bars, 30 days one bar
		if ( days <= 30 * 25 ) {
			return 'month';
		}
		return 'year';
	};

	// Handler for Apply button.
	const onApplyButtonHandler = (
		startDate: string,
		endDate: string,
		selectedShortcutId?: string
	) => {
		// Determine period based on date range.
		const rangeInDays = Math.abs( moment( endDate ).diff( moment( startDate ), 'days' ) );
		let period = bestPeriodForDays( rangeInDays );

		const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
		recordTracksEvent( eventNames[ event_from ][ 'apply_button' ], { blog_id: siteId } );

		const appliedShortcut = findShortcutForRange( shortcutList, {
			chartStart: startDate,
			chartEnd: endDate,
			shortcutId: selectedShortcutId,
		} );

		if ( appliedShortcut && appliedShortcut.id ) {
			localStorage.setItem(
				`jetpack_stats_stored_date_range_shortcut_id_${ siteId }`,
				appliedShortcut.id
			);
			// Remove legacy item key.
			localStorage.removeItem( 'jetpack_stats_stored_date_range_shortcut_id' );

			// Apply the period from the found shortcut.
			period = appliedShortcut.period;
		}

		// Update chart via routing.
		setTimeout(
			() => page( generateNewLink( period, startDate, endDate, selectedShortcutId ) ),
			250
		);
	};

	// handler for shortcut clicks
	const onShortcutClickHandler = (
		shortcut: DateRangePickerShortcut,
		closePopoverAndCommit: () => void,
		closePopover: () => void
	) => {
		const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';

		if ( shortcut.isGated ) {
			if ( onGatedHandler ) {
				onGatedHandler(
					[ { name: eventNames[ event_from ][ shortcut.id as EventNameKey ] } ],
					event_from,
					shortcut.statType ?? shortcut.id
				);
			}
		} else {
			recordTracksEvent( eventNames[ event_from ][ shortcut.id as EventNameKey ], {
				blog_id: siteId,
			} );
			if ( shortcut.id === 'all_time' ) {
				closePopover();
				setTimeout( () => page( generateAllTimeLink() ), 250 );
			} else if ( shortcut.id !== 'custom_date_range' ) {
				// Prevent the unclickable shortcut from being applied.
				closePopoverAndCommit();
			}
		}
	};

	return (
		<DateControl
			dateRange={ dateRange }
			onApplyButtonClick={ ( startDate: Moment, endDate: Moment, selectedShortcutId?: string ) =>
				onApplyButtonHandler(
					startDate.format( 'YYYY-MM-DD' ),
					endDate.format( 'YYYY-MM-DD' ),
					selectedShortcutId
				)
			}
			onShortcutClick={ onShortcutClickHandler }
			onDateControlClick={ () => {
				const event_from = isOdysseyStats ? 'jetpack_odyssey' : 'calypso';
				recordTracksEvent( eventNames[ event_from ][ 'trigger_button' ], { blog_id: siteId } );
			} }
			tooltip={ translate( 'Filter all data by date' ) }
			overlay={ overlay }
			shortcutList={ shortcutList }
		/>
	);
};

export { StatsDateControl as default, StatsDateControl };