(Optional) Step 16 Book a call

Purpose (Product)

• Schedule a mandatory onboarding call for Pro tier landlords to verify property location and local service availability.

• This step only appears for users who selected Pro management tier and haven't had an onboarding call yet.

• The call ensures the property is in an area where Hububb offers local services on demand, which is required for Pro tier activation.

UX Flow (What the user sees)

• A full-screen Calendly widget embedded directly in the page, allowing landlords to select an available time slot.

• The widget shows available 30-minute slots with the Hububb team member "ilcho-sixcore".

• No form fields or additional UI elements - the Calendly widget handles the entire scheduling experience.

• Navigation buttons are hidden during this step as the user must complete the booking to proceed.

![[Calendly - 1.png]]

System Flow (How it works)

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

    %% Load Calendly widget
    Frontend->>Frontend: Load Calendly external script
    Frontend->>Calendly: Initialize widget with URL "https://calendly.com/ilcho-sixcore/30min"

    %% User schedules call
    Landlord->>Calendly: Select available time slot
    Landlord->>Calendly: Fill in contact details
    Calendly->>Calendly: Send confirmation email
    Calendly->>Calendly: Create calendar event

    %% Submit step (no actual form data)
    Landlord->>Frontend: Click "Next" (after booking)
    Frontend->>Backend: PATCH /api/properties/{id} (empty payload)
    Backend->>DB: No changes (placeholder call)
    Backend-->>Frontend: 200 OK
    Frontend->>Frontend: Advance to next step

Data Touched

Properties table:

• No actual data changes (empty PATCH request)

• This is a placeholder API call to maintain step flow consistency

Calendly Integration:

• Call scheduling handled entirely by Calendly

• Confirmation emails sent by Calendly

• Calendar events created in Calendly system

Validation rules:

• No form validation required

• Step completion depends on user manually booking a call

APIs Called

PATCH /api/properties/{id}

• Method: PATCH

• Payload: {} (empty object)

• Response: Updated property object

• Purpose: Placeholder call to maintain step flow consistency

• Idempotent: Yes

QA Checklist

Basic functionality:

• Calendly widget loads and displays correctly

• Available time slots show properly

• User can select and book a time slot

• Confirmation email sent after booking

Step flow:

• Step only shows for Pro tier users without onboarding call

• Navigation buttons hidden during this step

• Step advances after API call (regardless of booking status)

• Proper step numbering in header

Integration:

• Calendly script loads without errors

• Widget initializes with correct URL

• External script doesn't break page functionality

• Widget responsive on mobile/desktop

Error handling:

• Script loading failures handled gracefully

• Widget errors don't break page

• API errors don't prevent step advancement

• Network issues handled appropriately

UX/UI:

• Widget fills available space properly

• No layout issues with embedded widget

• Responsive design works on all devices

• Loading states handled appropriately

Open Questions / TODOs

Business logic

• Should we validate that a call was actually booked before allowing progression?

• How do we handle users who book calls but don't show up?

• Should we implement call completion tracking?

UX improvements

• Should we show call preparation information?

• Would a confirmation message after booking be helpful?

• Should we implement call reminder notifications?

Integration considerations

• How do we handle Calendly webhook events for call completion?

• Should we integrate with calendar systems for team members?

• How do we handle timezone differences for international users?