Step 15 Channels

Purpose (Product)

• Allow landlords to choose which booking channels (OTAs) they want to distribute their property to, enabling multi-channel distribution and maximizing booking potential.

• Channels include Hububb (free), Airbnb (free), Booking.com (£4/month), Vrbo ($10/month), Expedia ($25/month), and Agoda ($25/month).

• Some channels are included in management tiers, while others require additional monthly fees. Channels marked as "Coming Soon" are disabled.

UX Flow (What the user sees)

• A vertical list of channel cards, each showing: channel logo, name, pricing, and toggle switch.

• Hububb and Airbnb are pre-selected by default. Channels included in the selected management tier show "Included" instead of pricing.

• Toggle switches allow enabling/disabling channels, except for channels included in the management tier (locked) or coming soon (disabled).

• Validation requires at least one channel selection before proceeding.

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 management tier data
    Frontend->>Backend: GET /api/management-tiers
    Backend-->>Frontend: Management tier data with included services

    %% Initialize channel selection
    Frontend->>Frontend: Set default channels (HUBUBB, AIRBNB)
    Frontend->>Frontend: Check management tier for included channels
    Frontend->>Frontend: Lock channels included in tier

    %% Channel toggle
    Landlord->>Frontend: Toggle channel switch
    Frontend->>Frontend: Update selectedChannels array
    Frontend->>Frontend: Validate at least one channel selected

    %% Submit channel selection
    Landlord->>Frontend: Click "Next"
    Frontend->>Frontend: Validate form (channels array min length 1)

    Frontend->>Backend: PATCH /api/properties/{id} { connectionRequests: [{ type, status: "PENDING" }] }
    Backend->>DB: Update properties.connectionRequests
    Backend-->>Frontend: 200 OK (updated property)
    Frontend->>Frontend: Advance to next step

---

APIs Called

GET /api/management-tiers

• Method: GET

• Response: Array of management tier objects with services

• Used to determine included channels and pricing

PATCH /api/properties/{id}

• Method: PATCH

• Payload: { connectionRequests: [{ type: string, status: "PENDING" }] }

• Response: Updated property object

• Idempotent: Yes

• Retries: Standard axios retry logic

---

QA Checklist

Basic functionality:

• All channel cards display correctly with logos and names

• Toggle switches work for enabled channels

• Form validation prevents submission without channel selection

• Default channels (HUBUBB, AIRBNB) are pre-selected

Channel states:

• Included channels show "Included" instead of pricing

• Included channels are locked and cannot be disabled

• Coming soon channels are disabled and cannot be enabled

• Pricing displays correctly for each channel

Management tier integration:

• Channels included in management tier are automatically enabled

• Management tier channels are locked from toggling

• Tier-specific pricing overrides individual channel pricing

Data persistence:

• Channel selections saved to property connectionRequests

• Form pre-populates with existing selections on page load

• Changes persist across page refreshes

Error handling:

• Network errors handled gracefully

• Validation errors display clearly

• Failed operations don't break form state

UX/UI:

• Channel cards have proper hover effects

• Toggle states are clearly indicated

• Disabled states are visually distinct

• Responsive design works on mobile/desktop

---

Open Questions / TODOs

Business logic

• Should we show estimated monthly costs based on selected channels?

• How do we handle channel-specific requirements (e.g., minimum photos, specific amenities)?

• Should we implement channel performance analytics?

UX improvements

• Should we show channel-specific setup requirements?

• Would channel recommendations based on property type/location be valuable?

• Should we implement channel comparison features?

Integration considerations

• How do we handle channel-specific validation requirements?

• Should we implement channel-specific onboarding flows?

• How do we handle channel connection failures during setup?