Dev: Display Host Contact Information Form Progress

[JpadillaCoding]

🧩 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:

• [x] Make phone_number optional in ContactInfoCreate schema

• [x] Update Alembic migration to make phone_number nullable in DB

• [x] Modify crud.py to update existing contact info

• [x] 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

• [x] Submitting contact info with only email (preferred_method=email) is valid
• [x] Submitting contact info with phone (preferred_method=phone) requires phone_number with 10+ digits
• [x] Backend replaces existing entry if user already has a contact_info row
• [x] Backend /completion-status returns correct status based on inputs
• [x] Frontend shows ✓⃝ if contact info is "complete", ◐ if partial, ◯ if incomplete
• [x] 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

• #720
• #919

---

Action Items

• [X] Update issue with current Engineering Issue Template format
• [X] 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

---

[JasikaKalra]

#500 covers this

[mugdhchauhan]

Completed Engineering Tasks in this issue as it stands

Screenshots.pdf

[mugdhchauhan]

Reached out to Dev Lead for discussion.