@tesouro/embedded-components-react 0.2.1

package/dist/libs/tesouro-embedded-components-react/balances-widget/ui/dist/index2.js

@@ -0,0 +1,128 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Skeleton as f, Typography as l, Button as i, TooltipProvider as g, Tooltip as u, TooltipTrigger as b, TooltipContent as v } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { CircleHelp as x, ArrowRight as N } from "lucide-react";
+import "@radix-ui/react-use-controllable-state";
+import "react";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { WidgetContainer as y } from "../../../shared/ui/dist/lib/WidgetContainer/WidgetContainer.js";
+import { BALANCES_WIDGET_LABELS_EN as A } from "./index4.js";
+const _ = ({
+  accountRows: n,
+  children: r,
+  isLoading: s,
+  isError: c,
+  onRetry: o,
+  totalBalance: d,
+  shouldTotalBalanceDisplay: w,
+  shouldShowViewAllAccounts: m,
+  onViewAllAccountsClicked: h,
+  labels: p
+}) => {
+  const e = { ...A, ...p };
+  return /* @__PURE__ */ t(y, { title: e.widgetTitle, showHeaderDivider: !1, children: s ? /* @__PURE__ */ t(
+    f,
+    {
+      "data-testid": "balances-widget-skeleton",
+      height: 80,
+      width: "100%",
+      className: "ttw:rounded-md"
+    }
+  ) : c ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: "ttw:flex ttw:flex-col ttw:gap-3",
+      "data-testid": "balances-widget-error",
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            component: "p",
+            variant: "body1",
+            className: "ttw:font-semibold",
+            children: e.loadErrorTitle
+          }
+        ),
+        /* @__PURE__ */ t(l, { component: "p", variant: "body2", color: "muted", children: e.loadErrorDescription }),
+        o ? /* @__PURE__ */ t(
+          i,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "ttw:self-start ttw:cursor-pointer",
+            onClick: o,
+            "data-testid": "balances-widget-retry",
+            children: e.loadErrorRetry
+          }
+        ) : null
+      ]
+    }
+  ) : n.length > 0 ? /* @__PURE__ */ a("div", { className: "ttw:-mt-5 ttw:flex ttw:flex-col ttw:gap-4", children: [
+    /* @__PURE__ */ a("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-col", children: [
+      w && /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-0.5 ttw:pb-4", children: [
+        /* @__PURE__ */ a("div", { className: "ttw:flex ttw:min-w-0 ttw:items-center ttw:gap-1", children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              variant: "h6",
+              component: "span",
+              className: "ttw:min-w-0 ttw:text-3xl ttw:font-medium ttw:leading-tight",
+              children: d
+            }
+          ),
+          /* @__PURE__ */ t(g, { children: /* @__PURE__ */ a(u, { children: [
+            /* @__PURE__ */ t(b, { asChild: !0, children: /* @__PURE__ */ t(
+              i,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": e.totalAvailableBalanceInfoAriaLabel,
+                "data-testid": "balances-widget-total-balance-info",
+                className: "ttw:size-8 ttw:shrink-0 ttw:text-muted-foreground",
+                children: /* @__PURE__ */ t(x, { className: "ttw:size-[18px]", "aria-hidden": !0 })
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              v,
+              {
+                sideOffset: 4,
+                className: "ttw:max-w-sm ttw:text-left",
+                children: e.totalAvailableBalanceTooltip
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ t(
+          l,
+          {
+            variant: "body2",
+            color: "muted",
+            component: "span",
+            "data-testid": "balances-widget-total-available-label",
+            className: "ttw:block ttw:text-sm ttw:leading-tight",
+            children: e.totalAvailableBalance
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-col", children: r })
+    ] }),
+    m && /* @__PURE__ */ a(
+      i,
+      {
+        type: "button",
+        variant: "link",
+        onClick: h,
+        className: "ttw:h-auto ttw:min-w-0 ttw:justify-start ttw:self-start ttw:border-none ttw:bg-transparent ttw:px-0 ttw:py-0 ttw:font-inherit ttw:normal-case ttw:text-primary ttw:shadow-none ttw:hover:bg-transparent ttw:hover:text-primary/90 ttw:hover:underline",
+        children: [
+          e.viewAllAccounts,
+          /* @__PURE__ */ t(N, { className: "ttw:size-4 ttw:shrink-0", "aria-hidden": !0 })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t(l, { color: "muted", children: e.noBalancesFound }) });
+};
+export {
+  A as BALANCES_WIDGET_LABELS_EN,
+  _ as BalancesWidget
+};

package/dist/libs/tesouro-embedded-components-react/balances-widget/ui/dist/index3.js

@@ -0,0 +1,90 @@
+import { jsxs as o, Fragment as s, jsx as t } from "react/jsx-runtime";
+import { Typography as r } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { Landmark as l, ChevronRight as d } from "lucide-react";
+const w = (e) => [
+  "ttw:flex ttw:flex-row ttw:items-center ttw:w-full ttw:min-w-0 ttw:overflow-hidden",
+  "ttw:gap-3 ttw:m-0 ttw:bg-transparent",
+  // permanent bottom divider; hidden on the last row and when the next row is hovered
+  "ttw:border ttw:border-t-transparent ttw:border-x-transparent ttw:border-b-[#EAECF0]",
+  "ttw:last:border-b-transparent ttw:[&:has(+_button:hover)]:border-b-transparent",
+  "ttw:rounded-none ttw:px-3 ttw:py-3",
+  "ttw:text-left ttw:font-inherit ttw:text-inherit",
+  e ? [
+    "ttw:transition-colors",
+    "ttw:hover:border-[#EAECF0] ttw:hover:bg-[#F9FAFB] ttw:hover:rounded-lg",
+    "ttw:cursor-pointer!",
+    "ttw:focus-visible:outline-none ttw:focus-visible:ring-2 ttw:focus-visible:ring-primary ttw:focus-visible:ring-offset-0"
+  ].join(" ") : "ttw:cursor-default"
+].join(" "), b = ({
+  row: e,
+  isRowClickable: n,
+  onRowClick: a
+}) => {
+  const i = /* @__PURE__ */ o(s, { children: [
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: "ttw:flex ttw:size-10 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-lg ttw:bg-primary/10",
+        "aria-hidden": !0,
+        children: /* @__PURE__ */ t(l, { className: "ttw:size-5 ttw:text-primary" })
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:gap-2 ttw:overflow-hidden", children: [
+      /* @__PURE__ */ t(
+        r,
+        {
+          component: "span",
+          variant: "body1",
+          className: "ttw:min-w-0 ttw:truncate ttw:font-medium ttw:text-foreground",
+          children: e.title
+        }
+      ),
+      /* @__PURE__ */ t(
+        r,
+        {
+          component: "span",
+          variant: "body1",
+          "data-testid": "balances-widget-account-number",
+          className: "ttw:shrink-0 ttw:font-normal ttw:text-[#667085]",
+          children: e.suffixLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      r,
+      {
+        component: "span",
+        variant: "body1",
+        className: "ttw:min-w-0 ttw:shrink-0 ttw:truncate ttw:text-base ttw:font-medium ttw:leading-tight ttw:text-foreground",
+        children: e.amountLabel
+      }
+    ),
+    n ? /* @__PURE__ */ t(
+      d,
+      {
+        className: "ttw:size-[22px] ttw:shrink-0 ttw:text-[#98A2B3]",
+        "aria-hidden": !0
+      }
+    ) : null
+  ] });
+  return n && a ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "data-testid": "balances-widget-account-row",
+      className: w(!0),
+      onClick: () => a(),
+      children: i
+    }
+  ) : /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": "balances-widget-account-row",
+      className: w(!1),
+      children: i
+    }
+  );
+};
+export {
+  b as SingleBalance
+};

package/dist/libs/tesouro-embedded-components-react/balances-widget/ui/dist/index4.js

@@ -0,0 +1,16 @@
+const a = {
+  widgetTitle: "Accounts",
+  totalAvailableBalance: "Total available balance",
+  // TODO(EMBD-2644): Align copy with balances API semantics (e.g. end-of-day vs
+  // real-time) once product/backend confirms wording.
+  totalAvailableBalanceTooltip: "Total available balance reflects the combined funds you can currently spend, withdraw, or transfer — after accounting for any pending transactions or holds — and is used to determine if you have sufficient funds for new transactions.",
+  totalAvailableBalanceInfoAriaLabel: "About total available balance",
+  viewAllAccounts: "View all accounts",
+  noBalancesFound: "No balances found",
+  loadErrorTitle: "Could not load accounts",
+  loadErrorDescription: "Something went wrong while loading balances. Please try again.",
+  loadErrorRetry: "Retry"
+};
+export {
+  a as BALANCES_WIDGET_LABELS_EN
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/data-access/dist/index2.js

@@ -0,0 +1,27 @@
+"use client";
+import { useQuery as m } from "@tanstack/react-query";
+import "../../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as p } from "../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as s } from "../../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountOptions as u } from "../../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as c } from "../../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import "../../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function O({
+  id: t,
+  enabled: o
+}) {
+  const { client: r, organizationId: i, widgetToken: e, authEpoch: a } = p(), n = u({
+    client: r,
+    headers: s(i),
+    path: { id: t ?? "" }
+  });
+  return m({
+    ...c(n, a),
+    enabled: !!(t && i && e) && (o === !0 || o === void 0)
+  });
+}
+export {
+  O as useBankAccountDetailsQuery
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/data-access/dist/index3.js

@@ -0,0 +1,29 @@
+"use client";
+import { useQuery as m } from "@tanstack/react-query";
+import "../../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as p } from "../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as u } from "../../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountTransactionsOptions as c } from "../../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as d } from "../../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import "../../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function T({
+  id: o,
+  enabled: t,
+  ...i
+}) {
+  const { client: a, organizationId: r, widgetToken: e, authEpoch: n } = p(), s = c({
+    client: a,
+    headers: u(r),
+    path: { id: o ?? "" },
+    query: i
+  });
+  return m({
+    ...d(s, n),
+    enabled: !!(o && r && e) && (t === !0 || t === void 0)
+  });
+}
+export {
+  T as useBankAccountTransactionsQuery
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/data-access/dist/index4.js

@@ -0,0 +1,29 @@
+"use client";
+import { useQuery as m } from "@tanstack/react-query";
+import "../../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as p } from "../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as u } from "../../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountTransfersOptions as c } from "../../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as d } from "../../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import "../../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function T({
+  id: r,
+  enabled: t,
+  ...e
+}) {
+  const { client: i, organizationId: o, widgetToken: a, authEpoch: n } = p(), s = c({
+    client: i,
+    headers: u(o),
+    path: { id: r ?? "" },
+    query: e
+  });
+  return m({
+    ...d(s, n),
+    enabled: !!(r && o && a) && (t === !0 || t === void 0)
+  });
+}
+export {
+  T as useBankAccountTransfersQuery
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/data-access/dist/index5.js

@@ -0,0 +1,31 @@
+"use client";
+import { useMutation as c } from "@tanstack/react-query";
+import { invalidateAllClients as i } from "../../../../shared/data-access/dist/lib/clientRegistry.js";
+import "../../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as u } from "../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as m } from "../../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountsQueryKey as p, getBankAccountQueryKey as l, updateBankAccountMutation as d } from "../../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import "../../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function M() {
+  const { client: t, organizationId: n } = u(), a = m(n), o = d({ client: t, headers: a });
+  return c({
+    ...o,
+    onSuccess: async (r, e, ...s) => {
+      await Promise.all([
+        i(p({ client: t, headers: a })),
+        i(
+          l({
+            client: t,
+            headers: a,
+            path: e.path
+          })
+        )
+      ]), await o.onSuccess?.(r, e, ...s);
+    }
+  });
+}
+export {
+  M as useUpdateBankAccountMutation
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/feature/dist/index2.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as w } from "react/jsx-runtime";
+import { useState as k, useEffect as C, useMemo as b } from "react";
+import { useBankAccountDetailsQuery as I } from "../../data-access/dist/index2.js";
+import { useBankAccountTransactionsQuery as U } from "../../data-access/dist/index3.js";
+import { useBankAccountTransfersQuery as W } from "../../data-access/dist/index4.js";
+import { useUpdateBankAccountMutation as M } from "../../data-access/dist/index5.js";
+import { AccountDetailsWidgetUi as Q } from "../../ui/dist/index2.js";
+import "../../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "../../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "@radix-ui/react-use-controllable-state";
+import "lucide-react";
+import "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import "react-error-boundary";
+import { useAnalyticsTrack as V } from "../../../../shared/feature/dist/lib/analytics/hooks.js";
+import "../../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { useWidgetConfig as j } from "../../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { AccountDetailsWidgetAnalyticsEvent as x } from "./index4.js";
+import { DEFAULT_FEATURE_LABELS as O } from "./index3.js";
+const _ = {
+  nickname: "",
+  reference: ""
+};
+function pe({
+  accountId: t,
+  onBack: r,
+  labels: o,
+  featureLabels: v
+}) {
+  const e = {
+    ...O,
+    ...v
+  }, p = V(), { organizationId: A, widgetToken: E } = j(), n = !!(A && E), [y, L] = k(!1), [m, g] = k(_);
+  C(() => {
+    p(x.Mounted);
+  }, [p]);
+  const s = I({
+    id: t,
+    enabled: n
+  }), u = U({
+    id: t,
+    enabled: n,
+    limit: 25
+  }), c = W({
+    id: t,
+    enabled: n,
+    limit: 25
+  }), d = M(), i = n ? s.data : void 0, N = i?.nickname || e.accountFallback, D = i?.accountNumber ?? e.unavailableLabel, T = i?.status ?? "", $ = b(
+    () => i ? [
+      {
+        label: e.balanceLabel,
+        value: l(i.balance, e)
+      },
+      {
+        label: e.accountNumberLabel,
+        value: i.accountNumber
+      },
+      {
+        label: e.routingNumberLabel,
+        value: i.routingNumber
+      },
+      {
+        label: e.referenceLabel,
+        value: i.bankAccountReference ?? e.unavailableLabel
+      },
+      {
+        label: e.createdLabel,
+        value: f(i.createdDateTime, e)
+      }
+    ] : [],
+    [i, e]
+  ), B = b(
+    () => (n ? u.data?.data?.map((a, h) => ({
+      id: `${a.date}-${h}`,
+      description: a.description,
+      dateLabel: f(a.date, e),
+      amountLabel: l(a.amount, e),
+      balanceLabel: l(
+        a.runningBalance,
+        e
+      )
+    })) : void 0) ?? [],
+    [u.data, e, n]
+  ), F = b(
+    () => (n ? c.data?.data?.map((a) => ({
+      id: a.id,
+      routeLabel: [
+        a.fromAccount.nickname ?? a.fromAccount.id,
+        e.routeSeparator,
+        a.toAccount.nickname ?? a.toAccount.id
+      ].join(" "),
+      dateLabel: f(a.date, e),
+      amountLabel: l(a.amount, e),
+      statusLabel: a.status
+    })) : void 0) ?? [],
+    [c.data, e, n]
+  ), S = (a) => {
+    a && !n || (a && g(z(i)), L(a));
+  }, R = () => {
+    n && d.mutate(
+      {
+        path: { id: t },
+        body: {
+          nickname: { hasValue: !0, value: m.nickname.trim() || null },
+          bankAccountReference: {
+            hasValue: !0,
+            value: m.reference.trim() || null
+          }
+        }
+      },
+      {
+        onSuccess: () => {
+          L(!1);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ w(
+    Q,
+    {
+      labels: o,
+      title: N,
+      subtitle: D,
+      statusLabel: T,
+      summaryItems: $,
+      transactionRows: B,
+      transferRows: F,
+      isLoading: !n || s.isLoading || u.isLoading || c.isLoading,
+      isError: s.isError || u.isError || c.isError,
+      isEditOpen: y,
+      isEditError: d.isError,
+      isEditDisabled: !n,
+      isSubmitting: d.isPending,
+      editForm: m,
+      onBack: r,
+      onEditOpenChange: S,
+      onEditFormChange: g,
+      onEditSubmit: R
+    }
+  );
+}
+function z(t) {
+  return {
+    nickname: t?.nickname ?? "",
+    reference: t?.bankAccountReference ?? ""
+  };
+}
+function f(t, r) {
+  if (!t) return r.unavailableLabel;
+  const o = new Date(t);
+  return Number.isNaN(o.getTime()) ? r.unavailableLabel : new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium"
+  }).format(o);
+}
+function l(t, r) {
+  if (!t) return r.unavailableLabel;
+  const o = Number(t.value);
+  return Number.isFinite(o) ? new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: t.currencyCode
+  }).format(o / 100) : r.unavailableLabel;
+}
+export {
+  pe as AccountDetailsWidget
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/feature/dist/index3.js

@@ -0,0 +1,13 @@
+const e = {
+  accountFallback: "Bank account",
+  accountNumberLabel: "Account",
+  routingNumberLabel: "Routing",
+  referenceLabel: "Reference",
+  createdLabel: "Created",
+  balanceLabel: "Balance",
+  unavailableLabel: "Unavailable",
+  routeSeparator: "to"
+};
+export {
+  e as DEFAULT_FEATURE_LABELS
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/feature/dist/index4.js

@@ -0,0 +1,6 @@
+const t = {
+  Mounted: "bank_accounts_widget.account_details.mounted"
+};
+export {
+  t as AccountDetailsWidgetAnalyticsEvent
+};