@almadar/std 14.26.0 → 14.27.0

package/behaviors/registry/app/atoms/std-invoice.orb

@@ -90,10 +90,10 @@
           "linkedEntity": "InvoiceRecord",
           "emits": [
             {
-              "event": "VIEW",
+              "event": "OPEN_INVOICE",
               "payloadSchema": [
                 {
-                  "name": "invoiceId",
+                  "name": "id",
                   "type": "string",
                   "required": true
                 },
@@ -158,6 +158,9 @@
                 }
               ]
             },
+            {
+              "event": "CLOSE_VIEW"
+            },
             {
               "event": "SEND",
               "payloadSchema": [
@@ -390,7 +393,7 @@
                 "name": "browsing"
               },
               {
-                "name": "viewing"
+                "name": "viewing_single"
               },
               {
                 "name": "error"
@@ -426,11 +429,11 @@
                 ]
               },
               {
-                "key": "VIEW",
-                "name": "View",
+                "key": "OPEN_INVOICE",
+                "name": "Open Invoice",
                 "payloadSchema": [
                   {
-                    "name": "invoiceId",
+                    "name": "id",
                     "type": "string",
                     "required": true
                   },
@@ -440,28 +443,6 @@
                   }
                 ]
               },
-              {
-                "key": "SEND",
-                "name": "Send",
-                "payloadSchema": [
-                  {
-                    "name": "invoiceId",
-                    "type": "string",
-                    "required": true
-                  }
-                ]
-              },
-              {
-                "key": "MARK_PAID",
-                "name": "Mark Paid",
-                "payloadSchema": [
-                  {
-                    "name": "invoiceId",
-                    "type": "string",
-                    "required": true
-                  }
-                ]
-              },
               {
                 "key": "VOID",
                 "name": "Void",
@@ -473,22 +454,6 @@
                   }
                 ]
               },
-              {
-                "key": "REFUND",
-                "name": "Refund",
-                "payloadSchema": [
-                  {
-                    "name": "invoiceId",
-                    "type": "string",
-                    "required": true
-                  },
-                  {
-                    "name": "amount",
-                    "type": "number",
-                    "required": true
-                  }
-                ]
-              },
               {
                 "key": "InvoiceUpdated",
                 "name": "Invoice updated",
@@ -536,6 +501,48 @@
                     "type": "string"
                   }
                 ]
+              },
+              {
+                "key": "CLOSE_VIEW",
+                "name": "Close View"
+              },
+              {
+                "key": "SEND",
+                "name": "Send",
+                "payloadSchema": [
+                  {
+                    "name": "invoiceId",
+                    "type": "string",
+                    "required": true
+                  }
+                ]
+              },
+              {
+                "key": "MARK_PAID",
+                "name": "Mark Paid",
+                "payloadSchema": [
+                  {
+                    "name": "invoiceId",
+                    "type": "string",
+                    "required": true
+                  }
+                ]
+              },
+              {
+                "key": "REFUND",
+                "name": "Refund",
+                "payloadSchema": [
+                  {
+                    "name": "invoiceId",
+                    "type": "string",
+                    "required": true
+                  },
+                  {
+                    "name": "amount",
+                    "type": "number",
+                    "required": true
+                  }
+                ]
               }
             ],
             "transitions": [
@@ -558,10 +565,6 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "stack",
-                      "direction": "vertical",
-                      "align": "center",
-                      "gap": "md",
                       "className": "py-12",
                       "children": [
                         {
@@ -573,7 +576,11 @@
                           "type": "typography",
                           "color": "muted"
                         }
-                      ]
+                      ],
+                      "direction": "vertical",
+                      "align": "center",
+                      "type": "stack",
+                      "gap": "md"
                     }
                   ]
                 ]
@@ -588,9 +595,9 @@
                     "main",
                     {
                       "type": "stack",
-                      "direction": "vertical",
                       "children": [
                         {
+                          "type": "stack",
                           "direction": "horizontal",
                           "children": [
                             {
@@ -599,88 +606,101 @@
                             },
                             {
                               "content": "@config.title",
-                              "type": "typography",
-                              "variant": "h3"
+                              "variant": "h3",
+                              "type": "typography"
                             }
                           ],
                           "gap": "sm",
-                          "type": "stack"
-                        },
-                        {
-                          "type": "divider"
+                          "align": "center"
                         },
                         {
-                          "fields": [
+                          "children": [
                             {
-                              "variant": "caption",
-                              "name": "invoiceNumber",
-                              "label": "Invoice #"
+                              "value": "@payload.data.length",
+                              "type": "stat-display",
+                              "label": "Total invoices",
+                              "icon": "receipt"
                             },
                             {
-                              "label": "Customer",
-                              "name": "customerId",
-                              "variant": "caption"
+                              "label": "Outstanding",
+                              "value": "$28,400",
+                              "icon": "alert-triangle",
+                              "type": "stat-display"
                             },
                             {
-                              "name": "status",
-                              "label": "Status",
-                              "variant": "badge"
+                              "value": "$112,800",
+                              "icon": "dollar-sign",
+                              "type": "stat-display",
+                              "label": "Paid this month"
                             },
                             {
-                              "variant": "caption",
-                              "name": "total",
-                              "label": "Total"
-                            },
+                              "icon": "clock",
+                              "label": "Overdue",
+                              "value": "9",
+                              "type": "stat-display"
+                            }
+                          ],
+                          "cols": 4.0,
+                          "type": "simple-grid"
+                        },
+                        {
+                          "type": "divider"
+                        },
+                        {
+                          "cols": 1.0,
+                          "type": "data-grid",
+                          "itemActions": [
                             {
-                              "label": "Currency",
-                              "name": "currency",
-                              "variant": "badge"
+                              "variant": "primary",
+                              "label": "Open",
+                              "icon": "arrow-right",
+                              "event": "OPEN_INVOICE"
                             },
                             {
-                              "variant": "caption",
-                              "name": "dueAt",
-                              "label": "Due"
+                              "variant": "danger",
+                              "event": "VOID",
+                              "icon": "x",
+                              "label": "Void"
                             }
                           ],
-                          "itemActions": [
+                          "fields": [
                             {
-                              "label": "View",
-                              "event": "VIEW",
-                              "icon": "eye",
-                              "variant": "secondary"
+                              "label": "Invoice #",
+                              "name": "invoiceNumber",
+                              "variant": "caption"
                             },
                             {
-                              "label": "Send",
-                              "icon": "send",
-                              "event": "SEND",
-                              "variant": "primary"
+                              "label": "Customer",
+                              "variant": "caption",
+                              "name": "customerId"
                             },
                             {
-                              "variant": "primary",
-                              "icon": "check",
-                              "event": "MARK_PAID",
-                              "label": "Mark Paid"
+                              "variant": "badge",
+                              "name": "status",
+                              "label": "Status"
                             },
                             {
-                              "event": "VOID",
-                              "icon": "x",
-                              "variant": "danger",
-                              "label": "Void"
+                              "label": "Total",
+                              "name": "total",
+                              "variant": "caption"
                             },
                             {
-                              "label": "Refund",
-                              "icon": "rotate-ccw",
-                              "event": "REFUND",
-                              "variant": "danger"
+                              "label": "Currency",
+                              "variant": "badge",
+                              "name": "currency"
+                            },
+                            {
+                              "name": "dueAt",
+                              "label": "Due",
+                              "variant": "caption"
                             }
                           ],
                           "entity": "@payload.data",
-                          "gap": "sm",
-                          "cols": 1.0,
-                          "type": "data-grid"
+                          "gap": "sm"
                         }
                       ],
-                      "gap": "md"
+                      "gap": "md",
+                      "direction": "vertical"
                     }
                   ]
                 ]
