Marketplace: add useGetRelatedPlugins hook (Automattic#80749)

* Marketplace: add useGetRelatedPlugins hook

* Map the results to RelatedPlugin type

* use apiVersion instead of apiNamespace

This is needed to use wpcom-xhr-request in Rest API mode. See https://github.com/Automattic/wpcom-xhr-request/blob/3868e4371216c4d2c51366350f494f3ad59f73f2/index.js#L221

---------

Co-authored-by: Gergely Csécsey <gergely.csecsey@automattic.com>

client/data/marketplace/types.ts

@@ -94,3 +94,35 @@ export type SearchParams = {
 export type ReinstallPluginsResponse = {
 	message: string;
 };
+
+export type ESRelatedPluginsResult = {
+	fields: ESRelatedPlugin;
+};
+
+export type ESRelatedPlugin = {
+	categories: Array< string >;
+	excerpt?: string;
+	icon?: string;
+	marketplace_slug?: string;
+	product_slug?: string;
+	slug?: string;
+	title?: string;
+	variations: {
+		monthly: { product_slug?: string; product_id?: number };
+		yearly: { product_slug?: string; product_id?: number };
+	};
+};
+
+export type RelatedPlugin = {
+	categories: Array< string >;
+	excerpt?: string;
+	icon?: string;
+	marketplaceSlug?: string;
+	productSlug?: string;
+	slug?: string;
+	title?: string;
+	variations?: {
+		monthly: { product_slug?: string; product_id?: number };
+		yearly: { product_slug?: string; product_id?: number };
+	};
+};

client/data/marketplace/use-get-related-plugins.ts

@@ -0,0 +1,64 @@
+import {
+	useQuery,
+	QueryKey,
+	QueryFunction,
+	UseQueryOptions,
+	UseQueryResult,
+} from '@tanstack/react-query';
+import { getPreinstalledPremiumPluginsVariations } from 'calypso/lib/plugins/utils';
+import wpcom from 'calypso/lib/wp';
+import { BASE_STALE_TIME } from 'calypso/state/initial-state';
+import { ESRelatedPluginsResult, RelatedPlugin } from './types';
+
+const mapESDataToReatedPluginData = ( results: Array< ESRelatedPluginsResult > = [] ) => {
+	return results.map( ( result ) => {
+		const esPlugin = result.fields;
+
+		const relatedPlugin: RelatedPlugin = {
+			categories: esPlugin.categories,
+			excerpt: esPlugin.excerpt,
+			icon: esPlugin.icon,
+			marketplaceSlug: esPlugin.marketplace_slug,
+			productSlug: esPlugin.product_slug,
+			slug: esPlugin.slug,
+			title: esPlugin.title,
+		};
+
+		relatedPlugin.variations = getPreinstalledPremiumPluginsVariations( esPlugin );
+
+		return relatedPlugin;
+	} );
+};
+
+const getRelatedPluginsQueryParams = (
+	pluginSlug: string,
+	size: number
+): { queryKey: QueryKey; queryFn: QueryFunction } => {
+	const queryKey: QueryKey = [ 'related-plugins', pluginSlug, size ];
+	const queryFn = () => {
+		return wpcom.req
+			.get(
+				{
+					path: `/marketplace/${ pluginSlug }/related`,
+				},
+				{ size, apiVersion: '1.3' }
+			)
+			.then( ( { data }: { data: Array< ESRelatedPluginsResult > } ) =>
+				mapESDataToReatedPluginData( data )
+			);
+	};
+	return { queryKey, queryFn };
+};
+
+export const useGetRelatedPlugins = (
+	pluginSlug: string,
+	size = 4,
+	{ enabled = true, staleTime = BASE_STALE_TIME, refetchOnMount = true }: UseQueryOptions = {}
+): UseQueryResult => {
+	return useQuery( {
+		...getRelatedPluginsQueryParams( pluginSlug, size ),
+		enabled: enabled,
+		staleTime: staleTime,
+		refetchOnMount: refetchOnMount,
+	} );
+};