My Jetpack: Change Jetpack AI product page limit handling (#39129)

* fix condition for determining if user is on unlimited plan. Add notice for unlimited user going over fair usage. Add usage counter for unlimited plans for current period * add changelog
Automattic · Aug 29, 2024 · 19db61b · 19db61b
1 parent 1779fe4
commit 19db61b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
@@ -68,8 +68,8 @@ export default function () {
 	} = aiAssistantFeature || {};
 
 	const isFree = currentTier?.value === 0;
-	const hasUnlimited = currentTier?.value === 1 || ( ! tierPlansEnabled && ! isFree );
-	const hasPaidTier = ! isFree && ! hasUnlimited;
+	const hasUnlimited = currentTier?.value === 1;
+	const hasPaidTier = ( ! isFree && ! hasUnlimited ) || ( hasUnlimited && ! tierPlansEnabled );
 	const shouldContactUs = ! hasUnlimited && hasPaidTier && ! nextTier && currentTier;
 	const freeRequestsLeft = isFree && 20 - allTimeRequests >= 0 ? 20 - allTimeRequests : 0;
 	const showCurrentUsage = hasPaidTier && ! isFree && usage;
@@ -100,26 +100,37 @@ export default function () {
 	const showRenewalNotice = isOverLimit && hasPaidTier;
 	const showUpgradeNotice = isOverLimit && isFree;
 
-	const currentTierValue = currentTier?.value || 0;
-	const currentUsage = usage?.[ 'requests-count' ] || 0;
+	const currentTierLimit = currentTier?.limit || 0;
+	const currentUsage = usage?.requestsCount || 0;
+
 	const tierRequestsLeft =
-		currentTierValue - currentUsage >= 0 ? currentTierValue - currentUsage : 0;
+		currentTierLimit - currentUsage >= 0 ? currentTierLimit - currentUsage : 0;
+	const requestCardNumber = tierPlansEnabled ? tierRequestsLeft : currentUsage;
+
+	const currentUsageLabel = __( 'Requests this month', 'jetpack-my-jetpack' );
+	const currentRemainingLabel = __( 'Requests for this month', 'jetpack-my-jetpack' );
 
 	const renewalNoticeTitle = __(
 		"You've reached your request limit for this month",
 		'jetpack-my-jetpack'
 	);
 	const upgradeNoticeTitle = __( "You've used all your free requests", 'jetpack-my-jetpack' );
 
-	const renewalNoticeBody = sprintf(
+	const renewalNoticeBodyInfo = sprintf(
 		// translators: %d is the number of days left in the month.
-		__(
-			'Wait for %d days to reset your limit, or upgrade now to a higher tier for additional requests and keep your work moving forward.',
-			'jetpack-my-jetpack'
-		),
+		__( 'Wait for %d days to reset your limit', 'jetpack-my-jetpack' ),
 		Math.floor( ( new Date( usage?.nextStart || null ) - new Date() ) / ( 1000 * 60 * 60 * 24 ) )
 	);
 
+	const renewalNoticeBodyTeaser = __(
+		', or upgrade now to a higher tier for additional requests and keep your work moving forward.',
+		'jetpack-my-jetpack'
+	);
+
+	const renewalNoticeBody = ! tierPlansEnabled
+		? renewalNoticeBodyInfo + '.'
+		: renewalNoticeBodyInfo + renewalNoticeBodyTeaser;
+
 	const upgradeNoticeBody = __(
 		'Reach for More with Jetpack AI! Upgrade now for additional requests and keep your momentum going.',
 		'jetpack-my-jetpack'
@@ -222,10 +233,10 @@ export default function () {
 									<AiIcon />
 									<div>
 										<div className={ styles[ 'product-interstitial__stats-card-text' ] }>
-											{ __( 'Requests for this month', 'jetpack-my-jetpack' ) }
+											{ tierPlansEnabled ? currentRemainingLabel : currentUsageLabel }
 										</div>
 										<div className={ styles[ 'product-interstitial__stats-card-value' ] }>
-											{ tierRequestsLeft }
+											{ requestCardNumber }
 										</div>
 									</div>
 								</Card>
@@ -264,11 +275,15 @@ export default function () {
 						{ showNotice && (
 							<div className={ styles[ 'product-interstitial__ai-notice' ] }>
 								<Notice
-									actions={ [
-										<Button isPrimary onClick={ upgradeClickHandler }>
-											{ showRenewalNotice ? renewalNoticeCta : upgradeNoticeCta }
-										</Button>,
-									] }
+									actions={
+										tierPlansEnabled
+											? [
+													<Button isPrimary onClick={ upgradeClickHandler }>
+														{ showRenewalNotice ? renewalNoticeCta : upgradeNoticeCta }
+													</Button>,
+											  ]
+											: {}
+									}
 									onClose={ onNoticeClose }
 									level={ showRenewalNotice ? 'warning' : 'error' }
 									title={ showRenewalNotice ? renewalNoticeTitle : upgradeNoticeTitle }

diff --git a/projects/packages/my-jetpack/changelog/change-jetpack-ai-product-page-limit-handling b/projects/packages/my-jetpack/changelog/change-jetpack-ai-product-page-limit-handling
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: show over quota notice and period usage counter for unlimited plans