Settings: Removing disabled CSS from active controls

Automattic · Oct 1, 2024 · 2337c4f · 2337c4f
1 parent 242d276
commit 2337c4f
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 101 deletions.
diff --git a/...ages/my-jetpack/changelog/Disabling Newsletter settings controls for not connected users. b/...ages/my-jetpack/changelog/Disabling Newsletter settings controls for not connected users.
diff --git a/projects/packages/my-jetpack/changelog/newsletter-settings-visuals-for-active-elements. b/projects/packages/my-jetpack/changelog/newsletter-settings-visuals-for-active-elements.
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Remove disabled visuals from controls that are active.
+
+
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
@@ -20,7 +20,7 @@ import TextInput from 'components/text-input';
 import analytics from 'lib/analytics';
 import { useCallback, useState } from 'react';
 import { connect } from 'react-redux';
-import { isUnavailableInOfflineMode, isUnavailableInSiteConnectionMode } from 'state/connection';
+import { isUnavailableInOfflineMode } from 'state/connection';
 import {
 	getSiteTitle,
 	getUserGravatar,
@@ -58,7 +58,6 @@ const EmailSettings = props => {
 		subscriptionReplyTo,
 		subscriptionFromName,
 		updateFormStateAndSaveOptionValue,
-		unavailableInSiteConnectionMode,
 		gravatar,
 		email,
 		adminUrl,
@@ -67,8 +66,7 @@ const EmailSettings = props => {
 		siteName,
 	} = props;
 
-	const disabled =
-		! isSubscriptionsActive || unavailableInOfflineMode || unavailableInSiteConnectionMode;
+	const disabled = ! isSubscriptionsActive || unavailableInOfflineMode;
 	const gravatarInputDisabled = disabled || isSavingAnyOption( [ GRAVATER_OPTION ] );
 	const authorInputDisabled = disabled || isSavingAnyOption( [ AUTHOR_OPTION ] );
 	const postDateInputDisabled = disabled || isSavingAnyOption( [ POST_DATE_OPTION ] );
@@ -185,7 +183,6 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				support={ {
 					link: featuredImageInEmailSupportUrl,
@@ -210,7 +207,6 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				className="newsletter-group"
 			>
@@ -319,7 +315,6 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				support={ {
 					link: subscriptionsAndNewslettersSupportUrl,
@@ -357,7 +352,6 @@ const EmailSettings = props => {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				className="newsletter-group"
 				support={ {
@@ -475,10 +469,6 @@ export default withModuleSettingsFormHelpers(
 			subscriptionFromName: ownProps.getOptionValue( FROM_NAME_OPTION ),
 			dateExample: getNewsetterDateExample( state ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
 		};
 	} )( EmailSettings )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx b/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx
@@ -3,9 +3,9 @@ import { FormLabel } from 'components/forms';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { connect } from 'react-redux';
-import { isUnavailableInOfflineMode, isUnavailableInSiteConnectionMode } from 'state/connection';
+import { isUnavailableInOfflineMode } from 'state/connection';
 import { getModule } from 'state/modules';
 import Textarea from '../components/textarea';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
@@ -20,7 +20,6 @@ const MessagesSetting = props => {
 		onOptionChange,
 		welcomeMessage,
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
 	} = props;
 
 	const changeWelcomeMessageState = useCallback(
@@ -34,11 +33,7 @@ const MessagesSetting = props => {
 	);
 
 	const isSaving = isSavingAnyOption( [ SUBSCRIPTION_OPTIONS ] );
-	const disabled =
-		! isSubscriptionsActive ||
-		unavailableInOfflineMode ||
-		unavailableInSiteConnectionMode ||
-		isSaving;
+	const disabled = ! isSubscriptionsActive || unavailableInOfflineMode || isSaving;
 
 	return (
 		<SettingsCard
@@ -48,12 +43,7 @@ const MessagesSetting = props => {
 			saveDisabled={ isSaving }
 			isDisabled={ disabled }
 		>
-			<SettingsGroup
-				hasChild
-				disableInOfflineMode
-				disableInSiteConnectionMode
-				module={ subscriptionsModule }
-			>
+			<SettingsGroup hasChild disableInOfflineMode module={ subscriptionsModule }>
 				<p className="jp-settings-card__email-settings">
 					{ __(
 						'These settings change the emails sent from your site to your readers.',
@@ -92,10 +82,6 @@ export default withModuleSettingsFormHelpers(
 			onOptionChange: ownProps.onOptionChange,
 			welcomeMessage: ownProps.getOptionValue( SUBSCRIPTION_OPTIONS )?.welcome || '',
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
 		};
 	} )( MessagesSetting )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
@@ -5,11 +5,7 @@ import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
-import {
-	isUnavailableInOfflineMode,
-	isUnavailableInSiteConnectionMode,
-	requiresConnection,
-} from 'state/connection';
+import { isUnavailableInOfflineMode, requiresConnection } from 'state/connection';
 import { getModule } from 'state/modules';
 import Card from '../components/card';
 import { withModuleSettingsFormHelpers } from '../components/module-settings/with-module-settings-form-helpers';
@@ -44,7 +40,6 @@ function NewsletterCategories( props ) {
 		newsletterCategories,
 		categories,
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
 		subscriptionsModule,
 		updateFormStateOptionValue,
 		isSavingAnyOption,
@@ -85,11 +80,7 @@ function NewsletterCategories( props ) {
 		NEWSLETTER_CATEGORIES_ENABLED_OPTION,
 		NEWSLETTER_CATEGORIES_OPTION,
 	] );
-	const disabled =
-		! isSubscriptionsActive ||
-		unavailableInOfflineMode ||
-		unavailableInSiteConnectionMode ||
-		isSaving;
+	const disabled = ! isSubscriptionsActive || unavailableInOfflineMode || isSaving;
 
 	return (
 		<SettingsCard
@@ -102,7 +93,6 @@ function NewsletterCategories( props ) {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptionsModule }
 				support={ {
 					text: __(
@@ -173,10 +163,6 @@ 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
-			),
 		};
 	} )( NewsletterCategories )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx
@@ -9,12 +9,7 @@ import SettingsGroup from 'components/settings-group';
 import analytics from 'lib/analytics';
 import React from 'react';
 import { connect } from 'react-redux';
-import {
-	isCurrentUserLinked,
-	isUnavailableInOfflineMode,
-	isOfflineMode,
-	isUnavailableInSiteConnectionMode,
-} from 'state/connection';
+import { isCurrentUserLinked, isUnavailableInOfflineMode, isOfflineMode } from 'state/connection';
 import { getModule } from 'state/modules';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
 
@@ -38,7 +33,6 @@ function Newsletter( props ) {
 		isOffline,
 		isSubscriptionsActive,
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
 		subscriptions,
 	} = props;
 
@@ -73,7 +67,6 @@ function Newsletter( props ) {
 			<SettingsGroup
 				hasChild
 				disableInOfflineMode
-				disableInSiteConnectionMode
 				module={ subscriptions }
 				support={ {
 					text: __(
@@ -85,7 +78,7 @@ function Newsletter( props ) {
 			>
 				<ModuleToggle
 					slug="subscriptions"
-					disabled={ unavailableInOfflineMode || unavailableInSiteConnectionMode }
+					disabled={ unavailableInOfflineMode }
 					activated={ isSubscriptionsActive }
 					toggling={ isSavingAnyOption( SUBSCRIPTIONS_MODULE_NAME ) }
 					toggleModule={ toggleModuleNow }
@@ -119,10 +112,6 @@ export default withModuleSettingsFormHelpers(
 			isOffline: isOfflineMode( state ),
 			isSubscriptionsActive: ownProps.getOptionValue( SUBSCRIPTIONS_MODULE_NAME ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
 			subscriptions: getModule( state, SUBSCRIPTIONS_MODULE_NAME ),
 		};
 	} )( Newsletter )

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx
@@ -6,7 +6,7 @@ import SettingsGroup from 'components/settings-group';
 import analytics from 'lib/analytics';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
-import { isUnavailableInSiteConnectionMode, isOfflineMode } from 'state/connection';
+import { isOfflineMode } from 'state/connection';
 import { getJetpackCloudUrl } from 'state/initial-state';
 import { getModule } from 'state/modules';
 import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
@@ -18,27 +18,17 @@ import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
  * @return {React.Component} Paid Newsletter component.
  */
 function PaidNewsletter( props ) {
-	const {
-		isSubscriptionsActive,
-		setupPaymentPlansUrl,
-		subscriptionsModule,
-		unavailableInSiteConnectionMode,
-	} = props;
+	const { isSubscriptionsActive, setupPaymentPlansUrl, subscriptionsModule } = props;
 
-	const setupPaymentPlansButtonDisabled =
-		! isSubscriptionsActive || unavailableInSiteConnectionMode;
+	const setupPaymentPlansButtonDisabled = ! isSubscriptionsActive;
 
 	const trackSetupPaymentPlansButtonClick = useCallback( () => {
 		analytics.tracks.recordJetpackClick( 'newsletter_settings_setup_payment_plans_button_click' );
 	}, [] );
 
 	return (
 		<SettingsCard { ...props } header={ __( 'Paid Newsletter', 'jetpack' ) } hideButton>
-			<SettingsGroup
-				disableInOfflineMode
-				disableInSiteConnectionMode
-				module={ subscriptionsModule }
-			>
+			<SettingsGroup disableInOfflineMode module={ subscriptionsModule }>
 				<p className="jp-settings-card__email-settings">
 					{ __(
 						'Earn money through your Newsletter. Reward your most loyal subscribers with exclusive content or add a paywall to monetize content.',
@@ -67,10 +57,6 @@ export default withModuleSettingsFormHelpers(
 			setupPaymentPlansUrl: getJetpackCloudUrl( state, 'monetize/payments' ),
 			subscriptionsModule: getModule( state, SUBSCRIPTIONS_MODULE_NAME ),
 			isOffline: isOfflineMode( state ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
 		};
 	} )( PaidNewsletter )
 );
diff --git a/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx
@@ -8,12 +8,7 @@ import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
-import {
-	isCurrentUserLinked,
-	isUnavailableInOfflineMode,
-	isOfflineMode,
-	isUnavailableInSiteConnectionMode,
-} from 'state/connection';
+import { isCurrentUserLinked, isUnavailableInOfflineMode, isOfflineMode } from 'state/connection';
 import {
 	currentThemeIsBlockTheme,
 	currentThemeStylesheet,
@@ -32,7 +27,6 @@ import { SUBSCRIPTIONS_MODULE_NAME } from './constants';
 function SubscriptionsSettings( props ) {
 	const {
 		unavailableInOfflineMode,
-		unavailableInSiteConnectionMode,
 		isSavingAnyOption,
 		isStbEnabled,
 		isStcEnabled,
@@ -119,8 +113,7 @@ function SubscriptionsSettings( props ) {
 		);
 	}, [ updateFormStateModuleOption ] );
 
-	const isDisabled =
-		! isSubscriptionsActive || unavailableInOfflineMode || unavailableInSiteConnectionMode;
+	const isDisabled = ! isSubscriptionsActive || unavailableInOfflineMode;
 
 	return (
 		<SettingsCard
@@ -129,7 +122,7 @@ function SubscriptionsSettings( props ) {
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			header={ __( 'Subscriptions', 'jetpack' ) }
 		>
-			<SettingsGroup disableInOfflineMode disableInSiteConnectionMode module={ subscriptions }>
+			<SettingsGroup disableInOfflineMode module={ subscriptions }>
 				<p>
 					{ __(
 						'Automatically add subscription forms to your site and turn visitors into subscribers.',
@@ -282,10 +275,6 @@ export default withModuleSettingsFormHelpers(
 			isOffline: isOfflineMode( state ),
 			isSubscriptionsActive: ownProps.getOptionValue( SUBSCRIPTIONS_MODULE_NAME ),
 			unavailableInOfflineMode: isUnavailableInOfflineMode( state, SUBSCRIPTIONS_MODULE_NAME ),
-			unavailableInSiteConnectionMode: isUnavailableInSiteConnectionMode(
-				state,
-				SUBSCRIPTIONS_MODULE_NAME
-			),
 			subscriptions: getModule( state, SUBSCRIPTIONS_MODULE_NAME ),
 			isStbEnabled: ownProps.getOptionValue( 'stb_enabled' ),
 			isStcEnabled: ownProps.getOptionValue( 'stc_enabled' ),

diff --git a/...plugins/jetpack/changelog/Disabling Newsletter settings controls for not connected users. b/...plugins/jetpack/changelog/Disabling Newsletter settings controls for not connected users.
diff --git a/projects/plugins/jetpack/changelog/newsletter-settings-visuals-for-active-elements b/projects/plugins/jetpack/changelog/newsletter-settings-visuals-for-active-elements
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Remove disabled visuals from controls that are active.
+
+