diff --git a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx index e7adb09264..e5d7f0f5aa 100644 --- a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx +++ b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx @@ -1,8 +1,34 @@ -import { Panel, PanelBody, PanelRow } from '@wordpress/components'; +/** + * WordPress dependencies + */ +import { + Panel, + PanelBody, + PanelRow, + Flex, + FlexItem, + DropdownMenu, + MenuItem, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { Icon, megaphone } from '@wordpress/icons'; +import { useSelect } from '@wordpress/data'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { storeName } from '../../store'; +import { EditTemplateModal } from './edit-template-modal'; export function EmailTypeInfo() { + const template = useSelect( + ( select ) => select( storeName ).getCurrentTemplate(), + [] + ); + const [ isEditTemplateModalOpen, setEditTemplateModalOpen ] = + useState( false ); + return ( @@ -20,6 +46,53 @@ export function EmailTypeInfo() { + { template && ( + + + + Template + + + + { ( { onClose } ) => ( + <> + { + setEditTemplateModalOpen( + true + ); + onClose(); + } } + > + { __( + 'Edit template', + 'mailpoet' + ) } + + { + onClose(); + } } + > + { __( + 'Swap template', + 'mailpoet' + ) } + + + ) } + + + + + ) } ); diff --git a/packages/js/email-editor/src/store/selectors.ts b/packages/js/email-editor/src/store/selectors.ts index 2921e9a2ee..efc8aa21a3 100644 --- a/packages/js/email-editor/src/store/selectors.ts +++ b/packages/js/email-editor/src/store/selectors.ts @@ -204,7 +204,7 @@ export const getCurrentTemplate = createRegistrySelector( ( select ) => () => { 'wp_template', // eslint-disable-next-line @typescript-eslint/no-unsafe-argument templateId - ); + ) as unknown as EmailTemplate; } return getEditedPostTemplate(); } );