@automattic/jetpack-ai-client 0.25.6 → 0.26.0

package/src/hooks/use-ai-checkout/index.ts

@@ -0,0 +1,65 @@
+/*
+ * External dependencies
+ */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
+import {
+	isAtomicSite,
+	isSimpleSite,
+	getSiteFragment,
+	useAutosaveAndRedirect,
+} from '@automattic/jetpack-shared-extension-utils';
+import useAiFeature from '../use-ai-feature/index.js';
+/*
+ * Types
+ */
+import type { MouseEvent } from 'react';
+
+const getWPComRedirectToURL = () => {
+	const searchParams = new URLSearchParams( window.location.search );
+	const site = getSiteFragment();
+
+	if ( isSimpleSite() && searchParams.has( 'post' ) ) {
+		// When there is an explicit post, use it as the destination
+		return `https://wordpress.com/post/${ site }/${ searchParams.get( 'post' ) }`;
+	}
+	// When there is no explicit post, or the site is not Simple, use the home page as the destination
+	return `https://wordpress.com/home/${ site }`;
+};
+
+type UseAICheckoutReturn = {
+	checkoutUrl: string;
+	autosaveAndRedirect: ( event: MouseEvent< HTMLButtonElement > ) => void;
+	isRedirecting: boolean;
+};
+
+/**
+ * The hook to get properties for AICheckout
+ *
+ * @return {UseAICheckoutReturn} - Object containing properties for AICheckout.
+ */
+export default function useAICheckout(): UseAICheckoutReturn {
+	const { nextTier, tierPlansEnabled } = useAiFeature();
+
+	const wpcomRedirectToURL = getWPComRedirectToURL();
+
+	const wpcomCheckoutUrl = getRedirectUrl( 'jetpack-ai-yearly-tier-upgrade-nudge', {
+		site: getSiteFragment() as string,
+		path: tierPlansEnabled ? `jetpack_ai_yearly:-q-${ nextTier?.limit }` : 'jetpack_ai_yearly',
+		query: `redirect_to=${ encodeURIComponent( wpcomRedirectToURL ) }`,
+	} );
+
+	const jetpackCheckoutUrl = getRedirectUrl( 'jetpack-ai-upgrade-url-for-jetpack-sites', {
+		site: getSiteFragment() as string,
+		path: 'jetpack_ai_yearly',
+	} );
+
+	const checkoutUrl = isAtomicSite() || isSimpleSite() ? wpcomCheckoutUrl : jetpackCheckoutUrl;
+
+	const { autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( checkoutUrl );
+
+	return {
+		checkoutUrl,
+		autosaveAndRedirect,
+		isRedirecting,
+	};
+}

package/src/hooks/use-ai-feature/Readme.md

@@ -0,0 +1,20 @@
+# useAiFeature()
+
+React custom hook that provides valuable data about AI requests for the site.
+
+```es6
+function UpgradePlan() {
+	const { hasFeature, count, refresh } = useAiFeature();
+	if ( ! hasFeature ) {
+		return null;
+	}
+
+	return (
+		<div>
+			{ `You have made ${ count } requests so far.` }
+			<Button>Upgrade</Button>
+			<Button onClick={ refresh}>Refresh Data!</Button>
+		</div>
+	);
+}
+```

package/src/hooks/use-ai-feature/index.ts

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import {
+	PLAN_TYPE_FREE,
+	usePlanType as getPlanType,
+} from '@automattic/jetpack-shared-extension-utils';
+import { useDispatch, useSelect } from '@wordpress/data';
+import type { WordPressPlansSelectors } from '@automattic/jetpack-shared-extension-utils/store/wordpress-com';
+
+/**
+ * Hook to get properties for AiFeature
+ * @return {object} - Object containing properties for AiFeature.
+ */
+export default function useAiFeature() {
+	const { data, loading, requestsLimit, requestsCount } = useSelect( select => {
+		const { getAiAssistantFeature, getIsRequestingAiAssistantFeature } = select(
+			'wordpress-com/plans'
+		) as WordPressPlansSelectors;
+
+		const featureData = getAiAssistantFeature();
+
+		const {
+			currentTier,
+			usagePeriod,
+			requestsCount: allTimeRequestsCount,
+			requestsLimit: freeRequestsLimit,
+		} = featureData;
+
+		const planType = getPlanType( currentTier );
+
+		const currentTierLimit = currentTier?.limit || freeRequestsLimit;
+
+		const actualRequestsCount =
+			planType === PLAN_TYPE_FREE ? allTimeRequestsCount : usagePeriod?.requestsCount;
+		const actualRequestsLimit = planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTierLimit;
+
+		return {
+			data: featureData,
+			loading: getIsRequestingAiAssistantFeature(),
+			requestsCount: actualRequestsCount,
+			requestsLimit: actualRequestsLimit,
+		};
+	}, [] );
+
+	const {
+		fetchAiAssistantFeature: loadFeatures,
+		increaseAiAssistantRequestsCount: increaseRequestsCount,
+		dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest,
+	} = useDispatch( 'wordpress-com/plans' );
+
+	return {
+		...data,
+		requestsCount,
+		requestsLimit,
+		loading,
+		error: null, // @todo: handle error at store level
+		refresh: loadFeatures,
+		increaseRequestsCount,
+		dequeueAsyncRequest,
+	};
+}

package/src/hooks/use-post-content.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { serialize } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+/**
+ * Types
+ */
+import { renderMarkdownFromHTML } from '../libs/markdown/index.js';
+import type * as BlockEditorSelectors from '@wordpress/block-editor/store/selectors.js';
+/**
+ * Internal dependencies
+ */
+
+/*
+ * Simple helper to get the post content as markdown
+ */
+const usePostContent = () => {
+	const blocks = useSelect(
+		select => ( select( 'core/block-editor' ) as typeof BlockEditorSelectors ).getBlocks(),
+		[]
+	);
+
+	return blocks?.length ? renderMarkdownFromHTML( { content: serialize( blocks ) } ) : '';
+};
+
+export default usePostContent;

package/src/hooks/use-save-to-media-library.ts

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import debugFactory from 'debug';
+/**
+ * Types
+ */
+import type { BlockEditorStore } from '../types.js';
+
+const debug = debugFactory( 'jetpack-ai-client:save-to-media-library' );
+
+type UseSaveToMediaLibraryReturn = {
+	isLoading: boolean;
+	saveToMediaLibrary: ( url: string, name: string ) => Promise< { id: string; url: string } >;
+};
+
+/**
+ * Hook to save data to media library
+ *
+ * @return {UseSaveToMediaLibraryReturn} - Object containing properties to save data to media library.
+ */
+export default function useSaveToMediaLibrary() {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const { getSettings } = useSelect(
+		select => select( 'core/block-editor' ),
+		[]
+	) as BlockEditorStore[ 'selectors' ];
+
+	const saveToMediaLibrary = (
+		url: string,
+		name: string = null
+	): Promise< { id: string; url: string } > => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const settings = getSettings() as any;
+
+		return new Promise( ( resolve, reject ) => {
+			setIsLoading( true );
+
+			debug( 'Fetching image from URL' );
+
+			fetch( url )
+				.then( response => {
+					debug( 'Transforming response to blob' );
+
+					response
+						.blob()
+						.then( ( blob: Blob ) => {
+							debug( 'Uploading blob to media library' );
+							const filesList = [];
+
+							if ( name ) {
+								filesList.push( new File( [ blob ], name ) );
+							} else {
+								filesList.push( blob );
+							}
+
+							settings.mediaUpload( {
+								allowedTypes: [ 'image' ],
+								filesList,
+								onFileChange( [ image ] ) {
+									if ( isBlobURL( image?.url ) ) {
+										return;
+									}
+
+									if ( image ) {
+										debug( 'Image uploaded to media library', image );
+										resolve( image );
+									}
+
+									setIsLoading( false );
+								},
+								onError( message ) {
+									debug( 'Error uploading image to media library:', message );
+									reject( message );
+									setIsLoading( false );
+								},
+							} );
+						} )
+						.catch( e => {
+							debug( 'Error transforming response to blob:', e?.message );
+							reject( e?.message );
+							setIsLoading( false );
+						} );
+				} )
+				.catch( e => {
+					debug( 'Error fetching image from URL:', e?.message );
+					reject( e?.message );
+					setIsLoading( false );
+				} );
+		} );
+	};
+
+	return {
+		isLoading,
+		saveToMediaLibrary,
+	};
+}

