std-cart

Level: Molecule | Entity: CartItem | Persistence: persistent

2 states, 8 events, 6 transitions

Live Preview

orbital CartItemOrbital {
  entity CartItem [persistent: cartitems] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    pendingId : string
  }
  trait CartItemCartBrowse -> CartItem [interaction] {
    initial: browsing
    state browsing {
      INIT -> browsing
        (fetch CartItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "shopping-cart", size: "lg" }, { type: "typography", content: "Shopping Cart", variant: "h2" }] }, { type: "button", label: "Add Item", event: "ADD_ITEM", variant: "primary", icon: "plus" }] }, { type: "divider" }, { type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "Items", value: ["array/len", "@entity"], icon: "package" }, { type: "stat-display", label: "Subtotal", value: ["array/len", "@entity"], icon: "dollar-sign" }, { type: "stat-display", label: "Total", value: ["array/len", "@entity"], icon: "receipt" }] }, { type: "divider" }, { type: "data-grid", entity: "CartItem", emptyIcon: "inbox", emptyTitle: "Your cart is empty", emptyDescription: "Add items to get started.", itemActions: [{ label: "Remove", event: "REQUEST_REMOVE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "shopping-cart" }, { name: "description", label: "Description", variant: "caption", format: "currency" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "button", label: "Proceed to Checkout", event: "PROCEED_CHECKOUT", variant: "primary", icon: "arrow-right" }] })
      SAVE -> browsing
        (fetch CartItem)
      CONFIRM_REMOVE -> browsing
        (fetch CartItem)
      PROCEED_CHECKOUT -> checkout
        (fetch CartItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Checkout", variant: "h2" }] }, { type: "divider" }, { type: "data-grid", entity: "CartItem", emptyIcon: "inbox", emptyTitle: "Your cart is empty", emptyDescription: "Add items to get started.", itemActions: [{ label: "Remove", event: "REQUEST_REMOVE", variant: "danger", size: "sm" }], columns: [{ name: "name", label: "Name", variant: "h4", icon: "shopping-cart" }, { name: "description", label: "Description", variant: "caption", format: "currency" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Back to Cart", event: "BACK_TO_CART", variant: "ghost", icon: "arrow-left" }, { type: "button", label: "Confirm Order", event: "CONFIRM_ORDER", variant: "primary", icon: "check" }] }] })
    }
    state checkout {
      BACK_TO_CART -> browsing
        (fetch CartItem)
      CONFIRM_ORDER -> browsing
        (fetch CartItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Order Confirmed", variant: "h2" }, { type: "typography", content: "Your order has been placed successfully.", variant: "body" }, { type: "button", label: "Continue Shopping", event: "INIT", variant: "primary" }] })
    }
    listens {
      * CONFIRM_REMOVE -> CONFIRM_REMOVE
    }
  }
  trait CartItemAddItem -> CartItem [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch CartItem)
      ADD_ITEM -> open
        (fetch CartItem)
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "plus-circle", size: "md" }, { type: "typography", content: "Add Item", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "CartItem", mode: "create", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["name", "description", "status"] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist create CartItem @payload.data)
        (fetch CartItem)
        (render-ui modal null)
        (notify "CartItem created successfully")
    }
  }
  trait CartItemRemoveConfirm -> CartItem [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch CartItem)
      REQUEST_REMOVE -> confirming
        (set @entity.pendingId @payload.id)
        (fetch CartItem { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "alert-triangle", size: "md" }, { type: "typography", content: "Remove Item", variant: "h3" }] }, { type: "divider" }, { type: "alert", variant: "danger", message: "Are you sure you want to remove this item from your cart?" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Remove", event: "CONFIRM_REMOVE", variant: "danger", icon: "check" }] }] })
    }
    state confirming {
      CONFIRM_REMOVE -> idle
        (persist delete CartItem @payload.id)
        (fetch CartItem)
        (render-ui modal null)
        (fetch CartItem)
        (emit CONFIRM_REMOVE)
        (notify "CartItem deleted successfully")
      CANCEL -> idle
        (render-ui modal null)
        (fetch CartItem)
      CLOSE -> idle
        (render-ui modal null)
        (fetch CartItem)
    }
    emits {
      CONFIRM_REMOVE
    }
  }
  page "/cart" -> CartItemCartBrowse, CartItemAddItem, CartItemRemoveConfirm
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
pendingId	string	""

States

State	Type
browsing	Initial
checkout	-

Events

Event	Payload
INIT	-
ADD_ITEM	-
SAVE	data: object
REQUEST_REMOVE	id: string
CONFIRM_REMOVE	data: object
PROCEED_CHECKOUT	-
BACK_TO_CART	-
CONFIRM_ORDER	-

Transitions

From	Event	To	Effects
browsing	INIT	browsing	2 effects
browsing	SAVE	browsing	1 effect
browsing	CONFIRM_REMOVE	browsing	1 effect
browsing	PROCEED_CHECKOUT	checkout	2 effects
checkout	BACK_TO_CART	browsing	1 effect
checkout	CONFIRM_ORDER	browsing	2 effects

Listens

• [object Object]