Jetpack AI: fix first logo notice (#39705)

* set new value for unlimited constant, accept both on type definitions

* abort first logo generation if user is over fair usage limit, show notice instead of error

* add changelogs

* fix store test

---------

Co-authored-by: Douglas <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/11293473485

Upstream-Ref: Automattic/jetpack@f344dc7

CHANGELOG.md

@@ -13,6 +13,7 @@ This is an alpha version! The changes listed here are not final.
 - AI Client - Logo generator: add image styles 'auto' and 'none'. Order styles so those are on top in the dropdown selector
 
 ### Changed
+- AI Client: change plans limit to use and accept new 3000 value
 - AI Client: change upgrade copy edit and redirect URL
 - AI Client: if site details show empty or default, do not trigger a logo generation, use empty placeholders
 - AI Client: remove provision of image styles via flag prop and internal definition, take it from ai-assistant-feature payload now

build/ai-client/src/logo-generator/components/generator-modal.js

@@ -40,7 +40,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
     const requestedFeatureData = useRef(false);
     const [needsFeature, setNeedsFeature] = useState(false);
     const [needsMoreRequests, setNeedsMoreRequests] = useState(false);
-    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, site, } = useLogoGenerator();
+    const { selectedLogo, getAiAssistantFeature, generateFirstPrompt, generateLogo, setContext, tierPlansEnabled, site, requireUpgrade, } = useLogoGenerator();
     const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
     const siteId = siteDetails?.ID;
     const [logoAccepted, setLogoAccepted] = useState(false);
@@ -73,9 +73,10 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
             const hasHistory = !isLogoHistoryEmpty(String(siteId));
             const logoCost = feature?.costs?.['jetpack-ai-logo-generator']?.logo ?? DEFAULT_LOGO_COST;
             const promptCreationCost = 1;
-            const currentLimit = feature?.currentTier?.value || 0;
+            const currentLimit = feature?.currentTier?.limit || 0;
+            const currentValue = feature?.currentTier?.value || 0;
             const currentUsage = feature?.usagePeriod?.requestsCount || 0;
-            const isUnlimited = !tierPlansEnabled ? currentLimit > 0 : currentLimit === 1;
+            const isUnlimited = !tierPlansEnabled ? currentValue > 0 : currentValue === 1;
             const hasNoNextTier = !feature?.nextTier; // If there is no next tier, the user cannot upgrade.
             // The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation.
             const siteNeedsMoreRequests = !isUnlimited &&
@@ -101,6 +102,13 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
                 setIsLoadingHistory(false);
                 return;
             }
