@tesouro/embedded-components-react 0.2.1

package/dist/libs/tesouro-embedded-components-react/transfers-widget/feature/dist/index6.js

@@ -0,0 +1,396 @@
+"use client";
+import { useMemo as p, useState as T, useCallback as A } from "react";
+import { toast as X } from "sonner";
+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 { useCreateBookTransferMutation as se } from "../../data-access/dist/index7.js";
+import { useCreateAchMoneyMovementMutation as fe } from "../../data-access/dist/index8.js";
+import { coerceAmountValueToMinorUnits as g } from "../../../shared/util/dist/index2.js";
+import { amountOutputToMajorUnits as q, minorExponentForCurrency as be } from "../../../shared/util/dist/index3.js";
+import { formatMoneyExact as D, currencySymbolForCode as pe } from "../../../shared/util/dist/index4.js";
+import { parseDecimalAmountToMinorUnits as k } from "../../../shared/util/dist/index8.js";
+import { TRANSFERS_ANALYTICS_EVENTS as K } from "./index5.js";
+function z(e) {
+  return e.slice(-4);
+}
+function Ae(e, r) {
+  const n = e.balance;
+  if (!n || n.value === void 0 || n.value === null)
+    return;
+  const u = n.currencyCode ?? r, i = q({
+    value: n.value,
+    currencyCode: u
+  });
+  return D(i, {
+    currencyCode: u,
+    includeSpaceAfterCurrencySymbol: !1
+  });
+}
+function h(e, r, n, u) {
+  const i = n.find((y) => y.id === e);
+  if (i?.balance?.currencyCode)
+    return i.balance.currencyCode;
+  const C = n.find((y) => y.id === r);
+  return C?.balance?.currencyCode ? C.balance.currencyCode : u;
+}
+function Ce(e, r, n) {
+  const u = z(e.accountNumber), i = e.nickname?.trim() || r.accountFallbackName, C = Ae(
+    e,
+    n.defaultCurrencyCode
+  );
+  return {
+    optionValue: e.id,
+    primaryLabel: i,
+    secondaryLabel: `${r.embeddedAccountMaskPrefix}${u}`,
+    balanceLabel: C
+  };
+}
+function ye(e, r) {
+  const n = z(e.accountNumber), u = e.nickname?.trim() || e.nameOnAccount;
+  return {
+    optionValue: e.id,
+    primaryLabel: u,
+    secondaryLabel: `${r.embeddedAccountMaskPrefix}${n}`
+  };
+}
+function j(e, r, n, u, i) {
+  return {
+    primaryLabel: e?.primaryLabel ?? "",
+    accountDetailLabel: r ? `${i} ${r}` : e?.secondaryLabel ?? "",
+    balanceLabel: e?.balanceLabel,
+    availableBalanceCaption: e?.balanceLabel ? u : void 0,
+    showInstitutionIcon: n
+  };
+}
+function xe({
+  labels: e,
+  featureLabels: r,
+  embeddedBankAccounts: n,
+  verifiedExternalBankAccounts: u,
+  track: i
+}) {
+  const C = se(), y = fe(), v = p(
+    () => new Set(n.map((o) => o.id)),
+    [n]
+  ), E = p(
+    () => n.map(
+      (o) => Ce(o, e, r)
+    ),
+    [
+      n,
+      r,
+      e.accountFallbackName,
+      e.embeddedAccountMaskPrefix
+    ]
+  ), R = p(
+    () => u.map(
+      (o) => ye(o, e)
+    ),
+    [e.embeddedAccountMaskPrefix, u]
+  ), b = p(
+    () => [...E, ...R],
+    [E, R]
+  ), [P, M] = T(!1), [L, I] = T("accounts"), [a, V] = T(""), [c, x] = T(""), [d, _] = T(""), [G, f] = T(null), [H, U] = T(!1), B = A(() => {
+    I("accounts"), V(""), x(""), _(""), f(null), U(!1);
+  }, []), J = A(() => {
+    B(), M(!0), i(K.TransferMoneyOpened);
+  }, [B, i]), N = v.has(a), S = v.has(c), l = p(
+    () => h(
+      a,
+      c,
+      n,
+      r.defaultCurrencyCode
+    ),
+    [
+      n,
+      r.defaultCurrencyCode,
+      a,
+      c
+    ]
+  ), Q = p(
+    () => pe(l),
+    [l]
+  ), W = p(() => c ? S ? b.filter((o) => o.optionValue !== c) : E.filter((o) => o.optionValue !== c) : b, [b, E, c, S]), Y = p(() => a ? N ? b.filter((o) => o.optionValue !== a) : E.filter((o) => o.optionValue !== a) : b, [b, E, a, N]), O = !!(a && c && a !== c), Z = p(
+    () => k(d, l) !== null,
+    [d, l]
+  ), w = A(
+    (o, t, m) => {
+      const F = k(t, m);
+      if (F === null) {
+        f(null);
+        return;
+      }
+      if (!v.has(o)) {
+        f(null);
+        return;
+      }
+      const s = n.find((me) => me.id === o);
+      if (!s) {
+        f(null);
+        return;
+      }
+      const de = g(s.balance?.value);
+      f(
+        F > de ? e.modalInsufficientFundsError : null
+      );
+    },
+    [n, v, e.modalInsufficientFundsError]
+  ), $ = A(
+    (o) => {
+      V(o);
+      const t = h(
+        o,
+        c,
+        n,
+        r.defaultCurrencyCode
+      );
+      w(o, d, t);
+    },
+    [
+      d,
+      n,
+      r.defaultCurrencyCode,
+      w,
+      c
+    ]
+  ), ee = A(
+    (o) => {
+      x(o);
+      const t = h(
+        a,
+        o,
+        n,
+        r.defaultCurrencyCode
+      );
+      w(a, d, t);
+    },
+    [
+      d,
+      n,
+      r.defaultCurrencyCode,
+      a,
+      w
+    ]
+  ), oe = A(
+    (o) => {
+      _(o), w(a, o, l);
+    },
+    [a, w, l]
+  ), ne = A(() => {
+    V(""), x(""), _(""), f(null);
+  }, []), ae = p(() => {
+    const o = k(
+      d,
+      l
+    );
+    if (o === null)
+      return "";
+    const t = be(l);
+    return D(o / 10 ** t, {
+      currencyCode: l,
+      includeSpaceAfterCurrencySymbol: !1
+    });
+  }, [d, l]), re = p(() => {
+    const o = b.find((s) => s.optionValue === a), t = n.find((s) => s.id === a), m = u.find(
+      (s) => s.id === a
+    ), F = t?.accountNumber ?? m?.accountNumber;
+    return j(
+      o,
+      F,
+      !!m,
+      e.modalAvailableBalanceCaption,
+      e.modalReviewAccountNumberPrefix
+    );
+  }, [
+    b,
+    n,
+    a,
+    e.modalAvailableBalanceCaption,
+    e.modalReviewAccountNumberPrefix,
+    u
+  ]), te = p(() => {
+    const o = b.find((s) => s.optionValue === c), t = n.find((s) => s.id === c), m = u.find((s) => s.id === c), F = t?.accountNumber ?? m?.accountNumber;
+    return j(
+      o,
+      F,
+      !!m,
+      e.modalAvailableBalanceCaption,
+      e.modalReviewAccountNumberPrefix
+    );
+  }, [
+    b,
+    n,
+    e.modalAvailableBalanceCaption,
+    e.modalReviewAccountNumberPrefix,
+    c,
+    u
+  ]), ue = A(() => {
+    if (!O)
+      return;
+    const o = k(
+      d,
+      l
+    );
+    if (o === null) {
+      f(e.modalAmountInvalidError);
+      return;
+    }
+    if (N) {
+      const t = n.find((m) => m.id === a);
+      if (t) {
+        const m = g(t.balance?.value);
+        if (o > m) {
+          f(e.modalInsufficientFundsError);
+          return;
+        }
+      }
+    }
+    f(null), I("review");
+  }, [
+    d,
+    O,
+    n,
+    N,
+    a,
+    e.modalAmountInvalidError,
+    e.modalInsufficientFundsError,
+    l
+  ]), ce = A(() => {
+    const o = k(
+      d,
+      l
+    );
+    if (o === null) {
+      f(e.modalAmountInvalidError);
+      return;
+    }
+    if (N) {
+      const t = n.find((m) => m.id === a);
+      if (t) {
+        const m = g(t.balance?.value);
+        if (o > m) {
+          f(e.modalInsufficientFundsError);
+          return;
+        }
+      }
+    }
+    f(null), I("review");
+  }, [
+    d,
+    n,
+    N,
+    a,
+    e.modalAmountInvalidError,
+    e.modalInsufficientFundsError,
+    l
+  ]), le = A(() => {
+    if (L === "amount") {
+      I("accounts");
+      return;
+    }
+    L === "review" && I("accounts");
+  }, [L]), ie = A(async () => {
+    const o = k(
+      d,
+      l
+    );
+    if (o === null) {
+      f(e.modalAmountInvalidError);
+      return;
+    }
+    if (!N && !S) {
+      X.error(e.modalUnsupportedPairError);
+      return;
+    }
+    let t;
+    N && S ? t = "INTERNAL_TO_INTERNAL" : N && !S ? t = "INTERNAL_TO_EXTERNAL" : t = "EXTERNAL_TO_INTERNAL";
+    try {
+      t === "INTERNAL_TO_INTERNAL" ? await C.mutateAsync({
+        body: {
+          fromBankAccountId: a,
+          toBankAccountId: c,
+          amount: o,
+          currencyCode: l
+        }
+      }) : await y.mutateAsync({
+        body: {
+          fromBankAccountId: a,
+          toBankAccountId: c,
+          amount: o,
+          currencyCode: l,
+          type: t,
+          secCode: r.defaultSecCode
+        }
+      }), U(!0), I("result"), i(K.TransferSubmitted, { transferType: t });
+    } catch {
+      X.error(e.modalSubmitFailedError);
+    }
+  }, [
+    d,
+    y,
+    C,
+    N,
+    a,
+    e.modalSubmitFailedError,
+    e.modalUnsupportedPairError,
+    e.modalAmountInvalidError,
+    S,
+    c,
+    i,
+    l,
+    r.defaultSecCode
+  ]);
+  return { modalProps: {
+    open: P,
+    onOpenChange: (o) => {
+      M(o), o || B();
+    },
+    step: L,
+    fromOptions: W,
+    toOptions: Y,
+    fromValue: a,
+    toValue: c,
+    onFromValueChange: $,
+    onToValueChange: ee,
+    amountValue: d,
+    onAmountValueChange: oe,
+    amountError: G,
+    amountInputPrefix: Q,
+    reviewFromAccount: re,
+    reviewToAccount: te,
+    reviewAmountLabel: ae,
+    isSubmitting: C.isPending || y.isPending,
+    isSuccess: H,
+    canContinueFromAccounts: O,
+    canContinueFromAmount: Z,
+    onContinueFromAccounts: ue,
+    onContinueFromAmount: ce,
+    onBack: le,
+    onSubmit: () => {
+      ie();
+    },
+    onClearSelections: ne
+  }, openModal: J };
+}
+function _e(e, r, n, u) {
+  const i = r.get(e.fromAccount.id) ?? e.fromAccount.nickname ?? n.accountFallbackName, C = r.get(e.toAccount.id) ?? e.toAccount.nickname ?? n.accountFallbackName, y = new Date(e.date), v = Number.isNaN(y.getTime()) ? u.unavailableLabel : new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium"
+  }).format(y), E = e.amount?.value, R = E == null || !Number.isFinite(Number(E)) ? u.unavailableLabel : D(q(e.amount), {
+    currencyCode: e.amount.currencyCode,
+    includeSpaceAfterCurrencySymbol: !1
+  }), b = e.status === "COMPLETED" ? n.rowStatusCompleted : e.status === "PENDING" ? n.rowStatusPending : n.rowStatusFailed, P = e.type === "INTERNAL_TO_INTERNAL" ? n.rowTypeInternal : e.type === "INTERNAL_TO_EXTERNAL" ? n.rowTypeToExternal : n.rowTypeFromExternal, M = `${i}${n.listAccountsSeparator}${C}`, L = `${b} · ${P}`;
+  return {
+    rowKey: e.id,
+    accountsRouteLabel: M,
+    dateLabel: v,
+    amountLabel: R,
+    detailLabel: L
+  };
+}
+export {
+  _e as mapTransferToRowView,
+  xe as useTransferMoneyModalController
+};

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/index10.js

