Add revert template confirmation modal

[MAILPOET-6336]

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

@@ -4,10 +4,15 @@ import {
 	PanelRow,
 	DropdownMenu,
 	MenuItem,
+	Modal,
+	Button,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Icon, layout, moreVertical } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 import { storeName } from '../../store';
 
 export function TemplateInfo() {
@@ -15,10 +20,15 @@ export function TemplateInfo() {
 		( select ) => select( storeName ).getCurrentTemplate(),
 		[]
 	);
+	const [ isResetConfirmOpen, setResetConfirmOpen ] = useState( false );
+	const { revertAndSaveTemplate } = useDispatch( storeName );
+
 	// @ts-expect-error Todo template type is not defined
 	const description = template?.description || '';
+	const closeResetConfirm = () => setResetConfirmOpen( false );
 
 	return (
+		<>
 			<Panel className="mailpoet-email-sidebar__email-type-info">
 				<PanelBody>
 					<PanelRow>
@@ -34,11 +44,15 @@ export function TemplateInfo() {
 								</h2>
 								<DropdownMenu
 									icon={ moreVertical }
-								label={ __( 'Template actions', 'mailpoet' ) }
+									label={ __(
+										'Template actions',
+										'mailpoet'
+									) }
 								>
 									{ ( { onClose } ) => (
 										<MenuItem
 											onClick={ () => {
+												setResetConfirmOpen( true );
 												onClose();
 											} }
 											info={ __(
@@ -62,5 +76,42 @@ export function TemplateInfo() {
 					</PanelRow>
 				</PanelBody>
 			</Panel>
+			{ isResetConfirmOpen && (
+				<Modal
+					title={ __( 'Reset template to default', 'mailpoet' ) }
+					size="medium"
+					onRequestClose={ closeResetConfirm }
+					__experimentalHideHeader
+				>
+					<p>
+						{ __(
+							'Reset to default and clear all customization?',
+							'mailpoet'
+						) }
+					</p>
+					<Flex justify={ 'end' }>
+						<FlexItem>
+							<Button
+								variant="tertiary"
+								onClick={ closeResetConfirm }
+							>
+								{ __( 'Cancel', 'mailpoet' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="primary"
+								onClick={ async () => {
+									await revertAndSaveTemplate( template );
+									closeResetConfirm();
+								} }
+							>
+								{ __( 'Reset', 'mailpoet' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal>
+			) }
+		</>
 	);
 }