@automattic/jetpack-shared-extension-utils 0.16.4 → 0.17.0

package/src/libs/index.js

@@ -0,0 +1 @@
+export * from './connection';

package/src/store/wordpress-com/actions.ts

@@ -0,0 +1,194 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+/**
+ * Types & Constants
+ */
+import {
+	ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN,
+	ACTION_DEQUEUE_ASYNC_REQUEST,
+	ACTION_ENQUEUE_ASYNC_REQUEST,
+	ACTION_FETCH_FROM_API,
+	ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+	ACTION_REQUEST_AI_ASSISTANT_FEATURE,
+	ACTION_SET_PLANS,
+	ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE,
+	ACTION_STORE_AI_ASSISTANT_FEATURE,
+	ENDPOINT_AI_ASSISTANT_FEATURE,
+	NEW_ASYNC_REQUEST_TIMER_INTERVAL,
+	ACTION_SET_TIER_PLANS_ENABLED,
+} from './constants.js';
+import type { Plan, AiFeatureProps, SiteAIAssistantFeatureEndpointResponseProps } from './types.js';
+
+/**
+ * Map the response from the `sites/$site/ai-assistant-feature`
+ * endpoint to the AI Assistant feature props.
+ * @param { SiteAIAssistantFeatureEndpointResponseProps } response - The response from the endpoint.
+ * @return { AiFeatureProps }                                       The AI Assistant feature props.
+ */
+export function mapAiFeatureResponseToAiFeatureProps(
+	response: SiteAIAssistantFeatureEndpointResponseProps
+): AiFeatureProps {
+	return {
+		hasFeature: !! response[ 'has-feature' ],
+		isOverLimit: !! response[ 'is-over-limit' ],
+		requestsCount: response[ 'requests-count' ],
+		requestsLimit: response[ 'requests-limit' ],
+		requireUpgrade: !! response[ 'site-require-upgrade' ],
+		errorMessage: response[ 'error-message' ],
+		errorCode: response[ 'error-code' ],
+		upgradeType: response[ 'upgrade-type' ],
+		usagePeriod: {
+			currentStart: response[ 'usage-period' ]?.[ 'current-start' ],
+			nextStart: response[ 'usage-period' ]?.[ 'next-start' ],
+			requestsCount: response[ 'usage-period' ]?.[ 'requests-count' ] || 0,
+		},
+		currentTier: response[ 'current-tier' ],
+		nextTier: response[ 'next-tier' ],
+		tierPlansEnabled: !! response[ 'tier-plans-enabled' ],
+		costs: response.costs,
+		featuresControl: response[ 'features-control' ],
+	};
+}
+
+const actions = {
+	setPlans( plans: Array< Plan > ) {
+		return {
+			type: ACTION_SET_PLANS,
+			plans,
+		};
+	},
+
+	fetchFromAPI( url: string ) {
+		return {
+			type: ACTION_FETCH_FROM_API,
+			url,
+		};
+	},
+
+	storeAiAssistantFeature( feature: AiFeatureProps ) {
+		return {
+			type: ACTION_STORE_AI_ASSISTANT_FEATURE,
+			feature,
+		};
+	},
+
+	/**
+	 * Thunk action to fetch the AI Assistant feature from the API.
+	 *
+	 * @return {Function} The thunk action.
+	 */
+	fetchAiAssistantFeature() {
+		return async ( { dispatch } ) => {
+			// Dispatch isFetching action.
+			dispatch( { type: ACTION_REQUEST_AI_ASSISTANT_FEATURE } );
+
+			try {
+				const response: SiteAIAssistantFeatureEndpointResponseProps = await apiFetch( {
+					path: ENDPOINT_AI_ASSISTANT_FEATURE,
+				} );
+
+				// Store the feature in the store.
+				dispatch(
+					actions.storeAiAssistantFeature( mapAiFeatureResponseToAiFeatureProps( response ) )
+				);
+			} catch ( err ) {
+				// @todo: Handle error.
+				console.error( err ); // eslint-disable-line no-console
+			}
+		};
+	},
+
+	/**
+	 * This thunk action is used to increase
+	 * the requests count for the current usage period.
+	 * @param {number} count - The number of requests to increase. Default is 1.
+	 * @return {Function}     The thunk action.
+	 */
+	increaseAiAssistantRequestsCount( count: number = 1 ) {
+		return ( { dispatch } ) => {
+			dispatch( {
+				type: ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+				count,
+			} );
+
+			// Every time the requests count is increased, decrease the countdown
+			dispatch( actions.decreaseAsyncRequestCountdownValue() );
+		};
+	},
+
+	/**
+	 * This thunk action is used to decrease
+	 * the countdown value for the new async request.
+	 * When the countdown reaches 0, enqueue a new async request.
+	 *
+	 * @return {Function} The thunk action.
+	 */
+	decreaseAsyncRequestCountdownValue() {
+		return async ( { dispatch, select } ) => {
+			dispatch( { type: ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN } );
+
+			const asyncCoundown = select.getAsyncRequestCountdownValue();
+			if ( asyncCoundown <= 0 ) {
+				dispatch( actions.enqueueAiAssistantFeatureAsyncRequest() );
+			}
+		};
+	},
+
+	/**
+	 * This thunk action is used to enqueue a new async request.
+	 * If already exist an enqueue request, clear it and enqueue a new one.
+	 *
+	 * @return {Function} The thunk action.
+	 */
+	enqueueAiAssistantFeatureAsyncRequest() {
+		return ( { dispatch } ) => {
+			// Check if there is already a timer running
+			dispatch.dequeueAiAssistantFeatureAsyncRequest();
+
+			const contdownTimerId = setTimeout( () => {
+				dispatch( actions.fetchAiAssistantFeature() );
+			}, NEW_ASYNC_REQUEST_TIMER_INTERVAL ); // backend process requires a delay to be able to see the new value
+
+			dispatch( { type: ACTION_ENQUEUE_ASYNC_REQUEST, timerId: contdownTimerId } );
+		};
+	},
+
+	/**
+	 * This thunk action is used to dequeue a new async request.
+	 * It will clear the timer if there is one,
+	 * canceling the enqueue async request.
+	 *
+	 * @return {Function} The thunk action.
+	 */
+	dequeueAiAssistantFeatureAsyncRequest() {
+		return ( { dispatch, select } ) => {
+			dispatch( { type: ACTION_DEQUEUE_ASYNC_REQUEST, timerId: 0 } );
+
+			const timerId = select.getAsyncRequestCountdownTimerId();
+			// If there is no timer, there is nothing to clear
+			if ( ! timerId ) {
+				return;
+			}
+
+			window?.clearTimeout( timerId );
+		};
+	},
+
+	setAiAssistantFeatureRequireUpgrade( requireUpgrade: boolean = true ) {
+		return {
+			type: ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE,
+			requireUpgrade,
+		};
+	},
+
+	setTierPlansEnabled( tierPlansEnabled: boolean = true ) {
+		return {
+			type: ACTION_SET_TIER_PLANS_ENABLED,
+			tierPlansEnabled,
+		};
+	},
+};
+
+export default actions;

