fix: Add variable dropdown to TipTap rich text editor

Fixed missing variable dropdown in email template editor.

Problem:
- RichTextEditor component had dropdown functionality
- But variables prop was empty array
- Users had to manually type {variable_name}

Solution:
- Added comprehensive list of 40+ available variables
- Includes order, customer, payment, shipping, URL, store variables
- Variables now show in dropdown for easy insertion

Available Variables:
- Order: order_number, order_total, order_items_table, etc.
- Customer: customer_name, customer_email, customer_phone
- Payment: payment_method, transaction_id, payment_retry_url
- Shipping: tracking_number, tracking_url, shipping_carrier
- URLs: order_url, review_url, shop_url, my_account_url
- Store: site_name, support_email, current_year

Now users can click dropdown and select variables instead of typing them manually.
This commit is contained in:
dwindown
2025-11-19 16:35:27 +07:00
parent d3e36688cd
commit 29a7b55fda
2 changed files with 280 additions and 225 deletions

View File

@@ -36,8 +36,55 @@ export default function EditTemplate() {
const [subject, setSubject] = useState('');
const [markdownContent, setMarkdownContent] = useState(''); // Source of truth: Markdown
const [blocks, setBlocks] = useState<EmailBlock[]>([]); // Visual mode view (derived from markdown)
const [variables, setVariables] = useState<{ [key: string]: string }>({});
const [activeTab, setActiveTab] = useState('preview');
// All available template variables
const availableVariables = [
// Order variables
'order_number',
'order_id',
'order_date',
'order_total',
'order_subtotal',
'order_tax',
'order_shipping',
'order_discount',
'order_status',
'order_url',
'order_items_table',
'completion_date',
'estimated_delivery',
// Customer variables
'customer_name',
'customer_first_name',
'customer_last_name',
'customer_email',
'customer_phone',
'billing_address',
'shipping_address',
// Payment variables
'payment_method',
'payment_status',
'payment_date',
'transaction_id',
'payment_retry_url',
// Shipping/Tracking variables
'tracking_number',
'tracking_url',
'shipping_carrier',
'shipping_method',
// URL variables
'review_url',
'shop_url',
'my_account_url',
// Store variables
'site_name',
'site_title',
'store_name',
'store_url',
'support_email',
'current_year',
];
// Fetch email customization settings
const { data: emailSettings } = useQuery({
@@ -129,8 +176,8 @@ export default function EditTemplate() {
setBlocks(newBlocks); // Keep blocks in sync
};
// Get variable keys for the rich text editor
const variableKeys = Object.keys(variables);
// Variable keys for the rich text editor dropdown
const variableKeys = availableVariables;
// Parse [card] tags and [button] shortcodes for preview
const parseCardsForPreview = (content: string) => {