Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Oct 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ca7a0e0
Settings: Adding connection banner for all Newsletter options
grzegorz-cp Sep 26, 2024
3330397
changelog
grzegorz-cp Sep 26, 2024
6803b56
Merge branch 'trunk' into update/settings-newsletter-1022-connection-…
grzegorz-cp Sep 30, 2024
b35b11f
Settings: Updating icon for the Newsletter connection banner
grzegorz-cp Sep 30, 2024
9713e7d
Settings: Updating icon for the Newsletter connection banner
grzegorz-cp Sep 30, 2024
3f7dbd1
Merge branch 'trunk' into update/settings-newsletter-1022-connection-…
grzegorz-cp Sep 30, 2024
50378a0
Settings: Renaming const and its value
grzegorz-cp Sep 30, 2024
fe302e2
Merge branch 'trunk' into update/settings-newsletter-1022-connection-…
grzegorz-cp Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions projects/packages/my-jetpack/changelog/update-settings-newsletter-1022-connection-banner
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: fixed
Comment: Updating connetion notice UI and adding it to each Newsletter settings section.


17 changes: 17 additions & 0 deletions projects/plugins/jetpack/_inc/client/components/settings-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
FEATURE_SPAM_AKISMET_PLUS,
FEATURE_SEARCH_JETPACK,
FEATURE_SIMPLE_PAYMENTS_JETPACK,
FEATURE_NEWSLETTER_JETPACK,
getJetpackProductUpsellByFeature,
} from 'lib/plans/constants';
import { get, includes } from 'lodash';
Expand Down Expand Up @@ -322,6 +323,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 '';
}
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/_inc/client/lib/plans/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

// Upsells
export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
Expand All @@ -416,6 +417,7 @@ export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
[ FEATURE_SIMPLE_PAYMENTS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
[ FEATURE_JETPACK_AI ]: PLAN_JETPACK_AI_YEARLY,
[ FEATURE_JETPACK_BOOST ]: PLAN_JETPACK_BOOST,
[ FEATURE_NEWSLETTER_JETPACK ]: PLAN_JETPACK_CREATOR_YEARLY,
};

/**
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/_inc/client/newsletter/email-settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -179,6 +180,7 @@ const EmailSettings = props => {
{ ...props }
header={ __( 'Email configuration', 'jetpack' ) }
hideButton
feature={ FEATURE_NEWSLETTER_JETPACK }
module={ SUBSCRIPTIONS_MODULE_NAME }
saveDisabled={ disabled }
>
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/_inc/client/newsletter/messages-setting.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -43,6 +44,7 @@ const MessagesSetting = props => {
<SettingsCard
{ ...props }
header={ __( 'Messages', 'jetpack' ) }
feature={ FEATURE_NEWSLETTER_JETPACK }
module={ SUBSCRIPTIONS_MODULE_NAME }
saveDisabled={ disabled }
>
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/_inc/client/newsletter/newsletter-categories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -91,6 +92,7 @@ function NewsletterCategories( props ) {
<SettingsCard
{ ...props }
header={ __( 'Newsletter categories', 'jetpack' ) }
feature={ FEATURE_NEWSLETTER_JETPACK }
module={ SUBSCRIPTIONS_MODULE_NAME }
saveDisabled={ disabled }
>
Expand Down
12 changes: 2 additions & 10 deletions projects/plugins/jetpack/_inc/client/newsletter/newsletter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -30,7 +30,6 @@ function Newsletter( props ) {
toggleModuleNow,
isSavingAnyOption,
isLinked,
isOffline,
isSubscriptionsActive,
unavailableInOfflineMode,
subscriptions,
Expand Down Expand Up @@ -62,6 +61,7 @@ function Newsletter( props ) {
{ ...props }
header={ __( 'Newsletter', 'jetpack' ) }
hideButton
feature={ FEATURE_NEWSLETTER_JETPACK }
module={ SUBSCRIPTIONS_MODULE_NAME }
>
<SettingsGroup
Expand Down Expand Up @@ -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>
);
}
Expand Down
8 changes: 7 additions & 1 deletion projects/plugins/jetpack/_inc/client/newsletter/paid-newsletter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions projects/plugins/jetpack/_inc/client/newsletter/subscriptions-settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -119,6 +120,7 @@ function SubscriptionsSettings( props ) {
<SettingsCard
{ ...props }
hideButton
feature={ FEATURE_NEWSLETTER_JETPACK }
module={ SUBSCRIPTIONS_MODULE_NAME }
header={ __( 'Subscriptions', 'jetpack' ) }
>
Expand Down
5 changes: 5 additions & 0 deletions projects/plugins/jetpack/changelog/update-settings-newsletter-1022-connection-banner
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: other
Comment: Updating connetion notice UI and adding it to each Newsletter settings section.


Loading