Consent Manager Account Block for React

Edit HISTORY, the receipt as it stood when the page opened, newest first. Each line has an ISO at, a choice (on or off), the item it concerns (or an empty item with a note for a policy notice), the policy version and where it was made. The switches start from replaying that log, oldest first, so you never type the current state twice. ITEMS and PURPOSES hold the switches and their groups, three per purpose here so every panel is the same height.

The choices and the receipt lines: a switch adds a line to this page's log and says "in this demo", and nothing reaches Alderpath. To make it real, send each change to your consent service from setChoice, add the line only when it answers with the server's own instant and receipt id, and keep the log append-only on the server: a receipt that can be edited proves nothing. The two files are real, made in the browser from the log; the sample subscriber id and receipt number are made up.

The PDF is a plain one-page-per-42-lines document in ASCII: the receipt number, the policy version, the pseudonymous subscriber id, every choice as it stands and then the history newest first. The JSON holds the same facts as data: choices, history, lastChange, policy, receipt and subject. Saving after a switch includes that switch's new line, and the status line says how many entries went in. Nothing is uploaded.

Because a consent receipt is a record, not a draft. Turning a switch back off is a choice of its own and gets its own line, with its own instant, so the log shows both and the person can prove when each was made. Withdrawing is one switch, the same effort as agreeing.

One purpose is open at a time and one always stays open, so the panel never changes height. Each purpose's count ("2 of 3 on") follows its switches, and the header counts the optional ones ("3 of 9 optional on"). Tab moves between the purpose headers; arrow keys are not wired between them.

Each switch is named for its purpose and item ("Analytics: Link clicks"), the receipt is a named, focusable scroll region holding a real ordered list, and a choice is a word with an icon ("On", "Off"), never a color. The status line is a polite live region present from the start. Instants keep their order in a right-to-left page. On a phone the foot with the status line and the two save buttons stays pinned to the bottom of the screen.