shadcn.io is not affiliated with official shadcn/ui
Email Templates CRUD Block for Vue
A store's transactional emails with their translations: pick a template, switch language tabs, edit subject and body with checked variables, add a language as a copy of English or remove one with Undo.
Installation
Overview
Keep every language of an email in one place with this template editor for Vue with Ark UI. Four transactional templates sit in a band showing their names and how many of the four languages they have; a Native Select takes its place on a phone. The chosen template's languages are Tabs: a language that exists opens a subject Input and a body Textarea, and a missing one is a dashed tab that says "Missing" and opens a panel whose Add button copies the English text for you to translate. Variables are written like {"{{first_name}}"} from a typed list shown under the fields, and one that isn't on the list is a problem under its field with the names that would work. English is the default and can't be removed; removing another language leaves a line in the foot with Undo. Send test is the one Shine Button and only says that nothing was sent. For order emails, receipts, reminders and any text that exists in several languages.
FAQ
How do I add my own templates?
Edit START. Each template has a name, the vars it may use and entries, one per language with a subject and a body. The languages offered are listed in LANGS; the first, English, is DEFAULT_LANG.
How are variables checked?
unknownIn finds every {"{{name}}"} in the subject and the body with one regular expression and compares the names with the template's list. The first unknown one is shown under its field with the names that would work, and Send test refuses until it is fixed.
What does Add a language do?
It copies the default language's subject and body into the new tab and puts focus in the subject field, so you start from real text instead of a blank page. The tabs stay in the order of LANGS, wherever you add.
Why can't I remove English?
Every other language is a translation of it and a new language starts as a copy of it, so it has to stay. The button stays in place but aria-disabled and says why in the foot when pressed; other languages are removed with Undo in the foot.
What stays local, and how do I send a real test?
The templates live in state in this tab and Send test only writes a line in the foot. In your app call your mail provider from sendTest with the open language, render the variables with sample data on the server, and keep one stored text per template and language.