@zeniai/web-components 3.17.3 → 3.17.4

package/dist/ZeniAccountDetailPage-Bq_OelXH.js

@@ -0,0 +1,908 @@
+import { g as ze, u as xe, j as t, F as Re, m as Me } from "./vendor-.pnpm-B2klaOGU.js";
+import * as k from "react";
+import { useState as j, useEffect as B, useCallback as D, memo as ge, useMemo as Q } from "react";
+import n from "@emotion/styled";
+import { ResponsiveContainer as He, AreaChart as Ue, CartesianGrid as Ee, XAxis as We, YAxis as Fe, Tooltip as Ge, Area as Oe } from "recharts";
+import { hasAnyFinOpRole as Ye, zeniDate as O } from "@zeniai/client-epic-state";
+import { u as H, dB as Ve, aD as Ze, a as ee, a2 as I, Z as z, S as o, aE as Je, t as P, aP as Y, aQ as V, aR as Z, fM as _e, C as f, e as S, A as fe, F as b, ag as Xe, z as qe, P as Ke, R as $, fU as Qe, hv as re, D as d, o as te, k as et, O as tt, ja as ot, ai as nt, jb as at, bc as st, f_ as it, ft as rt, E as ct, aw as lt, _ as dt } from "./index-CR2Dmphx.js";
+import { b as pt } from "./BoxItem-weMhklk5.js";
+import { d as ht } from "./downloadPdf-D8Y_mIF9.js";
+import { D as ut } from "./DepositAccTransactionItem-DhWWZHFx.js";
+import { Z as mt } from "./ZeniAccountNavBarPieces-DQe2Roqt.js";
+import { S as xt } from "./MoreMenuButton-BcyT4UwA.js";
+const gt = (e) => /* @__PURE__ */ k.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ k.createElement("path", { d: "M21.5348 3H2.31522C1.80976 3 1.4 3.44579 1.4 3.99569V19.9353C1.4 20.4852 1.80976 20.931 2.31522 20.931H21.5348C22.0402 20.931 22.45 20.4852 22.45 19.9353V3.99569C22.45 3.44579 22.0402 3 21.5348 3Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M16 10.8126H19.62", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M16 13.6245H18.28", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ k.createElement("path", { d: "M13.8276 15.9677C13.4452 15.3772 12.177 14.948 10.5892 14.3603C10.1412 14.1934 10.2143 13.0237 10.413 12.8053C10.7291 12.463 10.9691 12.0577 11.1174 11.6161C11.2657 11.1744 11.3189 10.7064 11.2735 10.2428C11.3006 9.95383 11.2662 9.66242 11.1723 9.3878C11.0785 9.11317 10.9275 8.86159 10.7292 8.64967C10.5309 8.43776 10.2899 8.27033 10.0222 8.15847C9.75438 8.04661 9.4659 7.99286 9.1758 8.00076C8.8857 7.99286 8.59723 8.04661 8.32945 8.15847C8.06166 8.27033 7.82067 8.43776 7.6224 8.64967C7.42412 8.86159 7.27309 9.11317 7.17927 9.3878C7.08544 9.66242 7.05098 9.95383 7.07814 10.2428C7.03273 10.7064 7.08592 11.1744 7.23421 11.6161C7.38251 12.0577 7.62255 12.463 7.93858 12.8053C8.13728 13.0237 8.21039 14.1934 7.76237 14.3603C6.17647 14.948 4.90644 15.3772 4.52402 15.9677", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), ft = n.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ce = "editNickName-form", J = "checkingAccountNickName", yt = {
+  tickLabelText: new lt("extraSmallRegular", "smallRegular")
+}, p = {
+  accountDetailHeaderPaddingRight: new $(d[3], d[8]),
+  accountDetailHeaderPaddingBottom: new $(d[3], d[6]),
+  accountDetailHeaderPaddingLeft: new $(d[3], d[8]),
+  accountDetailContentMarginTop: new $(d[5], d[7]),
+  areaChartHeight: new $(114, 209),
+  accountDetailHeaderGap: new $(18, 100, 184),
+  accBtnsGap: new $(0, d[11]),
+  styledNoTransactionIconSize: new $(60, 120)
+}, { common: M, spendManagement: $t } = ee.getLocalizedStrings(), { zeniAccounts: a } = $t, _ = ee.getLocalizedStrings().dateFormat, jt = ee.getLocalizedStrings().peoplePage, le = (e) => /* @__PURE__ */ t.jsx(Qt, { children: e }), ye = ge(
+  ({ accountHistory: e }) => {
+    const h = H(), s = xe(), [u, y] = j(), w = Q(
+      () => e.accountHistoryWithBalance.map((i) => ({
+        ...i,
+        date: i.date.toISOString()
+      })),
+      [e.accountHistoryWithBalance]
+    ), m = D((i) => {
+      let l = "", r = "";
+      return i && i[0] && (r = I(
+        "0,0[.]00",
+        i[0].payload?.balance?.available
+      ), l = O(i[0].payload?.date).format(
+        _.visual.DMMMYYYYFormat
+      )), /* @__PURE__ */ t.jsxs(qt, { children: [
+        /* @__PURE__ */ t.jsx(de, { children: l }),
+        /* @__PURE__ */ t.jsx(de, { isSublabel: !0, children: r })
+      ] });
+    }, []), x = D(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (i) => {
+        const { x: l, y: r } = i, { value: v } = i.payload;
+        let A = !1;
+        e.accountHistoryWithBalance.length > 360 && (A = !0);
+        const T = A ? O(v).format(_.visual.MMMformat) : O(v).format(_.visual.MMMDFormat);
+        return /* @__PURE__ */ t.jsx(It, { translateX: l, translateY: r, children: /* @__PURE__ */ t.jsx(Ut, { windowSize: h, dy: 20, dx: -25, children: T }) });
+      },
+      [e.accountHistoryWithBalance.length, h]
+    ), C = D(
+      ({ cx: i, cy: l, dataKey: r }) => (r === "balance.available.amount" && (u?.x !== i || u?.y !== l) && y({ x: i, y: l }), /* @__PURE__ */ t.jsx(Kt, { cx: i, cy: l, strokeWidth: 1, r: d[1] })),
+      [u]
+    ), g = Q(() => {
+      const i = e.accountHistoryWithBalance.length;
+      return i <= 0 ? 0 : i > 360 ? Math.floor(i / 12) : Math.floor(i / 7);
+    }, [e.accountHistoryWithBalance.length]);
+    return e.fetchState !== "Completed" ? null : e.fetchState === "Completed" && e.accountHistoryWithBalance.length === 0 ? /* @__PURE__ */ t.jsx(go, { children: /* @__PURE__ */ t.jsx(fo, { children: M.texts.noData }) }) : /* @__PURE__ */ t.jsx(Ot, { children: /* @__PURE__ */ t.jsx(
+      He,
+      {
+        height: p.areaChartHeight.value(h),
+        width: "99%",
+        children: /* @__PURE__ */ t.jsxs(
+          Ue,
+          {
+            data: w,
+            margin: { top: 0, right: 0, bottom: 0, left: 0 },
+            children: [
+              /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsxs(Et, { id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ t.jsx(
+                  Wt,
+                  {
+                    offset: "0%",
+                    stopColor: f.brandColorJade,
+                    stopOpacity: 1
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  Ft,
+                  {
+                    offset: "100%",
+                    stopColor: f.brandColorJade,
+                    stopOpacity: 0.03
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ t.jsx(
+                Ee,
+                {
+                  vertical: !1,
+                  strokeWidth: 2,
+                  stroke: s.colors.grey3
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                We,
+                {
+                  dataKey: "date",
+                  stroke: s.colors.grey3,
+                  tickSize: 0,
+                  reversed: !0,
+                  tick: (i) => x(i),
+                  padding: { right: d[4] },
+                  interval: g
+                }
+              ),
+              /* @__PURE__ */ t.jsx(Fe, { tick: !1, axisLine: !1 }),
+              /* @__PURE__ */ t.jsx(
+                Ge,
+                {
+                  position: u,
+                  content: ({ payload: i }) => m(i),
+                  cursor: {
+                    strokeDasharray: "3",
+                    stroke: f.brandColorJade
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                Oe,
+                {
+                  activeDot: C,
+                  fillOpacity: 1,
+                  dot: !1,
+                  type: "monotone",
+                  dataKey: "balance.available.amount",
+                  stroke: f.brandColorJade,
+                  fill: "url(#colorUv)"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+ye.displayName = "AccountBalanceGraph";
+const $e = ge(
+  ({
+    zeniAccountDetail: e,
+    getToolTipContent: h,
+    onAccountDetailClick: s,
+    downloadEndPoint: u,
+    authParams: y,
+    showLoader: w,
+    setShowLoader: m,
+    onViewAllTransactionClick: x,
+    showViewAllTransactions: C
+  }) => {
+    const g = H(), i = Q(
+      () => e.accountHistory,
+      [e.accountHistory]
+    );
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsxs(Bt, { windowSize: g, children: [
+        /* @__PURE__ */ t.jsx(
+          bt,
+          {
+            getToolTipContent: h,
+            zeniAccountDetail: e
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(Dt, { children: [
+          /* @__PURE__ */ t.jsx(ye, { accountHistory: i }),
+          /* @__PURE__ */ t.jsxs(Gt, { windowSize: g, children: [
+            /* @__PURE__ */ t.jsxs(
+              Jt,
+              {
+                onClick: s,
+                "data-testid": S("view-account-detail-button"),
+                children: [
+                  /* @__PURE__ */ t.jsx(lo, {}),
+                  g === "small" ? /* @__PURE__ */ t.jsx(me, { className: "btnText", children: a.zeniAccountDetail.accDetails }) : /* @__PURE__ */ t.jsx(ue, { className: "btnText", children: a.zeniAccountDetail.accDetails })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsxs(
+              _t,
+              {
+                "data-testid": S(
+                  "download-bank-verification-letter"
+                ),
+                onClick: () => ht(
+                  `${u}/bank-verification-letter`,
+                  `${a.zeniAccountDetail.bankLetterPdf}${e.accountDetail?.accountLast4}.pdf`,
+                  y,
+                  m
+                ),
+                children: [
+                  w ? /* @__PURE__ */ t.jsx(fe, { size: "Standard", start: !0 }) : /* @__PURE__ */ t.jsx(po, {}),
+                  g === "small" ? /* @__PURE__ */ t.jsx(me, { className: "btnText", children: a.zeniAccountDetail.bankLetter }) : /* @__PURE__ */ t.jsx(ue, { className: "btnText", children: a.zeniAccountDetail.bankLetter })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      e.transactionList.length > 0 ? /* @__PURE__ */ t.jsxs(vt, { windowSize: g, children: [
+        /* @__PURE__ */ t.jsxs(Tt, { children: [
+          /* @__PURE__ */ t.jsx(no, { children: a.zeniAccountDetail.transactions }),
+          C ? /* @__PURE__ */ t.jsxs(
+            ao,
+            {
+              onClick: x,
+              "data-testid": S(
+                "view-all-account-transactions"
+              ),
+              children: [
+                /* @__PURE__ */ t.jsx(io, { children: a.zeniAccountDetail.viewAll }),
+                /* @__PURE__ */ t.jsx(so, {})
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ t.jsx(Pt, { children: e.transactionList.map(
+          (l, r) => /* @__PURE__ */ t.jsx(
+            ut,
+            {
+              data: l,
+              boxType: pt(
+                r,
+                e.transactionList.length
+              )
+            },
+            l.id
+          )
+        ) })
+      ] }) : /* @__PURE__ */ t.jsxs(wt, { children: [
+        /* @__PURE__ */ t.jsx(Ct, { windowSize: g }),
+        /* @__PURE__ */ t.jsx(St, { children: a.zeniAccountDetail.noTransactionText })
+      ] })
+    ] });
+  }
+);
+$e.displayName = "AccountDetailScreen";
+const Po = ({
+  authParams: e,
+  downloadEndPoint: h,
+  zeniAccountDetail: s,
+  isBillPayEnabled: u,
+  isExpressPayEnabled: y,
+  onViewAllTransactionClick: w,
+  onAccountDetailClick: m,
+  handleMoveMoneyOptionSelection: x,
+  onBackClick: C,
+  onCloseAccountClick: g,
+  onEditNameClick: i,
+  onReloadZeniAccountDetailPage: l
+}) => {
+  const r = ze({
+    mode: "all"
+  }), { setFocus: v } = r, [A, T] = j(!1), [U, E] = j(!1), [oe, je] = j(!1), ne = H(), ae = Ve(), se = ae.loggedInUserRoleMap.deposit_accounts_user === !0 || Ye(ae.loggedInUserRoleMap);
+  B(() => {
+    const c = setTimeout(() => {
+      s.fetchState === "Completed" && s.accountDetail?.accountBalance.available.amount === 0 && !se && x(
+        "transfer",
+        s.accountDetail
+      );
+    }, 500);
+    return () => {
+      clearTimeout(c);
+    };
+  }, [
+    s.accountDetail?.id,
+    s.fetchState,
+    se
+  ]), B(() => {
+    oe === !0 && setTimeout(() => {
+      je(!1);
+    }, 800);
+  }, [oe]);
+  const be = s.transactionList.length > 4, W = xe(), [we, Ce] = j(!1), [Se, F] = j(!1), G = s.accountUpdateStatus.editName.fetchState, ie = Ze(G), ve = (c) => {
+    c === "closeAccount" ? T(!0) : c === "editNickName" ? E(!0) : c === "payBill" ? F(!0) : x(
+      c,
+      s.accountDetail
+    );
+  }, Te = {
+    onOkClick: () => {
+      g?.(), T(!1);
+    },
+    onCancelClick: () => {
+      T(!1);
+    }
+  }, ke = {
+    onOkClick: () => {
+    },
+    onCancelClick: () => {
+      r.reset(), E(!1);
+    }
+  };
+  B(() => {
+    ie === "In-Progress" && G === "Completed" && (E(!1), r.reset());
+  }, [ie, G, r]), B(() => {
+    U && v(J);
+  }, [U, v]);
+  const Be = {
+    pageName: "detailPage",
+    onOptionSelection: ve
+  }, Pe = s.accountDetail?.accountName ?? "", N = s.accountSummary, Ae = r.handleSubmit(
+    (c) => {
+      i?.(c.checkingAccountNickName);
+    }
+  ), Ne = {
+    onOkClick: () => {
+      x("payBill"), F(!1);
+    },
+    onCancelClick: () => {
+      F(!1);
+    }
+  }, Le = (c) => {
+    switch (c) {
+      case "totalBalance":
+        return "320px";
+      case "insuredBalance":
+        return "320px";
+      case "totalInterest":
+        return "280px";
+      default:
+        return "320px";
+    }
+  }, De = D(
+    (c) => {
+      let L = null;
+      switch (c) {
+        case "insuredBalance":
+          L = /* @__PURE__ */ t.jsx(t.Fragment, {});
+          break;
+        case "totalInterest":
+          L = /* @__PURE__ */ t.jsx(xo, { children: a.zeniAccountList.yieldTooltip });
+          break;
+        case "totalBalance":
+          L = /* @__PURE__ */ t.jsxs(uo, { children: [
+            /* @__PURE__ */ t.jsx(ho, { children: a.zeniAccountList.balanceTooltip.base }),
+            /* @__PURE__ */ t.jsxs(X, { children: [
+              /* @__PURE__ */ t.jsx(q, { children: a.zeniAccountList.balanceTooltip.balance }),
+              /* @__PURE__ */ t.jsx(K, { children: I("0,0[.]00", N?.totalBalance.current) })
+            ] }),
+            /* @__PURE__ */ t.jsxs(X, { children: [
+              /* @__PURE__ */ t.jsx(q, { children: a.zeniAccountList.balanceTooltip.processing }),
+              /* @__PURE__ */ t.jsx(K, { children: I("0,0[.]00", N?.totalBalance.hold) })
+            ] }),
+            /* @__PURE__ */ t.jsxs(X, { children: [
+              /* @__PURE__ */ t.jsx(q, { children: a.zeniAccountList.balanceTooltip.available }),
+              /* @__PURE__ */ t.jsx(K, { children: I("0,0[.]00", N?.totalBalance.available) })
+            ] })
+          ] });
+          break;
+      }
+      return /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsx(
+        z,
+        {
+          style: {
+            textAlign: "left",
+            // padding: tooltipContentKey === "totalBalance" ? `12px ${Space.sp3}` : Space.sp2,
+            padding: o.sp1
+          },
+          maxWidth: Le(c),
+          display: "flex",
+          placement: ne === "small" ? "bottom" : "top",
+          title: L,
+          children: /* @__PURE__ */ t.jsx(mo, {})
+        }
+      ) });
+    },
+    [N, ne]
+  ), Ie = /* @__PURE__ */ t.jsx(
+    mt,
+    {
+      zeniBankProps: Be,
+      isBillPayEnabled: u,
+      isExpressPayEnabled: y
+    }
+  );
+  return /* @__PURE__ */ t.jsxs(kt, { children: [
+    /* @__PURE__ */ t.jsx(
+      Je,
+      {
+        title: Pe,
+        subTitle: s?.accountDetail?.maskedAccountNumber ?? "",
+        onBackClick: C,
+        showMenuIcon: !1,
+        backgroundColor: W.colors.grey4,
+        style: { zIndex: 3, ...P.largeSemiBold.cssObject },
+        rightSideComponent: Ie,
+        source: "ZeniAccountDetailPage"
+      }
+    ),
+    A ? /* @__PURE__ */ t.jsx(
+      Y,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(Z, { children: a.zeniAccountDetail.closeAccountPopUp.title }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(V, { children: `${a.zeniAccountDetail.closeAccountPopUp.description}${s.accountDetail?.maskedAccountNumber}${M.strings.dot}` }),
+        primaryButtonText: a.zeniAccountDetail.closeAccountPopUp.primaryButtonText,
+        proceedButtonVariant: "danger",
+        secondaryButtonText: a.zeniAccountDetail.closeAccountPopUp.secondaryButtonText,
+        action: Te
+      }
+    ) : null,
+    Se ? /* @__PURE__ */ t.jsx(
+      Y,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(Z, { children: a.zeniAccountList.billPayupPopUpInfo.title }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(V, { children: a.zeniAccountList.billPayupPopUpInfo.description }),
+        primaryButtonText: a.zeniAccountList.billPayupPopUpInfo.primaryButtonText,
+        secondaryButtonText: a.zeniAccountList.billPayupPopUpInfo.secondaryButtonText,
+        action: Ne,
+        secondaryButtonWidth: 130,
+        primaryButtonWidth: 130
+      }
+    ) : null,
+    U ? /* @__PURE__ */ t.jsx(
+      Y,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(Z, { children: a.zeniAccountDetail.editNamePopUp.title }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(V, { children: a.zeniAccountDetail.editNamePopUp.description }),
+        primaryButtonText: a.zeniAccountDetail.editNamePopUp.primaryButtonText,
+        secondaryButtonText: a.zeniAccountDetail.editNamePopUp.secondaryButtonText,
+        formId: ce,
+        action: ke,
+        containerStyle: {
+          width: "100%"
+        },
+        isLoading: s.accountUpdateStatus.editName.fetchState === "In-Progress",
+        children: /* @__PURE__ */ t.jsx(Re, { ...r, children: /* @__PURE__ */ t.jsx(
+          "form",
+          {
+            id: ce,
+            onSubmit: Ae,
+            style: {
+              height: o.sp8,
+              width: "80%",
+              marginBottom: o.sp5
+            },
+            children: /* @__PURE__ */ t.jsx(
+              _e,
+              {
+                type: "text",
+                name: J,
+                defaultValue: s.accountDetail?.accountName,
+                placeholder: s.accountDetail?.accountName ?? "",
+                style: {
+                  display: "flex",
+                  flexGrow: 1,
+                  cursor: "inherit",
+                  height: o.sp7,
+                  textAlign: "left",
+                  width: "100%",
+                  background: Me(
+                    r.formState.errors,
+                    J
+                  ) === !0 ? f.importantLight : W.colors.background,
+                  border: `1px solid ${W.colors.background}`
+                },
+                registerOptions: {
+                  required: !0,
+                  validate: (c) => !!c
+                }
+              }
+            )
+          }
+        ) })
+      }
+    ) : null,
+    s.fetchState === "Completed" ? /* @__PURE__ */ t.jsx(
+      $e,
+      {
+        authParams: e,
+        downloadEndPoint: h,
+        getToolTipContent: De,
+        onAccountDetailClick: m,
+        onViewAllTransactionClick: w,
+        setShowLoader: Ce,
+        showLoader: we,
+        showViewAllTransactions: be,
+        zeniAccountDetail: s
+      }
+    ) : s.fetchState === "Error" ? /* @__PURE__ */ t.jsxs(zt, { children: [
+      /* @__PURE__ */ t.jsx(
+        Rt,
+        {
+          onClick: l,
+          "data-testid": S("account-detail-reload"),
+          children: /* @__PURE__ */ t.jsx(Ht, {})
+        }
+      ),
+      /* @__PURE__ */ t.jsx(Mt, { children: jt.reloadPage.label })
+    ] }) : /* @__PURE__ */ t.jsx(ft, { children: /* @__PURE__ */ t.jsx(fe, { size: "ExtraLarge", start: !0 }) })
+  ] });
+}, bt = ({
+  zeniAccountDetail: e,
+  getToolTipContent: h
+}) => {
+  const s = H(), [u, y] = j(!1), [, w] = Qe(), [m, x] = j(!1), C = () => {
+    w(e.accountDetail?.accountNumber ?? ""), x(!0);
+  };
+  return B(() => {
+    m === !0 && setTimeout(() => {
+      x(!1);
+    }, 800);
+  }, [m]), /* @__PURE__ */ t.jsxs(At, { children: [
+    /* @__PURE__ */ t.jsxs(Nt, { children: [
+      /* @__PURE__ */ t.jsx(Xt, { children: /* @__PURE__ */ t.jsxs(pe, { children: [
+        le(
+          a.zeniAccountList.totalAvailableBalance
+        ),
+        h("totalBalance")
+      ] }) }),
+      /* @__PURE__ */ t.jsx(oo, { windowSize: s, children: e.accountDetail?.accountBalance.available ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+        re,
+        {
+          amount: e.accountDetail?.accountBalance.available,
+          integerStyles: P.h2Regular.cssObject,
+          decimalStyles: P.h5Medium.cssObject
+        }
+      ) }) : null }),
+      u ? /* @__PURE__ */ t.jsxs(he, { windowSize: s, children: [
+        e.accountDetail?.accountNumber,
+        /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsx(
+          z,
+          {
+            display: "flex",
+            placement: "top",
+            title: a.zeniAccountDetail.hide,
+            enterDelay: 600,
+            children: /* @__PURE__ */ t.jsx(
+              to,
+              {
+                "data-testid": S("hide-account-number"),
+                onClick: () => {
+                  y(!1);
+                }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsx(
+          z,
+          {
+            display: "flex",
+            placement: "right",
+            title: m ? M.copyToClipBoard.copied : M.copyToClipBoard.copy,
+            enterDelay: 600,
+            children: m === !0 ? /* @__PURE__ */ t.jsx(co, {}) : /* @__PURE__ */ t.jsx(
+              ro,
+              {
+                onClick: C,
+                "data-testid": S("copy-account-number")
+              }
+            )
+          }
+        ) })
+      ] }) : /* @__PURE__ */ t.jsxs(he, { windowSize: s, children: [
+        e.accountDetail?.maskedAccountNumber,
+        /* @__PURE__ */ t.jsx(R, { children: /* @__PURE__ */ t.jsx(
+          z,
+          {
+            display: "flex",
+            placement: "top",
+            title: a.zeniAccountDetail.show,
+            enterDelay: 600,
+            children: /* @__PURE__ */ t.jsx(
+              eo,
+              {
+                "data-testid": S("show-account-number"),
+                onClick: () => {
+                  y(!0);
+                }
+              }
+            )
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsxs(Lt, { children: [
+      /* @__PURE__ */ t.jsxs(pe, { children: [
+        le(a.common.totalYieldEarned),
+        h("totalInterest")
+      ] }),
+      /* @__PURE__ */ t.jsxs(
+        Yt,
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ t.jsx(
+              re,
+              {
+                amount: e.accountSummary?.totalInterest.available,
+                integerStyles: P.largeRegular.cssObject,
+                decimalStyles: P.smallRegular.cssObject
+              }
+            ),
+            /* @__PURE__ */ t.jsx(Vt, {}),
+            /* @__PURE__ */ t.jsx(Zt, { children: `${a.common.currentAverageYield} ${e.accountDetail?.annualPercentageYield}` })
+          ]
+        }
+      )
+    ] })
+  ] });
+}, wt = n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, Ct = n(ot)`
+  width: ${(e) => p.styledNoTransactionIconSize.valuePx(e.windowSize)};
+  height: ${(e) => p.styledNoTransactionIconSize.valuePx(e.windowSize)};
+  margin-top: 128px;
+  margin-bottom: ${o.sp3};
+`, St = n(te)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+`, vt = n.div`
+  margin-top: ${(e) => p.accountDetailContentMarginTop.valuePx(e.windowSize)};
+  margin-right: ${(e) => p.accountDetailHeaderPaddingRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => p.accountDetailHeaderPaddingLeft.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp0};
+  &:last-child {
+    margin-bottom: ${o.sp8};
+  }
+`, Tt = n.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${o.sp3};
+`, kt = n.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, Bt = n.div`
+  display: flex;
+  gap: ${(e) => `${p.accountDetailHeaderGap.valuePx(e.windowSize)}`};
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  background: ${(e) => e.theme.colors.grey4};
+  padding-top: ${o.sp6};
+  padding-right: ${(e) => p.accountDetailHeaderPaddingRight.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => p.accountDetailHeaderPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${(e) => p.accountDetailHeaderPaddingLeft.valuePx(e.windowSize)};
+  justify-content: space-between;
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Pt = n.div`
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+`, At = n.div`
+  display: flex;
+  gap: ${o.sp3};
+  flex-direction: column;
+  justify-content: space-between;
+`, Nt = n.div``, Lt = n.div``, Dt = n.div`
+  display: flex;
+  gap: ${o.sp3};
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+`, It = n.g`
+  transform: ${(e) => `translate(${e.translateX}px, ${e.translateY}px)`};
+`, zt = n.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, Rt = n.div`
+  height: ${o.sp12};
+  width: ${o.sp12};
+  background: ${(e) => e.theme.colors.background};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Mt = n(Ke)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, Ht = n(qe)`
+  height: ${o.sp5};
+  width: ${o.sp5};
+  margin: ${o.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ut = n.text`
+  fill: ${(e) => e.theme.colors.hero};
+  ${(e) => `${yt.tickLabelText.style(e.windowSize)}`};
+`, Et = n.linearGradient``, Wt = n.stop``, Ft = n.stop``, Gt = n.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${(e) => p.accBtnsGap.valuePx(e.windowSize)};
+  justify-content: ${(e) => e.windowSize === "small" ? "space-between" : "flex-end"};
+  align-items: center;
+`, Ot = n.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-left: -${o.sp8};
+  .recharts-cartesian-grid {
+    .recharts-cartesian-grid-horizontal {
+      line:last-child {
+        display: none;
+      }
+    }
+  }
+`, Yt = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+`, Vt = n.div`
+  align-self: center;
+  background-color: ${(e) => e.theme.colors.grey1};
+  border-radius: 50%;
+  width: ${o.sp1};
+  height: ${o.sp1};
+  margin: ${o.sp0} ${o.sp1};
+  margin-top: 2px;
+`, Zt = n(ct)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${o.sp1};
+`, Jt = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    .btnText {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  margin-left: ${o.sp3};
+`, _t = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    .btnText {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  margin-right: ${o.sp3};
+`, Xt = n(b)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, qt = n.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  top: -22px;
+  right: 103px;
+  min-height: ${o.sp6};
+  min-width: 66px;
+  border-radius: ${o.sp1};
+  padding: ${o.sp0} ${o.sp2};
+  background-color: ${f.blackColor};
+`, Kt = n.circle`
+  stroke: ${(e) => e.theme.colors.brandColorJade};
+  fill: ${(e) => e.theme.colors.grey5};
+`, de = n(b)`
+  color: ${(e) => e.isSublabel === !0 ? f.neutralGrey1Light : f.brandColorPearl};
+`, pe = n.div`
+  display: flex;
+  gap: ${o.sp1};
+`, Qt = n(b)`
+  color: ${(e) => e.theme.colors.hero};
+`, he = n(nt)`
+  text-transform: capitalize;
+  color: ${(e) => `${e.windowSize === "small" ? e.theme.colors.hero : e.theme.colors.champion}`};
+  display: flex;
+  align-items: center;
+`, eo = n(rt)`
+  height: ${o.sp3};
+  width: ${o.sp3};
+  margin-left: ${o.sp2};
+  margin-right: ${o.sp2};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+`, to = n(at)`
+  height: ${o.sp3};
+  width: ${o.sp3};
+  margin-left: ${o.sp2};
+  margin-right: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+`, oo = n.div`
+  display: flex;
+  align-items: baseline;
+  color: ${(e) => e.theme.colors.primary};
+`, ue = n(te)`
+  margin-left: ${o.sp2};
+`, me = n(b)`
+  margin-left: ${o.sp2};
+`, no = n(et)`
+  color: ${(e) => e.theme.colors.primary};
+`, ao = n.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, so = n(tt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.grey1};
+`, io = n(te)`
+  color: ${(e) => e.theme.colors.hero};
+  margin-right: ${o.sp2};
+`, R = n.div`
+  display: flex;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, ro = n(it)`
+  height: ${o.sp3};
+  width: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, co = n(st)`
+  height: ${o.sp3};
+  width: ${o.sp3};
+  color: ${f.success};
+`, lo = n(gt)`
+  width: ${o.sp4};
+  min-width: ${o.sp4};
+  height: ${o.sp4};
+`, po = n(xt)`
+  width: ${o.sp4};
+  min-width: ${o.sp4};
+  height: ${o.sp4};
+`, ho = n(b)`
+  margin-bottom: ${o.sp2};
+  display: flex;
+`, uo = n(b)`
+  padding: 12px ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  border-radius: ${o.sp1};
+`, X = n(b)`
+  color: ${(e) => e.theme.colors.brandColorPearl};
+  margin-top: ${o.sp2};
+  display: flex;
+  justify-content: space-between;
+`, q = n.div`
+  color: ${(e) => e.theme.colors.hero};
+`, K = n.div`
+  color: ${f.primaryDark};
+`, mo = n(Xe)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, xo = n(b)`
+  padding: ${o.sp2};
+  color: ${(e) => e.theme.colors.hero};
+`, go = n.div`
+  height: -webkit-fill-available;
+  align-self: center;
+`, fo = n(dt)`
+  opacity: 0.25;
+`;
+export {
+  Po as default
+};