AI Assistant: map the AI Assistant feature data (#33993)

* map response data

* introduce actions file

* rename AIFeatureProps with AiFeatureProps

* changelog

projects/plugins/jetpack/changelog/update-plan-map-ai-assistant-feature-props

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+AI Assistant: map the AI Assistant feature data

projects/plugins/jetpack/extensions/blocks/ai-assistant/hooks/use-ai-feature/index.ts

@@ -6,7 +6,7 @@ import { useEffect, useState } from '@wordpress/element';
 /**
  * Types & constants
  */
-import { AIFeatureProps } from '../../../../store/wordpress-com/types';
+import { AiFeatureProps } from '../../../../store/wordpress-com/types';
 import type { SiteAIAssistantFeatureEndpointResponseProps } from '../../../../types';
 
 const NUM_FREE_REQUESTS_LIMIT = 20;
@@ -32,7 +32,7 @@ export const AI_Assistant_Initial_State = {
 	},
 };
 
-export async function getAIFeatures(): Promise< AIFeatureProps > {
+export async function getAIFeatures(): Promise< AiFeatureProps > {
 	const response: SiteAIAssistantFeatureEndpointResponseProps = await apiFetch( {
 		path: '/wpcom/v2/jetpack-ai/ai-assistant-feature',
 	} );
@@ -58,7 +58,7 @@ export async function getAIFeatures(): Promise< AIFeatureProps > {
 }
 
 export default function useAIFeature() {
-	const [ data, setData ] = useState< AIFeatureProps >( AI_Assistant_Initial_State );
+	const [ data, setData ] = useState< AiFeatureProps >( AI_Assistant_Initial_State );
 	const [ loading, setLoading ] = useState< boolean >( false );
 	const [ error, setError ] = useState< Error >( null );
 

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/usage-bar/types.ts

@@ -1,7 +1,7 @@
 /**
  * Types
  */
-import { AIFeatureProps } from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
+import { AiFeatureProps } from '../../../../blocks/ai-assistant/hooks/use-ai-feature';
 
 export type UsageBarProps = {
 	/**
@@ -15,6 +15,6 @@ export type UsageBarProps = {
 	limitReached: boolean;
 };
 export type UsageControlProps = Pick<
-	AIFeatureProps,
+	AiFeatureProps,
 	'isOverLimit' | 'hasFeature' | 'requestsCount' | 'requestsLimit'
 >;

projects/plugins/jetpack/extensions/store/wordpress-com/actions.ts

@@ -0,0 +1,30 @@
+/**
+ * Types
+ */
+import type { Plan } from './types';
+import type { AiFeatureProps } from './types';
+
+const actions = {
+	setPlans( plans: Array< Plan > ) {
+		return {
+			type: 'SET_PLANS',
+			plans,
+		};
+	},
+
+	fetchFromAPI( url: string ) {
+		return {
+			type: 'FETCH_FROM_API',
+			url,
+		};
+	},
+
+	storeAiAssistantFeature( feature: AiFeatureProps ) {
+		return {
+			type: 'STORE_AI_ASSISTANT_FEATURE',
+			feature,
+		};
+	},
+};
+
+export default actions;

projects/plugins/jetpack/extensions/store/wordpress-com/index.ts

@@ -6,7 +6,11 @@ import { createReduxStore, register } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import type { AIFeatureProps, Plan, PlanStateProps } from '../../store/wordpress-com/types';
+import actions from './actions';
+/**
+ * Types
+ */
+import type { AiFeatureProps, PlanStateProps } from './types';
 import type { SiteAIAssistantFeatureEndpointResponseProps } from '../../types';
 
 const store = 'wordpress-com/plans';
@@ -16,28 +20,34 @@ const INITIAL_STATE: PlanStateProps = {
 	features: {},
 };
 
-const actions = {
-	setPlans( plans: Array< Plan > ) {
-		return {
-			type: 'SET_PLANS',
-			plans,
-		};
-	},
-
-	fetchFromAPI( url: string ) {
-		return {
-			type: 'FETCH_FROM_API',
-			url,
-		};
-	},
-
-	storeAiAssistantFeature( feature: AIFeatureProps ) {
-		return {
-			type: 'STORE_AI_ASSISTANT_FEATURE',
-			feature,
-		};
-	},
-};
+/**
+ * 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.
+ * @returns { AiFeatureProps }                                       The AI Assistant feature props.
+ */
+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: {
+			value: response[ 'current-tier' ]?.value || 1,
+		},
+	};
+}
 
 const wordpressPlansStore = createReduxStore( store, {
 	__experimentalUseThunks: true,
@@ -115,7 +125,9 @@ const wordpressPlansStore = createReduxStore( store, {
 				} );
 
 				// Store the feature in the store.
-				dispatch( actions.storeAiAssistantFeature( response ) );
+				dispatch(
+					actions.storeAiAssistantFeature( mapAIFeatureResponseToAiFeatureProps( response ) )
+				);
 			},
 	},
 } );

projects/plugins/jetpack/extensions/store/wordpress-com/types.ts

@@ -7,14 +7,14 @@ export type Plan = {
 export type PlanStateProps = {
 	plans: Array< Plan >;
 	features: {
-		aiAssistant?: AIFeatureProps;
+		aiAssistant?: AiFeatureProps;
 	};
 };
 
 // AI Assistant feature props
 export type UpgradeTypeProp = 'vip' | 'default';
 export type TierValueProp = 1 | 20 | 100 | 200 | 500;
-export type AIFeatureProps = {
+export type AiFeatureProps = {
 	hasFeature: boolean;
 	isOverLimit: boolean;
 	requestsCount: number;