From 651e80b8f01c3db17aaf466d84a1947d48d6e720 Mon Sep 17 00:00:00 2001
From: Oluwaseun Olorunsola <seun.olorunsola@automattic.com>
Date: Thu, 5 Dec 2024 16:03:47 +0100
Subject: [PATCH] Fetch emailPosts for use in template selection modal

MAILPOET-5949
---
 .../template-select/select-modal.tsx          | 12 ++++++---
 .../template-select/template-list.tsx         |  2 +-
 .../src/hooks/use-preview-templates.ts        | 25 +++++++++++++++----
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/js/email-editor/src/components/template-select/select-modal.tsx b/packages/js/email-editor/src/components/template-select/select-modal.tsx
index 525e8e620d..6c87e7b2f7 100644
--- a/packages/js/email-editor/src/components/template-select/select-modal.tsx
+++ b/packages/js/email-editor/src/components/template-select/select-modal.tsx
@@ -42,7 +42,7 @@ export function SelectTemplateModal( {
 	closeCallback = null,
 	previewContent = '',
 } ) {
-	const [ templates ] = usePreviewTemplates( previewContent );
+	let [ templates, emailPosts ] = usePreviewTemplates( previewContent );
 
 	const hasTemplates = templates?.length > 0;
 
@@ -82,6 +82,12 @@ export function SelectTemplateModal( {
 		},
 	];
 
+	let initialCategory = dummyTemplateCategories[ 0 ]; // Show the “Recent” category by default
+	if ( ! emailPosts || emailPosts?.length === 0 ) {
+		emailPosts = [];
+		initialCategory = dummyTemplateCategories[ 1 ]; // user does not recent category, show basic category
+	}
+
 	return (
 		<Modal
 			title={ __( 'Select a template', 'mailpoet' ) }
@@ -91,9 +97,9 @@ export function SelectTemplateModal( {
 			isFullScreen
 		>
 			<SelectTemplateBody
-				initialCategory={ dummyTemplateCategories[ 0 ] }
+				initialCategory={ initialCategory }
 				templateCategories={ dummyTemplateCategories }
-				templates={ templates }
+				templates={ [ ...templates, ...emailPosts ] }
 				handleTemplateSelection={ handleTemplateSelection }
 			/>
 
diff --git a/packages/js/email-editor/src/components/template-select/template-list.tsx b/packages/js/email-editor/src/components/template-select/template-list.tsx
index 8ecabaa8f7..a68c0f4b7b 100644
--- a/packages/js/email-editor/src/components/template-select/template-list.tsx
+++ b/packages/js/email-editor/src/components/template-select/template-list.tsx
@@ -75,7 +75,7 @@ function TemplateListBox( {
 								minHeight={ 300 }
 								additionalStyles={ [
 									{
-										css: template.template.email_theme_css,
+										css: template.template?.email_theme_css,
 									},
 								] }
 							/>
diff --git a/packages/js/email-editor/src/hooks/use-preview-templates.ts b/packages/js/email-editor/src/hooks/use-preview-templates.ts
index 4b4251abb8..fe47c4c929 100644
--- a/packages/js/email-editor/src/hooks/use-preview-templates.ts
+++ b/packages/js/email-editor/src/hooks/use-preview-templates.ts
@@ -1,8 +1,14 @@
+// import { useMemo } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { BlockInstance } from '@wordpress/blocks/index';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { storeName, EmailTemplatePreview, TemplatePreview } from '../store';
+import {
+	storeName,
+	EmailTemplatePreview,
+	TemplatePreview,
+	EmailEditorPostType,
+} from '../store';
 
 /**
  * We need to merge pattern blocks and template blocks for BlockPreview component.
@@ -34,10 +40,8 @@ function setPostContentInnerBlocks(
 	} );
 }
 
-export function usePreviewTemplates(
-	customEmailContent = ''
-): TemplatePreview[][] {
-	const { templates, patterns } = useSelect( ( select ) => {
+export function usePreviewTemplates( customEmailContent = '' ) {
+	const { templates, patterns, emailPosts } = useSelect( ( select ) => {
 		const contentBlockId =
 			// @ts-expect-error getBlocksByName is not defined in types
 			select( blockEditorStore ).getBlocksByName(
@@ -51,6 +55,7 @@ export function usePreviewTemplates(
 					[ 'core/post-content' ],
 					contentBlockId
 				),
+			emailPosts: select( storeName ).getSentEmailEditorPosts(),
 		};
 	}, [] );
 
@@ -106,5 +111,15 @@ export function usePreviewTemplates(
 				category: 'basic', // TODO: This will be updated once template category is implemented
 			};
 		} ),
+		emailPosts?.map( ( post: EmailEditorPostType ) => {
+			const parsedPostContent = parse( post.content?.raw );
+			return {
+				slug: post.slug,
+				previewContentParsed: parsedPostContent,
+				emailParsed: parsedPostContent,
+				template: post,
+				category: 'recent',
+			};
+		} ),
 	];
 }