From f129afbae40d0077837e3e7eb9a68f5dfe09aaeb Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Fri, 26 May 2023 13:33:58 -0300
Subject: [PATCH] add preview email feature

---
 .../jetpack/changelog/add-preview-email       |  4 ++
 .../extensions/blocks/subscriptions/index.js  |  9 ++-
 .../blocks/subscriptions/preview-email.js     | 66 +++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 projects/plugins/jetpack/changelog/add-preview-email
 create mode 100644 projects/plugins/jetpack/extensions/blocks/subscriptions/preview-email.js

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/index.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
index a5d29acf46d9c..4f7963972e6c9 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/index.js
@@ -2,11 +2,13 @@ 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';
+import PreviewEmail from './preview-email';
 
 export const name = 'subscriptions';
 export const icon = (
@@ -95,5 +97,10 @@ export const settings = {
 };
 
 export const pluginSettings = {
-	render: SubscribePanels,
+	render: () => (
+		<Fragment>
+			<SubscribePanels />
+			<PreviewEmail />
+		</Fragment>
+	),
 };
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/preview-email.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/preview-email.js
new file mode 100644
index 0000000000000..06531c84b8296
--- /dev/null
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/preview-email.js
@@ -0,0 +1,66 @@
+import apiFetch from '@wordpress/api-fetch';
+import { Button, Modal, TextControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { PluginMoreMenuItem } from '@wordpress/edit-post';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const PreviewEmail = ( { postId } ) => {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const [ emailSent, setEmailSent ] = useState( false );
+
+	return (
+		<>
+			<PluginMoreMenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Send test email', 'jetpack' ) }
+			</PluginMoreMenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Send a test email', 'jetpack' ) }
+					onRequestClose={ () => setIsModalOpen( false ) }
+				>
+					{ emailSent ? (
+						<p>{ __( 'Email sent successfully', 'jetpack' ) }</p>
+					) : (
+						<>
+							<TextControl
+								value={ window?.Jetpack_Editor_Initial_State?.tracksUserData?.email }
+								disabled={ true }
+							/>
+							<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>
+						</>
+					) }
+				</Modal>
+			) }
+		</>
+	);
+};
+
+export default compose( [
+	withSelect( select => {
+		return {
+			postId: select( 'core/editor' ).getCurrentPostId(),
+		};
+	} ),
+] )( PreviewEmail );