🧩 Overview

This issue focuses on showing dynamic status icons (✓⃝ complete, ◐ partial, ◯ incomplete) to indicate the completion state of the Contact Info section in the Host Profile. The backend evaluates the user's submitted data and returns a status that the frontend uses to render the correct icon.

More Info

This form is part of the Host Profile intake. Users can select a preferred contact method ("Email" or "Text") and optionally fill out a phone number.

The UI displays a status icon based on backend logic:

• ✓⃝ Complete: All required fields are valid based on context (e.g., email chosen, phone not needed)
• ◐ Partial: At least one field is filled, but not enough to count as complete
• ◯ Incomplete: No relevant data provided

Example: If the user chooses "Email" as their preferred method but does not provide a phone number, the status should still show ✓⃝ because phone is not required in that context.

📐 Scope of Work

• Make phone_number optional in schema and DB
• Evaluate contact info completion based on conditional rules
• Return correct status (complete, partial, or incomplete)
• Status should drive icon logic on the frontend
• Prevent duplicate contact_info entries (update existing if same user_id)

🔧 Engineering Tasks

Steps to Implement:

• Make phone_number optional in ContactInfoCreate schema

• Update Alembic migration to make phone_number nullable in DB

• Modify crud.py to update existing contact info

• Update determine_status() in routes.py:

  • ✓⃝ If preferred_method == "Email" → phone_number not required for complete
  • ✓⃝ If preferred_method == "Text" → phone_number is required for complete
  • ◐ One of the fields present but not enough to meet full rules → partial
  • ◯ Neither field provided → incomplete

✅ Acceptance Criteria

• Submitting contact info with only email (preferred_method=email) is valid
• Submitting contact info with phone (preferred_method=phone) requires phone_number with 10+ digits
• Backend replaces existing entry if user already has a contact_info row
• Backend /completion-status returns correct status based on inputs
• Frontend shows ✓⃝ if contact info is "complete", ◐ if partial, ◯ if incomplete
• Status icons are clearly visible and emphasized in UI

🔄 Dependencies

• Frontend must implement logic to map completion-status to appropriate status icons

📦 Technical Notes

• Backend: FastAPI, SQLAlchemy, Pydantic
• Used Optional[str] for phone_number in Pydantic schema
• Status is computed dynamically using determine_status() in route
• Backend logic ensures only one row per user in contact_info table
• Frontend updates icon based on backend status: ✓⃝ / ◐ / ◯
• POST /contact-info acts as upsert
• GET /completion-status/{user_id} returns { "Contact Information": "complete" | "partial" | "incomplete" }

🧪 Testing Strategy

All validation can be covered by manual testing:

• ✅ Submit form with:

  • Preferred method: email only → ✓⃝ complete
  • Preferred method: phone + valid number → ✓⃝ complete
  • Preferred method: phone + short/invalid number → ◐ partial
  • No input at all → ◯ incomplete

• ✅ Observe status icons update correctly in UI

• ✅ Reload form and ensure saved data is preserved

• ✅ Resubmit form to test replacement (edit + save again)

• ✅ Check backend DB only contains one row per user

🚩 Risks / Considerations

• Risk: If backend logic doesn't perfectly match frontend icon mapping, users could be misled
• Consideration: Validation rules must remain synchronized between frontend and backend

🧵 Related Issues

• Dev: Form Validation Feature for Host Intake #720
• Dev: Connect Host Contact Information Form to Database #919

Action Items

• Update issue with current Engineering Issue Template format
• Come up with a solution
• Discuss with Dev Lead & Dev PM
• Share proposal with Product and Design

📎 Resources

• Figma UI Reference
• Intake Form data model
• Form API

Attachments/Screenshots (If Applicable):

• N/A