Fix/payment blocks connection banner showing on simple sites (#39687)

* Fix connection banner for payment blocks on simple sites * changelog * Fix condition
Automattic · Oct 8, 2024 · 9449d43 · 9449d43
1 parent e447276
commit 9449d43
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 12 deletions.
diff --git a/...ts/plugins/jetpack/changelog/fix-payment-blocks-connection-banner-showing-on-simple-sites b/...ts/plugins/jetpack/changelog/fix-payment-blocks-connection-banner-showing-on-simple-sites
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Fix issue where connection banner was showing for simple sites
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js b/projects/plugins/jetpack/extensions/blocks/blogroll/edit.js
@@ -1,4 +1,3 @@
-import { useConnection } from '@automattic/jetpack-connection';
 import { InspectorControls, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { PanelBody, ToggleControl, FlexBlock, Spinner, Notice } from '@wordpress/components';
@@ -7,6 +6,7 @@ import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import ConnectBanner from '../../shared/components/connect-banner';
+import useIsUserConnected from '../../shared/use-is-user-connected';
 import BlogrollAppender from './components/blogroll-appender';
 import useRecommendations from './use-recommendations';
 import { useSiteRecommendationSync } from './use-site-recommendations';
@@ -23,7 +23,7 @@ export function BlogRollEdit( { className, attributes, setAttributes, clientId }
 		load_placeholders,
 	} = attributes;
 
-	const { isUserConnected } = useConnection();
+	const isUserConnected = useIsUserConnected();
 
 	const {
 		isLoading: isLoadingRecommendations,

diff --git a/projects/plugins/jetpack/extensions/blocks/donations/edit.js b/projects/plugins/jetpack/extensions/blocks/donations/edit.js
@@ -1,5 +1,4 @@
 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';
@@ -8,6 +7,7 @@ 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';
+import useIsUserConnected from '../../shared/use-is-user-connected';
 import { store as membershipProductsStore } from '../../store/membership-products';
 import { STORE_NAME as MEMBERSHIPS_PRODUCTS_STORE } from '../../store/membership-products/constants';
 import fetchDefaultProducts from './fetch-default-products';
@@ -22,7 +22,7 @@ const Edit = props => {
 	const blockProps = useBlockProps();
 	const [ loadingError, setLoadingError ] = useState( '' );
 	const [ products, setProducts ] = useState( [] );
-	const { isUserConnected } = useConnection();
+	const isUserConnected = useIsUserConnected();
 
 	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
 	const post = useSelect( select => select( 'core/editor' ).getCurrentPost(), [] );

diff --git a/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/payment-buttons/edit.js
@@ -1,4 +1,3 @@
-import { useConnection } from '@automattic/jetpack-connection';
 import { BlockControls, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -8,20 +7,21 @@ 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 useIsUserConnected from '../../shared/use-is-user-connected';
 import { store as membershipProductsStore } from '../../store/membership-products';
 
 const ALLOWED_BLOCKS = [ 'jetpack/recurring-payments' ];
 
 function PaymentButtonsEdit( { clientId, attributes } ) {
 	const { layout, fontSize } = attributes;
-	const { isUserConnected } = useConnection();
 	const { connectUrl, isApiConnected } = useSelect( select => {
 		const { getConnectUrl, isApiStateConnected } = select( membershipProductsStore );
 		return {
 			connectUrl: getConnectUrl(),
 			isApiConnected: isApiStateConnected(),
 		};
 	} );
+	const isUserConnected = useIsUserConnected();
 
 	const paymentButtonBlocks = useSelect(
 		select =>

diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js b/projects/plugins/jetpack/extensions/blocks/payments-intro/edit.js
@@ -1,4 +1,3 @@
-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';
@@ -7,6 +6,7 @@ import { useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { get } from 'lodash';
 import ConnectBanner from '../../shared/components/connect-banner';
+import useIsUserConnected from '../../shared/use-is-user-connected';
 import PaymentsIntroBlockPicker from './block-picker';
 import PaymentsIntroPatternPicker from './pattern-picker';
 import defaultVariations from './variations';
@@ -26,7 +26,7 @@ export default function JetpackPaymentsIntroEdit( { name, clientId } ) {
 		};
 	} );
 
-	const { isUserConnected } = useConnection();
+	const isUserConnected = useIsUserConnected();
 
 	const { replaceBlock, selectBlock, updateSettings } = useDispatch( blockEditorStore );
 

diff --git a/projects/plugins/jetpack/extensions/blocks/paywall/edit.js b/projects/plugins/jetpack/extensions/blocks/paywall/edit.js
@@ -1,5 +1,4 @@
 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';
@@ -13,12 +12,13 @@ import PlansSetupDialog from '../../shared/components/plans-setup-dialog';
 import { accessOptions } from '../../shared/memberships/constants';
 import { useAccessLevel } from '../../shared/memberships/edit';
 import { NewsletterAccessRadioButtons, useSetAccess } from '../../shared/memberships/settings';
+import useIsUserConnected from '../../shared/use-is-user-connected';
 
 function PaywallEdit() {
 	const blockProps = useBlockProps();
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const accessLevel = useAccessLevel( postType );
-	const { isUserConnected } = useConnection();
+	const isUserConnected = useIsUserConnected();
 
 	const { stripeConnectUrl, hasTierPlans } = useSelect( select => {
 		const { getNewsletterTierProducts, getConnectUrl } = select( 'jetpack/membership-products' );

diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/edit.js b/projects/plugins/jetpack/extensions/blocks/premium-content/edit.js
@@ -1,4 +1,3 @@
-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';
@@ -9,6 +8,7 @@ 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';
+import useIsUserConnected from '../../shared/use-is-user-connected';
 import { store as membershipProductsStore } from '../../store/membership-products';
 import Blocks from './_inc/blocks';
 import Context from './_inc/context';
@@ -62,7 +62,7 @@ function Edit( { clientId, isSelected, attributes, setAttributes } ) {
 
 	const [ selectedTab, selectTab ] = useState( tabs[ WALL_TAB ] );
 	const blockProps = useBlockProps();
-	const { isUserConnected } = useConnection();
+	const isUserConnected = useIsUserConnected();
 
 	const setSelectedProductIds = productIds => setAttributes( { selectedPlanIds: productIds } );
 

diff --git a/projects/plugins/jetpack/extensions/shared/use-is-user-connected.ts b/projects/plugins/jetpack/extensions/shared/use-is-user-connected.ts
@@ -0,0 +1,10 @@
+import { useConnection } from '@automattic/jetpack-connection';
+import { isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
+
+const useIsUserConnected: () => boolean = () => {
+	const { isUserConnected } = useConnection();
+
+	return isSimpleSite() || isUserConnected;
+};
+
+export default useIsUserConnected;