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, PanelRow,
DropdownMenu, DropdownMenu,
MenuItem, MenuItem,
Modal,
Button,
Flex,
FlexItem,
} from '@wordpress/components'; } from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { Icon, layout, moreVertical } from '@wordpress/icons'; import { Icon, layout, moreVertical } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { storeName } from '../../store'; import { storeName } from '../../store';
export function TemplateInfo() { export function TemplateInfo() {
@ -15,52 +20,98 @@ export function TemplateInfo() {
( select ) => select( storeName ).getCurrentTemplate(), ( select ) => select( storeName ).getCurrentTemplate(),
[] []
); );
const [ isResetConfirmOpen, setResetConfirmOpen ] = useState( false );
const { revertAndSaveTemplate } = useDispatch( storeName );
// @ts-expect-error Todo template type is not defined // @ts-expect-error Todo template type is not defined
const description = template?.description || ''; const description = template?.description || '';
const closeResetConfirm = () => setResetConfirmOpen( false );
return ( return (
<Panel className="mailpoet-email-sidebar__email-type-info"> <>
<PanelBody> <Panel className="mailpoet-email-sidebar__email-type-info">
<PanelRow> <PanelBody>
<span className="mailpoet-email-type-info__icon"> <PanelRow>
<Icon icon={ layout } /> <span className="mailpoet-email-type-info__icon">
</span> <Icon icon={ layout } />
<div className="mailpoet-email-type-info__content"> </span>
<div className="mailpoet-email-type-info__content_heading"> <div className="mailpoet-email-type-info__content">
<h2> <div className="mailpoet-email-type-info__content_heading">
{ /* @ts-expect-error Todo template type is not defined */ } <h2>
{ template?.title || { /* @ts-expect-error Todo template type is not defined */ }
__( 'Template', 'mailpoet' ) } { template?.title ||
</h2> __( 'Template', 'mailpoet' ) }
<DropdownMenu </h2>
icon={ moreVertical } <DropdownMenu
label={ __( 'Template actions', 'mailpoet' ) } icon={ moreVertical }
> label={ __(
{ ( { onClose } ) => ( 'Template actions',
<MenuItem 'mailpoet'
onClick={ () => { ) }
onClose(); >
} } { ( { onClose } ) => (
info={ __( <MenuItem
'Reset to default to clear all customizations', onClick={ () => {
'mailpoet' setResetConfirmOpen( true );
) } onClose();
> } }
{ __( 'Reset', 'mailpoet' ) } info={ __(
</MenuItem> '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> </div>
{ description && <p>{ description || '' }</p> } </PanelRow>
<p> </PanelBody>
{ __( </Panel>
'Edit this template to be used across multiple emails.', { isResetConfirmOpen && (
'mailpoet' <Modal
) } title={ __( 'Reset template to default', 'mailpoet' ) }
</p> size="medium"
</div> onRequestClose={ closeResetConfirm }
</PanelRow> __experimentalHideHeader
</PanelBody> >
</Panel> <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>
) }
</>
); );
} }