Step 6 Confirm your address

Purpose (Product)

Ensure the property’s address details are complete and normalized before distribution to channels and for accurate guest discovery, pricing, and compliance. Captures structured address fields (city, street, house/apt number, post code) with confirmed geolocation.

On this step, the fields should be pre-populated based on the information provided in the previous step, so the landlord reviews and confirms the details. One extra required field — House/Apt Number — is added to make the address fully structured.

UX Flow (What the user sees)

• A form with required fields: City, Address (Street), House/Apt Number, Post Code (ZIP).

• All fields except House/Apt Number are prefilled from the previous step.

• A read-only map on the right displays the geolocation for visual confirmation.

• On submit, validation enforces all required fields. If valid, the step advances to the Details step.

![[02.png]]

Form behavior details:

• Fields: city, street (address), houseNumber, zipcode (state optional).

• Map: read-only, centered on current coordinates from property state.

• Client-side validation (RHF or equivalent) for required fields; additional validation requires latitude and longitude to be present before allowing submission.

System Flow (How it works)

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

  Landlord->>Frontend: Fill City, Address, House/Apt number, Post Code
  Frontend->>Frontend: RHF validates required fields

  Landlord->>Frontend: Click "Next"
  Frontend->>Frontend: Validate form (city, address, zipcode, houseNumber, latitude, longitude)

  Frontend->>Backend: PATCH /api/properties/{propertyId} { address: { street, city, zipcode, state, latitude, longitude, houseNumber } }
  Backend->>DB: Update properties.address
  Backend-->>Frontend: 200 OK

  Frontend->>Backend: PATCH /api/users/{userId} { onboardingStep: user.onboardingStep + 1 }
  Backend->>DB: Update users.onboardingStep
  Backend-->>Frontend: 200 OK

  Frontend->>Backend: GET /api/properties (refetch)
  Backend-->>Frontend: 200 OK { properties: [...] }
  Frontend->>Frontend: Advance to next step (Basics/Details)

APIs Called

PATCH /api/properties/{propertyId}

• Purpose: Update property address

• Payload:

payload.json

{
  "address": {
    "street": "string",
    "city": "string",
    "zipcode": "string",
    "state": "string (optional)",
    "latitude": 0.0,
    "longitude": 0.0,
    "houseNumber": "string"
  }
}

• Response: Updated property

• Errors: 400 (validation), 401/403 (authz), 404 (not found), 500

• Idempotency: Safe for identical payloads

PATCH /api/users/{userId}

• Purpose: Advance onboarding step for the user

• Payload:

payload.json

{
  "onboardingStep": 0
}

(Note: client should send current + 1) - Response: Updated user - Errors: 400, 401/403, 404, 500

GET /api/properties

• Purpose: Refresh property cache in client after update

• Response: { properties: [...] }

Integrations

• Google Maps

  • Read-only map used to confirm location visually; coordinates come from property state (previous step or existing data).

QA Checklist

Visual

• All inputs render with labels.

• Map renders centered to current coordinates.

Behavior

• Submitting with any missing required field shows inline error.

• Successful submit triggers:

  1. PATCH /api/properties

  2. PATCH /api/users (step +1)

  3. GET /api/properties (refetch)

  4. Advance UI to next step (Details)

Data

• Verify properties.address contains:

  • street, city, zipcode, state, houseNumber, latitude, longitude

• Verify users.onboardingStep increments exactly once.

Negative

• Simulate 4xx/5xx on either PATCH: user remains on step; no step increment/navigation.

• Verify map remains read-only and matches submitted coordinates.

Notes for Implementation

• Prefill all fields (except houseNumber) from previous step's property state or existing property data.

• Ensure latitude & longitude are present before enabling final submit (the map should reflect these values).

• Use client-side validation (e.g., React Hook Form) to show inline errors for required fields.

• On successful property PATCH, ensure user PATCH and properties refetch occur; only advance step after both PATCHes succeed and refetch completes.

• Handle server errors gracefully: display error message and keep user on the current step.