package/src/store/wordpress-com/constants.ts

@@ -0,0 +1,31 @@
+/**
+ * Plans actions
+ */
+export const ACTION_SET_PLANS = 'SET_PLANS';
+export const ACTION_FETCH_FROM_API = 'FETCH_FROM_API';
+
+/**
+ * AI Assistant feature Actions
+ */
+export const ACTION_STORE_AI_ASSISTANT_FEATURE = 'STORE_AI_ASSISTANT_FEATURE';
+export const ACTION_REQUEST_AI_ASSISTANT_FEATURE = 'REQUEST_AI_ASSISTANT_FEATURE';
+export const ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT = 'INCREASE_AI_ASSISTANT_REQUESTS_COUNT';
+export const ACTION_SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE =
+	'SET_AI_ASSISTANT_FEATURE_REQUIRE_UPGRADE';
+export const ACTION_SET_TIER_PLANS_ENABLED = 'SET_TIER_PLANS_ENABLED';
+
+/**
+ * Endpoints
+ */
+export const ENDPOINT_AI_ASSISTANT_FEATURE = '/wpcom/v2/jetpack-ai/ai-assistant-feature';
+
+/**
+ * New AI Assistant feature async request
+ */
+export const FREE_PLAN_REQUESTS_LIMIT = 20;
+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';
+export const ACTION_ENQUEUE_ASYNC_REQUEST = 'ENQUEUE_ASYNC_COUNTDOWN_REQUEST';
+export const ACTION_DEQUEUE_ASYNC_REQUEST = 'DEQUEUE_ASYNC_COUNTDOWN_REQUEST';

