Step 11 Description

Purpose (Product)

• Capture the property description that provides detailed information to potential guests about the property's features, amenities, and unique selling points.

• Display the property title prominently and show room cards for visual context.

• The description is essential for guest decision-making, search ranking, and channel distribution optimization.

UX Flow (What the user sees)

• A horizontal scrollable row of room cards showing cover images, room names, and photo counts (read-only, no navigation).

• The property title displayed in a centered badge below the room cards.

• A large textarea for the description with character counter (0/500) and validation.

• Real-time character count and validation feedback as the user types.

![[Desktop 9.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 and property title
  Frontend->>Frontend: Load rooms and title from property data

  Landlord->>Frontend: Enter property description
  Frontend->>Frontend: Real-time character count (max 500)
  Frontend->>Frontend: Validation (min 10, max 500 characters)

  Landlord->>Frontend: Click "Next"
  Frontend->>Frontend: Validate description length (10-500 chars)

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

APIs Called

• PATCH /api/properties/{propertyId}

  • Payload: { propertyDetails: { description: string } }

  • Response: Updated property

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

  • Idempotency: Safe for identical description 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

QA Checklist

Visual

• Room cards display with correct cover images and photo counts

• Property title badge renders correctly

• Description textarea shows proper styling and character counter

• Character counter updates in real-time

Behavior

• Description validation works for both minimum and maximum length

• Character counter accurately reflects current input length

• Valid description allows progression to pricing step

• Auto-scroll to errors works when validation fails

Data

• Verify properties.propertyDetails.description 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 descriptions under 10 characters and over 500 characters

• Verify character limit enforcement in textarea