Skip to content

fix(i18n): add language switcher to Join Volunteer page header

Lakshmi pavani Challa requested to merge feat/language-switcher into develop

Overview

This MR adds a language switcher to the Join Volunteer page and fixes incomplete localization on that page so content fully updates for English, Telugu, and Hindi.

What does this MR do and why?

The Join Volunteer page (/join-volunteer) had two issues:

  1. It did not have a language switcher in the header, unlike other public pages.
  2. Even after switching language, parts of the page remained in English due to missing locale keys and hardcoded/static text paths.

This caused a mixed-language UX and inconsistent behavior across pages.
This MR aligns Join Volunteer with the existing i18n pattern used elsewhere.

Changes Made

Files modified

  • src/pages/JoinVolunteerPage.tsx
  • src/locales/te/translations.json
  • src/locales/hi/translations.json

Key changes

  • Added LanguageSwitcher to Join Volunteer header (globe icon only).
  • Replaced hardcoded/static UI strings in JoinVolunteerPage.tsx with i18n keys.
  • Added missing Telugu/Hindi translation keys for Join Volunteer page sections:
    • hero description
    • why volunteer section descriptions
    • role cards (title + description)
    • date/location labels
    • to-be-announced/no-camp-date labels
    • action/status labels (backToLogin, registering, etc.)
  • Ensured locale JSON remains valid.

Technical Details

Root cause:

  • Missing translation keys in te/hi locale files for Join Volunteer page.
  • Some content relied on fallback English/default strings.

Fix approach:

  • Centralized Join Volunteer copy under explicit keys (not fallback text).
  • Added corresponding locale values in Telugu/Hindi.
  • Kept existing i18n structure and LanguageSwitcher component usage consistent with project patterns.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • 💥 Breaking change
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ️ Refactor
  • Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Issue #300 (closed)

  • Closes: Join Volunteer page missing language switcher and mixed-language rendering after locale switch
  • Related to: i18n consistency across public/auth pages

Screenshots

BEFORE image

AFTER

image image image

How to Set Up and Validate Locally

  1. Checkout branch:
    git checkout feat/language-switcher
  2. Install deps (if needed):
    npm install
  3. Run app:
    npm run dev
  4. Open:
    • http://localhost:5173/join-volunteer
  5. Validate:
    • Globe language switcher appears in header
    • Switch between English/Telugu/Hindi
    • Entire page content updates to selected language (no mixed English)

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Language switcher visible on /join-volunteer Globe icon shown in header
Switch to Telugu Page content shown in Telugu
Switch to Hindi Page content shown in Hindi
Switch back to English Page content shown in English
Locale JSON integrity JSON parses successfully

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger introduced by this MR
  • No unused imports/vars introduced
  • Reused existing LanguageSwitcher component
  • i18n strings externalized for changed Join Volunteer content
  • TypeScript-safe changes
  • ESLint and Prettier checks pass (run full project check before merge)

React Best Practices

  • Hooks follow rules
  • State management unchanged and appropriate
  • No unnecessary event lifecycle changes introduced

Component Patterns

  • Existing UI component patterns preserved
  • Responsive behavior preserved
  • Accessibility preserved (language trigger has aria from shared component)

API & Data Fetching

  • No API contract changes

Error Handling

  • No new error paths introduced

Documentation

  • README.md updated (not required)
  • .env.example updated (not required)
  • CHANGELOG.md updated (optional, if release process needs it)

Pipeline

Run locally Screenshot_from_2026-04-14_11-44-16

Edited by Lakshmi pavani Challa

Merge request reports

Loading