domma-cms 1.6.33 → 1.6.35

package/plugins/shopping-cart/admin/lib/kit.js

@@ -42,6 +42,21 @@ export function loadKit() {
 const seg = (id) => encodeURIComponent(String(id));
 export const api = {
     summary: () => H.get(`${BASE}/summary`),
+    sales: (q) => H.get(`${BASE}/sales?${new URLSearchParams(Object.entries(q).filter(([, v]) => v && v !== 'custom'))}`),
+    /** The CSV: fetched with the session (authenticate is Bearer-only) and saved as a file. */
+    async salesCsv(q) {
+        let token = null;
+        try { token = S.get('auth_token'); } catch { /* none */ }
+        const res = await fetch(`${BASE}/sales.csv?${new URLSearchParams(Object.entries(q).filter(([, v]) => v && v !== 'custom'))}`, {headers: token ? {Authorization: `Bearer ${token}`} : {}});
+        if (!res.ok) throw new Error(`the server answered ${res.status}`);
+        const name = (res.headers.get('content-disposition') || '').match(/filename="([^"]+)"/)?.[1] || 'sales.csv';
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(await res.blob());
+        a.download = name;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 1000);
+    },
     extensions: () => H.get(`${BASE}/extensions`),
     products: {
         list: () => H.get(`${BASE}/products`),

package/plugins/shopping-cart/admin/views/orders.js

@@ -220,7 +220,7 @@ th,td{text-align:left;padding:.5rem;border-bottom:1px solid #ddd}td.q{width:4rem
 <div class="box"><div><h1>${esc(settings.shopTitle || 'Shop')}</h1><p class="muted">Packing slip · ${esc(orderLabel(d))} · ${esc(fmtDate(o.meta?.createdAt))}</p></div>
 <div><strong>${esc(d.customer?.name || '')}</strong><br>${d.delivery === 'collect' ? 'Collecting in person' : addr}</div></div>
 <table><thead><tr><th>Qty</th><th>Item</th><th>SKU</th></tr></thead><tbody>
-${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l.variantName ? ` - ${esc(l.variantName)}` : ''}</td><td class="muted">${esc(l.sku || '')}</td></tr>`).join('')}
+${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l.variantName ? ` - ${esc(l.variantName)}` : ''}${(l.detail || []).map(x => `<br><small>${esc(x)}</small>`).join('')}</td><td class="muted">${esc(l.sku || '')}</td></tr>`).join('')}
 </tbody></table>${d.note ? `<div class="note"><strong>Note from the shopper:</strong><br>${esc(d.note)}</div>` : ''}
 <p class="muted">Thank you for your order.</p><script>onload=()=>print()<\/script></body></html>`);
         w.document.close();
@@ -283,7 +283,7 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
   </div>
   <table class="shp-lines">
     ${(d.lines || []).map(l => `<tr><td class="shp-lines-img">${l.image ? `<img src="${esc(l.image)}" alt="">` : ''}</td>
-      <td><strong>${esc(l.name)}</strong>${l.variantName ? `<small>${esc(l.optionName || 'Option')}: ${esc(l.variantName)}</small>` : ''}${l.sku ? `<small>SKU ${esc(l.sku)}</small>` : ''}</td>
+      <td><strong>${esc(l.name)}</strong>${l.variantName ? `<small>${esc(l.optionName || 'Option')}: ${esc(l.variantName)}</small>` : ''}${(l.detail || []).map(x => `<small>${esc(x)}</small>`).join('')}${l.sku ? `<small>SKU ${esc(l.sku)}</small>` : ''}</td>
       <td class="shp-num">${l.qty} × ${esc(money(l.unitPrice))}</td><td class="shp-amt">${esc(money(l.lineTotal))}</td></tr>`).join('')}
   </table>
   <dl class="shp-totals">
@@ -301,6 +301,7 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
   <label class="form-label">Staff note <span data-help="Only you see this. Saved when you click away."></span></label>
   <textarea class="form-input" rows="2" data-model="staffNote.value" data-part="staff" placeholder="Wrapped as a gift, sent second class…"></textarea>
   ${d.paymentRef || d.providerRef ? `<p class="shp-muted shp-ref">Payment reference: <code>${esc(d.paymentRef || d.providerRef)}</code></p>` : ''}
+  ${d.commission ? `<p class="shp-muted shp-ref">Platform commission: ${esc(money(d.commission.amount))} (${esc(`${d.commission.percent}%${d.commission.fixed ? ` + ${money(d.commission.fixed)}` : ''}`)})${d.commission.reversed ? ' - returned with the refund' : ''}</p>` : ''}
   ${ext.length ? `<div class="shp-ext">${ext.map(x => `<span class="shp-chip is-muted">${esc(x.k)}: ${esc(String(x.v))}</span>`).join('')}</div>` : ''}
   <div data-part="ext-panels" hidden></div>
   <h4>History</h4>

package/plugins/shopping-cart/admin/views/overview.js

@@ -7,6 +7,7 @@
  * steps to its first sale instead.
  */
 
+import {barChart} from '../lib/chart.js';
 import {api, esc, fmtDate, money, when} from '../lib/kit.js';
 import {STATUS_LABEL, STATUS_TONE} from '/plugins/shopping-cart/public/lib/orders.js';
 
@@ -157,58 +158,8 @@ export async function mount(root, ctx) {
     I.scan(view);
 }
 
-/** Thirty bars, 2px apart, rounded tops on the baseline; hover (or focus) says the day and the takings. */
+/** Thirty days of takings, one bar a day. */
 function drawChart(el, series, scope) {
-    const W = Math.max(360, Math.round(el.clientWidth) || 600), H = 170, padL = 44, padB = 22, padT = 8;
-    const max = Math.max(...series.map(d => d.revenue));
-    const top = niceMax(max);
-    const n = series.length;
-    const slot = (W - padL) / n;
-    const bw = Math.max(2, slot - 2);
-    const y = (v) => padT + (H - padT - padB) * (1 - v / top);
-    const ticks = [0, top / 2, top];
-    const day = (k) => fmtDate(k);
-    const bars = series.map((d, i) => {
-        const x = padL + i * slot + 1;
-        const h = Math.max(0, H - padB - y(d.revenue));
-        const r = Math.min(4, bw / 2, h);
-        const path = h > 0
-            ? `M${x},${H - padB} v${-(h - r)} q0,${-r} ${r},${-r} h${bw - 2 * r} q${r},0 ${r},${r} v${h - r} z`
-            : '';
-        return `<g class="shp-bar" data-i="${i}" tabindex="0" aria-label="${esc(day(d.day))}: ${esc(money(d.revenue))}, ${d.orders} orders">
-  <rect x="${padL + i * slot}" y="${padT}" width="${slot}" height="${H - padT - padB}" fill="transparent"/>
-  ${path ? `<path d="${path}"/>` : `<rect class="shp-bar-zero" x="${x}" y="${H - padB - 1}" width="${bw}" height="1"/>`}
-</g>`;
-    }).join('');
-    const labels = [0, Math.floor(n / 2), n - 1].map(i => `<text x="${padL + i * slot + slot / 2}" y="${H - 6}" text-anchor="middle">${esc(day(series[i].day))}</text>`).join('');
-    el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="Takings for each of the last 30 days">
-  ${ticks.map(t => `<line class="shp-gridline" x1="${padL}" x2="${W}" y1="${y(t)}" y2="${y(t)}"/><text class="shp-axis" x="${padL - 6}" y="${y(t) + 4}" text-anchor="end">${esc(money(t, {compact: true}))}</text>`).join('')}
-  ${bars}
-  <g class="shp-axis">${labels}</g>
-</svg><div class="shp-tip" hidden></div>`;
-    const tip = el.querySelector('.shp-tip');
-    const show = (g) => {
-        const d = series[Number(g.dataset.i)];
-        tip.innerHTML = `<strong>${esc(money(d.revenue))}</strong><span>${esc(day(d.day))} · ${d.orders} order${d.orders === 1 ? '' : 's'}</span>`;
-        tip.hidden = false;
-        const r = g.getBoundingClientRect(), box = el.getBoundingClientRect();
-        tip.style.left = `${Math.min(box.width - 120, Math.max(0, r.left - box.left + r.width / 2 - 60))}px`;
-        el.querySelectorAll('.shp-bar.is-on').forEach(b => b.classList.remove('is-on'));
-        g.classList.add('is-on');
-    };
-    const hide = () => { tip.hidden = true; el.querySelectorAll('.shp-bar.is-on').forEach(b => b.classList.remove('is-on')); };
-    const over = (e) => { const g = e.target.closest('.shp-bar'); if (g) show(g); };
-    el.addEventListener('mouseover', over);
-    el.addEventListener('focusin', over);
-    el.addEventListener('mouseleave', hide);
-    el.addEventListener('focusout', hide);
-    scope(() => { el.removeEventListener('mouseover', over); el.removeEventListener('focusin', over); });
-}
-
-/** A round top for the axis: 1, 2 or 5 × a power of ten, in minor units. */
-function niceMax(v) {
-    if (v <= 0) return 1000;
-    const p = 10 ** Math.floor(Math.log10(v));
-    for (const m of [1, 2, 5, 10]) if (m * p >= v) return m * p;
-    return 10 * p;
+    barChart(el, series.map(d => ({value: d.revenue, label: fmtDate(d.day), tip: `${d.orders} order${d.orders === 1 ? '' : 's'}`})),
+        {money, ariaLabel: 'Takings for each of the last 30 days', scope});
 }

package/plugins/shopping-cart/admin/views/sales.js

@@ -0,0 +1,133 @@
+/**
+ * Shop › Sales - what the shop took, for a range of dates: the headline figures, takings over time (by day, week or
+ * month), where the money came from (Shop, Downloads & keys, Takeaway, other add-ons), how it was paid, and a CSV
+ * for the accountant. Refunds count on the day they were made. Every figure is lib/sales.js on the server.
+ */
+import {api, esc, fmtDate, money} from '../lib/kit.js';
+import {barChart} from '../lib/chart.js';
+
+const RANGES = [['today', 'Today'], ['week', 'This week'], ['last7', 'Last 7 days'], ['month', 'This month'], ['lastmonth', 'Last month'], ['last30', 'Last 30 days'], ['year', 'This year']];
+const BY = [['day', 'Day'], ['week', 'Week'], ['month', 'Month']];
+
+export async function mount(root, ctx) {
+    const {scope, here, kit} = ctx;
+    const saved = (() => { try { return JSON.parse(sessionStorage.getItem('shop-sales') || '{}'); } catch { return {}; } })();
+    const q = {range: saved.range || 'last30', by: saved.by || 'day', from: '', to: ''};
+
+    root.innerHTML = `<div class="shp-sales">
+  <div class="shp-sales-bar">
+    <span class="shp-seg" data-part="ranges">${RANGES.map(([k, l]) => `<button type="button" data-range="${k}">${l}</button>`).join('')}<button type="button" data-range="custom">Dates…</button></span>
+    <span class="shp-sales-custom" data-part="custom" hidden><input type="date" class="form-input" data-part="from"> to <input type="date" class="form-input" data-part="to">
+      <button type="button" class="btn btn-sm btn-primary" data-act="apply">Show</button></span>
+    <span class="shp-spacer"></span>
+    <span class="shp-seg" data-part="by">${BY.map(([k, l]) => `<button type="button" data-by="${k}">${l}</button>`).join('')}</span>
+    <button type="button" class="btn btn-sm btn-outline" data-act="csv"><span data-icon="download" data-icon-size="13"></span> CSV</button>
+  </div>
+  <p class="shp-muted" data-part="span"></p>
+  <div class="shp-tiles" data-part="tiles"></div>
+  <section class="shp-card shp-chart-card"><header><h3>Takings</h3><span class="shp-muted" data-part="chart-total"></span></header><div class="shp-chart" data-part="chart"></div></section>
+  <div class="shp-sales-cols">
+    <section class="shp-card"><header><h3>Where it came from <span data-help="Line amounts before discounts. Takeaway is Takeaway's food orders; Downloads & keys are products Shopping Cart Pro delivered as files or licence keys."></span></h3></header><div data-part="sources"></div></section>
+    <section class="shp-card"><header><h3>How it was paid</h3></header><div data-part="methods"></div></section>
+  </div>
+  <section class="shp-card"><header><h3>The figures</h3><span class="shp-muted" data-part="rate"></span></header><table class="shp-sales-table" data-part="figures"></table></section>
+  <details class="shp-card shp-sales-periods"><summary>Each period, as a table</summary><table class="shp-sales-table" data-part="periods"></table></details>
+</div>`;
+    I.scan(root);
+    scope(kit.helpPopovers(root, {position: 'bottom'}));
+    const part = (n) => root.querySelector(`[data-part="${n}"]`);
+    let report = null;
+
+    const label = (p, by) => {
+        if (by === 'month') return new Intl.DateTimeFormat('en-GB', {month: 'short', year: 'numeric', timeZone: 'UTC'}).format(new Date(`${p}T12:00:00Z`));
+        if (by === 'week') return `w/c ${fmtDate(p)}`;
+        return fmtDate(p);
+    };
+
+    function render() {
+        const r = report;
+        const t = r.totals;
+        for (const b of part('ranges').querySelectorAll('[data-range]')) b.classList.toggle('is-on', b.dataset.range === (q.from ? 'custom' : q.range));
+        for (const b of part('by').querySelectorAll('[data-by]')) b.classList.toggle('is-on', b.dataset.by === q.by);
+        part('custom').hidden = !q.from && q.range !== 'custom';
+        part('from').value = r.from;
+        part('to').value = r.to;
+        part('span').textContent = r.from === r.to ? fmtDate(r.from) : `${fmtDate(r.from)} to ${fmtDate(r.to)}`;
+        const tile = (value, name, note = '') => `<div class="shp-tile"><span class="shp-tile-label">${esc(name)}</span><span class="shp-tile-value">${esc(value)}</span>${note ? `<span class="shp-tile-sub">${esc(note)}</span>` : ''}</div>`;
+        part('tiles').innerHTML = [
+            tile(money(t.net), 'Net takings', t.refunds ? `${money(t.takings)} taken, ${money(t.refunds)} refunded` : ''),
+            tile(String(t.orders), 'Orders', t.items ? `${t.items} item${t.items === 1 ? '' : 's'}` : ''),
+            tile(money(t.average), 'Average order'),
+            tile(money(t.taxAdded + t.taxIncluded), 'Tax collected', t.taxIncluded ? 'included in prices' : '')
+        ].join('');
+        part('chart-total').textContent = `${money(t.takings)} · ${t.orders} order${t.orders === 1 ? '' : 's'}`;
+        barChart(part('chart'), r.periods.map(p => ({value: p.takings, label: label(p.period, r.by),
+            tip: `${p.orders} order${p.orders === 1 ? '' : 's'}${p.refunds ? `, ${money(p.refunds)} refunded` : ''}`})),
+        {money, ariaLabel: `Takings by ${r.by}`, scope});
+
+        const share = (rows, valueKey, countKey, noun) => {
+            const max = Math.max(1, ...rows.map(x => x[valueKey]));
+            return rows.length ? rows.map(x => `<div class="shp-top"><span class="shp-top-name">${esc(x.label)}<small>${x[countKey]} ${noun}${x[countKey] === 1 ? '' : 's'}</small></span>
+  <span class="shp-top-bar"><span style="width:${Math.round(x[valueKey] / max * 100)}%"></span></span><span class="shp-mini-amt">${esc(money(x[valueKey]))}</span></div>`).join('')
+                : '<p class="shp-muted">Nothing sold in these dates.</p>';
+        };
+        const sources = r.sources.filter(s => s.orders);
+        part('sources').innerHTML = share(sources, 'amount', 'orders', 'order')
+            + (r.takeaway.collect + r.takeaway.deliver ? `<p class="shp-muted shp-sales-note">Takeaway: ${r.takeaway.collect} collected, ${r.takeaway.deliver} delivered.</p>` : '');
+        part('methods').innerHTML = share(r.methods, 'takings', 'orders', 'order');
+
+        const row = (k, v, cls = '') => `<tr class="${cls}"><th>${esc(k)}</th><td>${esc(money(v))}</td></tr>`;
+        part('figures').innerHTML = [
+            row('Items, before discounts', t.subtotal),
+            t.discount ? row('Discounts', -t.discount) : '',
+            row('Delivery charged', t.delivery),
+            t.taxAdded ? row('Tax added', t.taxAdded) : '',
+            row('Taken', t.takings, 'is-sum'),
+            row(`Refunded (${t.refundCount})`, -t.refunds),
+            row('Net takings', t.net, 'is-total'),
+            t.taxIncluded ? row('Of which tax (included in prices)', t.taxIncluded, 'is-muted') : '',
+            ...(t.commission || t.commissionBack || r.commission?.set ? [
+                row('Platform commission', -t.commission),
+                t.commissionBack ? row('Commission returned on refunds', t.commissionBack) : '',
+                row('After commission', t.afterCommission, 'is-sum')] : [])
+        ].join('');
+        part('rate').textContent = r.commission?.set ? `Platform commission: ${r.commission.rates.map(x => `${x.label} ${x.text}`).join(' · ')}` : '';
+        part('periods').innerHTML = `<thead><tr><th>${esc(BY.find(x => x[0] === r.by)[1])}</th><th>Orders</th><th>Taken</th><th>Refunded</th><th>Net</th></tr></thead><tbody>${r.periods.map(p => `<tr>
+  <td>${esc(label(p.period, r.by))}</td><td>${p.orders}</td><td>${esc(money(p.takings))}</td><td>${p.refunds ? esc(money(-p.refunds)) : ''}</td><td>${esc(money(p.net))}</td></tr>`).join('')}</tbody>`;
+        I.scan(root);
+    }
+
+    async function load() {
+        try {
+            report = await api.sales(q);
+            if (!here()) return;
+            try { sessionStorage.setItem('shop-sales', JSON.stringify({range: q.range, by: q.by})); } catch { /* private mode */ }
+            render();
+        } catch (err) {
+            part('tiles').textContent = `Sales could not load: ${err.message || err}`;
+        }
+    }
+
+    root.addEventListener('click', async (e) => {
+        const r = e.target.closest('[data-range]');
+        if (r) {
+            if (r.dataset.range === 'custom') { q.range = 'custom'; part('custom').hidden = false; part('ranges').querySelectorAll('[data-range]').forEach(b => b.classList.toggle('is-on', b === r)); return; }
+            q.range = r.dataset.range; q.from = ''; q.to = '';
+            return load();
+        }
+        const b = e.target.closest('[data-by]');
+        if (b) { q.by = b.dataset.by; return load(); }
+        const a = e.target.closest('[data-act]')?.dataset.act;
+        if (a === 'apply') {
+            if (!part('from').value || !part('to').value) { E.toast('Choose both dates.', {type: 'warning'}); return undefined; }
+            q.from = part('from').value; q.to = part('to').value;
+            return load();
+        }
+        if (a === 'csv') {
+            try { await api.salesCsv({...q, from: q.from || report?.from, to: q.to || report?.to}); } catch (err) { E.toast(`No CSV: ${err.message}`, {type: 'error'}); }
+        }
+        return undefined;
+    });
+
+    await load();
+}

