@drawbridge/components 0.1.4 → 0.1.6

package/dist/dashboard/steps.js

@@ -29,10 +29,12 @@ var steps_exports = {};
 __export(steps_exports, {
   default: () => steps_default,
   groupTitle: () => groupTitle,
+  replyExcerpt: () => replyExcerpt,
   rowLabel: () => rowLabel
 });
 module.exports = __toCommonJS(steps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_query = require("@tanstack/react-query");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 var import_accordion = __toESM(require("./accordion"));
 var import_paged = __toESM(require("./paged"));
@@ -57,6 +59,14 @@ const indicatorType = (status) => {
   if (status === "partial" || status === "skipped") return "warning";
   return "inactive";
 };
+const replyExcerpt = (response, length = 300) => {
+  const wrapped = response && typeof response === "object" && !Array.isArray(response) && Object.keys(response).length === 1 && "body" in response;
+  const reply = wrapped ? response.body : response;
+  if (reply === void 0 || reply === null) return null;
+  const text = (typeof reply === "string" ? reply : JSON.stringify(reply)).replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > length ? text.slice(0, length) + "\u2026" : text;
+};
 const StepItem = ({
   updatedAt,
   error: chunkError,
@@ -69,6 +79,7 @@ const StepItem = ({
 }) => {
   const error = chunkError || status === "failed" && message || null;
   const notice = error || status === "skipped" && message || null;
+  const reply = error ? replyExcerpt(response) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -136,13 +147,51 @@ const StepItem = ({
                     }
                   )
                 },
-                children: notice ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_card_task.default,
+                children: notice ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
                   {
                     ...{
-                      message: notice,
-                      type: error ? "error" : "warning"
-                    }
+                      className: "space-y-3"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_card_task.default,
+                        {
+                          ...{
+                            message: notice,
+                            type: error ? "error" : "warning"
+                          }
+                        }
+                      ),
+                      reply && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          ...{
+                            className: "space-y-1"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs text-gray-dark"
+                                },
+                                children: "Response"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs break-words"
+                                },
+                                children: reply
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_code_formatter.default,
@@ -175,11 +224,15 @@ const groupTitle = ({ count, email, items, kind, pending }) => {
   const entries = count + " new " + (count === 1 ? "entry" : "entries");
   return "Team notification \u2014 " + entries + (pending ? ", sending" : "");
 };
-const rowLabel = ({ item, kind }) => {
-  if (kind !== "notify") return item == null ? void 0 : item.slug;
+const rowLabel = ({ item, kind, labels = [] }) => {
+  var _a;
+  if (kind !== "notify") return ((_a = labels.find((option) => option.value === (item == null ? void 0 : item.slug))) == null ? void 0 : _a.key) || (item == null ? void 0 : item.slug);
   return NOTIFY_LABELS[item == null ? void 0 : item.status] || NOTIFY_LABELS.succeeded;
 };
-const Group = ({ group }) => {
+const Group = ({
+  group,
+  labels
+}) => {
   const { items, kind } = group;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -206,7 +259,7 @@ const Group = ({ group }) => {
           {
             ...{
               ...item,
-              label: rowLabel({ item, kind })
+              label: rowLabel({ item, kind, labels })
             }
           },
           key
@@ -220,6 +273,8 @@ const Steps = ({
   limit = 24,
   organization
 }) => {
+  var _a, _b, _c, _d;
+  const labels = (_d = (_c = (_b = (_a = (0, import_react_query.useQueryClient)().getQueryData(["app"])) == null ? void 0 : _a.enums) == null ? void 0 : _b.step) == null ? void 0 : _c.type) == null ? void 0 : _d.options;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_paged.default,
     {
@@ -245,7 +300,8 @@ const Steps = ({
             Group,
             {
               ...{
-                group
+                group,
+                labels
               }
             },
             key
@@ -259,5 +315,6 @@ var steps_default = Steps;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   groupTitle,
+  replyExcerpt,
   rowLabel
 });

package/dist/dashboard/steps.mjs

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
 import { capitalize, formatDateString } from "@drawbridge/drawbridge-utils";
 import Accordion from "./accordion.mjs";
 import Paged from "./paged.mjs";
@@ -23,6 +24,14 @@ const indicatorType = (status) => {
   if (status === "partial" || status === "skipped") return "warning";
   return "inactive";
 };
+const replyExcerpt = (response, length = 300) => {
+  const wrapped = response && typeof response === "object" && !Array.isArray(response) && Object.keys(response).length === 1 && "body" in response;
+  const reply = wrapped ? response.body : response;
+  if (reply === void 0 || reply === null) return null;
+  const text = (typeof reply === "string" ? reply : JSON.stringify(reply)).replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, " ").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  if (!text) return null;
+  return text.length > length ? text.slice(0, length) + "\u2026" : text;
+};
 const StepItem = ({
   updatedAt,
   error: chunkError,
@@ -35,6 +44,7 @@ const StepItem = ({
 }) => {
   const error = chunkError || status === "failed" && message || null;
   const notice = error || status === "skipped" && message || null;
+  const reply = error ? replyExcerpt(response) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -102,13 +112,51 @@ const StepItem = ({
                     }
                   )
                 },
-                children: notice ? /* @__PURE__ */ jsx(
-                  CardTask,
+                children: notice ? /* @__PURE__ */ jsxs(
+                  "div",
                   {
                     ...{
-                      message: notice,
-                      type: error ? "error" : "warning"
-                    }
+                      className: "space-y-3"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        CardTask,
+                        {
+                          ...{
+                            message: notice,
+                            type: error ? "error" : "warning"
+                          }
+                        }
+                      ),
+                      reply && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ...{
+                            className: "space-y-1"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs text-gray-dark"
+                                },
+                                children: "Response"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                ...{
+                                  className: "text-xs break-words"
+                                },
+                                children: reply
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
                   }
                 ) : /* @__PURE__ */ jsx(
                   CodeFormater,
@@ -141,11 +189,15 @@ const groupTitle = ({ count, email, items, kind, pending }) => {
   const entries = count + " new " + (count === 1 ? "entry" : "entries");
   return "Team notification \u2014 " + entries + (pending ? ", sending" : "");
 };
-const rowLabel = ({ item, kind }) => {
-  if (kind !== "notify") return item == null ? void 0 : item.slug;
+const rowLabel = ({ item, kind, labels = [] }) => {
+  var _a;
+  if (kind !== "notify") return ((_a = labels.find((option) => option.value === (item == null ? void 0 : item.slug))) == null ? void 0 : _a.key) || (item == null ? void 0 : item.slug);
   return NOTIFY_LABELS[item == null ? void 0 : item.status] || NOTIFY_LABELS.succeeded;
 };
-const Group = ({ group }) => {
+const Group = ({
+  group,
+  labels
+}) => {
   const { items, kind } = group;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
@@ -172,7 +224,7 @@ const Group = ({ group }) => {
           {
             ...{
               ...item,
-              label: rowLabel({ item, kind })
+              label: rowLabel({ item, kind, labels })
             }
           },
           key
@@ -186,6 +238,8 @@ const Steps = ({
   limit = 24,
   organization
 }) => {
+  var _a, _b, _c, _d;
+  const labels = (_d = (_c = (_b = (_a = useQueryClient().getQueryData(["app"])) == null ? void 0 : _a.enums) == null ? void 0 : _b.step) == null ? void 0 : _c.type) == null ? void 0 : _d.options;
   return /* @__PURE__ */ jsx(
     Paged,
     {
@@ -211,7 +265,8 @@ const Steps = ({
             Group,
             {
               ...{
-                group
+                group,
+                labels
               }
             },
             key
@@ -225,5 +280,6 @@ var steps_default = Steps;
 export {
   steps_default as default,
   groupTitle,
+  replyExcerpt,
   rowLabel
 };

package/dist/dashboard/table.js

@@ -35,6 +35,7 @@ __export(table_exports, {
   TableContainer: () => TableContainer,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
+  currencyCell: () => currencyCell,
   dateCell: () => dateCell,
   dateTimeCell: () => dateTimeCell,
   default: () => table_default,
@@ -94,6 +95,14 @@ const rateCell = ({ getValue, row }) => {
   if (((_a = row == null ? void 0 : row.original) == null ? void 0 : _a.type) === "redemption") return "\u2014";
   return rate || rate === 0 ? rate + "%" : "\u2014";
 };
+const currencyCell = ({ getValue, row }) => {
+  var _a;
+  return (0, import_drawbridge_utils.formatCurrency)({
+    // A null code would reach Intl and throw; undefined takes the USD default.
+    code: ((_a = row == null ? void 0 : row.original) == null ? void 0 : _a.currency) || void 0,
+    value: getValue() || 0
+  });
+};
 const dateTimeCell = ({ getValue }) => {
   const value = getValue();
   return value ? (0, import_drawbridge_utils.formatDateString)({
@@ -759,6 +768,7 @@ var table_default = Table;
   TableContainer,
   TableHeader,
   TableRow,
+  currencyCell,
   dateCell,
   dateTimeCell,
   rateCell

package/dist/dashboard/table.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useQueryClient } from "@tanstack/react-query";
-import { formatDateString } from "@drawbridge/drawbridge-utils";
+import { formatCurrency, formatDateString } from "@drawbridge/drawbridge-utils";
 import { request } from "@drawbridge/drawbridge-utils/fetch";
 import Link from "./link.mjs";
 import { forwardRef, useMemo } from "react";
@@ -52,6 +52,14 @@ const rateCell = ({ getValue, row }) => {
   if (((_a = row == null ? void 0 : row.original) == null ? void 0 : _a.type) === "redemption") return "\u2014";
   return rate || rate === 0 ? rate + "%" : "\u2014";
 };
+const currencyCell = ({ getValue, row }) => {
+  var _a;
+  return formatCurrency({
+    // A null code would reach Intl and throw; undefined takes the USD default.
+    code: ((_a = row == null ? void 0 : row.original) == null ? void 0 : _a.currency) || void 0,
+    value: getValue() || 0
+  });
+};
 const dateTimeCell = ({ getValue }) => {
   const value = getValue();
   return value ? formatDateString({
@@ -716,6 +724,7 @@ export {
   TableContainer,
   TableHeader,
   TableRow,
+  currencyCell,
   dateCell,
   dateTimeCell,
   table_default as default,

package/dist/dashboard/template-dashboard.js

@@ -30,6 +30,7 @@ __export(template_dashboard_exports, {
   Refetch: () => Refetch,
   TemplateDashboardError: () => TemplateDashboardError,
   TemplateDashboardResource: () => TemplateDashboardResource,
+  TemplateDashboardTasks: () => TemplateDashboardTasks,
   default: () => template_dashboard_default
 });
 module.exports = __toCommonJS(template_dashboard_exports);
@@ -382,55 +383,74 @@ const TemplateDashboardTasks = ({
   });
   const array = [...items];
   const first = array.shift();
-  const openAll = () => {
-    open({
-      title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "span",
-        {
-          ...{
-            className: "flex items-center space-x-3"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Next steps" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_badge.default,
-              {
-                ...{
-                  type: "warning"
-                },
-                children: array.length + 1
-              }
-            )
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ...{
-            className: "p-6"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_list.default,
+  const nextSteps = () => ({
+    title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "span",
+      {
+        ...{
+          className: "flex items-center space-x-3"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Next steps" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_badge.default,
             {
               ...{
-                items: [
-                  {
-                    ...first,
-                    onClick: () => close()
-                  },
-                  ...array.map((props) => ({
-                    ...props,
-                    onClick: () => close()
-                  }))
-                ]
-              }
+                type: "warning"
+              },
+              children: array.length + 1
             }
           )
-        }
-      )
-    });
+        ]
+      }
+    ),
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: "p-6"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_list.default,
+          {
+            ...{
+              items: [
+                {
+                  ...first,
+                  onClick: () => close()
+                },
+                ...array.map((props) => ({
+                  ...props,
+                  onClick: () => close()
+                }))
+              ]
+            }
+          }
+        )
+      }
+    )
+  });
+  const shown = (0, import_react.useRef)(null);
+  const openAll = () => {
+    const props = nextSteps();
+    shown.current = props.children;
+    open(props);
   };
+  (0, import_react.useEffect)(
+    () => {
+      const drawer = queryClient.getQueryData(["drawer"]);
+      if (!shown.current || !(drawer == null ? void 0 : drawer.active) || drawer.children !== shown.current) return;
+      if (!first) {
+        shown.current = null;
+        close();
+        return;
+      }
+      openAll();
+    },
+    // The tasks are the trigger; the rest follows them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [items]
+  );
   if (first) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -620,19 +640,23 @@ const TemplateDashboardResource = ({
   refetchOnMount,
   ...chrome
 }) => {
+  const dynamic = Object.values(chrome).some((value) => value instanceof Function);
   const errorHandler = error || ((query) => {
     var _a, _b, _c;
-    if (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 || (0, import_fetch.isTransientError)(query == null ? void 0 : query.error)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TemplateDashboard, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      TemplateDashboardError,
-      {
-        ...{
-          error: {
-            ...(_b = query == null ? void 0 : query.error) == null ? void 0 : _b.data,
-            message: (_c = query == null ? void 0 : query.error) == null ? void 0 : _c.message
+    if (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 || (0, import_fetch.isTransientError)(query == null ? void 0 : query.error)) {
+      const panel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        TemplateDashboardError,
+        {
+          ...{
+            error: {
+              ...(_b = query == null ? void 0 : query.error) == null ? void 0 : _b.data,
+              message: (_c = query == null ? void 0 : query.error) == null ? void 0 : _c.message
+            }
           }
         }
-      }
-    ) });
+      );
+      return dynamic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TemplateDashboard, { children: panel }) : panel;
+    }
     (0, import_navigation.notFound)();
   });
   const provider = {
@@ -654,7 +678,6 @@ const TemplateDashboardResource = ({
     }
   };
   const resolve = (value, data) => value instanceof Function ? value(data) : value;
-  const dynamic = Object.values(chrome).some((value) => value instanceof Function);
   if (!dynamic) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TemplateDashboard,
     {
@@ -730,5 +753,6 @@ var template_dashboard_default = TemplateDashboard;
 0 && (module.exports = {
   Refetch,
   TemplateDashboardError,
-  TemplateDashboardResource
+  TemplateDashboardResource,
+  TemplateDashboardTasks
 });