+            // if site requires an upgrade, just return and set loaders to null,
+            // prompt component will take over the situation
+            if (requireUpgrade) {
+                setLoadingState(null);
+                setIsLoadingHistory(false);
+                return;
+            }
             // If the site does not require an upgrade and has no logos stored
             // and has title and description, generate the first prompt based on the site's data.
             if (site &&
@@ -126,6 +134,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         clearDeletedMedia,
         isLogoHistoryEmpty,
         siteId,
+        requireUpgrade,
     ]);
     const handleModalOpen = useCallback(async () => {
         setContext(context);

build/ai-client/src/logo-generator/store/constants.d.ts

@@ -15,7 +15,7 @@ export declare const ENDPOINT_AI_ASSISTANT_FEATURE = "/wpcom/v2/jetpack-ai/ai-as
  * New AI Assistant feature async request
  */
 export declare const FREE_PLAN_REQUESTS_LIMIT = 20;
-export declare const UNLIMITED_PLAN_REQUESTS_LIMIT = 999999999;
+export declare const UNLIMITED_PLAN_REQUESTS_LIMIT = 3000;
 export declare const ASYNC_REQUEST_COUNTDOWN_INIT_VALUE = 3;
 export declare const NEW_ASYNC_REQUEST_TIMER_INTERVAL = 5000;
 export declare const ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN = "DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN";

build/ai-client/src/logo-generator/store/constants.js

@@ -15,7 +15,7 @@ export const ENDPOINT_AI_ASSISTANT_FEATURE = '/wpcom/v2/jetpack-ai/ai-assistant-
  * New AI Assistant feature async request
  */
 export const FREE_PLAN_REQUESTS_LIMIT = 20;
-export const UNLIMITED_PLAN_REQUESTS_LIMIT = 999999999;
+export const UNLIMITED_PLAN_REQUESTS_LIMIT = 3000;
 export const ASYNC_REQUEST_COUNTDOWN_INIT_VALUE = 3;
 export const NEW_ASYNC_REQUEST_TIMER_INTERVAL = 5000;
 export const ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN = 'DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN';

build/ai-client/src/logo-generator/store/types.d.ts

@@ -11,7 +11,7 @@ export type Plan = {
 export type UpgradeTypeProp = 'vip' | 'default';
 export type TierUnlimitedProps = {
     slug: 'ai-assistant-tier-unlimited';
-    limit: 999999999;
+    limit: 999999999 | 3000;
     value: 1;
     readableLimit: string;
 };

src/logo-generator/components/generator-modal.tsx

@@ -71,6 +71,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setContext,
 		tierPlansEnabled,
 		site,
+		requireUpgrade,
 	} = useLogoGenerator();
 	const { featureFetchError, firstLogoPromptFetchError, clearErrors } = useRequestErrors();
 	const siteId = siteDetails?.ID;
@@ -108,9 +109,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 			const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
 			const promptCreationCost = 1;
-			const currentLimit = feature?.currentTier?.value || 0;
+			const currentLimit = feature?.currentTier?.limit || 0;
+			const currentValue = feature?.currentTier?.value || 0;
 			const currentUsage = feature?.usagePeriod?.requestsCount || 0;
-			const isUnlimited = ! tierPlansEnabled ? currentLimit > 0 : currentLimit === 1;
+			const isUnlimited = ! tierPlansEnabled ? currentValue > 0 : currentValue === 1;
 			const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade.
 
 			// The user needs an upgrade immediately if they have no logos and not enough requests remaining for one prompt and one logo generation.
@@ -143,6 +145,14 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 				return;
 			}
 
+			// if site requires an upgrade, just return and set loaders to null,
+			// prompt component will take over the situation
+			if ( requireUpgrade ) {
+				setLoadingState( null );
+				setIsLoadingHistory( false );
+				return;
+			}
+
 			// If the site does not require an upgrade and has no logos stored
 			// and has title and description, generate the first prompt based on the site's data.
 			if (
@@ -168,6 +178,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		clearDeletedMedia,
 		isLogoHistoryEmpty,
 		siteId,
+		requireUpgrade,
 	] );
 
 	const handleModalOpen = useCallback( async () => {

src/logo-generator/store/constants.ts

@@ -18,7 +18,7 @@ export const ENDPOINT_AI_ASSISTANT_FEATURE = '/wpcom/v2/jetpack-ai/ai-assistant-
  * New AI Assistant feature async request
  */
 export const FREE_PLAN_REQUESTS_LIMIT = 20;
-export const UNLIMITED_PLAN_REQUESTS_LIMIT = 999999999;
+export const UNLIMITED_PLAN_REQUESTS_LIMIT = 3000;
 export const ASYNC_REQUEST_COUNTDOWN_INIT_VALUE = 3;
 export const NEW_ASYNC_REQUEST_TIMER_INTERVAL = 5000;
 export const ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN = 'DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN';

src/logo-generator/store/types.ts

@@ -14,7 +14,7 @@ export type UpgradeTypeProp = 'vip' | 'default';
 
 export type TierUnlimitedProps = {
 	slug: 'ai-assistant-tier-unlimited';
-	limit: 999999999;
+	limit: 999999999 | 3000;
 	value: 1;
 	readableLimit: string;
 };