From 68099d6847122a321690378887b0b5afdb8da958 Mon Sep 17 00:00:00 2001 From: Grzegorz Chudzinski-Pawlowski <112354940+grzegorz-cp@users.noreply.github.com> Date: Wed, 2 Oct 2024 14:15:16 +1300 Subject: [PATCH] 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 --- ...e-settings-newsletter-1022-connection-banner | 5 +++++ .../client/components/settings-card/index.jsx | 17 +++++++++++++++++ .../jetpack/_inc/client/lib/plans/constants.js | 2 ++ .../_inc/client/newsletter/email-settings.jsx | 2 ++ .../_inc/client/newsletter/messages-setting.jsx | 2 ++ .../client/newsletter/newsletter-categories.jsx | 2 ++ .../_inc/client/newsletter/newsletter.jsx | 12 ++---------- .../_inc/client/newsletter/paid-newsletter.jsx | 8 +++++++- .../newsletter/subscriptions-settings.jsx | 2 ++ ...e-settings-newsletter-1022-connection-banner | 5 +++++ 10 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 projects/packages/my-jetpack/changelog/update-settings-newsletter-1022-connection-banner create mode 100644 projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner 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 new file mode 100644 index 0000000000000..15151b2eb03ee --- /dev/null +++ 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 index 40bc7a8ca301a..f388ffbb37235 100644 --- 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 ( + + ); default: return ''; } diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js index 995306b550c74..f405b231ebe88 100644 --- 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 index bbd1e8c4094d7..66062cd6987e7 100644 --- 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 index 814ee4539b02e..b8a67fcd2450c 100644 --- 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 => { diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx index 6618def65cd21..608c1b7e92a24 100644 --- 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 ) { diff --git a/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx index d080c8365daec..7ac42e80384fa 100644 --- 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 } > { getSubClickableCard() } - - { ! isLinked && ! isOffline && ( - - ) } ); } diff --git a/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx b/projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx index 2489985dd4c3a..991334fdf24d5 100644 --- 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 ( - + diff --git a/projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner b/projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner new file mode 100644 index 0000000000000..c7328c94ed65a --- /dev/null +++ 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. + +