domma-cms 0.55.1 → 0.66.0

package/plugins/invoice/admin/views/issuers.js

@@ -1,23 +1,30 @@
 /**
- * Invoice plugin - issuers CRUD view.
+ * Invoice plugin - issuers screen.
+ *
+ * The same panel the settings slideover puts in its Issuers tab. This route
+ * stays because the sidebar and old bookmarks point at it, and because a
+ * fifteen-field issuer form is more comfortable on a full screen than in a
+ * slideover.
  */
-import {mountPartyView} from './party-view.js?v=1';
+import {ISSUER_FIELDS, mountPartyPanel} from './party-view.js?v=8';
+import {disposeOnLeave} from './view-lifecycle.js?v=8';
 
 export const issuersView = {
     templateUrl: '/plugins/invoice/admin/templates/issuers.html',
-    onMount: ($container) => mountPartyView($container, {
-        kind: 'issuer',
-        endpoint: '/api/plugins/invoice/issuers',
-        label: 'Issuer',
-        fields: [
-            { key: 'name',        label: 'Trading Name',  required: true,  type: 'text' },
-            { key: 'email',       label: 'Email',         type: 'text' },
-            { key: 'phone',       label: 'Phone',         type: 'text' },
-            { key: 'website',     label: 'Website',       type: 'text' },
-            { key: 'vatNumber',   label: 'VAT Number',    type: 'text' },
-            { key: 'logoUrl',     label: 'Logo URL',      type: 'text' },
-            { key: 'address',     label: 'Address',       type: 'textarea' },
-            { key: 'bankDetails', label: 'Bank Details',  type: 'textarea' }
-        ]
-    })
+
+    onMount($container) {
+        const host = $container.find('#party-host').get(0);
+        if (!host) return;
+
+        const panel = mountPartyPanel(host, {
+            kind: 'issuer',
+            endpoint: '/api/plugins/invoice/issuers',
+            label: 'Issuer',
+            intro: 'An issuer is you - a trading name, its address, VAT number and the account an invoice is paid into. Add one profile per business you invoice as.',
+            fields: ISSUER_FIELDS
+        });
+
+        disposeOnLeave(host, panel.dispose);
+        Domma.icons.scan($container.get(0));
+    }
 };

package/plugins/invoice/admin/views/media.js

@@ -0,0 +1,172 @@
+/**
+ * Invoice plugin - choosing or uploading a logo.
+ *
+ * A logo is a file, not a URL somebody types, so every place that holds one
+ * (the Branding setting, an issuer's own override) opens this: the media
+ * library as a grid, with an Upload button that adds to it.
+ *
+ * Upload goes through a raw `fetch` rather than `H`, and deliberately. `H`
+ * sets `Content-Type: application/json` and `JSON.stringify`s its body, so a
+ * FormData posted through it arrives as `{}` - the file never leaves the
+ * browser and the server answers "No file uploaded". The Media screen in the
+ * admin uses the same raw call for the same reason; the token comes out of
+ * Domma storage, which is where the admin's interceptor reads it from too.
+ */
+const IMAGE = /\.(png|jpe?g|gif|webp|svg)$/i;
+
+/**
+ * Upload one file to the media library.
+ *
+ * @param   {File} file
+ * @returns {Promise<{name: string, url: string}>}
+ */
+async function uploadMedia(file) {
+    const body = new FormData();
+    body.append('file', file);
+
+    const res = await fetch('/api/media', {
+        method: 'POST',
+        body,
+        headers: { Authorization: 'Bearer ' + (S.get('auth_token') || '') }
+    });
+
+    let payload = null;
+    try {
+        payload = await res.json();
+    } catch { /* a non-JSON body means the status is all we have */ }
+
+    if (!res.ok) throw new Error(payload?.error || `Upload failed (${res.status}).`);
+    // POST /api/media answers with an array when several files went up.
+    return Array.isArray(payload) ? payload[0] : payload;
+}
+
+/**
+ * Open the picker.
+ *
+ * @param   {(url: string) => void} onPick called with the chosen media path
+ * @returns {Promise<void>}
+ */
+export async function openMediaPicker(onPick) {
+    const slideover = E.slideover({
+        title: 'Choose a logo',
+        size: 'md',
+        position: 'right',
+        onClose: () => setTimeout(() => {
+            slideover.destroy();
+            slideover.element?.remove();
+        }, 350)
+    });
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'invoice-party-form';
+
+    const bar = document.createElement('div');
+    bar.className = 'invoice-panel-head';
+
+    const uploadBtn = document.createElement('button');
+    uploadBtn.type = 'button';
+    uploadBtn.className = 'btn btn-sm btn-primary';
+    uploadBtn.textContent = 'Upload…';
+
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+    fileInput.className = 'invoice-hidden';
+
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.className = 'btn btn-sm btn-ghost';
+    clearBtn.textContent = 'No logo';
+    clearBtn.title = 'Clear the logo';
+
+    bar.appendChild(clearBtn);
+    bar.appendChild(uploadBtn);
+    bar.appendChild(fileInput);
+    wrapper.appendChild(bar);
+
+    const status = document.createElement('p');
+    status.className = 'text-sm text-muted';
+    wrapper.appendChild(status);
+
+    const grid = document.createElement('div');
+    grid.className = 'invoice-media-grid';
+    wrapper.appendChild(grid);
+
+    slideover.element.appendChild(wrapper);
+
+    /**
+     * @param   {string} url
+     * @returns {void}
+     */
+    function choose(url) {
+        onPick(url);
+        slideover.close();
+    }
+
+    /**
+     * @returns {Promise<void>}
+     */
+    async function refresh() {
+        status.textContent = 'Loading…';
+        let media = [];
+        try {
+            const res = await H.get('/api/media');
+            media = (res.data ?? res ?? []).filter((m) => IMAGE.test(m.name || m.url || ''));
+        } catch {
+            status.textContent = 'The media library could not be read.';
+            return;
+        }
+
+        grid.textContent = '';
+        status.textContent = media.length
+            ? ''
+            : 'No images yet. Upload one and it will appear here.';
+
+        for (const item of media) {
+            const tile = document.createElement('button');
+            tile.type = 'button';
+            tile.className = 'invoice-media-tile';
+            tile.title = item.name;
+
+            const img = document.createElement('img');
+            img.src = item.url;
+            img.alt = item.name;
+            img.loading = 'lazy';
+            tile.appendChild(img);
+
+            const name = document.createElement('span');
+            name.textContent = item.name;
+            tile.appendChild(name);
+
+            tile.addEventListener('click', () => choose(item.url));
+            grid.appendChild(tile);
+        }
+    }
+
+    uploadBtn.addEventListener('click', () => fileInput.click());
+    clearBtn.addEventListener('click', () => choose(''));
+
+    fileInput.addEventListener('change', async () => {
+        const file = fileInput.files?.[0];
+        if (!file) return;
+        uploadBtn.disabled = true;
+        status.textContent = 'Uploading…';
+        try {
+            const saved = await uploadMedia(file);
+            E.toast('Uploaded.', { type: 'success' });
+            // Straight to the newly uploaded file: somebody who has just
+            // chosen it in a file dialog has already picked it.
+            if (saved?.url) { choose(saved.url); return; }
+            await refresh();
+        } catch (err) {
+            status.textContent = err?.message ?? 'Upload failed.';
+            E.toast(err?.message ?? 'Upload failed.', { type: 'error' });
+        } finally {
+            uploadBtn.disabled = false;
+            fileInput.value = '';
+        }
+    });
+
+    slideover.open();
+    await refresh();
+}

package/plugins/invoice/admin/views/party-view.js

@@ -1,27 +1,96 @@
 /**
- * Shared CRUD view for issuers and receivers.
- * Renders a sortable table and an edit slideover driven by a fields[] config.
+ * Shared CRUD panel for issuers and receivers.
+ *
+ * A sortable Domma table, and a slideover whose form is generated by F.create
+ * from the same fields[] config the caller already supplies - the fields were
+ * being assembled by hand with document.createElement, which is the thing
+ * F.create exists to replace.
+ *
+ * It mounts into an ELEMENT rather than a route view, because there are now two
+ * places that want it: the Issuers and Receivers screens, and two tabs of the
+ * settings slideover. Nothing here knows which it is in, and nothing here
+ * subscribes to the router - the caller owns the teardown, since a panel in a
+ * slideover dies when the slideover closes and a panel in a view dies when the
+ * route changes.
+ *
+ * The slideover takes the form's container as an ELEMENT. E.slideover's own
+ * setContent sanitises, which strips inputs; passing an element has it appended
+ * instead (Slideover.create, elements.js), which is the light-DOM route the
+ * root CLAUDE.md prescribes.
  */
