Service Details

Purpose

The Service Details page is the single destination for learning about, purchasing, and managing a specific service in Hububb. It adapts dynamically depending on your relationship with the service:

• Unpurchased View: You haven’t purchased or subscribed yet.

• Purchased View: You have one-off (task-based) purchases in progress or pending.

• Subscribed View: You have an active subscription on one or more properties.

Each view shares the same general layout but differs in contextual sections and available actions.

Common Structure Across Views

All versions of the Service Details page include the following areas:

Header & Hero Section

• Service name, description, and media (images or videos)

• Key features and benefits summary

Supporting Sections

• Reviews: Testimonials and ratings from users

• Overview: A concise summary of what’s included and when to use it

• Partners: Provider information, coverage area, or partner notes

• What Others Say: Highlights, case studies, or social proof

Property Context

• When you have existing activity, you can filter by property to view related tasks, subscriptions, or billing events.

Purchase / Subscribe Actions

• All views can open a modal to buy or subscribe directly from the page, adding coverage for more properties or placing a new order.

Unpurchased View

(No active subscriptions or purchases)

When Shown

You’ve never purchased or subscribed to this service.

Layout

Left Column

• Detailed service description and imagery

• Features and benefits

• Customer reviews

Right Column

• Overview of inclusions and use cases

• Partner information (provider, coverage)

• “What Others Say” section

Bottom Action Bar (Sticky)

• Shows pricing and a Get Started / Purchase / Subscribe button.

• Opens the purchase modal where you select the property, confirm pricing, and complete the checkout.

Purpose

Ideal for evaluating a new service before buying or subscribing.

Purchased View

(One-off task-based purchases exist)

When Shown

You have one or more active or pending purchases for this service — typically cleaning, repair, or maintenance tasks.

Layout

Left Column

• Same details and reviews as in Unpurchased view.

Right Column

• Properties with Service: Carousel of properties currently using this service. Selecting one filters its related activity.

• Activity Timeline: Cards showing purchase and task progress, e.g.:

  • Cleaning Scheduled

  • Cleaning Started

  • Cleaning Completed

  • Pending Payment Each card includes date/time stamps and assigned provider info when available.

• Add Property: Opens the purchase modal to order the same service for another property.

Re-purchase Flow

The “Buy Again” action allows you to place a new order for the same service (not change an existing one). It pre-fills the property and service for quick checkout.

Subscribed View

(Active subscriptions exist)

When Shown

You have at least one active subscription for this service — either directly or via your management tier.

Layout

Left Column

• Service overview with continuous-use examples (media, testimonials, etc.)

Right Column

• Properties with Subscription: Carousel showing which properties have the service active.

• Activity Timeline: Tracks subscription lifecycle events:

  • Subscription Started

  • Next Billing Date

  • Cancellation Pending

  • Subscription Cancelled

• Add Property: Opens the subscription modal to enable the service for another property.

Tier-Based Access

If your management plan includes this service (e.g., Guest Coordinator under a higher plan), those properties appear as subscribed automatically — even without individual subscription purchases.

Actions and Modals

Purchase / Subscribe Modal

• Opens from the sticky pricing bar (Unpurchased) or Add Property button (Purchased/Subscribed).

• Lets you:

  • Select a property

  • Complete purchase or subscription

• Once confirmed, the Activity and Property lists update automatically.

Add Property

• Shortcut for extending a service to additional properties.

• Keeps the user on the same page for seamless multi-property management.

Statuses and Indicators

Purchases (One-Off)

Status	Meaning
ACTIVE	The task is scheduled or underway.
PENDING_PAYMENT	Payment required before task starts.
COMPLETED	Task finished; may move to history view.
CANCELED	Task canceled; no longer appears in active lists.

Each task’s status appears in the Activity Timeline, with date/time and provider details.

Subscriptions

Status	Meaning
ACTIVE	Subscription is live and the service is enabled.
CANCELLATION_PENDING	Service remains active until the current billing cycle ends.
CANCELED	Subscription fully ended.
NEXT_BILLING	Displays upcoming renewal date and amount.

🧪 QA Testing Checklist

Structure

• Correct view (unpurchased / purchased / subscribed) appears based on user’s state.

• Header, overview, partner, and review sections display consistently.

Behavior

• Purchase modal opens with correct service pre-selected.

• “Buy Again” creates a new order (not modifying existing one).

• Activity timeline updates live after a purchase or subscription change.

• Subscription lifecycle events (start, cancel, renew) display correctly.

Visuals

• Status badges (ACTIVE, PENDING_PAYMENT, etc.) show proper colors.

• Add Property and Buy Again buttons visible only in applicable states.