Add next report date to email subscription pill.

assets/js/components/email-reporting/FrequencySelector.js

@@ -43,6 +43,8 @@ import {
 	EMAIL_REPORT_FREQUENCIES,
 } from '@/js/googlesitekit/datastore/user/constants';
 import { BREAKPOINT_SMALL, useBreakpoint } from '@/js/hooks/useBreakpoint';
+import { getLocale } from '@/js/util';
+import getNextReportDate from './getNextReportDate';
 
 export default function FrequencySelector( { isUserSubscribed, isLoading } ) {
 	const breakpoint = useBreakpoint();
@@ -82,9 +84,30 @@ export default function FrequencySelector( { isUserSubscribed, isLoading } ) {
 	const savedFrequency = useSelect( ( select ) =>
 		select( CORE_USER ).getEmailReportingSavedFrequency()
 	);
+	const referenceDate = useSelect( ( select ) =>
+		select( CORE_USER ).getReferenceDate()
+	);
 
 	const { setEmailReportingFrequency } = useDispatch( CORE_USER );
 
+	const formattedNextReportDate = useMemo( () => {
+		if ( ! savedFrequency || ! referenceDate ) {
+			return null;
+		}
+
+		const nextReportDate = getNextReportDate(
+			savedFrequency,
+			referenceDate,
+			startOfWeek
+		);
+
+		return nextReportDate.toLocaleDateString( getLocale(), {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+		} );
+	}, [ savedFrequency, referenceDate, startOfWeek ] );
+
 	const weeklyDescription = sprintf(
 		/* translators: %s: localized day-of-week name (e.g. Monday). */
 		__( 'Sent every %s', 'google-site-kit' ),
@@ -128,6 +151,37 @@ export default function FrequencySelector( { isUserSubscribed, isLoading } ) {
 		}
 	}
 
+	function renderCurrentSubscriptionPill( selected = false ) {
+		return (
+			<div
+				className={ classnames(
+					'googlesitekit-frequency-selector__current-subscription',
+					{
+						'googlesitekit-frequency-selector__current-subscription--selected':
+							selected,
+					}
+				) }
+			>
+				<Typography type={ TYPE_BODY } size={ SIZE_SMALL }>
+					{ __( 'Current subscription', 'google-site-kit' ) }
+				</Typography>
+				{ formattedNextReportDate && (
+					<Typography
+						type={ TYPE_BODY }
+						size={ SIZE_SMALL }
+						className="googlesitekit-frequency-selector__next-report"
+					>
+						{ sprintf(
+							/* translators: %s: formatted date, e.g. Jul 14, 2026. */
+							__( 'Next report: %s', 'google-site-kit' ),
+							formattedNextReportDate
+						) }
+					</Typography>
+				) }
+			</div>
+		);
+	}
+
 	if ( isLoading ) {
 		return (
 			<Fragment>
@@ -166,20 +220,9 @@ export default function FrequencySelector( { isUserSubscribed, isLoading } ) {
 							className="googlesitekit-frequency-selector__badge-cell"
 						>
 							{ reportFrequency === savedFrequency && (
-								<div
-									key={ reportFrequency }
-									className="googlesitekit-frequency-selector__current-subscription"
-								>
-									<Typography
-										type={ TYPE_BODY }
-										size={ SIZE_SMALL }
-									>
-										{ __(
-											'Current subscription',
-											'google-site-kit'
-										) }
-									</Typography>
-								</div>
+								<Fragment>
+									{ renderCurrentSubscriptionPill() }
+								</Fragment>
 							) }
 						</div>
 					) ) }
@@ -219,27 +262,8 @@ export default function FrequencySelector( { isUserSubscribed, isLoading } ) {
 							{ isUserSubscribed &&
 								savedFrequency &&
 								isMobileBreakpoint &&
-								reportFrequency === savedFrequency && (
-									<div
-										className={ classnames(
-											'googlesitekit-frequency-selector__current-subscription',
-											{
-												'googlesitekit-frequency-selector__current-subscription--selected':
-													isSelected,
-											}
-										) }
-									>
-										<Typography
-											type={ TYPE_BODY }
-											size={ SIZE_SMALL }
-										>
-											{ __(
-												'Current subscription',
-												'google-site-kit'
-											) }
-										</Typography>
-									</div>
-								) }
+								reportFrequency === savedFrequency &&
+								renderCurrentSubscriptionPill( isSelected ) }
 
 							<div className="googlesitekit-frequency-selector__content">
 								<div className="googlesitekit-frequency-selector__label">

assets/js/components/email-reporting/FrequencySelector.stories.js

@@ -41,6 +41,7 @@ export default {
 	},
 	args: {
 		isUserSubscribed: false,
+		referenceDate: '2026-07-14',
 		savedSettings: {},
 		clientSettings: {
 			frequency: 'weekly',
@@ -50,7 +51,12 @@ export default {
 	},
 };
 
-function Template( { isUserSubscribed, savedSettings, clientSettings } ) {
+function Template( {
+	isUserSubscribed,
+	savedSettings,
+	clientSettings,
+	referenceDate,
+} ) {
 	function setupRegistry( registry ) {
 		provideSiteInfo( registry, {
 			startOfWeek: savedSettings?.startOfWeek,
@@ -63,6 +69,8 @@ function Template( { isUserSubscribed, savedSettings, clientSettings } ) {
 		registry
 			.dispatch( CORE_USER )
 			.setEmailReportingSettings( clientSettings );
+
+		registry.dispatch( CORE_USER ).setReferenceDate( referenceDate );
 	}
 
 	return (
@@ -113,6 +121,7 @@ WeeklySelectedSundayStartOfTheWeek.scenario = {};
 export const PreviouslySavedFrequency = Template.bind( {} );
 PreviouslySavedFrequency.args = {
 	isUserSubscribed: true,
+	referenceDate: '2026-07-14',
 	savedSettings: {
 		frequency: 'monthly',
 	},

assets/js/components/email-reporting/FrequencySelector.test.js

@@ -27,7 +27,7 @@ import FrequencySelector from './FrequencySelector';
 
 function setupRegistry(
 	registry,
-	{ startOfWeek = 1, frequency, savedFrequency } = {}
+	{ startOfWeek = 1, frequency, savedFrequency, referenceDate } = {}
 ) {
 	provideSiteInfo( registry, { startOfWeek } );
 
@@ -44,6 +44,10 @@ function setupRegistry(
 	if ( frequency ) {
 		registry.dispatch( CORE_USER ).setEmailReportingFrequency( frequency );
 	}
+
+	if ( referenceDate ) {
+		registry.dispatch( CORE_USER ).setReferenceDate( referenceDate );
+	}
 }
 
 function renderSelector( registry, props = {} ) {
@@ -66,6 +70,7 @@ describe( 'FrequencySelector', () => {
 
 	beforeEach( () => {
 		registry = createTestRegistry();
+		global.innerWidth = 1024;
 	} );
 
 	describe( 'Story states (visual + DOM)', () => {
@@ -114,6 +119,7 @@ describe( 'FrequencySelector', () => {
 				startOfWeek: 1,
 				frequency: 'weekly',
 				savedFrequency: 'monthly',
+				referenceDate: '2026-07-14',
 			} );
 
 			const { container, containerElement, getByText } = renderSelector(
@@ -142,6 +148,9 @@ describe( 'FrequencySelector', () => {
 
 			// Check that the pill text is correct.
 			expect( getByText( 'Current subscription' ) ).toBeInTheDocument();
+			expect(
+				getByText( 'Next report: Aug 1, 2026' )
+			).toBeInTheDocument();
 
 			expect( containerElement ).toMatchSnapshot();
 		} );
@@ -151,6 +160,7 @@ describe( 'FrequencySelector', () => {
 				startOfWeek: 1,
 				frequency: 'monthly',
 				savedFrequency: 'monthly',
+				referenceDate: '2026-07-14',
 			} );
 
 			const { container, containerElement, getByText } = renderSelector(
@@ -182,9 +192,41 @@ describe( 'FrequencySelector', () => {
 				)
 			).toBe( true );
 			expect( monthlyCard.getAttribute( 'aria-checked' ) ).toBe( 'true' );
+			expect(
+				getByText( 'Next report: Aug 1, 2026' )
+			).toBeInTheDocument();
 
 			expect( containerElement ).toMatchSnapshot();
 		} );
+
+		it( 'Renders next report date in the mobile current subscription pill', () => {
+			global.innerWidth = 500;
+
+			setupRegistry( registry, {
+				startOfWeek: 1,
+				frequency: 'weekly',
+				savedFrequency: 'monthly',
+				referenceDate: '2026-07-14',
+			} );
+
+			const { container, getByText } = renderSelector( registry, {
+				isUserSubscribed: true,
+			} );
+
+			expect(
+				container.querySelector(
+					'.googlesitekit-frequency-selector__badge-row'
+				)
+			).not.toBeInTheDocument();
+			expect(
+				container.querySelector(
+					'.googlesitekit-frequency-selector__current-subscription'
+				)
+			).toBeInTheDocument();
+			expect(
+				getByText( 'Next report: Aug 1, 2026' )
+			).toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'Interactions', () => {

assets/js/components/email-reporting/getNextReportDate.test.ts

@@ -0,0 +1,89 @@
+/**
+ * Get next report date tests.
+ *
+ * Site Kit by Google, Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { getDateString } from '@/js/util';
+import getNextReportDate from './getNextReportDate';
+
+describe( 'getNextReportDate', () => {
+	describe( 'weekly frequency', () => {
+		it.each( [
+			[ '2026-07-14', 1, '2026-07-20' ], // Tuesday -> next Monday.
+			[ '2026-07-12', 0, '2026-07-19' ], // Sunday -> next Sunday.
+			[ '2026-07-18', 6, '2026-07-25' ], // Saturday -> next Saturday.
+		] )(
+			'returns %s week start %i as %s',
+			( referenceDate, weekStartDay, expectedDate ) => {
+				const nextReportDate = getNextReportDate(
+					'weekly',
+					referenceDate,
+					weekStartDay
+				);
+
+				expect( getDateString( nextReportDate ) ).toEqual(
+					expectedDate
+				);
+			}
+		);
+	} );
+
+	describe( 'monthly frequency', () => {
+		it.each( [
+			[ '2026-01-31', '2026-02-01' ],
+			[ '2026-07-14', '2026-08-01' ],
+			[ '2026-12-31', '2027-01-01' ],
+		] )(
+			'returns next month first day for %s as %s',
+			( referenceDate, expectedDate ) => {
+				const nextReportDate = getNextReportDate(
+					'monthly',
+					referenceDate,
+					1
+				);
+
+				expect( getDateString( nextReportDate ) ).toEqual(
+					expectedDate
+				);
+			}
+		);
+	} );
+
+	describe( 'quarterly frequency', () => {
+		it.each( [
+			[ '2026-01-15', '2026-04-01' ],
+			[ '2026-03-31', '2026-04-01' ],
+			[ '2026-11-20', '2027-01-01' ],
+			[ '2026-12-31', '2027-01-01' ],
+		] )(
+			'returns next quarter first day for %s as %s',
+			( referenceDate, expectedDate ) => {
+				const nextReportDate = getNextReportDate(
+					'quarterly',
+					referenceDate,
+					1
+				);
+
+				expect( getDateString( nextReportDate ) ).toEqual(
+					expectedDate
+				);
+			}
+		);
+	} );
+} );