domma-cms 1.6.33 → 1.6.35

package/plugins/shopping-cart/plugin.js

@@ -28,7 +28,11 @@ import {formatMoney} from './public/lib/money.js';
 import {publicProduct, byShelf} from './public/lib/products.js';
 import {cartRegistry} from './lib/extensions.js';
 import {SAMPLES} from './lib/samples.js';
-import {cleanLines, priceBasket} from './lib/pricing.js';
+import * as accounts from './lib/accounts.js';
+import {dateIn, rangeFor, salesCsv, salesReport} from './lib/sales.js';
+import {TYPES as COMMISSION_TYPES, currentCommission, rateFor, rateText} from './lib/commission.js';
+import {getUserById} from '../../server/services/users.js';
+import {cleanCharges, cleanCustomLines, cleanLines, priceBasket} from './lib/pricing.js';
 import {badge, summarise} from './lib/summary.js';
 import * as pay from './lib/payments.js';
 import {
@@ -58,7 +62,7 @@ const receiptPath = (s, order) => `${s.shopPath}/order/${order.id}?t=${order.dat
 const fail = (reply, status, error, extra = {}) => reply.code(status).send({error, ...extra});
 
 /** The quote, from a request body, at today's prices. */
-async function quoteFor(body, settings, {allowUnlisted = false} = {}) {
+async function quoteFor(body, settings, {allowUnlisted = false, custom = [], charges = null} = {}) {
     const lines = cleanLines(body?.lines);
     const ids = new Set(lines.map(l => l.productId));
     const products = new Map();
@@ -73,7 +77,8 @@ async function quoteFor(body, settings, {allowUnlisted = false} = {}) {
         email: String(body?.customer?.email || '').slice(0, 200),
         allowUnlisted
     };
-    const quote = await priceBasket({lines, products, settings, input, handlers: cartRegistry().handlers()});
+    const quote = await priceBasket({lines, products, settings, input, handlers: cartRegistry().handlers(),
+        custom: cleanCustomLines(custom), charges: cleanCharges(charges)});
     return {quote, input};
 }
 
@@ -200,6 +205,38 @@ export default async function shoppingCart(fastify, options) {
         };
     });
 
+    /**
+     * The Sales report: ?range=today|week|last7|month|lastmonth|last30|year, or ?from=&to= (dates), and ?by=day|week|month.
+     * Dates are the shop's (settings.timeZone, Europe/London unless set).
+     */
+    const salesRange = (q, s) => {
+        const today = dateIn(Date.now(), s.timeZone || 'Europe/London');
+        const isDate = (d) => /^\d{4}-\d{2}-\d{2}$/.test(String(d || ''));
+        let {from, to} = isDate(q.from) && isDate(q.to) ? {from: q.from, to: q.to} : rangeFor(String(q.range || 'last30'), today);
+        if (from > to) [from, to] = [to, from];
+        return {from, to, today};
+    };
+    /** The platform's commission for this site, for people: each kind of sale and its rate. Read-only here. */
+    const commissionInfo = (s) => {
+        const {rates, updatedAt} = currentCommission();
+        const money = (n) => formatMoney(n, s.currency);
+        return {set: Object.keys(rates).length > 0, updatedAt,
+            rates: Object.entries(COMMISSION_TYPES).map(([k, label]) => ({key: k, label, text: rateText(rateFor(k, rates), money)}))};
+    };
+
+    fastify.get('/sales', can('read'), async (request) => {
+        const [orders, s] = await Promise.all([allOrders(), liveSettings()]);
+        const {from, to, today} = salesRange(request.query || {}, s);
+        const by = ['day', 'week', 'month'].includes(request.query?.by) ? request.query.by : 'day';
+        return {...salesReport(orders, {from, to, by, timeZone: s.timeZone || 'Europe/London'}), today, currency: s.currency, commission: commissionInfo(s)};
+    });
+    fastify.get('/sales.csv', can('read'), async (request, reply) => {
+        const [orders, s] = await Promise.all([allOrders(), liveSettings()]);
+        const {from, to} = salesRange(request.query || {}, s);
+        return reply.type('text/csv; charset=utf-8').header('Content-Disposition', `attachment; filename="sales-${from}-to-${to}.csv"`)
+            .header('Cache-Control', 'no-store').send(salesCsv(orders, {from, to, timeZone: s.timeZone || 'Europe/London'}));
+    });
+
     fastify.get('/count', can('read'), async () => {
         const [orders, settings, products] = await Promise.all([allOrders(), liveSettings(), allProducts()]);
         return badge(orders, settings, Date.now(), products);
@@ -326,32 +363,37 @@ export default async function shoppingCart(fastify, options) {
      * through them first; only when they say yes is the order marked refunded.
      * An offline order is marked only - the money goes back the way it came.
      */
-    fastify.post('/orders/:id/refund', can('manage'), async (request, reply) => {
-        const o = await getOrder(request.params.id);
-        if (!o) return fail(reply, 404, 'No such order.');
+    /** Refund an order in full (see above). Throws {status, message}. */
+    async function refundOrder(id, {restock = false, note = '', viaProvider = true, by = 'admin'} = {}) {
+        const bad = (status, message) => Object.assign(new Error(message), {status});
+        const o = await getOrder(id);
+        if (!o) throw bad(404, 'No such order.');
         const d = o.data;
-        if (!['paid', 'fulfilled'].includes(d.status)) return fail(reply, 409, 'Only a paid order can be refunded.');
+        if (!['paid', 'fulfilled'].includes(d.status)) throw bad(409, 'Only a paid order can be refunded.');
         const s = await liveSettings();
-        const {restock = false, note = '', viaProvider = true} = request.body || {};
         let how = 'marked refunded';
         try {
             if (viaProvider && d.provider === 'stripe' && d.paymentRef) {
-                if (!s.stripeSecretKey) return fail(reply, 409, 'Stripe is not set up any more - refund it in Stripe, then mark it refunded here.');
+                if (!s.stripeSecretKey) throw bad(409, 'Stripe is not set up any more - refund it in Stripe, then mark it refunded here.');
                 await pay.stripeRefund({secretKey: s.stripeSecretKey, paymentIntent: d.paymentRef});
                 how = 'refunded through Stripe';
             } else if (viaProvider && d.provider === 'paypal' && d.paymentRef) {
-                if (!s.paypalClientId || !s.paypalSecret) return fail(reply, 409, 'PayPal is not set up any more - refund it in PayPal, then mark it refunded here.');
+                if (!s.paypalClientId || !s.paypalSecret) throw bad(409, 'PayPal is not set up any more - refund it in PayPal, then mark it refunded here.');
                 await pay.paypalRefund({creds: {clientId: s.paypalClientId, secret: s.paypalSecret, mode: s.paypalMode}, captureId: d.paymentRef});
                 how = 'refunded through PayPal';
             }
         } catch (err) {
-            return fail(reply, err.status || 502, `Not refunded: ${err.message}`);
+            throw bad(err.status || 502, err.status === 409 ? err.message : `Not refunded: ${err.message}`);
         }
+        const {order, from} = await moveOrder(o.id, 'refunded', {by, note: [how, String(note || '')].filter(Boolean).join(' - '), restock: Boolean(restock)});
+        announceMove(order, from, 'refunded');
+        return {order, how};
+    }
+
+    fastify.post('/orders/:id/refund', can('manage'), async (request, reply) => {
+        const {restock = false, note = '', viaProvider = true} = request.body || {};
         try {
-            const {order, from} = await moveOrder(o.id, 'refunded', {by: request.user?.name || request.user?.email || 'admin',
-                note: [how, String(note || '')].filter(Boolean).join(' - '), restock: Boolean(restock)});
-            announceMove(order, from, 'refunded');
-            return {order, how};
+            return await refundOrder(request.params.id, {restock, note, viaProvider, by: request.user?.name || request.user?.email || 'admin'});
         } catch (err) {
             return fail(reply, err.status || 500, err.message);
         }
@@ -373,7 +415,8 @@ export default async function shoppingCart(fastify, options) {
         return {
             settings: maskSettings(s),
             webhookUrl: `${siteBase(request)}/api/plugins/shopping-cart/stripe/webhook`,
-            stripeMode: pay.stripeMode(s.stripeSecretKey)
+            stripeMode: pay.stripeMode(s.stripeSecretKey),
+            commission: commissionInfo(s)
         };
     });
 
@@ -407,6 +450,78 @@ export default async function shoppingCart(fastify, options) {
         }
     });
 
+    // ---- Customer accounts (lib/accounts.js) --------------------------------------------
+    //
+    // Optional (settings.accounts). Made, confirmed and described here; signed in, refreshed and given a new
+    // password by core's own /api/auth routes. A signed-in customer sends core's Bearer token.
+
+    // A boolean, the reply sent on the side: awaiting a Fastify reply resolves (empty) once it is sent, so
+    // `if (await fail(...))` would carry on and run the route anyway.
+    const accountsOff = async (reply) => {
+        if ((await liveSettings()).accounts) return false;
+        fail(reply, 404, 'Customer accounts are not switched on.');
+        return true;
+    };
+    /** `rest` -> an absolute address under the shop, for emails. */
+    const shopLink = async (request) => {
+        const s = await liveSettings();
+        const base = siteBase(request);
+        return {s, link: (rest) => `${base}${s.shopPath}/${rest}`};
+    };
+    const accountFail = (reply, err) => fail(reply, err.status || 500, err.message, err.errors ? {errors: err.errors} : {});
+
+    fastify.post('/account/register', {config: {rateLimit: {max: 5, timeWindow: '10 minutes'}}}, async (request, reply) => {
+        if (await accountsOff(reply)) return undefined;
+        const {s, link} = await shopLink(request);
+        try {
+            return await accounts.register(request.body || {}, {link, shopTitle: s.shopTitle || 'the shop', log: request.log});
+        } catch (err) { return accountFail(reply, err); }
+    });
+
+    fastify.post('/account/confirm', {config: {rateLimit: {max: 20, timeWindow: '10 minutes'}}}, async (request, reply) => {
+        try {
+            const user = await accounts.confirm(request.body?.u, request.body?.t);
+            return {confirmed: true, email: user.email};
+        } catch (err) { return accountFail(reply, err); }
+    });
+
+    fastify.post('/account/forgot', {config: {rateLimit: {max: 5, timeWindow: '10 minutes'}}}, async (request, reply) => {
+        if (await accountsOff(reply)) return undefined;
+        const {s, link} = await shopLink(request);
+        await accounts.forgot(request.body?.email, {link, shopTitle: s.shopTitle || 'the shop', log: request.log}).catch(() => null);
+        // The same answer whoever asked: the form must not tell anyone who has an account.
+        return {ok: true};
+    });
+
+    /** The signed-in customer: details, saved addresses and the orders placed with their email. */
+    fastify.get('/account', {preHandler: [authenticate]}, async (request, reply) => {
+        const user = await getUserById(request.user.id);
+        if (!user || !user.isActive) return fail(reply, 401, 'Please sign in again.');
+        const s = await liveSettings();
+        const mine = accounts.ordersFor(await allOrders(), user.email).slice(0, 50);
+        const orders = [];
+        for (const o of mine) {
+            orders.push({id: o.id, number: o.data.number, status: o.data.status, total: o.data.total, currency: o.data.currency,
+                placedAt: o.meta?.createdAt, receipt: receiptPath(s, o), lines: (o.data.lines || []).map(l => `${l.qty} × ${l.name}${l.variantName ? ` (${l.variantName})` : ''}`),
+                parts: await registry.accountParts(o, {settings: s})});
+        }
+        return {...accounts.describe(user), orders, accounts: Boolean(s.accounts)};
+    });
+
+    fastify.put('/account', {preHandler: [authenticate]}, async (request, reply) => {
+        try {
+            const b = request.body || {};
+            return await accounts.updateDetails(request.user.id, {name: b.name, phone: b.phone, addresses: b.addresses});
+        } catch (err) { return accountFail(reply, err); }
+    });
+
+    fastify.delete('/account', {preHandler: [authenticate], config: {rateLimit: {max: 5, timeWindow: '10 minutes'}}}, async (request, reply) => {
+        try {
+            await accounts.remove(request.user.id, request.body?.password);
+            return {deleted: true};
+        } catch (err) { return accountFail(reply, err); }
+    });
+
     // ---- Shoppers --------------------------------------------------------------------
 
     fastify.get('/catalogue', async (request) => {
@@ -546,28 +661,39 @@ export default async function shoppingCart(fastify, options) {
      * (it comes back in on.paid) and its own page to come back to. Throws {status, message}.
      *
      * @param {object} p
-     * @param {{productId: string, qty: number}[]} p.lines
-     * @param {{name: string, email: string}} p.customer
+     * @param {{productId: string, qty: number}[]} [p.lines]
+     * @param {object[]} [p.custom]   - lines the extension priced (pricing.js cleanCustomLines): Takeaway's dishes
+     * @param {object[]} [p.charges]  - [{label, amount}] standing in for delivery (Takeaway's delivery fee)
+     * @param {'none'|'collect'|'deliver'} [p.delivery] - 'deliver' needs `address`; neither is ever posted
+     * @param {object} [p.address]
+     * @param {string} [p.note]
+     * @param {string} [p.code]      - a discount code (Shopping Cart Pro)
+     * @param {boolean} [p.ownEmails] - the extension writes to the shopper itself: other extensions' shopper emails stay quiet
+     * @param {string} [p.payNote]    - offline only: what the receipt says about paying, instead of the shop's offline instructions
+     * @param {{name: string, email: string, phone?: string}} p.customer
      * @param {string} [p.provider] - one of the Shop's methods; the first when left out
      * @param {string} [p.ref]      - the extension's reference, 64 characters at most
      * @param {string} [p.returnTo] - a path on this site ('/admin/#/...'), where the shopper comes back to
      * @param {string} [p.base]     - this site's origin, from the extension's request
      */
-    async function startCheckout({lines, customer, provider = '', ref = '', returnTo = '', base = ''} = {}) {
+    async function startCheckout({lines = [], custom = [], charges = null, delivery = 'none', address = null, note = '', code = '',
+        customer, provider = '', ref = '', returnTo = '', base = '', ownEmails = false, payNote = ''} = {}) {
         const bad = (status, message) => Object.assign(new Error(message), {status});
         const s = await liveSettings();
-        const {quote} = await quoteFor({lines, customer}, s, {allowUnlisted: true});
+        const {quote} = await quoteFor({lines, customer, code, address}, s, {allowUnlisted: true, custom, charges});
         if (!quote.lines.length) throw bad(400, 'Nothing to buy.');
         if (quote.problems.length) throw bad(409, quote.problems.map(p => p.message).join(' '));
         if (quote.requiresShipping) throw bad(400, 'This checkout is only for things that are not posted.');
-        const checkout = cleanCheckout({customer}, {needsAddress: false});
+        const deliver = delivery === 'deliver';
+        const checkout = cleanCheckout({customer, address, note}, {needsAddress: deliver, countries: s.countries});
         if (Object.keys(checkout.errors).length) throw bad(400, Object.values(checkout.errors)[0]);
         const methods = methodsOf(s).map(m => m.id);
         const via = quote.total === 0 ? 'free' : (provider || methods[0] || '');
         if (via !== 'free' && !methods.includes(via)) throw bad(409, 'The Shop has no way to take payment set up yet.');
         const origin = /^https?:\/\/[^/\s]+$/i.test(base) ? base.replace(/\/+$/, '') : siteBase(null);
         const back = /^\/(?!\/)/.test(String(returnTo)) ? `${origin}${returnTo}` : '';
-        const order = await createOrder({quote, checkout, provider: via, delivery: 'none', ref, returnTo: back});
+        const order = await createOrder({quote, checkout, provider: via, delivery: deliver ? 'ship' : delivery === 'collect' ? 'collect' : 'none',
+            code: String(code || '').slice(0, 60), ref, returnTo: back, ownEmails: ownEmails === true, payNote});
         registry.emit('checkout', order);
         const opened = await openPayment(order, s, via, origin);
         if (!opened) throw bad(400, 'Choose how to pay.');
@@ -581,6 +707,14 @@ export default async function shoppingCart(fastify, options) {
     }
 
     registry.services.startCheckout = startCheckout;
+    /** What startCheckout would charge, without ordering: a basket page's totals. Same arguments. */
+    registry.services.quote = async ({lines = [], custom = [], charges = null, code = '', customer = {}, address = null} = {}) => {
+        const s = await liveSettings();
+        const {quote} = await quoteFor({lines, customer, code, address}, s, {allowUnlisted: true, custom, charges});
+        return shopperQuote(quote, s);
+    };
+    /** Refund an order in full, through its provider first (Takeaway's Reject). Throws {status, message}. */
+    registry.services.refund = (id, opts = {}) => refundOrder(id, {by: 'shop', ...opts});
     registry.services.checkOrder = checkOrder;
     registry.services.paymentMethods = async () => methodsOf(await liveSettings()).map(m => ({id: m.id, label: m.label}));
     // An extension looks after its own (unlisted) products: made, changed and removed through these.

package/plugins/shopping-cart/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "shopping-cart",
   "displayName": "Shopping Cart",
-  "version": "1.2.0",
+  "version": "1.6.0",
   "tier": "free",
   "description": "Sell from your site: products with options, stock and pictures, a storefront and a cart that follows shoppers from page to page, and checkout with Stripe, PayPal or payment offline. Orders to fulfil in the sidebar, refunds from the order.",
   "author": "Domma CMS",
@@ -45,7 +45,7 @@
     ],
     "views": {
       "plugin-shopping-cart": {
-        "entry": "shopping-cart/admin/views/shop.js?v=1.2.0",
+        "entry": "shopping-cart/admin/views/shop.js?v=1.6.0",
         "exportName": "shopView"
       }
     }

package/plugins/shopping-cart/plugin.public.js

@@ -6,6 +6,8 @@
  *   /shop/<slug>           one product
  *   /shop/cart             the basket and checkout, one page
  *   /shop/order/<id>?t=    a shopper's receipt
+ *   /shop/account          a customer's account: sign in, create one, details, addresses, orders (settings.accounts)
+ *   /shop/account/confirm?u=&t=  /shop/account/reset?t=   the links emailed to them
  *
  * Like the Blog, the pages are answered from ONE onRequest hook matching the
  * address as it is saved NOW, so moving the shop needs no restart. Every page
@@ -16,7 +18,7 @@ import {fileURLToPath} from 'url';
 import {renderBlogPage} from '../../server/services/renderer.js';
 import {parseMarkdown} from '../../server/services/markdown.js';
 import {byShelf, safeImage} from './public/lib/products.js';
-import {cartHtml, esc, productHtml, receiptHtml, scriptJson, storefrontHtml} from './lib/render.js';
+import {accountHtml, cartHtml, esc, productHtml, receiptHtml, scriptJson, storefrontHtml} from './lib/render.js';
 import {allProducts, getOrder, liveSettings, publicOrder, tokenOk} from './lib/shop.js';
 import {cartRegistry} from './lib/extensions.js';
 
@@ -31,6 +33,8 @@ export function matchShopPath(pathname, base) {
     try { parts = pathname.slice(base.length + 1).split('/').map(decodeURIComponent); } catch { return null; }
     if (parts.length === 1 && parts[0] === '') return {name: 'slash', params: {}};
     if (parts.length === 1 && (parts[0] === 'cart' || parts[0] === 'checkout' || parts[0] === 'basket')) return {name: 'cart', params: {}};
+    // Before products: a product called "account" would otherwise take the page.
+    if (parts[0] === 'account' && parts.length <= 2 && ['', 'confirm', 'reset'].includes(parts[1] || '')) return {name: 'account', params: {view: parts[1] || 'account'}};
     if (parts.length === 2 && parts[0] === 'order' && /^[\w-]{8,64}$/.test(parts[1])) return {name: 'order', params: {id: parts[1]}};
     if (parts.length === 1 && /^[a-z0-9-]{1,80}$/.test(parts[0])) return {name: 'product', params: {slug: parts[0]}};
     return null;
@@ -112,6 +116,18 @@ export default async function shopPublic(fastify) {
             });
         },
 
+        async account(request, reply, s, {view}) {
+            if (!s.accounts) return null;
+            return send(reply, request, s, {
+                page: 'account',
+                body: accountHtml({settings: s, view}),
+                title: view === 'reset' ? 'Set a new password' : view === 'confirm' ? 'Confirm your account' : `Your account - ${s.shopTitle || 'Shop'}`,
+                urlPath: `${s.shopPath}/account`,
+                noindex: true,
+                extra: {account: {view}}
+            });
+        },
+
         async order(request, reply, s, {id}) {
             let entry = await getOrder(id);
             if (!entry || !tokenOk(entry, request.query?.t)) return null;

package/plugins/shopping-cart/public/account.js

@@ -0,0 +1,277 @@
+/**
+ * Customer accounts in the browser (loaded by cart.js on the account pages, and on a receipt that offers to make
+ * one): sign in, create an account, forgotten password; signed in - details, saved addresses, orders (with what
+ * extensions add beside each: Takeaway's Reorder), sign out, delete my account. The confirm and reset links
+ * emailed to customers land on /account/confirm and /account/reset.
+ *
+ * @module shopping-cart/public/account
+ */
+import {formatMoney} from './lib/money.js';
+import {COUNTRIES, STATUS_PUBLIC} from './lib/orders.js';
+import {account, me, signIn, signOut, signedIn} from './lib/session.js';
+
+const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const el = (html) => { const t = document.createElement('template'); t.innerHTML = html.trim(); return t.content.firstElementChild; };
+const params = new URLSearchParams(location.search);
+const config = (() => { try { return JSON.parse(document.getElementById('dm-shop-config')?.textContent || '{}'); } catch { return {}; } })();
+const shopPath = config.shopPath || '/shop';
+const dmy = (iso) => { const d = new Date(iso); return Number.isNaN(d.getTime()) ? '' : `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`; };
+
+/** A form's error line. */
+const say = (box, msg, good = false) => { box.textContent = msg; box.hidden = !msg; box.classList.toggle('is-good', good); };
+async function busy(btn, fn) {
+    const was = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = 'One moment…';
+    try { return await fn(); } finally { btn.disabled = false; btn.textContent = was; }
+}
+
+// ---- Signed out: sign in, create, forgotten -----------------------------------------------------
+
+function signedOutView(body, {email = '', notice = ''} = {}) {
+    body.innerHTML = '';
+    const view = el(`<div class="shop-acc">
+  ${notice ? `<p class="shop-acc-note is-good">${esc(notice)}</p>` : ''}
+  <div class="shop-seg" role="tablist"><button type="button" data-tab="in" class="is-on">Sign in</button><button type="button" data-tab="new">Create an account</button></div>
+  <form class="shop-acc-form" data-form="in" novalidate>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <label class="shop-field"><span>Password</span><input name="password" type="password" autocomplete="current-password" required></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Sign in</button>
+    <button type="button" class="shop-linkbtn" data-forgot>Forgotten your password?</button>
+  </form>
+  <form class="shop-acc-form" data-form="new" novalidate hidden>
+    <p class="shop-muted">Your details are filled in when you check out, and your orders are listed here. You can still check out as a guest.</p>
+    <label class="shop-field"><span>Name</span><input name="name" autocomplete="name" required maxlength="120"></label>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <label class="shop-field"><span>Password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" required minlength="8"></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Create my account</button>
+  </form>
+  <form class="shop-acc-form" data-form="forgot" novalidate hidden>
+    <p class="shop-muted">We will email you a link to set a new password.</p>
+    <label class="shop-field"><span>Email</span><input name="email" type="email" autocomplete="email" required></label>
+    <p class="shop-co-error" data-err hidden></p>
+    <button type="submit" class="shop-drawer-go">Send the link</button>
+    <button type="button" class="shop-linkbtn" data-back>Back to sign in</button>
+  </form>
+</div>`);
+    body.appendChild(view);
+    const show = (key) => {
+        for (const f of view.querySelectorAll('[data-form]')) f.hidden = f.dataset.form !== key;
+        for (const b of view.querySelectorAll('[data-tab]')) b.classList.toggle('is-on', b.dataset.tab === key);
+        view.querySelector(`[data-form="${key}"] input`)?.focus();
+    };
+    for (const f of view.querySelectorAll('input[name="email"]')) f.value = email;
+    view.querySelectorAll('[data-tab]').forEach(b => b.addEventListener('click', () => show(b.dataset.tab)));
+    view.querySelector('[data-forgot]').addEventListener('click', () => { view.querySelector('[data-form="forgot"] [name="email"]').value = view.querySelector('[data-form="in"] [name="email"]').value; show('forgot'); });
+    view.querySelector('[data-back]').addEventListener('click', () => show('in'));
+
+    view.querySelector('[data-form="in"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        const err = f.querySelector('[data-err]');
+        say(err, '');
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => signIn(f.email.value.trim(), f.password.value));
+            await render();
+        } catch (ex) {
+            say(err, ex.status === 401 || ex.status === 400 ? 'That email and password do not match an account - or the account is not confirmed yet.' : ex.message);
+        }
+    });
+    view.querySelector('[data-form="new"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        const err = f.querySelector('[data-err]');
+        say(err, '');
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => account.register({name: f.name.value, email: f.email.value.trim(), password: f.password.value}));
+            f.innerHTML = `<p class="shop-acc-note is-good">Nearly there - we have emailed <strong>${esc(f.email.value.trim())}</strong> a link to confirm your account. It works for 48 hours.</p>`;
+        } catch (ex) { say(err, ex.message); }
+    });
+    view.querySelector('[data-form="forgot"]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        try {
+            await busy(f.querySelector('button[type="submit"]'), () => account.forgot(f.email.value.trim()));
+            f.innerHTML = '<p class="shop-acc-note is-good">If there is an account with that email, a link to set a new password is on its way.</p>';
+        } catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+    if (params.get('join') === '1') show('new');
+}
+
+// ---- Signed in: details, addresses, orders ------------------------------------------------------
+
+const addressText = (a) => [a.line1, a.line2, a.city, a.postcode].filter(Boolean).join(', ');
+
+function signedInView(body, me) {
+    let addresses = me.addresses.map(a => ({...a}));
+    body.innerHTML = '';
+    const countries = Object.entries(COUNTRIES).map(([c, n]) => `<option value="${c}">${esc(n)}</option>`).join('');
+    const view = el(`<div class="shop-acc is-in">
+  <p class="shop-muted">Signed in as <strong>${esc(me.email)}</strong> · <button type="button" class="shop-linkbtn" data-out>Sign out</button></p>
+  <section class="shop-acc-card"><h2>Your orders</h2><div data-orders></div></section>
+  <section class="shop-acc-card"><h2>Your details</h2>
+    <form data-details novalidate>
+      <label class="shop-field"><span>Name</span><input name="name" autocomplete="name" maxlength="120"></label>
+      <label class="shop-field"><span>Phone</span><input name="phone" type="tel" autocomplete="tel" maxlength="40"></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-pay-btn">Save</button>
+    </form>
+  </section>
+  <section class="shop-acc-card"><h2>Saved addresses</h2><ul class="shop-acc-addrs" data-addrs></ul>
+    <button type="button" class="shop-linkbtn" data-add>Add an address</button>
+    <form class="shop-acc-addr" data-addr-form hidden novalidate>
+      <input type="hidden" name="id">
+      <label class="shop-field"><span>Label <em>optional</em></span><input name="label" maxlength="40" placeholder="Home, Work…"></label>
+      <label class="shop-field"><span>Address</span><input name="line1" autocomplete="address-line1" maxlength="160"></label>
+      <label class="shop-field"><span class="sr-only">Address line 2</span><input name="line2" autocomplete="address-line2" maxlength="160" placeholder="Flat, building (optional)"></label>
+      <label class="shop-field"><span>Town or city</span><input name="city" autocomplete="address-level2" maxlength="100"></label>
+      <label class="shop-field"><span>Postcode</span><input name="postcode" autocomplete="postal-code" maxlength="20"></label>
+      <label class="shop-field"><span>Country</span><select name="country">${countries}</select></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-pay-btn">Save address</button> <button type="button" class="shop-linkbtn" data-cancel>Cancel</button>
+    </form>
+  </section>
+  <details class="shop-acc-card shop-acc-danger"><summary>Delete my account</summary>
+    <form data-delete novalidate><p class="shop-muted">Your sign-in and saved details go. Orders you have placed stay with the shop as a record of the sale.</p>
+      <label class="shop-field"><span>Your password, to confirm</span><input name="password" type="password" autocomplete="current-password"></label>
+      <p class="shop-co-error" data-err hidden></p>
+      <button type="submit" class="shop-linkbtn is-danger">Delete my account</button></form>
+  </details>
+</div>`);
+    body.appendChild(view);
+    const details = view.querySelector('[data-details]');
+    details.name.value = me.name;
+    details.phone.value = me.phone;
+
+    // Orders, newest first, with what extensions add (Takeaway: Reorder).
+    view.querySelector('[data-orders]').innerHTML = me.orders.length ? `<ul class="shop-acc-orders">${me.orders.map(o => `<li>
+  <a href="${esc(o.receipt)}" class="shop-acc-order"><strong>#${esc(o.number)}</strong><span>${esc(dmy(o.placedAt))}</span><span>${esc(STATUS_PUBLIC[o.status] || o.status)}</span><span>${esc(formatMoney(o.total, o.currency))}</span></a>
+  <small>${esc(o.lines.slice(0, 4).join(', '))}${o.lines.length > 4 ? '…' : ''}</small>
+  ${o.parts.map(p => `<div class="shop-acc-ext" data-ext="${esc(p.owner)}">${p.html}</div>`).join('')}</li>`).join('')}</ul>`
+        : '<p class="shop-muted">No orders yet - everything you order with this email shows here.</p>';
+
+    const addrList = view.querySelector('[data-addrs]');
+    const addrForm = view.querySelector('[data-addr-form]');
+    const drawAddresses = () => {
+        addrList.innerHTML = addresses.length ? addresses.map(a => `<li data-id="${esc(a.id)}"><span>${a.label ? `<strong>${esc(a.label)}</strong> ` : ''}${esc(addressText(a))}</span>
+  <span><button type="button" class="shop-linkbtn" data-edit>Edit</button> · <button type="button" class="shop-linkbtn" data-remove>Remove</button></span></li>`).join('') : '<li class="shop-muted">None yet.</li>';
+    };
+    drawAddresses();
+    const saveAll = async (patch) => {
+        const r = await account.save(patch);
+        addresses = r.addresses.map(a => ({...a}));
+        drawAddresses();
+        return r;
+    };
+    const openAddr = (a = {}) => {
+        addrForm.hidden = false;
+        for (const k of ['id', 'label', 'line1', 'line2', 'city', 'postcode']) addrForm.elements[k].value = a[k] || '';
+        addrForm.country.value = a.country || 'GB';
+        addrForm.line1.focus();
+    };
+    view.querySelector('[data-add]').addEventListener('click', () => openAddr());
+    view.querySelector('[data-cancel]').addEventListener('click', () => { addrForm.hidden = true; });
+    addrList.addEventListener('click', async (e) => {
+        const id = e.target.closest('[data-id]')?.dataset.id;
+        if (!id) return;
+        if (e.target.closest('[data-edit]')) openAddr(addresses.find(a => a.id === id));
+        if (e.target.closest('[data-remove]')) await saveAll({addresses: addresses.filter(a => a.id !== id)}).catch(err => alert(err.message));
+    });
+    addrForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const a = Object.fromEntries(['id', 'label', 'line1', 'line2', 'city', 'postcode', 'country'].map(k => [k, addrForm.elements[k].value.trim()]));
+        const err = addrForm.querySelector('[data-err]');
+        if (!a.line1 || !a.city) return say(err, 'The first line of the address and the town.');
+        const next = a.id ? addresses.map(x => (x.id === a.id ? {...x, ...a} : x)) : [...addresses, a];
+        try { await saveAll({addresses: next}); addrForm.hidden = true; say(err, ''); } catch (ex) { say(err, ex.message); }
+    });
+
+    details.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const err = details.querySelector('[data-err]');
+        try { await busy(details.querySelector('button'), () => account.save({name: details.name.value, phone: details.phone.value})); say(err, 'Saved.', true); }
+        catch (ex) { say(err, ex.message); }
+    });
+    view.querySelector('[data-out]').addEventListener('click', async () => { await signOut(); render({notice: 'You are signed out.'}); });
+    view.querySelector('[data-delete]').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const f = e.currentTarget;
+        if (!confirm('Delete your account? This cannot be undone.')) return;
+        try { await account.remove(f.password.value); await signOut(); render({notice: 'Your account has been deleted.'}); }
+        catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+}
+
+// ---- The emailed links --------------------------------------------------------------------------
+
+async function confirmView(body) {
+    try {
+        const r = await account.confirm(params.get('u'), params.get('t'));
+        document.querySelector('.shop-account h1').textContent = 'Your account';
+        signedOutView(body, {email: r.email, notice: 'Thank you - your account is confirmed. Sign in to carry on.'});
+    } catch (err) {
+        document.querySelector('.shop-account h1').textContent = 'That link did not work';
+        body.innerHTML = `<p class="shop-co-error">${esc(err.message)}</p><p><a class="shop-linkbtn" href="${esc(shopPath)}/account">Sign in or create an account</a></p>`;
+    }
+}
+
+function resetView(body) {
+    body.innerHTML = '';
+    const f = el(`<form class="shop-acc-form" novalidate>
+  <label class="shop-field"><span>New password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" minlength="8"></label>
+  <label class="shop-field"><span>Again</span><input name="again" type="password" autocomplete="new-password"></label>
+  <p class="shop-co-error" data-err hidden></p>
+  <button type="submit" class="shop-drawer-go">Set my password</button>
+</form>`);
+    body.appendChild(f);
+    f.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const err = f.querySelector('[data-err]');
+        if (f.password.value.length < 8) return say(err, '8 characters or more, please.');
+        if (f.password.value !== f.again.value) return say(err, 'The two passwords are not the same.');
+        try {
+            await busy(f.querySelector('button'), () => account.reset(params.get('t') || '', f.password.value));
+            document.querySelector('.shop-account h1').textContent = 'Your account';
+            signedOutView(body, {notice: 'Your password is set - sign in with it now.'});
+        } catch (ex) { say(err, ex.status === 400 && /token/i.test(ex.message) ? 'That link has run out or was used already - ask for a new one.' : ex.message); }
+    });
+}
+
+// ---- The receipt: "save your details" -------------------------------------------------------------
+
+function joinBox(box) {
+    if (signedIn()) return;
+    box.hidden = false;
+    box.innerHTML = `<h2>Save your details for next time</h2>
+<p class="shop-muted">Create an account with <strong>${esc(box.dataset.email)}</strong> - your details are filled in next time, and this order is listed in it.</p>
+<form novalidate><label class="shop-field"><span>Choose a password <em>8 characters or more</em></span><input name="password" type="password" autocomplete="new-password" minlength="8"></label>
+<p class="shop-co-error" data-err hidden></p><button type="submit" class="shop-pay-btn">Create my account</button></form>`;
+    const f = box.querySelector('form');
+    f.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        try {
+            await busy(f.querySelector('button'), () => account.register({name: box.dataset.name || box.dataset.email.split('@')[0], email: box.dataset.email, password: f.password.value}));
+            f.innerHTML = `<p class="shop-acc-note is-good">We have emailed you a link to confirm your account.</p>`;
+        } catch (ex) { say(f.querySelector('[data-err]'), ex.message); }
+    });
+}
+
+// ---- Start ---------------------------------------------------------------------------------
+
+async function render({notice = ''} = {}) {
+    const body = document.querySelector('[data-acc-body]');
+    if (!body) return;
+    const view = document.querySelector('[data-shop-account]').dataset.shopAccount;
+    if (view === 'confirm') return confirmView(body);
+    if (view === 'reset') return resetView(body);
+    let mine = null;
+    try { mine = await me(); } catch { /* signed out below */ }
+    if (mine) signedInView(body, mine);
+    else signedOutView(body, {notice});
+}
+
+const join = document.querySelector('[data-shop-join]');
+if (join) joinBox(join);
+render();