@fonderie/vue-courier-admin-screens 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -280,7 +280,9 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
      */
     type: { type: String, default: void 0 },
     /** Locales already in use, offered as suggestions. */
-    locales: { type: Array, default: () => [] }
+    locales: { type: Array, default: () => [] },
+    /** The console language; defaults to English. */
+    locale: { type: String, default: void 0 }
   },
   emits: {
     /** What was created, so the caller can open it in the editor. */
@@ -289,12 +291,13 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
   setup(props, { emit }) {
     const addingLocale = props.type !== void 0;
     const newType = (0, import_vue.ref)("");
-    const locale = (0, import_vue.ref)("");
+    const targetLocale = (0, import_vue.ref)("");
     const subject = (0, import_vue.ref)("");
     const html = (0, import_vue.ref)("");
     const text = (0, import_vue.ref)("");
     const error = (0, import_vue.ref)(null);
     const busy = (0, import_vue.ref)(false);
+    const tr = (key, params) => (0, import_client.createAdminT)(props.locale)(key, params);
     (0, import_vue.onMounted)(() => {
       if (!props.type) return;
       props.client.getTemplate(props.type, null).then(({ result }) => {
@@ -307,21 +310,21 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
       e.preventDefault();
       error.value = null;
       const t = addingLocale ? props.type : newType.value.trim();
-      const l = locale.value.trim() || null;
+      const l = targetLocale.value.trim() || null;
       if (!TYPE_RE.test(t)) {
-        error.value = "Type: lowercase letters, digits, - and _ (e.g. weekly-digest).";
+        error.value = tr("templates.create.errorType");
         return;
       }
       if (addingLocale && !l) {
-        error.value = "Choose the locale to add, e.g. fr or fr-CA.";
+        error.value = tr("templates.create.errorLocaleRequired");
         return;
       }
       if (l && !LOCALE_RE.test(l)) {
-        error.value = "Locale: a language tag such as fr, es or fr-CA.";
+        error.value = tr("templates.create.errorLocale");
         return;
       }
       if (!text.value.trim()) {
-        error.value = "The plain-text body is required \u2014 it is what every email client can show.";
+        error.value = tr("templates.create.errorText");
         return;
       }
       busy.value = true;
@@ -331,7 +334,7 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
           (err) => !(err instanceof import_client.FonderieApiError && err.status === 404)
         );
         if (exists) {
-          error.value = `"${t}"${l ? ` (${l})` : ""} already exists \u2014 open it from the list to edit.`;
+          error.value = l ? tr("templates.create.existsLocale", { type: t, locale: l }) : tr("templates.create.exists", { type: t });
           return;
         }
         const input = { text: text.value, active: true };
@@ -364,19 +367,19 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
       (0, import_vue.h)(
         "h1",
         { style: styles.title },
-        addingLocale ? `Add a locale to ${props.type}` : "New template"
+        addingLocale ? tr("templates.create.titleLocale", { type: props.type }) : tr("templates.create.titleNew")
       ),
       (0, import_vue.h)(
         "p",
         { style: { ...styles.meta, lineHeight: 1.5 } },
-        addingLocale ? "Starts from the default copy. People whose locale matches receive this version; everyone else keeps the default." : "For an email your app sends that has no stored copy yet. The type must match what the app sends."
+        addingLocale ? tr("templates.create.hintLocale") : tr("templates.create.hintNew")
       ),
       (0, import_vue.h)("form", { style: styles.form, onSubmit: (ev) => void submit(ev) }, [
-        ...addingLocale ? [] : field("new-template-type", "Type", newType, { placeholder: "weekly-digest" }),
+        ...addingLocale ? [] : field("new-template-type", tr("templates.create.type"), newType, { placeholder: "weekly-digest" }),
         ...field(
           "new-template-locale",
-          addingLocale ? "Locale" : "Locale (optional \u2014 empty is the default)",
-          locale,
+          addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional"),
+          targetLocale,
           { placeholder: "fr", list: "new-template-locales" }
         ),
         (0, import_vue.h)(
@@ -384,9 +387,9 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
           { id: "new-template-locales" },
           [...new Set(props.locales)].map((l) => (0, import_vue.h)("option", { key: l, value: l }))
         ),
-        ...field("new-template-subject", "Subject", subject),
-        ...field("new-template-html", "HTML body", html, { textarea: true, minHeight: "160px" }),
-        ...field("new-template-text", "Plain-text body", text, {
+        ...field("new-template-subject", tr("templates.subject"), subject),
+        ...field("new-template-html", tr("templates.htmlBody"), html, { textarea: true, minHeight: "160px" }),
+        ...field("new-template-text", tr("templates.textBody"), text, {
           textarea: true,
           minHeight: "100px"
         }),
@@ -398,7 +401,7 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
             disabled: busy.value,
             style: { ...styles.button, marginTop: "16px" }
           },
-          busy.value ? "Creating\u2026" : addingLocale ? "Add locale" : "Create template"
+          busy.value ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew")
         )
       ])
     ]);
@@ -406,6 +409,7 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
 });
 
 // src/screens/TemplateEditorScreen.ts
+var import_client2 = require("@fonderie/client");
 var import_vue_courier_admin = require("@fonderie/vue-courier-admin");
 var import_vue2 = require("vue");
 var PREVIEW_DEBOUNCE_MS = 500;
@@ -422,7 +426,9 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
      */
     system: { type: Boolean, default: false },
     /** Shows "+ Add locale" on the default locale (emits add-locale). */
-    allowAddLocale: { type: Boolean, default: false }
+    allowAddLocale: { type: Boolean, default: false },
+    /** The console language (`locale` is the template's); defaults to English. */
+    uiLocale: { type: String, default: void 0 }
   },
   emits: {
     saved: () => true,
@@ -432,6 +438,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
     "add-locale": (_type) => true
   },
   setup(props, { emit }) {
+    const t = (key, params) => (0, import_client2.createAdminT)(props.uiLocale)(key, params);
     const { template, isLoading, error, refresh } = (0, import_vue_courier_admin.useTemplate)(
       props.client,
       props.type,
@@ -466,13 +473,13 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       try {
         const parsed = JSON.parse(sampleJson.value || "{}");
         if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-          sampleError.value = "Sample data must be a JSON object.";
+          sampleError.value = "templates.editor.sampleNotObject";
           return;
         }
         data = parsed;
         sampleError.value = null;
       } catch {
-        sampleError.value = "Sample data is not valid JSON.";
+        sampleError.value = "templates.editor.sampleInvalid";
         return;
       }
       const result = await renderPreview(
@@ -523,9 +530,8 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       }
     }
     async function handleDelete() {
-      const which = props.locale ? `the ${props.locale} version of "${props.type}"` : `"${props.type}"`;
-      const fallback = props.locale ? " People in that locale will receive the default version." : "";
-      if (!window.confirm(`Delete ${which}?${fallback}`)) return;
+      const message = props.locale ? t("templates.editor.confirmDeleteLocale", { locale: props.locale, type: props.type }) : t("templates.editor.confirmDelete", { type: props.type });
+      if (!window.confirm(message)) return;
       isDeleting.value = true;
       saveError.value = null;
       try {
@@ -541,17 +547,17 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       return (0, import_vue2.h)("li", { key: rev.version, style: styles.revisionRow }, [
         (0, import_vue2.h)(
           "span",
-          `v${rev.version} \u2014 ${rev.actor ?? "unknown"} \u2014 ${new Date(rev.createdAt).toLocaleString()}`
+          `v${rev.version} \u2014 ${rev.actor ?? t("templates.editor.unknownActor")} \u2014 ${(0, import_client2.formatAdminDate)(rev.createdAt, props.uiLocale)}`
         ),
         (0, import_vue2.h)(
           "button",
           { type: "button", style: styles.rollbackButton, onClick: () => rollback(rev.version) },
-          "Roll back"
+          t("templates.editor.rollBack")
         )
       ]);
     }
     return () => {
-      if (isLoading.value) return (0, import_vue2.h)("p", { style: styles.status }, "Loading template\u2026");
+      if (isLoading.value) return (0, import_vue2.h)("p", { style: styles.status }, t("templates.editor.loading"));
       if (error.value)
         return (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, error.value.explanation);
       return (0, import_vue2.h)("div", { style: styles.container }, [
@@ -567,19 +573,19 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                 style: { ...styles.rollbackButton, marginLeft: "auto" },
                 onClick: () => emit("add-locale", props.type)
               },
-              "+ Add locale"
+              t("templates.editor.addLocale")
             ) : null
           ]
         ),
         (0, import_vue2.h)("p", { style: styles.meta }, [
-          (0, import_vue2.h)("strong", props.locale ?? "default locale"),
+          (0, import_vue2.h)("strong", props.locale ?? t("templates.defaultLocale")),
           ` \xB7 v${template.value?.version ?? 1}`,
-          props.system ? " \xB7 built-in email: edit or roll back, it cannot be deleted" : ""
+          props.system ? ` \xB7 ${t("templates.editor.builtInNote")}` : ""
         ]),
         (0, import_vue2.h)("div", { style: styles.split }, [
           (0, import_vue2.h)("div", { style: styles.column }, [
             (0, import_vue2.h)("form", { style: styles.form, onSubmit: handleSubmit }, [
-              (0, import_vue2.h)("label", { style: styles.label, for: "template-subject" }, "Subject"),
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-subject" }, t("templates.subject")),
               (0, import_vue2.h)("input", {
                 id: "template-subject",
                 style: styles.input,
@@ -588,7 +594,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                   subject.value = e.target.value;
                 }
               }),
-              (0, import_vue2.h)("label", { style: styles.label, for: "template-html" }, "HTML body"),
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-html" }, t("templates.htmlBody")),
               (0, import_vue2.h)("textarea", {
                 id: "template-html",
                 style: styles.textarea,
@@ -598,7 +604,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                   html.value = e.target.value;
                 }
               }),
-              (0, import_vue2.h)("label", { style: styles.label, for: "template-text" }, "Plain-text body"),
+              (0, import_vue2.h)("label", { style: styles.label, for: "template-text" }, t("templates.textBody")),
               (0, import_vue2.h)("textarea", {
                 id: "template-text",
                 style: styles.textarea,
@@ -617,10 +623,10 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                     active.value = e.target.checked;
                   }
                 }),
-                "Active"
+                t("templates.editor.active")
               ]),
               saveError.value?.reason === "VERSION_CONFLICT" ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, [
-                "Someone changed this template since you opened it. Reload to see their change, then edit again. ",
+                `${t("templates.editor.conflict")} `,
                 (0, import_vue2.h)(
                   "button",
                   {
@@ -631,7 +637,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                       void refresh();
                     }
                   },
-                  "Reload"
+                  t("common.reload")
                 )
               ]) : saveError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, saveError.value.explanation) : null,
               (0, import_vue2.h)("div", { style: styles.saveRow }, [
@@ -642,9 +648,9 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                     disabled: isSaving.value || !dirty.value,
                     style: dirty.value ? styles.button : styles.buttonDisabled
                   },
-                  isSaving.value ? "Saving\u2026" : "Save"
+                  isSaving.value ? t("common.saving") : t("common.save")
                 ),