package/src/index.ts

@@ -10,12 +10,15 @@ export { default as transcribeAudio } from './audio-transcription/index.js';
 /*
  * Hooks
  */
+export { default as useAICheckout } from './hooks/use-ai-checkout/index.js';
+export { default as useAiFeature } from './hooks/use-ai-feature/index.js';
 export { default as useAiSuggestions, getErrorData } from './hooks/use-ai-suggestions/index.js';
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
 export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export { default as useImageGenerator } from './hooks/use-image-generator/index.js';
+export { default as usePostContent } from './hooks/use-post-content.js';
 export * from './hooks/use-image-generator/constants.js';
 
 /*

package/src/logo-generator/components/upgrade-screen.tsx

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 import { EVENT_PLACEMENT_FREE_USER_SCREEN, EVENT_UPGRADE } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 /**

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

@@ -1,7 +1,7 @@
+import getRedirectUrl from '@automattic/jetpack-components/tools/jp-redirect';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement, type Element } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import getRedirectUrl from '../../../../components/tools/jp-redirect/index.js';
 /**
  * Internal dependencies
  */

package/build/components/tools/jp-redirect/index.d.ts

@@ -1,20 +0,0 @@
-import { GetRedirectUrlArgs } from './types.js';
-/**
- * Builds an URL using the jetpack.com/redirect/ service
- *
- * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
- *
- * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
- *
- * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
- *
- * @since 0.2.0
- * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
- * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
- *                                    This is not a complete list as any argument passed here
- *                                    will be sent to as a query parameter to the Redirect server.
- *                                    These parameters will not necessarily be passed over to the final destination URL.
- *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
- * @return {string} The redirect URL
- */
-export default function getRedirectUrl(source: string, args?: GetRedirectUrlArgs): string;

