Skip to content

Add invoice payment celebration sharing #140

@Kingsman-99

Description

@Kingsman-99

Label: complexity: high
Points: 200

Description

After fully funding an invoice, there is no way to celebrate or share the achievement. This issue adds a "Share Achievement" flow that appears when a payment completes an invoice, generating a shareable image card with the invoice ID, total amount, and a "Fully Funded!" badge for social media.

Technical Context

Involves invoice/[id]/page.tsx and a new src/components/AchievementCard.tsx. Detect when invoice.status transitions to Released after a payment. Render achievement card as a styled div and use html2canvas to export as PNG. Share via Web Share API or download. Add html2canvas to package.json.

Acceptance Criteria

  • Achievement card appears when invoice transitions to Released
  • Card shows invoice ID, total amount, and "Fully Funded!" badge
  • "Share" button uses Web Share API on mobile
  • "Download" button saves card as PNG via html2canvas
  • html2canvas added to package.json
  • Mobile responsive — works on 375px screens
  • No TypeScript errors

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions