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
This commit is contained in:
2026-10-31 09:38:05 +02:00
parent d4ee8fc0c8
commit aba4173827
79 changed files with 3906 additions and 104 deletions
@@ -73,10 +73,26 @@
</div>
<div class="modal-body">
<p class="text-muted small">Tests the current form settings without saving. Blank credentials use the saved credentials only when the Firebase project is unchanged.</p>
<p class="text-muted small">Sends a neutral notification directly through Firebase. This tests the channel, not Invemory account binding, navigation or background handling. Use your own test device only.</p>
<label for="pushTestVersion" class="form-label fw-semibold">Test format</label>
<select id="pushTestVersion" class="form-select mb-2" aria-describedby="pushTestFormatHelp">
<option value="1">Legacy — simple notification</option>
<option value="2">Version 2 — notification with a button</option>
</select>
<p id="pushTestFormatHelp" class="text-muted small">Legacy sends the existing neutral notification. Version 2 tests the action payload and requires a client that supports buttons. Firebase acceptance alone does not confirm display or navigation. Use your own test device only.</p>
<label for="pushRecipientToken" class="form-label fw-semibold">Recipient token</label>
<textarea id="pushRecipientToken" class="form-control font-monospace" rows="3" maxlength="4096" autocomplete="off" spellcheck="false"></textarea>
<div class="form-text">Not saved as channel configuration. Cleared after the test or when this dialog closes.</div>
<fieldset id="pushButtonTestFields" class="mt-3" hidden>
<legend class="fs-6">Button test</legend>
<label for="pushTestBindingId" class="form-label">Current device binding ID</label>
<input id="pushTestBindingId" class="form-control mb-2" autocomplete="off" spellcheck="false" />
<div class="form-text mb-2">Use the actual binding of the recipient installation. An invented or outdated binding will be rejected by the app.</div>
<label for="pushTestActionKey" class="form-label">Section action key</label>
<input id="pushTestActionKey" class="form-control mb-2" maxlength="100" placeholder="Action supported by your app" spellcheck="false" />
<label for="pushTestButtonLabel" class="form-label">Button label</label>
<input id="pushTestButtonLabel" class="form-control" maxlength="100" value="Перейти в розділ" />
<div class="form-text">The button and notification tap use the same action. No object ID is needed for a section.</div>
</fieldset>
<div id="pushSendResult" class="alert d-none mt-3" role="status" aria-live="polite"></div>
</div>
<div class="modal-footer">
@@ -101,6 +117,8 @@
const authorizationButton = document.getElementById('pushAuthorizationBtn');
const sendButton = document.getElementById('pushSendBtn');
const modalButton = document.getElementById('pushTestModalBtn');
const version = document.getElementById('pushTestVersion');
const binding = document.getElementById('pushTestBindingId');
let busy = false;
function showResult(target, success, message) {
@@ -114,7 +132,11 @@
channelId: id === '00000000-0000-0000-0000-000000000000' ? null : id,
firebaseProjectId: form.querySelector('[name="FirebaseProjectId"]').value,
credentialsJson: form.querySelector('[name="CredentialsJson"]').value,
recipientToken: send ? token.value.trim() : null
recipientToken: send ? token.value.trim() : null,
version: Number(version.value),
bindingId: send && version.value === '2' ? binding.value.trim() || null : null,
actionKey: document.getElementById('pushTestActionKey').value,
buttonLabel: document.getElementById('pushTestButtonLabel').value
};
}
@@ -152,10 +174,14 @@
authorizationButton.addEventListener('click', () => runTest(false));
sendButton.addEventListener('click', () => runTest(true));
version.addEventListener('change', () => {
document.getElementById('pushButtonTestFields').hidden = version.value !== '2';
document.getElementById('pushSendResult').className = 'alert d-none';
});
modalButton.addEventListener('click', () => {
document.getElementById('pushSendResult').className = 'alert d-none';
bootstrap.Modal.getOrCreateInstance(modal).show();
});
modal.addEventListener('hidden.bs.modal', () => { token.value = ''; });
modal.addEventListener('hidden.bs.modal', () => { token.value = ''; binding.value = ''; });
});
</script>
@@ -0,0 +1,12 @@
@model HrynCo.NotificationService.Web.Controllers.Admin.ViewModels.PushTemplateEditViewModel
@{ ViewData["Title"] = "Delete Push Template"; }
<h1 class="h3">Delete Push Template</h1>
<p>Delete the Push template <strong>@Model.Key</strong> and its @Model.Languages.Count language versions from <strong>@Model.ServiceName</strong>? The Email template is retained.</p>
<form method="post" asp-action="Delete" asp-route-serviceId="@Model.ServiceId">
@Html.AntiForgeryToken()
<input asp-for="Key" type="hidden" /><input asp-for="Revision" type="hidden" /><input asp-for="KeyFilter" type="hidden" />
<div asp-validation-summary="All" class="text-danger" role="alert"></div>
<div class="form-check my-3"><input asp-for="ConfirmDelete" class="form-check-input" /><label asp-for="ConfirmDelete" class="form-check-label">Confirm deletion of this Push template and its translations</label></div>
<button class="btn btn-danger" type="submit">Delete Push Template</button>
<a class="btn btn-secondary" href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })">Cancel</a>
</form>
@@ -0,0 +1,111 @@
@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
@model PushTemplateEditViewModel
@{
Layout = "~/Views/Shared/_EditorLayout.cshtml";
ViewData["Title"] = Model.PageTitle;
ViewData["EditorTitle"] = Model.PageTitle;
var active = Math.Clamp(Model.ActiveLanguageIndex, 0, Math.Max(0, Model.Languages.Count - 1));
}
@section Breadcrumbs {
<nav aria-label="Breadcrumb" class="template-editor-breadcrumbs"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="/admin/services/@Model.ServiceId">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">@Model.PageTitle</li></ol></nav>
}
<form id="templateForm" asp-action="Save" asp-controller="AdminPushTemplates" asp-route-serviceId="@Model.ServiceId" method="post">
@Html.AntiForgeryToken()
<input asp-for="Id" type="hidden" />
<input asp-for="Revision" type="hidden" />
<input asp-for="ServiceId" type="hidden" /><input asp-for="ServiceName" type="hidden" />
<input asp-for="KeyFilter" type="hidden" />
<input type="hidden" id="ActiveLanguageIndex" name="ActiveLanguageIndex" value="@active" />
<div asp-validation-summary="All" class="text-danger mb-3" role="alert"></div>
<div class="row g-3 mb-3">
<div class="col-md-6">
<dl class="template-service-context">
<dt>Service</dt>
<dd>@Model.ServiceName</dd>
</dl>
<div class="form-text"><a href="/admin/services/@Model.ServiceId/edit" class="template-service-edit-link">Edit Service and language codes</a></div>
</div>
<div class="col-md-6">
<label asp-for="Key" class="form-label fw-semibold">Template Key</label>
<input asp-for="Key" class="form-control" readonly="@(Model.LockKey)" />
</div>
</div>
<partial name="_TemplateChannelNavigation" model="@(new TemplateChannelNavigationViewModel { ServiceId = Model.ServiceId, Key = Model.Key, KeyFilter = Model.KeyFilter, IsPush = true })" />
<div class="mb-3">
<label asp-for="VariablesJson" class="form-label fw-semibold">Shared variables (JSON)</label>
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="14"></textarea>
<div class="form-text">Push variables, shared across its languages: <code>[{"name":"UserName","required":true}]</code></div>
</div>
<p class="text-muted">Every configured service language has a tab. Present and Missing show saved versions. To remove a language version, clear Title and Body and set Actions to {}. Shared variables and the template remain.</p>
@if (Model.Languages.Count == 0) { <p>No service languages configured. You can save the key and shared variables now, then add language codes in Edit Service.</p> }
<div class="template-language-sheet mb-3" hidden="@(Model.Languages.Count == 0)">
<div class="nav nav-tabs" role="tablist" aria-label="Template languages" id="languageTabs">
@for (var i = 0; i < Model.Languages.Count; i++)
{
var language = Model.Languages[i];
<button type="button" role="tab" id="language-tab-@i" aria-controls="language-pane-@i"
aria-selected="@(i == active ? "true" : "false")" tabindex="@(i == active ? 0 : -1)"
class="nav-link @(i == active ? "active" : "")" data-pane="language-pane-@i">
<span>@language.LanguageCode</span>
<span class="template-language-status @(language.IsPresent ? "template-language-present" : "template-language-missing")">@(language.IsPresent ? "Present" : "Missing")</span>
</button>
}
</div>
<div id="languagePanes">
@for (var i = 0; i < Model.Languages.Count; i++)
{
<section class="language-pane" id="language-pane-@i" role="tabpanel" aria-labelledby="language-tab-@i" hidden="@(i != active)">
<input asp-for="Languages[i].LanguageCode" type="hidden" class="language-code" />
<div class="mb-3">
<label asp-for="Languages[i].Title" class="form-label fw-semibold">Title</label>
<input asp-for="Languages[i].Title" class="form-control" data-content="title" />
</div>
<div class="mb-3">
<label asp-for="Languages[i].Body" class="form-label fw-semibold">Body</label>
<textarea asp-for="Languages[i].Body" class="form-control font-monospace" rows="8" data-content="body"></textarea>
</div>
<div class="mb-3">
<label asp-for="Languages[i].ActionsJson" class="form-label fw-semibold">Actions (JSON)</label>
<textarea asp-for="Languages[i].ActionsJson" class="form-control font-monospace" rows="6" data-content="actions"></textarea>
<div class="form-text">Labels use this language. Action keys must match the message metadata; object IDs are optional for section navigation. Up to three buttons. Example: <code>{"defaultAction":"openSection","buttons":[{"action":"openSection","label":"Перейти в розділ"}]}</code>. Use <code>{}</code> for no actions.</div>
</div>
</section>
}
</div>
</div>
<div class="template-preview-panel mb-3">
<div class="template-preview-panel-header">
<div>
<div class="template-preview-title">Selected language preview: <span id="previewLanguage"></span></div>
<div class="template-preview-subtitle">Preview uses the Push variables. Content is plain text; this does not send a notification.</div>
</div>
<span id="previewStatus" class="badge text-bg-secondary" role="status">Ready</span>
</div>
<div class="template-preview-body">
<div class="template-preview-source template-preview-section-block">
<div class="template-preview-section-title">Sample values</div>
<div id="previewVariables" class="template-preview-variables"></div>
</div>
<div class="template-preview-output">
<div class="template-preview-section-title">Rendered title</div>
<div id="previewTitle" class="template-preview-subject"></div>
<div class="template-preview-section-title mt-3">Rendered body</div>
<pre id="previewBody" class="template-preview-text mb-0"></pre>
<div class="template-preview-section-title mt-3">Buttons</div>
<div id="previewActions" class="d-flex flex-wrap gap-2" aria-label="Button preview"></div>
<div id="previewDefaultAction" class="form-text"></div>
</div>
</div>
</div>
</form>
@section FormActions {
<button type="submit" form="templateForm" class="btn btn-primary"><i class="bi bi-floppy me-1"></i> Save</button>
<a id="cancelTemplate" href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })" class="btn btn-secondary">Cancel</a>
}
@section Scripts {
<script src="~/js/template-channel-navigation.js" asp-append-version="true"></script>
<script src="~/js/email-template-editor.js" asp-append-version="true"></script>
}
@@ -0,0 +1,23 @@
@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
@model TemplateChannelNavigationViewModel
@{
Layout = "~/Views/Shared/_EditorLayout.cshtml";
ViewData["Title"] = "Template: " + Model.Key;
ViewData["EditorTitle"] = ViewData["Title"];
var channel = Model.IsPush ? "Push" : "Email";
}
@section Breadcrumbs {
<nav aria-label="Breadcrumb" class="template-editor-breadcrumbs"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="/admin/services/@Model.ServiceId">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">Template</li></ol></nav>
}
<dl class="template-service-context"><dt>Service</dt><dd>@Model.ServiceName</dd><dt>Template Key</dt><dd>@Model.Key</dd></dl>
<partial name="_TemplateChannelNavigation" model="Model" />
<div class="empty-state"><p>@channel template has not been created for this key.</p>
@if (Model.IsPush) {
<a class="btn btn-primary" asp-action="Create" asp-route-serviceId="@Model.ServiceId" asp-route-key="@Model.Key" asp-route-keyFilter="@Model.KeyFilter">Create Push Template</a>
} else {
<a class="btn btn-primary" asp-action="Create" asp-controller="AdminTemplates" asp-route-serviceId="@Model.ServiceId" asp-route-templateKey="@Model.Key" asp-route-keyFilter="@Model.KeyFilter">Create Email Template</a>
}
</div>
@section FormActions {
<a href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })" class="btn btn-secondary">Back to Templates</a>
}
@@ -2,16 +2,16 @@
@model EmailTemplateDefinitionDeleteViewModel
@{ ViewData["Title"] = "Delete email template"; var returnUrl = Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter }); }
<div class="admin-delete-confirmation">
<nav aria-label="Breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="@returnUrl">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">Delete template</li></ol></nav>
<nav aria-label="Breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/admin/services">Services</a></li><li class="breadcrumb-item"><a href="@returnUrl">@Model.ServiceName</a></li><li class="breadcrumb-item active" aria-current="page">Delete Email template</li></ol></nav>
<h2>Delete template @Model.Key?</h2>
<div asp-validation-summary="All" class="text-danger" role="alert"></div>
<div class="alert alert-danger">This permanently deletes the definition, shared variables and <strong>@Model.LanguageCodes.Count translation(s)</strong> from service @Model.ServiceName.</div>
<div class="alert alert-danger">This permanently deletes the Email definition, its shared variables and <strong>@Model.LanguageCodes.Count translation(s)</strong> from service @Model.ServiceName.</div>
<p>Languages: @(Model.LanguageCodes.Count == 0 ? "No translations" : string.Join(", ", Model.LanguageCodes))</p>
<p>The service, its language catalog and email channels are retained.</p>
<p>The Push template, service, language catalog and delivery channels are retained.</p>
<form asp-action="DeleteDefinition" asp-route-serviceId="@Model.ServiceId" asp-route-definitionId="@Model.DefinitionId" method="post">
@Html.AntiForgeryToken()
<input asp-for="Revision" type="hidden" /><input asp-for="KeyFilter" type="hidden" />
<div class="form-check mb-3"><input asp-for="ConfirmDelete" class="form-check-input" /><label asp-for="ConfirmDelete" class="form-check-label">I confirm deletion of @Model.Key and its @Model.LanguageCodes.Count translation(s).</label></div>
<div class="form-check mb-3"><input asp-for="ConfirmDelete" class="form-check-input" /><label asp-for="ConfirmDelete" class="form-check-label">I confirm deletion of the Email template @Model.Key and its @Model.LanguageCodes.Count translation(s).</label></div>
<div class="d-flex flex-wrap gap-2"><button type="submit" class="btn btn-danger">Delete template</button><a class="btn btn-secondary" href="@returnUrl">Cancel</a></div>
</form>
</div>
@@ -29,13 +29,14 @@
</div>
<div class="col-md-6">
<label asp-for="Key" class="form-label fw-semibold">Template Key</label>
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew || Model.LockKey)" />
</div>
</div>
<partial name="_TemplateChannelNavigation" model="@(new TemplateChannelNavigationViewModel { ServiceId = Model.ServiceId, Key = Model.Key, KeyFilter = Model.KeyFilter })" />
<div class="mb-3">
<label asp-for="VariablesJson" class="form-label fw-semibold">Shared variables (JSON)</label>
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="14"></textarea>
<div class="form-text">One contract for every language: <code>[{"name":"UserName","required":true}]</code></div>
<div class="form-text">Email variables, shared across its languages: <code>[{"name":"UserName","required":true}]</code></div>
</div>
<p class="text-muted">Every configured service language has a tab. Present and Missing show saved versions. Leave all three content fields blank for an unused language; clear them to remove an existing version. Shared variables and the template remain.</p>
@if (Model.Languages.Count == 0) { <p>No service languages configured. You can save the key and shared variables now, then add language codes in Edit Service.</p> }
@@ -102,6 +103,7 @@
<a id="cancelTemplate" href="@Url.Action("Index", "AdminTemplates", new { serviceId = Model.ServiceId, key = Model.KeyFilter })" class="btn btn-secondary">Cancel</a>
}
@section Scripts {
<script src="~/js/template-channel-navigation.js" asp-append-version="true"></script>
<script src="~/js/email-template-preview.js" asp-append-version="true"></script>
<script src="~/js/email-template-editor.js" asp-append-version="true"></script>
}
@@ -25,7 +25,7 @@
}
</div>
<div class="page-header">
<h3 class="h4">Email Templates</h3>
<h3 class="h4">Templates</h3>
<a asp-action="Create" asp-route-serviceId="@serviceId" asp-route-keyFilter="@keyFilter" class="btn btn-primary">Create template</a>
</div>
<div asp-validation-summary="All" class="text-danger mb-3" role="alert"></div>
@@ -40,12 +40,13 @@
</div>
</form>
</th>
<th scope="col">Languages</th>
<th scope="col">Email</th>
<th scope="col">Push</th>
<th scope="col" class="template-actions">Action</th>
</tr></thead><tbody>
@if (Model.Definitions.Count == 0)
@if (Model.Definitions.Count == 0 && Model.PushDefinitions.Count == 0)
{
<tr><td colspan="3"><div class="empty-state">
<tr><td colspan="4"><div class="empty-state">
@if (!ViewData.ModelState.IsValid)
{
<p class="mb-0">Templates are unavailable. Review the error and try again.</p>
@@ -56,18 +57,21 @@
}
else
{
<i class="bi bi-envelope" aria-hidden="true"></i><p class="mt-2 mb-0">No email templates for this service yet.</p><a asp-action="Create" asp-route-serviceId="@serviceId" class="btn btn-primary btn-sm mt-3">Create First Template</a>
<i class="bi bi-envelope" aria-hidden="true"></i><p class="mt-2 mb-0">No templates for this service yet.</p><a asp-action="Create" asp-route-serviceId="@serviceId" class="btn btn-primary btn-sm mt-3">Create First Template</a>
}
</div></td></tr>
}
@foreach (var template in Model.Definitions)
@foreach (var templateKey in Model.Definitions.Select(d => d.Key).Concat(Model.PushDefinitions.Select(d => d.Key)).Distinct(StringComparer.Ordinal).OrderBy(k => k, StringComparer.Ordinal))
{
var editUrl = Url.Action("Edit", "AdminTemplates", new { serviceId, definitionId = template.Id, keyFilter });
var presentCodes = template.Languages.Select(l => l.LanguageCode).ToHashSet(StringComparer.Ordinal);
var email = Model.Definitions.SingleOrDefault(d => d.Key == templateKey);
var push = Model.PushDefinitions.SingleOrDefault(d => d.Key == templateKey);
var editUrl = email is null ? Url.Action("Edit", "AdminPushTemplates", new { serviceId, key = templateKey, keyFilter }) : Url.Action("Edit", "AdminTemplates", new { serviceId, definitionId = email.Id, keyFilter });
var presentCodes = email?.Languages.Select(l => l.LanguageCode).ToHashSet(StringComparer.Ordinal) ?? [];
<tr>
<td>@template.Key</td>
<td>@templateKey</td>
<td>
@if (Model.Service.Languages.Count == 0)
@if (email is null) { <span>Not configured</span> }
else if (Model.Service.Languages.Count == 0)
{
<span>No configured languages</span>
}
@@ -84,7 +88,22 @@
</ul>
}
</td>
<td class="template-actions"><div class="list-action-links"><a href="@editUrl" class="btn btn-outline-primary btn-sm" aria-label="Edit template @template.Key">Edit</a><a asp-action="ConfirmDefinitionDelete" asp-route-serviceId="@serviceId" asp-route-definitionId="@template.Id" asp-route-keyFilter="@keyFilter" class="btn btn-outline-danger btn-sm" aria-label="Delete template @template.Key">Delete</a></div></td>
<td>
@if (push is null) { <span>Not configured</span> }
else if (Model.Service.Languages.Count == 0) { <span>No configured languages</span> }
else {
var pushCodes = push.Languages.Select(l => l.LanguageCode).ToHashSet(StringComparer.Ordinal);
<ul class="template-language-statuses">
@foreach (var language in Model.Service.Languages) {
var present = pushCodes.Contains(language.Code);
<li class="template-language-status @(present ? "template-language-present" : "template-language-missing")" data-language-code="@language.Code" data-state="@(present ? "present" : "missing")"><span>@language.Code:</span><span>@(present ? "Present" : "Missing")</span></li>
}
</ul>
}
</td>
<td class="template-actions"><div class="list-action-links"><a href="@editUrl" class="btn btn-outline-primary btn-sm" aria-label="Edit template @templateKey">Edit</a>@if (email is not null) { <a asp-action="ConfirmDefinitionDelete" asp-route-serviceId="@serviceId" asp-route-definitionId="@email.Id" asp-route-keyFilter="@keyFilter" class="btn btn-outline-danger btn-sm" aria-label="Delete Email template @templateKey">Delete</a> }
@if (push is not null) { <a asp-action="ConfirmDelete" asp-controller="AdminPushTemplates" asp-route-serviceId="@serviceId" asp-route-key="@templateKey" asp-route-keyFilter="@keyFilter" class="btn btn-outline-danger btn-sm">Delete Push</a> }
</div></td>
</tr>
}
</tbody></table></div>
@@ -14,7 +14,7 @@
<link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
rel="stylesheet" />
<link href="/css/admin.css" rel="stylesheet" />
<link href="~/css/admin.css" rel="stylesheet" asp-append-version="true" />
</head>
<body>
<nav class="navbar navbar-dark bg-dark admin-navbar">
@@ -0,0 +1,7 @@
@model HrynCo.NotificationService.Web.Controllers.Admin.ViewModels.TemplateChannelNavigationViewModel
<nav class="nav nav-tabs mb-3 template-channel-tabs" aria-label="Template channels">
<a class="nav-link @(!Model.IsPush ? "active" : "")" aria-current="@(!Model.IsPush ? "page" : null)" data-template-channel
href="@Url.Action("Email", "AdminPushTemplates", new { serviceId = Model.ServiceId, key = Model.Key, keyFilter = Model.KeyFilter })">Email</a>
<a class="nav-link @(Model.IsPush ? "active" : "")" aria-current="@(Model.IsPush ? "page" : null)" data-template-channel
href="@Url.Action("Edit", "AdminPushTemplates", new { serviceId = Model.ServiceId, key = Model.Key, keyFilter = Model.KeyFilter })">Push</a>
</nav>