Step 2 Onboarding Proeprty Selection

Purpose (Product)

This step lets landlords choose how to bring properties into Hububb, shaping the rest of their onboarding.

• Import properties from Airbnb: For landlords who already host on Airbnb. They connect their Airbnb account, and all “Listed” (active) Airbnb properties are imported into Hububb so they can manage properties, bookings, inventory, calendar, guest messages, and services in one place.

• Create new property: For landlords who have properties not listed anywhere yet and prefer Hububb to list for them. After creating the property in Hububb and selecting distribution channels (OTAs), Hububb’s team will create accounts for the landlord on those OTAs and publish the listings. The landlord then manages properties, bookings, inventory, guest messages, calendar, and services on Hububb.

UX Flow (What the user sees)

• A screen titled “How would you like to get started?” showing two selectable cards:

  • [[Import properties from Airbnb]] (with Airbnb logo and ~2 min estimate).

  • Create new property manually (with create icon and ~5 min estimate).

• If the user already has onboardingType:

  • MANUAL_LISTING: the option pre-selects and if onboardingStep > 1 the app redirects to Create Listing flow.

  • AIRBNB_CONNECT: the option pre-selects.

• Upon clicking a card, the choice is persisted and the user is navigated accordingly.

• Navigation:

  • Airbnb: to Integration → Airbnb connect screen.

  • Manual listing: to Onboarding → Create Listing multi-step flow -> [[Step 3 - Tell us about your property]].

![[Desktop 1.png]]

System Flow (How it works)

High-level sequence of events from user action to persisted state.

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

  Landlord->>Frontend: Click "Airbnb" or "Create new property"
  alt Airbnb option
    Frontend->>Backend: PATCH /api/users/{userId} { onboardingStep: 1, onboardingType: "AIRBNB_CONNECT" }
    Backend->>DB: Update user.onboardingStep, user.onboardingType
    Backend-->>Frontend: 200 OK (updated user)
    Frontend->>Frontend: updateUserData({ onboardingStep: 1, onboardingType: "AIRBNB_CONNECT" })
    Frontend->>Frontend: Navigate to /integration/airbnb
    Note over External,Frontend: Subsequent screens handle Airbnb account connection and import
  else Manual listing option
    Frontend->>Backend: PATCH /api/users/{userId} { onboardingStep: currentOr1, onboardingType: "MANUAL_LISTING" }
    Backend->>DB: Update user.onboardingStep, user.onboardingType
    Backend-->>Frontend: 200 OK (updated user)
    Frontend->>Frontend: updateUserData({ onboardingStep: currentOr1, onboardingType: "MANUAL_LISTING" })
    Frontend->>Frontend: Navigate to /onboarding/create-listing
    Note over External,Frontend: Hububb team later creates OTA accounts and publishes listings
  end

APIs Called

• PATCH /api/users/{userId}

  • Request (Airbnb):

    • Payload:

      { "onboardingStep": 1, "onboardingType": "AIRBNB_CONNECT" }

  • Request (Manual listing):

    • Payload:

      { "onboardingStep": user.onboardingStep || 1, "onboardingType": "MANUAL_LISTING" }

  • Response: Updated user object (shape from backend; consumed by updateUserData)

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

  • Idempotency: Safe to repeat with same values (no adverse side effects)

  • Retries: No automatic retries; front-end does not retry on failure

Design

(Design assets and specifications referenced in the original content remain applicable.)

QA Checklist

• Visual:

  • Two cards render with correct logos/icons, titles, and time estimates

  • Hover/active states apply styling as expected

• Behavior:

  • Clicking Airbnb triggers PATCH then navigates to /integration/airbnb

  • Clicking Create triggers PATCH then navigates to /onboarding/create-listing

  • With existing onboardingType === 'MANUAL_LISTING' and onboardingStep > 1, user auto-redirects to create listing

  • With onboardingType === 'AIRBNB_CONNECT', option is pre-selected (no auto-redirect here)

• Data:

  • PATCH payloads match selected option; onboardingStep is 1 for Airbnb, existing-or-1 for manual

  • updateUserData updates the auth context with returned values

• Negative:

  • API failure leaves user on the same screen without navigation; no crashes

  • Non-landlord users are blocked from reaching the screen

• Navigation:

  • Back/refresh maintains consistent behavior with existing onboardingType/onboardingStep state