Add support for basic tab navigation when selecting template

MAILPOET-6331

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

@@ -1,4 +1,4 @@
-
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { dispatch } from '@wordpress/data';
 import {
@@ -15,6 +15,33 @@ import { TemplateCategoriesListSidebar } from './template-categories-list-sideba
 
 const BLANK_TEMPLATE = 'email-general';
 
+function SelectTemplateBody( {
+	initialCategory,
+	templateCategories,
+	templates,
+	handleTemplateSelection,
+} ) {
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<TemplateCategoriesListSidebar
+				templateCategories={ templateCategories }
+				selectedCategory={ selectedCategory }
+				onClickCategory={ setSelectedCategory }
+			/>
+
+			<TemplateList
+				templates={ templates }
+				onTemplateSelection={ handleTemplateSelection }
+				selectedCategory={ selectedCategory }
+			/>
+		</div>
+	);
+}
+
 export function SelectTemplateModal( {
                                        onSelectCallback,
                                        closeCallback = null,
@@ -52,28 +79,28 @@ export function SelectTemplateModal( {
 	const dummyTemplateCategories = [
 		{
 			name: 'recent',
-      label: 'Recent'
+			label: 'Recent',
 		},
 		{
 			name: 'basic',
-      label: 'Basic'
-    }
+			label: 'Basic',
+		},
 	];
 
-  const onClickCategory = () => {}
-
 	return (
 		<Modal
-			title="Select a template"
+			title={ __( 'Select a template', 'mailpoet' ) }
       onRequestClose={ () =>
         closeCallback ? closeCallback() : handleCloseWithoutSelection()
       }
 			isFullScreen
 		>
-			<div className="block-editor-block-patterns-explorer">
-        <TemplateCategoriesListSidebar templateCategories={dummyTemplateCategories} selectedCategory={dummyTemplateCategories[0].name} onClickCategory={onClickCategory} />
-
-        <TemplateList templates={templates} onTemplateSelection={ handleTemplateSelection} />
+			<SelectTemplateBody
+				initialCategory={ dummyTemplateCategories[ 0 ] }
+				templateCategories={ dummyTemplateCategories }
+				templates={ templates }
+				handleTemplateSelection={ handleTemplateSelection }
+			/>
 
       <Flex justify="flex-end">
         <FlexItem>
@@ -86,7 +113,6 @@ export function SelectTemplateModal( {
           </Button>
         </FlexItem>
       </Flex>
-			</div>
 		</Modal>
 	);
 }

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

@@ -1,18 +1,15 @@
+import { useMemo } from '@wordpress/element';
 // @ts-expect-error No types available for this component
 import { BlockPreview } from '@wordpress/block-editor';
 import {
 	__experimentalHStack as HStack, // eslint-disable-line
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Async } from './async';
 
-export function TemplateList({templates, onTemplateSelection}) {
-
+function TemplateListBox( { templates, onTemplateSelection } ) {
 	return (
-    <div className="block-editor-block-patterns-explorer__list">
-      <div
-        className="block-editor-block-patterns-list"
-        role="listbox"
-      >
+		<div className="block-editor-block-patterns-list" role="listbox">
 			{ templates.map( ( template ) => (
 				<div
 					key={ template.slug }
@@ -26,17 +23,16 @@ export function TemplateList({templates, onTemplateSelection}) {
 							onTemplateSelection( template );
 						} }
 						onKeyPress={ ( event ) => {
-                if (
-                  event.key === 'Enter' ||
-                  event.key === ' '
-                ) {
+							if ( event.key === 'Enter' || event.key === ' ' ) {
 								onTemplateSelection( template );
 							}
 						} }
 					>
 						<Async
 							placeholder={
-                  <p>rendering template</p>
+								<p>
+									{ __( 'rendering template', 'mailpoet' ) }
+								</p>
 							}
 						>
 							<BlockPreview
@@ -52,9 +48,7 @@ export function TemplateList({templates, onTemplateSelection}) {
 
 							<HStack className="block-editor-patterns__pattern-details">
 								<div className="block-editor-block-patterns-list__item-title">
-                    {
-                      template.template.title.rendered
-                    }
+									{ template.template.title.rendered }
 								</div>
 							</HStack>
 						</Async>
@@ -62,6 +56,28 @@ export function TemplateList({templates, onTemplateSelection}) {
 				</div>
 			) ) }
 		</div>
+	);
+}
+
+export function TemplateList( {
+	templates,
+	onTemplateSelection,
+	selectedCategory,
+} ) {
+	const filteredTemplates = useMemo(
+		() =>
+			templates.filter(
+				( template ) => template.category === selectedCategory
+			),
+		[ selectedCategory, templates ]
+	);
+
+	return (
+		<div className="block-editor-block-patterns-explorer__list">
+			<TemplateListBox
+				templates={ filteredTemplates }
+				onTemplateSelection={ onTemplateSelection }
+			/>
 		</div>
 	);
 }

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

@@ -103,6 +103,7 @@ export function usePreviewTemplates(
 						? contentPatternBlocksGeneral
 						: contentPatternBlocks,
 				template,
+				category: 'basic', // TODO: This will be updated once template category is implemented
 			};
 		} ),
 	];

packages/js/email-editor/src/store/types.ts

@@ -228,8 +228,11 @@ export type TemplatePreview = {
 	previewContentParsed: BlockInstance[];
 	emailParsed: BlockInstance[];
 	template: EmailTemplatePreview;
+	category?: TemplateCategory;
 };
 
+export type TemplateCategory = 'recent' | 'basic';
+
 export type Feature =
 	| 'fullscreenMode'
 	| 'showIconLabels'