Add basic swap template functionality

[MAILPOET-6336]

packages/js/email-editor/src/components/sidebar/email-type-info.tsx

@@ -20,6 +20,7 @@ import { useState } from '@wordpress/element';
  */
 import { storeName } from '../../store';
 import { EditTemplateModal } from './edit-template-modal';
+import { SelectTemplateModal } from '../template-select';
 
 export function EmailTypeInfo() {
 	const template = useSelect(
@@ -28,6 +29,8 @@ export function EmailTypeInfo() {
 	);
 	const [ isEditTemplateModalOpen, setEditTemplateModalOpen ] =
 		useState( false );
+	const [ isSelectTemplateModalOpen, setSelectTemplateModalOpen ] =
+		useState( false );
 
 	return (
 		<>
@@ -79,6 +82,9 @@ export function EmailTypeInfo() {
 												</MenuItem>
 												<MenuItem
 													onClick={ () => {
+														setSelectTemplateModalOpen(
+															true
+														);
 														onClose();
 													} }
 												>
@@ -101,6 +107,14 @@ export function EmailTypeInfo() {
 					close={ () => setEditTemplateModalOpen( false ) }
 				/>
 			) }
+			{ isSelectTemplateModalOpen && (
+				<SelectTemplateModal
+					onSelectCallback={ () =>
+						setSelectTemplateModalOpen( false )
+					}
+					closeCallback={ () => setSelectTemplateModalOpen( false ) }
+				/>
+			) }
 		</>
 	);
 }

packages/js/email-editor/src/components/template-select/select-modal.tsx

@@ -17,7 +17,10 @@ import { storeName, TemplatePreview } from '../../store';
 
 const BLANK_TEMPLATE = 'email-general';
 
-export function SelectTemplateModal( { onSelectCallback } ) {
+export function SelectTemplateModal( {
+	onSelectCallback,
+	closeCallback = null,
+} ) {
 	const [ templates ] = usePreviewTemplates();
 
 	const hasTemplates = templates?.length > 0;
@@ -46,7 +49,9 @@ export function SelectTemplateModal( { onSelectCallback } ) {
 	return (
 		<Modal
 			title="Select a template"
-			onRequestClose={ () => handleCloseWithoutSelection() }
+			onRequestClose={ () =>
+				closeCallback ? closeCallback() : handleCloseWithoutSelection()
+			}
 			isFullScreen
 		>
 			<div className="block-editor-block-patterns-explorer">