package/src/store/wordpress-com/index.ts

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import actions from './actions.js';
+import reducer from './reducer.js';
+/**
+ * Types
+ */
+import type { AiFeatureProps, PlanStateProps } from './types.js';
+
+const store = 'wordpress-com/plans';
+
+export const selectors = {
+	/*
+	 * Return the plan with the given slug.
+	 *
+	 * @param {Object} state    - The Plans state tree.
+	 * @param {string} planSlug - The plan slug to find.
+	 * @return {Object}           The plan.
+	 */
+	getPlan( state: PlanStateProps, planSlug: string ) {
+		return state.plans.find( plan => plan.product_slug === planSlug );
+	},
+
+	/**
+	 * Return the AI Assistant feature.
+	 *
+	 * @param {PlanStateProps} state - The Plans state tree.
+	 * @return {AiFeatureProps}       The AI Assistant feature data.
+	 */
+	getAiAssistantFeature( state: PlanStateProps ): AiFeatureProps {
+		// Clean up the _meta property.
+		const data = { ...state.features.aiAssistant };
+		delete data._meta;
+
+		return data;
+	},
+
+	/**
+	 * Get the isRequesting flag for the AI Assistant feature.
+	 *
+	 * @param {PlanStateProps} state - The Plans state tree.
+	 * @return {boolean}              The isRequesting flag.
+	 */
+	getIsRequestingAiAssistantFeature( state: PlanStateProps ): boolean {
+		return state.features.aiAssistant?._meta?.isRequesting;
+	},
+
+	getAsyncRequestCountdownValue( state: PlanStateProps ): number {
+		return state.features.aiAssistant?._meta?.asyncRequestCountdown;
+	},
+
+	getAsyncRequestCountdownTimerId( state: PlanStateProps ): number {
+		return state.features.aiAssistant?._meta?.asyncRequestTimerId;
+	},
+};
+
+export const wordpressPlansStore = createReduxStore( store, {
+	actions,
+
+	reducer,
+
+	selectors,
+
+	controls: {
+		FETCH_FROM_API( { url } ) {
+			// We cannot use `@wordpress/api-fetch` here since it unconditionally sends
+			// the `X-WP-Nonce` header, which is disallowed by WordPress.com.
+			// (To reproduce, note that you need to call `apiFetch` with `
+			// `{ credentials: 'same-origin', mode: 'cors' }`, since its defaults are
+			// different from `fetch`'s.)
+			return fetch( url ).then( response => response.json() );
+		},
+	},
+
+	resolvers: {
+		*getPlan() {
+			const url = 'https://public-api.wordpress.com/rest/v1.5/plans';
+			const plans = yield actions.fetchFromAPI( url );
+			return actions.setPlans( plans );
+		},
+
+		getAiAssistantFeature: ( state: PlanStateProps ) => {
+			if ( state?.features?.aiAssistant ) {
+				return;
+			}
+
+			return actions.fetchAiAssistantFeature();
+		},
+	},
+} );
+
+register( wordpressPlansStore );
+
+// Types
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type OmitFirstArg< F > = F extends ( _: any, ...args: infer P ) => infer R
+	? ( ...args: P ) => R
+	: never;
+
+export type WordPressPlansSelectors = {
+	[ key in keyof typeof selectors ]: OmitFirstArg< ( typeof selectors )[ key ] >;
+};

package/src/store/wordpress-com/reducer.ts

