/* global React, Icon, Avatar, Badge, Linkify, ModalOverlay, PageHeader, SectionHead, apiGet, apiPost, apiPatch, apiDelete, activeMembers, PresentationOrder */
const { useState, useEffect, useMemo } = React;
const TITLE_MAX = 140;
const BODY_MAX = 1000;
const FIELD_TYPES = [
{ value: 'short_text', label: 'Short text' },
{ value: 'long_text', label: 'Long text' },
{ value: 'single_choice', label: 'Single choice' },
{ value: 'multi_choice', label: 'Multiple choice' },
];
const isChoiceType = (type) => type === 'single_choice' || type === 'multi_choice';
// True when a respondent actually answered a field. Optional fields are simply
// absent from the stored answers (see validateAnswers in server.js).
const hasAnswer = (v) => (Array.isArray(v) ? v.length > 0 : v != null && String(v).trim() !== '');
// --- Form field builder ------------------------------------------------------
// Shared by the composer (a form not yet sent) and the post-send editor, so the two
// can never drift. See tasks/edit-sent-notifications.md.
// The next field id that cannot collide with one already in the schema. Field ids are
// load-bearing once a form has been sent — notification_responses.answers is keyed by
// them — so a new field must never reuse an id whose answers are already stored.
const nextFieldId = (fields) => {
const highest = fields.reduce((max, f) => {
const match = /^f(\d+)$/.exec(String(f.id || ''));
return match ? Math.max(max, Number(match[1])) : max;
}, 0);
return `f${highest + 1}`;
};
const blankField = (fields) => (
{ id: nextFieldId(fields), type: 'short_text', label: '', required: true, options: ['', ''] }
);
// A form is sendable when every field has a label and choice fields have >= 2 non-empty
// options. Mirrors the server's validateFormSchema so we never submit a 400.
const isFormValid = (fields) => fields.length > 0 && fields.every((f) => {
if (!String(f.label || '').trim()) return false;
if (isChoiceType(f.type)) return f.options.map((o) => o.trim()).filter(Boolean).length >= 2;
return true;
});
// Strip blank options + trim before sending; the server re-validates.
const buildFormSchema = (fields) => fields.map((f) => {
const field = { id: f.id, type: f.type, label: f.label.trim(), required: f.required };
if (isChoiceType(f.type)) field.options = f.options.map((o) => o.trim()).filter(Boolean);
return field;
});
// The builder always renders at least two option inputs, so a stored choice field with
// fewer (or a text field, which has none) gets padded out to two.
const builderOptions = (field) => {
const stored = isChoiceType(field.type) ? (field.options || []) : [];
return stored.length >= 2 ? [...stored] : [...stored, '', ''].slice(0, 2);
};
// Inflate a stored form_schema into builder state. Every field keeps its stored id —
// that is what already-collected answers are keyed by.
const fieldsFromSchema = (schema) => (Array.isArray(schema) ? schema : []).map((f) => ({
id: f.id,
type: f.type,
label: f.label || '',
required: f.required === true,
options: builderOptions(f),
}));
// Controlled editor for a form's field list. Owns only the drag cursor; every edit is
// handed back through onChange so the parent stays the single source of truth.
function FormFieldBuilder({ fields, onChange }) {
const [dragId, setDragId] = useState(null);
const updateField = (id, patch) =>
onChange(fields.map((f) => (f.id === id ? { ...f, ...patch } : f)));
const removeField = (id) => onChange(fields.filter((f) => f.id !== id));
const setOption = (id, index, value) =>
onChange(fields.map((f) =>
f.id === id ? { ...f, options: f.options.map((o, i) => (i === index ? value : o)) } : f));
const addOption = (id) =>
onChange(fields.map((f) => (f.id === id ? { ...f, options: [...f.options, ''] } : f)));
const removeOption = (id, index) =>
onChange(fields.map((f) =>
f.id === id ? { ...f, options: f.options.filter((_, i) => i !== index) } : f));
// Drag-to-reorder: drop `fromId` into `toId`'s slot (insert before it).
const moveField = (fromId, toId) => {
if (!fromId || fromId === toId) return;
const from = fields.findIndex((f) => f.id === fromId);
const to = fields.findIndex((f) => f.id === toId);
if (from < 0 || to < 0) return;
const next = [...fields];
const [moved] = next.splice(from, 1);
next.splice(to, 0, moved);
onChange(next);
};
return (
Each field needs a label, and choice fields need at least two options.
)}
);
}
// Post-send editor. Title and body for any notification; for a form, the whole field
// list through the shared builder above. PATCHes /api/notifications/:id and hands the
// updated row back so the caller can refresh its own copy. Deliberately does not touch
// the audience or re-send anything — see tasks/edit-sent-notifications.md.
function EditNotificationModal({ notification, responseCount = 0, onClose, onSaved }) {
const [title, setTitle] = useState(notification.title || '');
const [body, setBody] = useState(notification.body || '');
const [fields, setFields] = useState(() => fieldsFromSchema(notification.formSchema));
const [saving, setSaving] = useState(false);
const [error, setError] = useState('');
const isForm = notification.kind === 'form';
const canSave = Boolean(title.trim()) && Boolean(body.trim())
&& (!isForm || isFormValid(fields)) && !saving;
const save = () => {
if (!canSave) return;
setSaving(true);
setError('');
apiPatch(`/api/notifications/${encodeURIComponent(notification.id)}`, {
title: title.trim(),
body: body.trim(),
formSchema: isForm ? buildFormSchema(fields) : null,
})
.then((data) => onSaved(data.notification))
.catch((err) => setError(err.message || 'Could not save the changes.'))
.finally(() => setSaving(false));
};
return (
e.stopPropagation()} style={{ maxWidth: 620 }}>
Already sent
Edit this {isForm ? 'form' : 'message'}
Recipients see the update in the bell{isForm ? ' and on the respond page' : ''}.
Slack DMs that already went out keep the original wording — use
Send reminder if people need to look again.
{isForm && responseCount > 0 && (
{responseCount} {responseCount === 1 ? 'person has' : 'people have'} already
answered. Editing a question keeps their answers attached to it; deleting a field or an
option hides those answers from the tallies.