Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add revert template confirmation modal

Browse Source 
[MAILPOET-6336]
This commit is contained in:
Rostislav Wolny
2024-12-03 14:08:37 +01:00
committed by Rostislav Wolný
parent fb74526d9d
commit c7049468c2
1 changed files with 93 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,52 +20,98 @@ 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>
<span className="mailpoet-email-type-info__icon">
<Icon icon={ layout } />
</span>
<div className="mailpoet-email-type-info__content">
<div className="mailpoet-email-type-info__content_heading">
<h2>
{ /* @ts-expect-error Todo template type is not defined */ }
{ template?.title ||
__( 'Template', 'mailpoet' ) }
</h2>
<DropdownMenu
icon={ moreVertical }
label={ __( 'Template actions', 'mailpoet' ) }
>
{ ( { onClose } ) => (
<MenuItem
onClick={ () => {
onClose();
} }
info={ __(
'Reset to default to clear all customizations',
'mailpoet'
) }
>
{ __( 'Reset', 'mailpoet' ) }
</MenuItem>
<>
<Panel className="mailpoet-email-sidebar__email-type-info">
<PanelBody>
<PanelRow>
<span className="mailpoet-email-type-info__icon">
<Icon icon={ layout } />
</span>
<div className="mailpoet-email-type-info__content">
<div className="mailpoet-email-type-info__content_heading">
<h2>
{ /* @ts-expect-error Todo template type is not defined */ }
{ template?.title ||
__( 'Template', 'mailpoet' ) }
</h2>
<DropdownMenu
icon={ moreVertical }
label={ __(
'Template actions',
'mailpoet'
) }
>
{ ( { onClose } ) => (
<MenuItem
onClick={ () => {
setResetConfirmOpen( true );
onClose();
} }
info={ __(
'Reset to default to clear all customizations',
'mailpoet'
) }
>
{ __( 'Reset', 'mailpoet' ) }
</MenuItem>
) }
</DropdownMenu>
</div>
{ description && <p>{ description || '' }</p> }
<p>
{ __(
'Edit this template to be used across multiple emails.',
'mailpoet'
) }
</DropdownMenu>
</p>
</div>
{ description && <p>{ description || '' }</p> }
<p>
{ __(
'Edit this template to be used across multiple emails.',
'mailpoet'
) }
</p>
</div>
</PanelRow>
</PanelBody>
</Panel>
</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>
) }
</>
);
}