Skip to content

qrdisplay for all users in their profiles

Issue: Centralize and Enhance QR Code Generation

Issue Summary

Provision of a centralized, reusable, and enhanced QR code generation component to be used across the application, improving scannability and user features like downloading and sharing.

Problem Statement

The current implementation of QR code generation is fragmented across multiple pages (e.g., QRGenerationPage.tsx). This duplication leads to:

  • Inconsistent UI/UX: QR codes displayed with varying styles and sizes across the app.
  • Maintenance Overhead: Changes to QR logic must be applied in multiple files.
  • Visibility Issues: Current sizes (h-52/w-52) are often too small for reliable scanning on mobile devices.
  • Missing Features: Users lack the ability to download or share their digital ID QR codes directly.

Proposed Solution

  1. Centralize Logic: Create a reusable QRCodeDisplay component in src/components/ that handles generation, styling, downloading, and sharing.
  2. Standardize Size: Increase default display size to 256px with responsive classes (h-64 on mobile, sm:h-80 on desktop).
  3. Add Functionality: Integrate "Download" and "Share" buttons using the Web Share API and Canvas conversion.
  4. Refactor: Replace local QR logic in volunteer and profile pages with the new component.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: QR Code Generation

Given a user has a valid unique identifier (UUID)
 When the QRCodeDisplay component is mounted with that UUID
 Then a high-resolution QR code should be generated on a canvas
  And the UUID should be displayed as a readable string below the code

Scenario 2: Responsive Scannability

Given the QR code is viewed on different devices
 When the screen size changes from mobile to desktop
 Then the QR code image should scale from 256px to 320px automatically

Scenario 3: Download & Share

Given a generated QR code is visible
 When the user clicks the "Download" button
 Then a PNG file named "qrcode-[id].png" should be saved to their device

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Successful Render Valid UUID 1. Mount component QR Canvas appears High
TC-002 Download Utility Canvas loaded 1. Click Download File download starts High
TC-003 Share Fallback Non-supported browser 1. Click Share Show "Sharing not supported" toast Med

Unit Test Requirements

Components/Functions to Test:

Module/Component Function/Hook Test Cases to Cover
QRCodeDisplay.tsx useEffect (QR Gen) TC-001
QRCodeDisplay.tsx downloadQRCode TC-002

Test Assertions Required:

  • Renders correctly with initial state
  • Handles user input correctly
  • Triggers download on button click
  • Shows success/error toasts for sharing

Implementation Details

Files to Change

File Path Action Purpose
src/components/QRCodeDisplay.tsx Create New centralized component
src/pages/volunteer/QRGenerationPage.tsx Modify Switch to centralized component
src/pages/profile/ProfilePage.tsx Modify Integrate QR display in user profile

Technical Considerations

  • Uses qrcode for canvas-based rendering.
  • Implements navigator.share for native mobile sharing.
  • Tailwind gradients for premium "Digital ID" aesthetic.

Testing Strategy

Manual Testing

Test Environment:

  • Browser: Chrome (Desktop/Mobile)
  • User Role: Volunteer, Patient

Manual Test Steps:

  1. Navigate to QR Generation page.
  2. Verify larger QR code is displayed.
  3. Successfully download the QR code image.
  4. Test sharing functionality on a mobile device.

Definition of Done

  • Reusable component created
  • QR code size increased for better scannability
  • Download and Share actions working
  • Applied to Volunteer QR Generation page
  • Responsive layout verified
  • i18n support included
  • TypeScript types defined
  • Linting and formatting passed