Show combination of templates and all patterns in select template modal

[MAILPOET-6334]

packages/js/email-editor/src/hooks/use-preview-templates.ts

@@ -112,49 +112,54 @@ export function usePreviewTemplates(
 	);
 
 	const allTemplates = useMemo( () => {
-		let contentPatternBlocks = null;
+		let contentPatterns = [];
 		const parsedCustomEmailContent =
 			customEmailContent && parse( customEmailContent );
 
 		// If there is a custom email content passed from outside we use it as email content for preview
-		// otherwise we pick first suitable from patterns
+		// otherwise generate one preview per template and pattern
 		if ( parsedCustomEmailContent ) {
-			contentPatternBlocks = parsedCustomEmailContent;
+			contentPatterns = [ { blocks: parsedCustomEmailContent } ];
 		} else {
-			// Pick first pattern that comes from mailpoet and is for template with header and footer content separated
+			contentPatterns = patterns.filter(
-			contentPatternBlocks = patterns.find(
 				( pattern ) =>
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 					pattern?.templateTypes?.includes( 'email-template' )
-			)?.blocks as BlockInstance[];
+			);
 		}
 
-		return (
+		if ( ! contentPatterns || ! templates ) {
-			templates
+			return [];
+		}
+
+		const templateToPreview = [];
 		// We don't want to show the blank template in the list
+		templates
 			?.filter(
 				( template: EmailTemplatePreview ) =>
 					template.slug !== 'email-general'
 			)
-				.map( ( template: EmailTemplatePreview ): TemplatePreview => {
+			?.forEach( ( template: EmailTemplatePreview ) => {
+				contentPatterns?.forEach( ( contentPattern ) => {
 					let parsedTemplate = parse( template.content?.raw );
 					parsedTemplate = setPostContentInnerBlocks(
 						parsedTemplate,
-						contentPatternBlocks
+						contentPattern.blocks
 					);
-
+					templateToPreview.push( {
-					return {
 						id: template.id,
 						slug: template.slug,
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 						previewContentParsed: parsedTemplate,
-						emailParsed: contentPatternBlocks,
+						emailParsed: contentPattern.blocks,
 						template,
 						category: 'basic', // TODO: This will be updated once template category is implemented
 						type: template.type,
-					};
+						presentName: `${ template.title } - ${ contentPattern.name }`,
-				} )
+					} );
-		);
+				} );
+			} );
+		return templateToPreview;
 	}, [ templates, patterns, customEmailContent ] );
 
 	const allEmailPosts = useMemo( () => {