@bygghammar/cms-platform 0.27.0 → 0.28.0

package/src/backoffice/FormSettingsView.tsx

@@ -0,0 +1,436 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ArrowLeft, Save } from "lucide-react";
+import type { FormDefaults } from "../forms/field-sets";
+import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields";
+import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
+import { POLICY_WORDS, normalizePolicyUrl, renderLinkedText } from "../forms/rich-text";
+
+/** Host-provided data access for the shared form settings screen. */
+export type FormSettingsDeps = {
+  defaults: FormDefaults | undefined;
+  isLoading: boolean;
+  saveDefaults: (input: { data: Record<string, unknown> }) => Promise<unknown>;
+  purgeOldSubmissions: (input: {
+    data: { dryRun: boolean };
+  }) => Promise<{ matched: number; deleted: number; cutoff: string }>;
+  /** Locale previewed under the consent text; defaults to the first key present. */
+  previewLocale?: string;
+  /** Host router link back to the forms index. */
+  BackLink: (props: { className?: string; children: React.ReactNode }) => React.ReactElement;
+};
+
+/** Settings every form inherits; a form only overrides what it needs. */
+export function FormSettingsView({ deps }: { deps: FormSettingsDeps }) {
+  const [s, setS] = useState<FormDefaults | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [purgeInfo, setPurgeInfo] = useState<{
+    matched: number;
+    deleted: number;
+    cutoff: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (deps.defaults) setS(deps.defaults);
+  }, [deps.defaults]);
+
+  if (deps.isLoading || !s) return <div className="p-8 text-sm text-ink/50">Loading…</div>;
+
+  const patch = (p: Partial<FormDefaults>) => setS({ ...s, ...p });
+
+  const onSave = async () => {
+    if (s.thankyou_mode === "redirect" && !s.thankyou_redirect.trim()) {
+      toast.error("Add a redirect URL, or switch back to the thank-you message.");
+      return;
+    }
+    setBusy(true);
+    try {
+      await deps.saveDefaults({
+        data: {
+          notify_to: s.notify_to,
+          notify_enabled: s.notify_enabled,
+          notify_subject: s.notify_subject,
+          notify_body: s.notify_body,
+          notify_from_name: s.notify_from_name,
+          notify_from_email: s.notify_from_email,
+          notify_reply_to: s.notify_reply_to,
+
+          autoreply_enabled: s.autoreply_enabled,
+          autoreply_subject: s.autoreply_subject,
+          autoreply_body: s.autoreply_body,
+          spam_honeypot: s.spam_honeypot,
+          spam_min_seconds: s.spam_min_seconds,
+          spam_max_per_hour: s.spam_max_per_hour,
+          thankyou_mode: s.thankyou_mode,
+          thankyou_message: s.thankyou_message,
+          thankyou_redirect: s.thankyou_redirect,
+          consent_text: s.consent_text,
+          privacy_policy_url: s.privacy_policy_url ?? "",
+          retention_days: s.retention_days,
+          sheet_id: s.sheet_id,
+          sheet_tab: s.sheet_tab,
+          sheet_live_append: s.sheet_live_append,
+          save_partials: s.save_partials,
+        },
+      });
+      toast.success("Shared settings saved");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const consent = (s.consent_text ?? {}) as Record<string, string>;
+  const previewLocale = deps.previewLocale ?? Object.keys(consent)[0] ?? "sv";
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <deps.BackLink className="inline-flex items-center gap-2 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55 hover:text-sea">
+            <ArrowLeft className="size-3.5" />
+            Back to forms
+          </deps.BackLink>
+          <h1 className="mt-3 font-serif text-2xl text-ink">Shared form settings</h1>
+          <p className="mt-2 text-sm text-ink/60">
+            Every form inherits these values. A form only overrides what it needs.
+          </p>
+        </div>
+        <button
+          onClick={onSave}
+          disabled={busy}
+          className="inline-flex items-center gap-2 bg-ink px-5 py-2.5 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
+        >
+          <Save className="size-4" />
+          Save
+        </button>
+      </div>
+
+      <div className="mt-8 grid gap-6 lg:grid-cols-2">
+        <div className="border border-ink/10 bg-white p-6 space-y-4">
+          <InspectorSection title="Incomplete submissions">
+            <label className="flex items-center gap-3 text-sm text-ink/70">
+              <input
+                type="checkbox"
+                checked={s.save_partials !== false}
+                onChange={(e) => patch({ save_partials: e.target.checked })}
+                className="size-4 accent-sea"
+              />
+              Save part-filled forms (drafts) by default on every form
+            </label>
+            <p className="text-xs text-ink/45">
+              Drafts are stored apart from real submissions and never overwrite them. A form can
+              override this in its own settings.
+            </p>
+          </InspectorSection>
+
+          <InspectorSection title="Notifications">
+            <label className="flex items-center gap-3 text-sm text-ink/70">
+              <input
+                type="checkbox"
+                checked={s.notify_enabled !== false}
+                onChange={(e) => patch({ notify_enabled: e.target.checked })}
+                className="size-4 accent-sea"
+              />
+              Email us when a form is submitted
+            </label>
+            <TextField
+              label="Default recipients (comma separated)"
+              value={s.notify_to}
+              onChange={(v) => patch({ notify_to: v })}
+            />
+            <div className="grid gap-3 sm:grid-cols-2">
+              <SmartTagTextField
+                label="Sender name (optional)"
+                value={s.notify_from_name ?? ""}
+                fields={[]}
+                onChange={(v) => patch({ notify_from_name: v })}
+              />
+              <TextField
+                label="Sender address (optional)"
+                value={s.notify_from_email ?? ""}
+                onChange={(v) => patch({ notify_from_email: v })}
+              />
+            </div>
+            <SmartTagTextField
+              label="Reply-to (optional, defaults to the sender's address)"
+              value={s.notify_reply_to ?? ""}
+              fields={[]}
+              placeholder="{{email}}"
+              onChange={(v) => patch({ notify_reply_to: v })}
+            />
+            <SmartTagLocalizedField
+              label="Subject (optional)"
+              value={s.notify_subject}
+              fields={[]}
+              onChange={(v) => patch({ notify_subject: v })}
+            />
+            <SmartTagLocalizedField
+              label="Body (optional — leave empty for the standard answer table)"
+              value={s.notify_body}
+              fields={[]}
+              multiline
+              onChange={(v) => patch({ notify_body: v })}
+            />
+            <p className="text-xs text-ink/50">
+              Use {"{{"}field_key{"}}"} for an answer, {"{{"}all_fields{"}}"} for the full table,
+              plus {"{{"}form{"}}"}, {"{{"}locale{"}}"}, {"{{"}page_url{"}}"}, {"{{"}ip{"}}"},{" "}
+              {"{{"}user_agent{"}}"} and {"{{"}admin_url{"}}"}. Sender name and reply-to accept the
+              same tags — {"{{"}email{"}}"} replies straight to the person who submitted. Sent
+              through the default provider configured in Admin → Email settings.
+            </p>
+          </InspectorSection>
+
+          <InspectorSection title="Spam protection">
+            <label className="flex items-center gap-3 text-sm text-ink/70">
+              <input
+                type="checkbox"
+                checked={s.spam_honeypot}
+                onChange={(e) => patch({ spam_honeypot: e.target.checked })}
+                className="size-4 accent-sea"
+              />
+              Honeypot field
+            </label>
+            <p className="text-xs text-ink/45">
+              Applies to every form — there is no per-form override.
+            </p>
+            <TextField
+              label="Minimum seconds before submit"
+              value={String(s.spam_min_seconds)}
+              onChange={(v) => patch({ spam_min_seconds: Number(v) || 0 })}
+            />
+            <TextField
+              label="Max submissions per hour (per form)"
+              value={String(s.spam_max_per_hour)}
+              onChange={(v) => patch({ spam_max_per_hour: Number(v) || 0 })}
+            />
+            <p className="text-xs text-ink/45">
+              Counted per visitor IP. When the IP cannot be determined the limit is skipped.
+            </p>
+          </InspectorSection>
+
+          <InspectorSection title="Autoreply to the sender">
+            <label className="flex items-center gap-3 text-sm text-ink/70">
+              <input
+                type="checkbox"
+                checked={s.autoreply_enabled}
+                onChange={(e) => patch({ autoreply_enabled: e.target.checked })}
+                className="size-4 accent-sea"
+              />
+              Send an automatic reply when an email address was submitted
+            </label>
+            <SmartTagLocalizedField
+              label="Subject"
+              value={s.autoreply_subject}
+              fields={[]}
+              onChange={(v) => patch({ autoreply_subject: v })}
+            />
+            <SmartTagLocalizedField
+              label="Body"
+              value={s.autoreply_body}
+              fields={[]}
+              multiline
+              onChange={(v) => patch({ autoreply_body: v })}
+            />
+            <p className="text-xs text-ink/50">
+              Use {"{{"}field_key{"}}"} to insert an answer, for example {"{{"}name{"}}"}, or {"{{"}
+              all_fields{"}}"} for the full answer table.
+            </p>
+          </InspectorSection>
+
+          <InspectorSection title="Data retention">
+            <TextField
+              label="Keep submissions for (days, 0 = forever)"
+              value={String(s.retention_days)}
+              onChange={(v) => patch({ retention_days: Number(v) || 0 })}
+            />
+            <p className="text-xs text-ink/50">
+              Submissions are append-only. Nothing is ever removed automatically by site updates —
+              purging is always a manual, confirmed action.
+            </p>
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await deps.purgeOldSubmissions({ data: { dryRun: true } });
+                    setPurgeInfo(res);
+                    toast.info(
+                      `${res.matched} submission(s) are older than ${s.retention_days} days.`,
+                    );
+                  } catch (e) {
+                    toast.error(e instanceof Error ? e.message : "Could not check");
+                  }
+                }}
+                className="border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
+              >
+                Check what would be purged
+              </button>
+              <button
+                disabled={!purgeInfo || purgeInfo.matched === 0}
+                onClick={async () => {
+                  if (
+                    !window.confirm(
+                      `Permanently delete ${purgeInfo?.matched} submission(s) older than ${s.retention_days} days? This cannot be undone.`,
+                    )
+                  )
+                    return;
+                  try {
+                    const res = await deps.purgeOldSubmissions({ data: { dryRun: false } });
+                    setPurgeInfo(null);
+                    toast.success(`Deleted ${res.deleted} submission(s)`);
+                  } catch (e) {
+                    toast.error(e instanceof Error ? e.message : "Purge failed");
+                  }
+                }}
+                className="border border-red-300 px-4 py-2 text-xs uppercase tracking-[0.2em] text-red-600 hover:bg-red-50 disabled:opacity-40"
+              >
+                Purge now
+              </button>
+            </div>
+            {purgeInfo ? (
+              <p className="text-xs text-ink/50">
+                {purgeInfo.matched} match(es) before{" "}
+                {new Date(purgeInfo.cutoff).toLocaleDateString("sv-SE")}.
+              </p>
+            ) : null}
+          </InspectorSection>
+        </div>
+
+        <div className="border border-ink/10 bg-white p-6 space-y-4">
+          <InspectorSection title="GDPR consent">
+            <LocalizedField
+              label="Consent text"
+              value={s.consent_text}
+              multiline
+              onChange={(v) => patch({ consent_text: v })}
+            />
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                onClick={() => {
+                  const next = { ...consent };
+                  let changed = false;
+                  for (const loc of Object.keys(next)) {
+                    const text = next[loc] ?? "";
+                    if (/\[[^\]\n]+\]\([^)\s]+\)/.test(text)) continue;
+                    const m = POLICY_WORDS.exec(text);
+                    if (!m) continue;
+                    next[loc] =
+                      text.slice(0, m.index) +
+                      `[${m[0]}](privacy)` +
+                      text.slice(m.index + m[0].length);
+                    changed = true;
+                  }
+                  if (!changed) {
+                    toast.info('No policy wording found to link — add e.g. "integritetspolicyn".');
+                    return;
+                  }
+                  patch({ consent_text: next });
+                  toast.success("Privacy policy link inserted");
+                }}
+                className="border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
+              >
+                Insert privacy policy link
+              </button>
+            </div>
+            <p className="text-xs text-ink/50">
+              Add a link with <code>[integritetspolicyn](privacy)</code> — it points at the privacy
+              policy URL below. You can also use a full path or address, e.g.{" "}
+              <code>[privacy policy](/integritetspolicy)</code>. If there is no link at all, the
+              words &ldquo;integritetspolicyn&rdquo; / &ldquo;privacy policy&rdquo; are linked
+              automatically.
+            </p>
+            <TextField
+              label="Privacy policy URL"
+              value={s.privacy_policy_url ?? ""}
+              onChange={(v) => patch({ privacy_policy_url: v })}
+              placeholder="/integritetspolicy"
+            />
+            <p className="text-xs text-ink/50">
+              Link target:{" "}
+              {normalizePolicyUrl(s.privacy_policy_url) ? (
+                <code>{normalizePolicyUrl(s.privacy_policy_url)}</code>
+              ) : (
+                <span className="text-red-600">
+                  not set — consent links will render as plain text
+                </span>
+              )}
+            </p>
+            <div className="border border-ink/10 bg-paper/60 p-3">
+              <p className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/45">Preview</p>
+              <p className="mt-2 text-sm text-ink/75">
+                {renderLinkedText(consent[previewLocale] ?? "", {
+                  privacyUrl: s.privacy_policy_url ?? "",
+                })}
+              </p>
+            </div>
+          </InspectorSection>
+
+          <InspectorSection title="After submit">
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Mode</span>
+              <select
+                value={s.thankyou_mode}
+                onChange={(e) => patch({ thankyou_mode: e.target.value })}
+                className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+              >
+                <option value="inline">Show thank-you message</option>
+                <option value="redirect">Redirect to a page</option>
+              </select>
+            </label>
+            <LocalizedField
+              label="Thank-you message"
+              value={s.thankyou_message}
+              multiline
+              onChange={(v) => patch({ thankyou_message: v })}
+            />
+            <TextField
+              label="Redirect URL"
+              value={s.thankyou_redirect}
+              onChange={(v) => patch({ thankyou_redirect: v })}
+            />
+            {s.thankyou_mode === "redirect" && !s.thankyou_redirect.trim() ? (
+              <p className="text-xs text-red-600">
+                Redirect mode needs a URL — without one the thank-you message is shown instead.
+              </p>
+            ) : null}
+          </InspectorSection>
+
+          <InspectorSection title="Google Sheets">
+            <TextField
+              label="Default spreadsheet ID"
+              value={s.sheet_id}
+              onChange={(v) => patch({ sheet_id: v })}
+            />
+            <TextField
+              label="Default tab name"
+              value={s.sheet_tab}
+              onChange={(v) => patch({ sheet_tab: v })}
+            />
+            <label className="flex items-center gap-3 text-sm text-ink/70">
+              <input
+                type="checkbox"
+                checked={s.sheet_live_append}
+                onChange={(e) => patch({ sheet_live_append: e.target.checked })}
+                className="size-4 accent-sea"
+              />
+              Append every new submission live
+            </label>
+            {s.sheet_live_append && !s.sheet_id.trim() ? (
+              <p className="text-xs text-red-600">
+                Live append does nothing until a default spreadsheet ID is set (or one is set per
+                form).
+              </p>
+            ) : null}
+            <p className="text-xs text-ink/50">
+              Live sync requires the Google Sheets connection. CSV export always works from the
+              submissions inbox.
+            </p>
+          </InspectorSection>
+        </div>
+      </div>
+    </div>
+  );
+}