@@ -695,32 +715,57 @@
                     "main",
                     {
                       "message": "@payload.error",
-                      "type": "alert",
-                      "variant": "error"
+                      "variant": "error",
+                      "type": "alert"
                     }
                   ]
                 ]
               },
               {
                 "from": "browsing",
-                "to": "viewing",
-                "event": "VIEW",
+                "to": "viewing_single",
+                "event": "OPEN_INVOICE",
                 "effects": [
                   [
                     "set",
                     "@entity.id",
-                    "@payload.invoiceId"
+                    "@payload.row.id"
                   ],
                   [
                     "set",
                     "@entity.invoiceNumber",
                     "@payload.row.invoiceNumber"
                   ],
+                  [
+                    "set",
+                    "@entity.customerId",
+                    "@payload.row.customerId"
+                  ],
                   [
                     "set",
                     "@entity.status",
                     "@payload.row.status"
                   ],
+                  [
+                    "set",
+                    "@entity.currency",
+                    "@payload.row.currency"
+                  ],
+                  [
+                    "set",
+                    "@entity.subtotal",
+                    "@payload.row.subtotal"
+                  ],
+                  [
+                    "set",
+                    "@entity.tax",
+                    "@payload.row.tax"
+                  ],
+                  [
+                    "set",
+                    "@entity.total",
+                    "@payload.row.total"
+                  ],
                   [
                     "set",
                     "@entity.issuedAt",
@@ -733,13 +778,8 @@
                   ],
                   [
                     "set",
-                    "@entity.customerId",
-                    "@payload.row.customerId"
-                  ],
-                  [
-                    "set",
-                    "@entity.currency",
-                    "@payload.row.currency"
+                    "@entity.paidAt",
+                    "@payload.row.paidAt"
                   ],
                   [
                     "set",
@@ -750,156 +790,189 @@
                     "render-ui",
                     "main",
                     {
-                      "gap": "md",
+                      "type": "stack",
                       "children": [
                         {
-                          "gap": "sm",
-                          "direction": "horizontal",
                           "children": [
                             {
-                              "name": "receipt",
-                              "type": "icon"
+                              "variant": "ghost",
+                              "type": "button",
+                              "action": "CLOSE_VIEW",
+                              "label": "Back"
+                            },
+                            {
+                              "type": "icon",
+                              "name": "receipt"
                             },
                             {
                               "type": "typography",
-                              "variant": "h3",
-                              "content": "@entity.invoiceNumber"
+                              "content": "@entity.invoiceNumber",
+                              "variant": "h3"
                             },
                             {
                               "label": "@entity.status",
                               "type": "badge",
-                              "variant": "secondary"
+                              "variant": "default"
                             }
                           ],
+                          "gap": "sm",
+                          "align": "center",
+                          "direction": "horizontal",
                           "type": "stack"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "direction": "horizontal",
-                          "gap": "lg",
-                          "type": "stack",
                           "children": [
                             {
+                              "gap": "md",
+                              "direction": "horizontal",
                               "children": [
                                 {
-                                  "type": "typography",
-                                  "content": "Issued",
                                   "variant": "caption",
+                                  "content": "Customer",
+                                  "type": "typography",
                                   "color": "muted"
                                 },
                                 {
-                                  "content": "@entity.issuedAt",
                                   "type": "typography",
-                                  "variant": "body2"
+                                  "variant": "body",
+                                  "content": "@entity.customerId"
                                 }
                               ],
-                              "type": "stack",
-                              "direction": "vertical",
-                              "gap": "xs"
+                              "type": "stack"
                             },
                             {
-                              "gap": "xs",
                               "type": "stack",
-                              "direction": "vertical",
+                              "gap": "md",
+                              "direction": "horizontal",
                               "children": [
                                 {
-                                  "type": "typography",
-                                  "color": "muted",
+                                  "content": "Currency",
                                   "variant": "caption",
-                                  "content": "Due"
+                                  "type": "typography",
+                                  "color": "muted"
                                 },
                                 {
                                   "type": "typography",
-                                  "content": "@entity.dueAt",
-                                  "variant": "body2"
+                                  "content": "@entity.currency",
+                                  "variant": "body"
                                 }
                               ]
                             },
                             {
-                              "direction": "vertical",
+                              "gap": "md",
+                              "type": "stack",
                               "children": [
                                 {
-                                  "type": "typography",
                                   "variant": "caption",
                                   "color": "muted",
-                                  "content": "Currency"
+                                  "type": "typography",
+                                  "content": "Notes"
                                 },
                                 {
-                                  "variant": "body2",
+                                  "content": "@entity.notes",
                                   "type": "typography",
-                                  "content": "@entity.currency"
+                                  "variant": "body"
                                 }
                               ],
-                              "type": "stack",
-                              "gap": "xs"
+                              "direction": "horizontal"
                             }
-                          ]
+                          ],
+                          "type": "stack",
+                          "direction": "vertical",
+                          "gap": "sm"
                         },
                         {
                           "type": "divider"
                         },
                         {
-                          "color": "muted",
-                          "type": "typography",
-                          "content": "@entity.notes",
-                          "variant": "body2"
+                          "type": "simple-grid",
+                          "cols": 4.0,
+                          "children": [
+                            {
+                              "label": "Subtotal",
+                              "value": "@entity.subtotal",
+                              "type": "stat-display",
+                              "icon": "dollar-sign"
+                            },
+                            {
+                              "icon": "percent",
+                              "type": "stat-display",
+                              "value": "@entity.tax",
+                              "label": "Tax"
+                            },
+                            {
+                              "icon": "dollar-sign",
+                              "type": "stat-display",
+                              "value": "@entity.total",
+                              "label": "Total"
+                            },
+                            {
+                              "label": "Due",
+                              "value": "@entity.dueAt",
+                              "icon": "calendar",
+                              "type": "stat-display"
+                            }
+                          ]
                         },
                         {
-                          "type": "stack",
+                          "direction": "horizontal",
                           "gap": "sm",
-                          "justify": "end",
+                          "align": "center",
+                          "type": "stack",
                           "children": [
                             {
+                              "variant": "primary",
                               "type": "button",
-                              "icon": "send",
-                              "label": "Send",
                               "action": "SEND",
-                              "variant": "primary"
+                              "label": "Send",
+                              "actionPayload": {
+                                "invoiceId": "@entity.id"
+                              }
                             },
                             {
-                              "icon": "check",
                               "label": "Mark Paid",
+                              "actionPayload": {
+                                "invoiceId": "@entity.id"
+                              },
                               "type": "button",
-                              "action": "MARK_PAID",
-                              "variant": "primary"
+                              "variant": "primary",
+                              "action": "MARK_PAID"
                             },
                             {
-                              "label": "Void",
-                              "variant": "danger",
-                              "icon": "x",
+                              "type": "button",
+                              "actionPayload": {
+                                "invoiceId": "@entity.id"
+                              },
                               "action": "VOID",
-                              "type": "button"
+                              "variant": "danger",
+                              "label": "Void"
                             },
                             {
+                              "action": "REFUND",
+                              "actionPayload": {
+                                "amount": 0.0,
+                                "invoiceId": "@entity.id"
+                              },
                               "label": "Refund",
-                              "type": "button",
-                              "icon": "rotate-ccw",
                               "variant": "danger",
-                              "action": "REFUND"
-                            },
-                            {
-                              "variant": "secondary",
-                              "icon": "arrow-left",
-                              "label": "Back",
-                              "action": "INIT",
                               "type": "button"
                             }
-                          ],
-                          "direction": "horizontal"
+                          ]
                         }
                       ],
-                      "type": "stack",
-                      "direction": "vertical"
+                      "direction": "vertical",
+                      "gap": "md"
                     }
                   ]
                 ]
               },
               {
                 "from": "browsing",
-                "to": "browsing",
-                "event": "SEND",
+                "to": "loading",
+                "event": "VOID",
                 "effects": [
                   [
                     "set",
@@ -909,12 +982,7 @@
                   [
                     "set",
                     "@entity.status",
-                    "sent"
-                  ],
-                  [
-                    "set",
-                    "@entity.issuedAt",
-                    "now"
+                    "void"
                   ],
                   [
                     "persist",
@@ -923,85 +991,47 @@
                     "@entity",
                     {
                       "emit": {
-                        "failure": "InvoiceUpdateFailed",
-                        "success": "InvoiceUpdated"
-                      }
-                    }
-                  ],
-                  [
-                    "call-service",
-                    "email",
-                    "send",
-                    {
-                      "invoiceId": "@payload.invoiceId"
-                    },
-                    {
-                      "emit": {
-                        "failure": "InvoiceUpdateFailed",
-                        "success": "InvoiceUpdated"
+                        "success": "InvoiceUpdated",
+                        "failure": "InvoiceUpdateFailed"
                       }
                     }
-                  ]
-                ]
-              },
-              {
-                "from": "browsing",
-                "to": "browsing",
-                "event": "MARK_PAID",
-                "effects": [
-                  [
-                    "set",
-                    "@entity.id",
-                    "@payload.invoiceId"
-                  ],
-                  [
-                    "set",
-                    "@entity.status",
-                    "paid"
                   ],
                   [
-                    "set",
-                    "@entity.paidAt",
-                    "now"
-                  ],
-                  [
-                    "persist",
-                    "update",
-                    "InvoiceRecord",
-                    "@entity",
+                    "render-ui",
+                    "main",
                     {
-                      "emit": {
-                        "failure": "InvoiceUpdateFailed",
-                        "success": "InvoiceUpdated"
-                      }
+                      "gap": "md",
+                      "type": "stack",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "content": "Voiding invoice…",
+                          "variant": "caption",
+                          "type": "typography",
+                          "color": "muted"
+                        }
+                      ],
+                      "direction": "vertical",
+                      "className": "py-12"
                     }
                   ]
                 ]
               },
               {
                 "from": "browsing",
-                "to": "browsing",
-                "event": "VOID",
+                "to": "loading",
+                "event": "InvoiceUpdated",
                 "effects": [
                   [
-                    "set",
-                    "@entity.id",
-                    "@payload.invoiceId"
-                  ],
-                  [
-                    "set",
-                    "@entity.status",
-                    "void"
-                  ],
-                  [
-                    "persist",
-                    "update",
+                    "fetch",
                     "InvoiceRecord",
-                    "@entity",
                     {
                       "emit": {
-                        "success": "InvoiceUpdated",
-                        "failure": "InvoiceUpdateFailed"
+                        "failure": "InvoiceLoadFailed",
+                        "success": "InvoiceLoaded"
                       }
                     }
                   ]
@@ -1010,26 +1040,15 @@
               {
                 "from": "browsing",
                 "to": "browsing",
-                "event": "REFUND",
+                "event": "InvoiceUpdateFailed",
                 "effects": [
                   [
-                    "set",
-                    "@entity.id",
-                    "@payload.invoiceId"
-                  ],
-                  [
-                    "call-service",
-                    "stripe",
-                    "refund",
-                    {
-                      "invoiceId": "@payload.invoiceId",
-                      "amount": "@payload.amount"
-                    },
+                    "render-ui",
+                    "main",
                     {
-                      "emit": {
-                        "success": "InvoiceRefunded",
-                        "failure": "InvoiceRefundFailed"
-                      }
+                      "variant": "error",
+                      "type": "alert",
+                      "message": "@payload.error"
                     }
                   ]
                 ]
@@ -1037,7 +1056,7 @@
               {
                 "from": "browsing",
                 "to": "loading",
-                "event": "InvoiceUpdated",
+                "event": "InvoiceRefunded",
                 "effects": [
                   [
                     "fetch",
@@ -1054,23 +1073,23 @@
               {
                 "from": "browsing",
                 "to": "browsing",
-                "event": "InvoiceUpdateFailed",
+                "event": "InvoiceRefundFailed",
                 "effects": [
                   [
                     "render-ui",
                     "main",
                     {
+                      "variant": "error",
                       "message": "@payload.error",
-                      "type": "alert",
-                      "variant": "error"
+                      "type": "alert"
                     }
                   ]
                 ]
               },
               {
-                "from": "browsing",
+                "from": "viewing_single",
                 "to": "loading",
-                "event": "InvoiceRefunded",
+                "event": "CLOSE_VIEW",
                 "effects": [
                   [
                     "fetch",
@@ -1081,56 +1100,240 @@
                         "success": "InvoiceLoaded"
                       }
                     }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "className": "py-12",
+                      "gap": "md",
+                      "type": "stack",
+                      "direction": "vertical",
+                      "align": "center",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "content": "Loading invoices…",
+                          "type": "typography",
+                          "variant": "caption",
+                          "color": "muted"
+                        }
+                      ]
+                    }
                   ]
                 ]
               },
               {
-                "from": "browsing",
-                "to": "browsing",
-                "event": "InvoiceRefundFailed",
+                "from": "viewing_single",
+                "to": "loading",
+                "event": "SEND",
                 "effects": [
+                  [
+                    "set",
+                    "@entity.id",
+                    "@payload.invoiceId"
+                  ],
+                  [
+                    "set",
+                    "@entity.status",
+                    "sent"
+                  ],
+                  [
+                    "set",
+                    "@entity.issuedAt",
+                    "now"
+                  ],
+                  [
+                    "persist",
+                    "update",
+                    "InvoiceRecord",
+                    "@entity",
+                    {
+                      "emit": {
+                        "failure": "InvoiceUpdateFailed",
+                        "success": "InvoiceUpdated"
+                      }
+                    }
+                  ],
                   [
                     "render-ui",
                     "main",
                     {
-                      "variant": "error",
-                      "message": "@payload.error",
-                      "type": "alert"
+                      "direction": "vertical",
+                      "gap": "md",
+                      "align": "center",
+                      "type": "stack",
+                      "className": "py-12",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "type": "typography",
+                          "content": "Sending invoice…",
+                          "variant": "caption",
+                          "color": "muted"
+                        }
+                      ]
                     }
                   ]
                 ]
               },
               {
-                "from": "viewing",
+                "from": "viewing_single",
                 "to": "loading",
-                "event": "INIT",
+                "event": "MARK_PAID",
                 "effects": [
                   [
-                    "fetch",
+                    "set",
+                    "@entity.id",
+                    "@payload.invoiceId"
+                  ],
+                  [
+                    "set",
+                    "@entity.status",
+                    "paid"
+                  ],
+                  [
+                    "set",
+                    "@entity.paidAt",
+                    "now"
+                  ],
+                  [
+                    "persist",
+                    "update",
                     "InvoiceRecord",
+                    "@entity",
                     {
                       "emit": {
-                        "success": "InvoiceLoaded",
-                        "failure": "InvoiceLoadFailed"
+                        "success": "InvoiceUpdated",
+                        "failure": "InvoiceUpdateFailed"
                       }
                     }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "type": "stack",
+                      "align": "center",
+                      "direction": "vertical",
+                      "className": "py-12",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "color": "muted",
+                          "type": "typography",
+                          "variant": "caption",
+                          "content": "Marking invoice paid…"
+                        }
+                      ],
+                      "gap": "md"
+                    }
                   ]
                 ]
               },
               {
-                "from": "viewing",
+                "from": "viewing_single",
                 "to": "loading",
-                "event": "InvoiceUpdated",
+                "event": "VOID",
                 "effects": [
                   [
-                    "fetch",
+                    "set",
+                    "@entity.id",
+                    "@payload.invoiceId"
+                  ],
+                  [
+                    "set",
+                    "@entity.status",
+                    "void"
+                  ],
+                  [
+                    "persist",
+                    "update",
                     "InvoiceRecord",
+                    "@entity",
                     {
                       "emit": {
-                        "success": "InvoiceLoaded",
-                        "failure": "InvoiceLoadFailed"
+                        "failure": "InvoiceUpdateFailed",
+                        "success": "InvoiceUpdated"
+                      }
+                    }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "gap": "md",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "variant": "caption",
+                          "type": "typography",
+                          "color": "muted",
+                          "content": "Voiding invoice…"
+                        }
+                      ],
+                      "direction": "vertical",
+                      "className": "py-12",
+                      "align": "center",
+                      "type": "stack"
+                    }
+                  ]
+                ]
+              },
+              {
+                "from": "viewing_single",
+                "to": "loading",
+                "event": "REFUND",
+                "effects": [
+                  [
+                    "set",
+                    "@entity.id",
+                    "@payload.invoiceId"
+                  ],
+                  [
+                    "call-service",
+                    "stripe",
+                    "refund",
+                    {
+                      "amount": "@payload.amount",
+                      "invoiceId": "@payload.invoiceId"
+                    },
+                    {
+                      "emit": {
+                        "success": "InvoiceRefunded",
+                        "failure": "InvoiceRefundFailed"
                       }
                     }
+                  ],
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "align": "center",
+                      "className": "py-12",
+                      "direction": "vertical",
+                      "children": [
+                        {
+                          "type": "spinner"
+                        },
+                        {
+                          "content": "Refunding invoice…",
+                          "variant": "caption",
+                          "type": "typography",
+                          "color": "muted"
+                        }
+                      ],
+                      "type": "stack",
+                      "gap": "md"
+                    }
                   ]
                 ]
               },
@@ -1153,8 +1356,8 @@
                     "render-ui",
                     "main",
                     {
-                      "type": "spinner",
-                      "size": "sm"
+                      "size": "sm",
+                      "type": "spinner"
                     }
                   ]
                 ]
@@ -1162,13 +1365,13 @@
             ]
           },
           "config": {
-            "title": {
-              "type": "string",
-              "default": "Invoices"
-            },
             "refundTiersJson": {
               "type": "string",
               "default": "[]"
+            },
+            "title": {
+              "type": "string",
+              "default": "Invoices"
             }
           },
           "scope": "collection"