Subscriptions: Add the Subscriber Login navigation placement toggle (#…

…90037)

client/my-sites/site-settings/settings-newsletter/SubscriberLoginNavigationSetting.tsx

@@ -0,0 +1,57 @@
+import { ExternalLink, ToggleControl } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import { useActiveThemeQuery } from 'calypso/data/themes/use-active-theme-query';
+import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
+import getSiteEditorUrl from 'calypso/state/selectors/get-site-editor-url';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+
+const SUBSCRIBER_LOGIN_NAVIGATION_OPTION = 'jetpack_subscriptions_login_navigation_enabled';
+
+interface SubscriberLoginNavigationSettingProps {
+	value?: boolean;
+	handleToggle: ( field: string ) => ( value: boolean ) => void;
+	disabled?: boolean;
+}
+
+export const SubscriberLoginNavigationSetting = ( {
+	value = false,
+	handleToggle,
+	disabled,
+}: SubscriberLoginNavigationSettingProps ) => {
+	const translate = useTranslate();
+	const siteId = useSelector( getSelectedSiteId ) as number;
+
+	const siteEditorUrl = useSelector( ( state: object ) => getSiteEditorUrl( state, siteId ) );
+	const { data: activeThemeData } = useActiveThemeQuery( siteId, true );
+
+	const getEditUrl = () => {
+		const themeSlug = activeThemeData?.[ 0 ]?.stylesheet;
+
+		return addQueryArgs( siteEditorUrl, {
+			postType: 'wp_template',
+			postId: `${ themeSlug }//index`,
+		} );
+	};
+
+	const onEditClick = () => {
+		recordTracksEvent( 'calypso_settings_subscriber_login_navigation_edit_click' );
+	};
+
+	return (
+		<ToggleControl
+			checked={ !! value }
+			onChange={ handleToggle( SUBSCRIBER_LOGIN_NAVIGATION_OPTION ) }
+			disabled={ disabled }
+			label={
+				<>
+					{ translate( 'Add the Subscriber Login Block to the navigation.' ) }{ ' ' }
+					<ExternalLink href={ getEditUrl() } onClick={ onEditClick }>
+						{ translate( 'Preview and edit' ) }
+					</ExternalLink>
+				</>
+			}
+		/>
+	);
+};

client/my-sites/site-settings/settings-newsletter/main.tsx

@@ -19,6 +19,7 @@ import { FeaturedImageEmailSetting } from './FeaturedImageEmailSetting';
 import { SubscribeModalOnCommentSetting } from './SubscribeModalOnCommentSetting';
 import { SubscribeModalSetting } from './SubscribeModalSetting';
 import { SubscribePostEndSetting } from './SubscribePostEndSetting';
+import { SubscriberLoginNavigationSetting } from './SubscriberLoginNavigationSetting';
 import { NewsletterCategoriesSection } from './newsletter-categories-section';
 
 const defaultNewsletterCategoryIds: number[] = [];
@@ -37,6 +38,7 @@ type Fields = {
 	wpcom_subscription_emails_use_excerpt?: boolean;
 	sm_enabled?: boolean;
 	jetpack_subscriptions_subscribe_post_end_enabled?: boolean;
+	jetpack_subscriptions_login_navigation_enabled?: boolean;
 	jetpack_verbum_subscription_modal?: boolean;
 };
 
@@ -53,6 +55,7 @@ const getFormSettings = ( settings?: Fields ) => {
 		wpcom_subscription_emails_use_excerpt,
 		sm_enabled,
 		jetpack_subscriptions_subscribe_post_end_enabled,
+		jetpack_subscriptions_login_navigation_enabled,
 		jetpack_verbum_subscription_modal,
 	} = settings;
 
@@ -65,6 +68,8 @@ const getFormSettings = ( settings?: Fields ) => {
 		sm_enabled: !! sm_enabled,
 		jetpack_subscriptions_subscribe_post_end_enabled:
 			!! jetpack_subscriptions_subscribe_post_end_enabled,
+		jetpack_subscriptions_login_navigation_enabled:
+			!! jetpack_subscriptions_login_navigation_enabled,
 		jetpack_verbum_subscription_modal: !! jetpack_verbum_subscription_modal,
 	};
 };
@@ -97,6 +102,7 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( {
 		subscription_options,
 		sm_enabled,
 		jetpack_subscriptions_subscribe_post_end_enabled,
+		jetpack_subscriptions_login_navigation_enabled,
 		jetpack_verbum_subscription_modal,
 	} = fields;
 
@@ -164,6 +170,11 @@ const NewsletterSettingsForm = wrapSettingsForm( getFormSettings )( ( {
 						value={ jetpack_verbum_subscription_modal }
 					/>
 				) }
+				<SubscriberLoginNavigationSetting
+					disabled={ disabled }
+					handleToggle={ handleToggle }
+					value={ jetpack_subscriptions_login_navigation_enabled }
+				/>
 			</Card>
 			{ /* @ts-expect-error SettingsSectionHeader is not typed and is causing errors */ }
 			<SettingsSectionHeader

client/my-sites/site-settings/settings-reading/main.tsx

@@ -38,6 +38,7 @@ type Fields = {
 	wpcom_subscription_emails_use_excerpt?: boolean;
 	sm_enabled?: boolean;
 	jetpack_subscriptions_subscribe_post_end_enabled?: boolean;
+	jetpack_subscriptions_login_navigation_enabled?: boolean;
 	date_format?: string;
 	timezone_string?: string;
 };
@@ -65,6 +66,7 @@ const getFormSettings = ( settings: unknown & Fields ) => {
 		wpcom_subscription_emails_use_excerpt,
 		sm_enabled,
 		jetpack_subscriptions_subscribe_post_end_enabled,
+		jetpack_subscriptions_login_navigation_enabled,
 		date_format,
 		timezone_string,
 	} = settings;
@@ -88,6 +90,8 @@ const getFormSettings = ( settings: unknown & Fields ) => {
 		sm_enabled: !! sm_enabled,
 		jetpack_subscriptions_subscribe_post_end_enabled:
 			!! jetpack_subscriptions_subscribe_post_end_enabled,
+		jetpack_subscriptions_login_navigation_enabled:
+			!! jetpack_subscriptions_login_navigation_enabled,
 		date_format: date_format,
 		timezone_string: timezone_string,
 	};

client/my-sites/site-settings/wrap-settings-form.jsx

@@ -204,6 +204,12 @@ const wrapSettingsForm = ( getFormSettings ) => ( SettingsForm ) => {
 							path,
 						} );
 						break;
+					case 'jetpack_subscriptions_login_navigation_enabled':
+						trackTracksEvent( 'calypso_settings_subscriber_login_navigation_updated', {
+							value: fields.jetpack_subscriptions_login_navigation_enabled,
+							path,
+						} );
+						break;
 					case 'subscription_options':
 						if ( fields.subscription_options.welcome !== settings.subscription_options.welcome ) {
 							trackTracksEvent( 'calypso_settings_subscription_options_welcome_updated', {