Uiux/redemption flow

[martinshub-tech]

Closes #628

Overview

This PR introduces the time-token redemption flow, providing a surface for users to present a QR code and short code to the supplier. It features an expiring countdown, a copyable code, and a supplier-side confirmation state.

Acceptance Criteria Addressed

• Clear, reviewable contract: Implemented RedeemTokenModal in src/components/dashboard/redeem-token-modal.tsx with defined props and clear state management (QR -> Confirming -> Success).
• Integrated across page.tsx: Added the modal integration to src/app/dashboard/slots/[id]/page.tsx in the "Auxiliary Booking CTAs" area for users to access the token handoff flow.
• Security & Authorization: The QR code and token short code state are managed locally and only exposed upon user interaction.
• Failure, retry, timeout, concurrency: Handled by a 5-minute local expiration timer with visual feedback. Edge cases like clipboard copying failure are handled with try/catch.
• Regression coverage & Tests: Focused tests covering all modal states, interaction flows, accessibility (ESC closure), and edge cases are included in src/components/dashboard/redeem-token-modal.test.tsx.
• Compatibility: No breaking changes to existing APIs or storage.

Security and Failure-Mode Handling

• Clipboard Failures: The token copy action safely falls back and logs to the console if the Clipboard API is unavailable or denied by the browser without crashing the UI.
• State Cleanup: The setInterval countdown is automatically cleared when the modal is closed or the countdown reaches zero, preventing memory leaks and rogue state updates.

Regression Coverage

Focused tests cover:

• Happy paths for rendering the modal and simulating the supplier scan transition.
• The ESC key accessibility boundary to gracefully unmount the dialog.
• The Clipboard API simulation for backward compatibility verification.

Compatibility & Migration Considerations

• No migrations required. The new RedeemTokenModal component is purely additive and isolated, preserving the existing routing and layout paradigms in page.tsx.

Validation

• Passed npm run lint
• Test coverage checks passed
• Responsive boundaries and accessibility (axe/WCAG 2.1 AA) confirmed

[drips-wave]

@martinshub-tech Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits