233 lines
12 KiB
TypeScript
233 lines
12 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Button } from "@govoplan/core-webui";
|
|
import { FormField } from "@govoplan/core-webui";
|
|
import { ToggleSwitch } from "@govoplan/core-webui";
|
|
import { EmailAddressInput } from "@govoplan/core-webui";
|
|
import { MetricCard } from "@govoplan/core-webui";
|
|
import { addressesFromValue, collectCampaignAddressSuggestions, type MailboxAddress } from "@govoplan/core-webui";
|
|
import { asArray, asRecord, stringifyPreview, summaryValue } from "../../utils/campaignView";
|
|
import { getBool, getNumber, getText, parseJsonTextarea, stringifyJson } from "../../utils/draftEditor";
|
|
|
|
const behaviorOptions = ["block", "ask", "drop", "continue", "warn"];
|
|
|
|
export type WizardStepPatch = (path: string[], value: unknown) => void;
|
|
|
|
export type WizardStepProps = {
|
|
draft: Record<string, unknown>;
|
|
patch: WizardStepPatch;
|
|
};
|
|
|
|
export function BasicsStep({ draft, patch }: WizardStepProps) {
|
|
const campaign = asRecord(draft.campaign);
|
|
return (
|
|
<div className="form-grid">
|
|
<FormField label="i18n:govoplan-campaign.campaign_name.aa5d0e72" help="i18n:govoplan-campaign.a_human_readable_name_shown_in_lists_and_reports.afc23e7e">
|
|
<input value={getText(campaign, "name")} onChange={(event) => patch(["campaign", "name"], event.target.value)} />
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.campaign_id.4c4ed79e" help="i18n:govoplan-campaign.stable_technical_identifier.28c406b2">
|
|
<input value={getText(campaign, "id")} onChange={(event) => patch(["campaign", "id"], event.target.value)} />
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.mode.a7b93d21">
|
|
<select value={getText(campaign, "mode", "draft")} onChange={(event) => patch(["campaign", "mode"], event.target.value)}>
|
|
<option value="draft">i18n:govoplan-campaign.draft.23d33e22</option>
|
|
<option value="test">i18n:govoplan-campaign.test.640ab2ba</option>
|
|
<option value="send">i18n:govoplan-campaign.send.9bc2575c</option>
|
|
</select>
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.description.55f8ebc8">
|
|
<textarea rows={5} value={getText(campaign, "description")} onChange={(event) => patch(["campaign", "description"], event.target.value)} />
|
|
</FormField>
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function SenderStep({ draft, patch }: WizardStepProps) {
|
|
const recipients = asRecord(draft.recipients);
|
|
const from = addressesFromValue(recipients.from);
|
|
const suggestions = collectCampaignAddressSuggestions(draft);
|
|
const globalTo = addressesFromValue(recipients.to);
|
|
const globalCc = addressesFromValue(recipients.cc);
|
|
const globalBcc = addressesFromValue(recipients.bcc);
|
|
const globalReplyTo = addressesFromValue(recipients.reply_to);
|
|
const delivery = asRecord(draft.delivery);
|
|
const imapAppend = asRecord(delivery.imap_append_sent);
|
|
return (
|
|
<div className="form-grid">
|
|
<FormField label="i18n:govoplan-campaign.default_from_address.b9ee6d77">
|
|
<EmailAddressInput
|
|
value={from}
|
|
suggestions={suggestions}
|
|
allowMultiple
|
|
addLabel="i18n:govoplan-campaign.add_from.a095bb50"
|
|
emptyText="i18n:govoplan-campaign.no_global_from_address_configured.28141d2b"
|
|
onChange={(addresses: MailboxAddress[]) => patch(["recipients", "from"], addresses)} />
|
|
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.global_recipients.d9aaa427">
|
|
<EmailAddressInput
|
|
value={globalTo}
|
|
suggestions={suggestions}
|
|
allowMultiple
|
|
addLabel="i18n:govoplan-campaign.add_recipient.a989d1f1"
|
|
emptyText="i18n:govoplan-campaign.no_global_recipients_configured.d4e20e92"
|
|
onChange={(addresses: MailboxAddress[]) => patch(["recipients", "to"], addresses)} />
|
|
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.cc.c5a976de">
|
|
<EmailAddressInput
|
|
value={globalCc}
|
|
suggestions={suggestions}
|
|
allowMultiple
|
|
addLabel="i18n:govoplan-campaign.add_cc.bcb39ea3"
|
|
emptyText="i18n:govoplan-campaign.no_global_cc_recipients_configured.8afb23c1"
|
|
onChange={(addresses: MailboxAddress[]) => patch(["recipients", "cc"], addresses)} />
|
|
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.bcc.4c0145a3">
|
|
<EmailAddressInput
|
|
value={globalBcc}
|
|
suggestions={suggestions}
|
|
allowMultiple
|
|
addLabel="i18n:govoplan-campaign.add_bcc.ae9feacc"
|
|
emptyText="i18n:govoplan-campaign.no_global_bcc_recipients_configured.86ef64ab"
|
|
onChange={(addresses: MailboxAddress[]) => patch(["recipients", "bcc"], addresses)} />
|
|
|
|
</FormField>
|
|
<FormField label="i18n:govoplan-campaign.reply_to.c1733667">
|
|
<EmailAddressInput
|
|
value={globalReplyTo.slice(0, 1)}
|
|
suggestions={suggestions}
|
|
allowMultiple={false}
|
|
showAddButton={false}
|
|
addLabel={globalReplyTo.length ? "i18n:govoplan-campaign.replace.a7cf7b25" : "i18n:govoplan-campaign.add_reply_to.84b195f4"}
|
|
emptyText="i18n:govoplan-campaign.no_reply_to_address_configured.0665c1d9"
|
|
onChange={(addresses: MailboxAddress[]) => patch(["recipients", "reply_to"], addresses.slice(0, 1))} />
|
|
|
|
</FormField>
|
|
<p className="muted small-note">i18n:govoplan-campaign.select_the_delivery_profile_on_the_mail_settings.a89cbb5f</p>
|
|
<ToggleSwitch label="i18n:govoplan-campaign.append_successful_messages_to_sent_via_imap.dbd1b1d8" checked={getBool(imapAppend, "enabled")} onChange={(checked) => patch(["delivery", "imap_append_sent", "enabled"], checked)} />
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function FieldsStep({ draft, patchRoot }: {draft: Record<string, unknown>;patchRoot: (key: string, value: unknown) => void;}) {
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.campaign_fields.969e7d80</h2>
|
|
<p>i18n:govoplan-campaign.define_reusable_fields_for_templates_attachment_.6424f892</p>
|
|
</div>
|
|
<JsonEditor value={draft.fields ?? []} onValid={(value) => patchRoot("fields", value)} />
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function RecipientsStep({ draft, patchRoot }: {draft: Record<string, unknown>;patchRoot: (key: string, value: unknown) => void;}) {
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.recipients.78cbf8eb</h2>
|
|
<p>i18n:govoplan-campaign.store_inline_recipients_or_source_mapping_config.77bbe98f</p>
|
|
</div>
|
|
<JsonEditor value={draft.entries ?? { inline: [] }} onValid={(value) => patchRoot("entries", value)} />
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function TemplateStep({ draft, patch }: WizardStepProps) {
|
|
const template = asRecord(draft.template);
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.template.3ec1ae06</h2>
|
|
<p>i18n:govoplan-campaign.compose_the_subject_and_body_merge_fields_can_la.4fb6e97b</p>
|
|
</div>
|
|
<div className="form-grid">
|
|
<FormField label="i18n:govoplan-campaign.subject.8d183dbd"><input value={getText(template, "subject")} onChange={(event) => patch(["template", "subject"], event.target.value)} /></FormField>
|
|
<FormField label="i18n:govoplan-campaign.plain_text_body.030a0da0"><textarea rows={12} value={getText(template, "text")} onChange={(event) => patch(["template", "text"], event.target.value)} /></FormField>
|
|
<FormField label="i18n:govoplan-campaign.html_body.77b5ba37"><textarea rows={8} value={getText(template, "html")} onChange={(event) => patch(["template", "html"], event.target.value)} /></FormField>
|
|
</div>
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function AttachmentsStep({ draft, patch }: WizardStepProps) {
|
|
const attachments = asRecord(draft.attachments);
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.attachments.6771ade6</h2>
|
|
<p>i18n:govoplan-campaign.configure_campaign_wide_attachment_behavior_and_.441a6cd2</p>
|
|
</div>
|
|
<div className="form-grid compact responsive-form-grid">
|
|
<FormField label="i18n:govoplan-campaign.campaign_attachment_base_path.84827619"><input value={getText(attachments, "base_path", ".")} onChange={(event) => patch(["attachments", "base_path"], event.target.value)} /></FormField>
|
|
<FormField label="i18n:govoplan-campaign.missing_behavior.de3d1ac7"><select value={getText(attachments, "missing_behavior", "ask")} onChange={(event) => patch(["attachments", "missing_behavior"], event.target.value)}>{behaviorOptions.map((option) => <option key={option}>{option}</option>)}</select></FormField>
|
|
<FormField label="i18n:govoplan-campaign.ambiguous_behavior.e86e724b"><select value={getText(attachments, "ambiguous_behavior", "ask")} onChange={(event) => patch(["attachments", "ambiguous_behavior"], event.target.value)}>{behaviorOptions.map((option) => <option key={option}>{option}</option>)}</select></FormField>
|
|
<ToggleSwitch label="i18n:govoplan-campaign.allow_individual_attachments.a6ff0e87" checked={getBool(attachments, "allow_individual")} onChange={(checked) => patch(["attachments", "allow_individual"], checked)} />
|
|
</div>
|
|
<JsonEditor value={attachments.global ?? []} onValid={(value) => patch(["attachments", "global"], value)} />
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function ReviewStep({ version, onValidate }: {version: unknown;onValidate: () => void;}) {
|
|
const record = asRecord(version);
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.review_setup.d0059acb</h2>
|
|
<p>i18n:govoplan-campaign.validate_the_campaign_definition_before_building.d36ee1dc</p>
|
|
</div>
|
|
<div className="metric-grid inside">
|
|
<MetricCard label="i18n:govoplan-campaign.errors.805e86a8" value={summaryValue(asRecord(record.validation_summary), ["error_count", "errors", "blocked"])} tone="danger" />
|
|
<MetricCard label="i18n:govoplan-campaign.warnings.1430f976" value={summaryValue(asRecord(record.validation_summary), ["warning_count", "warnings"])} tone="warning" />
|
|
<MetricCard label="i18n:govoplan-campaign.built.a6ad3f82" value={summaryValue(asRecord(record.build_summary), ["built_count", "built", "messages_built"])} tone="info" />
|
|
</div>
|
|
<Button variant="primary" onClick={onValidate}>i18n:govoplan-campaign.validate_campaign.6934c1c2</Button>
|
|
</div>);
|
|
|
|
}
|
|
|
|
export function SendStep({ draft, patch }: WizardStepProps) {
|
|
const delivery = asRecord(draft.delivery);
|
|
const rateLimit = asRecord(delivery.rate_limit);
|
|
return (
|
|
<div>
|
|
<div className="step-intro">
|
|
<h2>i18n:govoplan-campaign.send_preparation.6e078f43</h2>
|
|
<p>i18n:govoplan-campaign.configure_rate_limits_and_prepare_the_final_send.af3d4e48</p>
|
|
</div>
|
|
<div className="form-grid compact responsive-form-grid">
|
|
<FormField label="i18n:govoplan-campaign.messages_per_minute.bea49348"><input type="number" min={1} value={getNumber(rateLimit, "messages_per_minute", 5)} onChange={(event) => patch(["delivery", "rate_limit", "messages_per_minute"], Number(event.target.value || 1))} /></FormField>
|
|
<FormField label="i18n:govoplan-campaign.concurrency.2ec390bf"><input type="number" min={1} value={getNumber(rateLimit, "concurrency", 1)} onChange={(event) => patch(["delivery", "rate_limit", "concurrency"], Number(event.target.value || 1))} /></FormField>
|
|
</div>
|
|
<p className="muted">i18n:govoplan-campaign.test_send_and_queue_actions_remain_in_the_send_w.60dee716</p>
|
|
</div>);
|
|
|
|
}
|
|
|
|
function JsonEditor({ value, onValid }: {value: unknown;onValid: (value: unknown) => void;}) {
|
|
const [text, setText] = useState(stringifyJson(value));
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
setText(stringifyJson(value));
|
|
setError("");
|
|
}, [value]);
|
|
|
|
function change(nextText: string) {
|
|
setText(nextText);
|
|
const parsed = parseJsonTextarea(nextText, value);
|
|
setError(parsed.error);
|
|
if (!parsed.error) onValid(parsed.value);
|
|
}
|
|
|
|
return (
|
|
<div className="json-edit-block">
|
|
<textarea rows={12} value={text} onChange={(event) => change(event.target.value)} />
|
|
{error ? <p className="form-help danger-text">i18n:govoplan-campaign.invalid_json.03f61ae0 {error}</p> : <p className="form-help">i18n:govoplan-campaign.valid_json_is_saved_with_the_wizard_draft.16f5d341</p>}
|
|
{Array.isArray(value) && value.length > 0 && <p className="form-help">i18n:govoplan-campaign.preview.4bf30626 {stringifyPreview(asArray(value)[0], 140)}</p>}
|
|
</div>);
|
|
|
|
}
|