@automattic/jetpack-shared-extension-utils 0.17.4 → 0.18.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.18.0] - 2025-03-12
+### Added
+- Add `shouldUseInternalLinks()`. [#42000]
+
+### Changed
+- Update package dependencies. [#42384]
+
+## [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]
@@ -544,6 +558,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.18.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.17.5...0.18.0
+[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

package/index.js

@@ -1,6 +1,7 @@
 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 { default as shouldUseInternalLinks } from './src/should-use-internal-links';
 export * from './src/site-type-utils';
 export { default as getJetpackExtensionAvailability } from './src/get-jetpack-extension-availability';
 export { default as registerJetpackPlugin } from './src/register-jetpack-plugin';
@@ -25,3 +26,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.4",
+	"version": "0.18.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": {
@@ -21,14 +21,16 @@
 		"@automattic/color-studio": "4.0.0",
 		"@automattic/jetpack-analytics": "^0.1.36",
 		"@automattic/jetpack-base-styles": "^0.6.44",
-		"@automattic/jetpack-components": "^0.68.0",
-		"@automattic/jetpack-connection": "^0.38.0",
+		"@automattic/jetpack-components": "^0.68.2",
+		"@automattic/jetpack-connection": "^0.39.1",
+		"@automattic/jetpack-script-data": "^0.2.1",
 		"@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",
@@ -41,7 +43,7 @@
 		"@babel/core": "7.26.0",
 		"@babel/plugin-transform-react-jsx": "7.25.9",
 		"@babel/preset-react": "7.26.3",
-		"@babel/runtime": "7.26.0",
+		"@babel/runtime": "7.26.10",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@testing-library/user-event": "14.6.1",

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 ];
+}

package/src/should-use-internal-links.js

@@ -0,0 +1,16 @@
+import { getScriptData } from '@automattic/jetpack-script-data';
+
+/**
+ * Return whether to use internal Jetpack admin links or not.
+ *
+ * @return {boolean} True if Jetpack admin links are available and should be used, false otherwise.
+ */
+export default function shouldUseInternalLinks() {
+	const { connectedPlugins, connectionStatus } = getScriptData()?.connection ?? {};
+	return (
+		// Some admin pages require the site to be connected (e.g. Privacy)
+		connectionStatus?.isActive &&
+		// Admin pages are part of the Jetpack plugin and require it to be installed
+		connectedPlugins?.some( ( { slug } ) => 'jetpack' === slug )
+	);
+}