@automattic/jetpack-shared-extension-utils 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -5,7 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.9.1] - 2023-03-07
+## [0.10.0] - 2023-03-27
+### Added
+- useModuleStatus: Add new hook to enable or disable Jetpack modules. [#29044]
+
+## [0.9.2] - 2023-03-23
+### Changed
+- Updated package dependencies.
+
+## [0.9.1] - 2023-03-08
 ### Changed
 - Updated package dependencies. [#29216]
 
@@ -177,6 +185,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.10.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.9.2...0.10.0
+[0.9.2]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.9.1...0.9.2
 [0.9.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.9.0...0.9.1
 [0.9.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.8.4...0.9.0
 [0.8.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.8.3...0.8.4

package/index.js

@@ -15,3 +15,4 @@ export {
 } from './src/plan-utils';
 export { default as isCurrentUserConnected } from './src/is-current-user-connected';
 export { default as useAnalytics } from './src/hooks/use-analytics';
+export { default as useModuleStatus } from './src/hooks/use-module-status';

package/jest-globals.js

@@ -0,0 +1,12 @@
+if ( ! window.matchMedia ) {
+	window.matchMedia = query => ( {
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: jest.fn(), // deprecated
+		removeListener: jest.fn(), // deprecated
+		addEventListener: jest.fn(),
+		removeEventListener: jest.fn(),
+		dispatchEvent: jest.fn(),
+	} );
+}

package/jest.config.js

@@ -0,0 +1,13 @@
+const baseConfig = require( 'jetpack-js-tools/jest/config.base.js' );
+
+module.exports = {
+	...baseConfig,
+	roots: [ '<rootDir>/src' ],
+	setupFiles: [ ...baseConfig.setupFiles, '<rootDir>/jest-globals.js' ],
+	transform: {
+		...baseConfig.transform,
+		'\\.[jt]sx?$': require( 'jetpack-js-tools/jest/babel-jest-config-factory.js' )(
+			require.resolve
+		),
+	},
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.9.1",
+	"version": "0.10.0",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/shared-extension-utils/#readme",
 	"bugs": {
@@ -13,10 +13,13 @@
 	},
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
-	"scripts": {},
+	"scripts": {
+		"test": "jest"
+	},
 	"dependencies": {
 		"@automattic/jetpack-analytics": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
+		"@wordpress/api-fetch": "6.23.0",
 		"@wordpress/compose": "6.5.0",
 		"@wordpress/element": "5.5.0",
 		"@wordpress/i18n": "4.28.0",
@@ -27,7 +30,18 @@
 	"devDependencies": {
 		"@babel/core": "7.20.12",
 		"@babel/preset-react": "7.18.6",
-		"react": "18.2.0"
+		"babel-jest": "29.3.1",
+		"jest": "29.3.1",
+		"jest-environment-jsdom": "29.3.1",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"jetpack-js-tools": "workspace:*",
+		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@wordpress/babel-plugin-import-jsx-pragma": "4.9.0",
+		"@testing-library/dom": "8.19.1",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/user-event": "14.4.3",
+		"@babel/plugin-transform-react-jsx": "7.20.13"
 	},
 	"exports": {
 		".": "./index.js"

package/src/hooks/use-module-status/index.js

@@ -0,0 +1,114 @@
+import apiFetch from '@wordpress/api-fetch';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { isSimpleSite } from '../../site-type-utils';
+
+/**
+ * Fetch information about all Jetpack modules.
+ *
+ * @returns {Promise<object>} Details about all available modules on the site.
+ */
+async function fetchModules() {
+	try {
+		const result = await apiFetch( {
+			path: `/jetpack/v4/module/all`,
+			method: 'GET',
+		} );
+		return result;
+	} catch ( error ) {
+		return error.message;
+	}
+}
+
+/**
+ * Update a Jetpack module's status.
+ *
+ * @param {*} name - The module's name.
+ * @param {*} toggle - New module status.
+ * @returns {Promise<boolean>} Promise that resolves to the new module status.
+ */
+async function changeModuleStatus( name, toggle ) {
+	const result = await apiFetch( {
+		path: `/jetpack/v4/module/${ name }/active`,
+		method: 'POST',
+		data: {
+			active: toggle,
+		},
+	} );
+	return result;
+}
+
+/**
+ * Determine whethher a Jetpack module is active.
+ *
+ * @param {string} name - The module's name
+ * @returns {Promise<boolean>} Whether the module is active.
+ */
+async function isJetpackModuleActive( name ) {
+	// On WordPress.com Simple sites, all modules are always active.
+	if ( isSimpleSite() ) {
+		return true;
+	}
+
+	// Fetch module info.
+	try {
+		// Check if module is active.
+		const modulesInfo = await fetchModules();
+		if ( ! modulesInfo || ! modulesInfo.hasOwnProperty( name ) ) {
+			return false;
+		}
+		return !! modulesInfo[ name ].activated;
+	} catch ( e ) {
+		return false;
+	}
+}
+
+/**
+ * Manage a Jetpack module's status (get and set).
+ *
+ * @param {string} name - The module's name.
+ * @returns {boolean} Whether the module is active.
+ */
+const useModuleStatus = name => {
+	const [ isLoadingModules, setIsLoadingModules ] = useState( Boolean( name ) );
+	const [ isChangingStatus, setIsChangingStatus ] = useState( false );
+	const [ isModuleActive, setModuleStatus ] = useState( false );
+
+	// Get module status.
+	useEffect( () => {
+		if ( ! name ) {
+			return;
+		}
+
+		setIsLoadingModules( true );
+
+		isJetpackModuleActive( name ).then( moduleStatus => {
+			setModuleStatus( moduleStatus );
+			setIsLoadingModules( false );
+		} );
+	}, [ name ] );
+
+	const changeStatus = useCallback(
+		newModuleStatus => {
+			if ( ! name || isModuleActive === newModuleStatus ) {
+				return;
+			}
+			setIsChangingStatus( true );
+			changeModuleStatus( name, newModuleStatus )
+				.then( () => {
+					setModuleStatus( newModuleStatus );
+					setIsChangingStatus( false );
+				} )
+				.catch( () => {
+					setIsChangingStatus( false );
+				} );
+		},
+		[ name, isModuleActive ]
+	);
+
+	return useMemo(
+		() => ( { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } ),
+		[ isLoadingModules, isChangingStatus, isModuleActive, changeStatus ]
+	);
+};
+
+export default useModuleStatus;

package/src/hooks/use-module-status/test/index.test.js

@@ -0,0 +1,153 @@
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { isSimpleSite } from '../../../site-type-utils';
+import useModuleStatus from '../index';
+
+jest.mock( '../../../site-type-utils' );
+
+describe( 'useModuleStatus hook', () => {
+	const originalFetch = window.fetch;
+
+	beforeEach( () => {
+		isSimpleSite.mockReset();
+		// eslint-disable-next-line jest/prefer-spy-on -- Nothing to spy on.
+		window.fetch = jest.fn();
+	} );
+
+	afterEach( () => {
+		window.fetch = originalFetch;
+	} );
+	test( 'should not try to fetch modules if no name is provided', () => {
+		const { result } = renderHook( name => useModuleStatus( name ), {
+			initialProps: '',
+		} );
+		const { changeStatus, ...otherProps } = result.current;
+
+		expect( otherProps ).toStrictEqual( {
+			isLoadingModules: false,
+			isChangingStatus: false,
+			isModuleActive: false,
+		} );
+	} );
+
+	test( 'jetpack module is active on not simple sites.', async () => {
+		isSimpleSite.mockReturnValueOnce( false );
+
+		window.fetch.mockReturnValueOnce(
+			Promise.resolve( {
+				status: 200,
+				json: () =>
+					Promise.resolve( {
+						subscriptions: {
+							activated: true,
+						},
+					} ),
+			} )
+		);
+
+		const { result } = renderHook( name => useModuleStatus( name ), {
+			initialProps: 'subscriptions',
+		} );
+
+		expect( result.current.isModuleActive ).toBe( false );
+		await waitFor( async () => expect( result.current.isModuleActive ).toBe( true ) );
+
+		expect( window.fetch ).toHaveBeenCalledWith(
+			'/jetpack/v4/module/all?_locale=user',
+			expect.anything()
+		);
+
+		const { changeStatus, ...otherProps } = result.current;
+
+		expect( otherProps ).toStrictEqual( {
+			isLoadingModules: false,
+			isChangingStatus: false,
+			isModuleActive: true,
+		} );
+	} );
+
+	test( 'jetpack module is active on simple sites.', async () => {
+		isSimpleSite.mockReturnValueOnce( true );
+
+		window.fetch.mockReturnValueOnce(
+			Promise.resolve( {
+				status: 200,
+				json: () =>
+					Promise.resolve( {
+						subscriptions: {
+							activated: false,
+						},
+					} ),
+			} )
+		);
+
+		const { result } = renderHook( name => useModuleStatus( name ), {
+			initialProps: 'subscriptions',
+		} );
+
+		expect( result.current.isModuleActive ).toBe( false );
+		await waitFor( async () => expect( result.current.isModuleActive ).toBe( true ) );
+		expect( window.fetch ).not.toHaveBeenCalled();
+
+		const { changeStatus, ...otherProps } = result.current;
+
+		expect( otherProps ).toStrictEqual( {
+			isLoadingModules: false,
+			isChangingStatus: false,
+			isModuleActive: true,
+		} );
+	} );
+
+	test( 'change jetpack module status', async () => {
+		isSimpleSite.mockReturnValueOnce( false );
+
+		window.fetch.mockReturnValueOnce(
+			Promise.resolve( {
+				status: 200,
+				json: () =>
+					Promise.resolve( {
+						subscriptions: {
+							activated: true,
+						},
+					} ),
+			} )
+		);
+
+		const { result } = renderHook( name => useModuleStatus( name ), {
+			initialProps: 'subscriptions',
+		} );
+
+		await waitFor( async () => expect( result.current.isModuleActive ).toBe( true ) );
+		expect( window.fetch ).toHaveBeenCalledWith(
+			'/jetpack/v4/module/all?_locale=user',
+			expect.anything()
+		);
+		window.fetch.mockReset();
+
+		window.fetch.mockReturnValueOnce(
+			Promise.resolve( {
+				status: 200,
+				json: () => Promise.resolve( {} ),
+			} )
+		);
+
+		act( () => {
+			result.current.changeStatus( false );
+		} );
+
+		expect( result.current.isChangingStatus ).toBe( true );
+		expect( result.current.isModuleActive ).toBe( true );
+
+		await waitFor( async () => expect( result.current.isChangingStatus ).toBe( false ) );
+		expect( result.current.isModuleActive ).toBe( false );
+
+		Promise.resolve( {
+			status: 200,
+			json: () => Promise.resolve( {} ),
+		} );
+
+		expect( window.fetch ).toHaveBeenCalledWith(
+			'/jetpack/v4/module/subscriptions/active?_locale=user',
+			expect.anything()
+		);
+	} );
+} );

package/src/plan-utils.js

@@ -22,45 +22,50 @@ export function getUpgradeUrl( { planSlug, plan, postId, postType } ) {
 	const planPathSlug = startsWith( planSlug, 'jetpack_' ) ? planSlug : get( plan, [ 'path_slug' ] );
 
 	// The full site editor has no set post type.
-	const redirect_to = ( undefined === postType
-		? () => {
-				const queryParams = new URLSearchParams( window.location.search );
-
-				return addQueryArgs(
-					window.location.protocol +
-						`//${ getSiteFragment().replace( '::', '/' ) }/wp-admin/site-editor.php`,
-					{
-						postId: queryParams.get( 'postId' ),
-						postType: queryParams.get( 'postType' ),
-						plan_upgraded: 1,
-					}
-				);
-		  }
-		: () => {
-				// The editor for CPTs has an `edit/` route fragment prefixed.
-				const postTypeEditorRoutePrefix = [ 'page', 'post' ].includes( postType ) ? '' : 'edit';
-
-				// Post-checkout: redirect back here.
-				return isSimpleSite()
-					? addQueryArgs(
-							'/' +
-								compact( [ postTypeEditorRoutePrefix, postType, getSiteFragment(), postId ] ).join(
-									'/'
-								),
-							{
-								plan_upgraded: 1,
-							}
-					  )
-					: addQueryArgs(
-							window.location.protocol +
-								`//${ getSiteFragment().replace( '::', '/' ) }/wp-admin/post.php`,
-							{
-								action: 'edit',
-								post: postId,
-								plan_upgraded: 1,
-							}
-					  );
-		  } )();
+	const redirect_to = (
+		undefined === postType
+			? () => {
+					const queryParams = new URLSearchParams( window.location.search );
+
+					return addQueryArgs(
+						window.location.protocol +
+							`//${ getSiteFragment().replace( '::', '/' ) }/wp-admin/site-editor.php`,
+						{
+							postId: queryParams.get( 'postId' ),
+							postType: queryParams.get( 'postType' ),
+							plan_upgraded: 1,
+						}
+					);
+			  }
+			: () => {
+					// The editor for CPTs has an `edit/` route fragment prefixed.
+					const postTypeEditorRoutePrefix = [ 'page', 'post' ].includes( postType ) ? '' : 'edit';
+
+					// Post-checkout: redirect back here.
+					return isSimpleSite()
+						? addQueryArgs(
+								'/' +
+									compact( [
+										postTypeEditorRoutePrefix,
+										postType,
+										getSiteFragment(),
+										postId,
+									] ).join( '/' ),
+								{
+									plan_upgraded: 1,
+								}
+						  )
+						: addQueryArgs(
+								window.location.protocol +
+									`//${ getSiteFragment().replace( '::', '/' ) }/wp-admin/post.php`,
+								{
+									action: 'edit',
+									post: postId,
+									plan_upgraded: 1,
+								}
+						  );
+			  }
+	)();
 
 	// Redirect to calypso plans page for WoC sites.
 	if ( isAtomicSite() ) {

package/src/with-has-warning-is-interactive-class-names/index.jsx

@@ -10,11 +10,12 @@ import './style.scss';
 // We thus add a new `is-interactive` class to be able to override that behavior.
 export default name =>
 	createHigherOrderComponent(
-		BlockListBlock => props => (
-			<BlockListBlock
-				{ ...props }
-				className={ props.name === name ? 'has-warning is-interactive' : props.className }
-			/>
-		),
+		BlockListBlock => props =>
+			(
+				<BlockListBlock
+					{ ...props }
+					className={ props.name === name ? 'has-warning is-interactive' : props.className }
+				/>
+			),
 		'withHasWarningIsInteractiveClassNames'
 	);