Skip to main content
Was this helpful?

Enterprise Reservation Screenshot Runbook

Use this runbook when you need fresh screenshots for the enterprise reservation system. It pairs product walkthroughs with MCP evidence so the user guide and developer guide stay in sync.

Runtime Setup​

  1. Start the backend, normally on http://127.0.0.1:8081.
  2. Start the frontend, normally on http://127.0.0.1:4173.
  3. Seed or prepare:
    • one Store-plan owner with a single organisation
    • one Enterprise-plan owner with multiple organisations
    • at least one organisation with Stripe connected in test mode
    • one managed resource whose owner has a blocking calendar event
  4. Use docs-safe names, emails, and phone numbers only.

Where To Store Images​

User and admin workflow captures​

Store these under docs/assets/user-guide/enterprise-reservation-system/.

Required set:

  • overview-active-organisation-switcher.png
  • overview-public-booking-service-selection.png
  • admin-create-organisation.png
  • admin-stripe-disconnected-state.png
  • admin-stripe-connected-state.png
  • admin-stripe-onboarding-status.png
  • admin-resource-type-pricing.png
  • admin-paid-booking-warning.png
  • admin-public-booking-branding.png
  • staff-resource-list-and-calendar-blocking.png
  • staff-reservation-details-panel.png
  • customer-booking-details-form.png
  • customer-payment-pending-step.png
  • customer-stripe-checkout-redirect.png
  • customer-booking-confirmation.png

MCP and agent captures​

Store these under docs/assets/agents/enterprise-reservations/.

Required set:

  • mcp-agent-organisation-scope.png
  • mcp-tools-list-organisations-and-reservations.png
  • mcp-availability-tool-response.png
  • mcp-create-reservation-non-payment-response.png
  • mcp-payment-required-denial.png

Capture Sequence​

1. Active organisation and plan behavior​

  • Sign in with the Enterprise-plan owner.
  • Open the organisation switcher.
  • Show at least two organisations and the current active selection.
  • Capture overview-active-organisation-switcher.png.

2. Organisation creation​

  • Open the create-organisation form.
  • Use docs-safe sample data with slug and branding fields visible.
  • Capture admin-create-organisation.png.

3. Stripe connection​

  • Open the organisation billing area.
  • Capture one disconnected state with onboarding action visible as admin-stripe-disconnected-state.png.
  • Capture one connected state with charges, payouts, and account status visible as admin-stripe-connected-state.png.
  • Capture the default currency form state as admin-billing-settings.png.
  • Do not show secrets, live account numbers, or internal IDs.
  • Capture admin-stripe-onboarding-status.png.

4. Resource-type pricing​

  • Open a resource type configured with pricing.
  • Show pricingEnabled, paymentRequired, priceAmount, and priceCurrency.
  • If Stripe is disconnected for the selected organisation, capture the warning state as admin-paid-booking-warning.png.
  • Capture admin-resource-type-pricing.png.

5. Public booking branding​

  • Open the organisation public booking settings or branded public page.
  • Show logo, headline, and service list.
  • Capture admin-public-booking-branding.png.

6. Staff blocking and reservation detail​

  • Open the internal reservation calendar with a managed resource.
  • Ensure at least one slot is blocked by a linked calendar event.
  • Capture staff-resource-list-and-calendar-blocking.png.
  • Open a reservation detail panel with payment status visible.
  • Capture staff-reservation-details-panel.png.

7. Public booking without and with payment​

  • Open /book/:slug.
  • Capture the customer details form as customer-booking-details-form.png.
  • For a payment-required service, stop on the PrimeCal payment step and capture customer-payment-pending-step.png.
  • For a payment-required service, capture the pre-redirect state or return banner as customer-stripe-checkout-redirect.png.
  • Complete a successful booking and capture customer-booking-confirmation.png.

Optional Playwright Capture​

When local docs mocks are enough, run:

E2E_DOCS_SCREENSHOTS=true npm run test:e2e:web -- --grep "Docs screenshots"

Use that pass to refresh the connected, disconnected, and payment-step screenshots quickly before finishing manual MCP/browser evidence.

8. MCP evidence​

  • Open the agent settings page and capture an organisation/resource-type-scoped agent as mcp-agent-organisation-scope.png.
  • Capture tools/list or the in-app generated MCP configuration including the reservation tools as mcp-tools-list-organisations-and-reservations.png.
  • Run availability for a blocked day and capture the response as mcp-availability-tool-response.png.
  • Run a successful non-payment reservation creation and capture the result as mcp-create-reservation-non-payment-response.png.
  • Run a payment-required attempt and capture the denial or restricted flow as mcp-payment-required-denial.png.

Quality Bar​

  • Keep browser chrome cropped tightly enough that the workflow is obvious.
  • Use consistent window sizes for a clean step-by-step sequence.
  • Replace real email addresses, phone numbers, and customer names with docs-safe values.
  • Never capture Stripe API keys, webhook signatures, checkout session URLs with secrets, or internal database identifiers unless a page explicitly requires a redacted example.