-                !dirty.value && !isSaving.value ? (0, import_vue2.h)("span", { style: styles.meta }, "No changes to save") : null,
+                !dirty.value && !isSaving.value ? (0, import_vue2.h)("span", { style: styles.meta }, t("templates.editor.noChanges")) : null,
                 !props.system ? (0, import_vue2.h)(
                   "button",
                   {
@@ -659,11 +665,11 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                       borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 40%, transparent)"
                     }
                   },
-                  isDeleting.value ? "Deleting\u2026" : "Delete"
+                  isDeleting.value ? t("common.deleting") : t("common.delete")
                 ) : null
               ])
             ]),
-            (0, import_vue2.h)("label", { style: styles.label, for: "template-sample" }, "Sample data"),
+            (0, import_vue2.h)("label", { style: styles.label, for: "template-sample" }, t("templates.editor.sampleData")),
             (0, import_vue2.h)("textarea", {
               id: "template-sample",
               style: styles.textarea,
@@ -674,12 +680,12 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                 sampleJson.value = e.target.value;
               }
             }),
-            sampleError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, sampleError.value) : null
+            sampleError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, t(sampleError.value)) : null
           ]),
           (0, import_vue2.h)("div", { style: styles.previewColumn }, [
             (0, import_vue2.h)("div", { style: styles.previewHeader }, [
-              (0, import_vue2.h)("span", { style: styles.label }, "Preview"),
-              (0, import_vue2.h)("span", { style: styles.meta }, isPreviewing.value ? "Rendering\u2026" : "Live")
+              (0, import_vue2.h)("span", { style: styles.label }, t("templates.editor.preview")),
+              (0, import_vue2.h)("span", { style: styles.meta }, isPreviewing.value ? t("templates.editor.rendering") : t("templates.editor.live"))
             ]),
             previewError.value ? (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, previewError.value.explanation) : null,
             preview.value?.subject ? (0, import_vue2.h)("p", { style: styles.previewSubject }, preview.value.subject) : null,
@@ -688,16 +694,16 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
               // must never execute in the dashboard's origin, where the admin
               // token lives.
               (0, import_vue2.h)("iframe", {
-                title: "Template preview",
+                title: t("templates.editor.previewTitle"),
                 style: styles.previewFrame,
                 sandbox: "",
                 srcdoc: preview.value.html
               })
-            ) : preview.value ? (0, import_vue2.h)("pre", { style: styles.previewText }, preview.value.text) : (0, import_vue2.h)("p", { style: styles.meta }, "Nothing rendered yet.")
+            ) : preview.value ? (0, import_vue2.h)("pre", { style: styles.previewText }, preview.value.text) : (0, import_vue2.h)("p", { style: styles.meta }, t("templates.editor.nothingRendered"))
           ])
         ]),
         revisions.value.length > 0 ? (0, import_vue2.h)("div", { style: styles.revisions }, [
-          (0, import_vue2.h)("h2", { style: styles.subtitle }, "History"),
+          (0, import_vue2.h)("h2", { style: styles.subtitle }, t("templates.editor.history")),
           (0, import_vue2.h)("ul", { style: styles.list }, revisions.value.map(renderRevision))
         ]) : null
       ]);
