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

Extract template reset modal to an extra component

Browse Source 
[MAILPOET-6336]
This commit is contained in:
Rostislav Wolny
2024-12-03 14:15:44 +01:00
committed by Rostislav Wolný
parent c7049468c2
commit 1717a0a235
2 changed files with 48 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,16 +4,13 @@ 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, useDispatch } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { Icon, layout, moreVertical } from '@wordpress/icons'; import { Icon, layout, moreVertical } from '@wordpress/icons';
import { useState } from '@wordpress/element'; import { useState } from '@wordpress/element';
import { storeName } from '../../store'; import { storeName } from '../../store';
import { TemplateRevertModal } from './template-revert-modal';
export function TemplateInfo() { export function TemplateInfo() {
const template = useSelect( const template = useSelect(
@ -21,11 +18,9 @@ export function TemplateInfo() {
[] []
); );
const [ isResetConfirmOpen, setResetConfirmOpen ] = useState( false ); 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 (
<> <>
@ -38,7 +33,6 @@ export function TemplateInfo() {
<div className="mailpoet-email-type-info__content"> <div className="mailpoet-email-type-info__content">
<div className="mailpoet-email-type-info__content_heading"> <div className="mailpoet-email-type-info__content_heading">
<h2> <h2>
{ /* @ts-expect-error Todo template type is not defined */ }
{ template?.title || { template?.title ||
__( 'Template', 'mailpoet' ) } __( 'Template', 'mailpoet' ) }
</h2> </h2>
@ -77,40 +71,11 @@ export function TemplateInfo() {
</PanelBody> </PanelBody>
</Panel> </Panel>
{ isResetConfirmOpen && ( { isResetConfirmOpen && (
<Modal <TemplateRevertModal
title={ __( 'Reset template to default', 'mailpoet' ) } close={ () => {
size="medium" setResetConfirmOpen( false );
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>
) } ) }
</> </>
); );

41
packages/js/email-editor/src/components/sidebar/template-revert-modal.tsx Normal file
View File

@ -0,0 +1,41 @@
import { __ } from '@wordpress/i18n';
import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { storeName } from '../../store';
export function TemplateRevertModal( { close } ) {
const template = useSelect(
( select ) => select( storeName ).getCurrentTemplate(),
[]
);
const { revertAndSaveTemplate } = useDispatch( storeName );
return (
<Modal size="medium" onRequestClose={ close } __experimentalHideHeader>
<p>
{ __(
'Reset to default and clear all customization?',
'mailpoet'
) }
</p>
<Flex justify={ 'end' }>
<FlexItem>
<Button variant="tertiary" onClick={ close }>
{ __( 'Cancel', 'mailpoet' ) }
</Button>
</FlexItem>
<FlexItem>
<Button
variant="primary"
onClick={ async () => {
await revertAndSaveTemplate( template );
close();
} }
>
{ __( 'Reset', 'mailpoet' ) }
</Button>
</FlexItem>
</Flex>
</Modal>
);
}