Step 18 Review and Checkout

Purpose (Product)

This final step provides landlords with a comprehensive review of their property listing and selected services before completing the onboarding process. It serves as a critical checkpoint where landlords can verify all their choices, make final adjustments to amenities, and complete payment for their selected services. The step consolidates all previous decisions into a clear summary, ensuring transparency about costs and enabling informed decision-making before committing to the platform. This review process builds confidence and reduces post-purchase regret by giving landlords full visibility into what they're purchasing and what their property listing will look like to potential guests.

After successful submission, the Operations team receives property requests on their dashboard where they can complete the connection to the selected OTAs (Online Travel Agencies) such as Airbnb, Booking.com, Vrbo, Expedia, and Agoda. This handoff ensures that the landlord's property is properly listed and synchronized across all chosen distribution channels, enabling multi-channel booking management and maximizing the property's visibility to potential guests.

![[Desktop 14.png]] ![[Amenities Edit Modal 1.png]]

UX Flow (What the user sees)

The review step presents a comprehensive two-column layout that displays all property information and service selections.

• Left column

  • Property title and description

  • Detailed amenities section with an "Edit" button that opens a modal for last-minute changes

  • Amenities displayed as a grid of cards with icons and names; the modal allows full editing with category grouping and validation

  • Room details with cover images, room types, and photo counts

• Right column

  • Pricing breakdown and payment section:

    • Selected management plan with base price

    • Additional channel costs (excluding those included in the management tier)

    • Selected services from the cart

    • Prominent total cost

  • Payment options:

    • Use existing payment method or add a new card via Stripe CardElement

    • Saved cards with options to set as default or delete

    • Real-time validation for new card entries

• Bottom

  • "Checkout" button completes the process, triggering backend submission that processes payments, creates subscriptions, sends confirmation emails, and activates the property listing

System Flow (How it works)

sequenceDiagram
    actor Landlord
    participant Frontend as Web App (Next.js)
    participant Backend as API (NestJS)
    participant DB as Database
    participant Stripe as Stripe API
    participant Email as Email Service
    participant Cart as Cart Service
    participant Chat as Chat Service
    participant Audit as Audit Service

    %% Frontend Review and Payment Processing
    Landlord->>Frontend: Click "Checkout" button
    Frontend->>Frontend: Validate form and calculate total
    Frontend->>Frontend: Create Stripe payment method (if needed)
    Frontend->>Backend: PATCH /api/properties/{id} { status: "ACTIVE" }
    Backend->>DB: Update property status to ACTIVE
    Backend-->>Frontend: 200 OK
    
    %% Payment Processing
    Frontend->>Backend: POST /api/marketplace/properties/{id}/submit-add-property-payment
    Backend->>Stripe: Create/attach payment method
    Stripe-->>Backend: Payment method created
    Backend-->>Frontend: 200 OK
    
    %% Cart Processing
    Frontend->>Backend: POST /api/properties/{id}/cart/process
    Backend->>DB: Get cart items and property details
    Backend->>Backend: Process recurring services (subscriptions)
    Backend->>Backend: Process on-demand services (tasks)
    Backend->>Cart: Clear cart items
    Backend-->>Frontend: 200 OK
    
    %% Final Property Submission
    Frontend->>Backend: POST /api/properties/submit-onboarding-property
    Backend->>DB: Get property with user details
    
    %% Host Type Logic
    alt Host Type is MID_TERM
        Backend->>DB: Update property.minimumNights = 28
    end
    
    %% Subscription Creation
    Backend->>DB: Check for existing subscription
    alt No existing subscription
        Backend->>DB: Create subscription { status: "ACTIVE", currentPeriodStart: now, currentPeriodEnd: null }
    end
    
    %% Email Notifications
    Backend->>Email: Send admin notification to [email protected]
    Backend->>Email: Send user confirmation to landlord email
    Backend->>Backend: Send welcome message to landlord via chat
    
    %% Welcome Message Processing
    Backend->>DB: Update user.isOnboardingCompleted = true
    Backend->>DB: Find operator (userRoleId: 3, hasFullAccess: true)
    Backend->>Chat: Create support thread with welcome message
    Backend->>Chat: Send message from operations to landlord
    
    %% Cart Cleanup
    Backend->>Cart: Clear property cart
    
    %% Audit Logging
    Backend->>Audit: Log successful property onboarding completion
    
    Backend-->>Frontend: 200 OK (submission complete)
    Frontend->>Frontend: Update user state (isOnboardingCompleted = true)
    Frontend->>Frontend: Redirect to host dashboard

Data Touched

Frontend Data Processing

• Property Details: Title, description, amenities, rooms, photos

• Service Selections: Management tier, channels, cart items

• Payment Information: Stripe payment methods, card details

• Cost Calculations: Base price, channel costs, service costs, total

Backend Data Updates

• properties.status: Updated to "ACTIVE"

• properties.minimumNights: Set to 28 for MID_TERM host types

• subscriptions: Created if not exists with ACTIVE status

• users.isOnboardingCompleted: Set to true

• propertyCart: Cleared after processing

Validation Rules

• Payment Required: If total > 0, valid payment method must be provided

• Amenities: Minimum 5 amenities required (enforced in edit modal)

• Form Validation: Confirmation checkbox required for submission

APIs Called

Frontend API Calls

PATCH /api/properties/{id}

• Purpose: Activate property before payment processing

• Payload: { propertyDetails: { status: "ACTIVE" } }

• Response: Updated property object

POST /api/marketplace/properties/{id}/submit-add-property-payment

• Purpose: Add payment method to user account

• Payload: { paymentMethodId: string }

• Response: Success confirmation

POST /api/properties/{id}/cart/process

• Purpose: Process all cart items (subscriptions and tasks)

• Payload: { paymentMethodId: string }

• Response: { itemsProcessed: number, message: string }

POST /api/properties/submit-onboarding-property

• Purpose: Complete property submission and onboarding

• Payload: { propertyId: string }

• Response: Success confirmation

Backend Processing APIs

• Cart Processing Logic

  • Recurring Services: Creates Stripe subscriptions via marketplace service

  • On-Demand Services: Creates tasks without payment for future execution

  • Cart Cleanup: Removes all processed items

• Subscription Management

  • Creation: New subscription with ACTIVE status if none exists

  • Period Tracking: Sets currentPeriodStart to current date, currentPeriodEnd to null

• Email Services

  • Admin Notification: New property submitted email to [email protected]

  • User Confirmation: Property submission confirmation to user

  • Welcome Message: Automated welcome message to landlord via chat

• Chat Service Integration

  • Support Thread Creation: Creates chat thread between operations and landlord

  • Welcome Message: Sends automated welcome message from operations team

Integrations

Stripe Integration

• Payment Method Creation: Secure card tokenization via Stripe Elements

• Subscription Management: Automatic recurring billing setup

• Payment Processing: Handles all payment-related operations

Email Service Integration

• Template System: Uses predefined email templates

• Admin Notifications: Real-time alerts for new property submissions

• User Communications: Confirmation and welcome emails

Cart Service Integration

• Item Processing: Handles both recurring and one-time services

• Subscription Creation: Integrates with marketplace service for billing

• Task Creation: Sets up on-demand services for future execution

Chat Service Integration

• Support Thread Creation: Establishes communication channel between operations and landlord

• Automated Messaging: Sends welcome message from operations team

• User Role Management: Identifies operations team members (userRoleId: 3, hasFullAccess: true)

Email Notifications

Admin Notification Email

• Recipient: [email protected]

• Subject: "New Property Submitted"

• Template: "new-property-submitted"

• Data Included:

  • propertyTitle: Property title

  • userEmail: Landlord's email address

  • userName: Landlord's name

  • dashboardUrl: Operations dashboard URL

User Confirmation Email

• Recipient: Landlord's email address

• Subject: "We've Received Your Property Submission"

• Template: "property-submission-confirmation"

• Data Included:

  • userName: Landlord's name

  • propertyTitle: Property title

  • dashboardUrl: Hububb web base URL

Welcome Message Details

Chat Thread Creation & Welcome Message

Chat Thread Creation

• Trigger: After successful property submission

• Participants: Operations team member and landlord

• Thread Type: Support thread for ongoing communication

Welcome Message Content

Hello [Landlord Name],

Welcome to Hububb Support.

Our team is here to ensure your hosting journey is seamless. Use this chat to reach us for technical guidance, platform assistance or best practices.

Your success is our priority, we're just a message away.

Hububb Support Team

Operations Team Identification

• Criteria: userRoleId = 3 AND hasFullAccess = true

• Purpose: Identifies authorized operations team members to send welcome messages

State & Side Effects

Local State Management

• Form State: React Hook Form with Zod validation

• Payment State: Stripe Elements integration with error handling

• UI State: Modal management, loading states, error messages

• Amenities State: Temporary selection for edit mode

Cache Invalidation

• Property Data: Refetched after amenities updates

• User Data: Updated after successful submission

• Payment Methods: Refreshed after card operations

Background Jobs

• Email Sending: Asynchronous email delivery

• Welcome Message: Automated message creation and chat thread setup

• Subscription Setup: Background Stripe subscription creation

QA Checklist

Frontend Testing

• Property details display correctly

• Amenities edit modal works properly

• Payment method selection functions

• Cost calculations are accurate

• Form validation prevents invalid submissions

• Loading states display during processing

• Error messages show for failures

Backend Testing

• Property activation works correctly

• Payment processing completes successfully

• Cart items are processed properly

• Subscriptions are created for recurring services

• Tasks are created for on-demand services

• Emails are sent to correct recipients

• Cart is cleared after processing

• MID_TERM properties get minimumNights = 28

• User.isOnboardingCompleted is set to true

• Welcome message is sent via chat

• Support thread is created between operations and landlord

• Operations team member is correctly identified

Email Testing

• Admin notification email sent to [email protected]

• User confirmation email sent to landlord

• Email templates render correctly with provided data

• Email delivery is successful

Chat Testing

• Support thread is created successfully

• Welcome message content is correct

• Operations team member can send messages

• Landlord receives welcome message

• Chat thread appears in both user interfaces

Integration Testing

• Complete flow from review to dashboard

• Stripe payment processing works end-to-end

• Email delivery is successful

• Subscription billing is set up correctly

• Welcome message and chat thread creation works

• Error recovery mechanisms work

• Data consistency maintained throughout process

Audit Testing

• All actions are logged in audit system

• Audit logs contain correct metadata

• Failed actions are logged with error details

• Successful completion is logged