Settings - Newsletter, Sharing: Disabling options for sites missing u…

…ser connection (#39520) * Newsletters: Disabling controls that need user connection * changelog * Settings: Fixing disabled label when not saving * Settings: Improving isLinked check * Settings: Removing disabled CSS from active controls * Settings: Disabling sharing without a connected user * Settings: Disabling newsletter settings for sites without a single connected user * Settings: Disabling also whole groups * Settings: Updating the description of the task * Settings: Updating the description of the task
Automattic · Oct 6, 2024 · 6b41b2a · 6b41b2a
1 parent 8a5b2e7
commit 6b41b2a
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 52 deletions.
diff --git a/projects/packages/my-jetpack/changelog/settings-disable-inactive-elements b/projects/packages/my-jetpack/changelog/settings-disable-inactive-elements
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Disable controls that require user connection.
+
+
diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx
@@ -51,6 +51,7 @@ export const SettingsCard = inprops => {
 	const props = {
 		action: '',
 		saveDisabled: false,
+		isDisabled: false,
 		...inprops,
 	};
 
@@ -94,6 +95,7 @@ export const SettingsCard = inprops => {
 		return <span />;
 	}
 
+	const isDisabled = props.isDisabled;
 	const isSaving = props.saveDisabled,
 		feature = props.feature ? props.feature : false;
 	let header = props.header ? props.header : '';
@@ -545,11 +547,17 @@ export const SettingsCard = inprops => {
 			<form
 				{ ...( moduleId ? { id: moduleId } : null ) }
 				className={ `jp-form-settings-card` }
-				onSubmit={ ! isSaving ? props.onSubmit : undefined }
+				onSubmit={ ! isDisabled && ! isSaving ? props.onSubmit : undefined }
 			>
 				<SectionHeader label={ header }>
 					{ ! props.hideButton && (
-						<Button primary rna compact type="submit" disabled={ isSaving || ! props.isDirty() }>
+						<Button
+							primary
+							rna
+							compact
+							type="submit"
+							disabled={ isDisabled || isSaving || ! props.isDirty() }
+						>
 							{ isSaving
 								? _x( 'Saving…', 'Button caption', 'jetpack' )
 								: _x(
@@ -578,6 +586,7 @@ export const SettingsCard = inprops => {
 SettingsCard.propTypes = {
 	action: PropTypes.string,
 	saveDisabled: PropTypes.bool,
+	isDisabled: PropTypes.bool,
 };
 
 export default connect(

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
@@ -21,7 +21,7 @@ import analytics from 'lib/analytics';
 import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import { useCallback, useState } from 'react';
 import { connect } from 'react-redux';
-import { isUnavailableInOfflineMode, isUnavailableInSiteConnectionMode } from 'state/connection';
+import { isUnavailableInOfflineMode, hasConnectedOwner } from 'state/connection';
 import {
 	getSiteTitle,
 	getUserGravatar,
@@ -59,17 +59,17 @@ const EmailSettings = props => {
 		subscriptionReplyTo,
 		subscriptionFromName,
 		updateFormStateAndSaveOptionValue,
-		unavailableInSiteConnectionMode,
 		gravatar,
 		email,
 		adminUrl,
 		displayName,
 		dateExample,
 		siteName,
+		siteHasConnectedUser,
 	} = props;
 
-	const disabled =
-		! isSubscriptionsActive || unavailableInOfflineMode || unavailableInSiteConnectionMode;
+	const disabled = ! siteHasConnectedUser || ! isSubscriptionsActive || unavailableInOfflineMode;
+	const isSaving = isSavingAnyOption( [ GRAVATER_OPTION, AUTHOR_OPTION, POST_DATE_OPTION ] );
 	const gravatarInputDisabled = disabled || isSavingAnyOption( [ GRAVATER_OPTION ] );
 	const authorInputDisabled = disabled || isSavingAnyOption( [ AUTHOR_OPTION ] );
 	const postDateInputDisabled = disabled || isSavingAnyOption( [ POST_DATE_OPTION ] );
@@ -182,12 +182,13 @@ const EmailSettings = props => {
 			hideButton
 			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
-			saveDisabled={ disabled }
+			saveDisabled={ isSaving }
+			isDisabled={ disabled }
 		>
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 				support={ {
 					link: featuredImageInEmailSupportUrl,
@@ -212,7 +213,7 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 				className="newsletter-group"
 			>
@@ -321,7 +322,7 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 				support={ {
 					link: subscriptionsAndNewslettersSupportUrl,
@@ -359,7 +360,7 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 				className="newsletter-group"
 				support={ {
@@ -477,10 +478,7 @@ export default withModuleSettingsFormHelpers(
 			subscriptionFromName: ownProps.getOptionValue( FROM_NAME_OPTION ),
 			dateExample: getNewsetterDateExample( state ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
+			siteHasConnectedUser: hasConnectedOwner( state ),
 		};
 	} )( EmailSettings )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx b/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx
@@ -4,9 +4,9 @@ import { withModuleSettingsFormHelpers } from 'components/module-settings/with-m
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { connect } from 'react-redux';
-import { isUnavailableInOfflineMode, isUnavailableInSiteConnectionMode } from 'state/connection';
+import { isUnavailableInOfflineMode, hasConnectedOwner } from 'state/connection';
 import { getModule } from 'state/modules';
 import Textarea from '../components/textarea';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
@@ -21,7 +21,7 @@ const MessagesSetting = props => {
 		onOptionChange,
 		welcomeMessage,
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
+		siteHasConnectedUser,
 	} = props;
 
 	const changeWelcomeMessageState = useCallback(
@@ -34,24 +34,23 @@ const MessagesSetting = props => {
 		[ onOptionChange ]
 	);
 
+	const isSaving = isSavingAnyOption( [ SUBSCRIPTION_OPTIONS ] );
 	const disabled =
-		! isSubscriptionsActive ||
-		unavailableInOfflineMode ||
-		unavailableInSiteConnectionMode ||
-		isSavingAnyOption( [ SUBSCRIPTION_OPTIONS ] );
+		! siteHasConnectedUser || ! isSubscriptionsActive || unavailableInOfflineMode || isSaving;
 
 	return (
 		<SettingsCard
 			{ ...props }
 			header={ __( 'Messages', 'jetpack' ) }
 			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
-			saveDisabled={ disabled }
+			saveDisabled={ isSaving }
+			isDisabled={ disabled }
 		>
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 			>
 				<p className="jp-settings-card__email-settings">
@@ -92,10 +91,7 @@ export default withModuleSettingsFormHelpers(
 			onOptionChange: ownProps.onOptionChange,
 			welcomeMessage: ownProps.getOptionValue( SUBSCRIPTION_OPTIONS )?.welcome || '',
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
+			siteHasConnectedUser: hasConnectedOwner( state ),
 		};
 	} )( MessagesSetting )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
@@ -8,8 +8,8 @@ import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import {
 	isUnavailableInOfflineMode,
-	isUnavailableInSiteConnectionMode,
 	requiresConnection,
+	hasConnectedOwner,
 } from 'state/connection';
 import { getModule } from 'state/modules';
 import Card from '../components/card';
@@ -45,10 +45,10 @@ function NewsletterCategories( props ) {
 		newsletterCategories,
 		categories,
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
 		subscriptionsModule,
 		updateFormStateOptionValue,
 		isSavingAnyOption,
+		siteHasConnectedUser,
 	} = props;
 
 	const handleEnableNewsletterCategoriesToggleChange = useCallback( () => {
@@ -82,24 +82,26 @@ function NewsletterCategories( props ) {
 		[ checkedCategoriesIds, updateFormStateOptionValue ]
 	);
 
+	const isSaving = isSavingAnyOption( [
+		NEWSLETTER_CATEGORIES_ENABLED_OPTION,
+		NEWSLETTER_CATEGORIES_OPTION,
+	] );
 	const disabled =
-		! isSubscriptionsActive ||
-		unavailableInOfflineMode ||
-		unavailableInSiteConnectionMode ||
-		isSavingAnyOption( [ NEWSLETTER_CATEGORIES_ENABLED_OPTION, NEWSLETTER_CATEGORIES_OPTION ] );
+		! siteHasConnectedUser || ! isSubscriptionsActive || unavailableInOfflineMode || isSaving;
 
 	return (
 		<SettingsCard
 			{ ...props }
 			header={ __( 'Newsletter categories', 'jetpack' ) }
 			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
-			saveDisabled={ disabled }
+			saveDisabled={ isSaving }
+			isDisabled={ disabled }
 		>
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 				support={ {
 					text: __(
@@ -170,10 +172,7 @@ export default withModuleSettingsFormHelpers(
 			categories: ownProps.getOptionValue( 'categories' ),
 			requiresConnection: requiresConnection( state, SUBSCRIPTIONS_MODULE_NAME ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
+			siteHasConnectedUser: hasConnectedOwner( state ),
 		};
 	} )( NewsletterCategories )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx
@@ -9,7 +9,12 @@ import analytics from 'lib/analytics';
 import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import React from 'react';
 import { connect } from 'react-redux';
-import { isCurrentUserLinked, isUnavailableInOfflineMode, isOfflineMode } from 'state/connection';
+import {
+	isCurrentUserLinked,
+	isUnavailableInOfflineMode,
+	isOfflineMode,
+	hasConnectedOwner,
+} from 'state/connection';
 import { getModule } from 'state/modules';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
 
@@ -33,6 +38,7 @@ function Newsletter( props ) {
 		isSubscriptionsActive,
 		unavailableInOfflineMode,
 		subscriptions,
+		siteHasConnectedUser,
 	} = props;
 
 	const getSubClickableCard = () => {
@@ -63,11 +69,12 @@ function Newsletter( props ) {
 			hideButton
 			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
+			isDisabled={ ! siteHasConnectedUser }
 		>
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptions }
 				support={ {
 					text: __(
@@ -79,7 +86,7 @@ function Newsletter( props ) {
 			>
 				<ModuleToggle
 					slug="subscriptions"
-					disabled={ unavailableInOfflineMode }
+					disabled={ ! siteHasConnectedUser || unavailableInOfflineMode }
 					activated={ isSubscriptionsActive }
 					toggling={ isSavingAnyOption( SUBSCRIPTIONS_MODULE_NAME ) }
 					toggleModule={ toggleModuleNow }
@@ -106,6 +113,7 @@ export default withModuleSettingsFormHelpers(
 			isSubscriptionsActive: ownProps.getOptionValue( SUBSCRIPTIONS_MODULE_NAME ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
 			subscriptions: getModule( state, SUBSCRIPTIONS_MODULE_NAME ),
+			siteHasConnectedUser: hasConnectedOwner( state ),
 		};
 	} )( Newsletter )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx
@@ -7,7 +7,7 @@ import analytics from 'lib/analytics';
 import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
-import { isOfflineMode } from 'state/connection';
+import { isOfflineMode, hasConnectedOwner } from 'state/connection';
 import { getJetpackCloudUrl } from 'state/initial-state';
 import { getModule } from 'state/modules';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
@@ -19,7 +19,8 @@ import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
  * @return {React.Component} Paid Newsletter component.
  */
 function PaidNewsletter( props ) {
-	const { isSubscriptionsActive, setupPaymentPlansUrl, subscriptionsModule } = props;
+	const { isSubscriptionsActive, setupPaymentPlansUrl, subscriptionsModule, siteHasConnectedUser } =
+		props;
 
 	const setupPaymentPlansButtonDisabled = ! isSubscriptionsActive;
 
@@ -33,10 +34,11 @@ function PaidNewsletter( props ) {
 			header={ __( 'Paid Newsletter', 'jetpack' ) }
 			hideButton
 			feature={ FEATURE_NEWSLETTER_JETPACK }
+			isDisabled={ ! siteHasConnectedUser }
 		>
 			<SettingsGroup
 				disableInOfflineMode
-				disableInSiteConnectionMode
+				disableInSiteConnectionMode={ ! siteHasConnectedUser }
 				module={ subscriptionsModule }
 			>
 				<p className="jp-settings-card__email-settings">
@@ -49,7 +51,7 @@ function PaidNewsletter( props ) {
 				<Button
 					href={ ! setupPaymentPlansButtonDisabled ? setupPaymentPlansUrl : undefined }
 					onClick={ trackSetupPaymentPlansButtonClick }
-					disabled={ setupPaymentPlansButtonDisabled }
+					disabled={ ! siteHasConnectedUser || setupPaymentPlansButtonDisabled }
 					primary
 					rna
 				>
@@ -67,6 +69,7 @@ export default withModuleSettingsFormHelpers(
 			setupPaymentPlansUrl: getJetpackCloudUrl( state, 'monetize/payments' ),
 			subscriptionsModule: getModule( state, SUBSCRIPTIONS_MODULE_NAME ),
 			isOffline: isOfflineMode( state ),
+			siteHasConnectedUser: hasConnectedOwner( state ),
 		};
 	} )( PaidNewsletter )
 );