@automattic/jetpack-ai-client 0.14.6 → 0.15.0

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

@@ -0,0 +1,387 @@
+/**
+ * Types & Constants
+ */
+import { DEFAULT_LOGO_COST } from '../constants.js';
+import {
+	ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+	ACTION_REQUEST_AI_ASSISTANT_FEATURE,
+	ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE,
+	ACTION_STORE_AI_ASSISTANT_FEATURE,
+	ASYNC_REQUEST_COUNTDOWN_INIT_VALUE,
+	FREE_PLAN_REQUESTS_LIMIT,
+	UNLIMITED_PLAN_REQUESTS_LIMIT,
+	ACTION_SET_TIER_PLANS_ENABLED,
+	ACTION_SET_SITE_DETAILS,
+	ACTION_SET_SELECTED_LOGO_INDEX,
+	ACTION_ADD_LOGO_TO_HISTORY,
+	ACTION_SAVE_SELECTED_LOGO,
+	ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY,
+	ACTION_SET_IS_REQUESTING_IMAGE,
+	ACTION_SET_IS_APPLYING_LOGO,
+	ACTION_SET_IS_ENHANCING_PROMPT,
+	ACTION_SET_SITE_HISTORY,
+	ACTION_SET_FEATURE_FETCH_ERROR,
+	ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR,
+	ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR,
+	ACTION_SET_LOGO_FETCH_ERROR,
+	ACTION_SET_SAVE_TO_LIBRARY_ERROR,
+	ACTION_SET_LOGO_UPDATE_ERROR,
+	ACTION_SET_CONTEXT,
+} from './constants.js';
+import INITIAL_STATE from './initial-state.js';
+import type {
+	AiFeatureStateProps,
+	LogoGeneratorStateProp,
+	RequestError,
+	TierLimitProp,
+} from './types.js';
+import type { SiteDetails } from '../types.js';
+
+/**
+ * Reducer for the Logo Generator store.
+ *
+ * @param {LogoGeneratorStateProp} state - The current state
+ * @param {object} action - The action to apply, as described by the properties below
+ * @param {string} action.type - The action type
+ * @param {AiFeatureStateProps} action.feature - The AI Assistant feature state
+ * @param {number} action.count - The number of requests to increase the counter by
+ * @param {boolean} action.requireUpgrade - Whether an upgrade is required
+ * @param {boolean} action.tierPlansEnabled - Whether tier plans are enabled
+ * @param {SiteDetails} action.siteDetails - The site details
+ * @param {number} action.selectedLogoIndex - The selected logo index
+ * @param {boolean} action.isSavingLogoToLibrary - Whether a logo is being saved to the library
+ * @param {boolean} action.isApplyingLogo - Whether a logo is being applied
+ * @param {object} action.logo - The logo to save, as described by the properties below
+ * @param {string} action.logo.url - The logo URL
+ * @param {string} action.logo.description - The logo description
+ * @param {number} action.mediaId - The media ID from backend
+ * @param {string} action.url - The URL to save
+ * @param {boolean} action.isRequestingImage - Whether an image is being requested
+ * @param {boolean} action.isEnhancingPrompt - Whether a prompt enhancement is being requested
+ * @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
+ * @returns {LogoGeneratorStateProp} The new state
+ */
+export default function reducer(
+	state = INITIAL_STATE,
+	action: {
+		type: string;
+		feature?: AiFeatureStateProps;
+		count?: number;
+		requireUpgrade?: boolean;
+		tierPlansEnabled?: boolean;
+		siteDetails?: SiteDetails;
+		selectedLogoIndex?: number;
+		isSavingLogoToLibrary?: boolean;
+		isApplyingLogo?: boolean;
+		logo?: { url: string; description: string };
+		mediaId?: number;
+		url?: string;
+		isRequestingImage?: boolean;
+		isEnhancingPrompt?: boolean;
+		history?: Array< { url: string; description: string; mediaId?: number } >;
+		error?: RequestError;
+		context?: string;
+	}
+) {
+	switch ( action.type ) {
+		case ACTION_REQUEST_AI_ASSISTANT_FEATURE:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					// Reset the error state when requesting the feature.
+					featureFetchError: null,
+				},
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						...state.features.aiAssistantFeature,
+						_meta: {
+							...state?.features?.aiAssistantFeature?._meta,
+							isRequesting: true,
+							asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, // restore the countdown
+							asyncRequestTimerId: 0, // reset the timer id
+						},
+					},
+				},
+			};
+
+		case ACTION_STORE_AI_ASSISTANT_FEATURE: {
+			const defaultCosts = {
+				'jetpack-ai-logo-generator': {
+					logo: DEFAULT_LOGO_COST,
+				},
+			};
+
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						costs: defaultCosts,
+						...action.feature,
+						// re evaluate requireUpgrade as the logo generator does not allow free usage
+						requireUpgrade:
+							action.feature?.requireUpgrade || action.feature?.currentTier?.value === 0,
+						_meta: {
+							...state?.features?.aiAssistantFeature?._meta,
+							isRequesting: false,
+						},
+					},
+				},
+			};
+		}
+
+		case ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT: {
+			// Usage Period data
+			const usagePeriod = state?.features?.aiAssistantFeature?.usagePeriod || { requestsCount: 0 };
+
+			// Increase requests counters
+			const requestsCount =
+				( state?.features?.aiAssistantFeature?.requestsCount || 0 ) + ( action.count ?? 1 );
+			usagePeriod.requestsCount += action.count ?? 1;
+
+			// Current tier value
+			const currentTierValue = state?.features?.aiAssistantFeature?.currentTier?.value;
+
+			const isFreeTierPlan =
+				( typeof currentTierValue === 'undefined' &&
+					! state?.features?.aiAssistantFeature?.hasFeature ) ||
+				currentTierValue === 0;
+
+			const isUnlimitedTierPlan =
+				( typeof currentTierValue === 'undefined' &&
+					state?.features?.aiAssistantFeature?.hasFeature ) ||
+				currentTierValue === 1;
+
+			// Request limit defined with the current tier limit by default.
+			let requestsLimit: TierLimitProp =
+				state?.features?.aiAssistantFeature?.currentTier?.limit || FREE_PLAN_REQUESTS_LIMIT;
+
+			if ( isUnlimitedTierPlan ) {
+				requestsLimit = UNLIMITED_PLAN_REQUESTS_LIMIT;
+			} else if ( isFreeTierPlan ) {
+				requestsLimit = state?.features?.aiAssistantFeature?.requestsLimit as TierLimitProp;
+			}
+
+			const currentCount =
+				isUnlimitedTierPlan || isFreeTierPlan // @todo: update once tier data is available
+					? requestsCount
+					: state?.features?.aiAssistantFeature?.usagePeriod?.requestsCount || 0;
+
+			/**
+			 * Compute the AI Assistant Feature data optimistically,
+			 * based on the Jetpack_AI_Helper::get_ai_assistance_feature() helper.
+			 * @see _inc/lib/class-jetpack-ai-helper.php
+			 */
+			const isOverLimit = currentCount >= requestsLimit;
+
+			// highest tier holds a soft limit so requireUpgrade is false on that case (nextTier null means highest tier)
+			const requireUpgrade =
+				isFreeTierPlan || ( isOverLimit && state?.features?.aiAssistantFeature?.nextTier !== null );
+
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						...state.features.aiAssistantFeature,
+						isOverLimit,
+						requestsCount,
+						requireUpgrade,
+						usagePeriod: { ...usagePeriod },
+					},
+				},
+			};
+		}
+
+		case ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE: {
+			/*
+			 * If we require an upgrade, we are also over the limit;
+			 * The opposite is not true, we can be over the limit without
+			 * requiring an upgrade, for example when we are on the highest tier.
+			 * In this case, we don't want to set isOverLimit to false.
+			 */
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						...state.features.aiAssistantFeature,
+						requireUpgrade: action.requireUpgrade,
+						...( action.requireUpgrade ? { isOverLimit: true } : {} ),
+					},
+				},
+			};
+		}
+
+		case ACTION_SET_TIER_PLANS_ENABLED: {
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistantFeature: {
+						...state.features.aiAssistantFeature,
+						tierPlansEnabled: action.tierPlansEnabled,
+					},
+				},
+			};
+		}
+
+		case ACTION_SET_SITE_DETAILS: {
+			return {
+				...state,
+				siteDetails: action.siteDetails,
+			};
+		}
+
+		case ACTION_SET_SELECTED_LOGO_INDEX: {
+			return {
+				...state,
+				selectedLogoIndex: action.selectedLogoIndex,
+			};
+		}
+
+		case ACTION_ADD_LOGO_TO_HISTORY: {
+			const history = [ ...state.history, action.logo ];
+
+			return {
+				...state,
+				history,
+				selectedLogoIndex: history.length - 1,
+			};
+		}
+
+		case ACTION_SET_IS_SAVING_LOGO_TO_LIBRARY: {
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isSavingLogoToLibrary: action.isSavingLogoToLibrary,
+				},
+			};
+		}
+
+		case ACTION_SET_IS_APPLYING_LOGO: {
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isApplyingLogo: action.isApplyingLogo,
+				},
+			};
+		}
+
+		case ACTION_SAVE_SELECTED_LOGO: {
+			const selectedLogo = state.history?.[ state.selectedLogoIndex ];
+
+			return {
+				...state,
+				history: [
+					...state.history.slice( 0, state.selectedLogoIndex ),
+					{
+						...selectedLogo,
+						mediaId: action.mediaId,
+						url: action.url,
+					},
+					...state.history.slice( state.selectedLogoIndex + 1 ),
+				],
+			};
+		}
+
+		case ACTION_SET_IS_REQUESTING_IMAGE: {
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isRequestingImage: action.isRequestingImage,
+				},
+			};
+		}
+
+		case ACTION_SET_IS_ENHANCING_PROMPT: {
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					isEnhancingPrompt: action.isEnhancingPrompt,
+				},
+			};
+		}
+
+		case ACTION_SET_SITE_HISTORY: {
+			return {
+				...state,
+				history: action.history,
+				selectedLogoIndex: action.history?.length ? action.history.length - 1 : 0,
+			};
+		}
+
+		case ACTION_SET_FEATURE_FETCH_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					featureFetchError: action.error,
+				},
+			};
+
+		case ACTION_SET_FIRST_LOGO_PROMPT_FETCH_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					firstLogoPromptFetchError: action.error,
+				},
+			};
+
+		case ACTION_SET_ENHANCE_PROMPT_FETCH_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					enhancePromptFetchError: action.error,
+				},
+			};
+
+		case ACTION_SET_LOGO_FETCH_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					logoFetchError: action.error,
+				},
+			};
+
+		case ACTION_SET_SAVE_TO_LIBRARY_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					saveToLibraryError: action.error,
+				},
+			};
+
+		case ACTION_SET_LOGO_UPDATE_ERROR:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					logoUpdateError: action.error,
+				},
+			};
+
+		case ACTION_SET_CONTEXT:
+			return {
+				...state,
+				_meta: {
+					...( state._meta ?? {} ),
+					context: action.context,
+				},
+			};
+	}
+
+	return state;
+}

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