package/plugins/shopping-cart/admin/views/settings.js

@@ -16,7 +16,7 @@ const SECTIONS = [
     {key: 'payment', label: 'Payment', icon: 'credit-card'}
 ];
 const MONEY_KEYS = ['shippingFlat', 'freeShippingOver'];
-const BOOL_KEYS = ['showSearch', 'showCategories', 'floatingCart', 'showStockLeft', 'allowCollection', 'pricesIncludeTax', 'taxShipping',
+const BOOL_KEYS = ['showSearch', 'showCategories', 'floatingCart', 'showStockLeft', 'accounts', 'allowCollection', 'pricesIncludeTax', 'taxShipping',
     'stripeEnabled', 'paypalEnabled', 'offlineEnabled'];
 
 export async function openSettings(ctx, section = 'store') {
@@ -79,6 +79,7 @@ export async function openSettings(ctx, section = 'store') {
       <select class="form-select" data-model="cartPosition.value"><option value="right">Right</option><option value="left">Left</option></select></div>
     <div><label class="form-label">Low stock at <span data-help="At or below this, a product is flagged in the Overview and the Low stock filter."></span></label>
       <input class="form-input" type="number" min="0" data-model="lowStockAt.value"></div>
+    <div class="shp-wide">${check('accounts', 'Customer accounts', 'Customers can create an account (optional - guests still check out): their details and addresses are filled in, and their orders are listed at the shop address followed by /account. Needs the site\'s email set up.')}</div>
     <div class="shp-wide"><label class="form-label">Terms of sale page <span data-help="If set, shoppers tick 'I agree to the terms of sale' (linked here) before paying. /terms or a full https:// address."></span></label>
       <input class="form-input" data-model="termsUrl.value" placeholder="/terms"></div>
   </section>
@@ -109,6 +110,7 @@ export async function openSettings(ctx, section = 'store') {
   </section>
 
   <section data-bind-hidden="!isPayment.value" class="shp-pay">
+    ${info.commission?.set ? `<p class="shp-note">Platform commission, set by your provider: ${info.commission.rates.map(x => `${esc(x.label)} ${esc(x.text)}`).join(' · ')}. It is worked out on each sale when it is paid and shown in Sales.</p>` : ''}
     <div class="shp-provider">
       <div class="shp-provider-head">${check('stripeEnabled', '<strong>Stripe</strong> - cards, Apple Pay, Google Pay', 'Shoppers pay on Stripe’s own secure page; card details never touch this site. Needs a Stripe account.')}
         <span class="shp-chip is-muted" data-bind-hidden="!stripeMode" data-bind-text="stripeMode"></span></div>

package/plugins/shopping-cart/admin/views/shop.js

@@ -15,10 +15,11 @@
 import {api, loadKit, setCurrency, store} from '../lib/kit.js';
 
 const ROUTE = /^#\/plugins\/shopping-cart(\/|$)/;
-const V = '1.2.0';
+const V = '1.6.0';
 const TABS = [
     {key: 'overview', label: 'Overview', icon: 'bar-chart', module: `/plugins/shopping-cart/admin/views/overview.js?v=${V}`},
     {key: 'orders', label: 'Orders', icon: 'receipt', module: `/plugins/shopping-cart/admin/views/orders.js?v=${V}`},
+    {key: 'sales', label: 'Sales', icon: 'trending-up', module: `/plugins/shopping-cart/admin/views/sales.js?v=${V}`},
     {key: 'products', label: 'Products', icon: 'package', module: `/plugins/shopping-cart/admin/views/products.js?v=${V}`}
 ];
 

package/plugins/shopping-cart/config.js

@@ -23,6 +23,7 @@ export default {
     lowStockAt: 3,
     showStockLeft: true,
     termsUrl: '',
+    accounts: false,              // customers can create an account (lib/accounts.js) - needs the site's email set up
 
     // Delivery
     countries: ['GB'],

package/plugins/shopping-cart/docs/guide.md

@@ -74,6 +74,21 @@ Refunds:
 - An offline order is only marked refunded. Give the money back yourself, the way it came.
 - Tick **Put the items back in stock** to return the stock.
 
+### Sales
+
+What the shop took, for a range of dates. Choose **Today**, **This week**, **Last 7 days**, **This month**, **Last month**, **Last 30 days**, **This year** or **Dates…**, and show it by **Day**, **Week** or **Month**.
+
+- **Net takings** (what was taken, less refunds), **Orders**, **Average order** and **Tax collected**.
+- **Takings** - a chart; point at a bar for its figures.
+- **Where it came from** - your Shop's products, downloads and licence keys (Shopping Cart Pro), Takeaway orders, and other add-ons.
+- **How it was paid** - card, PayPal, offline.
+- **The figures** - items, discounts, delivery, tax, refunds and net; **Each period, as a table** below.
+- **CSV** - one row per order, for your accountant.
+
+A sale counts on the day it was paid, and a refund on the day it was made.
+
+If your provider charges a commission on sales, **The figures** also show the commission, any returned on refunds, and what is left after commission; the rate is shown beside them and in Shop settings > Payment. Each sale's commission is worked out when it is paid, at the rate of that day, and shown on the order. You cannot change the rate yourself - ask your provider.
+
 ### Products
 
 1. Pick a filter: **All**, **On sale**, **Drafts**, **Low stock** or **Archived**.
@@ -191,3 +206,13 @@ The admin role has both by default.
 - Refunds are full refunds only.
 - One flat delivery charge and one tax rate. Shopping Cart Pro adds shipping zones, rates by weight or order value, tax by country and tax class, and discount codes.
 - Behind a proxy, set Site URL in Site Settings or Stripe and PayPal may send shoppers back to the wrong address.
+
+## Customer accounts
+
+Switch on **Customer accounts** in Shop settings (the cog) > Store to let customers create an account. It is optional - customers can still check out as guests. Your site's email must be set up (Site Settings > Email), because new accounts are confirmed by an emailed link.
+
+- Customers sign in, create an account or reset a forgotten password on the account page: your shop's address followed by `/account` (for example `/shop/account`). The shop and the basket link to it.
+- Signed in, their name, email, phone and first saved address are filled in at checkout.
+- The account page lists every order placed with their email address, before or after they signed up, with a link to each receipt. They can change their details, keep up to 8 addresses, sign out, and delete their account (their orders stay with you as a record of the sale).
+- After a guest checkout, the receipt offers to create an account with the order's email.
+- Customers get the **Shop Customer** role, which has no access to the admin.

package/plugins/shopping-cart/inject/body.html

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="/plugins/shopping-cart/public/shop.css?v=1.2.0">
-<script type="module" src="/plugins/shopping-cart/public/cart.js?v=1.0.0"></script>
+<link rel="stylesheet" href="/plugins/shopping-cart/public/shop.css?v=1.4.0">
+<script type="module" src="/plugins/shopping-cart/public/cart.js?v=1.4.0"></script>

package/plugins/shopping-cart/lib/accounts.js

@@ -0,0 +1,180 @@
+/**
+ * Customer accounts - optional (Shop settings `accounts`), one for the Shop and every extension that sells
+ * through it (Takeaway).
+ *
+ * A customer is a core user with the plugin role `shop-customer` (roles/shop-customer.json: no permissions, the
+ * admin confined to My Profile). The Cart makes it INACTIVE and emails a link; clicking it activates the account
+ * (Job Board's pattern). Sign in, refresh and the new password itself are core's own routes; this module makes,
+ * confirms, describes and deletes accounts, and keeps what the shop needs on the user: `meta.shop`
+ * {phone, addresses: [{id, label, line1, line2, city, region, postcode, country}], pending: {hash, until}}.
+ *
+ * An account's orders are the orders placed with its email - before or after it signed up. The email was proved by
+ * the confirmation link, so nobody can claim orders that are not theirs, and nothing has to be linked.
+ *
+ * Needs SMTP: without a mail server nothing can be confirmed, so accounts cannot be made (`mailReady`).
+ *
+ * @module shopping-cart/lib/accounts
+ */
+import {createHash, randomBytes, timingSafeEqual} from 'crypto';
+import {createUser, deleteUser, getUserByEmail, getUserById, updateUser, validatePassword} from '../../../server/services/users.js';
+import {issueResetToken} from '../../../server/services/passwordReset.js';
+import {checkPassword} from '../../../server/services/authChecks.js';
+import {createTransport, isSmtpConfigured, sendEmail} from '../../../server/services/email.js';
+import {getConfig} from '../../../server/config.js';
+import {COUNTRIES, isEmail} from '../public/lib/orders.js';
+
+export const ROLE = 'shop-customer';
+const PENDING_FOR = 48 * 3600000;
+const MAX_ADDRESSES = 8;
+
+const text = (v, max) => String(v ?? '').replace(/[\u0000-\u001f\u007f]/g, ' ').replace(/\s+/g, ' ').trim().slice(0, max);
+const sha = (s) => createHash('sha256').update(String(s)).digest('hex');
+const bad = (status, message, extra = {}) => Object.assign(new Error(message), {status, ...extra});
+const site = () => { try { return getConfig('site') || {}; } catch { return {}; } };
+
+// ---- Mail --------------------------------------------------------------------------------
+
+let mailer = null;
+/** Tests only: `fn(msg)` receives every message. Pass null to restore. */
+export function setAccountMailer(fn) { mailer = fn; }
+export const mailReady = () => Boolean(mailer) || isSmtpConfigured(site().smtp || {});
+
+const escHtml = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+async function mail({to, subject, lines, link, button}) {
+    const html = `${lines.map(l => `<p>${escHtml(l)}</p>`).join('')}${link ? `<p><a href="${escHtml(link)}" style="display:inline-block;padding:10px 18px;background:#2563eb;color:#fff;border-radius:6px;text-decoration:none">${escHtml(button)}</a></p>
+<p style="color:#666;font-size:13px">Or paste this into your browser: ${escHtml(link)}</p>` : ''}`;
+    const text = [...lines, link ? `${button}: ${link}` : ''].filter(Boolean).join('\n\n');
+    const msg = {to, subject, html, text};
+    if (mailer) { await mailer(msg); return true; }
+    const s = site();
+    if (!isSmtpConfigured(s.smtp || {})) return false;
+    await sendEmail(await createTransport(s.smtp), {from: s.smtp.fromAddress || s.contactEmail || 'noreply@example.com', fromName: s.smtp.fromName || s.title || 'Shop', ...msg});
+    return true;
+}
+
+// ---- Addresses ------------------------------------------------------------------------------
+
+/** A saved address, checked; null when it has no first line or town. */
+export function cleanAddress(a = {}) {
+    const out = {
+        id: /^[a-z0-9]{4,16}$/.test(String(a.id || '')) ? String(a.id) : Math.random().toString(36).slice(2, 10),
+        label: text(a.label, 40),
+        line1: text(a.line1, 160), line2: text(a.line2, 160), city: text(a.city, 100), region: text(a.region, 100),
+        postcode: text(a.postcode, 20).toUpperCase(),
+        country: COUNTRIES[String(a.country || '').toUpperCase()] ? String(a.country).toUpperCase() : 'GB'
+    };
+    return out.line1 && out.city ? out : null;
+}
+
+// ---- Making and confirming ---------------------------------------------------------------------
+
+/**
+ * A new account, inactive until its email link is clicked. Says the same thing whether or not the email is
+ * already in use (an account holder gets a "you already have an account" email instead), so the form cannot be
+ * used to find out who shops here.
+ *
+ * @returns {Promise<{sent: boolean}>}
+ */
+export async function register({name, email, password, phone = ''}, {link, shopTitle = 'the shop', log = console}) {
+    const addr = String(email || '').trim().toLowerCase();
+    const who = text(name, 120);
+    if (!who) throw bad(400, 'Your name, please.', {errors: {name: 'Your name.'}});
+    if (!isEmail(addr)) throw bad(400, 'An email address we can write to.', {errors: {email: 'An email address.'}});
+    if (typeof password !== 'string' || password.length < 8) throw bad(400, 'A password of 8 characters or more.', {errors: {password: '8 characters or more.'}});
+    const problems = await checkPassword(password, {email: addr, name: who}, {log});
+    if (problems.length) throw bad(400, problems.join(' '), {errors: {password: problems[0]}});
+    if (!mailReady()) throw bad(409, 'Accounts cannot be made just now - please check out as a guest.');
+
+    const had = await getUserByEmail(addr);
+    if (had) {
+        const pending = had.meta?.shop?.pending;
+        // An unconfirmed account that ran out: start again.
+        if (!had.isActive && pending && Date.parse(pending.until) < Date.now() && had.role === ROLE) {
+            await deleteUser(had.id);
+        } else {
+            if (had.isActive) {
+                await mail({to: addr, subject: `You already have an account with ${shopTitle}`,
+                    lines: [`Someone - probably you - tried to create an account with this email at ${shopTitle}. You already have one.`,
+                        'Sign in with your password, or choose "Forgotten your password?" to set a new one.'],
+                    link: link('account'), button: 'Sign in'}).catch(err => log.warn?.(`[shopping-cart] account email: ${err.message}`));
+            }
+            return {sent: true};
+        }
+    }
+    const token = randomBytes(24).toString('hex');
+    const user = await createUser({name: who, email: addr, password, role: ROLE, isActive: false,
+        meta: {shop: {phone: text(phone, 40), addresses: [], pending: {hash: sha(token), until: new Date(Date.now() + PENDING_FOR).toISOString()}}}});
+    try {
+        await mail({to: addr, subject: `Confirm your account with ${shopTitle}`,
+            lines: [`Hello ${who.split(' ')[0]} - thanks for creating an account with ${shopTitle}.`, 'Click below to confirm your email address. The link works for 48 hours.'],
+            link: link(`account/confirm?u=${user.id}&t=${token}`), button: 'Confirm my account'});
+    } catch (err) {
+        // An account nobody can confirm is no use: take it away again and say so.
+        await deleteUser(user.id).catch(() => {});
+        log.warn?.(`[shopping-cart] confirmation email to ${addr}: ${err.message}`);
+        throw bad(502, 'We could not send the confirmation email just now - please try again later, or check out as a guest.');
+    }
+    return {sent: true};
+}
+
+/** Click the link: the account is active. Returns the user, or throws. */
+export async function confirm(userId, token) {
+    const user = /^[0-9a-f-]{36}$/i.test(String(userId || '')) ? await getUserById(String(userId)) : null;
+    const pending = user?.meta?.shop?.pending;
+    if (user?.isActive && !pending) return user;   // already confirmed - a second click is fine
+    if (!user || !pending) throw bad(404, 'That link is not one we know - it may have been used already.');
+    const a = Buffer.from(sha(token));
+    const b = Buffer.from(String(pending.hash || ''));
+    if (a.length !== b.length || !timingSafeEqual(a, b)) throw bad(404, 'That link is not one we know - it may have been used already.');
+    if (Date.parse(pending.until) < Date.now()) throw bad(410, 'That link has run out - create your account again and we will send a new one.');
+    const {pending: _done, ...shop} = user.meta.shop;
+    return updateUser(user.id, {isActive: true, meta: {...user.meta, shop}});
+}
+
+/** "Forgotten your password?": core's reset token, with a link to the shop's own page. Always quiet about who exists. */
+export async function forgot(email, {link, shopTitle = 'the shop', log = console}) {
+    const user = isEmail(email) ? await getUserByEmail(String(email).trim().toLowerCase()) : null;
+    if (!user?.isActive || !mailReady()) return {sent: false};
+    const {token} = await issueResetToken(user.id);
+    await mail({to: user.email, subject: `Set a new password for ${shopTitle}`,
+        lines: [`Hello ${String(user.name || '').split(' ')[0] || 'there'} - here is the link to set a new password.`, 'If you did not ask for this, ignore this email; your password stays as it is.'],
+        link: link(`account/reset?t=${token}`), button: 'Set a new password'}).catch(err => log.warn?.(`[shopping-cart] reset email: ${err.message}`));
+    return {sent: true};
+}
+
+// ---- The signed-in customer ---------------------------------------------------------------------
+
+/** What the account page and checkouts show of a user. */
+export function describe(user) {
+    const shop = user?.meta?.shop || {};
+    return {name: user.name, email: user.email, phone: shop.phone || '', addresses: shop.addresses || [], customer: user.role === ROLE};
+}
+
+export async function updateDetails(userId, {name, phone, addresses}) {
+    const user = await getUserById(userId);
+    if (!user) throw bad(404, 'Your account is gone.');
+    const shop = {...(user.meta?.shop || {})};
+    const patch = {};
+    if (name !== undefined) { const n = text(name, 120); if (!n) throw bad(400, 'Your name, please.'); patch.name = n; }
+    if (phone !== undefined) shop.phone = text(phone, 40);
+    if (addresses !== undefined) shop.addresses = (Array.isArray(addresses) ? addresses : []).map(cleanAddress).filter(Boolean).slice(0, MAX_ADDRESSES);
+    return describe(await updateUser(user.id, {...patch, meta: {...(user.meta || {}), shop}}));
+}
+
+/**
+ * Delete my account. Only a customer's own (staff are removed by an admin), and only with the password. The
+ * orders stay - a record of the sale - with nothing linking them to a login.
+ */
+export async function remove(userId, password) {
+    const user = await getUserById(userId);
+    if (!user) throw bad(404, 'Your account is gone.');
+    if (user.role !== ROLE) throw bad(409, 'This is a staff account - an administrator removes it.');
+    const full = await getUserByEmail(user.email);
+    if (!full?.password || !(await validatePassword(String(password || ''), full.password))) throw bad(403, 'That password is not right.');
+    await deleteUser(user.id);
+}
+
+/** Orders placed with this email, newest first. */
+export const ordersFor = (orders, email) => orders.filter(o => String(o.data?.email || '').toLowerCase() === String(email || '').toLowerCase()
+    && o.data.status !== 'pending').sort((a, b) => String(b.meta?.createdAt).localeCompare(String(a.meta?.createdAt)));

package/plugins/shopping-cart/lib/commission.js

@@ -0,0 +1,90 @@
+/**
+ * Platform commission - a value on each sale, set per tenant (site) by the platform's super admin on the manager.
+ *
+ * The manager writes the site's rates to `config/commission.json` (the site's admins have no way to change it; the
+ * Cart only ever reads it). When an order is PAID the Cart works out that sale's commission and stores it on the
+ * order (`order.data.commission`), so every sale carries its own figure at the rate of its day - a later change of
+ * rate never rewrites the past. A refund marks it reversed. The customer never sees it.
+ *
+ *   config/commission.json  {rates: {default: {percent, fixed}, shop?: {…}, takeaway?: {…}, addons?: {…}}, updatedAt, by}
+ *   order.data.commission   {type, base, percent, fixed, amount, at, reversed?, reversedAt?}
+ *
+ * `percent` is of what the customer paid for the sale (the order total); `fixed` is minor units per sale. A free
+ * order (total 0) carries none. No file, or no rate for the type and no default: no commission.
+ *
+ * @module shopping-cart/lib/commission
+ */
+import fs from 'fs';
+import path from 'path';
+
+export const TYPES = {shop: 'Shop', takeaway: 'Takeaway', addons: 'Other add-ons'};
+const FILE = () => path.resolve('config', 'commission.json');
+
+/** A rate, checked: percent 0-100 (to 3 places), fixed whole minor units. Null when it says nothing. */
+export function cleanRate(r) {
+    if (!r || typeof r !== 'object') return null;
+    const percent = Number(r.percent);
+    const fixed = Number(r.fixed);
+    const out = {
+        percent: Number.isFinite(percent) && percent >= 0 && percent <= 100 ? Math.round(percent * 1000) / 1000 : 0,
+        fixed: Number.isInteger(fixed) && fixed >= 0 && fixed <= 1e6 ? fixed : 0
+    };
+    return out.percent || out.fixed ? out : null;
+}
+
+/** The rates as the manager wrote them, checked. */
+export function cleanRates(input) {
+    const rates = {};
+    for (const k of ['default', ...Object.keys(TYPES)]) {
+        const r = cleanRate(input?.rates?.[k]);
+        if (r) rates[k] = r;
+    }
+    return {rates, updatedAt: String(input?.updatedAt || ''), by: String(input?.by || '')};
+}
+
+/** Which kind of sale an order is: Takeaway's, another add-on's, or the Shop's own (downloads included). */
+export function orderType(order) {
+    const ref = String(order?.data?.ref || '');
+    if (ref.startsWith('takeaway:')) return 'takeaway';
+    if (ref) return 'addons';
+    return 'shop';
+}
+
+/** The rate for a kind of sale: its own, else the default, else none. */
+export const rateFor = (type, rates) => rates?.[type] || rates?.default || null;
+
+/**
+ * One sale's commission, at these rates. Null when there is none to charge.
+ * @param {{data: object}} order
+ * @param {object} rates - cleanRates().rates
+ * @param {string} [at] - when (ISO), for the record
+ */
+export function commissionFor(order, rates, at = new Date().toISOString()) {
+    const type = orderType(order);
+    const r = rateFor(type, rates);
+    const base = Number(order?.data?.total) || 0;
+    if (!r || base <= 0) return null;
+    const amount = Math.min(base, Math.round(base * r.percent / 100) + r.fixed);
+    return {type, base, percent: r.percent, fixed: r.fixed, amount, at};
+}
+
+/** "2% + 20p per sale" for people. */
+export function rateText(r, money = (n) => `£${(n / 100).toFixed(2)}`) {
+    if (!r) return 'None';
+    return [r.percent ? `${r.percent}%` : '', r.fixed ? money(r.fixed) : ''].filter(Boolean).join(' + ') + ' per sale';
+}
+
+// ---- Reading the file ---------------------------------------------------------------------------
+
+let cached = {mtime: -1, value: {rates: {}, updatedAt: '', by: ''}};
+
+/** The site's commission (read when the file changes - the manager may write it at any time, with no restart). */
+export function currentCommission() {
+    try {
+        const st = fs.statSync(FILE());
+        if (st.mtimeMs !== cached.mtime) cached = {mtime: st.mtimeMs, value: cleanRates(JSON.parse(fs.readFileSync(FILE(), 'utf8')))};
+    } catch {
+        cached = {mtime: -1, value: {rates: {}, updatedAt: '', by: ''}};
+    }
+    return cached.value;
+}