@automattic/jetpack-shared-extension-utils 0.16.5 → 0.17.1

package/CHANGELOG.md

@@ -5,6 +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.17.1] - 2025-02-11
+### Changed
+- Update dependencies. [#40231]
+
+## [0.17.0] - 2025-02-05
+### Changed
+- External Media: Move the GooglePhotosMedia, OpenverseMedia, PexelsMedia to @automattic/jetpack-shared-extension-utils [#41078]
+- Updated package dependencies. [#41491] [#41577]
+
 ## [0.16.5] - 2025-01-27
 ### Changed
 - Internal updates.
@@ -523,6 +532,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.17.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.0...0.17.1
+[0.17.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.16.5...0.17.0
 [0.16.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.16.4...0.16.5
 [0.16.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.16.3...0.16.4
 [0.16.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.16.2...0.16.3

package/index.js

@@ -1,3 +1,4 @@
+export * from './src/block-icons';
 export { default as getJetpackData, JETPACK_DATA_PATH } from './src/get-jetpack-data';
 export { default as getSiteFragment } from './src/get-site-fragment';
 export * from './src/site-type-utils';
@@ -15,9 +16,12 @@ 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 useAutosaveAndRedirect } from './src/hooks/use-autosave-and-redirect';
+export * from './src/hooks/use-plan-type';
+export { default as useRefInterval } from './src/hooks/use-ref-interval';
 export { default as useModuleStatus } from './src/hooks/use-module-status';
-export { default as JetpackEditorPanelLogo } from './src/components/jetpack-editor-panel-logo';
 export { getBlockIconComponent, getBlockIconProp } from './src/get-block-icon-from-metadata';
 export { default as getJetpackBlocksVariation } from './src/get-jetpack-blocks-variation';
 export * from './src/modules-state';
 export { default as isMyJetpackAvailable } from './src/is-my-jetpack-available';
+export * from './src/libs';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.16.5",
+	"version": "0.17.1",
 	"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": {
@@ -18,16 +18,22 @@
 		"test-coverage": "pnpm run test --coverage"
 	},
 	"dependencies": {
+		"@automattic/color-studio": "4.0.0",
 		"@automattic/jetpack-analytics": "^0.1.35",
-		"@automattic/jetpack-components": "^0.65.4",
-		"@automattic/jetpack-connection": "^0.36.4",
-		"@wordpress/api-fetch": "7.16.0",
-		"@wordpress/compose": "7.16.0",
-		"@wordpress/data": "10.16.0",
-		"@wordpress/element": "6.16.0",
-		"@wordpress/i18n": "5.16.0",
-		"@wordpress/plugins": "7.16.0",
-		"@wordpress/url": "4.16.0",
+		"@automattic/jetpack-base-styles": "^0.6.42",
+		"@automattic/jetpack-components": "^0.66.1",
+		"@automattic/jetpack-connection": "^0.36.6",
+		"@wordpress/api-fetch": "7.17.0",
+		"@wordpress/block-editor": "14.12.0",
+		"@wordpress/components": "29.3.0",
+		"@wordpress/compose": "7.17.0",
+		"@wordpress/data": "10.17.0",
+		"@wordpress/element": "6.17.0",
+		"@wordpress/i18n": "5.17.0",
+		"@wordpress/plugins": "7.17.0",
+		"@wordpress/url": "4.17.0",
+		"clsx": "2.1.1",
+		"debug": "4.4.0",
 		"lodash": "4.17.21"
 	},
 	"devDependencies": {
@@ -35,10 +41,11 @@
 		"@babel/core": "7.26.0",
 		"@babel/plugin-transform-react-jsx": "7.25.9",
 		"@babel/preset-react": "7.26.3",
+		"@babel/runtime": "7.26.0",
 		"@testing-library/dom": "10.4.0",
-		"@testing-library/react": "16.0.1",
-		"@testing-library/user-event": "14.5.2",
-		"@wordpress/babel-plugin-import-jsx-pragma": "5.16.0",
+		"@testing-library/react": "16.2.0",
+		"@testing-library/user-event": "14.6.1",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.17.0",
 		"babel-jest": "29.3.1",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
@@ -47,6 +54,10 @@
 		"react-dom": "18.3.1"
 	},
 	"exports": {
-		".": "./index.js"
+		".": "./index.js",
+		"./components": "./src/components/index.js",
+		"./icons": "./src/icons.js",
+		"./store/wordpress-com": "./src/store/wordpress-com/index.ts",
+		"./store/wordpress-com/types": "./src/store/wordpress-com/types.ts"
 	}
 }

package/src/block-icons.js

@@ -0,0 +1,25 @@
+import colorStudio from '@automattic/color-studio';
+import { isAtomicSite, isSimpleSite } from './site-type-utils';
+
+/**
+ * Constants
+ */
+const PALETTE = colorStudio.colors;
+const COLOR_JETPACK = PALETTE[ 'Jetpack Green 40' ];
+
+/**
+ * Returns the icon color for Jetpack blocks.
+ *
+ * Green in the Jetpack context, otherwise black for Simple sites or Atomic sites.
+ *
+ * @return {string} HEX color for block editor icons
+ */
+export function getIconColor() {
+	if ( isAtomicSite() || isSimpleSite() ) {
+		// Return null to match core block styling
+		return null;
+	}
+
+	// Jetpack Green
+	return COLOR_JETPACK;
+}

package/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as JetpackEditorPanelLogo } from './jetpack-editor-panel-logo';
+export { Nudge } from './upgrade-nudge';

package/src/components/upgrade-nudge/index.jsx

@@ -0,0 +1,59 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import React from 'react';
+
+import './style.scss';
+
+export const Nudge = ( {
+	className,
+	description,
+	align = null,
+	title = null,
+	buttonText = null,
+	visible = true,
+	context = null,
+	checkoutUrl = null,
+	goToCheckoutPage = null,
+	isRedirecting = false,
+	showButton = true,
+	target = '_top',
+} ) => {
+	const cssClasses = clsx( className, 'jetpack-upgrade-plan-banner', {
+		'wp-block': context === 'editor-canvas',
+		'block-editor-block-list__block': context === 'editor-canvas',
+		'jetpack-upgrade-plan__hidden': ! visible,
+	} );
+
+	const redirectingText = __( 'Redirecting…', 'jetpack-shared-extension-utils' );
+
+	return (
+		<div className={ cssClasses } data-align={ align }>
+			<div className="jetpack-upgrade-plan-banner__wrapper">
+				{ title && (
+					<strong className={ clsx( 'banner-title', { [ `${ className }__title` ]: className } ) }>
+						{ title }
+					</strong>
+				) }
+				{ description && (
+					<span className={ `${ className }__description banner-description` }>
+						{ description }
+					</span>
+				) }
+				{ showButton && (
+					<Button
+						href={ isRedirecting ? null : checkoutUrl } // Only for server-side rendering, since onClick doesn't work there.
+						onClick={ goToCheckoutPage }
+						target={ target }
+						className={ clsx( 'is-primary', {
+							'jetpack-upgrade-plan__hidden': ! checkoutUrl,
+						} ) }
+						isBusy={ isRedirecting }
+					>
+						{ isRedirecting ? redirectingText : buttonText }
+					</Button>
+				) }
+			</div>
+		</div>
+	);
+};

package/src/components/upgrade-nudge/style.scss

@@ -0,0 +1,42 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@import "@automattic/color-studio/dist/color-variables";
+
+.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 14px;
+	background: $studio-black;
+	padding: 0 20px;
+	border-radius: 2px;
+	box-shadow: 0 0 1px inset $studio-white; }
+	.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-title,
+	.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-description {
+		color: $studio-white; }
+	.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__title,
+	.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__description {
+		margin-right: 10px; }
+	.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button {
+		flex-shrink: 0;
+		line-height: 1;
+		margin-left: auto;
+		height: 28px; }
+		.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary {
+			background: $studio-pink-40;
+			color: $studio-white; }
+		.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary:hover {
+			background: $studio-pink-30; }
+		.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary.is-busy {
+			background-size: 100px 100%;
+			background-image: linear-gradient(-45deg, $studio-pink-40 28%, $studio-pink-60 28%, $studio-pink-60 72%, $studio-pink-40 72%); }
+
+.jetpack-upgrade-plan-banner.block-editor-block-list__block {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.jetpack-upgrade-plan-banner.wp-block[data-align=right] .jetpack-upgrade-plan-banner__wrapper,
+.jetpack-upgrade-plan-banner.wp-block[data-align=left] .jetpack-upgrade-plan-banner__wrapper {
+	max-width: 580px;
+	width: 100%;
+}

package/src/hooks/use-autosave-and-redirect/README.md

@@ -0,0 +1,54 @@
+## useAutosaveAndRedirect hook
+
+Use this hook to implement autosave and redirect functionality that works in both the block and site editor.
+
+### Usage
+
+```es6
+/**
+ * Internal dependencies
+ */
+import useAutosaveAndRedirect from '../../shared/use-autosave-and-redirect/index';
+
+const myComponent = ( myUrl ) => {
+    const [ autosave, autosaveAndRedirect, isRedirecting ] = useAutosaveAndRedirect( myUrl );
+	return (
+		<Button href={ myUrl } onClick={ autosaveAndRedirect } isBusy={ isRedirecting }>
+			Checkout
+        </Button>
+	);
+};
+```
+
+### API
+
+`const { autosave, autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect( redirectUrl, onRedirect );`
+
+#### Arguments
+
+The hook accepts two arguments.
+
+- `redirectUrl` (`string`) - URL to redirect to after saving.
+- _(optional)_ `onRedirect` (`(string) => void`) - callback function that will
+  be run when the redirect process triggers. The URL is passed.
+
+### Return Values
+
+The hook returns an array with three items.
+
+
+- `autosave` (`(event) => void`): Callback to be used in an onClick event.
+
+Checks whether the current post/page/etc has changes to save and saves them. If
+in the site editor, entities are saved. This callback can be used when a redirect
+is not required (for example if an action is performed in a modal).
+
+- `autosaveAndRedirect` (`(event) => void`): Callback to be used in an onClick event.
+
+Redirects the user to the redirectURL, checking before whether the current
+post/page/etc has changes to save. If so, it saves them before redirecting. If
+in the site editor, entities are saved.
+
+- `isRedirecting` (`bool`): If the component is in the process of redirecting the
+  user. It may be waiting for a save to complete before redirecting. Use
+  this to set a button as busy or in a loading state.

package/src/hooks/use-autosave-and-redirect/index.js

@@ -0,0 +1,103 @@
+import { useSelect, dispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { noop } from 'lodash';
+
+/**
+ * To handle the redirection
+ * @param {string}   url                 - The redirect URL.
+ * @param {Function} callback            - The callback of the redirection.
+ * @param {boolean}  shouldOpenNewWindow - Whether to open the new window.
+ * @return {Window | null} - The open window.
+ */
+function redirect( url, callback, shouldOpenNewWindow = false ) {
+	if ( callback ) {
+		callback( url );
+	}
+
+	return shouldOpenNewWindow ? window.open( url, '_blank' ) : ( window.top.location.href = url );
+}
+
+/**
+ * Hook to get properties for AiImage
+ *
+ * @param {string}   redirectUrl - The redirect URL.
+ * @param {Function} onRedirect  - To handle the redirection.
+ * @return {object} - Object containing properties to handle autosave and redirect.
+ */
+export default function useAutosaveAndRedirect( redirectUrl, onRedirect = noop ) {
+	const [ isRedirecting, setIsRedirecting ] = useState( false );
+
+	const { isAutosaveablePost, isDirtyPost, currentPost } = useSelect( select => {
+		const editorSelector = select( 'core/editor' );
+
+		return {
+			isAutosaveablePost: editorSelector.isEditedPostAutosaveable(),
+			isDirtyPost: editorSelector.isEditedPostDirty(),
+			currentPost: editorSelector.getCurrentPost(),
+		};
+	}, [] );
+
+	const isPostEditor = Object.keys( currentPost ).length > 0;
+
+	const isWidgetEditor = useSelect( select => {
+		if ( window.wp?.customize ) {
+			return true;
+		}
+
+		return !! select( 'core/edit-widgets' );
+	} );
+
+	// Alias. Save post by dispatch.
+	const savePost = dispatch( 'core/editor' ).savePost;
+
+	// For the site editor, save entities
+	const entityRecords = useSelect( select => {
+		return select( 'core' ).__experimentalGetDirtyEntityRecords();
+	} );
+
+	// Save
+	const saveEntities = async () => {
+		for ( let i = 0; i < entityRecords.length; i++ ) {
+			// await is needed here due to the loop.
+			await dispatch( 'core' ).saveEditedEntityRecord(
+				entityRecords[ i ].kind,
+				entityRecords[ i ].name,
+				entityRecords[ i ].key
+			);
+		}
+	};
+
+	const autosave = async event => {
+		event.preventDefault();
+
+		if ( isPostEditor ) {
+			/**
+			 * If there are not unsaved values, return.
+			 * If the post is not auto-savable, return.
+			 */
+			if ( isDirtyPost && isAutosaveablePost ) {
+				await savePost( event );
+			}
+		} else {
+			// Save entities in the site editor.
+			await saveEntities( event );
+		}
+	};
+
+	const autosaveAndRedirect = async event => {
+		event.preventDefault();
+
+		// Lock re-redirecting attempts.
+		if ( isRedirecting ) {
+			return;
+		}
+
+		setIsRedirecting( true );
+
+		autosave( event ).then( () => {
+			redirect( redirectUrl, onRedirect, isWidgetEditor );
+		} );
+	};
+
+	return { autosave, autosaveAndRedirect, isRedirecting };
+}

package/src/hooks/use-plan-type/index.ts

@@ -0,0 +1,27 @@
+export const PLAN_TYPE_FREE = 'free';
+export const PLAN_TYPE_TIERED = 'tiered';
+export const PLAN_TYPE_UNLIMITED = 'unlimited';
+
+export type PlanType = typeof PLAN_TYPE_FREE | typeof PLAN_TYPE_TIERED | typeof PLAN_TYPE_UNLIMITED;
+
+/**
+ * Simple hook to get the plan type from the current tier
+ *
+ * @param {object} currentTier - the current tier from the AI Feature data
+ * @return {PlanType} the plan type
+ */
+export const usePlanType = ( currentTier ): PlanType => {
+	if ( ! currentTier ) {
+		return null;
+	}
+
+	if ( currentTier?.value === 0 ) {
+		return PLAN_TYPE_FREE;
+	}
+
+	if ( currentTier?.value === 1 ) {
+		return PLAN_TYPE_UNLIMITED;
+	}
+
+	return PLAN_TYPE_TIERED;
+};

package/src/hooks/use-ref-interval.ts

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+interface RafHandle {
+	id: number;
+}
+
+const setRafInterval = ( callback: () => void, timeout: number = 0 ) => {
+	const interval = timeout < 0 ? 0 : timeout;
+	const handle: RafHandle = {
+		id: 0,
+	};
+
+	let startTime = Date.now();
+
+	const loop = () => {
+		const nowTime = Date.now();
+		if ( nowTime - startTime >= interval ) {
+			startTime = nowTime;
+			callback();
+		}
+
+		handle.id = requestAnimationFrame( loop );
+	};
+
+	handle.id = requestAnimationFrame( loop );
+
+	return handle;
+};
+
+const clearRafInterval = ( handle?: RafHandle | null ) => {
+	if ( handle ) {
+		cancelAnimationFrame( handle.id );
+	}
+};
+
+/**
+ * Invoke a function on an interval that uses requestAnimationFrame.
+ *
+ * @param {Function} callback - Function to invoke
+ * @param {number}   timeout  - Interval timout in MS.
+ *
+ * @return {Function} Function to clear the interval.
+ */
+const useRafInterval = ( callback: () => void, timeout = 0 ) => {
+	const timerRef = useRef< RafHandle >();
+
+	const callbackRef = useRef( callback );
+	callbackRef.current = callback;
+
+	useEffect( () => {
+		timerRef.current = setRafInterval( () => {
+			callbackRef.current();
+		}, timeout );
+
+		return () => {
+			clearRafInterval( timerRef.current );
+		};
+	}, [ timeout ] );
+
+	const clear = useCallback( () => {
+		clearRafInterval( timerRef.current );
+	}, [] );
+
+	return clear;
+};
+
+export default useRafInterval;