@fonderie/vue-courier-admin-screens 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -292,6 +292,8 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
     type: { type: String, default: void 0 },
     /** Locales already in use, offered as suggestions. */
     locales: { type: Array, default: () => [] },
+    /** The system locale: the default version already is it, so adding it is refused. */
+    defaultLocale: { type: String, default: void 0 },
     /** The console language; defaults to English. */
     locale: { type: String, default: void 0 }
   },
@@ -319,7 +321,7 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
     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 }) => {
+      props.client.getTemplate(props.type, null).catch(() => props.client.getBuiltInTemplate(props.type, null)).then(({ result }) => {
         subject.value = result.subject ?? "";
         html.value = result.html ?? "";
         text.value = result.text;
@@ -384,6 +386,10 @@ var TemplateCreateScreen = (0, import_vue.defineComponent)({
         error.value = tr("templates.create.errorLocale");
         return;
       }
+      if (l && props.defaultLocale && l.toLowerCase() === props.defaultLocale.toLowerCase()) {
+        error.value = tr("templates.create.errorDefaultLocale", { locale: props.defaultLocale });
+        return;
+      }
       if (!text.value.trim()) {
         error.value = tr("templates.create.errorText");
         return;
@@ -527,7 +533,8 @@ var tabSelected = {
   borderBottomColor: "var(--fonderie-text,#171717)",
   cursor: "default"
 };
-var tabInactive = { ...tab, opacity: 0.55, textDecoration: "line-through" };
+var tabInactive = { opacity: 0.55, textDecoration: "line-through" };
+var tabBuiltIn = { fontStyle: "italic" };
 var tabBar = {
   display: "flex",
   alignItems: "flex-end",
@@ -577,10 +584,27 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       props.type,
       props.locale
     );
-    const { templates, saveTemplate, removeTemplate } = (0, import_vue_courier_admin2.useTemplates)(props.client);
-    const siblings = (0, import_vue2.computed)(
-      () => (0, import_client2.groupTemplatesByType)(templates.value).find((g) => g.type === props.type)?.entries ?? []
+    const { saveTemplate, removeTemplate } = (0, import_vue_courier_admin2.useTemplates)(props.client);
+    const notSaved = (0, import_vue2.computed)(() => error.value?.status === 404);
+    const { builtIn: builtIn2, isLoading: builtInLoading } = (0, import_vue_courier_admin2.useBuiltInTemplate)(
+      props.client,
+      props.type,
+      props.locale
+    );
+    const { catalog, refresh: refreshCatalog } = (0, import_vue_courier_admin2.useTemplateCatalog)(props.client);
+    const defaultLocale = (0, import_vue2.computed)(() => catalog.value?.defaultLocale ?? "en-US");
+    const email = (0, import_vue2.computed)(() => catalog.value?.emails.find((e) => e.type === props.type));
+    const languages = (0, import_vue2.computed)(
+      () => email.value ? (0, import_client2.templateLanguages)(email.value, defaultLocale.value) : []
     );
+    const source = (0, import_vue2.computed)(() => template.value ?? (notSaved.value ? builtIn2.value : null));
+    const protectedRow = (0, import_vue2.computed)(() => !props.locale && (email.value?.system ?? props.system));
+    const shipsHere = (0, import_vue2.computed)(
+      () => props.locale ? languages.value.some((l) => l.locale === props.locale && l.builtIn) : !!email.value?.builtIn.default
+    );
+    const { resolution, resolve } = (0, import_vue_courier_admin2.useTemplateResolution)(props.client);
+    const probe = (0, import_vue2.ref)("");
+    (0, import_vue2.watch)(defaultLocale, (dl) => void resolve(props.type, props.locale ?? dl), { immediate: true });
     const isDeleting = (0, import_vue2.ref)(false);
     const { revisions, rollback } = (0, import_vue_courier_admin2.useTemplateRevisions)(props.client, props.type, props.locale);
     const isSaving = (0, import_vue2.ref)(false);
@@ -589,12 +613,12 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
     const html = (0, import_vue2.ref)("");
     const text = (0, import_vue2.ref)("");
     const active = (0, import_vue2.ref)(true);
-    (0, import_vue2.watch)(template, (tpl) => {
-      if (!tpl) return;
-      subject.value = tpl.subject ?? "";
-      html.value = tpl.html ?? "";
-      text.value = tpl.text;
-      active.value = tpl.active;
+    (0, import_vue2.watch)(source, (src) => {
+      if (!src) return;
+      subject.value = src.subject ?? "";
+      html.value = src.html ?? "";
+      text.value = src.text;
+      active.value = template.value ? template.value.active : true;
     });
     const {
       preview,
@@ -639,13 +663,13 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
     }
     let previewTimer;
     (0, import_vue2.watch)([template, subject, html, text, sampleJson], () => {
-      if (!template.value) return;
+      if (!source.value) return;
       clearTimeout(previewTimer);
       previewTimer = setTimeout(() => void run(), PREVIEW_DEBOUNCE_MS2);
     });
     const dirty = (0, import_vue2.computed)(() => {
       const tpl = template.value;
-      return !!tpl && (subject.value !== (tpl.subject ?? "") || html.value !== (tpl.html ?? "") || text.value !== tpl.text || active.value !== tpl.active);
+      return notSaved.value && !!builtIn2.value || !!tpl && (subject.value !== (tpl.subject ?? "") || html.value !== (tpl.html ?? "") || text.value !== tpl.text || active.value !== tpl.active);
     });
     async function handleSubmit(event) {
       event.preventDefault();
@@ -657,7 +681,7 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
         if (html.value) input.html = html.value;
         if (template.value?.version !== void 0) input.ifVersion = template.value.version;
         await saveTemplate(props.type, input, props.locale);
-        await refresh();
+        await Promise.all([refresh(), refreshCatalog()]);
         emit("saved");
       } catch (err) {
         saveError.value = err;
@@ -665,7 +689,32 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
         isSaving.value = false;
       }
     }
-    const leave = () => !dirty.value || window.confirm(t("templates.editor.discardChanges"));
+    const leave = () => !dirty.value || notSaved.value && !!builtIn2.value || window.confirm(t("templates.editor.discardChanges"));
+    async function handleReset() {
+      const copy = builtIn2.value;
+      if (!copy || !window.confirm(
+        t("templates.editor.confirmReset", { locale: props.locale ?? defaultLocale.value })
+      ))
+        return;
+      isDeleting.value = true;
+      saveError.value = null;
+      try {
+        if (props.locale) {
+          await removeTemplate(props.type, props.locale);
+        } else {
+          const input = { text: copy.text, active: active.value };
+          if (copy.subject) input.subject = copy.subject;
+          if (copy.html) input.html = copy.html;
+          if (template.value?.version !== void 0) input.ifVersion = template.value.version;
+          await saveTemplate(props.type, input, null);
+        }
+        await Promise.all([refresh(), refreshCatalog()]);
+      } catch (err) {
+        saveError.value = err;
+      } finally {
+        isDeleting.value = false;
+      }
+    }
     function renderTabBar() {
       if (!props.localeTabs && !props.allowAddLocale) return null;
       return (0, import_vue2.h)("div", { style: tabBar }, [
@@ -675,21 +724,30 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
           (0, import_vue2.h)(
             "nav",
             { "aria-label": t("templates.editor.locales"), style: tabs },
-            siblings.value.map((entry) => {
-              const selected = entry.locale === (props.locale ?? null);
+            languages.value.map((l) => {
+              const selected = l.locale === (props.locale ?? null);
               return (0, import_vue2.h)(
                 "button",
                 {
-                  key: entry.locale ?? "",
+                  key: l.label,
                   type: "button",
                   "aria-current": selected ? "true" : void 0,
-                  style: selected ? tabSelected : entry.active ? tab : tabInactive,
-                  title: entry.active ? void 0 : t("common.status.inactive"),
+                  style: {
+                    ...selected ? tabSelected : tab,
+                    ...l.saved ? {} : tabBuiltIn,
+                    ...l.active ? {} : tabInactive
+                  },
+                  title: l.active ? void 0 : t("common.status.inactive"),
                   onClick: () => {
-                    if (!selected && leave()) emit("select-locale", entry);
+                    if (!selected && leave())
+                      emit("select-locale", {
+                        type: props.type,
+                        locale: l.locale,
+                        system: !!email.value?.system
+                      });
                   }
                 },
-                entry.locale ?? t("templates.defaultChip")
+                l.label
               );
             })
           )
@@ -702,7 +760,8 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
             onClick: () => {
               if (leave())
                 emit("add-locale", props.type, {
-                  locales: (0, import_client2.missingTemplateLocales)(templates.value, props.type)
+                  locales: catalog.value ? (0, import_client2.suggestTemplateLocales)(catalog.value, props.type) : [],
+                  defaultLocale: defaultLocale.value
                 });
             }
           },
@@ -738,16 +797,19 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
       ]);
     }
     return () => {
-      if (isLoading.value) return (0, import_vue2.h)("p", { style: styles.status }, t("templates.editor.loading"));
-      if (error.value)
+      if (isLoading.value || notSaved.value && builtInLoading.value)
+        return (0, import_vue2.h)("p", { style: styles.status }, t("templates.editor.loading"));
+      if (error.value && !(notSaved.value && builtIn2.value))
         return (0, import_vue2.h)("p", { style: styles.error, role: "alert" }, error.value.explanation);
       return (0, import_vue2.h)("div", { style: styles.container }, [
         (0, import_vue2.h)("h1", { style: styles.title }, props.type),
         renderTabBar(),
         (0, import_vue2.h)("p", { style: styles.meta }, [
-          (0, import_vue2.h)("strong", props.locale ?? t("templates.defaultLocale")),
-          ` \xB7 v${template.value?.version ?? 1}`,
-          props.system ? ` \xB7 ${t("templates.editor.builtInNote")}` : ""
+          (0, import_vue2.h)("strong", props.locale ?? defaultLocale.value),
+          template.value ? ` \xB7 v${template.value.version}` : "",
+          template.value && protectedRow.value ? ` \xB7 ${t("templates.editor.builtInNote")}` : "",
+          !template.value && builtIn2.value ? ` \xB7 ${t("templates.editor.builtInCopy")}` : "",
+          resolution.value && resolution.value.chain.length > 1 && resolution.value.requested === (props.locale ?? defaultLocale.value) ? ` \xB7 ${t("templates.editor.chain", { chain: [...resolution.value.chain, defaultLocale.value].join(" \u2192 ") })}` : ""
         ]),
         (0, import_vue2.h)("div", { style: styles.split }, [
           (0, import_vue2.h)("div", { style: styles.column }, [
@@ -818,7 +880,16 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
                   isSaving.value ? t("common.saving") : t("common.save")
                 ),
                 !dirty.value && !isSaving.value ? (0, import_vue2.h)("span", { style: styles.meta }, t("templates.editor.noChanges")) : null,
-                !props.system ? (0, import_vue2.h)(
+                template.value && shipsHere.value && builtIn2.value ? (0, import_vue2.h)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: isDeleting.value,
+                    onClick: () => void handleReset(),
+                    style: { ...styles.rollbackButton, height: "36px", marginLeft: "auto" }
+                  },
+                  t("templates.editor.resetToBuiltIn")
+                ) : template.value && !protectedRow.value ? (0, import_vue2.h)(
                   "button",
                   {
                     type: "button",
@@ -877,6 +948,46 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
             ) : 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"))
           ])
         ]),
+        // Who receives what: any locale, answered by the same decision a send makes.
+        (0, import_vue2.h)("div", { style: styles.revisions }, [
+          (0, import_vue2.h)("h2", { style: styles.subtitle }, t("templates.editor.whoReceives")),
+          (0, import_vue2.h)(
+            "form",
+            {
+              style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" },
+              onSubmit: (event) => {
+                event.preventDefault();
+                if (probe.value.trim()) void resolve(props.type, probe.value.trim());
+              }
+            },
+            [
+              (0, import_vue2.h)("input", {
+                "aria-label": t("templates.editor.whoReceives"),
+                style: { ...styles.input, width: "200px" },
+                value: probe.value,
+                placeholder: t("templates.editor.whoPlaceholder"),
+                spellcheck: false,
+                onInput: (e) => {
+                  probe.value = e.target.value;
+                }
+              }),
+              (0, import_vue2.h)(
+                "button",
+                { type: "submit", style: { ...styles.rollbackButton, height: "36px" } },
+                t("templates.editor.check")
+              ),
+              resolution.value && probe.value.trim() ? (0, import_vue2.h)("span", { style: { ...styles.meta, marginBottom: "0" }, role: "status" }, [
+                t("templates.editor.receives", {
+                  requested: resolution.value.requested,
+                  sent: resolution.value.sent
+                }),
+                " ",
+                resolution.value.source === "saved" ? t("templates.editor.sourceSaved") : t("templates.editor.sourceBuiltIn"),
+                resolution.value.chain.length > 0 ? ` (${[...resolution.value.chain, resolution.value.defaultLocale].join(" \u2192 ")})` : ""
+              ]) : null
+            ]
+          )
+        ]),
         revisions.value.length > 0 ? (0, import_vue2.h)("div", { style: styles.revisions }, [
           (0, import_vue2.h)("h2", { style: styles.subtitle }, t("templates.editor.history")),
           (0, import_vue2.h)("ul", { style: styles.list }, revisions.value.map(renderRevision))
@@ -890,13 +1001,15 @@ var TemplateEditorScreen = (0, import_vue2.defineComponent)({
 var import_client3 = require("@fonderie/client");
 var import_vue_courier_admin3 = require("@fonderie/vue-courier-admin");
 var import_vue3 = require("vue");
+var MONO = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
 var builtIn = {
   fontSize: "11px",
   fontWeight: 500,
   padding: "1px 7px",
   borderRadius: "999px",
   border: "1px solid var(--fonderie-border,#e0e0e0)",
-  color: "var(--fonderie-text-muted,#5c5c5c)"
+  color: "var(--fonderie-text-muted,#5c5c5c)",
+  flexShrink: 0
 };
 var chip = {
   height: "24px",
@@ -907,23 +1020,42 @@ var chip = {
   background: "var(--fonderie-surface,#fff)",
   color: "var(--fonderie-text,#171717)",
   fontSize: "12px",
-  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  fontFamily: MONO,
   cursor: "pointer"
 };
-var chipInactive = { ...chip, opacity: 0.5, textDecoration: "line-through" };
+var chipBuiltIn = {
+  borderStyle: "dashed",
+  background: "transparent",
+  color: "var(--fonderie-text-muted,#5c5c5c)"
+};
+var chipOff = { opacity: 0.5, textDecoration: "line-through" };
 var row = {
   ...styles.row,
-  display: "flex",
+  display: "grid",
+  gridTemplateColumns: "minmax(0, 1fr) minmax(180px, 280px) 88px",
   alignItems: "center",
-  gap: "8px",
+  gap: "16px",
   paddingRight: "16px"
 };
-var rowButton = { ...styles.rowButton, width: "auto", flex: "1", minWidth: "0" };
-var chips = {
-  display: "flex",
-  flexWrap: "wrap",
-  justifyContent: "flex-end",
-  gap: "6px"
+var rowButton = {
+  ...styles.rowButton,
+  width: "auto",
+  minWidth: "0",
+  justifyContent: "flex-start",
+  gap: "12px"
+};
+var typeName = {
+  ...styles.type,
+  flex: "none",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var chips = { display: "flex", flexWrap: "wrap", gap: "6px" };
+var legend = {
+  fontSize: "12.5px",
+  color: "var(--fonderie-text-muted,#5c5c5c)",
+  margin: "10px 2px 0"
 };
 var newButton = {
   display: "inline-flex",
@@ -951,90 +1083,97 @@ var TemplateListScreen = (0, import_vue3.defineComponent)({
   },
   emits: {
     /**
-     * The whole row — type AND locale, and whether it is built-in. One row
-     * per email: the row opens the default locale, a locale chip that locale.
+     * One row per email — built-in ones included, even when nobody saved a
+     * copy. The row opens the default version; a language chip that language.
      */
     "select-template": (_template) => true,
     /** Receives the locales in use, to suggest. */
     "create-template": (_context) => true
   },
   setup(props, { emit }) {
-    const { templates, isLoading, error } = (0, import_vue_courier_admin3.useTemplates)(props.client);
+    const { catalog, isLoading, error } = (0, import_vue_courier_admin3.useTemplateCatalog)(props.client);
     const t = (key, params) => (0, import_client3.createAdminT)(props.locale)(key, params);
-    function renderRow(group) {
-      const primary = group.primary;
-      return (0, import_vue3.h)("li", { key: group.type, style: row }, [
-        (0, import_vue3.h)(
-          "button",
-          {
-            type: "button",
-            style: rowButton,
-            onClick: () => emit("select-template", primary)
-          },
-          [
-            (0, import_vue3.h)("span", { style: styles.type }, group.type),
-            group.system ? (0, import_vue3.h)("span", { style: builtIn }, t("templates.builtInBadge")) : null,
-            (0, import_vue3.h)("span", { style: primary.active ? styles.active : styles.inactive }, [
-              (0, import_vue3.h)("span", { style: styles.dot }),
-              primary.active ? t("common.status.active") : t("common.status.inactive")
-            ])
-          ]
-        ),
-        // Siblings of the row button, not inside it: a button cannot hold buttons.
+    const defaultLocale = () => catalog.value?.defaultLocale ?? "en-US";
+    function renderRow(email) {
+      const languages = (0, import_client3.templateLanguages)(email, defaultLocale());
+      const primary = languages.find((l) => l.locale === null) ?? languages[0];
+      const open = (l) => emit("select-template", {
+        type: email.type,
+        locale: l?.locale ?? null,
+        system: email.system
+      });
+      return (0, import_vue3.h)("li", { key: email.type, style: row }, [
+        (0, import_vue3.h)("button", { type: "button", style: rowButton, onClick: () => open(primary) }, [
+          (0, import_vue3.h)("span", { style: typeName }, email.type),
+          email.system ? (0, import_vue3.h)("span", { style: builtIn }, t("templates.builtInBadge")) : null
+        ]),
+        // Siblings of the row button: a button cannot hold buttons. Each chip
+        // names its email and language for screen readers.
         (0, import_vue3.h)(
           "span",
           { style: chips },
-          group.entries.map((entry) => {
-            const name = entry.locale ?? t("templates.defaultChip");
-            return (0, import_vue3.h)(
+          languages.map(
+            (l) => (0, import_vue3.h)(
               "button",
               {
-                key: entry.locale ?? "",
+                key: l.label,
                 type: "button",
-                style: entry.active ? chip : chipInactive,
-                "aria-label": t("templates.list.openLocale", { type: group.type, locale: name }),
-                title: entry.active ? void 0 : t("common.status.inactive"),
-                onClick: () => emit("select-template", entry)
+                style: { ...chip, ...l.saved ? {} : chipBuiltIn, ...l.active ? {} : chipOff },
+                "aria-label": t("templates.list.openLocale", { type: email.type, locale: l.label }),
+                title: l.active ? void 0 : t("common.status.inactive"),
+                onClick: () => open(l)
               },
-              name
-            );
-          })
-        )
+              l.label
+            )
+          )
+        ),
+        (0, import_vue3.h)("span", { style: primary?.active === false ? styles.inactive : styles.active }, [
+          (0, import_vue3.h)("span", { style: styles.dot }),
+          primary?.active === false ? t("common.status.inactive") : t("common.status.active")
+        ])
       ]);
     }
-    return () => (0, import_vue3.h)("div", { style: styles.listContainer }, [
-      (0, import_vue3.h)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: "16px"
-          }
-        },
-        [
-          (0, import_vue3.h)("h1", { style: styles.listTitle }, t("templates.list.title")),
-          props.allowCreate ? (0, import_vue3.h)(
-            "button",
-            {
-              type: "button",
-              style: newButton,
-              onClick: () => emit("create-template", {
-                locales: [
-                  ...new Set(
-                    templates.value.map((tpl) => tpl.locale).filter((l) => !!l)
-                  )
-                ]
-              })
-            },
-            t("templates.list.newTemplate")
-          ) : null
+    return () => {
+      const emails = catalog.value?.emails ?? [];
+      return (0, import_vue3.h)("div", { style: styles.listContainer }, [
+        (0, import_vue3.h)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "16px"
+            }
+          },
+          [
+            (0, import_vue3.h)("h1", { style: styles.listTitle }, t("templates.list.title")),
+            props.allowCreate ? (0, import_vue3.h)(
+              "button",
+              {
+                type: "button",
+                style: newButton,
+                onClick: () => emit("create-template", {
+                  locales: [
+                    ...new Set(
+                      emails.flatMap(
+                        (e) => (0, import_client3.templateLanguages)(e, defaultLocale()).filter((l) => l.locale !== null).map((l) => l.label)
+                      )
+                    )
+                  ].sort()
+                })
+              },
+              t("templates.list.newTemplate")
+            ) : null
+          ]
+        ),
+        (0, import_vue3.h)("p", { style: styles.hint }, t("templates.list.hint")),
+        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 }, emails.map(renderRow)),
+          (0, import_vue3.h)("p", { style: legend }, t("templates.list.legend"))
         ]
-      ),
-      (0, import_vue3.h)("p", { style: styles.hint }, t("templates.list.hint")),
-      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 }, (0, import_client3.groupTemplatesByType)(templates.value).map(renderRow))
-    ]);
+      ]);
+    };
   }
 });
 // Annotate the CommonJS export names for ESM import in node: