{
  "chatvox_widget": 1,
  "name": "Order tracker",
  "instructions": "",
  "widget": {
    "source": "<Card size=\"sm\">\n  <Row gap={2} align=\"start\" justify=\"between\">\n    <Title value={`Order #${number}`} size=\"sm\" />\n    <Badge\n      label={status === \"pending\" ? \"Pending payment\" : status === \"processing\" ? \"Processing\" : status === \"on-hold\" ? \"On hold\" : status === \"completed\" ? \"Completed\" : status === \"cancelled\" ? \"Cancelled\" : status === \"refunded\" ? \"Refunded\" : status === \"failed\" ? \"Failed\" : status}\n      color={status === \"completed\" ? \"success\" : status === \"on-hold\" || status === \"pending\" ? \"warning\" : status === \"cancelled\" || status === \"refunded\" || status === \"failed\" ? \"error\" : \"primary\"}\n      variant=\"soft\"\n      pill={true}\n    />\n  </Row>\n  <Box border={true} radius=\"lg\" padding={2} gap={2}>\n    <Text value={status === \"pending\" ? \"Awaiting payment.\" : status === \"processing\" ? \"Payment received. Your order is being prepared.\" : status === \"on-hold\" ? \"On hold while payment is confirmed.\" : status === \"completed\" ? \"Order completed by the store.\" : status === \"cancelled\" ? \"This order was cancelled.\" : status === \"refunded\" ? \"This order was refunded.\" : status === \"failed\" ? \"Payment failed. Please view your order.\" : \"\"} size=\"sm\" weight=\"medium\" />\n    <Row gap={2}>\n      <Col flex={1} gap={2}>\n        <Box height={6} radius=\"full\" border=\"primary\" background=\"primary\" />\n        <Caption value=\"Ordered\" color=\"foreground\" weight=\"medium\" />\n      </Col>\n      <Col flex={1} gap={2}>\n        <Box height={6} radius=\"full\" border={(status === \"processing\" || status === \"completed\") ? \"primary\" : true} background={(status === \"processing\" || status === \"completed\") ? \"primary\" : \"card\"} />\n        <Caption value=\"Processing\" color={(status === \"processing\" || status === \"completed\") ? \"foreground\" : \"muted\"} weight={(status === \"processing\" || status === \"completed\") ? \"medium\" : \"normal\"} />\n      </Col>\n      <Col flex={1} gap={2}>\n        <Box height={6} radius=\"full\" border={status === \"completed\" ? \"primary\" : true} background={status === \"completed\" ? \"primary\" : \"card\"} />\n        <Caption value=\"Completed\" color={status === \"completed\" ? \"foreground\" : \"muted\"} weight={status === \"completed\" ? \"medium\" : \"normal\"} />\n      </Col>\n    </Row>\n  </Box>\n  <Col gap={2}>\n    {items.map((item) => (\n      <Row gap={2} align=\"center\">\n        <Image src={item.image.src} alt={item.name} size={32} radius=\"md\" frame={true} />\n        <Col flex={1}>\n          <Text value={`${item.name} × ${item.quantity}`} weight=\"medium\" truncate={true} />\n        </Col>\n        <Text value={`${currency}${item.total}`} weight=\"medium\" />\n      </Row>\n    ))}\n  </Col>\n  <Row gap={2} align=\"center\" justify=\"between\">\n    <Caption value=\"Total\" />\n    <Text value={`${currency}${total}`} weight=\"semibold\" />\n  </Row>\n  <Row gap={2}>\n    <Col flex={1}>\n      <Button label=\"View order\" variant=\"solid\" size=\"sm\" block={true} iconStart=\"truck\" onClickAction={{ functionName: \"viewOrder\" }} />\n    </Col>\n    <Col flex={1}>\n      <Button label=\"Get help\" variant=\"outline\" size=\"sm\" block={true} iconStart=\"message-circle\" onClickAction={{ functionName: \"askAboutOrder\" }} />\n    </Col>\n  </Row>\n</Card>",
    "fields": [
      {
        "key": "number",
        "type": "string",
        "description": "WooCommerce order number"
      },
      {
        "key": "status",
        "type": "string",
        "description": "WooCommerce status slug, like processing"
      },
      {
        "key": "total",
        "type": "string",
        "description": "Order total, like 80.00"
      },
      {
        "key": "currency",
        "type": "string",
        "description": "Currency symbol, like $"
      },
      {
        "key": "items",
        "type": "list",
        "description": "WooCommerce line items"
      }
    ],
    "states": [],
    "functions": [
      {
        "name": "viewOrder",
        "type": "link",
        "url": "https://your-store.example/my-account/view-order/{{number}}/",
        "then": {
          "type": "none"
        }
      },
      {
        "name": "askAboutOrder",
        "type": "send_message",
        "then": {
          "type": "none"
        },
        "message": "I have a question about order {{number}}"
      }
    ],
    "examples": {
      "default": "{\n  \"number\": \"1042\",\n  \"status\": \"processing\",\n  \"total\": \"80.00\",\n  \"currency\": \"$\",\n  \"items\": [\n    {\n      \"name\": \"Canvas tote\",\n      \"quantity\": 1,\n      \"total\": \"32.00\",\n      \"image\": {\n        \"src\": \"https://images.unsplash.com/photo-1544816155-12df9643f363?w=160&h=160&fit=crop\"\n      }\n    },\n    {\n      \"name\": \"Linen shirt\",\n      \"quantity\": 1,\n      \"total\": \"48.00\",\n      \"image\": {\n        \"src\": \"https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=160&h=160&fit=crop\"\n      }\n    }\n  ]\n}",
      "named": []
    }
  }
}