From 366f4fe83f48e73bc5ab114224702e0e86b75b03 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 26 May 2023 13:33:58 -0300
Subject: [PATCH 1/9] [not verified] Add preview email feature

[not verified] add button to newsletter panel
---
 .../jetpack/changelog/add-preview-email       |  4 ++
 .../blocks/subscriptions/email-preview.js     | 67 +++++++++++++++++++
 .../blocks/subscriptions/email-preview.scss   | 26 +++++++
 .../extensions/blocks/subscriptions/index.js  |  8 ++-
 .../extensions/blocks/subscriptions/panel.js  |  2 +
 5 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/add-preview-email
 create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
 create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss

diff --git a/projects/plugins/jetpack/changelog/add-preview-email b/projects/plugins/jetpack/changelog/add-preview-email
new file mode 100644
index 0000000000000..6c2770438271b
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/add-preview-email
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+enhancement Add Email Preview Feature
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
new file mode 100644
index 0000000000000..5aeb5afa38d09
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -0,0 +1,67 @@
+import apiFetch from '@wordpress/api-fetch';
+import { Button, Flex, FlexBlock, FlexItem, Modal, TextControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import './email-preview.scss';
+
+export default function EmailPreview() {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ emailSent, setEmailSent ] = useState( false );
+	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
+
+	return (
+		<>
+			<FlexItem>
+				<Button isPrimary onClick={ () => setIsModalOpen( true ) }>
+					{ __( 'Send test email', 'jetpack' ) }
+				</Button>
+			</FlexItem>
+			{ isModalOpen && (
+				<Modal
+					className="jetpack-send-email-preview-modal"
+					title={ __( 'Send a test email', 'jetpack' ) }
+					onRequestClose={ () => setIsModalOpen( false ) }
+				>
+					{ emailSent ? (
+						<p>{ __( 'Email sent successfully', 'jetpack' ) }</p>
+					) : (
+						<Flex>
+							<FlexBlock>
+								<TextControl
+									className="email-field"
+									value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
+									disabled={ true }
+								/>
+							</FlexBlock>
+							<FlexItem>
+								<Button
+									className="send-button"
+									isPrimary
+									onClick={ () => {
+										apiFetch( {
+											path: '/wpcom/v2/send-email-preview/',
+											method: 'POST',
+											data: {
+												id: postId,
+											},
+										} )
+											.then( () => {
+												// Handle response here
+												setEmailSent( true );
+											} )
+											.catch( () => {
+												// Handle error here
+											} );
+									} }
+								>
+									{ __( 'Send', 'jetpack' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					) }
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
new file mode 100644
index 0000000000000..097cc992a6e59
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -0,0 +1,26 @@
+.jetpack-send-email-preview-modal {
+  height: 200px;
+  width: 645px;
+  left: 391px;
+  top: 392px;
+  border-radius: 0px;
+
+  .email-field {
+    width: 266px;
+    height: 44px;
+    border-radius: 3px;
+    padding: 12px 16px;
+  }
+
+  .send-button {
+    margin-left: 12px; /* 12px to the right of the email field */
+  }
+
+  /* More styles for the email text */
+  .email-field::placeholder {
+    width: 201px;
+    height: 20px;
+    top: 12px;
+    left: 16px;
+  }
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
index a5d29acf46d9c..a5a552a7a58ab 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
@@ -2,12 +2,12 @@ import { createBlock } from '@wordpress/blocks';
 import { ExternalLink, Path, SVG } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
+import { Fragment } from 'react';
 import { getIconColor } from '../../shared/block-icons';
 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 +95,9 @@ export const settings = {
 };
 
 export const pluginSettings = {
-	render: SubscribePanels,
+	render: () => (
+		<Fragment>
+			<SubscribePanels />
+		</Fragment>
+	),
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
index 4612759120e7f..9bd01452601f7 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
@@ -29,6 +29,7 @@ import {
 } from './settings';
 import { isNewsletterFeatureEnabled } from './utils';
 import { name } from './';
+import EmailPreview from './email-preview';
 
 import './panel.scss';
 
@@ -77,6 +78,7 @@ function NewsletterEditorSettingsPanel( {
 				paidSubscribers={ paidSubscribers }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
 			/>
+			<EmailPreview />
 		</PluginDocumentSettingPanel>
 	);
 }

From 5aebe7f29ade170da2f4625d35e6842afb0a6fea Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 2 Jun 2023 11:52:14 -0300
Subject: [PATCH 2/9] [not verified] style improvements

---
 .../extensions/blocks/subscriptions/check.svg |  8 +++
 .../blocks/subscriptions/email-preview.js     | 66 ++++++++++++-------
 .../blocks/subscriptions/email-preview.scss   | 48 +++++++++-----
 .../blocks/subscriptions/illo-share.svg       | 24 +++++++
 4 files changed, 107 insertions(+), 39 deletions(-)
 create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg
 create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg b/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg
new file mode 100644
index 0000000000000..6e7109089934c
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<mask id="mask0_2115_8307" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="5" width="18" height="14">
+		<path d="M8.75686 15.9001L4.57746 11.7L3.18433 13.1L8.75686 18.7001L20.698 6.70005L19.3049 5.30005L8.75686 15.9001Z" fill="white"/>
+	</mask>
+	<g mask="url(#mask0_2115_8307)">
+		<rect width="23.8823" height="24" fill="#069E08"/>
+	</g>
+</svg>
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index 5aeb5afa38d09..770998a339c77 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -1,15 +1,39 @@
 import apiFetch from '@wordpress/api-fetch';
-import { Button, Flex, FlexBlock, FlexItem, Modal, TextControl } from '@wordpress/components';
+import { Button, Flex, FlexItem, Modal, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import './email-preview.scss';
+import check from './check.svg';
+import illoShare from './illo-share.svg';
 
 export default function EmailPreview() {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ emailSent, setEmailSent ] = useState( false );
+	const [ emailSending, setEmailSending ] = useState( false );
 	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
 
+	const sendEmailPreview = () => {
+		setEmailSending( true );
+		apiFetch( {
+			path: '/wpcom/v2/send-email-preview/',
+			method: 'POST',
+			data: {
+				id: postId,
+			},
+		} )
+			.then( () => {
+				// Handle response here
+				setEmailSending( false );
+				setEmailSent( true );
+			} )
+			.catch( () => {
+				setEmailSending( false );
+
+				// Handle error here
+			} );
+	};
+
 	return (
 		<>
 			<FlexItem>
@@ -19,45 +43,39 @@ export default function EmailPreview() {
 			</FlexItem>
 			{ isModalOpen && (
 				<Modal
-					className="jetpack-send-email-preview-modal"
+					className="jetpack-email-preview"
 					title={ __( 'Send a test email', 'jetpack' ) }
 					onRequestClose={ () => setIsModalOpen( false ) }
 				>
 					{ emailSent ? (
-						<p>{ __( 'Email sent successfully', 'jetpack' ) }</p>
+						<Flex>
+							<FlexItem className="jetpack-email-preview__email-sent">
+								<img className="jetpack-email-preview__check" src={ check } alt="" />
+								{ __( 'Email sent successfully', 'jetpack' ) }
+							</FlexItem>
+						</Flex>
 					) : (
 						<Flex>
-							<FlexBlock>
+							<FlexItem>
 								<TextControl
-									className="email-field"
+									className="jetpack-email-preview__email"
 									value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
-									disabled={ true }
+									disabled
 								/>
-							</FlexBlock>
+							</FlexItem>
 							<FlexItem>
 								<Button
-									className="send-button"
+									className="jetpack-email-preview__button"
 									isPrimary
-									onClick={ () => {
-										apiFetch( {
-											path: '/wpcom/v2/send-email-preview/',
-											method: 'POST',
-											data: {
-												id: postId,
-											},
-										} )
-											.then( () => {
-												// Handle response here
-												setEmailSent( true );
-											} )
-											.catch( () => {
-												// Handle error here
-											} );
-									} }
+									onClick={ sendEmailPreview }
+									isBusy={ emailSending }
 								>
 									{ __( 'Send', 'jetpack' ) }
 								</Button>
 							</FlexItem>
+							<FlexItem>
+								<img className="jetpack-email-preview__img" src={ illoShare } alt="" />
+							</FlexItem>
 						</Flex>
 					) }
 				</Modal>
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
index 097cc992a6e59..890811a641447 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -1,26 +1,44 @@
-.jetpack-send-email-preview-modal {
+.jetpack-email-preview {
   height: 200px;
   width: 645px;
   left: 391px;
   top: 392px;
-  border-radius: 0px;
+  border-radius: 0;
+  .components-modal__header-heading {
+    margin-top: 30px;
+    font-size: 26px;
+  }
+  .components-modal__header {
+    margin-left: 17px;
+  }
+  .components-modal__content {
+    margin-left: 17px;
+  }
+}
 
-  .email-field {
-    width: 266px;
+.jetpack-email-preview__email {
+  .components-text-control__input {
     height: 44px;
+    width: 266px;
     border-radius: 3px;
-    padding: 12px 16px;
+    border-color: gray;
+    padding: 12px 16px 12px 16px;
+    background-color: lightgray;
   }
+}
 
-  .send-button {
-    margin-left: 12px; /* 12px to the right of the email field */
-  }
+.jetpack-email-preview__button {
+  border-radius: 2px;
+  padding: 16px 24px 16px 24px;
+  width: 80px;
+  height: 44px;
+}
 
-  /* More styles for the email text */
-  .email-field::placeholder {
-    width: 201px;
-    height: 20px;
-    top: 12px;
-    left: 16px;
-  }
+.jetpack-email-preview__img {
+  height: 110px;
+}
+
+.jetpack-email-preview__email-sent {
+  color: green;
+  margin-top: 30px;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg b/projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg
new file mode 100644
index 0000000000000..c748a32d8c195
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg
@@ -0,0 +1,24 @@
+<svg fill="none" height="266" viewBox="0 0 214 266" width="214" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="181.5" x2="20.5" y1="210.5" y2="271">
+		<stop offset="0" stop-color="#c4c4c5"/>
+		<stop offset=".62652" stop-color="#dedede"/>
+	</linearGradient>
+	<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="186" x2="189" y1="12" y2="212">
+		<stop offset="0" stop-color="#4b4f52"/><stop offset="1" stop-opacity="0"/>
+	</linearGradient>
+	<path d="m115.221 3.99979 85.844 42.70981-19.922 4.185-7.913 19.4894-.408-18.4514-26.419 1.5475z" stroke="#4b4f52" stroke-linecap="round" stroke-width="2.8"/>
+	<g stroke-linecap="square">
+		<g stroke="#4b4f52">
+			<path d="m128.804 15.1743 43.696 35.5544" stroke-width="2.4"/>
+			<path d="m159.057 53.3097 13.394 15.4395" stroke-linejoin="bevel" stroke-width="2.6"/>
+			<path d="m177.169 47.4566-25.566-17.3041" stroke-width="2.2"/>
+		</g>
+		<path d="m185.762 88.2423c24.238 55.7577 14 138.4997-24.5 141.9997-23.85 3.692-43.329-39.323-57.733-37.094-14.4041 2.23-14.2834 44.944-35.3068 34.252-21.0234-10.691-28.0841 33.788-45.4862 36.481" stroke="url(#a)" stroke-width="3"/>
+		<path d="m185.762 88.2423c24.238 55.7577 14 138.4997-24.5 141.9997-23.85 3.692-43.329-39.323-57.733-37.094-14.4041 2.23-14.2834 44.944-35.3068 34.252-21.0234-10.691-28.0841 33.788-45.4862 36.481" stroke="url(#b)" stroke-opacity=".5" stroke-width="3"/>
+	</g>
+	<circle cx="49.2617" cy="232.742" fill="#7f858a" r="2" stroke="#7f858a" stroke-width="3"/>
+	<g fill="#fffffe">
+		<circle cx="118.762" cy="201.242" r="3.75" stroke="#6e7378" stroke-width="2.5"/>
+		<circle cx="199" cy="160.742" r="6" stroke="#4b4f52" stroke-width="3"/>
+	</g>
+</svg>
\ No newline at end of file

From bfdce246f51162b018b3a61594ac3c49c5f80b7b Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 9 Jun 2023 16:10:43 +0300
Subject: [PATCH 3/9] [not verified] feedback

---
 ...are.svg => email-preview-illustration.svg} |  0
 .../blocks/subscriptions/email-preview.js     | 32 ++++++++++++-------
 .../blocks/subscriptions/email-preview.scss   | 15 +++++----
 .../extensions/blocks/subscriptions/index.js  |  5 ++-
 4 files changed, 31 insertions(+), 21 deletions(-)
 rename projects/plugins/jetpack/extensions/blocks/subscriptions/{illo-share.svg => email-preview-illustration.svg} (100%)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg
similarity index 100%
rename from projects/plugins/jetpack/extensions/blocks/subscriptions/illo-share.svg
rename to projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview-illustration.svg
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index 770998a339c77..66db5870a326f 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -1,16 +1,17 @@
 import apiFetch from '@wordpress/api-fetch';
-import { Button, Flex, FlexItem, Modal, TextControl } from '@wordpress/components';
+import { Button, Flex, FlexItem, 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 './check.svg';
-import illoShare from './illo-share.svg';
+import { check } from '@wordpress/icon';
+import illustration from './email-preview-illustration.svg';
 
 export default function EmailPreview() {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ emailSent, setEmailSent ] = useState( false );
 	const [ emailSending, setEmailSending ] = useState( false );
+	const [ errorMessage, setErrorMessage ] = useState( false );
 	const postId = useSelect( select => select( 'core/editor' ).getCurrentPostId() );
 
 	const sendEmailPreview = () => {
@@ -23,21 +24,25 @@ export default function EmailPreview() {
 			},
 		} )
 			.then( () => {
-				// Handle response here
 				setEmailSending( false );
 				setEmailSent( true );
 			} )
-			.catch( () => {
+			.catch( e => {
 				setEmailSending( false );
-
-				// Handle error here
+				if ( e.message ) {
+					setErrorMessage( e.message );
+				} else {
+					setErrorMessage(
+						__( 'Whoops, we have encountered an error. Please try again later.', 'jetpack' )
+					);
+				}
 			} );
 	};
 
 	return (
 		<>
 			<FlexItem>
-				<Button isPrimary onClick={ () => setIsModalOpen( true ) }>
+				<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
 					{ __( 'Send test email', 'jetpack' ) }
 				</Button>
 			</FlexItem>
@@ -47,10 +52,15 @@ export default function EmailPreview() {
 					title={ __( 'Send a test email', 'jetpack' ) }
 					onRequestClose={ () => setIsModalOpen( false ) }
 				>
+					{ errorMessage && (
+						<Flex>
+							<FlexItem className="jetpack-email-preview__email-sent">{ errorMessage }</FlexItem>
+						</Flex>
+					) }
 					{ emailSent ? (
 						<Flex>
 							<FlexItem className="jetpack-email-preview__email-sent">
-								<img className="jetpack-email-preview__check" src={ check } alt="" />
+								<Icon className="jetpack-email-preview__check" icon={ check } />
 								{ __( 'Email sent successfully', 'jetpack' ) }
 							</FlexItem>
 						</Flex>
@@ -66,7 +76,7 @@ export default function EmailPreview() {
 							<FlexItem>
 								<Button
 									className="jetpack-email-preview__button"
-									isPrimary
+									variant="primary"
 									onClick={ sendEmailPreview }
 									isBusy={ emailSending }
 								>
@@ -74,7 +84,7 @@ export default function EmailPreview() {
 								</Button>
 							</FlexItem>
 							<FlexItem>
-								<img className="jetpack-email-preview__img" src={ illoShare } alt="" />
+								<img className="jetpack-email-preview__img" src={ illustration } alt="" />
 							</FlexItem>
 						</Flex>
 					) }
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
index 890811a641447..624667c719ae3 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -1,9 +1,10 @@
+@import "@automattic/color-studio/dist/color-variables";
+
 .jetpack-email-preview {
-  height: 200px;
-  width: 645px;
-  left: 391px;
-  top: 392px;
-  border-radius: 0;
+  //height: 200px;
+  //width: 645px;
+  //left: 391px;
+  //top: 392px;
   .components-modal__header-heading {
     margin-top: 30px;
     font-size: 26px;
@@ -23,7 +24,7 @@
     border-radius: 3px;
     border-color: gray;
     padding: 12px 16px 12px 16px;
-    background-color: lightgray;
+    background-color: $studio-gray-30;
   }
 }
 
@@ -39,6 +40,6 @@
 }
 
 .jetpack-email-preview__email-sent {
-  color: green;
+  color: $studio-jetpack-green-30;
   margin-top: 30px;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
index a5a552a7a58ab..8b796bc1e4995 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
@@ -2,7 +2,6 @@ import { createBlock } from '@wordpress/blocks';
 import { ExternalLink, Path, SVG } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { Fragment } from 'react';
 import { getIconColor } from '../../shared/block-icons';
 import attributes from './attributes';
 import deprecated from './deprecated';
@@ -96,8 +95,8 @@ export const settings = {
 
 export const pluginSettings = {
 	render: () => (
-		<Fragment>
+		<>
 			<SubscribePanels />
-		</Fragment>
+		</>
 	),
 };

From f616d0bbf0ec4c90473916ee0cc80efc0b72b9aa Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 9 Jun 2023 16:46:31 +0300
Subject: [PATCH 4/9] [not verified] delete unused

---
 .../jetpack/extensions/blocks/subscriptions/check.svg     | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg b/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg
deleted file mode 100644
index 6e7109089934c..0000000000000
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/check.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<mask id="mask0_2115_8307" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="5" width="18" height="14">
-		<path d="M8.75686 15.9001L4.57746 11.7L3.18433 13.1L8.75686 18.7001L20.698 6.70005L19.3049 5.30005L8.75686 15.9001Z" fill="white"/>
-	</mask>
-	<g mask="url(#mask0_2115_8307)">
-		<rect width="23.8823" height="24" fill="#069E08"/>
-	</g>
-</svg>

From 4f65ed4c8a5b5b1ca0158c79f881e3203d6488d2 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 9 Jun 2023 17:17:40 +0300
Subject: [PATCH 5/9] [not verified] fix bundling error

---
 .../jetpack/extensions/blocks/subscriptions/email-preview.js    | 2 +-
 .../plugins/jetpack/extensions/blocks/subscriptions/panel.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index 66db5870a326f..033fdf25c696e 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -4,7 +4,7 @@ import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import './email-preview.scss';
-import { check } from '@wordpress/icon';
+import { check } from '@wordpress/icons';
 import illustration from './email-preview-illustration.svg';
 
 export default function EmailPreview() {
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
index 9bd01452601f7..289beb7b19d01 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
+++ b/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,
@@ -29,7 +30,6 @@ import {
 } from './settings';
 import { isNewsletterFeatureEnabled } from './utils';
 import { name } from './';
-import EmailPreview from './email-preview';
 
 import './panel.scss';
 

From 060eeefc452255c882b96f45c83d7b4453c5df62 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Sat, 10 Jun 2023 13:43:53 +0300
Subject: [PATCH 6/9] [not verified] style improvements!

---
 .../blocks/subscriptions/email-preview.js     | 86 ++++++++++---------
 .../blocks/subscriptions/email-preview.scss   | 64 +++++++-------
 2 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index 033fdf25c696e..75f0303e828bd 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -1,5 +1,15 @@
+import { useBreakpointMatch } from '@automattic/jetpack-components';
 import apiFetch from '@wordpress/api-fetch';
-import { Button, Flex, FlexItem, Modal, TextControl, Icon } from '@wordpress/components';
+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';
@@ -13,6 +23,7 @@ export default function EmailPreview() {
 	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 );
@@ -41,52 +52,45 @@ export default function EmailPreview() {
 
 	return (
 		<>
-			<FlexItem>
-				<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
-					{ __( 'Send test email', 'jetpack' ) }
-				</Button>
-			</FlexItem>
+			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Send test email', 'jetpack' ) }
+			</Button>
 			{ isModalOpen && (
-				<Modal
-					className="jetpack-email-preview"
-					title={ __( 'Send a test email', 'jetpack' ) }
-					onRequestClose={ () => setIsModalOpen( false ) }
-				>
+				<Modal className="jetpack-email-preview" onRequestClose={ () => setIsModalOpen( false ) }>
 					{ errorMessage && (
-						<Flex>
-							<FlexItem className="jetpack-email-preview__email-sent">{ errorMessage }</FlexItem>
-						</Flex>
+						<HStack className="jetpack-email-preview__email-sent">{ errorMessage }</HStack>
 					) }
 					{ emailSent ? (
-						<Flex>
-							<FlexItem className="jetpack-email-preview__email-sent">
-								<Icon className="jetpack-email-preview__check" icon={ check } />
-								{ __( 'Email sent successfully', 'jetpack' ) }
-							</FlexItem>
-						</Flex>
+						<HStack>
+							<Icon className="jetpack-email-preview__check" icon={ check } />
+							{ __( 'Email sent successfull', 'jetpack' ) }
+						</HStack>
 					) : (
-						<Flex>
-							<FlexItem>
-								<TextControl
-									className="jetpack-email-preview__email"
-									value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
-									disabled
-								/>
-							</FlexItem>
-							<FlexItem>
-								<Button
-									className="jetpack-email-preview__button"
-									variant="primary"
-									onClick={ sendEmailPreview }
-									isBusy={ emailSending }
-								>
-									{ __( 'Send', 'jetpack' ) }
-								</Button>
-							</FlexItem>
-							<FlexItem>
+						<HStack alignment="topLeft">
+							<VStack className="jetpack-email-preview__main" alignment="topLeft">
+								<h1 className="jetpack-email-preview__title">
+									{ __( 'Send test email', 'jetpack' ) }
+								</h1>
+								<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="" />
-							</FlexItem>
-						</Flex>
+							) }
+						</HStack>
 					) }
 				</Modal>
 			) }
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
index 624667c719ae3..ecf3aa82a7d33 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -1,45 +1,51 @@
 @import "@automattic/color-studio/dist/color-variables";
 
 .jetpack-email-preview {
-  //height: 200px;
-  //width: 645px;
-  //left: 391px;
-  //top: 392px;
-  .components-modal__header-heading {
-    margin-top: 30px;
-    font-size: 26px;
+  @media ( min-width: 660px ) {
+   width: 646px;
   }
-  .components-modal__header {
-    margin-left: 17px;
+  max-height: 200px;
+
+  h1 {
+    margin-top: 0px;
   }
+
   .components-modal__content {
-    margin-left: 17px;
+    margin-top: 52px;
+    margin-left: 20px;
   }
 }
 
-.jetpack-email-preview__email {
-  .components-text-control__input {
-    height: 44px;
-    width: 266px;
-    border-radius: 3px;
-    border-color: gray;
-    padding: 12px 16px 12px 16px;
-    background-color: $studio-gray-30;
-  }
+.jetpack-email-preview__img {
+  height: 110px
 }
 
-.jetpack-email-preview__button {
-  border-radius: 2px;
-  padding: 16px 24px 16px 24px;
-  width: 80px;
-  height: 44px;
+.jetpack-email-preview__email-sent {
+  color: $studio-jetpack-green-30;
 }
 
-.jetpack-email-preview__img {
-  height: 110px;
+.jetpack-email-preview__check {
+  fill: currentColor;
 }
 
-.jetpack-email-preview__email-sent {
-  color: $studio-jetpack-green-30;
-  margin-top: 30px;
+.jetpack-email-preview__email {
+
+  > div {
+    margin-bottom: 0;
+  }
+
+  input {
+    height: 44px;
+    background-color: $studio-gray-5;
+    min-width: 266px;
+  }
 }
+
+.jetpack-email-preview__main {
+  min-width: 462px;
+}
+
+.jetpack-email-preview__button {
+  height: 44px;
+  width: 80px;
+}
\ No newline at end of file

From ba905a4794d359e00bea44cfcc8603248433abb9 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Mon, 19 Jun 2023 15:05:43 -0300
Subject: [PATCH 7/9] [not verified] more style improvements

---
 .../blocks/subscriptions/email-preview.scss     | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
index ecf3aa82a7d33..96cafe1dddbab 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -4,20 +4,22 @@
   @media ( min-width: 660px ) {
    width: 646px;
   }
-  max-height: 200px;
 
   h1 {
-    margin-top: 0px;
+    margin-top: 10px;
   }
 
   .components-modal__content {
     margin-top: 52px;
     margin-left: 20px;
+    margin-bottom: 10px;
   }
 }
 
 .jetpack-email-preview__img {
-  height: 110px
+  height: 110px;
+  padding-right: 30px;
+  padding-left: 80px;
 }
 
 .jetpack-email-preview__email-sent {
@@ -34,10 +36,13 @@
     margin-bottom: 0;
   }
 
-  input {
+  .components-text-control__input {
     height: 44px;
     background-color: $studio-gray-5;
+    color: $studio-gray;
     min-width: 266px;
+    padding-left: 13px;
+    font-size: 14px;
   }
 }
 
@@ -48,4 +53,6 @@
 .jetpack-email-preview__button {
   height: 44px;
   width: 80px;
-}
\ No newline at end of file
+  justify-content: center;
+  align-items: center;
+}

From bc7aac7d33c6eb57baa3616e13a63cf26ae2d038 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Mon, 19 Jun 2023 16:54:25 -0300
Subject: [PATCH 8/9] [not verified] More style fixes

---
 .../blocks/subscriptions/email-preview.js     | 48 +++++++++++--------
 .../blocks/subscriptions/email-preview.scss   |  4 ++
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index 75f0303e828bd..c574426f97639 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -56,21 +56,29 @@ export default function EmailPreview() {
 				{ __( 'Send test email', 'jetpack' ) }
 			</Button>
 			{ isModalOpen && (
-				<Modal className="jetpack-email-preview" onRequestClose={ () => setIsModalOpen( false ) }>
-					{ errorMessage && (
-						<HStack className="jetpack-email-preview__email-sent">{ errorMessage }</HStack>
-					) }
-					{ emailSent ? (
-						<HStack>
-							<Icon className="jetpack-email-preview__check" icon={ check } />
-							{ __( 'Email sent successfull', 'jetpack' ) }
-						</HStack>
-					) : (
-						<HStack alignment="topLeft">
-							<VStack className="jetpack-email-preview__main" alignment="topLeft">
-								<h1 className="jetpack-email-preview__title">
-									{ __( 'Send test email', 'jetpack' ) }
-								</h1>
+				<Modal
+					className="jetpack-email-preview"
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+						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"
@@ -86,12 +94,12 @@ export default function EmailPreview() {
 										{ __( 'Send', 'jetpack' ) }
 									</Button>
 								</HStack>
-							</VStack>
-							{ ! isSmall && (
-								<img className="jetpack-email-preview__img" src={ illustration } alt="" />
 							) }
-						</HStack>
-					) }
+						</VStack>
+						{ ! isSmall && (
+							<img className="jetpack-email-preview__img" src={ illustration } alt="" />
+						) }
+					</HStack>
 				</Modal>
 			) }
 		</>
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
index 96cafe1dddbab..517ae290acfa7 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss
@@ -20,10 +20,14 @@
   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 {

From 6396abaf975c10426b385b202c145b12394ce203 Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Tue, 20 Jun 2023 15:18:51 -0300
Subject: [PATCH 9/9] Move button to prepublish

---
 .../blocks/subscriptions/email-preview.js     |  8 ++----
 .../extensions/blocks/subscriptions/panel.js  | 26 ++++++++++++-------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index c574426f97639..c5d37fd93ee67 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -17,8 +17,7 @@ import './email-preview.scss';
 import { check } from '@wordpress/icons';
 import illustration from './email-preview-illustration.svg';
 
-export default function EmailPreview() {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function EmailPreview( { isModalOpen, closeModal } ) {
 	const [ emailSent, setEmailSent ] = useState( false );
 	const [ emailSending, setEmailSending ] = useState( false );
 	const [ errorMessage, setErrorMessage ] = useState( false );
@@ -52,14 +51,11 @@ export default function EmailPreview() {
 
 	return (
 		<>
-			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
-				{ __( 'Send test email', 'jetpack' ) }
-			</Button>
 			{ isModalOpen && (
 				<Modal
 					className="jetpack-email-preview"
 					onRequestClose={ () => {
-						setIsModalOpen( false );
+						closeModal();
 						setEmailSent( false );
 					} }
 				>
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
index 289beb7b19d01..99b270aeaade3 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/panel.js
@@ -78,7 +78,6 @@ function NewsletterEditorSettingsPanel( {
 				paidSubscribers={ paidSubscribers }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
 			/>
-			<EmailPreview />
 		</PluginDocumentSettingPanel>
 	);
 }
@@ -120,6 +119,7 @@ function NewsletterPrePublishSettingsPanel( {
 	paidSubscribers,
 	isModuleActive,
 	showMisconfigurationWarning,
+	showPreviewModal,
 } ) {
 	const { tracks } = useAnalytics();
 	const { changeStatus, isLoadingModules, isChangingStatus } = useModuleStatus( name );
@@ -152,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 && (
@@ -298,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 =
@@ -361,6 +367,7 @@ export default function SubscribePanels() {
 				paidSubscribers={ paidSubscribers }
 				isModuleActive={ isModuleActive }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
+				showPreviewModal={ () => setIsModalOpen( true ) }
 			/>
 			<NewsletterPostPublishSettingsPanel
 				accessLevel={ accessLevel }
@@ -370,6 +377,7 @@ export default function SubscribePanels() {
 				isModuleActive={ isModuleActive }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
 			/>
+			<EmailPreview isModalOpen={ isModalOpen } closeModal={ () => setIsModalOpen( false ) } />
 		</>
 	);
 }