Step 10 Final Details

Purpose (Product)

• Capture the property title that will be displayed to potential guests across all booking channels.

• Provide visual context by showing room cards with photos, allowing landlords to click back to edit room photos if needed.

• The title is crucial for search ranking, guest expectations, and channel distribution optimization.

UX Flow (What the user sees)

1

Room cards

A horizontal scrollable row of room cards showing cover images, room names, and photo counts. Each room card is clickable and navigates back to the photo upload step for that specific room.

2

Title input

A large, centered title input field with custom styling that emphasizes the importance of the title.

3

Validation & Next

Real-time validation ensures a title is provided before proceeding. "Next" validates the title and submits the update.

![[Desktop 8.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

  Landlord->>Frontend: View room cards with photos
  Frontend->>Frontend: Load rooms and associated images from property data

  alt Click room card to edit photos
    Landlord->>Frontend: Click room card
    Frontend->>Frontend: Add 'pr' query param with room ID
    Frontend->>Frontend: Navigate back to photo upload step
  end

  Landlord->>Frontend: Enter property title
  Frontend->>Frontend: Real-time validation (title required)

  Landlord->>Frontend: Click "Next"
  Frontend->>Frontend: Validate title is not empty

  Frontend->>Backend: PATCH /api/properties/{propertyId} { propertyDetails: { title } }
  Backend->>DB: Update properties.propertyDetails.title
  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 description step

Data Touched

• users

  • Read: id, onboardingStep

  • Write: onboardingStep (+1 on success)

• properties.propertyDetails

  • Write: title (string)

• properties.propertyRooms

  • Read: Room data with associated images for display

Validation rules

• title: Required non-empty string

Error states

• Client validation error if title is empty

• 4xx/5xx from API calls prevent step advancement

APIs Called

• PATCH /api/properties/{propertyId}

  • Payload: { propertyDetails: { title: string } }

  • Response: Updated property

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

  • Idempotency: Safe for identical title values

• PATCH /api/users/{userId}

  • Payload: { onboardingStep: number } (current + 1)

  • Response: Updated user

  • Errors: 400, 401/403, 404, 500

• GET /api/properties

  • Purpose: Refresh property cache after update

Integrations

• Next.js Router: URL parameter management for room-specific navigation

• Firebase Auth: User context management

• No external services triggered directly in this step

State & Side Effects

• Local state (Step7Title)

  • React Hook Form manages title field

  • rooms state loaded from property data with image associations

  • URL parameter handling for room navigation

• Parent flow (CreateListingContainer)

  • Calls step7Ref.submitForm() on Next

  • On success: refetches properties, increments onboarding step, advances step index

• Navigation side effects

  • Room card clicks add pr query parameter and navigate back to photo upload

  • URL state preserved for room-specific editing

• Caching

  • Properties list refetched post-update

Edge Cases & Error Handling

• Empty title: Validation error prevents submission

• Room navigation: Query parameter added to maintain context when returning to photo upload

• API failure: User remains on step; error banner (parent) or console log

• Missing room images: Placeholder image shown for rooms without photos

• Long titles: Input field accommodates various lengths with responsive font sizing

Security & Permissions

• AuthN: Required (authenticated landlord)

• AuthZ:

  • Landlord-only access enforced upstream

  • Property must belong to authenticated user

• Input validation: Server validates title format and length limits

• XSS prevention: Title input should be sanitized before storage

QA Checklist

• Visual

  • Room cards display with correct cover images and photo counts

  • Title input field renders with proper styling and responsive font size

  • Horizontal scroll works for room cards overflow

• Behavior

  • Clicking room cards navigates back to photo upload with correct room selected

  • Empty title shows validation error on Next

  • Valid title allows progression to description step

• Data

  • Verify properties.propertyDetails.title is updated correctly

  • Verify users.onboardingStep increments once

  • Room data loads correctly with associated images

• Negative

  • Simulate API errors: user remains on step; no step increment/navigation

  • Test with very long titles to ensure proper handling

Open Questions / TODOs

Open Questions / TODOs

• Should we add character limits or validation for title length?

• Consider adding title suggestions based on property type and location?

• Add analytics for title length and content patterns?

• Should we preview how the title will appear on different channels?