@@ -0,0 +1,201 @@
+/**
+ * Types
+ */
+import { DEFAULT_LOGO_COST } from '../constants.js';
+import type { AiFeatureProps, LogoGeneratorStateProp, Logo, RequestError } from './types.js';
+import type { SiteDetails } from '../types.js';
+
+const selectors = {
+	/**
+	 * Return the AI Assistant feature.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {Partial<AiFeatureProps>}      The AI Assistant feature data.
+	 */
+	getAiAssistantFeature( state: LogoGeneratorStateProp ): Partial< AiFeatureProps > {
+		// Clean up the _meta property.
+		const data = { ...state.features.aiAssistantFeature };
+		delete data._meta;
+
+		return data;
+	},
+
+	/**
+	 * Return the site details.
+	 * @param {LogoGeneratorStateProp} state       - The app state tree.
+	 * @returns {Partial<SiteDetails> | undefined}   The site details.
+	 */
+	getSiteDetails( state: LogoGeneratorStateProp ): Partial< SiteDetails > | undefined {
+		return state.siteDetails;
+	},
+
+	/**
+	 * Get the isRequesting flag for the AI Assistant feature.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isRequesting flag.
+	 */
+	getIsRequestingAiAssistantFeature( state: LogoGeneratorStateProp ): boolean {
+		return state.features.aiAssistantFeature?._meta?.isRequesting ?? false;
+	},
+
+	/**
+	 * Get the logos history.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {Array<Logo>}                  The logos history array.
+	 */
+	getLogos( state: LogoGeneratorStateProp ): Array< Logo > {
+		return state.history ?? [];
+	},
+
+	/**
+	 * Get the selected logo index.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {number | null}                The selected logo index.
+	 */
+	getSelectedLogoIndex( state: LogoGeneratorStateProp ): number | null {
+		return state.selectedLogoIndex ?? null;
+	},
+
+	/**
+	 * Get the selected logo.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {Logo}                         The selected logo.
+	 */
+	getSelectedLogo( state: LogoGeneratorStateProp ): Logo {
+		return state.history?.[ state.selectedLogoIndex ] ?? null;
+	},
+
+	/**
+	 * Get the isSavingToLibrary flag.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isSavingToLibrary flag.
+	 */
+	getIsSavingLogoToLibrary( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isSavingLogoToLibrary ?? false;
+	},
+
+	/**
+	 * Get the isApplyingLogo flag.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isApplyingLogo flag.
+	 */
+	getIsApplyingLogo( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isApplyingLogo ?? false;
+	},
+
+	/**
+	 * Get the isEnhancingPrompt flag.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isEnhancingPrompt flag.
+	 */
+	getIsEnhancingPrompt( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isEnhancingPrompt ?? false;
+	},
+
+	/**
+	 * Get the isRequestingImage flag.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isRequestingImage flag.
+	 */
+	getIsRequestingImage( state: LogoGeneratorStateProp ): boolean {
+		return state._meta?.isRequestingImage ?? false;
+	},
+
+	/**
+	 * Get an aggregated isBusy flag, based on the loading states of the app.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The isBusy flag.
+	 */
+	getIsBusy( state: LogoGeneratorStateProp ): boolean {
+		return (
+			selectors.getIsApplyingLogo( state ) ||
+			selectors.getIsSavingLogoToLibrary( state ) ||
+			selectors.getIsRequestingImage( state ) ||
+			selectors.getIsEnhancingPrompt( state )
+		);
+	},
+
+	/**
+	 * Get the requireUpgrade value from aiAssistantFeature
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {boolean}                      The requireUpgrade flag.
+	 */
+	getRequireUpgrade( state: LogoGeneratorStateProp ): boolean {
+		const feature = state.features.aiAssistantFeature;
+		const logoCost = feature?.costs?.[ 'jetpack-ai-logo-generator' ]?.logo ?? DEFAULT_LOGO_COST;
+		const currentLimit = feature?.currentTier?.value || 0;
+		const currentUsage = feature?.usagePeriod?.requestsCount || 0;
+		const isUnlimited = currentLimit === 1;
+		const hasNoNextTier = ! feature?.nextTier; // If there is no next tier, the user cannot upgrade.
+
+		// Add a local check on top of the feature flag, based on the current usage and logo cost.
+		return (
+			state.features.aiAssistantFeature?.requireUpgrade ||
+			( ! isUnlimited && ! hasNoNextTier && currentLimit - currentUsage < logoCost )
+		);
+	},
+
+	/**
+	 * Get the featureFetchError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The featureFetchError value.
+	 */
+	getFeatureFetchError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.featureFetchError ?? null;
+	},
+
+	/**
+	 * Get the firstLogoPromptFetchError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The firstLogoPromptFetchError value.
+	 */
+	getFirstLogoPromptFetchError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.firstLogoPromptFetchError ?? null;
+	},
+
+	/**
+	 * Get the enhancePromptFetchError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The enhancePromptFetchError value.
+	 */
+	getEnhancePromptFetchError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.enhancePromptFetchError ?? null;
+	},
+
+	/**
+	 * Get the logoFetchError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The logoFetchError value.
+	 */
+	getLogoFetchError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.logoFetchError ?? null;
+	},
+
+	/**
+	 * Get the saveToLibraryError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The saveToLibraryError value.
+	 */
+	getSaveToLibraryError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.saveToLibraryError ?? null;
+	},
+
+	/**
+	 * Get the logoUpdateError value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {RequestError}                 The logoUpdateError value.
+	 */
+	getLogoUpdateError( state: LogoGeneratorStateProp ): RequestError {
+		return state._meta?.logoUpdateError ?? null;
+	},
+
+	/**
+	 * Get the context value.
+	 * @param {LogoGeneratorStateProp} state - The app state tree.
+	 * @returns {string}                       The context value.
+	 */
+	getContext( state: LogoGeneratorStateProp ): string {
+		return state._meta?.context ?? '';
+	},
+};
+
+export default selectors;