feat(templates): add localized push templates and actions

Share template keys across email and push with independent editors and revisions. Render localized actions and preserve version-one delivery. Ref: IT-1627
2026-10-31 09:38:05 +02:00
parent d4ee8fc0c8
commit aba4173827
79 changed files with 3906 additions and 104 deletions
@@ -578,3 +578,11 @@ body {
 }

 textarea.form-control { resize: vertical; }
+
+/* Keep channel/language comparisons readable inside the responsive wrapper. */
+.service-template-grid { min-width: 960px; }
+.service-template-grid .template-language-status { white-space: nowrap; }
+.template-channel-tabs .nav-link { min-width: 80px; text-align: center; }
+
+.template-unsaved-dialog { border: 1px solid #cfd8e3; border-radius: .5rem; padding: 1.5rem; max-width: min(440px, calc(100vw - 32px)); }
+.template-unsaved-dialog::backdrop { background: rgb(0 0 0 / 40%); }
@@ -5,7 +5,7 @@
    const activeField = document.getElementById('ActiveLanguageIndex');
    const variablesField = document.getElementById('VariablesJson');
    const samples = document.getElementById('previewVariables');
-    let dirty = false;
+    let dirty = !!form.querySelector('.validation-summary-errors');
    const sampleValues = new Map();

    function escapeHtml(value) {
@@ -77,29 +77,52 @@
    }

    function interpolate(text, html = false) {
-        let result = text;
-        samples.querySelectorAll('input').forEach(input => {
-            const name = input.dataset.variableName;
-            const value = html ? escapeHtml(input.value) : input.value;
-            result = result.split(`{{${name}}}`).join(value);
+        return text.replace(/\{\{([^{}]+)\}\}/g, (placeholder, name) => {
+            if (!sampleValues.has(name)) return placeholder;
+            const value = sampleValues.get(name);
+            return html ? escapeHtml(value) : value;
        });
-        return result;
    }

    function updatePreview() {
        const pane = activePane();
-        if (!pane) {
-            document.getElementById('previewLanguage').textContent = '(no versions)';
-            document.getElementById('previewSubject').textContent = '';
-            document.getElementById('previewText').textContent = '';
-            document.getElementById('previewHtmlFrame').srcdoc = '';
-            return;
+        const push = !!document.getElementById('previewTitle');
+        document.getElementById('previewLanguage').textContent = pane?.querySelector('.language-code').value ?? '(no versions)';
+        const heading = pane?.querySelector(push ? '[data-content="title"]' : '[data-content="subject"]')?.value ?? '';
+        const body = pane?.querySelector(push ? '[data-content="body"]' : '[data-content="text"]')?.value ?? '';
+        document.getElementById(push ? 'previewTitle' : 'previewSubject').textContent = interpolate(heading);
+        document.getElementById(push ? 'previewBody' : 'previewText').textContent = interpolate(body);
+        updateHtmlPreview(pane);
+        updateActionsPreview(pane);
+    }
+
+    function updateActionsPreview(pane) {
+        const container = document.getElementById('previewActions');
+        if (!container) return;
+        container.replaceChildren();
+        const hint = document.getElementById('previewDefaultAction');
+        try {
+            const actions = JSON.parse(pane?.querySelector('[data-content="actions"]')?.value || '{}');
+            if (!actions || (actions.buttons !== undefined && !Array.isArray(actions.buttons))) throw new Error();
+            (actions.buttons ?? []).forEach(item => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = 'btn btn-outline-primary btn-sm';
+                button.textContent = interpolate(item.label);
+                button.title = `Action: ${item.action}. Preview only.`;
+                container.append(button);
+            });
+            hint.textContent = actions.defaultAction ? `Notification tap: ${actions.defaultAction}` : 'No notification tap action configured.';
+        } catch {
+            hint.textContent = 'Invalid actions JSON. Use defaultAction and buttons with action and label.';
        }
-        document.getElementById('previewLanguage').textContent = pane.querySelector('.language-code').value;
-        document.getElementById('previewSubject').textContent = interpolate(pane.querySelector('[data-content="subject"]').value);
-        document.getElementById('previewText').textContent = interpolate(pane.querySelector('[data-content="text"]').value);
-        const html = interpolate(pane.querySelector('[data-content="html"]').value, true);
-        document.getElementById('previewHtmlFrame').srcdoc = `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; base-uri 'none'; form-action 'none'"><style>body{font-family:Arial,sans-serif;padding:20px;color:#1f2937;background:white}img{max-width:100%}</style></head><body>${html}</body></html>`;
+    }
+
+    function updateHtmlPreview(pane) {
+        const frame = document.getElementById('previewHtmlFrame');
+        if (!frame) return;
+        const html = interpolate(pane?.querySelector('[data-content="html"]')?.value ?? '', true);
+        frame.srcdoc = '<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src \'none\'; style-src \'unsafe-inline\'; img-src data:; base-uri \'none\'; form-action \'none\'"><style>body{font-family:Arial,sans-serif;padding:20px;color:#1f2937;background:white}img{max-width:100%}</style></head><body>' + html + '</body></html>';
    }

    tabs.addEventListener('click', event => {
@@ -126,5 +149,25 @@
        if (dirty) { event.preventDefault(); event.returnValue = ''; }
    });

+    const navigationDialog = document.createElement('dialog');
+    navigationDialog.className = 'template-unsaved-dialog';
+    navigationDialog.setAttribute('aria-labelledby', 'unsaved-title');
+    navigationDialog.innerHTML = '<h2 id="unsaved-title" class="h5">Unsaved changes</h2><p>Save this channel before leaving, or discard its unsaved changes.</p><div class="d-flex flex-wrap gap-2"><button type="button" class="btn btn-primary" data-keep-editing>Keep editing</button><button type="button" class="btn btn-outline-danger" data-discard-changes>Discard changes</button></div>';
+    document.body.append(navigationDialog);
+    let pendingNavigation;
+    navigationDialog.querySelector('[data-keep-editing]').addEventListener('click', () => navigationDialog.close());
+    navigationDialog.querySelector('[data-discard-changes]').addEventListener('click', () => {
+        dirty = false;
+        navigationDialog.close();
+        window.location.assign(pendingNavigation);
+    });
+    document.addEventListener('click', event => {
+        const link = event.target.closest('a');
+        if (!dirty || !link || link.target === '_blank') return;
+        event.preventDefault();
+        pendingNavigation = link.href;
+        navigationDialog.showModal();
+    });
+
    renderSamples();
 })();
@@ -0,0 +1,10 @@
+(() => {
+    const key = document.getElementById('Key');
+    document.querySelectorAll('[data-template-channel]').forEach(link => {
+        link.addEventListener('click', () => {
+            const url = new URL(link.href);
+            url.searchParams.set('key', key?.value ?? url.searchParams.get('key') ?? '');
+            link.href = url.href;
+        });
+    });
+})();