package/build/components/tools/jp-redirect/index.js

@@ -1,50 +0,0 @@
-/* global jetpack_redirects */
-/**
- * Builds an URL using the jetpack.com/redirect/ service
- *
- * If source is a simple slug, it will be sent using the source query parameter. e.g. jetpack.com/redirect/?source=slug
- *
- * If source is a full URL, starting with https://, it will be sent using the url query parameter. e.g. jetpack.com/redirect/?url=https://wordpress.com
- *
- * Note: if using full URL, query parameters and anchor must be passed in args. Any querystring of url fragment in the URL will be discarded.
- *
- * @since 0.2.0
- * @param {string}             source - The URL handler registered in the server or the full destination URL (starting with https://).
- * @param {GetRedirectUrlArgs} args   - Additional arguments to build the url.
- *                                    This is not a complete list as any argument passed here
- *                                    will be sent to as a query parameter to the Redirect server.
- *                                    These parameters will not necessarily be passed over to the final destination URL.
- *                                    If you want to add a parameter to the final destination URL, use the `query` argument.
- * @return {string} The redirect URL
- */
-export default function getRedirectUrl(source, args = {}) {
-    const queryVars = {};
-    let calypsoEnv;
-    if (typeof window !== 'undefined') {
-        calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
-    }
-    if (source.search('https://') === 0) {
-        const parsedUrl = new URL(source);
-        // discard any query and fragments.
-        source = `https://${parsedUrl.host}${parsedUrl.pathname}`;
-        queryVars.url = encodeURIComponent(source);
-    }
-    else {
-        queryVars.source = encodeURIComponent(source);
-    }
-    for (const argName in args) {
-        queryVars[argName] = encodeURIComponent(args[argName]);
-    }
-    if (!Object.keys(queryVars).includes('site') &&
-        typeof jetpack_redirects !== 'undefined' &&
-        Object.hasOwn(jetpack_redirects, 'currentSiteRawUrl')) {
-        queryVars.site = jetpack_redirects.currentBlogID ?? jetpack_redirects.currentSiteRawUrl;
-    }
-    if (calypsoEnv) {
-        queryVars.calypso_env = calypsoEnv;
-    }
-    const queryString = Object.keys(queryVars)
-        .map(key => key + '=' + queryVars[key])
-        .join('&');
-    return `https://jetpack.com/redirect/?` + queryString;
-}

package/build/components/tools/jp-redirect/types.d.ts

@@ -1,39 +0,0 @@
-export type GetRedirectUrlArgs = {
-    /**
-     * URL of the current site. Will default to the value of
-     * jetpack_redirects.currentSiteRawUrl, if available.
-     * Used to fill in the `[site]` placeholder in the target.
-     */
-    site?: string;
-    /**
-     * Additional path to be appended to the URL.
-     * Used to fill in the `[path]` placeholder in the target.
-     */
-    path?: string;
-    /**
-     * Query parameters to be added to the final destination URL.
-     * Should be in query string format (e.g. 'key=value&foo=bar').
-     */
-    query?: string;
-    /**
-     * Anchor to be added to the URL. Must be a single string.
-     * Example: `section1`.
-     */
-    anchor?: string;
-    /**
-     * Any other custom arguments to be added to the final destination URL.
-     */
-    [key: string]: string;
-};
-export type QueryVars = {
-    url?: string;
-    site?: string;
-    source?: string;
-    calypso_env?: string;
-};
-declare global {
-    const jetpack_redirects: {
-        currentSiteRawUrl?: string;
-        currentBlogID?: string;
-    };
-}

package/build/components/tools/jp-redirect/types.js

@@ -1 +0,0 @@
-export {};