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:
@@ -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>
|
||||||
|
|||||||
@@ -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]
|
||||||
|
|||||||
Reference in New Issue
Block a user