Add connection nudges to all payment blocks

Automattic · Oct 4, 2024 · 1bfc15f · 1bfc15f
1 parent e524177
commit 1bfc15f
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 14 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/donations/edit.js b/projects/plugins/jetpack/extensions/blocks/donations/edit.js
@@ -1,8 +1,10 @@
 import { Spinner } from '@automattic/jetpack-components';
+import { useConnection } from '@automattic/jetpack-connection';
 import { useBlockProps } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import ConnectBanner from '../../shared/components/connect-banner';
 import { StripeNudge } from '../../shared/components/stripe-nudge';
 import { SUPPORTED_CURRENCIES } from '../../shared/currencies';
 import getConnectUrl from '../../shared/get-connect-url';
@@ -20,6 +22,7 @@ const Edit = props => {
 	const blockProps = useBlockProps();
 	const [ loadingError, setLoadingError ] = useState( '' );
 	const [ products, setProducts ] = useState( [] );
+	const { hasConnectedOwner } = useConnection();
 
 	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
 	const post = useSelect( select => select( 'core/editor' ).getCurrentPost(), [] );
@@ -134,7 +137,13 @@ const Edit = props => {
 
 	let content;
 
-	if ( loadingError ) {
+	if ( ! hasConnectedOwner ) {
+		content = (
+			<ConnectBanner
+				explanation={ __( 'Connect your WordPress.com account to enable donations.', 'jetpack' ) }
+			/>
+		);
+	} else if ( loadingError ) {
 		content = <LoadingError error={ loadingError } />;
 	} else if ( stripeConnectUrl ) {
 		// Need to connect Stripe first

diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js
@@ -1,8 +1,11 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import { BlockControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
+import ConnectBanner from '../../shared/components/connect-banner';
 import StripeConnectToolbarButton from '../../shared/components/stripe-connect-toolbar-button';
 import { StripeNudge } from '../../shared/components/stripe-nudge';
 import { store as membershipProductsStore } from '../../store/membership-products';
@@ -11,6 +14,7 @@ const ALLOWED_BLOCKS = [ 'jetpack/recurring-payments' ];
 
 function PaymentButtonsEdit( { clientId, attributes } ) {
 	const { layout, fontSize } = attributes;
+	const { hasConnectedOwner } = useConnection();
 	const { connectUrl, isApiConnected } = useSelect( select => {
 		const { getConnectUrl, isApiStateConnected } = select( membershipProductsStore );
 		return {
@@ -71,6 +75,20 @@ function PaymentButtonsEdit( { clientId, attributes } ) {
 	// will then be positioned in relation to this.
 	delete innerBlocksProps.id;
 	delete innerBlocksProps[ 'data-block' ];
+
+	if ( ! hasConnectedOwner ) {
+		return (
+			<div { ...blockProps }>
+				<ConnectBanner
+					explanation={ __(
+						'Connect your WordPress.com account to enable payment buttons on your site.',
+						'jetpack'
+					) }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
 			{ showStripeConnectAction && (

diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php b/projects/plugins/jetpack/extensions/blocks/payment-buttons/payment-buttons.php
@@ -17,13 +17,8 @@
  * registration if we need to.
  */
 function register_block() {
-	if ( ! ( defined( 'IS_WPCOM' ) && IS_WPCOM ) && ! \Jetpack::is_connection_ready() ) {
-		return;
-	}
-
 	require_once JETPACK__PLUGIN_DIR . '/modules/memberships/class-jetpack-memberships.php';
-	if ( \Jetpack_Memberships::is_enabled_jetpack_recurring_payments() &&
-		\Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) {
+	if ( \Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) {
 		Blocks::jetpack_register_block(
 			__DIR__,
 			array(

diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js
@@ -1,10 +1,12 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import { InnerBlocks, store as blockEditorStore, useBlockProps } from '@wordpress/block-editor';
 import { cloneBlock, createBlock, getBlockType, registerBlockVariation } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { get } from 'lodash';
+import ConnectBanner from '../../shared/components/connect-banner';
 import PaymentsIntroBlockPicker from './block-picker';
 import PaymentsIntroPatternPicker from './pattern-picker';
 import defaultVariations from './variations';
@@ -24,6 +26,8 @@ export default function JetpackPaymentsIntroEdit( { name, clientId } ) {
 		};
 	} );
 
+	const { hasConnectedOwner } = useConnection();
+
 	const { replaceBlock, selectBlock, updateSettings } = useDispatch( blockEditorStore );
 
 	const maybeMakeBlockVisible = useCallback(
@@ -67,7 +71,16 @@ export default function JetpackPaymentsIntroEdit( { name, clientId } ) {
 
 	let content;
 
-	if ( ! hasInnerBlocks && displayVariations ) {
+	if ( ! hasConnectedOwner ) {
+		content = (
+			<ConnectBanner
+				explanation={ __(
+					'Connect your WordPress.com account to start using payments blocks.',
+					'jetpack'
+				) }
+			/>
+		);
+	} else if ( ! hasInnerBlocks && displayVariations ) {
 		content = (
 			<Placeholder
 				icon={ get( blockType, [ 'icon', 'src' ] ) }

diff --git a/projects/plugins/jetpack/extensions/blocks/paywall/edit.js b/projects/plugins/jetpack/extensions/blocks/paywall/edit.js
@@ -1,4 +1,5 @@
 import './editor.scss';
+import { useConnection } from '@automattic/jetpack-connection';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { MenuGroup, MenuItem, PanelBody, ToolbarDropdownMenu } from '@wordpress/components';
@@ -7,6 +8,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { arrowDown, Icon, people, check } from '@wordpress/icons';
+import ConnectBanner from '../../shared/components/connect-banner';
 import PlansSetupDialog from '../../shared/components/plans-setup-dialog';
 import { accessOptions } from '../../shared/memberships/constants';
 import { useAccessLevel } from '../../shared/memberships/edit';
@@ -16,6 +18,7 @@ function PaywallEdit() {
 	const blockProps = useBlockProps();
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const accessLevel = useAccessLevel( postType );
+	const { hasConnectedOwner } = useConnection();
 
 	const { stripeConnectUrl, hasTierPlans } = useSelect( select => {
 		const { getNewsletterTierProducts, getConnectUrl } = select( 'jetpack/membership-products' );
@@ -43,6 +46,19 @@ function PaywallEdit() {
 		setAccess( value );
 	}
 
+	if ( ! hasConnectedOwner ) {
+		return (
+			<div { ...blockProps }>
+				<ConnectBanner
+					explanation={ __(
+						'Connect your WordPress.com account to enable a paywall for your site.',
+						'jetpack'
+					) }
+				/>
+			</div>
+		);
+	}
+
 	const getText = key => {
 		switch ( key ) {
 			case accessOptions.subscribers.key:

diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/edit.js b/projects/plugins/jetpack/extensions/blocks/premium-content/edit.js
@@ -1,9 +1,11 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import { store as blockEditorStore, useBlockProps } from '@wordpress/block-editor';
 import { Disabled, Placeholder, Spinner } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { select, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import ConnectBanner from '../../shared/components/connect-banner';
 import ProductManagementControls from '../../shared/components/product-management-controls';
 import { PRODUCT_TYPE_SUBSCRIPTION } from '../../shared/components/product-management-controls/constants';
 import { StripeNudge } from '../../shared/components/stripe-nudge';
@@ -12,7 +14,6 @@ import Blocks from './_inc/blocks';
 import Context from './_inc/context';
 import './editor.scss';
 import ViewSelector from './_inc/view-selector';
-
 /**
  * Tab definitions
  *
@@ -61,6 +62,7 @@ function Edit( { clientId, isSelected, attributes, setAttributes } ) {
 
 	const [ selectedTab, selectTab ] = useState( tabs[ WALL_TAB ] );
 	const blockProps = useBlockProps();
+	const { hasConnectedOwner } = useConnection();
 
 	const setSelectedProductIds = productIds => setAttributes( { selectedPlanIds: productIds } );
 
@@ -100,6 +102,19 @@ function Edit( { clientId, isSelected, attributes, setAttributes } ) {
 
 	const isSmallViewport = useViewportMatch( 'medium', '<' );
 
+	if ( ! hasConnectedOwner ) {
+		return (
+			<div { ...blockProps }>
+				<ConnectBanner
+					explanation={ __(
+						'Connect your WordPress.com account to enable paid content.',
+						'jetpack'
+					) }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
 			{ ! isPreview && (

diff --git a/projects/plugins/jetpack/modules/memberships/class-jetpack-memberships.php b/projects/plugins/jetpack/modules/memberships/class-jetpack-memberships.php
@@ -7,7 +7,6 @@
  */
 
 use Automattic\Jetpack\Blocks;
-use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Extensions\Premium_Content\Subscription_Service\Abstract_Token_Subscription_Service;
 use Automattic\Jetpack\Status;
 use Automattic\Jetpack\Status\Host;
@@ -751,7 +750,7 @@ public static function is_enabled_jetpack_recurring_payments() {
 
 	/**
 	 * Whether to enable the blocks in the editor.
-	 * All Monetize blocks (except Simple Payments) need an active connecting and a user with at least `edit_posts` capability
+	 * All Monetize blocks (except Simple Payments) need a user with at least `edit_posts` capability
 	 *
 	 * @return bool
 	 */
@@ -762,10 +761,8 @@ public static function should_enable_monetize_blocks_in_editor() {
 
 		}
 
-		$manager                          = new Connection_Manager( 'jetpack' );
-		$jetpack_ready_and_connected      = $manager->is_connected() && $manager->has_connected_owner();
 		$is_offline_mode                  = ( new Status() )->is_offline_mode();
-		$enable_monetize_blocks_in_editor = ( new Host() )->is_wpcom_simple() || ( $jetpack_ready_and_connected && ! $is_offline_mode );
+		$enable_monetize_blocks_in_editor = ( new Host() )->is_wpcom_simple() || ( ! $is_offline_mode );
 		return $enable_monetize_blocks_in_editor;
 	}