Step 1 Host Type Selection

Purpose (Product)

This step captures the landlord's hosting preference to personalize their experience and optimize the platform's features. The host type determines pricing strategies, booking rules, and feature availability. Short-term hosts focus on stays under 30 days, mid-term hosts target 28-180 day stays, and "both" accommodates mixed strategies.

UX Flow (What the user sees)

Landlord sees a welcome screen with their first name and three host type cards. Each card displays an image, title, subtitle, and description. Cards have hover effects with shadow elevation. When clicked, the selected card triggers an API call and automatically advances to the next step.

![[Desktop.png]]

System Flow (How it works)

sequenceDiagram
    actor Landlord
    participant Frontend as Web App (Next.js)
    participant Backend as API (NestJS)
    participant DB as Database
    participant Auth as Firebase Auth

    Landlord->>Frontend: Clicks host type card
    Frontend->>Frontend: setSelectedHostType(hostType)
    Frontend->>Backend: PATCH /api/users/{userId}
    Note over Frontend,Backend: { hostType: 'SHORT_TERM'|'BOTH'|'MID_TERM' }
    Backend->>DB: Update user.hostType
    Backend-->>Frontend: 200 OK
    Frontend->>Auth: updateUserData({ hostType })
    Frontend->>Frontend: onNext() - advance to step 2

Data Touched

• Users table: hostType field updated

• Validation: Must be one of SHORT_TERM, BOTH, MID_TERM

• Error states: Network failures, invalid host type values

APIs Called

• PATCH /api/users/{userId}

  • Payload: { hostType: string }

  • Response: Updated user object

  • Error codes: 400 (validation), 401 (unauthorized), 500 (server error)

  • Idempotency: Yes — multiple calls with same hostType are safe

  • Retries: No automatic retries implemented

Ensure the frontend updates Firebase Auth user context after receiving 200 OK from the backend.

QA Checklist

1

Verify all three host type cards display correctly

2

Test hover effects on each card

3

Confirm API call is made on card selection

4

Verify user advances to step 2 after selection

5

Test error handling with network disconnected

6

Verify user context is updated after selection

7

Test with different user roles (should be blocked for non-landlords)