[not verified] Add preview email feature

[not verified] add button to newsletter panel

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,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>
+			) }
+		</>
+	);
+}

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;
+  }
+}

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>
+	),
 };

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

@@ -26,6 +26,7 @@ import {
 } from './settings';
 import { isNewsletterFeatureEnabled } from './utils';
 import { name } from './';
+import EmailPreview from './email-preview';
 
 const SubscriptionsPanelPlaceholder = ( { children } ) => {
 	return (
@@ -72,6 +73,7 @@ function NewsletterEditorSettingsPanel( {
 				paidSubscribers={ paidSubscribers }
 				showMisconfigurationWarning={ showMisconfigurationWarning }
 			/>
+			<EmailPreview />
 		</PluginDocumentSettingPanel>
 	);
 }