@automattic/jetpack-shared-extension-utils 0.17.3 → 0.17.5

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.5] - 2025-03-10
+### Added
+- Social: Move useUpgradeFlow from Jetpack plugin to the shared package. [#41836]
+
+### Changed
+- Update dependencies. [#42222]
+
+## [0.17.4] - 2025-03-03
+### Changed
+- Update package dependencies. [#42163]
+
 ## [0.17.3] - 2025-02-24
 ### Changed
 - Update dependencies. [#40231]
@@ -540,6 +551,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.17.5]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.4...0.17.5
+[0.17.4]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.3...0.17.4
 [0.17.3]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.2...0.17.3
 [0.17.2]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.1...0.17.2
 [0.17.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.0...0.17.1

package/index.js

@@ -25,3 +25,4 @@ export { default as getJetpackBlocksVariation } from './src/get-jetpack-blocks-v
 export * from './src/modules-state';
 export { default as isMyJetpackAvailable } from './src/is-my-jetpack-available';
 export * from './src/libs';
+export { default as useUpgradeFlow } from './src/hooks/use-upgrade-flow';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.17.3",
+	"version": "0.17.5",
 	"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": {
@@ -20,18 +20,19 @@
 	"dependencies": {
 		"@automattic/color-studio": "4.0.0",
 		"@automattic/jetpack-analytics": "^0.1.36",
-		"@automattic/jetpack-base-styles": "^0.6.43",
-		"@automattic/jetpack-components": "^0.67.1",
-		"@automattic/jetpack-connection": "^0.37.0",
-		"@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",
+		"@automattic/jetpack-base-styles": "^0.6.44",
+		"@automattic/jetpack-components": "^0.68.1",
+		"@automattic/jetpack-connection": "^0.39.0",
+		"@wordpress/api-fetch": "7.19.0",
+		"@wordpress/block-editor": "14.14.0",
+		"@wordpress/components": "29.5.0",
+		"@wordpress/compose": "7.19.0",
+		"@wordpress/data": "10.19.0",
+		"@wordpress/element": "6.19.0",
+		"@wordpress/hooks": "4.19.0",
+		"@wordpress/i18n": "5.19.0",
+		"@wordpress/plugins": "7.19.0",
+		"@wordpress/url": "4.19.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"lodash": "4.17.21"
@@ -45,7 +46,7 @@
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@testing-library/user-event": "14.6.1",
-		"@wordpress/babel-plugin-import-jsx-pragma": "5.17.0",
+		"@wordpress/babel-plugin-import-jsx-pragma": "5.19.0",
 		"babel-jest": "29.3.1",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",

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

@@ -24,7 +24,7 @@ function redirect( url, callback, shouldOpenNewWindow = false ) {
  * @param {Function} onRedirect  - To handle the redirection.
  * @return {object} - Object containing properties to handle autosave and redirect.
  */
-export default function useAutosaveAndRedirect( redirectUrl, onRedirect = noop ) {
+export default function useAutosaveAndRedirect( redirectUrl = null, onRedirect = noop ) {
 	const [ isRedirecting, setIsRedirecting ] = useState( false );
 
 	const { isAutosaveablePost, isDirtyPost, currentPost } = useSelect( select => {
@@ -95,7 +95,9 @@ export default function useAutosaveAndRedirect( redirectUrl, onRedirect = noop )
 		setIsRedirecting( true );
 
 		autosave( event ).then( () => {
-			redirect( redirectUrl, onRedirect, isWidgetEditor );
+			if ( redirectUrl ) {
+				redirect( redirectUrl, onRedirect, isWidgetEditor );
+			}
 		} );
 	};
 

package/src/hooks/use-upgrade-flow/README.md

@@ -0,0 +1,84 @@
+## useUpgradeFlow hook
+
+Use this hook when you need to implement a component that leads the user to the checkout page.
+
+### Usage
+
+```es6
+/**
+ * Internal dependencies
+ */
+import { useUpgradeFlow } from '@automattic/jetpack-shared-extension-utils';
+
+const myUPgradeComponent = () => {
+	const [ checkoutUrl, goToCheckoutPage, isRedirecting ] = useUpgradeFlow( 'business-bundle' );
+	return (
+		<Button href={ checkoutUrl } onClick={ goToCheckoutPage } isBusy={ isRedirecting }>
+			CheckOut!
+		</Button>
+	);
+};
+```
+
+### API
+
+`const [ checkoutUrl, goToCheckoutPage, isRedirecting ] = useUpgradeFlow( planSlug, onRedirect );`
+
+#### Arguments
+
+The hook accepts two arguments.
+
+- `planSlug` (`string`) - Slug of plan to purchase
+- _(optional)_ `onRedirect` (`(string) => void`) - callback function that will
+  be run when the redirect process triggers. The new URL is passed.
+
+### Return Values
+
+The hook returns an array with three items.
+
+- `checkoutUrl` (`string`): The checkout URL. You can use this value to set the href of an anchor element.
+- `goToCheckoutPage` (`(event) => void`): Callback to be used in an onClick event.
+
+Redirects the user to the checkout URL, checking before whether the current
+post/page/etc has changes to save. If so, it saves them before to redirect.
+
+- `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.
+
+- `planData` (`object`) An object with full data about the plan.
+
+This data is provided by the `wordpress-com/plan` store registered by the [upgrade-nudge](../upgrade-nudge/store.js) shared component, which is populated by the response of the `https://public-api.wordpress.com/rest/v1.5/plans` request.
+The following is a quite accurate shape of the personal plan:
+
+```js
+{
+	product_id: 2005,
+	product_name: "Jetpack Personal",
+	meta: null,
+	bd_slug: "jetpack-personal",
+	bd_variation_slug: "jetpack-personal-yearly",
+	sale_coupon_applied: false,
+	sale_coupon: null,
+	multi: 0,
+	cost: 39,
+	blog_id: null,
+	product_slug: "jetpack_personal",
+	description: "",
+	bill_period: 365,
+	product_type: "bundle",
+	available: "yes",
+	outer_slug: null,
+	extra: null,
+	capability: "manage_options",
+	product_name_short: "Personal",
+	icon: "https://s0.wordpress.com/i/store/plan-business.png",
+	icon_active: "https://s0.wordpress.com/i/store/plan-business-active.png",
+	bill_period_label: "per year",
+	price: "$39",
+	formatted_price: "$39",
+	raw_price: 39,
+	tagline: null,
+	currency_code: "USD"
+}
+```

package/src/hooks/use-upgrade-flow/index.js

@@ -0,0 +1,57 @@
+import { useSelect } from '@wordpress/data';
+import { doAction, hasAction } from '@wordpress/hooks';
+import { getUpgradeUrl } from '../../plan-utils';
+import useAutosaveAndRedirect from '../use-autosave-and-redirect';
+
+const noop = () => {};
+
+const HOOK_OPEN_CHECKOUT_MODAL = 'a8c.wpcom-block-editor.openCheckoutModal';
+
+/**
+ * Use this hook when you need to implement a component that leads the user to the checkout page.
+ * @param {string}   planSlug   - The plan slug to upgrade to.
+ * @param {Function} onRedirect - A callback function to be called when the user is redirected to the checkout page.
+ *
+ * @return {Array} - An array with the following elements:
+ */
+export default function useUpgradeFlow( planSlug, onRedirect = noop ) {
+	const { checkoutUrl, planData } = useSelect(
+		select => {
+			const editorSelector = select( 'core/editor' );
+			const planSelector = select( 'wordpress-com/plans' );
+
+			const { id: postId, type: postType } = editorSelector.getCurrentPost();
+			const plan = planSelector && planSelector.getPlan( planSlug );
+
+			return {
+				checkoutUrl: getUpgradeUrl( { plan, planSlug, postId, postType } ),
+				planData: plan,
+			};
+		},
+		[ planSlug ]
+	);
+
+	const { autosave, autosaveAndRedirect, isRedirecting } = useAutosaveAndRedirect(
+		checkoutUrl,
+		onRedirect
+	);
+
+	const goToCheckoutPage = async event => {
+		event.preventDefault();
+
+		// If this action is available, the feature is enabled to open the checkout
+		// in a modal rather than redirect the user there, away from the editor.
+		if ( hasAction( HOOK_OPEN_CHECKOUT_MODAL ) ) {
+			event.preventDefault();
+
+			autosave( event );
+
+			doAction( HOOK_OPEN_CHECKOUT_MODAL, { products: [ planData ] } );
+			return;
+		}
+
+		autosaveAndRedirect( event );
+	};
+
+	return [ checkoutUrl, goToCheckoutPage, isRedirecting, planData ];
+}