@automattic/jetpack-ai-client 0.16.4 → 0.18.0

package/src/logo-generator/hooks/use-checkout.ts

@@ -20,10 +20,11 @@ import type { Selectors } from '../store/types.js';
 const debug = debugFactory( 'ai-client:logo-generator:use-checkout' );
 
 export const useCheckout = () => {
-	const { nextTier } = useSelect( select => {
+	const { nextTier, tierPlansEnabled } = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 		return {
 			nextTier: selectors.getAiAssistantFeature().nextTier,
+			tierPlansEnabled: selectors.getAiAssistantFeature().tierPlansEnabled,
 		};
 	}, [] );
 
@@ -33,7 +34,11 @@ export const useCheckout = () => {
 	const wpcomCheckoutUrl = new URL( `https://jetpack.com/redirect/` );
 	wpcomCheckoutUrl.searchParams.set( 'source', 'jetpack-ai-yearly-tier-upgrade-nudge' );
 	wpcomCheckoutUrl.searchParams.set( 'site', getSiteFragment() as string );
-	wpcomCheckoutUrl.searchParams.set( 'path', `jetpack_ai_yearly:-q-${ nextTier?.limit }` );
+
+	wpcomCheckoutUrl.searchParams.set(
+		'path',
+		tierPlansEnabled ? `jetpack_ai_yearly:-q-${ nextTier?.limit }` : 'jetpack_ai_yearly'
+	);
 
 	/**
 	 * Open the product interstitial page

package/src/logo-generator/hooks/use-fair-usage-notice-message.tsx

@@ -0,0 +1,68 @@
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../store/index.js';
+/**
+ * Types
+ */
+import type { Selectors } from '../store/types.js';
+
+const useFairUsageNoticeMessage = () => {
+	const { usagePeriod } = useSelect( select => {
+		const selectors: Selectors = select( STORE_NAME );
+		return {
+			usagePeriod: selectors.getAiAssistantFeature().nextTier,
+		};
+	}, [] );
+	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-ai-client'
+		);
+
+		if ( ! resetDateString ) {
+			return fairUsageMessage;
+		}
+
+		// Translators: %s is the date when the requests will reset.
+		const dateMessage = __( 'Requests will reset on %s.', 'jetpack-ai-client' );
+		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-logo-generator-fair-usage-policy"
+				target="_blank"
+				rel="noreferrer"
+			/>
+		),
+	} );
+
+	return fairUsageNoticeMessageElement;
+};
+
+export default useFairUsageNoticeMessage;

package/src/logo-generator/hooks/use-logo-generator.ts

