@automattic/jetpack-shared-extension-utils 0.1.1 → 0.3.1

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.3.1] - 2022-03-29
+### Added
+- Add missing JS peer dependency.
+
+## [0.3.0] - 2022-03-23
+### Added
+- Moved plan-utils.js file from plugin/jetpack to shared-extension-utils. Updated import references for the same
+
+### Changed
+- Updated package dependencies
+
+## [0.2.0] - 2022-03-15
+### Added
+- Moved with-has-warning-is-interactive-class-names folder from jetpack plugin shared extensions
+
 ## [0.1.1] - 2022-03-02
 ### Changed
 - Updated package dependencies
@@ -21,4 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Core: prepare utility for release
 
+[0.3.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.3.0...0.3.1
+[0.3.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.2.0...0.3.0
+[0.2.0]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.1.1...0.2.0
 [0.1.1]: https://github.com/Automattic/jetpack-shared-extension-utils/compare/0.1.0...0.1.1

package/index.js

@@ -3,3 +3,13 @@ export { default as getSiteFragment } from './src/get-site-fragment';
 export { isSimpleSite, isAtomicSite, isPrivateSite } from './src/site-type-utils';
 export { default as getJetpackExtensionAvailability } from './src/get-jetpack-extension-availability';
 export { default as registerJetpackPlugin } from './src/register-jetpack-plugin';
+export { default as withHasWarningIsInteractiveClassNames } from './src/with-has-warning-is-interactive-class-names';
+export {
+	getUpgradeUrl,
+	isUpgradable,
+	requiresPaidPlan,
+	getRequiredPlan,
+	isUpgradeNudgeEnabled,
+	isStillUsableWithFreePlan,
+	getUsableBlockProps,
+} from './src/plan-utils';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-shared-extension-utils",
-	"version": "0.1.1",
+	"version": "0.3.1",
 	"description": "Utility functions used by the block editor extensions",
 	"homepage": "https://jetpack.com",
 	"bugs": {
@@ -16,11 +16,17 @@
 		"test": "NODE_ENV=test NODE_PATH=tests:. js-test-runner --jsdom --initfile=test-main.jsx 'glob:./!(node_modules)/**/test/*.@(jsx|js)'"
 	},
 	"dependencies": {
-		"@wordpress/plugins": "4.1.3"
+		"@wordpress/compose": "5.1.2",
+		"@wordpress/i18n": "4.3.0",
+		"@wordpress/plugins": "4.1.1",
+		"@wordpress/url": "3.4.0",
+		"lodash": "4.17.21"
 	},
 	"devDependencies": {
-		"jetpack-js-test-runner": "workspace:*",
-		"nyc": "15.1.0"
+		"@babel/core": "7.17.8",
+		"@babel/preset-react": "7.16.7",
+		"nyc": "15.1.0",
+		"react": "17.0.2"
 	},
 	"exports": {
 		".": "./index.js"

package/src/plan-utils.js

@@ -0,0 +1,187 @@
+/**
+ * External dependencies
+ */
+import { compact, get, startsWith, map, filter, head } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { isAtomicSite, isSimpleSite } from './site-type-utils';
+import getJetpackData from './get-jetpack-data';
+import getJetpackExtensionAvailability from './get-jetpack-extension-availability';
+import getSiteFragment from './get-site-fragment';
+
+/**
+ * Return the checkout URL to upgrade the site plan,
+ * depending on the plan, postId, and postType site values.
+ *
+ * @param {object} siteParams -          Site params used to build the URL.
+ * @param {string} siteParams.planSlug - Plan slug.
+ * @param {object} siteParams.plan -     An object with details about the plan.
+ * @param {number} siteParams.postId -   Post id.
+ * @param {string} siteParams.postType - Post type.
+ * @returns {string}                     Upgrade URL.
+ */
+export function getUpgradeUrl( { planSlug, plan, postId, postType } ) {
+	// WP.com plan objects have a dedicated `path_slug` field, Jetpack plan objects don't.
+	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/admin.php`,
+					{
+						page: 'gutenberg-edit-site',
+						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() ) {
+		return addQueryArgs( `https://wordpress.com/plans/${ getSiteFragment() }`, {
+			redirect_to,
+			customerType: 'business',
+		} );
+	}
+
+	return (
+		planPathSlug &&
+		addQueryArgs( `https://wordpress.com/checkout/${ getSiteFragment() }/${ planPathSlug }`, {
+			redirect_to,
+		} )
+	);
+}
+
+/**
+ * Check if the block is upgradable, based on whether
+ * the block requires a paid plan.
+ *
+ * @param {string} name - Block name.
+ * @returns {boolean} True if the block is upgradable, false otherwise.
+ */
+export function isUpgradable( name ) {
+	if ( ! name ) {
+		return false;
+	}
+
+	const blockName = /^jetpack\//.test( name ) ? name.substr( 8, name.length ) : name;
+	const { available, unavailableReason } = getJetpackExtensionAvailability( blockName );
+
+	return ! available && 'missing_plan' === unavailableReason;
+}
+
+/**
+ * Checks whether the block requires a paid plan or not.
+ *
+ * @param {string} unavailableReason - The reason why block is unavailable
+ * @param {object} details - The block details
+ * @returns {string|boolean} Either false if the block doesn't require a paid plan, or the actual plan name it requires.
+ */
+export function requiresPaidPlan( unavailableReason, details ) {
+	if ( unavailableReason === 'missing_plan' ) {
+		return details.required_plan;
+	}
+	return false;
+}
+
+/**
+ * Returns the required plan slug for a passed block name.
+ *
+ * @param {string} name - Block name.
+ * @returns {string|boolean} Plan name if the block is upgradable, false otherwise.
+ */
+export function getRequiredPlan( name ) {
+	if ( ! name ) {
+		return false;
+	}
+
+	const blockName = /^jetpack\//.test( name ) ? name.substr( 8, name.length ) : name;
+	const { details, unavailableReason } = getJetpackExtensionAvailability( blockName );
+
+	return requiresPaidPlan( unavailableReason, details );
+}
+
+/*
+ * Usable blocks list with a free plan.
+ * This array contains blocks that can be usable
+ * even with a free plan, as well as properties
+ * used to handle specific behaviour.
+ */
+const usableBlockWithFreePlan = [
+	{
+		name: 'core/cover',
+		mediaPlaceholder: true,
+		mediaReplaceFlow: true,
+		fileType: 'video',
+		description: __( 'Upgrade your plan to use video covers', 'jetpack' ),
+	},
+	{
+		name: 'core/audio',
+		mediaPlaceholder: true,
+		mediaReplaceFlow: true,
+		fileType: 'audio',
+		description: __( 'Upgrade your plan to upload audio', 'jetpack' ),
+	},
+];
+
+/**
+ * Return whether upgrade nudges are enabled or not.
+ *
+ * @returns {boolean} True if the Upgrade Nudge is enable. Otherwise, False.
+ */
+export function isUpgradeNudgeEnabled() {
+	return get( getJetpackData(), 'jetpack.enable_upgrade_nudge', false );
+}
+
+/*
+ * Some blocks are still usable with a free plan.
+ * We can handle their dual behavior defining specifically
+ * when to show the upgrade banner
+ * through or the Paid Block context.
+ *
+ * @param {string} name - Block name to check.
+ * @returns {boolean} True is the block is usable with a Free plan. Otherwise, False.
+ */
+export const isStillUsableWithFreePlan = name =>
+	map( usableBlockWithFreePlan, 'name' ).includes( name );
+
+export const getUsableBlockProps = blockName =>
+	head( filter( usableBlockWithFreePlan, ( { name } ) => name === blockName ) );

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

@@ -0,0 +1,23 @@
+/* eslint-disable react/react-in-jsx-scope */
+
+/**
+ * External dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+import './style.scss';
+
+// Injecting the `has-warning` class into the block wrapper component gives us
+// the right kind of borders around the block, both visually and conceptually.
+// However, it also adds styling to prevent user interaction with that block.
+// 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 }
+			/>
+		),
+		'withHasWarningIsInteractiveClassNames'
+	);

package/src/with-has-warning-is-interactive-class-names/style.scss

@@ -0,0 +1,13 @@
+.block-editor-block-list__layout
+	// Override core styles inherited from `.has-warning`:
+	// we do want blocks with upgrade nudge warning to be interactive
+	.block-editor-block-list__block.has-warning.is-interactive {
+	> * {
+		pointer-events: auto;
+		user-select: auto;
+	}
+
+	&:after {
+		content: none;
+	}
+}