update use-plugin-installation and reuse it

Author: dhasilva

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/hooks/use-plugin-installation.ts

@@ -2,62 +2,138 @@
  * External dependencies
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { useDispatch } from '@wordpress/data';
 import { useState, useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import useConfigValue from '../../../../../hooks/use-config-value.ts';
 import { installAndActivatePlugin, activatePlugin } from '../../../util/plugin-management.js';
 
+type NoticeOptions = Record< string, unknown >;
+
+type NoticeConfig = {
+	message?: string;
+	options?: NoticeOptions;
+};
+
+type SuccessNotices = {
+	install?: NoticeConfig;
+	activate?: NoticeConfig;
+};
+
+type UsePluginInstallationArgs = {
+	slug: string;
+	pluginPath: string;
+	isInstalled: boolean;
+	trackEventName?: string;
+	trackEventProps?: Record< string, unknown >;
+	onSuccess?: () => void | Promise< void >;
+	successNotices?: SuccessNotices;
+	errorNotice?: NoticeConfig;
+};
+
 type PluginInstallation = {
 	isInstalling: boolean;
 	installPlugin: () => Promise< boolean >;
+	canInstallPlugins: boolean;
+	canActivatePlugins: boolean;
 };
 
 /**
  * Custom hook to handle plugin installation and activation flows.
  *
- * @param {string}  slug            - The plugin slug (e.g., 'akismet')
- * @param {string}  pluginPath      - The plugin path (e.g., 'akismet/akismet')
- * @param {boolean} isInstalled     - Whether the plugin is installed
- * @param {string}  tracksEventName - The name of the tracks event to record
- * @return {object} Plugin installation states and handlers
+ * @param {UsePluginInstallationArgs} args - Hook arguments.
+ * @return {PluginInstallation} Plugin installation states and handlers.
  */
-export const usePluginInstallation = (
-	slug: string,
-	pluginPath: string,
-	isInstalled: boolean,
-	tracksEventName: string
-): PluginInstallation => {
+export const usePluginInstallation = ( {
+	slug,
+	pluginPath,
+	isInstalled,
+	trackEventName,
+	trackEventProps = {},
+	onSuccess,
+	successNotices,
+	errorNotice,
+}: UsePluginInstallationArgs ): PluginInstallation => {
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const { tracks } = useAnalytics();
+	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
+	const canInstallPlugins = useConfigValue( 'canInstallPlugins' );
+	const canActivatePlugins = useConfigValue( 'canActivatePlugins' );
 
 	const installPlugin = useCallback( async () => {
 		setIsInstalling( true );
 
-		if ( tracksEventName ) {
-			tracks.recordEvent( tracksEventName, {
-				screen: 'block-editor',
+		if ( trackEventName ) {
+			tracks.recordEvent( trackEventName, {
 				intent: isInstalled ? 'activate-plugin' : 'install-plugin',
+				...( trackEventProps ?? {} ),
 			} );
 		}
 
 		try {
 			if ( isInstalled ) {
+				if ( ! canActivatePlugins ) {
+					return false;
+				}
+
 				await activatePlugin( pluginPath );
 			} else {
+				if ( ! canInstallPlugins ) {
+					return false;
+				}
+
 				await installAndActivatePlugin( slug );
 			}
+
+			const successNoticeConfig = isInstalled ? successNotices?.activate : successNotices?.install;
+
+			if ( successNoticeConfig?.message ) {
+				createSuccessNotice( successNoticeConfig.message, successNoticeConfig.options );
+			}
+
+			if ( onSuccess ) {
+				await onSuccess();
+			}
+
 			return true;
-		} catch {
-			// Let the component handle the error state
+		} catch ( error ) {
+			if ( errorNotice ) {
+				const noticeMessage =
+					errorNotice.message || ( error instanceof Error ? error.message : undefined );
+
+				if ( noticeMessage ) {
+					createErrorNotice( noticeMessage, errorNotice.options );
+				}
+			}
+
 			return false;
 		} finally {
 			setIsInstalling( false );
 		}
-	}, [ slug, pluginPath, isInstalled, tracks, tracksEventName ] );
+	}, [
+		trackEventName,
+		tracks,
+		isInstalled,
+		trackEventProps,
+		successNotices?.activate,
+		successNotices?.install,
+		onSuccess,
+		canActivatePlugins,
+		pluginPath,
+		canInstallPlugins,
+		slug,
+		createSuccessNotice,
+		errorNotice,
+		createErrorNotice,
+	] );
 
 	return {
 		isInstalling,
 		installPlugin,
+		canInstallPlugins,
+		canActivatePlugins,
 	};
 };

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/plugin-action-button.tsx

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useConfigValue from '../../../../../hooks/use-config-value.ts';
 import { usePluginInstallation } from '../hooks/use-plugin-installation.ts';
 
 type PluginActionButtonProps = {
@@ -27,18 +26,20 @@ const PluginActionButton = ( {
 	refreshStatus,
 	trackEventName,
 }: PluginActionButtonProps ) => {
-	const { isInstalling, installPlugin } = usePluginInstallation(
-		slug,
-		pluginFile,
-		isInstalled,
-		trackEventName
-	);
+	const trackEventProps = {
+		screen: 'block-editor',
+	};
 
-	// Permissions from consolidated Forms config (shared across editor and dashboard)
-	const canUserInstallPlugins = useConfigValue( 'canInstallPlugins' );
-	const canUserActivatePlugins = useConfigValue( 'canActivatePlugins' );
+	const { isInstalling, installPlugin, canInstallPlugins, canActivatePlugins } =
+		usePluginInstallation( {
+			slug,
+			pluginPath: pluginFile,
+			isInstalled,
+			trackEventName,
+			trackEventProps,
+		} );
 
-	const canPerformAction = isInstalled ? canUserActivatePlugins : canUserInstallPlugins;
+	const canPerformAction = isInstalled ? canActivatePlugins : canInstallPlugins;
 	const [ isReconcilingStatus, setIsReconcilingStatus ] = useState( false );
 	const isDisabled = isInstalling || isReconcilingStatus || ! canPerformAction;
 
@@ -84,10 +85,10 @@ const PluginActionButton = ( {
 	);
 
 	const getTooltipText = (): string => {
-		if ( isInstalled && ! canUserActivatePlugins ) {
+		if ( isInstalled && ! canActivatePlugins ) {
 			return tooltipTextNoActivatePerms;
 		}
-		if ( ! isInstalled && ! canUserInstallPlugins ) {
+		if ( ! isInstalled && ! canInstallPlugins ) {
 			return tooltipTextNoInstallPerms;
 		}
 		return String( isInstalled ? tooltipTextActivate : tooltipTextInstall );