Newsletter: Email Preview: Improved styles and information (#38862)

Automattic · Aug 13, 2024 · 762b78d · 762b78d
1 parent c61f843
commit 762b78d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-email-preview-improvements b/projects/plugins/jetpack/changelog/update-email-preview-improvements
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+small change under feature flag
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -335,6 +335,9 @@ export function PreviewModal( { isOpen, onClose, postId } ) {
 						justifyContent: 'center',
 						alignItems: 'center',
 						height: 'calc(100vh - 190px)',
+						backgroundColor: '#ddd',
+						paddingTop: selectedDevice !== 'desktop' ? '36px' : '0',
+						transition: 'padding 0.5s ease-in-out',
 					} }
 				>
 					{ isLoading ? (
@@ -344,8 +347,10 @@ export function PreviewModal( { isOpen, onClose, postId } ) {
 							srcDoc={ previewCache?.[ selectedAccess ] }
 							style={ {
 								width: deviceWidth,
+								maxWidth: '100%',
 								height: '100%',
 								border: 'none',
+								transition: 'width 0.5s ease-in-out',
 							} }
 							title={ __( 'Email Preview', 'jetpack' ) }
 						/>

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/menu.js
@@ -3,19 +3,26 @@ import { useSelect } from '@wordpress/data';
 import { PluginSidebar } from '@wordpress/edit-post';
 import { __ } from '@wordpress/i18n';
 import { useState } from 'react';
-import { PreviewModal } from './email-preview'; // Adjust the import path as needed
-import { SendIcon } from './icons'; // Adjust the import path as needed
+import { useAccessLevel } from '../../shared/memberships/edit';
+import SubscribersAffirmation from '../../shared/memberships/subscribers-affirmation';
+import { PreviewModal } from './email-preview';
+import { SendIcon } from './icons';
 
 const NewsletterMenu = () => {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { postId } = useSelect(
+	const { postId, postType, postStatus } = useSelect(
 		select => ( {
 			postId: select( 'core/editor' ).getCurrentPostId(),
+			postType: select( 'core/editor' ).getCurrentPostType(),
+			postStatus: select( 'core/editor' ).getEditedPostAttribute( 'status' ),
 		} ),
 		[]
 	);
 
+	const accessLevel = useAccessLevel( postType );
+	const isPublished = postStatus === 'publish';
+
 	const openModal = () => setIsModalOpen( true );
 	const closeModal = () => setIsModalOpen( false );
 
@@ -27,18 +34,22 @@ const NewsletterMenu = () => {
 				icon={ <SendIcon /> }
 			>
 				<PanelBody>
-					<p>
-						{ __(
-							'Ensure your email looks perfect. Use the buttons below to view a preview or send a test email.',
-							'jetpack'
-						) }
-					</p>
+					<SubscribersAffirmation accessLevel={ accessLevel } prePublish={ ! isPublished } />
+					{ ! 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',
 						} }
 						variant="secondary"
+						disabled={ isPublished }
 					>
 						{ __( 'Preview email', 'jetpack' ) }
 					</Button>