@@ -0,0 +1,224 @@
+/**
+ * Types & Constants
+ */
+import {
+	ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN,
+	ACTION_ENQUEUE_ASYNC_REQUEST,
+	ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT,
+	ACTION_REQUEST_AI_ASSISTANT_FEATURE,
+	ACTION_SET_PLANS,
+	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,
+} from './constants.js';
+import type { PlanStateProps, TierLimitProp } from './types.js';
+
+const INITIAL_STATE: PlanStateProps = {
+	plans: [],
+	features: {
+		aiAssistant: {
+			hasFeature: true,
+			isOverLimit: false,
+			requestsCount: 0,
+			requestsLimit: FREE_PLAN_REQUESTS_LIMIT,
+			requireUpgrade: false,
+			errorMessage: '',
+			errorCode: '',
+			upgradeType: 'default',
+			currentTier: {
+				slug: 'ai-assistant-tier-free',
+				value: 0,
+				limit: 20,
+			},
+			usagePeriod: {
+				currentStart: '',
+				nextStart: '',
+				requestsCount: 0,
+			},
+			nextTier: null,
+			tierPlansEnabled: false,
+			_meta: {
+				isRequesting: false,
+				asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE,
+				asyncRequestTimerId: 0,
+			},
+		},
+	},
+};
+
+/**
+ * The reducer of the plan state
+ * @param {PlanStateProps} state  - The plan state.
+ * @param {object}         action - The action.
+ * @return {PlanStateProps} - The plan state.
+ */
+export default function reducer( state = INITIAL_STATE, action ) {
+	switch ( action.type ) {
+		case ACTION_SET_PLANS:
+			return {
+				...state,
+				plans: action.plans,
+			};
+
+		case ACTION_REQUEST_AI_ASSISTANT_FEATURE:
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						_meta: {
+							...state.features.aiAssistant._meta,
+							isRequesting: true,
+							asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, // restore the countdown
+							asyncRequestTimerId: 0, // reset the timer id
+						},
+					},
+				},
+			};
+
+		case ACTION_STORE_AI_ASSISTANT_FEATURE: {
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...action.feature,
+						_meta: {
+							...state.features.aiAssistant._meta,
+							isRequesting: false,
+						},
+					},
+				},
+			};
+		}
+
+		case ACTION_INCREASE_AI_ASSISTANT_REQUESTS_COUNT: {
+			// Usage Period data
+			const usagePeriod = state.features.aiAssistant.usagePeriod || { requestsCount: 0 };
+
+			// Increase requests counters
+			const requestsCount = state.features.aiAssistant.requestsCount + action.count;
+			usagePeriod.requestsCount += action.count;
+
+			// Current tier value
+			const currentTierValue = state.features.aiAssistant.currentTier?.value;
+
+			const isFreeTierPlan =
+				( typeof currentTierValue === 'undefined' && ! state.features.aiAssistant.hasFeature ) ||
+				currentTierValue === 0;
+
+			const isUnlimitedTierPlan =
+				( typeof currentTierValue === 'undefined' && state.features.aiAssistant.hasFeature ) ||
+				currentTierValue === 1;
+
+			// Request limit defined with the current tier limit by default.
+			let requestsLimit = state.features.aiAssistant.currentTier?.limit;
+
+			if ( isUnlimitedTierPlan ) {
+				requestsLimit = UNLIMITED_PLAN_REQUESTS_LIMIT;
+			} else if ( isFreeTierPlan ) {
+				requestsLimit = state.features.aiAssistant.requestsLimit as TierLimitProp;
+			}
+
+			const currentCount = isFreeTierPlan
+				? requestsCount // Free tier plan counts all time requests
+				: state.features.aiAssistant.usagePeriod?.requestsCount; // Unlimited tier plan counts usage period requests
+
+			/**
+			 * 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 = isOverLimit && state.features.aiAssistant.nextTier !== null;
+
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						isOverLimit,
+						requestsCount,
+						requireUpgrade,
+						usagePeriod: { ...usagePeriod },
+					},
+				},
+			};
+		}
+
+		case ACTION_DECREASE_NEW_ASYNC_REQUEST_COUNTDOWN: {
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						_meta: {
+							...state.features.aiAssistant._meta,
+							asyncRequestCountdown: state.features.aiAssistant._meta.asyncRequestCountdown - 1,
+						},
+					},
+				},
+			};
+		}
+
+		case ACTION_ENQUEUE_ASYNC_REQUEST: {
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						_meta: {
+							...state.features.aiAssistant._meta,
+							asyncRequestTimerId: action.timerId,
+						},
+					},
+				},
+			};
+		}
+
+		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,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						requireUpgrade: action.requireUpgrade,
+						...( action.requireUpgrade ? { isOverLimit: true } : {} ),
+					},
+				},
+			};
+		}
+
+		case ACTION_SET_TIER_PLANS_ENABLED: {
+			return {
+				...state,
+				features: {
+					...state.features,
+					aiAssistant: {
+						...state.features.aiAssistant,
+						tierPlansEnabled: action.tierPlansEnabled,
+					},
+				},
+			};
+		}
+	}
+
+	return state;
+}