From 2f2c16687cf1ea0f01c47b019d3a27505fd9819e Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Thu, 17 Oct 2024 11:28:10 +0300
Subject: [PATCH 1/6] Subscriptions: stop loading editor functionality when the
 module is disabled

---
 .../extensions/blocks/subscriptions/edit.js   | 190 +++++++-----------
 .../extensions/blocks/subscriptions/panel.js  |  96 ++-------
 .../subscriptions/subscription-placeholder.js |  48 -----
 .../subscription-skeleton-loader.js           |  35 ----
 .../blocks/subscriptions/subscriptions.php    |  25 +--
 5 files changed, 89 insertions(+), 305 deletions(-)
 delete mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js
 delete mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
index 244ceea62be85..ea1e9c67588f7 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -1,5 +1,4 @@
 import { numberFormat, ThemeProvider } from '@automattic/jetpack-components';
-import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import {
 	BlockControls,
 	InspectorControls,
@@ -18,7 +17,6 @@ import clsx from 'clsx';
 import { isEqual } from 'lodash';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
-import { isNewsletterFeatureEnabled } from '../../shared/memberships/edit';
 import GetAddPaidPlanButton, { paidPlanButtonText } from '../../shared/memberships/utils';
 import './view.scss';
 import { store as membershipProductsStore } from '../../store/membership-products';
@@ -34,13 +32,10 @@ import {
 	DEFAULT_SUCCESS_MESSAGE,
 } from './constants';
 import SubscriptionControls from './controls';
-import { SubscriptionsPlaceholder } from './subscription-placeholder';
-import SubscriptionSkeletonLoader from './subscription-skeleton-loader';
 
 const { getComputedStyle } = window;
 const isGradientAvailable = !! useGradient;
 const useGradientIfAvailable = isGradientAvailable ? useGradient : () => ( {} );
-const name = metadata.name.replace( 'jetpack/', '' );
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 	const { buttonBackgroundColor, textColor } = ownProps;
@@ -77,8 +72,6 @@ export function SubscriptionEdit( props ) {
 	} = props;
 
 	const blockProps = useBlockProps();
-	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
-		useModuleStatus( name );
 
 	const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
 	if ( ! isEqual( validatedAttributes, attributes ) ) {
@@ -103,12 +96,6 @@ export function SubscriptionEdit( props ) {
 	const activeStyleName = getActiveStyleName( metadata.styles, className );
 
 	const { subscriberCount, subscriberCountString } = useSelect( select => {
-		if ( ! isModuleActive ) {
-			return {
-				subscriberCounts: 0,
-				subscriberCountString: '',
-			};
-		}
 		const { emailSubscribers, socialFollowers } =
 			select( membershipProductsStore ).getSubscriberCounts();
 		let count = emailSubscribers;
@@ -217,9 +204,6 @@ export function SubscriptionEdit( props ) {
 	const previousButtonBackgroundColor = usePrevious( buttonBackgroundColor );
 
 	useEffect( () => {
-		if ( ! isModuleActive ) {
-			return;
-		}
 		if (
 			previousButtonBackgroundColor?.color !== borderColor?.color ||
 			borderColor?.color === buttonBackgroundColor?.color
@@ -227,122 +211,86 @@ export function SubscriptionEdit( props ) {
 			return;
 		}
 		setBorderColor( buttonBackgroundColor.color );
-	}, [
-		buttonBackgroundColor,
-		previousButtonBackgroundColor,
-		borderColor,
-		setBorderColor,
-		isModuleActive,
-	] );
-
-	let content;
+	}, [ buttonBackgroundColor, previousButtonBackgroundColor, borderColor, setBorderColor ] );
 
 	const paidPlanLabel = paidPlanButtonText( hasTierPlans );
 
 	if ( isLoadingModules ) {
-		content = <SubscriptionSkeletonLoader />;
-	} else if ( ! isModuleActive ) {
-		content = (
-			<SubscriptionsPlaceholder
-				changeStatus={ changeStatus }
-				isModuleActive={ isModuleActive }
-				isLoading={ isChangingStatus }
-			/>
-		);
-	} else {
-		content = (
-			<>
-				<InspectorControls>
-					<SubscriptionControls
-						buttonBackgroundColor={ buttonBackgroundColor }
-						borderColor={ borderColor }
-						buttonGradient={ buttonGradient }
-						borderRadius={ borderRadius }
-						borderWeight={ borderWeight }
-						buttonOnNewLine={ buttonOnNewLine }
-						emailFieldBackgroundColor={ emailFieldBackgroundColor }
-						fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
-						fallbackTextColor={ fallbackTextColor }
-						fontSize={ fontSize }
-						includeSocialFollowers={ includeSocialFollowers }
-						isGradientAvailable={ isGradientAvailable }
-						padding={ padding }
-						setAttributes={ setAttributes }
-						setBorderColor={ setBorderColor }
-						setButtonBackgroundColor={ setButtonBackgroundColor }
-						setTextColor={ setTextColor }
-						showSubscribersTotal={ showSubscribersTotal }
-						spacing={ spacing }
-						subscriberCount={ subscriberCount }
-						textColor={ textColor }
-						buttonWidth={ buttonWidth }
-						subscribePlaceholder={ subscribePlaceholder }
-						submitButtonText={ submitButtonText }
-						successMessage={ successMessage }
-					/>
-				</InspectorControls>
-				{ isNewsletterFeatureEnabled() && (
-					<BlockControls>
-						<Toolbar label={ paidPlanLabel }>
-							<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
-						</Toolbar>
-					</BlockControls>
-				) }
+		return <SubscriptionSkeletonLoader />;
+	}
 
-				<div style={ cssVars }>
-					<div className="wp-block-jetpack-subscriptions__container is-not-subscriber">
-						<div className="wp-block-jetpack-subscriptions__form" role="form">
-							<div className="wp-block-jetpack-subscriptions__form-elements">
-								{ activeStyleName !== 'button' && (
-									<TextControl
-										__nextHasNoMarginBottom={ true }
-										placeholder={ subscribePlaceholder }
-										disabled={ true }
-										className={ clsx(
-											emailFieldClasses,
-											'wp-block-jetpack-subscriptions__textfield'
-										) }
-										style={ emailFieldStyles }
-									/>
-								) }
-								<RichText
+	return (
+		<>
+			<InspectorControls>
+				<SubscriptionControls
+					buttonBackgroundColor={ buttonBackgroundColor }
+					borderColor={ borderColor }
+					buttonGradient={ buttonGradient }
+					borderRadius={ borderRadius }
+					borderWeight={ borderWeight }
+					buttonOnNewLine={ buttonOnNewLine }
+					emailFieldBackgroundColor={ emailFieldBackgroundColor }
+					fallbackButtonBackgroundColor={ fallbackButtonBackgroundColor }
+					fallbackTextColor={ fallbackTextColor }
+					fontSize={ fontSize }
+					includeSocialFollowers={ includeSocialFollowers }
+					isGradientAvailable={ isGradientAvailable }
+					padding={ padding }
+					setAttributes={ setAttributes }
+					setBorderColor={ setBorderColor }
+					setButtonBackgroundColor={ setButtonBackgroundColor }
+					setTextColor={ setTextColor }
+					showSubscribersTotal={ showSubscribersTotal }
+					spacing={ spacing }
+					subscriberCount={ subscriberCount }
+					textColor={ textColor }
+					buttonWidth={ buttonWidth }
+					subscribePlaceholder={ subscribePlaceholder }
+					submitButtonText={ submitButtonText }
+					successMessage={ successMessage }
+				/>
+			</InspectorControls>
+			<BlockControls>
+				<Toolbar label={ paidPlanLabel }>
+					<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
+				</Toolbar>
+			</BlockControls>
+			<div style={ cssVars }>
+				<div className="wp-block-jetpack-subscriptions__container is-not-subscriber">
+					<div className="wp-block-jetpack-subscriptions__form" role="form">
+						<div className="wp-block-jetpack-subscriptions__form-elements">
+							{ activeStyleName !== 'button' && (
+								<TextControl
+									__nextHasNoMarginBottom={ true }
+									placeholder={ subscribePlaceholder }
+									disabled={ true }
 									className={ clsx(
-										buttonClasses,
-										'wp-block-jetpack-subscriptions__button',
-										'wp-block-button__link'
+										emailFieldClasses,
+										'wp-block-jetpack-subscriptions__textfield'
 									) }
-									onChange={ value => setAttributes( { submitButtonText: value } ) }
-									style={ buttonStyles }
-									value={ submitButtonText }
-									withoutInteractiveFormatting
-									allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] }
+									style={ emailFieldStyles }
 								/>
-							</div>
+							) }
+							<RichText
+								className={ clsx(
+									buttonClasses,
+									'wp-block-jetpack-subscriptions__button',
+									'wp-block-button__link'
+								) }
+								onChange={ value => setAttributes( { submitButtonText: value } ) }
+								style={ buttonStyles }
+								value={ submitButtonText }
+								withoutInteractiveFormatting
+								allowedFormats={ [ 'core/bold', 'core/italic', 'core/strikethrough' ] }
+							/>
 						</div>
 					</div>
-					{ showSubscribersTotal && (
-						<div className="wp-block-jetpack-subscriptions__subscount">
-							{ subscriberCountString }
-						</div>
-					) }
 				</div>
-			</>
-		);
-	}
-
-	return (
-		<div
-			{ ...blockProps }
-			className={ clsx(
-				blockProps.className,
-				'wp-block-jetpack-subscriptions__container',
-				'wp-block-jetpack-subscriptions__supports-newline',
-				buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
-				showSubscribersTotal ? 'wp-block-jetpack-subscriptions__show-subs' : undefined
-			) }
-		>
-			{ content }
-		</div>
+				{ showSubscribersTotal && (
+					<div className="wp-block-jetpack-subscriptions__subscount">{ subscriberCountString }</div>
+				) }
+			</div>
+		</>
 	);
 }
 
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
index 8fdcd9b3db59e..8e0269029095c 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
@@ -5,9 +5,8 @@ import {
 	isPrivateSite,
 	JetpackEditorPanelLogo,
 	useAnalytics,
-	useModuleStatus,
 } from '@automattic/jetpack-shared-extension-utils';
-import { Button, ExternalLink, Flex, FlexItem, Notice, PanelRow } from '@wordpress/components';
+import { Button, Notice, PanelRow } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
 	PluginPrePublishPanel,
@@ -30,32 +29,10 @@ import {
 	MisconfigurationWarning,
 } from '../../shared/memberships/utils';
 import { store as membershipProductsStore } from '../../store/membership-products';
-import metadata from './block.json';
 import { NewsletterTestEmailModal } from './email-preview';
 
 import './panel.scss';
 
-const name = metadata.name.replace( 'jetpack/', '' );
-
-const SubscriptionsPanelPlaceholder = ( { children } ) => {
-	return (
-		<Flex align="center" gap={ 4 } direction="column" style={ { alignItems: 'center' } }>
-			<FlexItem>
-				{ __(
-					'In order to send posts to your subscribers, activate the Subscriptions feature.',
-					'jetpack'
-				) }
-			</FlexItem>
-			<FlexItem>{ children }</FlexItem>
-			<FlexItem>
-				<ExternalLink href="https://jetpack.com/support/subscriptions/">
-					{ __( 'Learn more about Subscriptions', 'jetpack' ) }
-				</ExternalLink>
-			</FlexItem>
-		</Flex>
-	);
-};
-
 function NewsletterEditorSettingsPanel( { accessLevel } ) {
 	return (
 		<PluginDocumentSettingPanel
@@ -101,53 +78,10 @@ const NewsletterDisabledPanels = () => (
 	</>
 );
 
-function NewsletterPrePublishSettingsPanel( { accessLevel, isModuleActive, showPreviewModal } ) {
-	const { tracks } = useAnalytics();
-	const { changeStatus, isLoadingModules, isChangingStatus } = useModuleStatus( name );
-
-	const enableSubscriptionsModule = () => {
-		tracks.recordEvent( 'jetpack_editor_subscriptions_enable' );
-		return changeStatus( true );
-	};
-
-	// Subscriptions will not be triggered for a post that was already published in the past.
-	const shouldLoadSubscriptionPlaceholder = useSelect( select => {
-		const meta = select( editorStore ).getEditedPostAttribute( 'meta' );
-		return ! isModuleActive && ! isLoadingModules && ! meta?.jetpack_post_was_ever_published;
-	} );
-
+function NewsletterPrePublishSettingsPanel( { accessLevel, showPreviewModal } ) {
 	const postVisibility = useSelect( select => select( editorStore ).getEditedPostVisibility() );
 	const showMisconfigurationWarning = getShowMisconfigurationWarning( postVisibility, accessLevel );
 
-	// Nudge to enable module
-	if ( ! isModuleActive && shouldLoadSubscriptionPlaceholder ) {
-		return (
-			<PluginPrePublishPanel
-				initialOpen
-				name="jetpack-subscribe-newsletters-panel"
-				title={ __( 'Newsletter', 'jetpack' ) }
-				icon={ <JetpackEditorPanelLogo /> }
-			>
-				<SubscriptionsPanelPlaceholder>
-					<Button
-						variant="secondary"
-						isBusy={ isChangingStatus }
-						disabled={ isModuleActive || isChangingStatus }
-						onClick={ enableSubscriptionsModule }
-					>
-						{ isChangingStatus
-							? __( 'Activating Subscriptions', 'jetpack' )
-							: __(
-									'Activate Subscriptions',
-									'jetpack',
-									/* dummy arg to avoid bad minification */ 0
-							  ) }
-					</Button>
-				</SubscriptionsPanelPlaceholder>
-			</PluginPrePublishPanel>
-		);
-	}
-
 	return (
 		<>
 			<PluginPrePublishPanel
@@ -174,19 +108,15 @@ function NewsletterPrePublishSettingsPanel( { accessLevel, isModuleActive, showP
 				title={ __( 'Newsletter', 'jetpack' ) }
 				icon={ <JetpackEditorPanelLogo /> }
 			>
-				{ isModuleActive && (
-					<>
-						<NewsletterEmailDocumentSettings />
-						{ showMisconfigurationWarning ? (
-							<MisconfigurationWarning />
-						) : (
-							<SubscribersAffirmation prePublish={ true } accessLevel={ accessLevel } />
-						) }
-						<Button variant="link" onClick={ showPreviewModal }>
-							{ __( 'Send test email', 'jetpack' ) }
-						</Button>
-					</>
+				<NewsletterEmailDocumentSettings />
+				{ showMisconfigurationWarning ? (
+					<MisconfigurationWarning />
+				) : (
+					<SubscribersAffirmation prePublish={ true } accessLevel={ accessLevel } />
 				) }
+				<Button variant="link" onClick={ showPreviewModal }>
+					{ __( 'Send test email', 'jetpack' ) }
+				</Button>
 			</PluginPrePublishPanel>
 		</>
 	);
@@ -247,7 +177,6 @@ function NewsletterPostPublishSettingsPanel( { accessLevel } ) {
 }
 
 export default function SubscribePanels() {
-	const { isModuleActive } = useModuleStatus( name );
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
@@ -273,16 +202,15 @@ export default function SubscribePanels() {
 
 	return (
 		<>
-			{ isModuleActive && <NewsletterEditorSettingsPanel accessLevel={ accessLevel } /> }
+			<NewsletterEditorSettingsPanel accessLevel={ accessLevel } />
 			<NewsletterPrePublishSettingsPanel
 				accessLevel={ accessLevel }
-				isModuleActive={ isModuleActive }
 				showPreviewModal={ () => {
 					tracks.recordEvent( 'jetpack_send_email_preview_prepublish_preview_button' );
 					setIsModalOpen( true );
 				} }
 			/>
-			{ isModuleActive && <NewsletterPostPublishSettingsPanel accessLevel={ accessLevel } /> }
+			<NewsletterPostPublishSettingsPanel accessLevel={ accessLevel } />
 			<NewsletterTestEmailModal isOpen={ isModalOpen } onClose={ () => setIsModalOpen( false ) } />
 		</>
 	);
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js
deleted file mode 100644
index 10eb1286f8160..0000000000000
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-placeholder.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useAnalytics, getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
-import { Button, ExternalLink, Placeholder } from '@wordpress/components';
-import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import metadata from './block.json';
-
-const icon = getBlockIconComponent( metadata );
-
-export const SubscriptionsPlaceholder = ( { changeStatus, isLoading, isModuleActive } ) => {
-	const { tracks } = useAnalytics();
-
-	const enableSubscriptionsModule = () => {
-		tracks.recordEvent( 'jetpack_editor_subscriptions_enable' );
-		return changeStatus( true );
-	};
-
-	// Track when the placeholder is viewed.
-	useEffect( () => {
-		tracks.recordEvent( 'jetpack_editor_subscriptions_placeholder_view' );
-	}, [ tracks ] );
-
-	return (
-		<Placeholder
-			icon={ icon }
-			instructions={ __(
-				"You'll need to activate the Subscriptions feature to use the Subcribe block.",
-				'jetpack'
-			) }
-			label={ metadata.title }
-		>
-			<Button
-				disabled={ isModuleActive || isLoading }
-				isBusy={ isLoading }
-				onClick={ enableSubscriptionsModule }
-				variant="secondary"
-			>
-				{ isLoading
-					? __( 'Activating Subscriptions', 'jetpack' )
-					: __( 'Activate Subscriptions', 'jetpack', /* dummy arg to avoid bad minification */ 0 ) }
-			</Button>
-			<div className="membership-button__disclaimer">
-				<ExternalLink href="https://jetpack.com/support/subscriptions/">
-					{ __( 'Learn more about the Subscriptions feature.', 'jetpack' ) }
-				</ExternalLink>
-			</div>
-		</Placeholder>
-	);
-};
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js
deleted file mode 100644
index bb7f1f2d57c44..0000000000000
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscription-skeleton-loader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
-import { Placeholder, Flex, FlexBlock, FlexItem } from '@wordpress/components';
-
-function SubscriptionSkeletonLoader() {
-	return (
-		<Placeholder>
-			<Flex gap={ 2 } direction="column" style={ { width: '100%' } }>
-				<Flex gap={ 4 }>
-					<FlexItem>
-						<LoadingPlaceholder width={ 30 } height={ 30 } />
-					</FlexItem>
-					<FlexBlock>
-						<LoadingPlaceholder width="90%" height={ 30 } />
-					</FlexBlock>
-				</Flex>
-				<Flex style={ { marginTop: 12 } }>
-					<FlexBlock>
-						<LoadingPlaceholder height={ 30 } width="60%" />
-					</FlexBlock>
-				</Flex>
-				<Flex style={ { marginTop: 12 } }>
-					<FlexBlock>
-						<LoadingPlaceholder width={ 150 } height={ 50 } />
-					</FlexBlock>
-				</Flex>
-				<Flex style={ { marginTop: 18 } }>
-					<FlexBlock>
-						<LoadingPlaceholder width="90%" height={ 16 } />
-					</FlexBlock>
-				</Flex>
-			</Flex>
-		</Placeholder>
-	);
-}
-export default SubscriptionSkeletonLoader;
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
index 3c16140fb731a..ec3b6f1d915aa 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
@@ -43,9 +43,16 @@ function register_block() {
 		return;
 	}
 
+	/**
+	 * Do not proceed if the newsletter feature (Subscriptions module) is not enabled
+	 */
+	if ( ! Jetpack::is_module_active( 'subscriptions' ) ) {
+		return;
+	}
+
 	require_once JETPACK__PLUGIN_DIR . '/modules/memberships/class-jetpack-memberships.php';
-	if ( \Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) {
 
+	if ( \Jetpack_Memberships::should_enable_monetize_blocks_in_editor() ) {
 		Blocks::jetpack_register_block(
 			__DIR__,
 			array(
@@ -61,22 +68,6 @@ function register_block() {
 		);
 	}
 
-	/*
-	 * If the Subscriptions module is not active,
-	 * do not make any further changes on the site.
-	 */
-	if ( ! Jetpack::is_module_active( 'subscriptions' ) ) {
-		return;
-	}
-
-	/**
-	 * Do not proceed if the newsletter feature is not enabled
-	 * or if the 'Jetpack_Memberships' class does not exists.
-	 */
-	if ( ! class_exists( '\Jetpack_Memberships' ) ) {
-		return;
-	}
-
 	register_post_meta(
 		'post',
 		META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS,

From ebbf802323c6966b211283e7418bab644db73fbf Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Thu, 17 Oct 2024 11:30:53 +0300
Subject: [PATCH 2/6] changelog

---
 .../update-stop-loading-subscribe-block-when-module-disabled  | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled

diff --git a/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled b/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled
new file mode 100644
index 0000000000000..20e9453acba35
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-stop-loading-subscribe-block-when-module-disabled
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Subscriptions: stops loading editor functionality (i.e. the block and panels) when subscriptions module is disabled.

From 22f8a364b281bea87c815f1c1a596e5dbc0dc082 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Mon, 18 Nov 2024 19:47:53 +0200
Subject: [PATCH 3/6] Cleanup

---
 .../jetpack/extensions/blocks/subscriptions/edit.js   | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
index ea1e9c67588f7..21d916cac3231 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -5,7 +5,6 @@ import {
 	RichText,
 	withColors,
 	withFontSizes,
-	useBlockProps,
 	__experimentalUseGradient as useGradient, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { TextControl, Toolbar, withFallbackStyles } from '@wordpress/components';
@@ -71,8 +70,6 @@ export function SubscriptionEdit( props ) {
 		hasTierPlans,
 	} = props;
 
-	const blockProps = useBlockProps();
-
 	const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
 	if ( ! isEqual( validatedAttributes, attributes ) ) {
 		setAttributes( validatedAttributes );
@@ -213,12 +210,6 @@ export function SubscriptionEdit( props ) {
 		setBorderColor( buttonBackgroundColor.color );
 	}, [ buttonBackgroundColor, previousButtonBackgroundColor, borderColor, setBorderColor ] );
 
-	const paidPlanLabel = paidPlanButtonText( hasTierPlans );
-
-	if ( isLoadingModules ) {
-		return <SubscriptionSkeletonLoader />;
-	}
-
 	return (
 		<>
 			<InspectorControls>
@@ -251,7 +242,7 @@ export function SubscriptionEdit( props ) {
 				/>
 			</InspectorControls>
 			<BlockControls>
-				<Toolbar label={ paidPlanLabel }>
+				<Toolbar label={ paidPlanButtonText( hasTierPlans ) }>
 					<GetAddPaidPlanButton context={ 'toolbar' } hasTierPlans={ hasTierPlans } />
 				</Toolbar>
 			</BlockControls>

From 4d7d7e6107c8ee6479c41868927ea80a34bd5a85 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <lezama@gmail.com>
Date: Fri, 22 Nov 2024 11:38:03 -0300
Subject: [PATCH 4/6] remove module deactivated tests

---
 .../blocks/subscriptions/test/edit.js         | 28 -------------------
 1 file changed, 28 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
index c04916f35df8a..25a2f67209cb0 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
@@ -104,34 +104,6 @@ describe( 'SubscriptionEdit', () => {
 		).toBeInTheDocument();
 	} );
 
-	test( 'renders subscription placeholder when module is disabled', async () => {
-		useModuleStatus.mockReturnValue( {
-			isModuleActive: false,
-			changeStatus: jest.fn(),
-		} );
-
-		render( <SubscriptionEdit { ...defaultProps } /> );
-
-		const button = screen.getByText( defaultAttributes.subscriptionPlaceholderText );
-		fireEvent.submit( button );
-		expect( screen.getByText( defaultAttributes.subscriptionPlaceholderText ) ).toBeInTheDocument();
-	} );
-
-	test( 'calls subscription activation when placeholder button is clicked', async () => {
-		const user = userEvent.setup();
-		const onChangeStatus = jest.fn();
-		useModuleStatus.mockReturnValue( {
-			isModuleActive: false,
-			changeStatus: onChangeStatus,
-		} );
-
-		render( <SubscriptionEdit { ...defaultProps } /> );
-
-		const actionButton = screen.getByText( defaultAttributes.subscriptionPlaceholderText );
-		await user.click( actionButton );
-		expect( onChangeStatus ).toHaveBeenCalledWith( true );
-	} );
-
 	test( 'renders button with default text', async () => {
 		render( <SubscriptionEdit { ...defaultProps } /> );
 

From 46837658afdea5926ba64acf6df3907408b439f3 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <lezama@gmail.com>
Date: Fri, 22 Nov 2024 11:42:08 -0300
Subject: [PATCH 5/6] linter

---
 .../jetpack/extensions/blocks/subscriptions/test/edit.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
index 25a2f67209cb0..a7dd734ca1fba 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/test/edit.js
@@ -1,5 +1,5 @@
 import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SubscriptionEdit } from '../edit';
 

From 0e963c54f31001a4d6f472cbf01b2347e2c2d0f7 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <lezama@gmail.com>
Date: Fri, 22 Nov 2024 12:55:59 -0300
Subject: [PATCH 6/6] bring back lost props

---
 .../extensions/blocks/subscriptions/edit.js       | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
index 21d916cac3231..fd13b816809cf 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -5,6 +5,7 @@ import {
 	RichText,
 	withColors,
 	withFontSizes,
+	useBlockProps,
 	__experimentalUseGradient as useGradient, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor';
 import { TextControl, Toolbar, withFallbackStyles } from '@wordpress/components';
@@ -70,6 +71,7 @@ export function SubscriptionEdit( props ) {
 		hasTierPlans,
 	} = props;
 
+	const blockProps = useBlockProps();
 	const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
 	if ( ! isEqual( validatedAttributes, attributes ) ) {
 		setAttributes( validatedAttributes );
@@ -211,7 +213,16 @@ export function SubscriptionEdit( props ) {
 	}, [ buttonBackgroundColor, previousButtonBackgroundColor, borderColor, setBorderColor ] );
 
 	return (
-		<>
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				'wp-block-jetpack-subscriptions__container',
+				'wp-block-jetpack-subscriptions__supports-newline',
+				buttonOnNewLine ? 'wp-block-jetpack-subscriptions__use-newline' : undefined,
+				showSubscribersTotal ? 'wp-block-jetpack-subscriptions__show-subs' : undefined
+			) }
+		>
 			<InspectorControls>
 				<SubscriptionControls
 					buttonBackgroundColor={ buttonBackgroundColor }
@@ -281,7 +292,7 @@ export function SubscriptionEdit( props ) {
 					<div className="wp-block-jetpack-subscriptions__subscount">{ subscriberCountString }</div>
 				) }
 			</div>
-		</>
+		</div>
 	);
 }