Settings: Newsletter: Adding connection banner to each section (#39539)

* Settings: Adding connection banner for all Newsletter options * changelog * Settings: Updating icon for the Newsletter connection banner * Settings: Updating icon for the Newsletter connection banner * Settings: Renaming const and its value
Automattic · Oct 2, 2024 · 68099d6 · 68099d6
1 parent 2c2be03
commit 68099d6
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 11 deletions.
diff --git a/projects/packages/my-jetpack/changelog/update-settings-newsletter-1022-connection-banner b/projects/packages/my-jetpack/changelog/update-settings-newsletter-1022-connection-banner
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Updating connetion notice UI and adding it to each Newsletter settings section.
+
+
diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx b/projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx
@@ -13,6 +13,7 @@ import {
 	FEATURE_SPAM_AKISMET_PLUS,
 	FEATURE_SEARCH_JETPACK,
 	FEATURE_SIMPLE_PAYMENTS_JETPACK,
+	FEATURE_NEWSLETTER_JETPACK,
 	FEATURE_DOWNTIME_MONITORING_JETPACK,
 	FEATURE_SSO,
 	FEATURE_JETPACK_SOCIAL,
@@ -436,6 +437,22 @@ export const SettingsCard = inprops => {
 						rna
 					/>
 				);
+
+			case FEATURE_NEWSLETTER_JETPACK:
+				if ( props.hasConnectedOwner ) {
+					return '';
+				}
+
+				return (
+					<JetpackBanner
+						title={ __( 'Connect your WordPress.com account to enable newsletters.', 'jetpack' ) }
+						callToAction={ connectLabel() }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_NEWSLETTER_JETPACK ) }
+						feature={ feature }
+						onClick={ handleConnectClick( feature ) }
+						rna
+					/>
+				);
 			default:
 				return '';
 		}

diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js
@@ -400,6 +400,7 @@ export const FEATURE_JETPACK_AI = 'ai-jetpack';
 export const FEATURE_JETPACK_CRM = 'crm-jetpack';
 export const FEATURE_JETPACK_BOOST = 'boost-jetpack';
 export const FEATURE_SIMPLE_PAYMENTS_JETPACK = 'simple-payments-jetpack';
+export const FEATURE_NEWSLETTER_JETPACK = 'newsletter-jetpack';
 export const FEATURE_DOWNTIME_MONITORING_JETPACK = 'downtime-monitoring-jetpack';
 export const FEATURE_SSO = 'sso-jetpack';
 export const FEATURE_POST_BY_EMAIL = 'post-by-email-jetpack';
@@ -426,6 +427,7 @@ export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
 	[ FEATURE_SSO ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_VIDEO_HOSTING_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 	[ FEATURE_VIDEOPRESS ]: PLAN_JETPACK_VIDEOPRESS,
+	[ FEATURE_NEWSLETTER_JETPACK ]: PLAN_JETPACK_CREATOR_YEARLY,
 	[ FEATURE_WORDADS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
 };
 

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
@@ -18,6 +18,7 @@ import SettingsGroup from 'components/settings-group';
 import SupportInfo from 'components/support-info';
 import TextInput from 'components/text-input';
 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';
@@ -179,6 +180,7 @@ const EmailSettings = props => {
 			{ ...props }
 			header={ __( 'Email configuration', 'jetpack' ) }
 			hideButton
+			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			saveDisabled={ disabled }
 		>

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx b/projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx
@@ -3,6 +3,7 @@ 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 { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { isUnavailableInOfflineMode, isUnavailableInSiteConnectionMode } from 'state/connection';
@@ -43,6 +44,7 @@ const MessagesSetting = props => {
 		<SettingsCard
 			{ ...props }
 			header={ __( 'Messages', 'jetpack' ) }
+			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			saveDisabled={ disabled }
 		>

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
+import { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import React, { useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import {
@@ -91,6 +92,7 @@ function NewsletterCategories( props ) {
 		<SettingsCard
 			{ ...props }
 			header={ __( 'Newsletter categories', 'jetpack' ) }
+			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			saveDisabled={ disabled }
 		>

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx
@@ -1,12 +1,12 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
 import Card from 'components/card';
-import ConnectUserBar from 'components/connect-user-bar';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
 import { ModuleToggle } from 'components/module-toggle';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 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';
@@ -30,7 +30,6 @@ function Newsletter( props ) {
 		toggleModuleNow,
 		isSavingAnyOption,
 		isLinked,
-		isOffline,
 		isSubscriptionsActive,
 		unavailableInOfflineMode,
 		subscriptions,
@@ -62,6 +61,7 @@ function Newsletter( props ) {
 			{ ...props }
 			header={ __( 'Newsletter', 'jetpack' ) }
 			hideButton
+			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 		>
 			<SettingsGroup
@@ -94,14 +94,6 @@ function Newsletter( props ) {
 			</SettingsGroup>
 
 			{ getSubClickableCard() }
-
-			{ ! isLinked && ! isOffline && (
-				<ConnectUserBar
-					feature="subscriptions"
-					featureLabel={ __( 'Newsletter', 'jetpack' ) }
-					text={ __( 'Connect to manage your subscriptions settings.', 'jetpack' ) }
-				/>
-			) }
 		</SettingsCard>
 	);
 }

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx
@@ -4,6 +4,7 @@ import { withModuleSettingsFormHelpers } from 'components/module-settings/with-m
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 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';
@@ -27,7 +28,12 @@ function PaidNewsletter( props ) {
 	}, [] );
 
 	return (
-		<SettingsCard { ...props } header={ __( 'Paid Newsletter', 'jetpack' ) } hideButton>
+		<SettingsCard
+			{ ...props }
+			header={ __( 'Paid Newsletter', 'jetpack' ) }
+			hideButton
+			feature={ FEATURE_NEWSLETTER_JETPACK }
+		>
 			<SettingsGroup
 				disableInOfflineMode
 				disableInSiteConnectionMode

diff --git a/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx b/projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx
@@ -6,6 +6,7 @@ import { FormLegend, FormFieldset } 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 { FEATURE_NEWSLETTER_JETPACK } from 'lib/plans/constants';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { isCurrentUserLinked, isUnavailableInOfflineMode, isOfflineMode } from 'state/connection';
@@ -119,6 +120,7 @@ function SubscriptionsSettings( props ) {
 		<SettingsCard
 			{ ...props }
 			hideButton
+			feature={ FEATURE_NEWSLETTER_JETPACK }
 			module={ SUBSCRIPTIONS_MODULE_NAME }
 			header={ __( 'Subscriptions', 'jetpack' ) }
 		>

diff --git a/projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner b/projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Updating connetion notice UI and adding it to each Newsletter settings section.
+
+