fix: visual editor dialog and password reset flow

1. EmailBuilder: Fixed dialog handlers to not block all interactions
   - Previously dialog prevented all outside clicks
   - Now only blocks when WP media modal is open
   - Dialog can be properly closed via escape or outside click

2. DefaultTemplates: Updated new_customer email
   - Added note about using 'Forgot Password?' if link expires
   - Clear instructions for users
This commit is contained in:
Dwindi Ramadhana
2026-01-01 01:12:08 +07:00
parent 52cea87078
commit 9671c7255a
2 changed files with 17 additions and 23 deletions

View File

@@ -80,7 +80,7 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
throw new Error(`Unknown block type: ${type}`); throw new Error(`Unknown block type: ${type}`);
} }
})(); })();
onChange([...blocks, newBlock]); onChange([...blocks, newBlock]);
}; };
@@ -91,10 +91,10 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
const moveBlock = (id: string, direction: 'up' | 'down') => { const moveBlock = (id: string, direction: 'up' | 'down') => {
const index = blocks.findIndex(b => b.id === id); const index = blocks.findIndex(b => b.id === id);
if (index === -1) return; if (index === -1) return;
const newIndex = direction === 'up' ? index - 1 : index + 1; const newIndex = direction === 'up' ? index - 1 : index + 1;
if (newIndex < 0 || newIndex >= blocks.length) return; if (newIndex < 0 || newIndex >= blocks.length) return;
const newBlocks = [...blocks]; const newBlocks = [...blocks];
[newBlocks[index], newBlocks[newIndex]] = [newBlocks[newIndex], newBlocks[index]]; [newBlocks[index], newBlocks[newIndex]] = [newBlocks[newIndex], newBlocks[index]];
onChange(newBlocks); onChange(newBlocks);
@@ -102,7 +102,7 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
const openEditDialog = (block: EmailBlock) => { const openEditDialog = (block: EmailBlock) => {
setEditingBlockId(block.id); setEditingBlockId(block.id);
if (block.type === 'card') { if (block.type === 'card') {
// Convert markdown to HTML for rich text editor // Convert markdown to HTML for rich text editor
const htmlContent = parseMarkdownBasics(block.content); const htmlContent = parseMarkdownBasics(block.content);
@@ -121,16 +121,16 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
setEditingCustomMaxWidth(block.customMaxWidth); setEditingCustomMaxWidth(block.customMaxWidth);
setEditingAlign(block.align); setEditingAlign(block.align);
} }
setEditDialogOpen(true); setEditDialogOpen(true);
}; };
const saveEdit = () => { const saveEdit = () => {
if (!editingBlockId) return; if (!editingBlockId) return;
const newBlocks = blocks.map(block => { const newBlocks = blocks.map(block => {
if (block.id !== editingBlockId) return block; if (block.id !== editingBlockId) return block;
if (block.type === 'card') { if (block.type === 'card') {
// Convert HTML from rich text editor back to markdown for storage // Convert HTML from rich text editor back to markdown for storage
const markdownContent = htmlToMarkdown(editingContent); const markdownContent = htmlToMarkdown(editingContent);
@@ -154,10 +154,10 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
align: editingAlign, align: editingAlign,
}; };
} }
return block; return block;
}); });
onChange(newBlocks); onChange(newBlocks);
setEditDialogOpen(false); setEditDialogOpen(false);
setEditingBlockId(null); setEditingBlockId(null);
@@ -269,29 +269,23 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
{/* Edit Dialog */} {/* Edit Dialog */}
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}> <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
<DialogContent <DialogContent
className="sm:max-w-2xl" className="sm:max-w-2xl max-h-[90vh] overflow-y-auto"
onInteractOutside={(e) => { onInteractOutside={(e) => {
// Check if WordPress media modal is currently open // Only prevent closing if WordPress media modal is open
const wpMediaOpen = document.querySelector('.media-modal'); const wpMediaOpen = document.querySelector('.media-modal');
if (wpMediaOpen) { if (wpMediaOpen) {
// If WP media is open, ALWAYS prevent dialog from closing
// regardless of where the click happened
e.preventDefault(); e.preventDefault();
return;
} }
// Otherwise, allow the dialog to close normally via outside click
// If WP media is not open, prevent closing dialog for outside clicks
e.preventDefault();
}} }}
onEscapeKeyDown={(e) => { onEscapeKeyDown={(e) => {
// Allow escape to close WP media modal // Only prevent escape if WP media modal is open
const wpMediaOpen = document.querySelector('.media-modal'); const wpMediaOpen = document.querySelector('.media-modal');
if (wpMediaOpen) { if (wpMediaOpen) {
return; e.preventDefault();
} }
e.preventDefault(); // Otherwise, allow escape to close dialog
}} }}
> >
<DialogHeader> <DialogHeader>

View File

@@ -201,7 +201,7 @@ Your account is ready. Here\'s what you can do now:
[button url="{set_password_url}" style="solid"]Set Your Password[/button] [button url="{set_password_url}" style="solid"]Set Your Password[/button]
This link will expire in 24 hours. Once set, you can log in anytime. This link expires in 24 hours. If expired, use "Forgot Password?" on the login page.
[/card] [/card]
[button url="{shop_url}" style="outline"]Start Shopping[/button] [button url="{shop_url}" style="outline"]Start Shopping[/button]