Overview

This PR implements a complete contact form feature with automatic US state code population. When users select a state from the dropdown menu, the corresponding USPS two-letter state code is automatically populated in a read-only field.

Screenshot

The screenshot shows the fully functional contact form with the state code auto-population feature in action. When "California" is selected, the state code field automatically displays "CA".

What's New

Contact Form Component

A new React component (ContactForm.js) that provides a complete contact form with:

• Name and email input fields
• State selection dropdown with all 50 US states
• Auto-populated state code field (read-only) that updates in real-time
• Message textarea for user input
• Professional styling with modern UI/UX design

State Code Utility

A robust utility module (stateCodes.js) that:

• Maps all 50 US states to their official USPS two-letter codes
• Handles input normalization (case-insensitive, whitespace trimming)
• Validates state names and returns appropriate codes or empty strings for invalid input

Example Usage

import { getStateCode } from './utils/stateCodes';

// Returns the USPS code for any state
getStateCode('California');  // 'CA'
getStateCode('new york');    // 'NY' (case-insensitive)
getStateCode('  Texas  ');   // 'TX' (handles whitespace)
getStateCode('Invalid');     // '' (returns empty for invalid input)

Testing

Added comprehensive test coverage with 18 tests covering:

• State code mapping for all 50 US states
• Case-insensitive input handling
• Whitespace normalization
• Invalid input handling
• Form component integration and behavior
• Auto-population functionality

Test Results:

Test Suites: 3 passed, 3 total
Tests:       18 passed, 18 total
Coverage:    100% for new components and utilities

Documentation

• README.md: Added comprehensive documentation including feature description, installation instructions, usage examples, and project structure
• CHANGELOG.md: Created version history tracking with semantic versioning
• Inline documentation: Added JSDoc comments for all utility functions

CI/CD

Created a GitHub Actions workflow (.github/workflows/ci.yml) that:

• Runs tests automatically on push and pull requests
• Tests against Node.js versions 18.x and 20.x
• Builds the production bundle to verify no build errors
• Uploads code coverage reports

Files Changed

New Files:

• web-app/client/src/components/ContactForm.js - Contact form component
• web-app/client/src/components/ContactForm.css - Form styling
• web-app/client/src/components/ContactForm.test.js - Component tests
• web-app/client/src/utils/stateCodes.js - State code mapping utility
• web-app/client/src/utils/stateCodes.test.js - Utility tests
• .github/workflows/ci.yml - CI/CD workflow configuration
• CHANGELOG.md - Version history
• .gitignore - Build artifacts and dependencies exclusion

Modified Files:

• README.md - Added feature documentation
• web-app/client/src/App.js - Integrated ContactForm component

Technical Implementation

The auto-population feature uses React hooks for efficient state management:

// Auto-populate state code when state name changes
useEffect(() => {
  if (formData.stateName) {
    const code = getStateCode(formData.stateName);
    setFormData(prev => ({ ...prev, stateCode: code }));
  } else {
    setFormData(prev => ({ ...prev, stateCode: '' }));
  }
}, [formData.stateName]);

The implementation follows React best practices with:

• Controlled components for form inputs
• Separation of concerns (components, utilities, styling)
• Proper event handling and validation
• Clean, maintainable code structure

Build Verification

✅ Production build successful
✅ All tests passing
✅ No linting errors
✅ Ready for deployment

This implementation provides a production-ready feature with minimal, surgical changes to the codebase (660 lines added across 10 files) while maintaining backward compatibility.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.