Skip to content

Exit Attendance: Implement "Thank You" Screen

Vandana reddy Balannagari requested to merge fix/exit-volunteer into develop

Merge Request

Overview

This MR streamlines the volunteer exit flow by introducing a dedicated "Thank You" screen once a volunteer's attendance has been marked with a logout flag. It also cleans up unused certificate-related logic and improves test stability for the core App component.

What does this MR do and why?

Previously, volunteers were left on the QR generation screen even after their exit attendance was marked. This MR implements a better UX by:

  1. Detecting the "exited" state from the backend.
  2. Replacing the QR scanner with a minimalist, appreciative "Thank You" message.
  3. Removing the "Download Certificate" functionality as it is no longer required in this flow.
  4. Increasing test timeouts to resolve intermittent CI/CD failures during the push process.

Changes Made

  • Modified src/pages/volunteer/VolunteerCampFlow.tsx: Added conditional rendering to show the Appreciation screen when is_exited is true. Removed "Download Certificate" and "Refresh Status" buttons.
  • Modified src/pages/volunteer/QRGenerationPage.tsx: Updated the "Check Status" logic to recognize the exited state and trigger a success notification.
  • Modified src/types/api.ts: Added is_exited to the VolunteerCampSignupStatus type.
  • Modified src/locales/en/translations.json: Added new appreciation messages and cleaned up unused keys.
  • Modified src/App.tsx & tests/App.test.tsx: Removed obsolete routes and increased Vitest timeout for the App component.
  • Added/Modified Tests: Updated VolunteerCampFlow.test.tsx, QRGenerationPage.test.tsx, and TranslationValidation.test.tsx to cover the new flow.

Technical Details

  • State Management: The component now reacts to the is_exited boolean from the signup-status API.
  • Cleanup: Removed the CertificatePage entirely to reduce bundle size and technical debt.
  • UX: Uses smooth conditional rendering to transition from the "Exited" attendance check to the final "Thank You" screen.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

closes #359

  • Related to the backend update for is_exited status logic.

Screenshots or Screen Recordings

image

Before After
QR scanner remains active after logout Clean "Thank You for Your Service" message

How to Set Up and Validate Locally

  1. Pull this branch
  2. Launch App: 
    bun dev
  3. Simulate Exit:
    • As a volunteer, go to the active camp flow.
    • On the QR generation page, trigger a status check where the backend returns is_exited: true.
  4. Expected Behavior:
    • The app should show a success toast: "Your exit attendance has been marked successfully!"
    • The screen should transition to the "Thank You" layout.
    • All certificate-related UI elements should be absent.

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Volunteer state is is_exited: true Renders "Thank You" screen ✅
Volunteer clicks "Refresh Status" after logout Notifications show success and transitions screen ✅
i18n keys for thank you screen Validated as non-empty strings ✅
App component load Tests pass with increased 30s timeout ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • i18n check passed
  • TypeScript types are properly defined
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules
  • State management is appropriate

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Accessibility attributes included

API & Data Fetching

  • TanStack Query used for server state
  • Loading and error states handled
  • API types defined in src/types/api.ts

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed

Documentation

  • API documentation updated in types
  • Code comments explain complex logic

Known Limitations / Technical Debt

None.

Additional Notes

Alternative approaches considered: Keeping the certificate but hiding the download until generation is ready. Decision: User requested removal for a simpler flow.

Edited by Vandana reddy Balannagari

Merge request reports