Add Services Modal
The Service Purchase Modal is a comprehensive multi-step interface that allows landlords to purchase or subscribe to various services for their properties. This modal is used throughout the landlord dashboard whenever a landlord wants to add services like cleaning, maintenance, or other property management services to their properties.
The modal supports two main modes:
Property-to-Service: Landlord selects a property first, then chooses from available services
Service-to-Property: Landlord selects a service first, then chooses which property to apply it to
Key Features & Behaviors
Service Types Supported
On-Demand Services: One-time services like cleaning, maintenance (requires scheduling)
Recurring Services: Subscription-based services with automatic billing
Hububb Services: Platform-specific services that connect to external integrations
Smart Filtering & Availability
Property Filtering: Only shows properties that don't already have the selected service
Service Filtering: Only shows services not already subscribed to for the selected property
Management Tier Integration: Automatically excludes services already included in the landlord's management tier
Dynamic Pricing
Hourly Services: Automatically calculates price based on property size (bedrooms)
Cleaning Service Logic:
Studio (0 bedrooms): 1.3 hours
1 bedroom: 2 hours
2 bedrooms: 3.3 hours
3 bedrooms: 4.3 hours
4+ bedrooms: 5 hours
Payment Integration
Stripe Integration: Secure payment processing for recurring services
Card Management: Add, delete, and set default payment methods
Free Services: On-demand services don't require payment upfront
User Flow
The Service Purchase Modal follows a multi-step wizard pattern that adapts based on the service type and user selections. Use the stepper below to represent the modal's sequential flow.
Service Selection
Initial State: Modal opens with a list of available on-demand services
Logic:
Shows all services that are available for the current user's properties
Services are filtered based on property compatibility and availability
Each service card displays: name, price, pricing type (hourly/one-time), and service image
Options:
User can select any available service
Services are displayed as cards with "Select" buttons
Selected service gets highlighted with green styling
Validation: At least one service must be selected to proceed
![[Service Flow Modal-3.png]]
Property Selection
Initial State: Shows all properties owned by the user that are compatible with the selected service
Logic:
Filters properties based on service requirements (e.g., location, property type)
Displays property cards with cover images, names, and addresses
If only one property is available, it may auto-select or show a confirmation
Options:
User can select from available properties
Each property card shows: cover image, property name, address, and room count
Selected property gets highlighted with green styling
Validation: At least one property must be selected to proceed
![[Service Flow Modal.png]]
Date Selection
Initial State: Shows current month calendar with today's date highlighted
Logic:
Calendar starts with current month view
Past dates are disabled and grayed out
Quick date options (Today, Tomorrow, Next Week) are provided as chips
"Specific date" option allows manual calendar navigation
Options:
Quick date chips for common selections
Full calendar navigation with month/year controls
Individual date selection by clicking on calendar days
Month navigation with left/right arrow buttons
Validation: A valid future date must be selected
![[Service Flow Modal-4.png]]
Time Selection
Initial State: Shows 10:00 AM as default time
Logic:
12-hour format with AM/PM toggle
Hour input accepts 1-12, minute input accepts 0-59
Auto-padding for minutes (e.g., "5" becomes "05")
Real-time validation prevents invalid time entries
Options:
Editable hour and minute fields (large, prominent display)
AM/PM toggle with sliding indicator
Auto-selection of text when fields are focused
Validation: Valid time in 12-hour format must be entered
![[Service Flow Modal-5.png]]
Service-Specific Questions (Conditional)
Initial State: Varies based on selected service
Logic:
Only appears for services that require additional information
Questions are service-specific (e.g., cleaning equipment for cleaning services)
Answers affect pricing and service delivery
Options:
Yes/No buttons for binary questions
Answers are stored and used for pricing calculations
Validation: All required questions must be answered
![[Service Flow Modal-1.png]]
Bedding Question (Conditional)
Initial State: No selection made
Logic:
Only appears for cleaning services
Affects pricing and service scope
Question: "Do you need us to replace the bedding, linen and towels?"
Options:
Yes/No buttons
Selection affects final pricing calculation
Validation: Must select either Yes or No
![[Service Flow Modal-2.png]]
Confirmation & Payment
Initial State: Shows summary of all selections with calculated pricing
Logic:
Displays compact cards showing: selected service, property, date/time
Shows calculated price based on service, duration, and add-ons
Lists available payment methods
Allows editing of date/time if needed
Options:
Review all selections in compact card format
Edit date/time by clicking on the date/time card
Select from saved payment methods
Add new payment method
Set default payment method
Delete existing payment methods
Validation: Valid payment method must be selected
![[Service Flow Modal-6 1.png]] ![[Service Flow Modal-7.png]]
Navigation & State Management
Back Navigation: Users can go back to previous steps using the back button
State Persistence: All selections are maintained when navigating between steps
Auto-advance: Some steps may auto-advance if only one option is available
Error Handling: Validation errors are shown inline with helpful messages
Loading States: Shows loading indicators during API calls and payment processing
Conditional Logic
Service Questions: Only appear for services that require additional information
Bedding Question: Only appears for cleaning services
Property Filtering: Properties are filtered based on service compatibility
Pricing Updates: Price recalculates in real-time based on selections
Payment Options: Different payment flows for one-time vs recurring services
Common Use Cases
Notes & Edge Cases
Auto-exclusion ensures landlords don't purchase services already included in their management tier.
If only one valid property or service exists for the current selection, the modal may auto-select and advance to reduce friction.
On-demand services typically skip payment and instead create tasks; recurring services require Stripe-backed payment setup.
Last updated