@@ -0,0 +1,11 @@
+const s = {
+  successTitle: "Success!",
+  errorTitle: "Error",
+  transferMessagePrefix: "Your transfer of ",
+  successMessageSuffix: "was sent!",
+  errorMessageSuffix: "was not sent.",
+  backToTransfers: "Back to Transfers"
+};
+export {
+  s as DEFAULT_TRANSFER_RESULT_STEP_LABELS
+};

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

@@ -0,0 +1,160 @@
+import { jsxs as a, Fragment as u, jsx as t } from "react/jsx-runtime";
+import { Skeleton as y, Typography as r, Button as d } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ArrowUpFromLine as b, ArrowDownUp as N, ArrowDownToLine as v } from "lucide-react";
+import "@radix-ui/react-use-controllable-state";
+import "react";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { WidgetTitleWithIconAndChildren as g } from "../../../shared/ui/dist/lib/WidgetTitleWithIconAndChildren/WidgetTitleWithIconAndChildren.js";
+import { TransferMoneyModal as x } from "./index4.js";
+import { TRANSFERS_WIDGET_LABELS_EN as T } from "./index3.js";
+function S({
+  transferRows: o,
+  isLoading: s,
+  isError: w,
+  onRetry: l,
+  showTransferMoneyCta: m,
+  isTransferMoneyCtaDisabled: n = !1,
+  onTransferMoneyClick: c,
+  transferMoneyModal: p,
+  labels: f
+}) {
+  const e = { ...T, ...f }, h = m && !s ? /* @__PURE__ */ t(
+    "span",
+    {
+      className: "ttw:inline-flex ttw:shrink-0",
+      title: n ? e.transferMoneyCtaDisabledTooltip : void 0,
+      children: /* @__PURE__ */ a(
+        d,
+        {
+          type: "button",
+          size: "sm",
+          variant: "default",
+          className: "ttw:inline-flex ttw:shrink-0 ttw:gap-2 ttw:whitespace-nowrap",
+          disabled: n,
+          onClick: n ? void 0 : c,
+          "data-testid": "embedded-banking-transfer-money-button",
+          children: [
+            /* @__PURE__ */ t(v, { className: "ttw:size-4", "aria-hidden": !0 }),
+            e.transferMoneyCta
+          ]
+        }
+      )
+    }
+  ) : void 0;
+  return /* @__PURE__ */ a(u, { children: [
+    /* @__PURE__ */ t(
+      g,
+      {
+        icon: /* @__PURE__ */ t(
+          N,
+          {
+            className: "ttw:size-[18px] ttw:shrink-0 ttw:text-primary",
+            "aria-hidden": !0
+          }
+        ),
+        title: e.widgetTitle,
+        headerActions: h,
+        children: s ? /* @__PURE__ */ t(
+          y,
+          {
+            "data-testid": "transfers-widget-skeleton",
+            height: 120,
+            width: "100%",
+            className: "ttw:rounded-md"
+          }
+        ) : w ? /* @__PURE__ */ a(
+          "div",
+          {
+            className: "ttw:flex ttw:flex-col ttw:gap-3",
+            "data-testid": "transfers-widget-error",
+            children: [
+              /* @__PURE__ */ t(
+                r,
+                {
+                  component: "p",
+                  variant: "body1",
+                  className: "ttw:font-semibold",
+                  children: e.loadErrorTitle
+                }
+              ),
+              /* @__PURE__ */ t(r, { component: "p", variant: "body2", color: "muted", children: e.loadErrorDescription }),
+              l ? /* @__PURE__ */ t(
+                d,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  className: "ttw:self-start ttw:cursor-pointer",
+                  onClick: l,
+                  "data-testid": "transfers-widget-retry",
+                  children: e.loadErrorRetry
+                }
+              ) : null
+            ]
+          }
+        ) : o.length === 0 ? /* @__PURE__ */ a(
+          "div",
+          {
+            className: "ttw:flex ttw:flex-col ttw:gap-2",
+            "data-testid": "transfers-widget-empty",
+            children: [
+              /* @__PURE__ */ t(r, { variant: "body1", className: "ttw:font-semibold", children: e.emptyTitle }),
+              /* @__PURE__ */ t(r, { variant: "body2", color: "muted", component: "p", children: e.emptyDescription })
+            ]
+          }
+        ) : /* @__PURE__ */ t("div", { className: "ttw:max-w-full ttw:overflow-x-auto ttw:rounded-md ttw:border ttw:border-border", children: /* @__PURE__ */ t("div", { className: "ttw:min-w-[24rem] ttw:max-h-96 ttw:overflow-y-auto", children: /* @__PURE__ */ t("ul", { className: "ttw:m-0 ttw:list-none ttw:divide-y ttw:divide-border ttw:p-0", children: o.map((i) => /* @__PURE__ */ a(
+          "li",
+          {
+            title: i.detailLabel,
+            className: "ttw:grid ttw:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] ttw:items-center ttw:gap-3 ttw:px-4 ttw:py-4",
+            children: [
+              /* @__PURE__ */ a("div", { className: "ttw:flex ttw:min-w-0 ttw:items-center ttw:gap-3", children: [
+                /* @__PURE__ */ t("div", { className: "ttw:flex ttw:size-9 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-primary/10", children: /* @__PURE__ */ t(
+                  b,
+                  {
+                    className: "ttw:size-4 ttw:text-primary",
+                    "aria-hidden": !0
+                  }
+                ) }),
+                /* @__PURE__ */ t(
+                  r,
+                  {
+                    variant: "body2",
+                    component: "p",
+                    className: "ttw:min-w-0 ttw:truncate ttw:font-medium",
+                    children: i.accountsRouteLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t(
+                r,
+                {
+                  variant: "body2",
+                  component: "p",
+                  color: "muted",
+                  className: "ttw:shrink-0 ttw:text-center",
+                  children: i.dateLabel
+                }
+              ),
+              /* @__PURE__ */ t(
+                r,
+                {
+                  variant: "body2",
+                  component: "p",
+                  className: "ttw:justify-self-end ttw:shrink-0 ttw:font-semibold ttw:tabular-nums",
+                  children: i.amountLabel
+                }
+              )
+            ]
+          },
+          i.rowKey
+        )) }) }) })
+      }
+    ),
+    /* @__PURE__ */ t(x, { ...p, labels: e })
+  ] });
+}
+export {
+  T as TRANSFERS_WIDGET_LABELS_EN,
+  S as TransfersWidget
+};

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

@@ -0,0 +1,60 @@
+const e = {
+  widgetTitle: "Transfer money",
+  transferMoneyCta: "Transfer money",
+  transferMoneyCtaDisabledTooltip: "You must have access to at least two accounts to transfer money",
+  accountFallbackName: "Account",
+  embeddedAccountMaskPrefix: "••••",
+  modalReviewAccountNumberPrefix: "Account #:",
+  listAccountsSeparator: " → ",
+  loadErrorTitle: "We could not load transfers",
+  loadErrorDescription: "Check your connection and try again. If the problem continues, contact support.",
+  loadErrorRetry: "Try again",
+  emptyTitle: "No transfers yet",
+  emptyDescription: "When you move money between accounts, your transfers will show up here.",
+  modalTitle: "Transfer Money",
+  modalAccountsSubtitle: "ACH transfers take 1–2 business days to settle.",
+  modalFromAccountPlaceholder: "From Account",
+  modalToAccountPlaceholder: "To Account",
+  modalAccountsConfirm: "Confirm",
+  modalStepAccounts: "Accounts",
+  modalStepAmount: "Amount",
+  modalStepReview: "Review",
+  modalStepResult: "Done",
+  modalFromLabel: "From",
+  modalToLabel: "To",
+  modalAmountLabel: "Amount",
+  modalAmountPlaceholder: "0.00",
+  modalContinue: "Continue",
+  modalBack: "Back",
+  modalSubmit: "Submit transfer",
+  modalClose: "Close",
+  modalReviewHeading: "Review Transfer",
+  modalReviewFromAccountLabel: "From Account",
+  modalReviewToAccountLabel: "To Account",
+  modalAvailableBalanceCaption: "Available balance",
+  modalConfirmTransfer: "Confirm transfer",
+  modalGoBack: "Go back",
+  modalSuccessTitle: "Transfer submitted",
+  modalSuccessDescription: "Your transfer request was submitted successfully. It may take a short time to appear in your transfer list.",
+  modalResultSuccessTitle: "Success!",
+  modalResultErrorTitle: "Error",
+  modalResultTransferMessagePrefix: "Your transfer of ",
+  modalResultSuccessMessageSuffix: "was sent!",
+  modalResultErrorMessageSuffix: "was not sent.",
+  modalBackToTransfers: "Back to Transfers",
+  modalSelectPlaceholder: "Select an account",
+  rowStatusCompleted: "Completed",
+  rowStatusPending: "Pending",
+  rowStatusFailed: "Failed",
+  rowTypeInternal: "Internal",
+  rowTypeToExternal: "To external",
+  rowTypeFromExternal: "From external",
+  modalAmountInvalidError: "Enter a valid amount greater than zero.",
+  modalInsufficientFundsError: "Insufficient funds for transfer",
+  modalClearSelections: "Clear selections",
+  modalUnsupportedPairError: "Transfers between external accounts are not supported.",
+  modalSubmitFailedError: "We could not submit your transfer. Please try again."
+};
+export {
+  e as TRANSFERS_WIDGET_LABELS_EN
+};