Skip to main content

User Flow Sequence Diagrams

This document contains Mermaid sequence diagrams for the Photobooth Web App user flows.

Use Case Diagram​

Billing and Access Flow​

One-Time Activation vs Subscription​

Subscription Renewal and Refund Lifecycle​

Main Photobooth Flow​

Complete User Journey​

Customization Flow (Admin Access)​

Voucher System Flow​

Bluetooth Print Flow​

Offline Mode Flow​

Settings Persistence Flow​

Image Processing Pipeline​

[PENDING] In-Development Flows (Phase 3)​

[PENDING] Flow 1: Tenant Payment & Booth Activation​

  1. Purchase: Tenant selects a subscription or one-time license plan.
  2. Payment: The system creates a QRIS payment through Xendit for the tenant account.
  3. Verification: The frontend polls the backend or waits for the payment webhook to confirm success.
  4. Activation: Once payment succeeds, the tenant's subscription/license is activated.
  5. Usage: The photobooth app is now unlocked for event use, including printing and softcopy sharing according to plan entitlements.

[PENDING] Flow 2: UI/UX & Frame Customization (Admin/Tenant flow)​

  1. Entry: Tenant accesses the /customization settings page.
  2. Frame Builder: Tenant enters the "Advanced Frame Editor".
    • They upload a base background image.
    • They define "Camera Zones" (where the user's photos will dynamically appear). They can resize and position these zones.
    • They add overlay graphics (e.g., a "Happy Birthday" text image) over the camera zones by adjusting the z-index/layers.
  3. Text & Colors: Tenant navigates to the "Text Settings" tab.
    • They pick a custom HEX color using a color picker for different sections (header/footer).
    • They select a custom font from a preview list.
  4. Live Preview: All changes are immediately reflected in a live preview pane showing a sample completed layout.
  5. Save: Tenant saves this as a "Preset" for users to choose from.

[PENDING] Flow 3: End-User Print & Softcopy (Booth flow)​

  1. Completion: User finishes their photo session and arrives at the image-final screen.
  2. Eligibility Check: The system checks that the booth's tenant license/subscription is active.
  3. Fulfillment: If the booth is active, the app prints immediately or shows the download QR according to the tenant's configuration.
  4. Download: The user scans the Download QR code and is taken to a hosted page (e.g., Cloudflare R2 / AWS S3 link) to save their digital copy.
  5. No Payment: The end-user is never prompted to pay at the booth for print/download.

[PENDING] Flow 4: Hardware Support / Printer Switching​

  1. Settings: Admin enters /settings/printer.
  2. Selection: Admin chooses the active printer target from a dropdown: [Niimbot B21, Canon Selphy CP1500, Epson POS...].
  3. Calibration: The application automatically adjusts the canvas rendering dimensions to match the DPI and paper size of the selected printer.
  4. Test: Admin clicks "Print Test Page" to verify connection and sizing.