Jetpack AI: Add renewal date to fair usage messaging (#39085)

* Move fair usage messaging logic to a dedicated helper function

* Get the next period start date and use it on the message, when available

* Changelog

* Format the date to show month name + date

* Change notice status to error to match designs

* Experiment with variable names to fix translator comment build failure

* Translator comment build error, round 2

* Fix typo on function name

* Drop noreferrer prop

projects/plugins/jetpack/changelog/update-jetpack-ai-add-renewal-date-to-fair-usage-messaging

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI: add usage policy link and renewal date to fair usage messaging.

projects/plugins/jetpack/extensions/blocks/ai-assistant/components/quota-exceeded-message/index.tsx

@@ -25,6 +25,62 @@ type QuotaExceededMessageProps = {
 };
 
 const debug = debugFactory( 'jetpack-ai-assistant:upgrade-prompt' );
+
+/**
+ * The fair usage notice message for the AI Assistant block.
+ * @return {ReactElement} the fair usage notice message, with the proper link and date.
+ */
+const useFairUsageNoticeMessage = () => {
+	const { usagePeriod } = useAiFeature();
+
+	const getFormattedUsagePeriodStartDate = planUsagePeriod => {
+		if ( ! planUsagePeriod?.nextStart ) {
+			return null;
+		}
+
+		const nextUsagePeriodStartDate = new Date( planUsagePeriod.nextStart );
+		return (
+			nextUsagePeriodStartDate.toLocaleString( 'default', { month: 'long' } ) +
+			' ' +
+			nextUsagePeriodStartDate.getDate()
+		);
+	};
+
+	const getFairUsageNoticeMessage = resetDateString => {
+		const fairUsageMessage = __(
+			"You've reached this month's request limit, per our <link>fair usage policy</link>.",
+			'jetpack'
+		);
+
+		if ( ! resetDateString ) {
+			return fairUsageMessage;
+		}
+
+		// Translators: %s is the date when the requests will reset.
+		const dateMessage = __( 'Requests will reset on %s.', 'jetpack' );
+		const formattedDateMessage = sprintf( dateMessage, resetDateString );
+
+		return `${ fairUsageMessage } ${ formattedDateMessage }`;
+	};
+
+	const nextUsagePeriodStartDateString = getFormattedUsagePeriodStartDate( usagePeriod );
+
+	// Get the proper template based on the presence of the next usage period start date.
+	const fairUsageNoticeMessage = getFairUsageNoticeMessage( nextUsagePeriodStartDateString );
+
+	const fairUsageNoticeMessageElement = createInterpolateElement( fairUsageNoticeMessage, {
+		link: (
+			<a
+				href="https://jetpack.com/redirect/?source=ai-assistant-fair-usage-policy"
+				target="_blank"
+				rel="noreferrer"
+			/>
+		),
+	} );
+
+	return fairUsageNoticeMessageElement;
+};
+
 /**
  * The default upgrade prompt for the AI Assistant block, containing the Upgrade button and linking
  * to the checkout page or the Jetpack AI interstitial page.
@@ -215,12 +271,10 @@ const VIPUpgradePrompt = ( {
  * @return {ReactElement} the Notice component with the fair usage message.
  */
 const FairUsageNotice = () => {
+	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();
 	return (
-		<Notice status="warning" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
-			{ __(
-				'You exceeded your current quota of requests. Check the usage policy for more information.',
-				'jetpack'
-			) }
+		<Notice status="error" isDismissible={ false } className="jetpack-ai-fair-usage-notice">
+			{ useFairUsageNoticeMessageElement }
 		</Notice>
 	);
 };