Step 8 Amenities

Amenities

Purpose (Product)

• Capture the property's amenities to enhance searchability, set guest expectations, and enable accurate pricing recommendations.

• Amenities are grouped by category (e.g., Kitchen, Bathroom, Entertainment) and displayed as selectable cards with icons.

• Minimum of 5 amenities required to proceed, ensuring the listing has sufficient detail for guest decision-making.

UX Flow (What the user sees)

1

Grid view

• A scrollable grid of amenity cards organized by category with visual separators.

• Each card shows an icon and name.

• Selected amenities are highlighted with a border and background color change.

2

Interaction

• Clicking a card toggles its selection state.

• A validation message appears if fewer than 5 amenities are selected when attempting to proceed.

3

Success

• On success (≥ 5 amenities selected and saved), the flow advances to "Upload your photos".

![[Desktop 7.png]]

Validation: users must select at least 5 amenities to proceed. If fewer than 5 are selected, show a clear inline validation error and prevent navigation.

APIs Called

PATCH /api/properties/{propertyId}

PATCH /api/properties/{propertyId}
Payload: { "amenities": string[] }  // array of amenity names
Response: Updated property
Errors: 400 (validation), 401/403 (authz), 404 (not found), 500
Idempotency: Safe for identical amenity arrays

PATCH /api/users/{userId}

PATCH /api/users/{userId}
Payload: { "onboardingStep": number }  // current + 1
Response: Updated user
Errors: 400, 401/403, 404, 500

GET /api/properties

GET /api/properties
Purpose: Refresh property cache after update

QA Checklist

• Visual

  • Amenities grouped by category with proper separators

  • Selected amenities show correct highlighting

  • Grid responsive across screen sizes

• Behavior

  • Clicking cards toggles selection state

  • < 5 amenities shows validation error on Next

  • ≥ 5 amenities allows progression

• Data

  • Verify properties.amenities array contains selected amenity names

  • Verify users.onboardingStep increments once

• Negative

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

  • Test with various amenity combinations