@@ -706,6 +712,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
 });
 
 // src/screens/TemplateListScreen.ts
+var import_client3 = require("@fonderie/client");
 var import_vue_courier_admin2 = require("@fonderie/vue-courier-admin");
 var import_vue3 = require("vue");
 var builtIn = {
@@ -736,7 +743,9 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
   props: {
     client: { type: Object, required: true },
     /** Shows a "New template" button (emits create-template). */
-    allowCreate: { type: Boolean, default: false }
+    allowCreate: { type: Boolean, default: false },
+    /** The console language; defaults to English. */
+    locale: { type: String, default: void 0 }
   },
   emits: {
     /** The whole row — type AND locale, and whether it is built-in. */
@@ -746,6 +755,7 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
   },
   setup(props, { emit }) {
     const { templates, isLoading, error } = (0, import_vue_courier_admin2.useTemplates)(props.client);
+    const t = (key, params) => (0, import_client3.createAdminT)(props.locale)(key, params);
     function renderRow(template) {
       return (0, import_vue3.h)("li", { key: `${template.type}:${template.locale ?? "base"}`, style: styles.row }, [
         (0, import_vue3.h)(
@@ -757,11 +767,11 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
           },
           [
             (0, import_vue3.h)("span", { style: styles.type }, template.type),
-            (0, import_vue3.h)("span", { style: styles.locale }, template.locale ?? "default locale"),
-            template.system ? (0, import_vue3.h)("span", { style: builtIn }, "built-in") : null,
+            (0, import_vue3.h)("span", { style: styles.locale }, template.locale ?? t("templates.defaultLocale")),
+            template.system ? (0, import_vue3.h)("span", { style: builtIn }, t("templates.builtInBadge")) : null,
             (0, import_vue3.h)("span", { style: template.active ? styles.active : styles.inactive }, [
               (0, import_vue3.h)("span", { style: styles.dot }),
-              template.active ? "active" : "inactive"
+              template.active ? t("common.status.active") : t("common.status.inactive")
             ])
           ]
         )
@@ -779,7 +789,7 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
           }
         },
         [
-          (0, import_vue3.h)("h1", { style: styles.listTitle }, "Templates"),
+          (0, import_vue3.h)("h1", { style: styles.listTitle }, t("templates.list.title")),
           props.allowCreate ? (0, import_vue3.h)(
             "button",
             {
@@ -788,21 +798,21 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
               onClick: () => emit("create-template", {
                 locales: [
                   ...new Set(
-                    templates.value.map((t) => t.locale).filter((l) => !!l)
+                    templates.value.map((tpl) => tpl.locale).filter((l) => !!l)
                   )
                 ]
               })
             },
-            "New template"
+            t("templates.list.newTemplate")
           ) : null
         ]
       ),
       (0, import_vue3.h)(
         "p",
         { style: styles.hint },
-        "Every email the app sends. Open one to edit its copy and preview it live."
+        t("templates.list.hint")
       ),
-      isLoading.value ? (0, import_vue3.h)("p", { style: styles.status }, "Loading templates\u2026") : error.value ? (0, import_vue3.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : (0, import_vue3.h)("ul", { style: styles.list }, templates.value.map(renderRow))
+      isLoading.value ? (0, import_vue3.h)("p", { style: styles.status }, t("templates.list.loading")) : error.value ? (0, import_vue3.h)("p", { style: styles.error, role: "alert" }, error.value.explanation) : (0, import_vue3.h)("ul", { style: styles.list }, templates.value.map(renderRow))
     ]);
   }
 });