@conduction/docusaurus-preset 3.43.0 → 3.44.0

package/src/components/PipeFit/__tests__/engine.test.js

@@ -0,0 +1,176 @@
+/**
+ * engine.test.js — the pipe-fit rules.
+ *
+ * The property everything rests on: every route dealt can actually be
+ * finished. The route is built from a working line and then scrambled,
+ * so a solution exists by construction, and the test proves it by
+ * finding one. An unsolvable puzzle on a clock reads as a broken game,
+ * and the player has no way to tell the difference.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, turn, step, connected, openings, clockMs, remaining, summarise,
+  PORTS, DEFAULTS,
+} = require('../engine.js');
+
+/**
+ * Solve a route by walking it: each piece has exactly one turn that
+ * meets what is carried in, so the line settles in one pass.
+ */
+function solve(state, now = 0) {
+  let s = state;
+  const finished = s.routes;
+  for (let i = 0; i < s.route.pieces.length; i++) {
+    /* Whatever the piece before it hands over. */
+    let carry = s.route.source;
+    for (let k = 0; k < i; k++) carry = openings(s.route.pieces[k]).right;
+
+    for (let t = 0; t < PORTS; t++) {
+      if (openings(s.route.pieces[i]).left === carry) break;
+      s = turn(s, i, now);
+      /* The last turn of a route replaces it with the next one, so
+         stop here: carrying on would solve a route nobody asked for,
+         which is how this walk first read as a failure. */
+      if (s.over || s.routes > finished) return s;
+    }
+  }
+  return s;
+}
+
+test('a route is dealt, out of true, with a source and a target', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.route.pieces.length, DEFAULTS.lengthStart);
+  assert.ok(s.route.source >= 0 && s.route.source < PORTS);
+  assert.ok(s.route.target >= 0 && s.route.target < PORTS);
+  assert.equal(connected(s.route), false, 'the route was dealt already finished');
+});
+
+test('every route dealt can be finished', () => {
+  /* Thirty seeds, several routes each: an unsolvable deal shows up as
+     one route in dozens, not as every route. */
+  for (let seed = 1; seed <= 30; seed++) {
+    let s = createGame({seed, now: 0});
+    for (let round = 0; round < 4; round++) {
+      const before = s.routes;
+      s = solve(s, round * 10);
+      assert.equal(s.routes, before + 1, `seed ${seed}: a route could not be finished`);
+    }
+  }
+});
+
+test('turning moves both openings together, which is the whole puzzle', () => {
+  const piece = {shape: {left: 0, right: 1}, turn: 0};
+  const before = openings(piece);
+  const after = openings({...piece, turn: 1});
+  assert.equal(after.left, (before.left + 1) % PORTS);
+  assert.equal(after.right, (before.right + 1) % PORTS);
+});
+
+test('a line is only connected when every join meets and it reaches the target', () => {
+  const route = {
+    source: 0,
+    target: 2,
+    pieces: [{shape: {left: 0, right: 1}, turn: 0}, {shape: {left: 1, right: 2}, turn: 0}],
+  };
+  assert.equal(connected(route), true);
+
+  const broken = {...route, pieces: [{...route.pieces[0], turn: 1}, route.pieces[1]]};
+  assert.equal(connected(broken), false, 'a broken join read as connected');
+
+  const wrongTarget = {...route, target: 0};
+  assert.equal(connected(wrongTarget), false, 'a line that ends nowhere read as connected');
+});
+
+test('finishing a route pays a bonus and deals the next one', () => {
+  let s = createGame({seed: 3, now: 0});
+  s = solve(s, 0);
+  assert.equal(s.routes, 1);
+  assert.ok(s.score >= DEFAULTS.pointsPerRoute);
+  assert.ok(s.route, 'no next route arrived');
+  assert.equal(connected(s.route), false);
+  assert.equal(s.lives, DEFAULTS.lives, 'finishing a route cost a life');
+});
+
+test('routes get longer, but never longer than a person will finish', () => {
+  let s = createGame({seed: 4, now: 0});
+  const lengths = [s.route.pieces.length];
+  for (let i = 0; i < 12 && !s.over; i++) {
+    s = solve(s, i * 10);
+    lengths.push(s.route.pieces.length);
+  }
+  assert.ok(Math.max(...lengths) > DEFAULTS.lengthStart, 'the routes never grew');
+  assert.ok(Math.max(...lengths) <= DEFAULTS.lengthMax, 'a route grew past its own ceiling');
+});
+
+test('turning is never punished, only the route that is never finished', () => {
+  let s = createGame({seed: 5, now: 0});
+  for (let i = 0; i < 20; i++) s = turn(s, i % s.route.pieces.length, 10);
+  assert.equal(s.lives, DEFAULTS.lives, 'fiddling with the connectors cost a life');
+  assert.ok(s.turns >= 20);
+});
+
+test('a connector that does not exist is ignored', () => {
+  const s = createGame({seed: 6, now: 0});
+  assert.equal(turn(s, 99, 0), s);
+  assert.equal(turn(s, -1, 0), s);
+});
+
+test('the payload arriving on an unfinished route costs a life', () => {
+  let s = createGame({seed: 7, now: 0});
+  const arrives = s.route.expiresAt;
+  s = step(s, arrives + 1);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'spilled');
+  assert.ok(s.route, 'no fresh route after the spill');
+});
+
+test('three spills end it, and nothing turns afterwards', () => {
+  let s = createGame({seed: 8, now: 0});
+  let t = 0;
+  for (let i = 0; i < DEFAULTS.lives; i++) {
+    t = s.route.expiresAt + 1;
+    s = step(s, t);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+  assert.equal(turn(s, 0, t + 10).turns, s.turns);
+  assert.equal(step(s, t + 10000).lives, 0);
+});
+
+test('nothing spills before the payload is due', () => {
+  const s = createGame({seed: 9, now: 0});
+  assert.equal(step(s, s.route.expiresAt - 1).lives, DEFAULTS.lives);
+});
+
+test('the clock tightens with the score, down to a workable floor', () => {
+  const fresh = createGame({seed: 10, now: 0});
+  assert.equal(clockMs(fresh), DEFAULTS.clockStartMs);
+  assert.ok(clockMs({...fresh, score: 80}) < DEFAULTS.clockStartMs);
+  assert.equal(clockMs({...fresh, score: 9000}), DEFAULTS.clockFloorMs);
+});
+
+test('the countdown runs full to empty and no further', () => {
+  const s = createGame({seed: 11, now: 0});
+  assert.equal(remaining(s, 0), 1);
+  assert.equal(remaining(s, DEFAULTS.clockStartMs * 3), 0);
+});
+
+test('the same seed deals the same routes, a different one does not', () => {
+  const shape = (seed) => {
+    const s = createGame({seed, now: 0});
+    return `${s.route.source}>${s.route.pieces.map((p) => `${p.shape.left}${p.shape.right}:${p.turn}`).join(',')}>${s.route.target}`;
+  };
+  assert.equal(shape(21), shape(21));
+  assert.notEqual(shape(21), shape(22));
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {routes: 5, turns: 34};
+  assert.match(summarise(s, 'en'), /5 routes connected · 34 turns/);
+  assert.match(summarise(s, 'nl'), /5 koppelingen gelegd · 34 keer gedraaid/);
+});

package/src/components/PipeFit/engine.js

@@ -0,0 +1,178 @@
+/**
+ * Pipe fit — the rules, with no DOM and no clock of its own.
+ *
+ * Integriq's game. A record is leaving one system for another and the
+ * route between them is half built. Turn each connector until the line
+ * runs end to end, before the payload arrives and finds a gap.
+ *
+ * A route is a row of connectors, each with an opening on its left and
+ * its right. Turning one moves both openings together, so fixing the
+ * join on one side can break the join on the other: that is the whole
+ * puzzle, and it is exactly what integrating two systems feels like.
+ *
+ * Time and randomness are injected; the component owns the clock.
+ */
+
+/* The three heights a connector can open at. A join works when the
+   right-hand opening of one meets the left-hand opening of the next. */
+export const PORTS = 3;
+
+export const DEFAULTS = {
+  lives: 3,
+  lengthStart: 3,
+  lengthMax: 6,
+  /* A route grows every few clears rather than every one: a puzzle
+     that gets longer each time outruns the clock before it gets
+     interesting. */
+  growEvery: 2,
+  clockStartMs: 26000,
+  clockFloorMs: 11000,
+  rampPerPoint: 55,
+  pointsPerTurn: 1,
+  pointsPerRoute: 20,
+};
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function random() {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function clockMs(state) {
+  return Math.max(state.cfg.clockFloorMs, state.cfg.clockStartMs - state.score * state.cfg.rampPerPoint);
+}
+
+/**
+ * A connector is `{shape, turn}`. `shape` is the pair of openings as
+ * built, `turn` is how many times it has been turned; the openings
+ * that count are the shape rotated by the turn.
+ */
+export function openings(piece) {
+  return {
+    left: (piece.shape.left + piece.turn) % PORTS,
+    right: (piece.shape.right + piece.turn) % PORTS,
+  };
+}
+
+/** Does the whole route line up, source to consumer? */
+export function connected(route) {
+  if (!route || !route.pieces.length) return false;
+  let carry = route.source;
+  for (const piece of route.pieces) {
+    const {left, right} = openings(piece);
+    if (left !== carry) return false;
+    carry = right;
+  }
+  return carry === route.target;
+}
+
+/**
+ * Build a route that is solvable, then turn the pieces out of true.
+ *
+ * Built from a working line rather than at random: a route assembled
+ * by chance can be unsolvable, and an unsolvable puzzle on a clock
+ * reads to the player as a broken game.
+ */
+function deal(state, now, length) {
+  const source = Math.floor(state.random() * PORTS);
+  let carry = source;
+  const pieces = [];
+
+  for (let i = 0; i < length; i++) {
+    const right = Math.floor(state.random() * PORTS);
+    /* The shape is stored as if unturned, so that turning it back is
+       always possible. */
+    pieces.push({shape: {left: carry, right}, turn: 0});
+    carry = right;
+  }
+
+  const route = {source, target: carry, pieces, startedAt: now, expiresAt: now + clockMs(state)};
+
+  /* Now scramble. Keep scrambling until it is actually out of true,
+     or a route could be dealt already solved. */
+  let scrambled = route;
+  for (let attempt = 0; attempt < 8; attempt++) {
+    scrambled = {
+      ...route,
+      pieces: route.pieces.map((p) => ({...p, turn: Math.floor(state.random() * PORTS)})),
+    };
+    if (!connected(scrambled)) break;
+  }
+  return {...state, route: scrambled};
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    route: null,
+    score: 0,
+    lives: cfg.lives,
+    routes: 0,
+    turns: 0,
+    last: null,
+    over: false,
+  };
+  return deal(base, now, cfg.lengthStart);
+}
+
+export function remaining(state, now) {
+  if (!state.route) return 0;
+  const total = state.route.expiresAt - state.route.startedAt;
+  if (total <= 0) return 0;
+  return Math.min(1, Math.max(0, (state.route.expiresAt - now) / total));
+}
+
+function nextLength(state) {
+  const grown = state.cfg.lengthStart + Math.floor((state.routes + 1) / state.cfg.growEvery);
+  return Math.min(state.cfg.lengthMax, grown);
+}
+
+/**
+ * Turn one connector.
+ *
+ * Completing the route scores and deals the next one. Turning is never
+ * punished: the mistake this game is about is the route that was never
+ * finished, not the fiddling on the way there.
+ */
+export function turn(state, index, now) {
+  if (state.over || !state.route) return state;
+  if (!Number.isInteger(index) || index < 0 || index >= state.route.pieces.length) return state;
+
+  const pieces = state.route.pieces.map((p, i) => (i === index ? {...p, turn: (p.turn + 1) % PORTS} : p));
+  const route = {...state.route, pieces};
+  const turned = {...state, route, turns: state.turns + 1, score: state.score + state.cfg.pointsPerTurn};
+
+  if (!connected(route)) return {...turned, last: {result: 'turned', at: now}};
+
+  const cleared = {
+    ...turned,
+    score: turned.score + turned.cfg.pointsPerRoute,
+    routes: turned.routes + 1,
+    last: {result: 'connected', at: now},
+  };
+  return deal(cleared, now, nextLength(cleared));
+}
+
+/** The payload arrives; an unfinished route costs a life. */
+export function step(state, now) {
+  if (state.over || !state.route) return state;
+  if (now < state.route.expiresAt) return state;
+
+  const lives = state.lives - 1;
+  const hit = {...state, lives, last: {result: 'spilled', at: now}, over: lives <= 0};
+  return hit.over ? {...hit, route: null} : deal(hit, now, state.route.pieces.length);
+}
+
+/** The line that goes on the game-over card and into the post. */
+export function summarise(state, locale = 'en') {
+  const n = (v) => Number(v || 0).toLocaleString(locale);
+  return locale === 'nl'
+    ? `${n(state.routes)} koppelingen gelegd · ${n(state.turns)} keer gedraaid`
+    : `${n(state.routes)} routes connected · ${n(state.turns)} turns`;
+}

package/src/components/Reconcile/Reconcile.jsx

@@ -0,0 +1,240 @@
+/**
+ * <Reconcile />
+ *
+ * Shillinq's game. The bank statement is in, the invoices are open,
+ * and the month is closing. Match each payment to the invoice it
+ * settles. One line on the statement settles nothing at all: flag that
+ * one instead.
+ *
+ * Three moves, not two, and that is the point. Paying the odd line out
+ * is how money leaves quietly. Flagging a genuine payment costs too,
+ * because a bookkeeper who cries wolf at every line is one nobody
+ * listens to.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <Reconcile />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: a payment is picked up with a button and dropped on
+ * an invoice with a button, so nothing needs a drag. Every amount and
+ * reference is read out, and the countdown is announced.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, match, flag, step, remaining, summarise} from './engine';
+import styles from './Reconcile.module.css';
+
+const GAME_ID = 'reconcile';
+const TICK_MS = 100;
+
+export default function Reconcile({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [held, setHeld] = useState(null);
+  const [left, setLeft] = useState(1);
+  const gameRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const endedRef = useRef(false);
+
+  const running = Boolean(game) && !game.over;
+  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+  const money = (amount) => new Intl.NumberFormat(locale, {style: 'currency', currency: 'EUR', maximumFractionDigits: 0}).format(amount);
+
+  const begin = useCallback(() => {
+    endedRef.current = false;
+    startedAtRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+    const fresh = createGame({seed: Math.floor(Math.random() * 2 ** 31), now: 0});
+    gameRef.current = fresh;
+    setGame(fresh);
+    setHeld(null);
+    setLeft(1);
+  }, []);
+
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const t = now();
+      const next = step(gameRef.current, t);
+      gameRef.current = next;
+      setGame(next);
+      setLeft(remaining(next, t));
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, [running]);
+
+  useEffect(() => {
+    if (!game || !game.over || endedRef.current) return;
+    endedRef.current = true;
+    if (typeof window === 'undefined') return;
+    window.dispatchEvent(new CustomEvent('connext:gameend', {
+      detail: {
+        id: GAME_ID,
+        won: false,
+        score: game.score,
+        summary: summarise(game, locale),
+        title: translate({id: 'preset.reconcile.over.title', message: 'The books do not balance.', description: 'Headline on the game-over dialog after a reconciliation run'}),
+        subtitle: translate({id: 'preset.reconcile.over.subtitle', message: 'Three of those, and somebody finds out in April.', description: 'Subtitle on the game-over dialog after a reconciliation run'}),
+      },
+    }));
+  }, [game, locale]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const onReplay = (e) => { if (e.detail && e.detail.id === GAME_ID) begin(); };
+    window.addEventListener('connext:gamereplay', onReplay);
+    return () => window.removeEventListener('connext:gamereplay', onReplay);
+  }, [begin]);
+
+  const drop = useCallback((invoiceId) => {
+    if (!gameRef.current || gameRef.current.over || !held) return;
+    const t = now();
+    const next = match(gameRef.current, held, invoiceId, t);
+    gameRef.current = next;
+    setGame(next);
+    setHeld(null);
+    setLeft(remaining(next, t));
+  }, [held]);
+
+  const raise = useCallback((paymentId) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = flag(gameRef.current, paymentId, t);
+    gameRef.current = next;
+    setGame(next);
+    setHeld(null);
+    setLeft(remaining(next, t));
+  }, []);
+
+  const sheet = game ? game.sheet : null;
+  const last = game ? game.last : null;
+  const pct = Math.round(left * 100);
+
+  return (
+    <section className={[styles.rc, className].filter(Boolean).join(' ')} aria-labelledby="reconcile-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.reconcile.eyebrow', message: 'Mini-game', description: 'Eyebrow above the reconciliation game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="reconcile-title">
+            {translate({id: 'preset.reconcile.title', message: 'Match the bank', description: 'Name of the Shillinq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.reconcile.lede', message: 'Every payment belongs to an invoice, except the one that belongs to nobody. Match what fits and flag what does not, before the month closes.', description: 'One-line explanation of the reconciliation rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.reconcile.hud.score', message: 'Score {score}', description: 'Score readout on the reconciliation HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.reconcile.hud.lives', message: 'Corrections left {lives}', description: 'Remaining-lives readout on the reconciliation HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      {sheet ? (
+        <>
+          <div className={styles.sheet}>
+            <div className={styles.column}>
+              <h4 className={styles.columnHead}>
+                {translate({id: 'preset.reconcile.statement', message: 'On the statement', description: 'Heading above the bank payments'})}
+              </h4>
+              <ul className={styles.list}>
+                {sheet.payments.map((payment) => (
+                  <li key={payment.id} className={payment.done ? styles.rowDone : styles.row}>
+                    <button
+                      type="button"
+                      className={[styles.pick, held === payment.id && styles.picked].filter(Boolean).join(' ')}
+                      onClick={() => setHeld(held === payment.id ? null : payment.id)}
+                      disabled={!running || payment.done}
+                      aria-pressed={held === payment.id}>
+                      <span className={styles.amount}>{money(payment.amount)}</span>
+                      <span className={styles.ref}>{payment.reference}</span>
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.flag}
+                      onClick={() => raise(payment.id)}
+                      disabled={!running || payment.done}
+                      aria-label={translate(
+                        {id: 'preset.reconcile.flagOne', message: 'Flag {amount}, reference {reference}, as belonging to nobody', description: 'Accessible label for the flag button on one payment'},
+                        {amount: money(payment.amount), reference: payment.reference},
+                      )}>
+                      {translate({id: 'preset.reconcile.flag', message: 'Flag', description: 'Short label on the button that flags a payment as fraudulent'})}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className={styles.column}>
+              <h4 className={styles.columnHead}>
+                {translate({id: 'preset.reconcile.invoices', message: 'Open invoices', description: 'Heading above the open invoices'})}
+              </h4>
+              <ul className={styles.list}>
+                {sheet.invoices.map((invoice) => (
+                  <li key={invoice.id} className={invoice.settled ? styles.rowDone : styles.row}>
+                    <button
+                      type="button"
+                      className={styles.drop}
+                      onClick={() => drop(invoice.id)}
+                      disabled={!running || invoice.settled || !held}
+                      aria-label={translate(
+                        {id: 'preset.reconcile.settle', message: 'Settle invoice {reference} for {amount} with the payment you picked up', description: 'Accessible label for an invoice button'},
+                        {reference: invoice.reference, amount: money(invoice.amount)},
+                      )}>
+                      <span className={styles.amount}>{money(invoice.amount)}</span>
+                      <span className={styles.ref}>{invoice.reference}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div
+            className={styles.clock}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={pct}
+            aria-label={translate({id: 'preset.reconcile.clock', message: 'Time before the month closes', description: 'Accessible name of the reconciliation countdown'})}>
+            <div className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')} style={{width: `${pct}%`}} />
+          </div>
+        </>
+      ) : (
+        <p className={styles.idle}>
+          {translate({id: 'preset.reconcile.idle', message: 'A statement, a stack of invoices, and one line that fits neither.', description: 'Placeholder before the reconciliation game starts'})}
+        </p>
+      )}
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.reconcile.restart', message: 'Restart', description: 'Button that restarts the reconciliation game'})
+            : translate({id: 'preset.reconcile.start', message: 'Open the statement', description: 'Button that starts the reconciliation game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'matched' && translate({id: 'preset.reconcile.feedback.matched', message: 'Settled.', description: 'Feedback after a correct match'})}
+          {last && last.result === 'caught' && translate({id: 'preset.reconcile.feedback.caught', message: 'That is the one. It was never going anywhere.', description: 'Feedback after catching the fraudulent line'})}
+          {last && last.result === 'mismatch' && translate({id: 'preset.reconcile.feedback.mismatch', message: 'That payment is not for that invoice.', description: 'Feedback after matching the wrong invoice'})}
+          {last && last.result === 'paidFraud' && translate({id: 'preset.reconcile.feedback.paidFraud', message: 'You just paid the line that belongs to nobody.', description: 'Feedback after matching the fraudulent payment to an invoice'})}
+          {last && last.result === 'flaggedGood' && translate({id: 'preset.reconcile.feedback.flaggedGood', message: 'That one was real. Flag everything and nobody reads your flags.', description: 'Feedback after flagging a genuine payment'})}
+          {last && last.result === 'monthClosed' && translate({id: 'preset.reconcile.feedback.closed', message: 'The month closed with lines still open.', description: 'Feedback after the clock runs out'})}
+          {last && last.result === 'sheet' && translate({id: 'preset.reconcile.feedback.sheet', message: 'Statement clear. Here comes the next one.', description: 'Feedback after clearing a whole sheet'})}
+          {!last && translate({id: 'preset.reconcile.hint', message: 'Pick up a payment, then click the invoice it settles. The one that fits nothing gets flagged.', description: 'Hint under the reconciliation sheet'})}
+        </p>
+      </footer>
+    </section>
+  );
+}