(Optional) Step 17 Speak Soon

Purpose (Product)

This final step serves as a confirmation and transition screen for Pro tier landlords who have successfully booked their onboarding call through the Calendly integration. It provides reassurance that their call has been scheduled and sets clear expectations about what will happen next in their onboarding journey. The step acts as a bridge between the automated onboarding process and the human touchpoint that Pro tier customers receive, ensuring they understand that a professional team member will guide them through the remaining setup process during their scheduled call. This personalized approach reinforces the premium service experience that Pro tier customers expect and helps build confidence in the platform's commitment to their success.

UX Flow (What the user sees)

The screen displays a single prominent image (320x320 pixels) that represents the "speak soon" message, creating a visual confirmation that their call has been scheduled successfully. The interface is intentionally minimal and focused, removing any form elements or complex interactions to provide a clear sense of completion and anticipation. The image serves as both a visual confirmation and a gentle reminder that their onboarding journey will continue with personalized support from the Hububb team. The layout is fully responsive and centered, ensuring the message is clear and impactful across all device sizes.

![[Calendly - 2.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

    %% Load step
    Frontend->>Frontend: Render speak soon confirmation screen
    Frontend->>Frontend: Display confirmation image

    %% User proceeds (no form interaction required)
    Landlord->>Frontend: Click "Next" (when available)
    Frontend->>Frontend: Trigger form submission (empty schema)

    %% Submit step (placeholder API call)
    Frontend->>Backend: PATCH /api/properties/{id} (empty payload)
    Backend->>DB: No changes (placeholder call)
    Backend-->>Frontend: 200 OK
    Frontend->>Frontend: Advance to next step or complete onboarding

APIs Called

PATCH /api/properties/{id}

• Method: PATCH

• Payload: {}

• Response: Updated property object

• Purpose: Placeholder call to maintain step flow consistency

• Idempotent: Yes

Code example (request body is an empty object):

PATCH /api/properties/{id}

PATCH /api/properties/{id}
Content-Type: application/json

{}

QA Checklist

Basic functionality:

• Confirmation image displays correctly

• Layout is centered and responsive

• Step advances without form interaction

• Proper step numbering in header

Step flow:

• Step only shows for Pro tier users after Calendly booking

• Navigation works correctly

• Step advances after API call

• Proper integration with onboarding flow

Visual design:

• Image loads without errors

• Layout is responsive on all devices

• Centering works correctly

• No layout issues or overflow

Error handling:

• API errors don't prevent step advancement

• Network issues handled gracefully

• User can proceed despite errors

• No blocking validation requirements