Skip to content

[FE-34] Build QR Code Check-In Display component with expiry countdown #1013

@devwums

Description

@devwums

Problem

The check-in flow references QR codes but no component exists to display the generated QR code for a session. The feature is implemented on the backend but invisible on the frontend.

Proposed Solution

Create frontend/cntr/QRCheckIn/QRCheckInDisplay.tsx. Props: qrDataUrl: string, workspaceName: string, expiresAt: string. Renders the workspace name, the QR code as <img src={qrDataUrl}>, and a countdown to expiry using the CountdownTimer component from frontend/cntr/CountdownTimer/. When the timer reaches zero, replaces the QR code with "QR code expired — request a new one." All implementation must live inside frontend/cntr/.

Acceptance Criteria

  • File at frontend/cntr/QRCheckIn/QRCheckInDisplay.tsx
  • Renders <img src={qrDataUrl} alt="Check-in QR Code">
  • Workspace name displayed above the QR code
  • Uses CountdownTimer component from ../CountdownTimer/CountdownTimer
  • Shows expiry message when timer reaches zero (via onExpire callback)
  • Test in frontend/cntr/QRCheckIn/QRCheckInDisplay.test.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    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