From 76b328be2943d5ecd381b21799aabdfb832b721b Mon Sep 17 00:00:00 2001
From: Miguel Lezama <miguel@automattic.com>
Date: Thu, 22 Aug 2024 13:29:58 -0300
Subject: [PATCH] Newsletter Preview: Add Tracks (#39032)

---
 .../update-newsletter-preview-add-tracks      |  4 +++
 .../blocks/subscriptions/email-preview.js     | 30 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-newsletter-preview-add-tracks

diff --git a/projects/plugins/jetpack/changelog/update-newsletter-preview-add-tracks b/projects/plugins/jetpack/changelog/update-newsletter-preview-add-tracks
new file mode 100644
index 0000000000000..8762d3992f5ca
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-newsletter-preview-add-tracks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+adds tracks to featured flagged feature
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
index b1ef4c65c7307..2133be12e74dc 100644
--- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
+++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.js
@@ -33,7 +33,7 @@ export function NewsletterTestEmailModal( { isOpen, onClose } ) {
 	const { tracks } = useAnalytics();
 
 	const sendTestEmail = async () => {
-		tracks.recordEvent( 'jetpack_send_email_preview', { post_id: postId } );
+		tracks.recordEvent( 'jetpack_newsletter_test_email_send', { post_id: postId } );
 		setIsEmailSending( true );
 		await __unstableSaveForPreview();
 
@@ -115,6 +115,12 @@ const previewDevices = [
 const PreviewDeviceSelector = ( { selectedDevice, setSelectedDevice } ) => {
 	const [ isMedium ] = useBreakpointMatch( 'md' );
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
+	const { tracks } = useAnalytics();
+
+	const handleDeviceChange = device => {
+		tracks.recordEvent( 'jetpack_newsletter_preview_device_change', { device } );
+		setSelectedDevice( device );
+	};
 
 	if ( isSmall ) {
 		return null;
@@ -126,7 +132,7 @@ const PreviewDeviceSelector = ( { selectedDevice, setSelectedDevice } ) => {
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
-			onChange={ setSelectedDevice }
+			onChange={ handleDeviceChange }
 			value={ selectedDevice }
 			isBlock
 		>
@@ -146,6 +152,7 @@ const PreviewAccessSelector = ( { selectedAccess, setSelectedAccess } ) => {
 	const [ isSmall ] = useBreakpointMatch( 'sm' );
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const accessLevel = useAccessLevel( postType );
+	const { tracks } = useAnalytics();
 
 	const isPaidOptionDisabled = ! accessLevel || accessLevel !== accessOptions.paid_subscribers.key;
 
@@ -161,6 +168,7 @@ const PreviewAccessSelector = ( { selectedAccess, setSelectedAccess } ) => {
 
 	const handleChange = value => {
 		if ( ! isPaidOptionDisabled ) {
+			tracks.recordEvent( 'jetpack_newsletter_preview_access_change', { access: value } );
 			setSelectedAccess( value );
 		}
 	};
@@ -225,6 +233,7 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
 	const [ previewCache, setPreviewCache ] = useState( {} );
 	const [ selectedAccess, setSelectedAccess ] = useState( accessOptions.subscribers.key );
 	const [ selectedDevice, setSelectedDevice ] = useState( 'desktop' );
+	const { tracks } = useAnalytics();
 
 	const fetchPreview = useCallback(
 		async accessLevel => {
@@ -271,6 +280,18 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
 		}
 	}, [ isOpen, selectedAccess, fetchPreview, previewCache ] );
 
+	useEffect( () => {
+		if ( isOpen ) {
+			tracks.recordEvent( 'jetpack_newsletter_preview_modal_open', { post_id: postId } );
+		}
+	}, [ isOpen, postId, tracks ] );
+
+	const handleClose = () => {
+		tracks.recordEvent( 'jetpack_newsletter_preview_modal_close', { post_id: postId } );
+		onClose();
+		setPreviewCache( {} );
+	};
+
 	const deviceWidth = previewDevices.find( device => device.name === selectedDevice ).width;
 
 	return (
@@ -278,10 +299,7 @@ export function NewsletterPreviewModal( { isOpen, onClose, postId } ) {
 			<Modal
 				isFullScreen={ true }
 				title={ __( 'Preview email', 'jetpack' ) }
-				onRequestClose={ () => {
-					onClose();
-					setPreviewCache( {} );
-				} }
+				onRequestClose={ handleClose }
 				headerActions={
 					<PreviewControls
 						selectedAccess={ selectedAccess }