[JOY (JOY)]

Refs #96

Part A of #96: the public money flows move onto the #95 design kit. Parts B (/me) and C (admin) are separate PRs under the same issue.

What changed

• Donate form (campaign page sidebar): kit Fields, larger tabular amount input, 44 px checkbox row with its hint linked by aria-describedby, lg primary button.
• Donation payment page /donations/[code] (signed-in and guest): page header with the amount and the donation code, a status bar (pulsing dot only under motion-safe), the VietQR block, a success panel when received, and kit callouts for "QR expired" and "campaign closed".
• Guest not-found page for /donations/[code]: icon, larger copy, kit buttons.
• Pledge page /campaigns/[slug]/pledge: two columns on desktop (form left, "Đạt mục tiêu mới thanh toán" terms card right; on phones the card comes first), tier choice cards with a clear chosen state, sold-out as a danger badge, address fieldset and "Thông tin hiển thị" group; the open-pledge and earlier-pledge notes are callouts; "Hủy cam kết" uses btn-danger (it had two text colours).
• Pledge payment page /me/pledges/[code]: same header pattern with a status badge, the shared VietQR block, state notes as callouts, details as a labelled card.
• VietQR block (components/TransferDetails.tsx, new): one component for both payment pages. QR in a framed tile, a details list where the transfer content row is tinted and set in mono (a wrong one cannot be matched), the footnote at body size.
• Copy and save buttons: 44 px targets and icons. Copy buttons say what they copy to screen readers ("Sao chép số tài khoản"). "Lưu ảnh QR" announces its failure text.

New kit files only, no existing kit file changed:

• components/ui/Callout.tsx: a toned message box with neutral, info, success, warning and danger tones, an optional title and an icon. Text is at least 9:1 on every tint.
• components/ui/PledgeStatusBadge.tsx: the pledge status as a kit Badge, replacing the rounded-full pill. Part B can reuse it.

No behaviour change

Every data call, server action, redirect, notFound, form field (name, required, maxLength, inputMode, autoComplete, defaults) and copy value is unchanged. The role="status" regions are unchanged too. The only added attributes are aria-describedby and a screen-reader name on the copy buttons.

Some wording is new or reworded with the same meaning:

• Headings: "Chuyển khoản bằng VietQR", "Thông tin hiển thị", "Chi tiết cam kết".
• Labels: "Số tiền ủng hộ/cam kết", "Mã ủng hộ/cam kết", "Trạng thái".
• The QR caption on the pledge page.
• The terms card, which repeats what the form footnote already says.

The 🎉 on the received panel is now a check icon.

No route loading.tsx, on purpose. These routes call notFound() and redirect() (sign-in, guest token). A loading.tsx would stream the page shell first, and the 404 or 307 would then go out as a 200. Loading states are therefore the submit buttons' pending label ("Đang xử lý…") and the live status bar. Error states are the action's inline alert, the global error page, the donation not-found page, and the per-state callouts.

Evidence

• tsc --noEmit, eslint, prettier: clean. vitest: 72 files, 918 tests pass.
• Lighthouse accessibility, mobile and desktop: 100 on all 8 scorable pages:
  • donate form
  • donation waiting, received and QR expired
  • pledge new and pledge change
  • pledge payment due and pledged
• The donation not-found page returns 404 by design, so Lighthouse will not score it. axe-core WCAG 2.1 AA plus best-practice finds 0 violations on it, at 375 px and 1440 px.
• An independent design and a11y review (fresh-context subagent) found no behaviour change. Its findings are fixed in 9f54d51:
  • reduced motion on the status dot
  • a live region on "Lưu ảnh QR"
  • the mobile grid of the terms card
  • the footnote size
  • restored "Vì vậy" wording
  • tab order on the not-found page
  • a duplicate caption

Screenshots

Taken on a seeded local stack: DOS.Me dev migrations, the #95 seed (3 give and 3 back campaigns), plus a pending donation and an ended album campaign whose pledges finalize_ended_campaigns moved to payment_due. The guest row is the real flow, end to end: the donate form is submitted without signing in and lands on the guest status page. For "received" and "QR expired", one donation each was set directly in the local DB.

Page / state	Desktop 1440	Mobile 375
Donate form (campaign page)	full page	full page
Donate form, server error shown	full page	full page
Guest donation status (real flow)	full page	full page
Donation waiting, QR	full page	full page
Donation received	full page	full page
Donation QR expired	full page	full page
Donation not openable (404)	full page	full page
Pledge, new	full page	full page
Pledge, change open pledge (shipping tier)	full page	full page
Pledge payment due, QR	full page	full page
Pledge, pledged (before end)	full page	full page

Follow-ups (not in this PR)

• The error message of the shared ActionForm (components/forms.tsx) shows under the submit button, far from the field it is about. That component is shared with /me and admin, so changing it belongs to the kit, not part A.
• Callout re-draws a few line icons locally because components/ui/icons.tsx is an existing kit file. They can move there when the kit is next edited.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: f45dd4bf-3a54-4820-92d5-17a5954149b5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[dos]

⏱️ Code Review completed (12 eligible files · 61,004 chars · 3 model call(s) · 3 PR unit(s))

Whole diff with bounded context at base 31f0313 / head e2b5877.

✅ CLEAN_PASS: Complete diff reviewed

Context investigation was bounded to the explicitly requested snapshot paths.

[dos]

⏱️ Code Review completed (12 eligible files · 61,130 chars · 2 model call(s) · 3 PR unit(s))

Whole diff with bounded context at base 31f0313 / head 9f54d51.

✅ CLEAN_PASS: Complete diff reviewed

Context investigation was bounded to the explicitly requested snapshot paths.

[JOY (JOY)]

PO acceptance (part A of #96): merge at 9f54d51. CI green, DOS Code Review passed, vitest 918/918, Lighthouse a11y 100 on all 8 scorable pages, independent review confirmed no behaviour change; add-only kit files. Accepted: no route loading.tsx (keeps 404/307 semantics).