@bygghammar/cms-platform 0.24.0 → 0.26.0

package/src/backoffice/ContactDetailsView.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+/** One editable company field. */
+export type ContactField = { key: string; label: string; type?: string };
+
+/** The canonical company detail fields every site shares. */
+export const CONTACT_FIELDS: ContactField[] = [
+  { key: "locationName", label: "Name" },
+  { key: "street", label: "Address" },
+  { key: "postCode", label: "Post code" },
+  { key: "city", label: "City" },
+  { key: "country", label: "Country" },
+  { key: "legalName", label: "Company details (legal name)" },
+  { key: "orgNumber", label: "Org. number" },
+  { key: "email", label: "Email", type: "email" },
+  { key: "phone", label: "Phone", type: "tel" },
+];
+
+/** Host-provided data and actions for the contact details screen. */
+export type ContactDetailsDeps = {
+  /** Code defaults for the company block. */
+  defaults: Record<string, string>;
+  /** Saved override for the company block, if any. */
+  stored: Record<string, string> | undefined;
+  loading?: boolean;
+  /** Fields to render; defaults to `CONTACT_FIELDS`. */
+  fields?: ContactField[];
+  saveSection: (input: { data: { key: string; data: unknown } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+const input =
+  "mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm focus:border-sea focus:outline-none";
+const lbl = "text-[0.65rem] uppercase tracking-[0.22em] text-ink/55";
+
+/**
+ * Host-agnostic contact details screen. These company details are the single
+ * source of truth for the contact section, the footer and structured data.
+ */
+export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
+  const { defaults, stored, loading, fields = CONTACT_FIELDS, saveSection, refresh } = deps;
+
+  const [form, setForm] = useState<Record<string, string>>(defaults);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (stored && typeof stored === "object") setForm({ ...defaults, ...stored });
+  }, [stored, defaults]);
+
+  const set = (key: string, value: string) => setForm((f) => ({ ...f, [key]: value }));
+
+  async function onSave() {
+    setSaving(true);
+    try {
+      await saveSection({ data: { key: "company", data: form } });
+      await refresh();
+      toast.success("Contact details saved");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Settings</div>
+      <h2 className="mt-2 font-serif text-3xl text-ink">Contact details</h2>
+      <p className="mt-3 text-sm text-ink/65">
+        These company details are the single source of truth. They are used in the website contact
+        section, the footer and the structured data for search engines.
+      </p>
+
+      <div className="mt-10 grid gap-5 sm:grid-cols-2">
+        {fields.map((f) => (
+          <label key={f.key} className="block">
+            <span className={lbl}>{f.label}</span>
+            <input
+              className={input}
+              type={f.type ?? "text"}
+              value={form[f.key] ?? ""}
+              onChange={(e) => set(f.key, e.target.value)}
+            />
+          </label>
+        ))}
+      </div>
+
+      <div className="mt-10 flex items-center gap-4">
+        <button
+          type="button"
+          onClick={onSave}
+          disabled={saving || !!loading}
+          className="bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper disabled:opacity-50"
+        >
+          {saving ? "Saving..." : "Save details"}
+        </button>
+        <button
+          type="button"
+          onClick={() => setForm(defaults)}
+          className="text-xs uppercase tracking-[0.22em] text-ink/55 hover:text-ink"
+        >
+          Reset to defaults
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/DomainsView.tsx

@@ -0,0 +1,264 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Trash2, Plus, Check, X } from "lucide-react";
+
+/** One language-to-domain mapping. */
+export type LocaleDomainRow = {
+  locale: string;
+  domain: string;
+  isDefault: boolean;
+  isAdminDomain: boolean;
+};
+
+/** Host-provided data, actions and navigation for the domains screen. */
+export type DomainsDeps = {
+  domains: LocaleDomainRow[];
+  locales: readonly string[];
+  defaultLocale: string;
+  /** Path back to the backoffice home, e.g. `/kontoret`. */
+  backPath: string;
+  /** Example domain shown as the input placeholder. */
+  domainPlaceholder?: string;
+  saveDomain: (input: { data: LocaleDomainRow }) => Promise<unknown>;
+  deleteDomain: (input: { data: { locale: string } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+/** Host-agnostic languages & domains screen. */
+export function DomainsView({ deps }: { deps: DomainsDeps }) {
+  const {
+    domains,
+    locales,
+    defaultLocale: DEFAULT_LOCALE,
+    backPath,
+    domainPlaceholder = "www.example.com",
+    saveDomain: save,
+    deleteDomain: del,
+    refresh,
+  } = deps;
+  const [busy, setBusy] = useState(false);
+  const [editing, setEditing] = useState<LocaleDomainRow | null>(null);
+  const [draft, setDraft] = useState<Partial<LocaleDomainRow>>({
+    locale: DEFAULT_LOCALE,
+    domain: "",
+    isDefault: false,
+    isAdminDomain: false,
+  });
+
+  const reset = () => {
+    setEditing(null);
+    setDraft({
+      locale: DEFAULT_LOCALE,
+      domain: "",
+      isDefault: false,
+      isAdminDomain: false,
+    });
+  };
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!draft.locale || !draft.domain) return;
+    setBusy(true);
+    try {
+      await save({
+        data: {
+          locale: draft.locale,
+          domain: draft.domain,
+          isDefault: !!draft.isDefault,
+          isAdminDomain: !!draft.isAdminDomain,
+        },
+      });
+      await refresh();
+      toast.success("Domain saved");
+      reset();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async (locale: string) => {
+    if (!confirm("Remove this domain mapping?")) return;
+    setBusy(true);
+    try {
+      await del({ data: { locale } });
+      await refresh();
+      toast.success("Domain removed");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not remove");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const startEdit = (d: LocaleDomainRow) => {
+    setEditing(d);
+    setDraft({ ...d });
+  };
+
+  return (
+    <main className="p-6 md:p-10 w-full">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">Backoffice</div>
+          <h1 className="mt-1 font-serif text-3xl">Languages & domains</h1>
+        </div>
+        <a
+          href={backPath}
+          className="text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink"
+        >
+          ← Back
+        </a>
+      </div>
+
+      <p className="mt-4 max-w-2xl text-sm text-ink/70">
+        Map each language to its own domain. Mark one domain as the default (fallback) and one as
+        the admin domain where the backoffice is only available.
+      </p>
+
+      <section className="mt-10">
+        <h2 className="font-serif text-xl">Current domains</h2>
+        <div className="mt-4 overflow-x-auto border border-ink/10">
+          <table className="w-full text-sm">
+            <thead className="bg-ink text-paper text-left">
+              <tr>
+                <th className="px-4 py-3 font-medium">Language</th>
+                <th className="px-4 py-3 font-medium">Domain</th>
+                <th className="px-4 py-3 font-medium">Default</th>
+                <th className="px-4 py-3 font-medium">Admin</th>
+                <th className="px-4 py-3 font-medium"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {domains.length === 0 && (
+                <tr>
+                  <td colSpan={5} className="px-4 py-8 text-center text-ink/50">
+                    No domains configured yet.
+                  </td>
+                </tr>
+              )}
+              {domains.map((d) => (
+                <tr
+                  key={d.locale}
+                  className="border-b border-ink/5 last:border-b-0 hover:bg-ink/[0.02]"
+                >
+                  <td className="px-4 py-3 font-medium uppercase">{d.locale}</td>
+                  <td className="px-4 py-3 font-mono text-ink/80">{d.domain}</td>
+                  <td className="px-4 py-3">
+                    {d.isDefault ? (
+                      <Check className="size-4 text-sea" />
+                    ) : (
+                      <X className="size-4 text-ink/30" />
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    {d.isAdminDomain ? (
+                      <Check className="size-4 text-sea" />
+                    ) : (
+                      <X className="size-4 text-ink/30" />
+                    )}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => startEdit(d)}
+                        className="text-xs uppercase tracking-[0.15em] text-ink/70 hover:text-ink underline underline-offset-2"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => remove(d.locale)}
+                        disabled={busy}
+                        className="p-1.5 text-ink/50 hover:text-red-600 transition-colors"
+                        aria-label="Remove"
+                      >
+                        <Trash2 className="size-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className="mt-12 max-w-xl">
+        <h2 className="font-serif text-xl">{editing ? "Edit domain" : "Add domain"}</h2>
+        <form onSubmit={submit} className="mt-4 space-y-4">
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">Language</span>
+            <select
+              value={draft.locale}
+              onChange={(e) => setDraft((d) => ({ ...d, locale: e.target.value }))}
+              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink focus:border-sea focus:outline-none"
+            >
+              {locales.map((l) => (
+                <option key={l} value={l}>
+                  {l.toUpperCase()}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">Domain</span>
+            <input
+              type="text"
+              required
+              value={draft.domain}
+              onChange={(e) => setDraft((d) => ({ ...d, domain: e.target.value }))}
+              placeholder={domainPlaceholder}
+              className="mt-2 w-full border border-ink/15 bg-white px-4 py-3 text-ink placeholder:text-ink/40 focus:border-sea focus:outline-none"
+            />
+            <span className="mt-1 block text-xs text-ink/50">
+              Enter the domain without https:// and without trailing slash.
+            </span>
+          </label>
+
+          <div className="flex flex-col gap-3 pt-2">
+            <label className="flex items-center gap-3 text-sm text-ink/80">
+              <input
+                type="checkbox"
+                checked={!!draft.isDefault}
+                onChange={(e) => setDraft((d) => ({ ...d, isDefault: e.target.checked }))}
+                className="size-4 border-ink/30 text-sea focus:ring-sea"
+              />
+              Default domain (fallback when nothing else matches)
+            </label>
+            <label className="flex items-center gap-3 text-sm text-ink/80">
+              <input
+                type="checkbox"
+                checked={!!draft.isAdminDomain}
+                onChange={(e) => setDraft((d) => ({ ...d, isAdminDomain: e.target.checked }))}
+                className="size-4 border-ink/30 text-sea focus:ring-sea"
+              />
+              Admin domain (/kontoret only accessible here)
+            </label>
+          </div>
+
+          <div className="flex items-center gap-3 pt-4">
+            <button
+              type="submit"
+              disabled={busy}
+              className="inline-flex items-center gap-2 border border-ink bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper hover:bg-paper hover:text-ink transition-colors disabled:opacity-60"
+            >
+              <Plus className="size-4" />
+              {editing ? "Save changes" : "Add domain"}
+            </button>
+            {editing && (
+              <button
+                type="button"
+                onClick={reset}
+                className="text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink underline underline-offset-4"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </section>
+    </main>
+  );
+}