feat: add receipt dialog with drag-to-tear download - #56
Merged
Conversation
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Receipt” UX to the subscription page that renders a receipt-style view of the selected month’s non-amortized charges, animates a print-out effect, and enables downloading the torn-off receipt as a PNG (via html-to-image). This fits into the existing subscription dashboard tooling alongside the chart dialog and other subscription management controls.
Changes:
- Add new client component
ReceiptDialogwith print animation, drag-to-tear gesture, and PNG download. - Add
html-to-imagedependency for DOM-to-PNG export. - Add
receipt.*i18n strings for en/es/ja/zh locales.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
package.json |
Adds html-to-image dependency required for receipt PNG export. |
pnpm-lock.yaml |
Locks html-to-image@1.11.13 and updates snapshots accordingly. |
messages/en.json |
Adds English strings for the receipt dialog UI. |
messages/es.json |
Adds Spanish strings for the receipt dialog UI. |
messages/ja.json |
Adds Japanese strings for the receipt dialog UI. |
messages/zh.json |
Adds Chinese strings for the receipt dialog UI. |
components/subscription/receipt-dialog.tsx |
New receipt dialog implementation: rendering, animation, gesture handling, and download flow. |
app/[locale]/subscription/page.tsx |
Wires ReceiptDialog into the subscription page header actions and adjusts spacing/icon sizing classes. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Switch toPng to toBlob + object URL to avoid large base64 strings - Stabilize drag-to-tear handler via ref so latest downloadReceipt is called - Add aria-label to the icon-only receipt trigger Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Move amount formatter into the component so it follows the active locale's grouping and decimal separators, matching the rest of the receipt - Always render the actual generation date/time (refreshed on each open) instead of synthesizing the first-of-month for past periods; the billing period is still shown separately as #YYYY-MM Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…ubtotal - Mouse path now mirrors touch: when the cursor moves below the start point we reset the baseline so a subsequent upward motion starts tearing again from the current cursor instead of from the original mousedown - Subtotal line now includes the currency code so the downloaded PNG is unambiguous as a standalone document Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Defer URL.revokeObjectURL by 1s so Safari/WebKit can start the download before the blob URL is invalidated - Render each line in the display currency (using convertedAmount) so item amounts add up to the subtotal/total; the original amount + currency is shown as a small secondary note next to the name when it differs Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The motion value change event fires every frame while dragging; route the setState through a ref check so React only sees a state change when the threshold is actually crossed instead of on every pointer-move tick. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ReceiptDialogon the subscription page that prints a receipt-style summary of the month's actual charges (non-amortized), with a printing animation, barcode decoration, and totalshtml-to-image); the captured image keeps the torn zigzag edgereceipt.*strings to all four locales (en, es, ja, zh)Test plan
subflow-receipt-YYYY-MM.png🤖 Generated with Claude Code