+import {openMediaPicker} from './media.js?v=8';
+import {scanHelp} from '/plugins/_lib/admin/ui/help.js?v=8';
+
 function escapeHtml(s) {
     return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 }
 
-export async function mountPartyView($container, config) {
-    let parties = [];
+/**
+ * Draw a party panel into `host`.
+ *
+ * @param   {HTMLElement} host
+ * @param   {object} config - {kind, endpoint, label, fields[], intro?}
+ * @returns {{reload: Function, dispose: Function, parties: object}}
+ */
+export function mountPartyPanel(host, config) {
+    // One observable holds the list; the table follows it, so a create, an edit
+    // and a delete each write once and nothing calls a reload by hand.
+    const parties = M.observable([]);
     let table = null;
+    let menu = null;
+
+    host.textContent = '';
+    host.classList.add('invoice-party-panel');
+
+    if (config.intro) {
+        const intro = document.createElement('p');
+        intro.className = 'text-sm text-muted mb-2';
+        intro.textContent = config.intro;
+        host.appendChild(intro);
+    }
+
+    const head = document.createElement('div');
+    head.className = 'invoice-panel-head';
+    const newBtn = document.createElement('button');
+    newBtn.type = 'button';
+    newBtn.className = 'btn btn-sm btn-primary';
+    newBtn.textContent = `New ${config.label}`;
+    head.appendChild(newBtn);
+    host.appendChild(head);
+
+    const tableHost = document.createElement('div');
+    host.appendChild(tableHost);
+
+    /**
+     * Domma's table has no empty-state option (`emptyMessage` was passed here
+     * for a year and silently ignored, so an empty list showed a header row
+     * and nothing else). Ours, and re-evaluated on every data push - otherwise
+     * it would stay on screen under the first row somebody added.
+     *
+     * @param   {object[]} data
+     * @returns {void}
+     */
+    function paintEmptyLine(data) {
+        tableHost.querySelector(':scope > .invoice-empty')?.remove();
+        if (data.length) return;
+        const empty = document.createElement('p');
+        empty.className = 'text-sm text-muted invoice-empty';
+        empty.textContent = `No ${config.label.toLowerCase()}s yet.`;
+        tableHost.appendChild(empty);
+    }
 
     function buildTable(data) {
-        const el = $container.find('#party-table').get(0);
-        if (!el) return;
+        if (!tableHost.isConnected && table) return;
         if (table) {
             table.setData(data);
-            Domma.icons.scan(el);
+            paintEmptyLine(data);
+            Domma.icons.scan(tableHost);
             return;
         }
 
         const cols = [
             { key: 'name', title: 'Name', sortable: true,
-                render: (v, row) => `<a href="#" data-id="${escapeHtml(row.id)}" class="party-edit" style="font-weight:600;">${escapeHtml(v || '(unnamed)')}</a>`
+                render: (v, row) => `<a href="#" data-id="${escapeHtml(row.id)}" class="party-edit invoice-number-link">${escapeHtml(v || '(unnamed)')}</a>`
             }
         ];
         if (config.fields.some((f) => f.key === 'company')) {
@@ -30,105 +99,230 @@ export async function mountPartyView($container, config) {
         cols.push(
             { key: 'email', title: 'Email', sortable: true, render: (v) => v ? `<a href="mailto:${escapeHtml(v)}">${escapeHtml(v)}</a>` : '-' },
             { key: 'vatNumber', title: 'VAT', sortable: false, render: (v) => v ? `<code>${escapeHtml(v)}</code>` : '-' },
-            { key: 'id', title: 'Actions', sortable: false,
-                render: (id) => `<div style="display:flex;gap:.4rem;">
-  <button class="btn btn-sm btn-outline party-edit" data-id="${escapeHtml(id)}"><span data-icon="edit" data-icon-size="14"></span></button>
-  <button class="btn btn-sm btn-danger party-delete" data-id="${escapeHtml(id)}"><span data-icon="trash" data-icon-size="14"></span></button>
+            // A space, not '': T falls back to the column KEY for a falsy
+            // title, which printed a column headed "id".
+            { key: 'id', title: ' ', sortable: false,
+                render: (id) => `<div class="invoice-row-actions">
+  <button class="btn btn-sm btn-outline party-edit" data-id="${escapeHtml(id)}" title="Edit"><span data-icon="edit" data-icon-size="14"></span></button>
+  <button class="btn btn-sm btn-danger party-delete" data-id="${escapeHtml(id)}" title="Delete"><span data-icon="trash" data-icon-size="14"></span></button>
 </div>` }
         );
 
-        table = T.create(el, { data, columns: cols, emptyMessage: `No ${config.label.toLowerCase()}s yet.` });
+        table = T.create(tableHost, {
+            data,
+            columns: cols,
+            pagination: data.length > 10,
+            pageSize: 10
+        });
+
+        paintEmptyLine(data);
 
-        el.addEventListener('click', async (e) => {
+        tableHost.addEventListener('click', async (e) => {
             const editEl = e.target.closest('.party-edit');
             const delEl  = e.target.closest('.party-delete');
             if (editEl) {
                 e.preventDefault();
-                const party = parties.find((p) => p.id === editEl.dataset.id);
-                openEditor(party);
+                openEditor(parties.value.find((p) => p.id === editEl.dataset.id));
             }
             if (delEl) {
-                const party = parties.find((p) => p.id === delEl.dataset.id);
-                const ok = await E.confirm(`Delete ${config.label.toLowerCase()} "${party?.name ?? ''}"?`);
-                if (!ok) return;
-                try {
-                    await H.delete(`${config.endpoint}/${party.id}`);
-                    E.toast('Deleted.', { type: 'success' });
-                    await reload();
-                } catch {
-                    E.toast('Delete failed.', { type: 'error' });
+                const party = parties.value.find((p) => p.id === delEl.dataset.id);
+                if (party) await remove(party);
+            }
+        });
+
+        // The same gesture the invoice list uses, for the same reason: the row
+        // is the thing, so the actions belong on the row rather than in a
+        // column of buttons that grows every time one is added.
+        menu = E.contextMenu(tableHost, {
+            match: 'tbody tr',
+            inherit: false,
+            items: (target) => {
+                const id = target?.querySelector?.('[data-id]')?.dataset?.id;
+                const party = parties.value.find((x) => x.id === id);
+                if (!party) return [];
+
+                const items = [
+                    { header: party.company || party.name || config.label },
+                    { label: `Edit ${config.label.toLowerCase()}`, icon: 'edit', action: () => openEditor(party) },
+                    { label: 'Duplicate', icon: 'copy', action: () => duplicate(party) }
+                ];
+                if (party.email) {
+                    items.push({ label: 'Copy email address', icon: 'copy',
+                        action: () => copyText(party.email) });
+                }
+                for (const extra of config.extraItems ?? []) {
+                    items.push(extra(party));
                 }
+                items.push(
+                    { type: 'divider' },
+                    { label: 'Delete', icon: 'trash', danger: true, action: () => remove(party) }
+                );
+                return items;
             }
         });
 
-        Domma.icons.scan(el);
+        Domma.icons.scan(tableHost);
+        scanHelp(tableHost);
     }
 
+    /**
+     * Put text on the clipboard, saying so either way.
+     *
+     * `navigator.clipboard` needs a secure context and refuses without one, so
+     * the failure is reported rather than silently doing nothing.
+     *
+     * @param   {string} text
+     * @returns {Promise<void>}
+     */
+    async function copyText(text) {
+        try {
+            await navigator.clipboard.writeText(text);
+            E.toast('Copied.', { type: 'success' });
+        } catch {
+            E.toast('Your browser would not let the page copy that.', { type: 'error' });
+        }
+    }
+
+    /**
+     * @param   {object} party
+     * @returns {Promise<void>}
+     */
+    async function duplicate(party) {
+        // Only the declared fields, not a spread: an entry read back from the
+        // server carries an id and whatever else the collection put on it, and
+        // posting those straight back stores them a second time.
+        const copy = {};
+        for (const field of config.fields) copy[field.key] = party[field.key] ?? '';
+        copy.name = `${party.name || 'Copy'} (copy)`;
+        try {
+            const res = await H.post(config.endpoint, copy);
+            if (res?.error) throw new Error(res.error);
+            E.toast('Copied.', { type: 'success' });
+            await reload();
+        } catch (err) {
+            E.toast(err?.message ?? 'Could not copy that.', { type: 'error' });
+        }
+    }
+
+    /**
+     * @param   {object} party
+     * @returns {Promise<void>}
+     */
+    async function remove(party) {
+        const ok = await E.confirm(`Delete ${config.label.toLowerCase()} "${party?.name ?? ''}"?`);
+        if (!ok) return;
+        try {
+            await H.delete(`${config.endpoint}/${party.id}`);
+            E.toast('Deleted.', { type: 'success' });
+            parties.value = parties.value.filter((p) => p.id !== party.id);
+        } catch {
+            E.toast('Delete failed.', { type: 'error' });
+        }
+    }
+
+    const stopFeed = M.effect(() => {
+        const rows = parties.value;
+        M.untracked(() => buildTable(rows));
+    });
+
     async function reload() {
         try {
             const res = await H.get(config.endpoint);
-            parties = res.data ?? res ?? [];
+            parties.value = res.data ?? res ?? [];
         } catch {
-            parties = [];
+            parties.value = [];
             E.toast(`Could not load ${config.label.toLowerCase()}s.`, { type: 'error' });
         }
-        buildTable(parties);
     }
 
     function openEditor(existing) {
         const isEdit = Boolean(existing);
-        const form = document.createElement('div');
-        form.style.cssText = 'display:flex;flex-direction:column;gap:.75rem;padding:.5rem;';
 
-        const inputs = {};
+        // F.create takes a SCHEMA, initial data and options - not a container -
+        // and the instance renders itself with .renderTo(). It builds an
+        // M.create model underneath, so getData() reads back through the model
+        // rather than off the DOM.
+        const schema = {};
+        const initial = {};
         for (const field of config.fields) {
-            const wrap = document.createElement('div');
-            const label = document.createElement('label');
-            label.className = 'form-label';
-            label.textContent = field.label + (field.required ? ' *' : '');
-            wrap.appendChild(label);
-
-            let input;
-            if (field.type === 'textarea') {
-                input = document.createElement('textarea');
-                input.rows = 3;
-            } else {
-                input = document.createElement('input');
-                input.type = 'text';
-            }
-            input.className = 'form-control';
-            input.value = existing?.[field.key] ?? '';
-            wrap.appendChild(input);
-            form.appendChild(wrap);
-            inputs[field.key] = input;
+            schema[field.key] = {
+                type:     field.type === 'textarea' ? 'textarea' : 'string',
+                label:    field.label,
+                required: Boolean(field.required)
+            };
+            if (field.hint) schema[field.key].formConfig = { hint: field.hint };
+            initial[field.key] = existing?.[field.key] ?? '';
+        }
+
+        const form = F.create(schema, initial, { showSubmitButton: false });
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'invoice-party-form';
+        const fields = document.createElement('div');
+        form.renderTo(fields);
+        wrapper.appendChild(fields);
+
+        // A logo is a file, not a URL somebody types. The picker writes the
+        // chosen path back through the MODEL rather than the input, because
+        // Forma reads getData() off the model and an input written behind its
+        // back saves the old value.
+        for (const field of config.fields.filter((f) => f.media)) {
+            const input = fields.querySelector(`[name="${field.key}"]`);
+            if (!input) continue;
+            const pick = document.createElement('button');
+            pick.type = 'button';
+            pick.className = 'btn btn-sm btn-outline invoice-media-pick';
+            pick.textContent = 'Choose…';
+            pick.addEventListener('click', () => openMediaPicker((url) => {
+                form.model.set(field.key, url);
+                input.value = url;
+            }));
+            input.insertAdjacentElement('afterend', pick);
+            input.parentElement?.classList.add('invoice-media-row');
         }
 
+        const actions = document.createElement('div');
+        actions.className = 'invoice-party-actions';
+        const cancelBtn = document.createElement('button');
+        cancelBtn.type = 'button';
+        cancelBtn.className = 'btn btn-ghost';
+        cancelBtn.textContent = 'Cancel';
         const saveBtn = document.createElement('button');
         saveBtn.type = 'button';
-        saveBtn.className = 'btn btn-primary mt-2';
+        saveBtn.className = 'btn btn-primary';
         saveBtn.textContent = isEdit ? 'Save changes' : 'Create';
-        form.appendChild(saveBtn);
+        actions.appendChild(cancelBtn);
+        actions.appendChild(saveBtn);
+        wrapper.appendChild(actions);
 
         const slideover = E.slideover({
             title: isEdit ? `Edit ${config.label}` : `New ${config.label}`,
             size: 'md',
             position: 'right',
-            content: form
+            // close() only hides the panel and destroy() tears the component
+            // down without detaching its element - measured, not assumed - so
+            // opening the editor twenty times left twenty panels in the
+            // document. Both, then, once the slide-out has run. Hanging it off
+            // onClose covers Escape and the backdrop as well as the buttons.
+            onClose: () => setTimeout(() => {
+                slideover.destroy();
+                slideover.element?.remove();
+            }, 350)
         });
 
+        // Light-DOM projection. setContent() sanitises, which strips the inputs
+        // F.create has just rendered - root CLAUDE.md, gotcha 4.
+        slideover.element.appendChild(wrapper);
+
+        cancelBtn.addEventListener('click', () => slideover.close());
+
         saveBtn.addEventListener('click', async () => {
-            const body = {};
-            for (const field of config.fields) {
-                body[field.key] = inputs[field.key].value;
-            }
-            if (!body.name?.trim()) {
-                E.toast('Name is required.', { type: 'error' });
-                return;
-            }
+            if (!form.validate()) return;
+            const values = form.getData();
             try {
                 const res = isEdit
-                    ? await H.put(`${config.endpoint}/${existing.id}`, body)
-                    : await H.post(config.endpoint, body);
+                    ? await H.put(`${config.endpoint}/${existing.id}`, values)
+                    : await H.post(config.endpoint, values);
                 if (res.error) throw new Error(res.error);
                 slideover.close();
                 E.toast(isEdit ? 'Saved.' : 'Created.', { type: 'success' });
@@ -139,10 +333,54 @@ export async function mountPartyView($container, config) {
         });
 
         slideover.open();
+        Domma.icons.scan(wrapper);
     }
 
-    $container.find('#btn-new').on('click', () => openEditor(null));
+    newBtn.addEventListener('click', () => openEditor(null));
+
+    reload();
 
-    await reload();
-    Domma.icons.scan();
+    return {
+        parties,
+        reload,
+        dispose: () => {
+            stopFeed();
+            menu?.destroy?.();
+            menu = null;
+            table?.destroy?.();
+            table = null;
+        }
+    };
 }
+
+/** The issuer fields, shared by the Issuers screen and the settings tab. */
+export const ISSUER_FIELDS = [
+    { key: 'name',        label: 'Trading Name',  required: true,  type: 'text' },
+    { key: 'email',       label: 'Email',         type: 'text' },
+    { key: 'phone',       label: 'Phone',         type: 'text' },
+    { key: 'website',     label: 'Website',       type: 'text' },
+    { key: 'vatNumber',   label: 'VAT Number',    type: 'text' },
+    { key: 'logoUrl',     label: 'Logo',          type: 'text', media: true,
+      hint: 'Printed at the top of this issuer’s invoices. Leave it empty to use the logo from Settings > Branding.' },
+    { key: 'address',     label: 'Address',       type: 'textarea' },
+    // Payment, as structured fields rather than one blob: these are read off a
+    // printed invoice by someone typing them into a banking app.
+    { key: 'accountName',   label: 'Account Name',   type: 'text' },
+    { key: 'bankName',      label: 'Bank',           type: 'text' },
+    { key: 'sortCode',      label: 'Sort Code',      type: 'text' },
+    { key: 'accountNumber', label: 'Account Number', type: 'text' },
+    { key: 'iban',          label: 'IBAN',           type: 'text' },
+    { key: 'bic',           label: 'BIC / SWIFT',    type: 'text' },
+    { key: 'bankDetails', label: 'Other Payment Notes', type: 'textarea' }
+];
+
+/** The receiver fields, likewise. */
+export const RECEIVER_FIELDS = [
+    { key: 'name',      label: 'Contact Name',  required: true,  type: 'text' },
+    { key: 'company',   label: 'Company',       type: 'text' },
+    { key: 'email',     label: 'Email',         type: 'text' },
+    { key: 'phone',     label: 'Phone',         type: 'text' },
+    { key: 'vatNumber', label: 'VAT Number',    type: 'text' },
+    { key: 'reference', label: 'Reference',     type: 'text' },
+    { key: 'address',   label: 'Address',       type: 'textarea' }
+];