Hum Rahi

User Story 7 (FE): Support Request Overlay/Form¶

Story: As a Locked-out Citizen, I want to fill out a quick support form, so that I can explain why I am having trouble logging in.

• In-Scope:
  • A modal or drawer appearing when "Contact Support" is clicked.
  • Pre-filled Mobile Number field (from the previous login attempt).
  • Success state showing a "Reference Number."
• Out-of-Scope: Attachment uploads (keep it simple for the lockout phase).

Acceptance Criteria (AC):¶

1. Context Preservation: The form must automatically carry over the mobile number the user tried to log in with.
2. UI Consistency: Use the same background-dark and primary color palette as the Lockout screen.
3. Submission: On clicking "Submit," a loading spinner must be shown on the button.
4. Confirmation: Upon success, replace the form with a "Checkmark" icon and the text: "Support Request Sent. Reference: #H-12345."

Validation Rules:¶

• Field Requirement: "Issue Category" dropdown must be mandatory (e.g., "Forgot Mobile," "OTP not receiving," "Account Hacked").
• Character Count: Show a real-time counter for the 500-character description limit.

Error Messages:¶

• Submission Fail: "We couldn't send your request. Please try again or email support@hamrahi.gov."

Definition of Done (DoD):¶

• UI tested for responsiveness on small screens (minimum 320px width).
• Form submission verified to reach the backend database.
• Accessibility check: Form fields must be navigable via Keyboard (Tab/Shift+Tab).

Sequence of Support Workflow¶

1. Trigger: User clicks "Contact Support" on the Locked Screen.
2. Interaction: A Modal slides up; User selects "OTP not received" and adds a brief note.
3. Processing: FE calls the BE Support API.
4. Notification: BE sends an automated WhatsApp message to the user: "We have received your help request #H-12345. A support agent will review your lockout status."
5. Resolution: User is redirected back to the Lockout Screen to wait for the timer or support action.