Update/email preview improvements (#38884)

Automattic · Aug 23, 2024 · d72dcd2 · d72dcd2
1 parent 0bd97e0
commit d72dcd2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 25 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-email-preview-improvements-2 b/projects/plugins/jetpack/changelog/update-email-preview-improvements-2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+featured flagged feature
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js
@@ -1,3 +1,4 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import { Button, PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { PluginSidebar } from '@wordpress/edit-post';
@@ -23,40 +24,58 @@ const NewsletterMenu = () => {
 	const accessLevel = useAccessLevel( postType );
 	const isPublished = postStatus === 'publish';
 
+	const { isUserConnected } = useConnection();
+	const connectUrl = `${ window?.Jetpack_Editor_Initial_State?.adminUrl }admin.php?page=my-jetpack#/connection`;
+
 	const openModal = () => setIsModalOpen( true );
 	const closeModal = () => setIsModalOpen( false );
 
 	return (
-		<>
-			<PluginSidebar
-				name="newsletter-settings-sidebar"
-				title={ __( 'Newsletter', 'jetpack' ) }
-				icon={ <SendIcon /> }
-			>
-				<PanelBody>
-					<SubscribersAffirmation accessLevel={ accessLevel } prePublish={ ! isPublished } />
-					{ ! isPublished && (
+		<PluginSidebar
+			name="newsletter-settings-sidebar"
+			title={ __( 'Newsletter', 'jetpack' ) }
+			icon={ <SendIcon /> }
+		>
+			<PanelBody>
+				{ isUserConnected ? (
+					<>
+						<SubscribersAffirmation accessLevel={ accessLevel } />
+						{ ! isPublished && (
+							<p>
+								{ __(
+									'Ensure your email looks perfect. Use the buttons below to view a preview or send a test email.',
+									'jetpack'
+								) }
+							</p>
+						) }
+						<Button
+							onClick={ openModal }
+							style={ {
+								marginRight: '18px',
+								marginTop: '10px',
+							} }
+							variant="secondary"
+							disabled={ isPublished }
+						>
+							{ __( 'Preview email', 'jetpack' ) }
+						</Button>
+						<PreviewModal isOpen={ isModalOpen } onClose={ closeModal } postId={ postId } />
+					</>
+				) : (
+					<>
 						<p>
 							{ __(
-								'Ensure your email looks perfect. Use the buttons below to view a preview or send a test email.',
+								'To email your posts, build an audience, and use features like preview and test, connect to WordPress.com cloud.',
 								'jetpack'
 							) }
 						</p>
-					) }
-					<Button
-						onClick={ openModal }
-						style={ {
-							marginRight: '18px',
-						} }
-						variant="secondary"
-						disabled={ isPublished }
-					>
-						{ __( 'Preview email', 'jetpack' ) }
-					</Button>
-				</PanelBody>
-			</PluginSidebar>
-			<PreviewModal isOpen={ isModalOpen } onClose={ closeModal } postId={ postId } />
-		</>
+						<Button variant="primary" href={ connectUrl } style={ { marginTop: '10px' } }>
+							{ __( 'Connect WordPress.com account', 'jetpack' ) }
+						</Button>
+					</>
+				) }
+			</PanelBody>
+		</PluginSidebar>
 	);
 };