115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { X } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { substitutePlaceholders, isBuiltInPlaceholder } from '@/lib/template-utils';
|
|
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
|
import type { EmailTemplate } from '@/lib/template-types';
|
|
|
|
interface PlaceholderFillModalProps {
|
|
template: EmailTemplate;
|
|
placeholders: string[];
|
|
autoFilled: Record<string, string>;
|
|
onConfirm: (values: Record<string, string>) => void;
|
|
onSkip: () => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PlaceholderFillModal({
|
|
template,
|
|
placeholders,
|
|
autoFilled,
|
|
onConfirm,
|
|
onSkip,
|
|
onClose,
|
|
}: PlaceholderFillModalProps) {
|
|
const t = useTranslations('templates');
|
|
|
|
const [values, setValues] = useState<Record<string, string>>(() => {
|
|
const initial: Record<string, string> = {};
|
|
for (const p of placeholders) {
|
|
initial[p] = autoFilled[p] || '';
|
|
}
|
|
return initial;
|
|
});
|
|
|
|
const modalRef = useFocusTrap({
|
|
isActive: true,
|
|
onEscape: onClose,
|
|
restoreFocus: true,
|
|
});
|
|
|
|
const preview = useMemo(() => {
|
|
return substitutePlaceholders(template.body, values);
|
|
}, [template.body, values]);
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
|
|
<div
|
|
ref={modalRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="placeholder-fill-title"
|
|
className={cn(
|
|
'bg-background border border-border rounded-lg shadow-xl',
|
|
'w-full max-w-lg max-h-[85vh] overflow-hidden',
|
|
'animate-in zoom-in-95 duration-200'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
|
<h2 id="placeholder-fill-title" className="text-lg font-semibold text-foreground">
|
|
{t('fill_placeholders')}
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)] space-y-4">
|
|
{placeholders.map((p) => (
|
|
<div key={p}>
|
|
<label className="text-sm font-medium text-foreground flex items-center gap-2">
|
|
<span className="font-mono text-xs text-primary">{`{{${p}}}`}</span>
|
|
{isBuiltInPlaceholder(p) && (
|
|
<span className="text-xs text-muted-foreground">{t(`placeholders.${p}`)}</span>
|
|
)}
|
|
</label>
|
|
<Input
|
|
value={values[p]}
|
|
onChange={(e) => setValues((prev) => ({ ...prev, [p]: e.target.value }))}
|
|
placeholder={t('enter_value')}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
{preview && (
|
|
<div className="mt-4 pt-4 border-t border-border">
|
|
<p className="text-xs font-medium text-muted-foreground mb-2">{t('preview')}</p>
|
|
<div className="text-sm text-foreground whitespace-pre-wrap p-3 rounded-md bg-muted/50 border border-border max-h-32 overflow-y-auto">
|
|
{template.isHTML ? <div dangerouslySetInnerHTML={{ __html: preview }}></div> : preview}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
|
|
<Button variant="ghost" size="sm" onClick={onSkip}>
|
|
{t('insert_raw')}
|
|
</Button>
|
|
<Button size="sm" onClick={() => onConfirm(values)}>
|
|
{t('insert_with_values')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|