Add Send Email Preview feature

projects/plugins/jetpack/changelog/add-preview-email

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+enhancement Add Email Preview Feature

projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js

@@ -0,0 +1,103 @@
+import { useBreakpointMatch } from '@automattic/jetpack-components';
+import apiFetch from '@wordpress/api-fetch';
+import {
+	Button,
+	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+	__experimentalHStack as HStack,
+	// eslint-disable-next-line wpcalypso/no-unsafe-wp-apis
+	__experimentalVStack as VStack,
+	Modal,
+	TextControl,
+	Icon,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import './email-preview.scss';
+import { check } from '@wordpress/icons';
+import illustration from './email-preview-illustration.svg';
+
+export default function EmailPreview( { isModalOpen, closeModal } ) {
+	const [ emailSent, setEmailSent ] = useState( false );
+	const [ emailSending, setEmailSending ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( false );
+	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
+	const sendEmailPreview = () => {
+		setEmailSending( true );
+		apiFetch( {
+			path: '/wpcom/v2/send-email-preview/',
+			method: 'POST',
+			data: {
+				id: postId,
+			},
+		} )
+			.then( () => {
+				setEmailSending( false );
+				setEmailSent( true );
+			} )
+			.catch( e => {
+				setEmailSending( false );
+				if ( e.message ) {
+					setErrorMessage( e.message );
+				} else {
+					setErrorMessage(
+						__( 'Whoops, we have encountered an error. Please try again later.', 'jetpack' )
+					);
+				}
+			} );
+	};
+
+	return (
+		<>
+			{ isModalOpen && (
+				<Modal
+					className="jetpack-email-preview"
+					onRequestClose={ () => {
+						closeModal();
+						setEmailSent( false );
+					} }
+				>
+					<HStack alignment="topLeft">
+						<VStack className="jetpack-email-preview__main" alignment="topLeft">
+							<h1 className="jetpack-email-preview__title">
+								{ __( 'Send a test email', 'jetpack' ) }
+							</h1>
+							{ errorMessage && (
+								<HStack className="jetpack-email-preview__email-sent">{ errorMessage }</HStack>
+							) }
+							{ emailSent ? (
+								<HStack className="jetpack-email-preview__email-sent">
+									<Icon className="jetpack-email-preview__check" icon={ check } size={ 28 } />
+									<div className="jetpack-email-preview__sent_text">
+										{ __( 'Email sent successfully', 'jetpack' ) }
+									</div>
+								</HStack>
+							) : (
+								<HStack>
+									<TextControl
+										className="jetpack-email-preview__email"
+										value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
+										disabled
+									/>
+									<Button
+										className="jetpack-email-preview__button"
+										variant="primary"
+										onClick={ sendEmailPreview }
+										isBusy={ emailSending }
+									>
+										{ __( 'Send', 'jetpack' ) }
+									</Button>
+								</HStack>
+							) }
+						</VStack>
+						{ ! isSmall && (
+							<img className="jetpack-email-preview__img" src={ illustration } alt="" />
+						) }
+					</HStack>
+				</Modal>
+			) }
+		</>
+	);
+}

projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss

@@ -0,0 +1,62 @@
+@import "@automattic/color-studio/dist/color-variables";
+
+.jetpack-email-preview {
+  @media ( min-width: 660px ) {
+   width: 646px;
+  }
+
+  h1 {
+    margin-top: 10px;
+  }
+
+  .components-modal__content {
+    margin-top: 52px;
+    margin-left: 20px;
+    margin-bottom: 10px;
+  }
+}
+
+.jetpack-email-preview__img {
+  height: 110px;
+  padding-right: 30px;
+  padding-left: 80px;
+  margin-left: auto;
+}
+
+.jetpack-email-preview__email-sent {
+  color: $studio-jetpack-green-30;
+  .jetpack-email-preview__sent_text {
+    font-size: 20px;
+  }
+}
+
+.jetpack-email-preview__check {
+  fill: currentColor;
+}
+
+.jetpack-email-preview__email {
+
+  > div {
+    margin-bottom: 0;
+  }
+
+  .components-text-control__input {
+    height: 44px;
+    background-color: $studio-gray-5;
+    color: $studio-gray;
+    min-width: 266px;
+    padding-left: 13px;
+    font-size: 14px;
+  }
+}
+
+.jetpack-email-preview__main {
+  min-width: 462px;
+}
+
+.jetpack-email-preview__button {
+  height: 44px;
+  width: 80px;
+  justify-content: center;
+  align-items: center;
+}

projects/plugins/jetpack/extensions/blocks/subscriptions/index.js

@@ -7,7 +7,6 @@ import attributes from './attributes';
 import deprecated from './deprecated';
 import edit from './edit';
 import SubscribePanels from './panel';
-
 export const name = 'subscriptions';
 export const icon = (
 	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -95,5 +94,9 @@ export const settings = {
 };
 
 export const pluginSettings = {
-	render: SubscribePanels,
+	render: () => (
+		<>
+			<SubscribePanels />
+		</>
+	),
 };

projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js

@@ -21,6 +21,7 @@ import { external, Icon } from '@wordpress/icons';
 import { store as membershipProductsStore } from '../../store/membership-products';
 import { getSubscriberCounts } from './api';
 import { META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS, accessOptions } from './constants';
+import EmailPreview from './email-preview';
 import {
 	Link,
 	getReachForAccessLevelKey,
@@ -118,6 +119,7 @@ function NewsletterPrePublishSettingsPanel( {
 	paidSubscribers,
 	isModuleActive,
 	showMisconfigurationWarning,
+	showPreviewModal,
 } ) {
 	const { tracks } = useAnalytics();
 	const { changeStatus, isLoadingModules, isChangingStatus } = useModuleStatus( name );
@@ -150,14 +152,19 @@ function NewsletterPrePublishSettingsPanel( {
 			icon={ <JetpackLogo showText={ false } height={ 16 } logoColor="#1E1E1E" /> }
 		>
 			{ isModuleActive && (
-				<NewsletterAccessPrePublishSettings
-					accessLevel={ accessLevel }
-					setPostMeta={ setPostMeta }
-					socialFollowers={ socialFollowers }
-					emailSubscribers={ emailSubscribers }
-					paidSubscribers={ paidSubscribers }
-					showMisconfigurationWarning={ showMisconfigurationWarning }
-				/>
+				<>
+					<NewsletterAccessPrePublishSettings
+						accessLevel={ accessLevel }
+						setPostMeta={ setPostMeta }
+						socialFollowers={ socialFollowers }
+						emailSubscribers={ emailSubscribers }
+						paidSubscribers={ paidSubscribers }
+						showMisconfigurationWarning={ showMisconfigurationWarning }
+					/>
+					<Button variant="secondary" onClick={ showPreviewModal }>
+						{ __( 'Preview', 'jetpack' ) }
+					</Button>
+				</>
 			) }
 
 			{ shouldLoadSubscriptionPlaceholder && (
@@ -296,6 +303,7 @@ export default function SubscribePanels() {
 	const [ emailSubscribers, setEmailSubscribers ] = useState( null );
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const [ postMeta = [], setPostMeta ] = useEntityProp( 'postType', postType, 'meta' );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
 	// Set the accessLevel to "everybody" when one is not defined
 	let accessLevel =
@@ -359,6 +367,7 @@ export default function SubscribePanels() {
 				paidSubscribers={ paidSubscribers }
 				isModuleActive={ isModuleActive }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
+				showPreviewModal={ () => setIsModalOpen( true ) }
 			/>
 			<NewsletterPostPublishSettingsPanel
 				accessLevel={ accessLevel }
@@ -368,6 +377,7 @@ export default function SubscribePanels() {
 				isModuleActive={ isModuleActive }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
 			/>
+			<EmailPreview isModalOpen={ isModalOpen } closeModal={ () => setIsModalOpen( false ) } />
 		</>
 	);
 }