@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/workspace/conversation.module.css

@@ -0,0 +1,191 @@
+/* The centre pane: its thread scrolls inside, the pill docked at its foot.
+   Overlap = dock pads 12 + 16 around the pill (32 + 2 × 4 + 2 × 1 = 42). */
+.pane {
+  --dock-overlap: calc(12px + 42px + 16px);
+  position: relative;
+  container: conversation / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-base);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.titleBlock {
+  display: grid;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+}
+
+.subject {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.metaItem {
+  display: inline-block;
+  min-width: 0;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.refButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 20px;
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.refButton:hover {
+  background: var(--adm-hover);
+}
+
+.refButton:focus-visible {
+  outline: 2px solid var(--focus-ring);
+}
+
+.headerActions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+}
+
+.scroll:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.threadWrap {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+  padding: 16px 16px calc(var(--dock-overlap) + 16px);
+}
+
+.loading {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+}
+
+/* Docked over the thread's foot; the pill floats, the composer is a card. */
+.dock {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  margin-top: calc(-1 * var(--dock-overlap));
+  padding: 12px 16px 16px;
+  background: var(--bg-base);
+  pointer-events: none;
+}
+
+.dock > * {
+  pointer-events: auto;
+}
+
+.dock[data-open] {
+  margin-top: 0;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-base);
+}
+
+.dock[data-open] > * {
+  max-height: min(60vh, 520px);
+  overflow-y: auto;
+}
+
+.summary {
+  display: grid;
+  gap: 8px;
+}
+
+.summaryText,
+.summaryFacts,
+.summaryLine {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.summaryText {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.summaryLine {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summaryFacts {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.summaryVote {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll {
+    scroll-behavior: auto;
+  }
+}

package/dist/admin/support/workspace/details-pane.js

@@ -0,0 +1,99 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { X } from "lucide-react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button
+} from "@withpotter/ui-kit";
+import { Skeleton } from "../../_ui";
+import { middle } from "../support-options";
+import { sourceFeedbackId } from "./case-facts";
+import { CaseProperties } from "./case-properties";
+import { MerchantCard } from "./merchant-card";
+import { RelatedCases, useWorkspaceCases } from "./related-cases";
+import styles from "./details.module.css";
+const Count = ({ n }) => n === void 0 ? null : /* @__PURE__ */ jsx("span", { className: styles.sectionCount, children: n });
+function DetailsPane({
+  item,
+  canManage,
+  onOpen,
+  onClose
+}) {
+  const others = useWorkspaceCases(item?.tenantId ?? "");
+  const feedbackId = item ? sourceFeedbackId(item) : null;
+  const otherCount = others.data ? others.data.total - (others.data.rows.some((r) => r.id === item?.id) ? 1 : 0) : void 0;
+  return /* @__PURE__ */ jsxs("aside", { id: "case-details", className: styles.pane, "aria-label": "Case details", children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.head, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles.title, title: item?.subject, children: item?.subject ?? "Case details" }),
+      onClose && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Hide details",
+          onClick: onClose,
+          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.scroll, children: !item ? /* @__PURE__ */ jsxs("div", { className: styles.loading, children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 200 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 160 })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CaseProperties, { item, canManage }),
+      /* @__PURE__ */ jsxs(
+        Accordion,
+        {
+          type: "multiple",
+          defaultValue: ["merchant", "feedback", "others"],
+          className: styles.sections,
+          children: [
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "merchant", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: "Merchant" }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(MerchantCard, { item }) })
+            ] }),
+            feedbackId && /* @__PURE__ */ jsxs(AccordionItem, { value: "feedback", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxs("span", { className: styles.sectionTitle, children: [
+                "Linked feedback ",
+                /* @__PURE__ */ jsx(Count, { n: 1 })
+              ] }) }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: "/admin/feedback",
+                  className: styles.feedbackLink,
+                  children: [
+                    "Opened from feedback ",
+                    middle(feedbackId)
+                  ]
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(AccordionItem, { value: "others", children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxs("span", { className: styles.sectionTitle, children: [
+                "Other cases from this workspace ",
+                /* @__PURE__ */ jsx(Count, { n: otherCount })
+              ] }) }),
+              /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(
+                RelatedCases,
+                {
+                  caseId: item.id,
+                  cases: others,
+                  onOpen
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+export {
+  DetailsPane
+};
+//# sourceMappingURL=details-pane.js.map

package/dist/admin/support/workspace/details-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/details-pane.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { X } from 'lucide-react';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Button,\n} from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { Skeleton } from '../../_ui';\nimport { middle } from '../support-options';\nimport { sourceFeedbackId } from './case-facts';\nimport { CaseProperties } from './case-properties';\nimport { MerchantCard } from './merchant-card';\nimport { RelatedCases, useWorkspaceCases } from './related-cases';\nimport styles from './details.module.css';\n\nconst Count = ({ n }: { n: number | undefined }) =>\n  n === undefined ? null : <span className={styles.sectionCount}>{n}</span>;\n\n/**\n * The right pane: the case's fields, then the merchant, linked feedback and\n * the workspace's other cases as sections that fold.\n */\nexport function DetailsPane({\n  item,\n  canManage,\n  onOpen,\n  onClose,\n}: {\n  item: PlatformServiceCase | undefined;\n  canManage: boolean;\n  onOpen: (id: string) => void;\n  /** Shown where the pane overlays the conversation. */\n  onClose: (() => void) | null;\n}) {\n  const others = useWorkspaceCases(item?.tenantId ?? '');\n  const feedbackId = item ? sourceFeedbackId(item) : null;\n  const otherCount = others.data\n    ? others.data.total -\n      (others.data.rows.some((r) => r.id === item?.id) ? 1 : 0)\n    : undefined;\n\n  return (\n    <aside id=\"case-details\" className={styles.pane} aria-label=\"Case details\">\n      <header className={styles.head}>\n        <h2 className={styles.title} title={item?.subject}>\n          {item?.subject ?? 'Case details'}\n        </h2>\n        {onClose && (\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            aria-label=\"Hide details\"\n            onClick={onClose}\n          >\n            <X className=\"size-4\" />\n          </Button>\n        )}\n      </header>\n      <div className={styles.scroll}>\n        {!item ? (\n          <div className={styles.loading}>\n            <Skeleton height={200} />\n            <Skeleton height={160} />\n          </div>\n        ) : (\n          <>\n            <CaseProperties item={item} canManage={canManage} />\n            <Accordion\n              type=\"multiple\"\n              defaultValue={['merchant', 'feedback', 'others']}\n              className={styles.sections}\n            >\n              <AccordionItem value=\"merchant\">\n                <AccordionTrigger>Merchant</AccordionTrigger>\n                <AccordionContent>\n                  <MerchantCard item={item} />\n                </AccordionContent>\n              </AccordionItem>\n              {feedbackId && (\n                <AccordionItem value=\"feedback\">\n                  <AccordionTrigger>\n                    <span className={styles.sectionTitle}>\n                      Linked feedback <Count n={1} />\n                    </span>\n                  </AccordionTrigger>\n                  <AccordionContent>\n                    <Link\n                      href=\"/admin/feedback\"\n                      className={styles.feedbackLink}\n                    >\n                      Opened from feedback {middle(feedbackId)}\n                    </Link>\n                  </AccordionContent>\n                </AccordionItem>\n              )}\n              <AccordionItem value=\"others\">\n                <AccordionTrigger>\n                  <span className={styles.sectionTitle}>\n                    Other cases from this workspace <Count n={otherCount} />\n                  </span>\n                </AccordionTrigger>\n                <AccordionContent>\n                  <RelatedCases\n                    caseId={item.id}\n                    cases={others}\n                    onOpen={onOpen}\n                  />\n                </AccordionContent>\n              </AccordionItem>\n            </Accordion>\n          </>\n        )}\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";AAqB2B,SAiDjB,UAjDiB,KA2BrB,YA3BqB;AAnB3B,OAAO,UAAU;AACjB,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,yBAAyB;AAChD,OAAO,YAAY;AAEnB,MAAM,QAAQ,CAAC,EAAE,EAAE,MACjB,MAAM,SAAY,OAAO,oBAAC,UAAK,WAAW,OAAO,cAAe,aAAE;AAM7D,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,SAAS,kBAAkB,MAAM,YAAY,EAAE;AACrD,QAAM,aAAa,OAAO,iBAAiB,IAAI,IAAI;AACnD,QAAM,aAAa,OAAO,OACtB,OAAO,KAAK,SACX,OAAO,KAAK,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,MAAM,EAAE,IAAI,IAAI,KACvD;AAEJ,SACE,qBAAC,WAAM,IAAG,gBAAe,WAAW,OAAO,MAAM,cAAW,gBAC1D;AAAA,yBAAC,YAAO,WAAW,OAAO,MACxB;AAAA,0BAAC,QAAG,WAAW,OAAO,OAAO,OAAO,MAAM,SACvC,gBAAM,WAAW,gBACpB;AAAA,MACC,WACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,cAAW;AAAA,UACX,SAAS;AAAA,UAET,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,MACxB;AAAA,OAEJ;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,QACpB,WAAC,OACA,qBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,0BAAC,YAAS,QAAQ,KAAK;AAAA,MACvB,oBAAC,YAAS,QAAQ,KAAK;AAAA,OACzB,IAEA,iCACE;AAAA,0BAAC,kBAAe,MAAY,WAAsB;AAAA,MAClD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAc,CAAC,YAAY,YAAY,QAAQ;AAAA,UAC/C,WAAW,OAAO;AAAA,UAElB;AAAA,iCAAC,iBAAc,OAAM,YACnB;AAAA,kCAAC,oBAAiB,sBAAQ;AAAA,cAC1B,oBAAC,oBACC,8BAAC,gBAAa,MAAY,GAC5B;AAAA,eACF;AAAA,YACC,cACC,qBAAC,iBAAc,OAAM,YACnB;AAAA,kCAAC,oBACC,+BAAC,UAAK,WAAW,OAAO,cAAc;AAAA;AAAA,gBACpB,oBAAC,SAAM,GAAG,GAAG;AAAA,iBAC/B,GACF;AAAA,cACA,oBAAC,oBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAW,OAAO;AAAA,kBACnB;AAAA;AAAA,oBACuB,OAAO,UAAU;AAAA;AAAA;AAAA,cACzC,GACF;AAAA,eACF;AAAA,YAEF,qBAAC,iBAAc,OAAM,UACnB;AAAA,kCAAC,oBACC,+BAAC,UAAK,WAAW,OAAO,cAAc;AAAA;AAAA,gBACJ,oBAAC,SAAM,GAAG,YAAY;AAAA,iBACxD,GACF;AAAA,cACA,oBAAC,oBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,KAAK;AAAA,kBACb,OAAO;AAAA,kBACP;AAAA;AAAA,cACF,GACF;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/support/workspace/details.module.css

@@ -0,0 +1,137 @@
+/* The right pane: label/value rows, the merchant, and folding sections. */
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-base);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scroll {
+  flex: 1;
+  min-height: 0;
+  padding: 8px 16px 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.loading {
+  display: grid;
+  gap: 12px;
+  padding-top: 8px;
+}
+
+.properties,
+.facts {
+  display: grid;
+  margin: 0;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+
+.label {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.value {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+}
+
+.truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.sections {
+  margin-top: 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.sectionTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sectionCount {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+}
+
+.feedbackLink:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.feedbackLink {
+  color: var(--accent-ink, var(--accent-primary));
+  font-size: 13px;
+  line-height: 20px;
+}

package/dist/admin/support/workspace/list.module.css

@@ -0,0 +1,193 @@
+/* The workspace's case list: a floating panel of four-line cards. */
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--bg-base);
+}
+
+.head {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.headRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.viewSelect {
+  min-width: 0;
+  max-width: 200px;
+  font-weight: 600;
+}
+
+.sortSelect {
+  width: 152px;
+  margin-left: auto;
+}
+
+.count {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+}
+
+.hint {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.cards {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+}
+
+.card {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 12px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.card:hover {
+  background: var(--adm-hover);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.card[data-selected] {
+  background: var(--adm-tint);
+}
+
+.card[data-selected]::before {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 0;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--accent-primary);
+  content: '';
+}
+
+.line,
+.signals,
+.signalsEnd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.who,
+.subject,
+.preview {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.who {
+  flex: 1;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.ref {
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.subject {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.preview {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.signals {
+  justify-content: space-between;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.signalsEnd {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.holder {
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty {
+  padding: 24px 16px;
+  text-align: center;
+}
+
+.foot {
+  padding: 0 12px 12px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* The merchant's country beside their name, at the name's size. */
+.country {
+  flex-shrink: 0;
+  max-width: 40%;
+  font-size: 12px;
+  line-height: 16px;
+}

package/dist/admin/support/workspace/merchant-card.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Button } from "@withpotter/ui-kit";
+import { CountryLabel } from "../../_ui/country-label";
+import { dateTime, humanize } from "../support-options";
+import { countryOf } from "./case-facts";
+import styles from "./details.module.css";
+import card from "./merchant.module.css";
+function MerchantCard({ item }) {
+  const sender = item.supportContext?.sender;
+  const workspace = item.supportContext?.workspace;
+  const name = sender?.name || item.reporterName || "Unknown sender";
+  const email = sender?.email || item.reporterEmail;
+  const business = workspace?.businessName || item.tenant?.businessName || "Unknown workspace";
+  const tenantId = workspace?.tenantId || item.tenantId;
+  const facts = [
+    ["Account", sender?.status ? humanize(sender.status) : "Not available"],
+    ["Last sign-in", dateTime(sender?.lastLoginAt)],
+    [
+      "Business",
+      workspace?.industry ? humanize(workspace.industry) : "Not set"
+    ],
+    ["Plan", workspace?.plan || "Not set"],
+    [
+      "Billing",
+      workspace?.billingStatus ? humanize(workspace.billingStatus) : "Not set"
+    ],
+    ["Joined", dateTime(workspace?.joinedAt)]
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: card.merchant, children: [
+    /* @__PURE__ */ jsxs("div", { className: card.personText, children: [
+      /* @__PURE__ */ jsxs("span", { className: card.personName, title: name, children: [
+        name,
+        sender?.emailVerified && /* @__PURE__ */ jsx("span", { className: card.verified, children: "Verified" })
+      ] }),
+      email && /* @__PURE__ */ jsx("a", { className: card.mail, href: `mailto:${email}`, title: email, children: email })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: card.personText, children: [
+      /* @__PURE__ */ jsxs("span", { className: card.personName, title: business, children: [
+        business,
+        /* @__PURE__ */ jsx(CountryLabel, { ...countryOf(item), muted: true })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: styles.muted, children: [
+        workspace?.slug || item.tenant?.slug ? `/${workspace?.slug || item.tenant?.slug}` : "Workspace",
+        workspace?.status && /* @__PURE__ */ jsx("span", { children: humanize(workspace.status) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("dl", { className: styles.facts, children: facts.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+      /* @__PURE__ */ jsx("dt", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx("dd", { className: styles.value, title: value, children: value })
+    ] }, label)) }),
+    /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx(Link, { href: `/admin/tenants/${tenantId}`, children: "Open Merchant 360" }) })
+  ] });
+}
+export {
+  MerchantCard
+};
+//# sourceMappingURL=merchant-card.js.map

package/dist/admin/support/workspace/merchant-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/support/workspace/merchant-card.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { Button } from '@withpotter/ui-kit';\nimport type { PlatformServiceCase } from '@withpotter/lib/admin-service-operations-api';\nimport { CountryLabel } from '../../_ui/country-label';\nimport { dateTime, humanize } from '../support-options';\nimport { countryOf } from './case-facts';\nimport styles from './details.module.css';\nimport card from './merchant.module.css';\n\n/** Who wrote in and their workspace, from the case's support context. */\nexport function MerchantCard({ item }: { item: PlatformServiceCase }) {\n  const sender = item.supportContext?.sender;\n  const workspace = item.supportContext?.workspace;\n  const name = sender?.name || item.reporterName || 'Unknown sender';\n  const email = sender?.email || item.reporterEmail;\n  const business =\n    workspace?.businessName || item.tenant?.businessName || 'Unknown workspace';\n  const tenantId = workspace?.tenantId || item.tenantId;\n  const facts: Array<[string, string]> = [\n    ['Account', sender?.status ? humanize(sender.status) : 'Not available'],\n    ['Last sign-in', dateTime(sender?.lastLoginAt)],\n    [\n      'Business',\n      workspace?.industry ? humanize(workspace.industry) : 'Not set',\n    ],\n    ['Plan', workspace?.plan || 'Not set'],\n    [\n      'Billing',\n      workspace?.billingStatus ? humanize(workspace.billingStatus) : 'Not set',\n    ],\n    ['Joined', dateTime(workspace?.joinedAt)],\n  ];\n\n  return (\n    <div className={card.merchant}>\n      <div className={card.personText}>\n        <span className={card.personName} title={name}>\n          {name}\n          {sender?.emailVerified && (\n            <span className={card.verified}>Verified</span>\n          )}\n        </span>\n        {email && (\n          <a className={card.mail} href={`mailto:${email}`} title={email}>\n            {email}\n          </a>\n        )}\n      </div>\n      <div className={card.personText}>\n        <span className={card.personName} title={business}>\n          {business}\n          <CountryLabel {...countryOf(item)} muted />\n        </span>\n        <span className={styles.muted}>\n          {workspace?.slug || item.tenant?.slug\n            ? `/${workspace?.slug || item.tenant?.slug}`\n            : 'Workspace'}\n          {workspace?.status && <span>{humanize(workspace.status)}</span>}\n        </span>\n      </div>\n      <dl className={styles.facts}>\n        {facts.map(([label, value]) => (\n          <div key={label} className={styles.row}>\n            <dt className={styles.label}>{label}</dt>\n            <dd className={styles.value} title={value}>\n              {value}\n            </dd>\n          </div>\n        ))}\n      </dl>\n      <Button asChild variant=\"secondary\">\n        <Link href={`/admin/tenants/${tenantId}`}>Open Merchant 360</Link>\n      </Button>\n    </div>\n  );\n}\n"],"mappings":"AAoCQ,SAGI,KAHJ;AApCR,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgB;AACnC,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AACnB,OAAO,UAAU;AAGV,SAAS,aAAa,EAAE,KAAK,GAAkC;AACpE,QAAM,SAAS,KAAK,gBAAgB;AACpC,QAAM,YAAY,KAAK,gBAAgB;AACvC,QAAM,OAAO,QAAQ,QAAQ,KAAK,gBAAgB;AAClD,QAAM,QAAQ,QAAQ,SAAS,KAAK;AACpC,QAAM,WACJ,WAAW,gBAAgB,KAAK,QAAQ,gBAAgB;AAC1D,QAAM,WAAW,WAAW,YAAY,KAAK;AAC7C,QAAM,QAAiC;AAAA,IACrC,CAAC,WAAW,QAAQ,SAAS,SAAS,OAAO,MAAM,IAAI,eAAe;AAAA,IACtE,CAAC,gBAAgB,SAAS,QAAQ,WAAW,CAAC;AAAA,IAC9C;AAAA,MACE;AAAA,MACA,WAAW,WAAW,SAAS,UAAU,QAAQ,IAAI;AAAA,IACvD;AAAA,IACA,CAAC,QAAQ,WAAW,QAAQ,SAAS;AAAA,IACrC;AAAA,MACE;AAAA,MACA,WAAW,gBAAgB,SAAS,UAAU,aAAa,IAAI;AAAA,IACjE;AAAA,IACA,CAAC,UAAU,SAAS,WAAW,QAAQ,CAAC;AAAA,EAC1C;AAEA,SACE,qBAAC,SAAI,WAAW,KAAK,UACnB;AAAA,yBAAC,SAAI,WAAW,KAAK,YACnB;AAAA,2BAAC,UAAK,WAAW,KAAK,YAAY,OAAO,MACtC;AAAA;AAAA,QACA,QAAQ,iBACP,oBAAC,UAAK,WAAW,KAAK,UAAU,sBAAQ;AAAA,SAE5C;AAAA,MACC,SACC,oBAAC,OAAE,WAAW,KAAK,MAAM,MAAM,UAAU,KAAK,IAAI,OAAO,OACtD,iBACH;AAAA,OAEJ;AAAA,IACA,qBAAC,SAAI,WAAW,KAAK,YACnB;AAAA,2BAAC,UAAK,WAAW,KAAK,YAAY,OAAO,UACtC;AAAA;AAAA,QACD,oBAAC,gBAAc,GAAG,UAAU,IAAI,GAAG,OAAK,MAAC;AAAA,SAC3C;AAAA,MACA,qBAAC,UAAK,WAAW,OAAO,OACrB;AAAA,mBAAW,QAAQ,KAAK,QAAQ,OAC7B,IAAI,WAAW,QAAQ,KAAK,QAAQ,IAAI,KACxC;AAAA,QACH,WAAW,UAAU,oBAAC,UAAM,mBAAS,UAAU,MAAM,GAAE;AAAA,SAC1D;AAAA,OACF;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,OACnB,gBAAM,IAAI,CAAC,CAAC,OAAO,KAAK,MACvB,qBAAC,SAAgB,WAAW,OAAO,KACjC;AAAA,0BAAC,QAAG,WAAW,OAAO,OAAQ,iBAAM;AAAA,MACpC,oBAAC,QAAG,WAAW,OAAO,OAAO,OAAO,OACjC,iBACH;AAAA,SAJQ,KAKV,CACD,GACH;AAAA,IACA,oBAAC,UAAO,SAAO,MAAC,SAAQ,aACtB,8BAAC,QAAK,MAAM,kBAAkB,QAAQ,IAAI,+BAAiB,GAC7D;AAAA,KACF;AAEJ;","names":[]}