@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/payout-providers/page.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Banner, Button } from "@withpotter/ui-kit";
+import {
+  platformAdminApi
+} from "@withpotter/platform-admin";
+import { AdmLoading, EmptyState, PageHeader, Panel } from "../_ui";
+import { AddFlow } from "./add-flow";
+import { AttentionList } from "./attention-list";
+import { ProviderDetail } from "./provider-detail";
+import { ProviderList } from "./provider-list";
+import { errorText } from "./shared";
+const QUERY_KEY = ["platform-admin", "payout-integrations"];
+function PayoutProvidersPage() {
+  const queryClient = useQueryClient();
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: QUERY_KEY,
+    queryFn: () => platformAdminApi.payoutIntegrations()
+  });
+  const [picked, setPicked] = useState(null);
+  const [adding, setAdding] = useState(false);
+  const items = data ?? [];
+  const selected = items.find((item) => item.key === picked) ?? items.find((item) => item.active) ?? items[0];
+  const refresh = () => void queryClient.invalidateQueries({ queryKey: QUERY_KEY });
+  const adopt = (next) => queryClient.setQueryData(
+    QUERY_KEY,
+    (current) => current?.map((item) => item.key === next.key ? next : item)
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: "Payout providers",
+        description: "How merchant withdrawals are sent. Connect a provider, check it, then make it active.",
+        actions: /* @__PURE__ */ jsx(Button, { onClick: () => setAdding(true), children: "Add a flow" })
+      }
+    ),
+    /* @__PURE__ */ jsx(AttentionList, {}),
+    isLoading && /* @__PURE__ */ jsx(AdmLoading, {}),
+    isError && /* @__PURE__ */ jsx(Banner, { tone: "error", children: errorText(error) }),
+    !isLoading && !isError && /* @__PURE__ */ jsxs("div", { className: "adm-grid", children: [
+      selected && /* @__PURE__ */ jsx("div", { className: "adm-span-4", children: /* @__PURE__ */ jsx(
+        ProviderList,
+        {
+          items,
+          selected: selected.key,
+          onSelect: (key) => {
+            setPicked(key);
+            setAdding(false);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: selected ? "adm-span-8" : "adm-span-12", children: [
+        adding && /* @__PURE__ */ jsx(
+          AddFlow,
+          {
+            onCancel: () => setAdding(false),
+            onCreated: (flow) => {
+              queryClient.setQueryData(
+                QUERY_KEY,
+                (current) => [...current ?? [], flow]
+              );
+              setPicked(flow.key);
+              setAdding(false);
+            }
+          }
+        ),
+        selected && !adding && /* @__PURE__ */ jsx(
+          ProviderDetail,
+          {
+            integration: selected,
+            onChange: adopt,
+            onRefresh: refresh,
+            onDeleted: () => setPicked(null)
+          },
+          selected.key
+        ),
+        !selected && !adding && /* @__PURE__ */ jsx(Panel, { title: "Flows", count: 0, children: /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            title: "No flows yet",
+            description: "Add one to start sending payouts."
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  PayoutProvidersPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/payout-providers/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/payout-providers/page.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { Banner, Button } from '@withpotter/ui-kit';\nimport {\n  platformAdminApi,\n  type PayoutIntegration,\n} from '@withpotter/platform-admin';\nimport { AdmLoading, EmptyState, PageHeader, Panel } from '../_ui';\nimport { AddFlow } from './add-flow';\nimport { AttentionList } from './attention-list';\nimport { ProviderDetail } from './provider-detail';\nimport { ProviderList } from './provider-list';\nimport { errorText } from './shared';\n\nconst QUERY_KEY = ['platform-admin', 'payout-integrations'];\n\nexport default function PayoutProvidersPage() {\n  const queryClient = useQueryClient();\n  const { data, isLoading, isError, error } = useQuery({\n    queryKey: QUERY_KEY,\n    queryFn: () => platformAdminApi.payoutIntegrations(),\n  });\n  const [picked, setPicked] = useState<string | null>(null);\n  const [adding, setAdding] = useState(false);\n\n  const items = data ?? [];\n  const selected =\n    items.find((item) => item.key === picked) ??\n    items.find((item) => item.active) ??\n    items[0];\n  const refresh = () =>\n    void queryClient.invalidateQueries({ queryKey: QUERY_KEY });\n  // A change returns the whole provider, so show it at once without waiting for a refetch.\n  const adopt = (next: PayoutIntegration) =>\n    queryClient.setQueryData<PayoutIntegration[]>(QUERY_KEY, (current) =>\n      current?.map((item) => (item.key === next.key ? next : item)),\n    );\n\n  return (\n    <div>\n      <PageHeader\n        title=\"Payout providers\"\n        description=\"How merchant withdrawals are sent. Connect a provider, check it, then make it active.\"\n        actions={<Button onClick={() => setAdding(true)}>Add a flow</Button>}\n      />\n\n      <AttentionList />\n\n      {isLoading && <AdmLoading />}\n      {isError && <Banner tone=\"error\">{errorText(error)}</Banner>}\n\n      {!isLoading && !isError && (\n        <div className=\"adm-grid\">\n          {selected && (\n            <div className=\"adm-span-4\">\n              <ProviderList\n                items={items}\n                selected={selected.key}\n                onSelect={(key) => {\n                  setPicked(key);\n                  setAdding(false);\n                }}\n              />\n            </div>\n          )}\n          <div className={selected ? 'adm-span-8' : 'adm-span-12'}>\n            {adding && (\n              <AddFlow\n                onCancel={() => setAdding(false)}\n                onCreated={(flow) => {\n                  queryClient.setQueryData<PayoutIntegration[]>(\n                    QUERY_KEY,\n                    (current) => [...(current ?? []), flow],\n                  );\n                  setPicked(flow.key);\n                  setAdding(false);\n                }}\n              />\n            )}\n            {selected && !adding && (\n              <ProviderDetail\n                key={selected.key}\n                integration={selected}\n                onChange={adopt}\n                onRefresh={refresh}\n                onDeleted={() => setPicked(null)}\n              />\n            )}\n            {!selected && !adding && (\n              <Panel title=\"Flows\" count={0}>\n                <EmptyState\n                  title=\"No flows yet\"\n                  description=\"Add one to start sending payouts.\"\n                />\n              </Panel>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6CiB,cAsBP,YAtBO;AA3CjB,SAAS,gBAAgB;AACzB,SAAS,UAAU,sBAAsB;AACzC,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,YAAY,YAAY,YAAY,aAAa;AAC1D,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B,MAAM,YAAY,CAAC,kBAAkB,qBAAqB;AAE3C,SAAR,sBAAuC;AAC5C,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,WAAW,SAAS,MAAM,IAAI,SAAS;AAAA,IACnD,UAAU;AAAA,IACV,SAAS,MAAM,iBAAiB,mBAAmB;AAAA,EACrD,CAAC;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,QAAQ,QAAQ,CAAC;AACvB,QAAM,WACJ,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ,MAAM,KACxC,MAAM,KAAK,CAAC,SAAS,KAAK,MAAM,KAChC,MAAM,CAAC;AACT,QAAM,UAAU,MACd,KAAK,YAAY,kBAAkB,EAAE,UAAU,UAAU,CAAC;AAE5D,QAAM,QAAQ,CAAC,SACb,YAAY;AAAA,IAAkC;AAAA,IAAW,CAAC,YACxD,SAAS,IAAI,CAAC,SAAU,KAAK,QAAQ,KAAK,MAAM,OAAO,IAAK;AAAA,EAC9D;AAEF,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAS,oBAAC,UAAO,SAAS,MAAM,UAAU,IAAI,GAAG,wBAAU;AAAA;AAAA,IAC7D;AAAA,IAEA,oBAAC,iBAAc;AAAA,IAEd,aAAa,oBAAC,cAAW;AAAA,IACzB,WAAW,oBAAC,UAAO,MAAK,SAAS,oBAAU,KAAK,GAAE;AAAA,IAElD,CAAC,aAAa,CAAC,WACd,qBAAC,SAAI,WAAU,YACZ;AAAA,kBACC,oBAAC,SAAI,WAAU,cACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU,SAAS;AAAA,UACnB,UAAU,CAAC,QAAQ;AACjB,sBAAU,GAAG;AACb,sBAAU,KAAK;AAAA,UACjB;AAAA;AAAA,MACF,GACF;AAAA,MAEF,qBAAC,SAAI,WAAW,WAAW,eAAe,eACvC;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,MAAM,UAAU,KAAK;AAAA,YAC/B,WAAW,CAAC,SAAS;AACnB,0BAAY;AAAA,gBACV;AAAA,gBACA,CAAC,YAAY,CAAC,GAAI,WAAW,CAAC,GAAI,IAAI;AAAA,cACxC;AACA,wBAAU,KAAK,GAAG;AAClB,wBAAU,KAAK;AAAA,YACjB;AAAA;AAAA,QACF;AAAA,QAED,YAAY,CAAC,UACZ;AAAA,UAAC;AAAA;AAAA,YAEC,aAAa;AAAA,YACb,UAAU;AAAA,YACV,WAAW;AAAA,YACX,WAAW,MAAM,UAAU,IAAI;AAAA;AAAA,UAJ1B,SAAS;AAAA,QAKhB;AAAA,QAED,CAAC,YAAY,CAAC,UACb,oBAAC,SAAM,OAAM,SAAQ,OAAO,GAC1B;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,aAAY;AAAA;AAAA,QACd,GACF;AAAA,SAEJ;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/admin/payout-providers/payout-providers.module.css

@@ -0,0 +1,179 @@
+/* Payout providers: shared text and layout pieces, the flow list, the detail
+   lead and the disclosures. Hairlines and plain text only; green is left to
+   the primary buttons. Steps and the attention rows live in
+   sections.module.css, the flow editor in editor/editor.module.css. */
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+/* A quiet text action: Cancel, Replace keys, Run again. */
+.link {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.link:hover {
+  color: var(--text-primary);
+  text-decoration: underline;
+}
+
+/* Remove and delete: red on hover, or red always when it destroys a flow. */
+.remove:hover,
+.remove:focus-visible,
+.danger {
+  color: var(--error);
+}
+
+.label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.help {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-tertiary);
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+/* ---- Flow list ---- */
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0 -8px;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 10px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  text-align: left;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.item:hover,
+.item[data-selected='true'] {
+  background: var(--adm-hover);
+}
+
+.itemName {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.item[data-selected='true'] .itemName {
+  font-weight: 600;
+}
+
+.itemMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+/* ---- Detail ---- */
+.lead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.leadText {
+  flex: 1 1 280px;
+  min-width: 0;
+}
+
+.leadActions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  max-width: 240px;
+  text-align: right;
+}
+
+/* ---- Disclosures: Edit this flow, editor sections, Query/headers/body ---- */
+.disclosure > summary {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.summaryHint {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+}
+
+.adv {
+  padding-top: 16px;
+}
+
+.advBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.dangerZone {
+  padding-top: 16px;
+  border-top: 1px solid var(--border-subtle);
+}

package/dist/admin/payout-providers/pin-step.js

@@ -0,0 +1,84 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Banner, Button, Input } from "@withpotter/ui-kit";
+import {
+  platformAdminApi
+} from "@withpotter/platform-admin";
+import { errorText } from "./shared";
+import { Step } from "./step";
+import styles from "./payout-providers.module.css";
+function PinStep({
+  integration,
+  number,
+  onChange
+}) {
+  const connected = integration.signedIn && !integration.needsSignIn;
+  const [editing, setEditing] = useState(false);
+  const [pin, setPin] = useState("");
+  const save = useMutation({
+    mutationFn: () => platformAdminApi.savePayoutIntegrationPin(integration.key, pin),
+    onSuccess: (next) => {
+      setPin("");
+      setEditing(false);
+      onChange(next);
+    }
+  });
+  const done = integration.pinConfigured && !editing;
+  return /* @__PURE__ */ jsx(
+    Step,
+    {
+      number,
+      title: "Transaction PIN",
+      state: !connected ? "locked" : done ? "done" : "active",
+      summary: !connected ? "Available once the account is connected." : done ? "A PIN is saved and sealed." : "The 4-digit PIN that authorises each transfer from this account.",
+      action: connected && done ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.link,
+          onClick: () => setEditing(true),
+          children: "Change PIN"
+        }
+      ) : editing ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.link,
+          onClick: () => setEditing(false),
+          children: "Cancel"
+        }
+      ) : void 0,
+      children: connected && !done && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: styles.fields, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Transaction PIN",
+            type: "password",
+            inputMode: "numeric",
+            maxLength: 4,
+            autoComplete: "off",
+            value: pin,
+            onChange: (e) => setPin(e.target.value.replace(/\D/g, "")),
+            style: { maxWidth: 140 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            loading: save.isPending,
+            disabled: pin.length !== 4,
+            onClick: () => save.mutate(),
+            children: "Save PIN"
+          }
+        ) }),
+        save.error && /* @__PURE__ */ jsx(Banner, { tone: "error", children: errorText(save.error) })
+      ] })
+    }
+  );
+}
+export {
+  PinStep
+};
+//# sourceMappingURL=pin-step.js.map

package/dist/admin/payout-providers/pin-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/payout-providers/pin-step.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useMutation } from '@tanstack/react-query';\nimport { Banner, Button, Input } from '@withpotter/ui-kit';\nimport {\n  platformAdminApi,\n  type PayoutIntegration,\n} from '@withpotter/platform-admin';\nimport { errorText } from './shared';\nimport { Step } from './step';\nimport styles from './payout-providers.module.css';\n\n/** The account's 4-digit transaction PIN, which authorises every transfer. Stored sealed, never shown again. */\nexport function PinStep({\n  integration,\n  number,\n  onChange,\n}: {\n  integration: PayoutIntegration;\n  number: number;\n  onChange: (next: PayoutIntegration) => void;\n}) {\n  const connected = integration.signedIn && !integration.needsSignIn;\n  const [editing, setEditing] = useState(false);\n  const [pin, setPin] = useState('');\n  const save = useMutation({\n    mutationFn: () =>\n      platformAdminApi.savePayoutIntegrationPin(integration.key, pin),\n    onSuccess: (next) => {\n      setPin('');\n      setEditing(false);\n      onChange(next);\n    },\n  });\n  const done = integration.pinConfigured && !editing;\n\n  return (\n    <Step\n      number={number}\n      title=\"Transaction PIN\"\n      state={!connected ? 'locked' : done ? 'done' : 'active'}\n      summary={\n        !connected\n          ? 'Available once the account is connected.'\n          : done\n          ? 'A PIN is saved and sealed.'\n          : 'The 4-digit PIN that authorises each transfer from this account.'\n      }\n      action={\n        connected && done ? (\n          <button\n            type=\"button\"\n            className={styles.link}\n            onClick={() => setEditing(true)}\n          >\n            Change PIN\n          </button>\n        ) : editing ? (\n          <button\n            type=\"button\"\n            className={styles.link}\n            onClick={() => setEditing(false)}\n          >\n            Cancel\n          </button>\n        ) : undefined\n      }\n    >\n      {connected && !done && (\n        <>\n          <div className={styles.fields}>\n            <Input\n              label=\"Transaction PIN\"\n              type=\"password\"\n              inputMode=\"numeric\"\n              maxLength={4}\n              autoComplete=\"off\"\n              value={pin}\n              onChange={(e) => setPin(e.target.value.replace(/\\D/g, ''))}\n              style={{ maxWidth: 140 }}\n            />\n          </div>\n          <div className={styles.actions}>\n            <Button\n              loading={save.isPending}\n              disabled={pin.length !== 4}\n              onClick={() => save.mutate()}\n            >\n              Save PIN\n            </Button>\n          </div>\n          {save.error && <Banner tone=\"error\">{errorText(save.error)}</Banner>}\n        </>\n      )}\n    </Step>\n  );\n}\n"],"mappings":";AAmDU,SAmBF,UAnBE,KAmBF,YAnBE;AAjDV,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,QAAQ,aAAa;AACtC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,OAAO,YAAY;AAGZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,YAAY,YAAY,YAAY,CAAC,YAAY;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,OAAO,YAAY;AAAA,IACvB,YAAY,MACV,iBAAiB,yBAAyB,YAAY,KAAK,GAAG;AAAA,IAChE,WAAW,CAAC,SAAS;AACnB,aAAO,EAAE;AACT,iBAAW,KAAK;AAChB,eAAS,IAAI;AAAA,IACf;AAAA,EACF,CAAC;AACD,QAAM,OAAO,YAAY,iBAAiB,CAAC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,OAAO,CAAC,YAAY,WAAW,OAAO,SAAS;AAAA,MAC/C,SACE,CAAC,YACG,6CACA,OACA,+BACA;AAAA,MAEN,QACE,aAAa,OACX;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS,MAAM,WAAW,IAAI;AAAA,UAC/B;AAAA;AAAA,MAED,IACE,UACF;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,SAAS,MAAM,WAAW,KAAK;AAAA,UAChC;AAAA;AAAA,MAED,IACE;AAAA,MAGL,uBAAa,CAAC,QACb,iCACE;AAAA,4BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAW;AAAA,YACX,cAAa;AAAA,YACb,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,OAAO,EAAE,OAAO,MAAM,QAAQ,OAAO,EAAE,CAAC;AAAA,YACzD,OAAO,EAAE,UAAU,IAAI;AAAA;AAAA,QACzB,GACF;AAAA,QACA,oBAAC,SAAI,WAAW,OAAO,SACrB;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,KAAK;AAAA,YACd,UAAU,IAAI,WAAW;AAAA,YACzB,SAAS,MAAM,KAAK,OAAO;AAAA,YAC5B;AAAA;AAAA,QAED,GACF;AAAA,QACC,KAAK,SAAS,oBAAC,UAAO,MAAK,SAAS,oBAAU,KAAK,KAAK,GAAE;AAAA,SAC7D;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/admin/payout-providers/provider-detail.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Banner, Button, useConfirm } from "@withpotter/ui-kit";
+import {
+  platformAdminApi
+} from "@withpotter/platform-admin";
+import { Panel } from "../_ui";
+import { ConnectStep } from "./connect-step";
+import { FlowEditor } from "./editor/flow-editor";
+import { PinStep } from "./pin-step";
+import { ToneBadge, errorText } from "./shared";
+import { isReady, statusOf } from "./status";
+import { TestTransfer } from "./test-transfer";
+import { VerifyStep } from "./verify-step";
+import styles from "./payout-providers.module.css";
+function ProviderDetail({
+  integration,
+  onChange,
+  onRefresh,
+  onDeleted
+}) {
+  const confirm = useConfirm();
+  const status = statusOf(integration);
+  const needsPin = integration.steps.includes("pin");
+  const connected = integration.signedIn && !integration.needsSignIn;
+  const credentialsDone = connected && (!needsPin || integration.pinConfigured);
+  const ready = isReady(integration);
+  const activate = useMutation({
+    mutationFn: () => platformAdminApi.activatePayoutIntegration(integration.key),
+    onSuccess: (next) => {
+      onChange(next);
+      onRefresh();
+    }
+  });
+  const remove = useMutation({
+    mutationFn: () => platformAdminApi.deletePayoutFlow(integration.key),
+    onSuccess: () => {
+      onDeleted();
+      onRefresh();
+    }
+  });
+  const onDelete = async () => {
+    const ok = await confirm({
+      title: `Delete \u201C${integration.label}\u201D?`,
+      description: "Its saved credentials are removed too.",
+      confirmLabel: "Delete flow",
+      tone: "danger"
+    });
+    if (ok) remove.mutate();
+  };
+  const confirmActivate = async () => {
+    const ok = await confirm({
+      title: `Send all payouts through ${integration.label}?`,
+      description: "Merchants\u2019 withdrawals will use this provider from now on.",
+      confirmLabel: "Make active",
+      tone: "warning"
+    });
+    if (ok) activate.mutate();
+  };
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      title: integration.label,
+      action: /* @__PURE__ */ jsx(ToneBadge, { tone: status.tone, children: status.label }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.lead, children: [
+          /* @__PURE__ */ jsxs("p", { className: `${styles.desc} ${styles.leadText}`, children: [
+            integration.auth === "apiKey" ? "Connects with a secret API key." : integration.auth === "signed" ? "Connects with a public and a secret key; every request is signed." : "Connects by signing in with an email and password.",
+            " ",
+            integration.statusLookup ? "Unconfirmed payouts settle on their own." : "Unconfirmed payouts are reviewed by an operator."
+          ] }),
+          !integration.active && /* @__PURE__ */ jsxs("div", { className: styles.leadActions, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                loading: activate.isPending,
+                disabled: !ready,
+                onClick: () => void confirmActivate(),
+                children: "Make active"
+              }
+            ),
+            !ready && /* @__PURE__ */ jsx("span", { className: styles.help, children: "Connect the account and pass the check first." })
+          ] })
+        ] }),
+        (activate.error || remove.error) && /* @__PURE__ */ jsx(Banner, { tone: "error", className: "mt-3", children: errorText(activate.error ?? remove.error) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            ConnectStep,
+            {
+              integration,
+              onChange,
+              onRefresh
+            }
+          ),
+          needsPin && /* @__PURE__ */ jsx(PinStep, { integration, number: 2, onChange }),
+          /* @__PURE__ */ jsx(
+            VerifyStep,
+            {
+              integration,
+              number: needsPin ? 3 : 2,
+              unlocked: credentialsDone,
+              onRefresh
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TestTransfer,
+            {
+              integration,
+              number: needsPin ? 4 : 3,
+              unlocked: ready
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("details", { className: `${styles.disclosure} ${styles.adv}`, children: [
+          /* @__PURE__ */ jsxs("summary", { children: [
+            "Edit this flow",
+            /* @__PURE__ */ jsx("span", { className: styles.summaryHint, children: "hosts, calls and how answers are read" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.advBody, children: [
+            /* @__PURE__ */ jsx(
+              FlowEditor,
+              {
+                integration,
+                onChange
+              },
+              `${integration.key}-${integration.updatedAt}`
+            ),
+            !integration.active && /* @__PURE__ */ jsx("div", { className: `${styles.actions} ${styles.dangerZone}`, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${styles.link} ${styles.danger}`,
+                onClick: () => void onDelete(),
+                children: "Delete this flow"
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ProviderDetail
+};
+//# sourceMappingURL=provider-detail.js.map

package/dist/admin/payout-providers/provider-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/payout-providers/provider-detail.tsx"],"sourcesContent":["'use client';\n\nimport { useMutation } from '@tanstack/react-query';\nimport { Banner, Button, useConfirm } from '@withpotter/ui-kit';\nimport {\n  platformAdminApi,\n  type PayoutIntegration,\n} from '@withpotter/platform-admin';\nimport { Panel } from '../_ui';\nimport { ConnectStep } from './connect-step';\nimport { FlowEditor } from './editor/flow-editor';\nimport { PinStep } from './pin-step';\nimport { ToneBadge, errorText } from './shared';\nimport { isReady, statusOf } from './status';\nimport { TestTransfer } from './test-transfer';\nimport { VerifyStep } from './verify-step';\nimport styles from './payout-providers.module.css';\n\n/** One provider: its status, the connect flow as numbered steps, and its connection settings. */\nexport function ProviderDetail({\n  integration,\n  onChange,\n  onRefresh,\n  onDeleted,\n}: {\n  integration: PayoutIntegration;\n  onChange: (next: PayoutIntegration) => void;\n  onRefresh: () => void;\n  onDeleted: () => void;\n}) {\n  const confirm = useConfirm();\n  const status = statusOf(integration);\n  const needsPin = integration.steps.includes('pin');\n  const connected = integration.signedIn && !integration.needsSignIn;\n  const credentialsDone = connected && (!needsPin || integration.pinConfigured);\n  const ready = isReady(integration);\n  const activate = useMutation({\n    mutationFn: () =>\n      platformAdminApi.activatePayoutIntegration(integration.key),\n    onSuccess: (next) => {\n      onChange(next);\n      onRefresh();\n    },\n  });\n\n  const remove = useMutation({\n    mutationFn: () => platformAdminApi.deletePayoutFlow(integration.key),\n    onSuccess: () => {\n      onDeleted();\n      onRefresh();\n    },\n  });\n  const onDelete = async () => {\n    const ok = await confirm({\n      title: `Delete “${integration.label}”?`,\n      description: 'Its saved credentials are removed too.',\n      confirmLabel: 'Delete flow',\n      tone: 'danger',\n    });\n    if (ok) remove.mutate();\n  };\n\n  const confirmActivate = async () => {\n    const ok = await confirm({\n      title: `Send all payouts through ${integration.label}?`,\n      description: 'Merchants’ withdrawals will use this provider from now on.',\n      confirmLabel: 'Make active',\n      tone: 'warning',\n    });\n    if (ok) activate.mutate();\n  };\n\n  return (\n    <Panel\n      title={integration.label}\n      action={<ToneBadge tone={status.tone}>{status.label}</ToneBadge>}\n    >\n      <div className={styles.lead}>\n        <p className={`${styles.desc} ${styles.leadText}`}>\n          {integration.auth === 'apiKey'\n            ? 'Connects with a secret API key.'\n            : integration.auth === 'signed'\n            ? 'Connects with a public and a secret key; every request is signed.'\n            : 'Connects by signing in with an email and password.'}{' '}\n          {integration.statusLookup\n            ? 'Unconfirmed payouts settle on their own.'\n            : 'Unconfirmed payouts are reviewed by an operator.'}\n        </p>\n        {!integration.active && (\n          <div className={styles.leadActions}>\n            <Button\n              size=\"sm\"\n              loading={activate.isPending}\n              disabled={!ready}\n              onClick={() => void confirmActivate()}\n            >\n              Make active\n            </Button>\n            {!ready && (\n              <span className={styles.help}>\n                Connect the account and pass the check first.\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      {(activate.error || remove.error) && (\n        <Banner tone=\"error\" className=\"mt-3\">\n          {errorText(activate.error ?? remove.error)}\n        </Banner>\n      )}\n\n      <div>\n        <ConnectStep\n          integration={integration}\n          onChange={onChange}\n          onRefresh={onRefresh}\n        />\n        {needsPin && (\n          <PinStep integration={integration} number={2} onChange={onChange} />\n        )}\n        <VerifyStep\n          integration={integration}\n          number={needsPin ? 3 : 2}\n          unlocked={credentialsDone}\n          onRefresh={onRefresh}\n        />\n        <TestTransfer\n          integration={integration}\n          number={needsPin ? 4 : 3}\n          unlocked={ready}\n        />\n      </div>\n\n      <details className={`${styles.disclosure} ${styles.adv}`}>\n        <summary>\n          Edit this flow\n          <span className={styles.summaryHint}>\n            hosts, calls and how answers are read\n          </span>\n        </summary>\n        <div className={styles.advBody}>\n          <FlowEditor\n            key={`${integration.key}-${integration.updatedAt}`}\n            integration={integration}\n            onChange={onChange}\n          />\n          {!integration.active && (\n            <div className={`${styles.actions} ${styles.dangerZone}`}>\n              <button\n                type=\"button\"\n                className={`${styles.link} ${styles.danger}`}\n                onClick={() => void onDelete()}\n              >\n                Delete this flow\n              </button>\n            </div>\n          )}\n        </div>\n      </details>\n    </Panel>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/payout-providers/provider-list.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Panel } from "../_ui";
+import { ToneBadge } from "./shared";
+import { statusOf } from "./status";
+import styles from "./payout-providers.module.css";
+function ProviderList({
+  items,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(Panel, { title: "Flows", count: items.length, children: /* @__PURE__ */ jsx("div", { className: styles.list, role: "list", "aria-label": "Payout flows", children: items.map((item) => {
+    const status = statusOf(item);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "listitem",
+        className: styles.item,
+        "data-selected": item.key === selected,
+        onClick: () => onSelect(item.key),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.itemName, children: item.label }),
+          /* @__PURE__ */ jsxs("span", { className: styles.itemMeta, children: [
+            /* @__PURE__ */ jsx(ToneBadge, { tone: status.tone, children: status.label }),
+            /* @__PURE__ */ jsx("span", { children: item.account ?? (item.auth === "apiKey" ? "No API key yet" : item.auth === "signed" ? "No keys yet" : "No account yet") })
+          ] })
+        ]
+      },
+      item.key
+    );
+  }) }) });
+}
+export {
+  ProviderList
+};
+//# sourceMappingURL=provider-list.js.map

package/dist/admin/payout-providers/provider-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/payout-providers/provider-list.tsx"],"sourcesContent":["'use client';\n\nimport type { PayoutIntegration } from '@withpotter/platform-admin';\nimport { Panel } from '../_ui';\nimport { ToneBadge } from './shared';\nimport { statusOf } from './status';\nimport styles from './payout-providers.module.css';\n\nexport function ProviderList({\n  items,\n  selected,\n  onSelect,\n}: {\n  items: PayoutIntegration[];\n  selected: string;\n  onSelect: (key: string) => void;\n}) {\n  return (\n    <Panel title=\"Flows\" count={items.length}>\n      <div className={styles.list} role=\"list\" aria-label=\"Payout flows\">\n        {items.map((item) => {\n          const status = statusOf(item);\n          return (\n            <button\n              key={item.key}\n              type=\"button\"\n              role=\"listitem\"\n              className={styles.item}\n              data-selected={item.key === selected}\n              onClick={() => onSelect(item.key)}\n            >\n              <span className={styles.itemName}>{item.label}</span>\n              <span className={styles.itemMeta}>\n                <ToneBadge tone={status.tone}>{status.label}</ToneBadge>\n                <span>\n                  {item.account ??\n                    (item.auth === 'apiKey'\n                      ? 'No API key yet'\n                      : item.auth === 'signed'\n                      ? 'No keys yet'\n                      : 'No account yet')}\n                </span>\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </Panel>\n  );\n}\n"],"mappings":";AA+Bc,cACA,YADA;AA5Bd,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAEZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,oBAAC,SAAM,OAAM,SAAQ,OAAO,MAAM,QAChC,8BAAC,SAAI,WAAW,OAAO,MAAM,MAAK,QAAO,cAAW,gBACjD,gBAAM,IAAI,CAAC,SAAS;AACnB,UAAM,SAAS,SAAS,IAAI;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAClB,iBAAe,KAAK,QAAQ;AAAA,QAC5B,SAAS,MAAM,SAAS,KAAK,GAAG;AAAA,QAEhC;AAAA,8BAAC,UAAK,WAAW,OAAO,UAAW,eAAK,OAAM;AAAA,UAC9C,qBAAC,UAAK,WAAW,OAAO,UACtB;AAAA,gCAAC,aAAU,MAAM,OAAO,MAAO,iBAAO,OAAM;AAAA,YAC5C,oBAAC,UACE,eAAK,YACH,KAAK,SAAS,WACX,mBACA,KAAK,SAAS,WACd,gBACA,mBACR;AAAA,aACF;AAAA;AAAA;AAAA,MAlBK,KAAK;AAAA,IAmBZ;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;","names":[]}