@@ -31,6 +31,7 @@ const useLogoGenerator = () => {
 		increaseAiAssistantRequestsCount,
 		addLogoToHistory,
 		setContext,
+		setIsLoadingHistory,
 	} = useDispatch( STORE_NAME );
 
 	const {
@@ -46,6 +47,8 @@ const useLogoGenerator = () => {
 		getAiAssistantFeature,
 		requireUpgrade,
 		context,
+		tierPlansEnabled,
+		isLoadingHistory,
 	} = useSelect( select => {
 		const selectors: Selectors = select( STORE_NAME );
 
@@ -62,6 +65,8 @@ const useLogoGenerator = () => {
 			getAiAssistantFeature: selectors.getAiAssistantFeature,
 			requireUpgrade: selectors.getRequireUpgrade(),
 			context: selectors.getContext(),
+			tierPlansEnabled: selectors.getTierPlansEnabled(),
+			isLoadingHistory: selectors.getIsLoadingHistory(),
 		};
 	}, [] );
 
@@ -383,6 +388,9 @@ User request:${ prompt }`;
 		getAiAssistantFeature,
 		requireUpgrade,
 		context,
+		tierPlansEnabled,
+		isLoadingHistory,
+		setIsLoadingHistory,
 	};
 };
 

package/src/logo-generator/store/actions.ts

@@ -28,6 +28,7 @@ import {
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import type {
 	AiFeatureProps,
@@ -64,6 +65,7 @@ export function mapAiFeatureResponseToAiFeatureProps(
 		nextTier: response[ 'next-tier' ],
 		tierPlansEnabled: !! response[ 'tier-plans-enabled' ],
 		costs: response.costs,
+		featuresControl: response[ 'features-control' ],
 	};
 }
 
@@ -246,6 +248,13 @@ const actions = {
 			context,
 		};
 	},
+
+	setIsLoadingHistory( isLoadingHistory: boolean ) {
+		return {
+			type: ACTION_SET_IS_LOADING_HISTORY,
+			isLoadingHistory,
+		};
+	},
 };
 
 export default actions;

package/src/logo-generator/store/constants.ts

@@ -37,6 +37,7 @@ export const ACTION_SAVE_SELECTED_LOGO = 'SAVE_SELECTED_LOGO';
 export const ACTION_SET_IS_REQUESTING_IMAGE = 'SET_IS_REQUESTING_IMAGE';
 export const ACTION_SET_IS_ENHANCING_PROMPT = 'SET_IS_ENHANCING_PROMPT';
 export const ACTION_SET_SITE_HISTORY = 'SET_SITE_HISTORY';
+export const ACTION_SET_IS_LOADING_HISTORY = 'SET_IS_LOADING_HISTORY';
 
 /**
  * Logo generator error actions

package/src/logo-generator/store/reducer.ts

@@ -27,6 +27,7 @@ import {
 	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
 	ACTION_SET_LOGO_UPDATE_ERROR,
 	ACTION_SET_CONTEXT,
+	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
 import type {
@@ -61,6 +62,7 @@ import type { SiteDetails } from '../types.js';
  * @param {Array< { url: string; description: string; mediaId?: number } >} action.history               - The logo history
  * @param {RequestError}                                                    action.error                 - The error to set
  * @param {string}                                                          action.context               - The context where the tool is being used
+ * @param {boolean}                                                         action.isLoadingHistory      - Whether the history is being loaded
  * @return {LogoGeneratorStateProp} The new state
  */
 export default function reducer(
@@ -83,6 +85,7 @@ export default function reducer(
 		history?: Array< { url: string; description: string; mediaId?: number } >;
 		error?: RequestError;
 		context?: string;
+		isLoadingHistory?: boolean;
 	}
 ) {
 	switch ( action.type ) {
@@ -381,6 +384,15 @@ export default function reducer(
 					context: action.context,
 				},
 			};
+
+		case ACTION_SET_IS_LOADING_HISTORY:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isLoadingHistory: action.isLoadingHistory,
+				},
+			};
 	}
 
 	return state;

package/src/logo-generator/store/selectors.ts

@@ -121,6 +121,10 @@ const selectors = {
 	 */
 	getRequireUpgrade( state: LogoGeneratorStateProp ): boolean {
 		const feature = state.features.aiAssistantFeature;
+
+		if ( ! feature?.tierPlansEnabled ) {
+			return feature?.requireUpgrade;
+		}
 		const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
 		const currentLimit = feature?.currentTier?.value || 0;
 		const currentUsage = feature?.usagePeriod?.requestsCount || 0;
@@ -196,6 +200,26 @@ const selectors = {
 	getContext( state: LogoGeneratorStateProp ): string {
 		return state._meta?.context ?? '';
 	},
+
+	/**
+	 * Get tier plans enabled status.
+	 *
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @return {boolean}                      The tier plans enabled status.
+	 */
+	getTierPlansEnabled( state: LogoGeneratorStateProp ): boolean {
+		return state.features.aiAssistantFeature?.tierPlansEnabled ?? false;
+	},
+
+	/**
+	 * Get tier plans enabled status.
+	 *
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @return {boolean}                      The loading logo history status.
+	 */
+	getIsLoadingHistory( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isLoadingHistory ?? false;
+	},
 };
 
 export default selectors;

package/src/logo-generator/store/types.ts

@@ -88,6 +88,14 @@ export type TierValueProp =
 	| Tier750Props[ 'value' ]
 	| Tier1000Props[ 'value' ];
 
+export type FeatureControl = {
+	enabled: boolean;
+	'min-jetpack-version': string;
+	[ key: string ]: FeatureControl | boolean | string;
+};
+
+export type FeaturesControl = { [ key: string ]: FeatureControl };
+
 export type AiFeatureProps = {
 	hasFeature: boolean;
 	isOverLimit: boolean;
@@ -110,6 +118,7 @@ export type AiFeatureProps = {
 			logo: number;
 		};
 	};
+	featuresControl?: FeaturesControl;
 };
 
 // Type used in the `wordpress-com/plans` store.
@@ -143,6 +152,7 @@ export type LogoGeneratorStateProp = {
 		saveToLibraryError?: RequestError;
 		logoUpdateError?: RequestError;
 		context: string;
+		isLoadingHistory: boolean;
 	};
 	siteDetails?: SiteDetails | Record< string, never >;
 	features: {
@@ -172,6 +182,8 @@ export type Selectors = {
 	getSaveToLibraryError(): RequestError;
 	getLogoUpdateError(): RequestError;
 	getContext(): string;
+	getTierPlansEnabled(): boolean;
+	getIsLoadingHistory(): boolean;
 };
 
 /*
@@ -202,6 +214,7 @@ export type AiAssistantFeatureEndpointResponseProps = {
 			logo: number;
 		};
 	};
+	'features-control'?: FeaturesControl;
 };
 
 export type SaveLogo = ( logo: Logo ) => Promise< { mediaId: number; mediaURL: string } >;