adding email template preview tab

[amrita-a-menon]

Pull Request

🔗 Related Issue

Closes #449

---

📝 Summary of Changes

• Added two tabs ("Edit Template" and "Preview Email") to the sequence step email editor in frontend/campaign-builder.html
• When "Preview Email" tab is clicked, reads the textarea content and replaces merge tags ({{firstName}}, {{lastName}}, {{email}}, {{company}}, {{icebreaker}}) with mock values so users can visualize the final email output before sending
• Switching back to "Edit Template" tab restores the editable textarea

---

🏷️ Type of Change

• 🐛 Bug fix
• ✨ New feature
• ♻️ Refactor
• 📝 Documentation update
• 🎨 UI / Style change
• 🔧 Chore

---

🧪 Testing

Tested locally in the browser.

Steps to test:

1. Open the campaign builder and click on an email step
2. Type an email body using merge tags e.g. Hi {{firstName}}, reaching out to you at {{company}}
3. Click the "Preview Email" tab
4. Verify merge tags are replaced with mock values (John Cena, WWE etc.)
5. Click "Edit Template" to switch back and verify the original content is preserved

---

📸 Screenshots (if applicable)

---

✅ Checklist

• No merge conflicts
• Changes follow the project guidelines
• Documentation updated (if applicable)
• Related issue linked
• Changes tested locally (if applicable)

Summary by CodeRabbit

• New Features
  • Added Edit Template and Preview Email tabs to the email body editor.
  • Added an email preview that displays merge tags with sample values.
  • Added quick switching between editing and preview modes.

[coderabbitai]

📝 Walkthrough

Walkthrough

The email body editor now provides “Edit Template” and “Preview Email” tabs. Preview mode replaces supported merge tags with hardcoded mock values and displays the resulting email body.

Changes

Email preview editor

Layer / File(s)	Summary
Tabbed email body editor frontend/campaign-builder.html	Replaces the single body textarea with edit and preview views, adds tab controls, and implements visibility, active-state, and merge-tag substitution behavior.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

• Issue 663 — Adds related campaign-builder email preview functionality, though it focuses on a launch-time modal and backend/AI-generated preview.

Suggested labels: frontend, type:feature

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: adding an email template preview tab.
Linked Issues check	✅ Passed	The change adds Edit Template/Preview Email tabs and replaces merge tags with mock values in the preview, matching #449.
Out of Scope Changes check	✅ Passed	The diff appears focused on the requested email preview behavior with no obvious unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/campaign-builder.html (1)

2100-2127: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Preview logic is correct and safe; consider regex-based substitution for robustness.

The implementation correctly uses textContent (line 2119) to render preview content, which prevents XSS from user-entered template text. Tab toggling logic is sound.

One fragility: the replaceAll loop (lines 2116-2118) iterates over MOCK_DATA entries sequentially. If any mock value ever contained a substring matching another tag (e.g., {{company}} set to "{{firstName}} Inc"), it would be double-replaced. A single-pass regex replace avoids this:

♻️ Optional: single-pass regex substitution

             let preview = document.getElementById('ep-body').value;
-            Object.entries(MOCK_DATA).forEach(([tag, value]) => {
-                preview = preview.replaceAll(tag, value);
-            });
+            preview = preview.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+                const tag = `{{${key}}}`;
+                return MOCK_DATA.hasOwnProperty(tag) ? MOCK_DATA[tag] : match;
+            });
             document.getElementById('email-preview-box').textContent = preview;

This also leaves unrecognized tags (e.g., custom variables like {{industry}} that the backend supports per personalize_email) visible in the preview rather than silently leaving them, which gives the user a clearer picture of what will and won't be substituted.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/campaign-builder.html` around lines 2100 - 2127, Update the preview
handler using MOCK_DATA to perform one-pass placeholder substitution instead of
sequential replaceAll calls. Build a regex from the MOCK_DATA keys with proper
escaping and replace each match via its corresponding value, preserving
unrecognized template tags in the rendered preview and the existing textContent
assignment.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/campaign-builder.html`:
- Around line 2100-2127: Update the preview handler using MOCK_DATA to perform
one-pass placeholder substitution instead of sequential replaceAll calls. Build
a regex from the MOCK_DATA keys with proper escaping and replace each match via
its corresponding value, preserving unrecognized template tags in the rendered
preview and the existing textContent assignment.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ea379f1a-eb2e-4bb5-94ad-d41be4dd2285

📥 Commits

Reviewing files that changed from the base of the PR and between 4a33158 and 2d848e7.

📒 Files selected for processing (1)

• frontend/campaign-builder.html

[amrita-a-menon]

@Kuldeeep18 , please do take a look into this PR at your convenience and let me know if there is anything that you would prefer changed. Hope we can get this merged soon. Cheers!

[amrita-a-menon]

@Kuldeeep18 , just boosting this thread up. Completed this PR 2 weeks ago, so I hope I can get your approval and get this merged as soon as possible. Cheers!