306 lines
15 KiB
TypeScript
306 lines
15 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { ExternalLink } from "lucide-react";
|
|
import { Button } from "@govoplan/core-webui";
|
|
import { Card } from "@govoplan/core-webui";
|
|
import { PageScrollViewport } from "@govoplan/core-webui";
|
|
import { PageTitle } from "@govoplan/core-webui";
|
|
import { FieldLabel } from "@govoplan/core-webui";
|
|
import { StatusBadge, TableActionGroup, i18nMessage } from "@govoplan/core-webui";
|
|
import { usePlatformLanguage } from "@govoplan/core-webui";
|
|
import { ModuleSubnav, type ModuleSubnavGroup } from "@govoplan/core-webui";
|
|
import { DataGrid, type DataGridColumn } from "@govoplan/core-webui";
|
|
|
|
type TemplateRecord = {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
type: string;
|
|
status: string;
|
|
fields: string[];
|
|
updatedAt: string;
|
|
usedBy: string;
|
|
subject: string;
|
|
body: string;
|
|
versions: number;
|
|
};
|
|
|
|
type TemplateDetailSection = "overview" | "content" | "fields" | "preview" | "usage" | "versions";
|
|
|
|
const templateRecords: TemplateRecord[] = [
|
|
{
|
|
id: "monthly-statement",
|
|
name: "i18n:govoplan-campaign.monthly_statement.74029609",
|
|
description: "i18n:govoplan-campaign.reusable_subject_and_body_for_monthly_statement_.9754240d",
|
|
type: "plain_text",
|
|
status: "ready",
|
|
fields: ["recipient_name", "period", "amount"],
|
|
updatedAt: "2026-06-08 16:42",
|
|
usedBy: "i18n:govoplan-campaign.2_campaigns.35b84804",
|
|
subject: "i18n:govoplan-campaign.subject_monthly_statement",
|
|
body: "i18n:govoplan-campaign.hello_value_please_find_your_statement_for_value.48d94596",
|
|
versions: 4
|
|
},
|
|
{
|
|
id: "deadline-reminder",
|
|
name: "i18n:govoplan-campaign.deadline_reminder.84977a7f",
|
|
description: "i18n:govoplan-campaign.short_reminder_template_with_one_deadline_field.5f15d110",
|
|
type: "plain_text",
|
|
status: "draft",
|
|
fields: ["recipient_name", "deadline"],
|
|
updatedAt: "2026-06-07 11:18",
|
|
usedBy: "i18n:govoplan-campaign.not_used_yet.962b7bbd",
|
|
subject: "i18n:govoplan-campaign.subject_deadline_reminder",
|
|
body: "i18n:govoplan-campaign.hello_value_this_is_a_reminder_that_the_deadline.c4fbdbd0",
|
|
versions: 1
|
|
},
|
|
{
|
|
id: "attachment-notice",
|
|
name: "i18n:govoplan-campaign.attachment_notice.b73a59fe",
|
|
description: "i18n:govoplan-campaign.generic_note_for_campaigns_where_every_recipient.f21254fa",
|
|
type: "html_ready",
|
|
status: "ready",
|
|
fields: ["recipient_name", "file_label", "contact_email"],
|
|
updatedAt: "2026-06-05 09:05",
|
|
usedBy: "i18n:govoplan-campaign.1_campaign.ccd70074",
|
|
subject: "i18n:govoplan-campaign.subject_documents_for_recipient",
|
|
body: "i18n:govoplan-campaign.hello_value_your_value_is_attached_please_contac.da32415e",
|
|
versions: 3
|
|
}];
|
|
|
|
|
|
const templateSubnav = (onBack: () => void): ModuleSubnavGroup<TemplateDetailSection>[] => [
|
|
{
|
|
items: [{ actionId: "template-library", label: "i18n:govoplan-campaign.template_library.6742c898", primary: true, onClick: onBack }]
|
|
},
|
|
{
|
|
title: "i18n:govoplan-campaign.template.4c31d4ef",
|
|
items: [
|
|
{ id: "overview", label: "i18n:govoplan-campaign.overview.0efc2e6b" },
|
|
{ id: "content", label: "i18n:govoplan-campaign.content.4f9be057" },
|
|
{ id: "fields", label: "i18n:govoplan-campaign.fields.e8b68527" },
|
|
{ id: "preview", label: "i18n:govoplan-campaign.preview.f1fbb2b4" },
|
|
{ id: "usage", label: "i18n:govoplan-campaign.usage.0bb18642" },
|
|
{ id: "versions", label: "i18n:govoplan-campaign.versions.a239107e" }]
|
|
|
|
}];
|
|
|
|
|
|
function templateLibraryColumns(openTemplate: (templateId: string) => void): DataGridColumn<TemplateRecord>[] {
|
|
return [
|
|
{ id: "template", header: "i18n:govoplan-campaign.template.3ec1ae06", width: "minmax(240px, 1.4fr)", sortable: true, filterable: true, sticky: "start", render: (template) => <div className="module-title-cell"><strong>{template.name}</strong><span>{template.description}</span></div>, value: (template) => `${template.name} ${template.description}` },
|
|
{ id: "type", header: "i18n:govoplan-campaign.type.3deb7456", width: 150, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "plain_text", label: "i18n:govoplan-campaign.plain_text_template_type" }, { value: "html_ready", label: "i18n:govoplan-campaign.html_ready_template_type" }] }, value: (template) => template.type },
|
|
{ id: "fields", header: "i18n:govoplan-campaign.fields.e8b68527", width: 240, filterable: true, render: (template) => <div className="chip-row compact-chip-row">{template.fields.slice(0, 3).map((field) => <span key={field} className="field-chip">{field}</span>)}</div>, value: (template) => template.fields.join(", ") },
|
|
{ id: "updated", header: "i18n:govoplan-campaign.updated.f2f8570d", width: 170, sortable: true, filterable: true, filterType: "date", render: (template) => <span className="muted small-text">{template.updatedAt}</span>, value: (template) => template.updatedAt },
|
|
{ id: "status", header: "i18n:govoplan-campaign.status.bae7d5be", width: 130, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "draft", label: "i18n:govoplan-campaign.draft.23d33e22" }, { value: "active", label: "i18n:govoplan-campaign.active.a733b809" }, { value: "archived", label: "i18n:govoplan-campaign.archived.eddc813f" }], display: "pill" }, render: (template) => <StatusBadge status={template.status} />, value: (template) => template.status },
|
|
{
|
|
id: "actions",
|
|
header: "i18n:govoplan-campaign.actions.c3cd636a",
|
|
width: 70,
|
|
sticky: "end",
|
|
align: "right",
|
|
render: (template) => <TableActionGroup actions={[{
|
|
id: "open",
|
|
label: i18nMessage("i18n:govoplan-campaign.open_value.a34416a9", { value0: template.name }),
|
|
icon: <ExternalLink aria-hidden="true" />,
|
|
onClick: () => openTemplate(template.id)
|
|
}]} />
|
|
|
|
}];
|
|
|
|
}
|
|
|
|
function templateTypeLabel(type: string): string {
|
|
if (type === "html_ready") return "i18n:govoplan-campaign.html_ready_template_type";
|
|
return "i18n:govoplan-campaign.plain_text_template_type";
|
|
}
|
|
|
|
function templateFieldColumns(): DataGridColumn<{id: string;field: string;source: string;required: string;}>[] {
|
|
return [
|
|
{ id: "field", header: "i18n:govoplan-campaign.field.c326a466", width: "minmax(180px, 1fr)", sortable: true, filterable: true, sticky: "start", render: (row) => <code>{row.field}</code>, value: (row) => row.field },
|
|
{ id: "source", header: "i18n:govoplan-campaign.source.6da13add", width: 190, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "detected_placeholder", label: "i18n:govoplan-campaign.detected_placeholder.094b5214" }] }, value: (row) => row.source },
|
|
{ id: "required", header: "i18n:govoplan-campaign.required.eed6bfb4", width: 120, sortable: true, filterable: true, columnType: "from-list", list: { options: [{ value: "yes", label: "i18n:govoplan-campaign.yes.5397e058" }, { value: "no", label: "i18n:govoplan-campaign.no.816c52fd" }] }, value: (row) => row.required }];
|
|
|
|
}
|
|
|
|
export default function TemplatesPage() {
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
const [active, setActive] = useState<TemplateDetailSection>("overview");
|
|
const selectedTemplate = useMemo(
|
|
() => templateRecords.find((template) => template.id === selectedId) ?? null,
|
|
[selectedId]
|
|
);
|
|
|
|
function openTemplate(templateId: string) {
|
|
setSelectedId(templateId);
|
|
setActive("overview");
|
|
}
|
|
|
|
if (selectedTemplate) {
|
|
return (
|
|
<div className="workspace module-workspace">
|
|
<ModuleSubnav active={active} groups={templateSubnav(() => setSelectedId(null))} onSelect={setActive} />
|
|
<section className="workspace-content">
|
|
<div className="content-pad workspace-data-page">
|
|
<div className="page-heading split workspace-heading">
|
|
<div>
|
|
<PageTitle>{selectedTemplate.name}</PageTitle>
|
|
<p>{selectedTemplate.description}</p>
|
|
</div>
|
|
<div className="button-row compact-actions">
|
|
<Button disabled>i18n:govoplan-campaign.duplicate.972d5737</Button>
|
|
<Button variant="primary" disabled>i18n:govoplan-campaign.use_in_campaign.779163bc</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{active === "overview" && <TemplateOverview template={selectedTemplate} />}
|
|
{active === "content" && <TemplateContent template={selectedTemplate} />}
|
|
{active === "fields" && <TemplateFields template={selectedTemplate} />}
|
|
{active === "preview" && <TemplatePreview template={selectedTemplate} />}
|
|
{active === "usage" && <TemplateUsage template={selectedTemplate} />}
|
|
{active === "versions" && <TemplateVersions template={selectedTemplate} />}
|
|
</div>
|
|
</section>
|
|
</div>);
|
|
|
|
}
|
|
|
|
return (
|
|
<PageScrollViewport>
|
|
<div className="content-pad workspace-data-page module-entry-page">
|
|
<div className="page-heading split workspace-heading">
|
|
<div>
|
|
<PageTitle>i18n:govoplan-campaign.templates.f25b700e</PageTitle>
|
|
<p>i18n:govoplan-campaign.reusable_message_templates_open_a_template_to_ed.792e2afb</p>
|
|
</div>
|
|
<div className="button-row compact-actions">
|
|
<Button disabled>i18n:govoplan-campaign.import.d6fbc9d2</Button>
|
|
<Button variant="primary" disabled>i18n:govoplan-campaign.export.f3e4fadb</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Card
|
|
title={
|
|
<div className="module-card-heading">
|
|
<h2>i18n:govoplan-campaign.all_templates.0bba114c</h2>
|
|
<span>i18n:govoplan-campaign.last_loaded_local_demo_data.62ee2f5d</span>
|
|
</div>
|
|
}
|
|
actions={<Button disabled>i18n:govoplan-campaign.refresh.56e3badc</Button>}>
|
|
|
|
<DataGrid
|
|
id="template-library"
|
|
rows={templateRecords}
|
|
columns={templateLibraryColumns(openTemplate)}
|
|
getRowKey={(template) => template.id}
|
|
emptyText="i18n:govoplan-campaign.no_templates_found.326abcdd"
|
|
className="compact-table-wrap module-table-wrap module-entry-table" />
|
|
|
|
</Card>
|
|
</div>
|
|
</PageScrollViewport>);
|
|
|
|
}
|
|
|
|
function TemplateOverview({ template }: {template: TemplateRecord;}) {
|
|
return (
|
|
<div className="dashboard-grid settings-dashboard-grid">
|
|
<Card title="i18n:govoplan-campaign.template_status.8bec97cf">
|
|
<dl className="detail-list compact-detail-list">
|
|
<div><dt>i18n:govoplan-campaign.status.bae7d5be</dt><dd><StatusBadge status={template.status} /></dd></div>
|
|
<div><dt>i18n:govoplan-campaign.type.3deb7456</dt><dd>{templateTypeLabel(template.type)}</dd></div>
|
|
<div><dt>i18n:govoplan-campaign.updated.f2f8570d</dt><dd>{template.updatedAt}</dd></div>
|
|
<div><dt>i18n:govoplan-campaign.versions.a239107e</dt><dd>{template.versions}</dd></div>
|
|
</dl>
|
|
</Card>
|
|
<Card title="i18n:govoplan-campaign.compatibility_notes.7d648a6d">
|
|
<p className="muted">i18n:govoplan-campaign.campaigns_can_reuse_this_template_but_each_campa.bdb25009</p>
|
|
<div className="placeholder-stack">
|
|
<span>i18n:govoplan-campaign.subject_placeholders_are_detected.96663276</span>
|
|
<span>i18n:govoplan-campaign.body_placeholders_are_compared_with_campaign_fie.bbd1d67f</span>
|
|
<span>i18n:govoplan-campaign.a_mapping_wizard_can_be_added_later.6b2fe0f3</span>
|
|
</div>
|
|
</Card>
|
|
</div>);
|
|
|
|
}
|
|
|
|
function TemplateContent({ template }: {template: TemplateRecord;}) {
|
|
const { translateText } = usePlatformLanguage();
|
|
const subject = translateText(template.subject);
|
|
const body = translateText(template.body);
|
|
return (
|
|
<Card title="i18n:govoplan-campaign.template_content.48630575" actions={<Button disabled>i18n:govoplan-campaign.save_changes.179359b3</Button>}>
|
|
<div className="form-grid compact responsive-form-grid">
|
|
<label className="form-field"><FieldLabel className="form-label" help="i18n:govoplan-campaign.read_only_subject_stored_in_this_reusable_templa.549ae246">i18n:govoplan-campaign.subject.8d183dbd</FieldLabel><input value={subject} readOnly /></label>
|
|
<label className="form-field full-span"><FieldLabel className="form-label" help="i18n:govoplan-campaign.read_only_body_stored_in_this_reusable_template_.98fbf178">i18n:govoplan-campaign.body.718a7e8a</FieldLabel><textarea rows={10} value={body} readOnly /></label>
|
|
</div>
|
|
</Card>);
|
|
|
|
}
|
|
|
|
function TemplateFields({ template }: {template: TemplateRecord;}) {
|
|
return (
|
|
<Card title="i18n:govoplan-campaign.template_fields.e6d7d8ac" actions={<Button disabled>i18n:govoplan-campaign.add_field_hint.b5029047</Button>}>
|
|
<DataGrid
|
|
id={`template-${template.id}-fields`}
|
|
rows={template.fields.map((field) => ({ id: field, field, source: "detected_placeholder", required: "yes" }))}
|
|
columns={templateFieldColumns()}
|
|
getRowKey={(field) => field.id}
|
|
emptyText="i18n:govoplan-campaign.no_fields_detected.0cb30100"
|
|
className="compact-table-wrap module-table-wrap module-table" />
|
|
|
|
</Card>);
|
|
|
|
}
|
|
|
|
function TemplatePreview({ template }: {template: TemplateRecord;}) {
|
|
const { translateText } = usePlatformLanguage();
|
|
const subject = translateText(template.subject);
|
|
const body = translateText(template.body);
|
|
const sampleRecipientName = translateText("i18n:govoplan-campaign.sample_recipient_name");
|
|
const samplePeriod = translateText("i18n:govoplan-campaign.sample_period");
|
|
const sampleAmount = translateText("i18n:govoplan-campaign.sample_amount");
|
|
const sampleDeadline = translateText("i18n:govoplan-campaign.sample_deadline");
|
|
const sampleFileLabel = translateText("i18n:govoplan-campaign.sample_file_label");
|
|
const preview = body.
|
|
replace(/\{\{recipient_name\}\}/g, sampleRecipientName).
|
|
replace(/\{\{period\}\}/g, samplePeriod).
|
|
replace(/\{\{amount\}\}/g, sampleAmount).
|
|
replace(/\{\{deadline\}\}/g, sampleDeadline).
|
|
replace(/\{\{file_label\}\}/g, sampleFileLabel).
|
|
replace(/\{\{contact_email\}\}/g, "support@example.org");
|
|
|
|
return (
|
|
<Card title="i18n:govoplan-campaign.preview.f1fbb2b4" actions={<Button disabled>i18n:govoplan-campaign.change_sample_data.e6903542</Button>}>
|
|
<div className="message-preview">
|
|
<strong>{subject.replace(/\{\{period\}\}/g, samplePeriod).replace(/\{\{deadline\}\}/g, sampleDeadline).replace(/\{\{recipient_name\}\}/g, sampleRecipientName)}</strong>
|
|
<pre>{preview}</pre>
|
|
</div>
|
|
</Card>);
|
|
|
|
}
|
|
|
|
function TemplateUsage({ template }: {template: TemplateRecord;}) {
|
|
return (
|
|
<Card title="i18n:govoplan-campaign.usage.0bb18642">
|
|
<p className="muted">i18n:govoplan-campaign.this_view_will_list_campaigns_using_the_template.116f7ee0</p>
|
|
<dl className="detail-list compact-detail-list">
|
|
<div><dt>i18n:govoplan-campaign.currently_used_by.a065cfbe</dt><dd>{template.usedBy}</dd></div>
|
|
<div><dt>i18n:govoplan-campaign.safe_to_edit.57b64df5</dt><dd>i18n:govoplan-campaign.requires_versioning_once_templates_are_shared.e020b221</dd></div>
|
|
</dl>
|
|
</Card>);
|
|
|
|
}
|
|
|
|
function TemplateVersions({ template }: {template: TemplateRecord;}) {
|
|
return (
|
|
<Card title="i18n:govoplan-campaign.versions_and_import_export.cc05cb43" actions={<div className="button-row compact-actions"><Button disabled>i18n:govoplan-campaign.import.d6fbc9d2</Button><Button disabled>i18n:govoplan-campaign.export.f3e4fadb</Button></div>}>
|
|
<div className="placeholder-stack">
|
|
<span>{template.versions} i18n:govoplan-campaign.local_versions_in_the_planned_model.c1bf26cb</span>
|
|
<span>i18n:govoplan-campaign.sent_campaigns_should_keep_a_fixed_template_snap.167d56c2</span>
|
|
<span>i18n:govoplan-campaign.draft_campaigns_can_update_to_a_newer_template_v.0f854608</span>
|
|
</div>
|
|
</Card>);
|
|
|
|
}
|