@zeniai/web-components 3.16.99 → 3.17.1

package/dist/ZeniAccountDetailPage-rNBQPH83.js

@@ -1,908 +0,0 @@
-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-CD9fwr4J.js";
-import { b as pt } from "./BoxItem-xCL2YIds.js";
-import { d as ht } from "./downloadPdf-Dcq-r6nV.js";
-import { D as ut } from "./DepositAccTransactionItem-D6jJ3_g4.js";
-import { Z as mt } from "./ZeniAccountNavBarPieces-DAp8PAxw.js";
-import { S as xt } from "./MoreMenuButton-BxwE2HqI.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
-};