@zeniai/web-components 3.16.96 → 3.16.97

package/dist/BankConnectionsSettingsPage-DmSmZSdR.js

@@ -1,1694 +0,0 @@
-import { u as $e, d as et, b as xe, m as tt, j as t, g as nt, h as it, F as ot } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as H, useCallback as ae, useEffect as R } from "react";
-import n from "@emotion/styled";
-import { R as z, a as pe, u as Pe, dD as _e, aD as Y, eP as Je, hO as ze, hP as at, aC as Ge, hQ as ct, hR as st, K as Re, D as v, hS as ye, hT as we, S as i, hU as Be, a2 as ve, fb as ke, A as ue, e as lt, C as oe, hV as rt, hW as dt, hX as ut, eG as pt, o as E, F, t as Ye, b9 as Qe, hY as ht, aE as mt, fh as gt, Z as ft, E as St, w as xt, aw as yt, ag as wt } from "./index-CQQUoxL8.js";
-import { createPortal as Oe } from "react-dom";
-import { usePlaidLink as Le } from "react-plaid-link";
-import { isVerifiedPaymentAccountProviderStatusCode as vt, isVerifiedStatusCode as ce, zeniDate as Fe } from "@zeniai/client-epic-state";
-import { g as kt } from "./SetUpAccountSection-67YzP2AH.js";
-const {
-  settings: { bankConnectionHeader: he }
-} = pe.getLocalizedStrings().common, bt = {
-  value: he.productType,
-  width: new z(100, 19)
-}, $t = {
-  value: he.primaryAccount,
-  width: new z(100, 36)
-}, Ct = {
-  value: he.linkAccount,
-  width: new z(100, 22)
-}, Tt = {
-  value: he.status,
-  width: new z(12, 12)
-}, jt = {
-  value: he.balance,
-  width: new z(12, 13)
-}, q = [
-  bt,
-  $t,
-  Ct,
-  Tt,
-  jt
-], {
-  common: {
-    settings: Ne,
-    strings: { hyphen: Ce }
-  },
-  commonSetUp: { setUp: We }
-} = pe.getLocalizedStrings(), I = {
-  containerPadding: new z(v[3], v[4]),
-  containerRightPadding: new z(v[3], v[8]),
-  iconContainerMaxWidthHeight: new z(v[6], v[7]),
-  iconWidthHeight: new z(20, v[4]),
-  iconPadding: new z(v[1], 12),
-  productTypeContainerMarginBottom: new z(v[3], v[0]),
-  linkAccountContainerMarginTop: new z(v[3], v[0]),
-  productTypeIconSize: new z(v[3], v[4])
-}, At = "bankConnectionsSettingsPage", It = ({
-  productType: e,
-  windowSize: u
-}) => {
-  switch (e) {
-    case "bill_pay":
-      return /* @__PURE__ */ t.jsx(Gt, { windowSize: u, children: /* @__PURE__ */ t.jsx(pt, {}) });
-    case "reimbursement":
-      return /* @__PURE__ */ t.jsx(Yt, { windowSize: u, children: /* @__PURE__ */ t.jsx(ut, {}) });
-    case "zeni_accounts":
-      return /* @__PURE__ */ t.jsx(Qt, { windowSize: u, children: /* @__PURE__ */ t.jsx(Je, {}) });
-    case "zeni_treasury":
-      return /* @__PURE__ */ t.jsx(Kt, { windowSize: u, children: /* @__PURE__ */ t.jsx(dt, {}) });
-    case "charge_cards":
-    default:
-      return /* @__PURE__ */ t.jsx(Zt, { windowSize: u, children: /* @__PURE__ */ t.jsx(rt, {}) });
-  }
-}, Pt = ({
-  allBankAccounts: e,
-  setupView: u,
-  connectedAccountProvider: J,
-  onFetchLinkTokenClick: N,
-  onUpdatePaymentAccountStatus: P,
-  onEstablishConnectionClick: _,
-  onEstablishConnectionSuccess: W
-}) => {
-  const $ = $e(), c = Pe(), g = _e().analytics, {
-    trigger: U,
-    formState: { errors: M }
-  } = et(), {
-    plaidConnectionDetails: a,
-    allFundingAccounts: V,
-    primaryFundingAccount: o,
-    productType: s
-  } = u, p = a.link_account, b = a.update_account, [d, C] = H(
-    void 0
-  ), [G, w] = H(!1), h = () => {
-    w(!0);
-  }, f = d === "update_account" ? b : p, [S, L] = H(f.linkToken ?? null), [j, A] = H(!1), r = p.fetchStatus.fetchState === "In-Progress" || p.updateStatus.fetchState === "In-Progress";
-  let m, B, l, T = !1;
-  o != null && (o.accType === "depositAccount" ? m = {
-    code: "verified",
-    name: "Verified"
-  } : (m = o.providerVerificationStatus, B = o?.institutionDetails, l = m?.code, T = o?.isLoginRequired ?? !1));
-  const K = Y(
-    p.updateStatus.fetchState
-  ), X = Y(
-    b.updateStatus.fetchState
-  ), te = Y(
-    b.fetchStatus.fetchState
-  ), O = $.mode === "light" ? new xe($.colors.brandColorJadeLight) : new xe($.colors.brandColorJadeDark), Q = ae(
-    (x, Z) => {
-      g.trackConnectBankSuccess(s, "Settings");
-      const De = Z.accounts.find(
-        (Xe) => Xe.id === o?.providerAccountId
-      ) ?? Z.accounts[0];
-      o?.id != null && d === "update_account" && De?.verification_status != null && !T ? P(
-        De?.verification_status,
-        o.id,
-        "update_account",
-        y(s),
-        s
-      ) : _(
-        x,
-        y(s),
-        s
-      ), C(void 0), A(!1);
-    },
-    [
-      g,
-      s,
-      o?.id,
-      o?.providerAccountId,
-      d,
-      T,
-      P,
-      _
-    ]
-  ), ne = ae(
-    (x, Z) => {
-      x != null && (g.trackConnectBankFailure(
-        s,
-        x.error_code + " " + x.error_message,
-        "Settings"
-      ), x.error_code === "TOO_MANY_VERIFICATION_ATTEMPTS" && o?.id != null && P(
-        "verification_failed",
-        o.id,
-        "update_account",
-        y(s),
-        s
-      ), console.log("Plaid Connection Error", x, Z)), C(void 0), A(!1);
-    },
-    [
-      g,
-      s,
-      o?.id,
-      P
-    ]
-  ), { open: ee, ready: me } = Le({
-    token: S,
-    onSuccess: Q,
-    onExit: ne
-  });
-  R(() => {
-    (K === "In-Progress" && p.updateStatus.fetchState === "Completed" || X === "In-Progress" && b.updateStatus.fetchState === "Completed") && (vt(l ?? "") || (N(
-      "link_account",
-      y(s)
-    ), W(
-      y(s),
-      s
-    )));
-  }, [
-    p.updateStatus.fetchState,
-    W,
-    N,
-    o?.providerVerificationStatus?.code,
-    o?.id,
-    K,
-    X,
-    b.updateStatus.fetchState,
-    l,
-    s
-  ]), R(() => {
-    (ce(l ?? "") || l === "verification_failed") && !j && d != null && f.linkToken === S && f.fetchStatus.fetchState === "Completed" && me && A(!0);
-  }, [
-    me,
-    S,
-    f.fetchStatus.fetchState,
-    f.linkToken,
-    l,
-    d,
-    j
-  ]);
-  const se = je(
-    At,
-    "primaryAccountSection"
-  ), D = tt(M, se);
-  R(() => {
-    f.fetchStatus.fetchState === "Completed" && f.linkToken != null && f.linkToken !== S && L(f.linkToken);
-  }, [f.fetchStatus.fetchState, f.linkToken, S]), R(() => {
-    j && ee();
-  }, [j, ee]), R(() => {
-    !o?.zeniAccountId && !D && U(se);
-  }, [o?.id]), R(() => {
-    (l == null || l === "verification_failed" || l === "verification_expired" || ce(l)) && (Fe((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-      p.expiration
-    ) || p.linkToken == null) && N(
-      "link_account",
-      y(s)
-    );
-  }, []);
-  const ie = () => {
-    g.trackConnectBankGetBalance(s, "Settings"), C("update_account"), N(
-      "update_account",
-      y(s),
-      o?.id
-    );
-  }, le = `${o?.accountSubType?.name != null ? o?.accountSubType?.name.substring(0, 1).toUpperCase().concat(o?.accountSubType?.name.substring(1)) : ""} ${o?.maskedAccountNumber ?? ""}`.trim(), ge = B?.zeniInstitutionId.toLowerCase() === "chase", Ze = V.findIndex(
-    (x) => x.id === o?.id
-  ), Ke = {
-    element: /* @__PURE__ */ t.jsx(Je, { width: I.iconWidthHeight.valuePx(c) }),
-    color: O
-  };
-  return /* @__PURE__ */ t.jsxs(_t, { windowSize: c, children: [
-    G === !0 ? Oe(
-      /* @__PURE__ */ t.jsx(
-        ze,
-        {
-          connectedAccountProvider: J,
-          action: {
-            onBackClick: () => w(!1)
-          }
-        }
-      ),
-      document.body
-    ) : null,
-    /* @__PURE__ */ t.jsxs(
-      zt,
-      {
-        windowSize: c,
-        wrapperWidth: q[0].width,
-        children: [
-          /* @__PURE__ */ t.jsx(
-            Ot,
-            {
-              windowSize: c,
-              isDarkMode: $.mode === "dark",
-              children: /* @__PURE__ */ t.jsx(It, { productType: s, windowSize: c })
-            }
-          ),
-          /* @__PURE__ */ t.jsx(Bt, { children: Ne.productNameByType[s] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      Lt,
-      {
-        windowSize: c,
-        wrapperWidth: q[1].width,
-        children: /* @__PURE__ */ t.jsxs(Mt, { windowSize: c, children: [
-          o != null && c !== "small" ? /* @__PURE__ */ t.jsx(Wt, { isDisabled: T, children: at(
-            Ke,
-            c,
-            $.mode === "dark",
-            o,
-            Ze,
-            !1
-          ) }) : null,
-          /* @__PURE__ */ t.jsxs(
-            Ht,
-            {
-              windowSize: c,
-              className: "fundingAccount",
-              children: [
-                /* @__PURE__ */ t.jsx(
-                  Ge,
-                  {
-                    style: {
-                      display: c === "small" ? "block" : "inherit",
-                      width: "-webkit-fill-available",
-                      color: $.colors.hero
-                    },
-                    customStyleConfig: {
-                      menu: () => ({
-                        width: c === "small" ? "auto" : 510
-                      })
-                    },
-                    controlProperty: {
-                      controlHeight: v[4],
-                      fontWeight: Re.medium,
-                      highlightOnHover: !1,
-                      leftRightMargin: !1,
-                      fieldWidth: c === "small" ? 240 : 300
-                    },
-                    customPlaceholder: {
-                      color: $.colors.hero,
-                      weight: Re.medium
-                    },
-                    name: je(s, "primaryAccountSection"),
-                    placeholder: We.selectAccountPlaceholder,
-                    capitalizeOptions: !0,
-                    appendSublabel: !1,
-                    showLogoInSingleValue: !1,
-                    isClearable: !1,
-                    maxMenuHeight: 220,
-                    valueToLogo: (x, Z) => st(V, x, Z),
-                    valueToSubLabels: (x, Z) => ct(
-                      V,
-                      x,
-                      Z,
-                      !1
-                    ),
-                    defaultValue: {
-                      selectedOption: o?.id,
-                      allOptions: V.map(
-                        (x) => ({
-                          label: x.label,
-                          value: x.id,
-                          isRecommended: x.accType === "depositAccount"
-                        })
-                      )
-                    },
-                    textAlignment: "left",
-                    showDownChevronIcon: !0,
-                    showTickIcon: !1,
-                    isOptionRemovable: !1,
-                    registerOptions: {
-                      required: !1
-                    },
-                    showCreateOption: !0,
-                    showEmptyState: !1,
-                    isDisabled: r ? "disabled" : void 0,
-                    showLoadingIcon: r,
-                    onClickCreateOption: () => {
-                      g.trackConnectBank(s, "Settings"), C("link_account"), p.linkToken == null || Fe((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-                        p.expiration
-                      ) ? N(
-                        "link_account",
-                        y(s)
-                      ) : S !== p.linkToken ? L(p.linkToken) : j ? ee() : A(!0);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ t.jsxs(Dt, { isDisabled: T, children: [
-                  le ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                    /* @__PURE__ */ t.jsx(Rt, { children: le }),
-                    c !== "small" && (l !== "verification_failed" && o?.providerVerificationStatus?.code === "pending_manual_verification" || T || ge) ? /* @__PURE__ */ t.jsx(Nt, {}) : null
-                  ] }) : null,
-                  c === "small" && m != null ? /* @__PURE__ */ t.jsx(
-                    ye,
-                    {
-                      style: {
-                        width: "max-content",
-                        padding: i.sp0,
-                        marginLeft: i.sp2
-                      },
-                      tagTitle: m.name,
-                      textColor: we(
-                        m.code
-                      )
-                    }
-                  ) : null,
-                  l !== "verification_failed" && o?.providerVerificationStatus?.code === "pending_manual_verification" || T || ge ? /* @__PURE__ */ t.jsx(
-                    Be,
-                    {
-                      productType: s,
-                      isUpdateLinkClicked: d === "update_account",
-                      isLoginRequired: T,
-                      isPendingVerification: l !== "verification_failed" && o?.providerVerificationStatus?.code === "pending_manual_verification",
-                      fetchAndUpdateStatues: {
-                        fetchStatus: b.fetchStatus,
-                        updateStatus: b.updateStatus,
-                        linkFetchStatus: p.fetchStatus,
-                        linkUpdateStatus: p.updateStatus,
-                        prevFetchState: te,
-                        prevUpdateState: X
-                      },
-                      onUpdateLinkTokenClick: ie,
-                      onChaseInfoClick: h
-                    }
-                  ) : null
-                ] })
-              ]
-            }
-          ),
-          c === "small" ? /* @__PURE__ */ t.jsxs(Et, { children: [
-            o?.accountBalance?.available ? /* @__PURE__ */ t.jsx(Me, { className: "balanceLabel", children: ve(
-              "0,0[.]00",
-              o?.accountBalance?.available
-            ) }) : /* @__PURE__ */ t.jsx(Te, { children: Ce }),
-            o?.accountBalance?.lastRefreshTime ? /* @__PURE__ */ t.jsx(He, { className: "balanceLabel", children: ke(
-              o?.accountBalance?.lastRefreshTime
-            ) }) : o?.balanceFetchStatus.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(ue, { size: "Small", start: !0 }) : null
-          ] }) : null
-        ] })
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(
-      qt,
-      {
-        windowSize: c,
-        isDisabled: T,
-        wrapperWidth: q[2].width,
-        onClick: (x) => x.stopPropagation(),
-        "data-testid": lt("bank-account-section", s),
-        className: "qboLinkAcc",
-        children: [
-          c === "small" ? /* @__PURE__ */ t.jsx(Ft, { children: Ne.bankConnectionHeader.linkAccount }) : null,
-          /* @__PURE__ */ t.jsx(
-            Jt,
-            {
-              isDisabled: T ? "disabled" : void 0,
-              name: je(s, "bankAccountSection"),
-              placeholder: We.zeniCashAccountPlaceholder,
-              defaultValue: {
-                selectedOption: o?.zeniAccountId ?? "",
-                allOptions: e.map((x) => ({
-                  label: x.accountName,
-                  value: x.accountId
-                }))
-              },
-              controlProperty: {
-                highlightOnHover: !0
-              },
-              isOptionRemovable: !1,
-              textAlignment: "left",
-              registerOptions: {
-                required: !1
-              },
-              style: {
-                width: c === "small" ? "calc(100% - 135px)" : "100%",
-                marginLeft: c === "small" ? i.sp0 : `-${i.sp3}`
-              }
-            }
-          )
-        ]
-      }
-    ),
-    c !== "small" ? /* @__PURE__ */ t.jsx(
-      Vt,
-      {
-        windowSize: c,
-        wrapperWidth: q[3].width,
-        children: m != null ? /* @__PURE__ */ t.jsx(
-          ye,
-          {
-            style: {
-              width: "max-content",
-              padding: 0
-            },
-            tagTitle: m.name,
-            textColor: we(
-              m.code
-            )
-          }
-        ) : /* @__PURE__ */ t.jsx(Te, { children: Ce })
-      }
-    ) : null,
-    c !== "small" ? /* @__PURE__ */ t.jsxs(
-      Ut,
-      {
-        windowSize: c,
-        wrapperWidth: q[4].width,
-        children: [
-          o?.accountBalance?.available ? /* @__PURE__ */ t.jsx(Me, { className: "balanceLabel", children: ve(
-            "0,0[.]00",
-            o?.accountBalance?.available
-          ) }) : /* @__PURE__ */ t.jsx(Te, { children: Ce }),
-          o?.accountBalance?.lastRefreshTime ? /* @__PURE__ */ t.jsx(He, { className: "balanceLabel", children: ke(
-            o?.accountBalance?.lastRefreshTime
-          ) }) : o?.balanceFetchStatus.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(ue, { size: "Small", start: !0 }) : null
-        ]
-      }
-    ) : null
-  ] });
-}, _t = n.div`
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
-  padding: ${(e) => I.containerPadding.valuePx(e.windowSize)};
-  padding-right: ${(e) => I.containerRightPadding.valuePx(e.windowSize)};
-`, Te = n.div`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-`, zt = n.div`
-  display: flex;
-  align-items: center;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-bottom: ${(e) => I.productTypeContainerMarginBottom.valuePx(e.windowSize)};
-  padding-right: ${i.sp3};
-`, Bt = n(E)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`, Ot = n.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  align-self: ${(e) => e.windowSize === "small" ? "flex-start" : "unset"};
-  padding: ${(e) => I.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.windowSize === "small" ? e.isDarkMode ? e.theme.colors.brandColorJadeLight : e.theme.colors.brandColorJadeDark : e.isDarkMode ? e.theme.colors.brandColorJadeDark : e.theme.colors.brandColorJadeLight};
-  border-radius: ${i.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.windowSize === "small" ? e.isDarkMode ? e.theme.colors.brandColorOnyx : oe.neutralGrey5Light : e.isDarkMode ? oe.neutralGrey5Light : e.theme.colors.brandColorOnyx};
-  max-width: ${(e) => I.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => I.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${i.sp2};
-`, Lt = n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, Dt = n(F)`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.isDisabled ? e.theme.colors.grey1 : "inherit"};
-  flex-wrap: wrap;
-`, Rt = n.div`
-  display: flex;
-`, Me = n(E)`
-  display: flex;
-  justify-content: flex-end;
-`, He = n(F)`
-  color: ${(e) => e.theme.colors.hero};
-`, Ft = n(F)`
-  color: ${(e) => e.theme.colors.grey1};
-  width: 135px;
-`, Nt = n.div`
-  display: inline-block;
-  border-radius: ${i.sp2};
-  margin: ${i.sp0} ${i.sp2};
-  width: ${i.sp1};
-  height: ${i.sp1};
-  cursor: inherit;
-  background-color: ${(e) => e.theme.colors.grey1};
-`, Wt = n.div`
-  display: flex;
-  opacity: ${(e) => e.isDisabled ? 0.8 : 1};
-`, Mt = n.div`
-  display: flex;
-  justify-content: flex-start;
-`, Ht = n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.windowSize === "small" ? "64%" : "100%"};
-`, Ut = n.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, Et = n.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-  width: 36%;
-`, Vt = n.div`
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, qt = n.div`
-  display: flex;
-  align-items: center;
-  opacity: ${(e) => e.isDisabled ? 0.4 : 1};
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  margin-top: ${(e) => I.linkAccountContainerMarginTop.valuePx(e.windowSize)};
-`, Jt = n(Ge)`
-  border-radius: ${i.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  color: ${(e) => e.theme.colors.hero};
-  ${Ye.smallRegular.css};
-`, Gt = n.div`
-  width: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`, Yt = n.div`
-  width: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`, Qt = n.div`
-  width: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`, Zt = n.div`
-  width: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`, Kt = n.div`
-  width: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  height: ${(e) => I.productTypeIconSize.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`, je = (e, u) => `${e}.${u}`, y = (e) => {
-  switch (e) {
-    case "zeni_accounts":
-      return "account_setup";
-    case "bill_pay":
-      return "bill_pay_setup";
-    case "charge_cards":
-      return "charge_card_setup";
-    case "reimbursement":
-      return "reimbursement_setup";
-    case "zeni_treasury":
-      return "treasury_setup";
-    case "other_connection":
-      return "other_connection_setup";
-  }
-}, {
-  common: {
-    settings: Ae,
-    strings: { empty: Xt, hyphen: en }
-  }
-} = pe.getLocalizedStrings(), fe = {
-  paymentAccountIconSize: new z(v[6], v[7])
-}, tn = () => null, nn = ({
-  paymentAccount: e,
-  bankAccountList: u,
-  balanceFetchStatus: J,
-  connectedAccountProvider: N,
-  onRemoveConnection: P,
-  onFetchLinkTokenClick: _,
-  onEstablishConnectionClick: W,
-  onEstablishConnectionSuccess: $,
-  onUpdatePaymentAccountStatus: c
-}) => {
-  const k = $e(), g = Pe(), M = _e().analytics, [a, V] = H(!1), [o, s] = H(!1), p = () => {
-    s(!0);
-  }, b = e.plaidConnectionDetails.link_account, d = e.plaidConnectionDetails.update_account, [C, G] = H(void 0), w = C === "update_account" ? d : b, [h, f] = H(w.linkToken ?? null), [S, L] = H(!1), j = Y(
-    b.updateStatus.fetchState
-  ), A = Y(
-    d.updateStatus.fetchState
-  ), r = Y(
-    d.fetchStatus.fetchState
-  ), m = e?.providerVerificationStatus, B = e?.isLoginRequired ?? !1, l = "other_connection", T = m?.code, K = ae(
-    (D, ie) => {
-      M.trackConnectBankSuccess(l, "Settings");
-      const le = ie.accounts.find(
-        (ge) => ge.id === e.providerAccountId
-      ) ?? ie.accounts[0];
-      e.paymentAccountId != null && C === "update_account" && le?.verification_status != null && !B ? c(
-        le?.verification_status,
-        e.paymentAccountId,
-        "update_account",
-        y(l),
-        l
-      ) : W(
-        D,
-        y(l),
-        l
-      ), G(void 0), L(!1);
-    },
-    [
-      M,
-      l,
-      e.paymentAccountId,
-      e.providerAccountId,
-      C,
-      B,
-      c,
-      W
-    ]
-  ), X = ae(
-    (D, ie) => {
-      D != null && (M.trackConnectBankFailure(
-        l,
-        D.error_code + " " + D.error_message,
-        "Settings"
-      ), D.error_code === "TOO_MANY_VERIFICATION_ATTEMPTS" && e.paymentAccountId != null && c(
-        "verification_failed",
-        e.paymentAccountId,
-        "update_account",
-        y(l),
-        l
-      ), console.log("Plaid Connection Error", D, ie)), G(void 0), L(!1);
-    },
-    [
-      M,
-      l,
-      e.paymentAccountId,
-      c
-    ]
-  ), { open: te, ready: O } = Le({
-    token: h,
-    onSuccess: K,
-    onExit: X
-  });
-  R(() => {
-    w.fetchStatus.fetchState === "Completed" && w.linkToken != null && w.linkToken !== h && f(w.linkToken);
-  }, [w.fetchStatus.fetchState, w.linkToken, h]), R(() => {
-    S && te();
-  }, [S, te]), R(() => {
-    (j === "In-Progress" && b.updateStatus.fetchState === "Completed" || A === "In-Progress" && d.updateStatus.fetchState === "Completed") && (ce(T ?? "") || (_(
-      "link_account",
-      y(l)
-    ), $(
-      y(l),
-      l
-    )));
-  }, [
-    b.updateStatus.fetchState,
-    $,
-    _,
-    e?.providerVerificationStatus?.code,
-    e?.paymentAccountId,
-    j,
-    A,
-    d.updateStatus.fetchState,
-    T,
-    l
-  ]), R(() => {
-    (ce(T ?? "") || T === "verification_failed") && !S && C != null && w.linkToken === h && w.fetchStatus.fetchState === "Completed" && O && L(!0);
-  }, [
-    O,
-    h,
-    w.fetchStatus.fetchState,
-    w.linkToken,
-    T,
-    C,
-    S
-  ]);
-  const Q = () => {
-    M.trackConnectBankGetBalance(l, "Settings"), G("update_account"), _(
-      "update_account",
-      y(l),
-      e.paymentAccountId
-    );
-  }, ne = k.mode === "light" ? new xe(k.colors.brandColorJadeLight) : new xe(k.colors.brandColorJadeDark), ee = {
-    element: /* @__PURE__ */ t.jsx(gn, { windowSize: g, children: /* @__PURE__ */ t.jsx(ht, {}) }),
-    color: ne
-  }, me = u.find(
-    (D) => D.accountId === e.zeniAccountId
-  ), se = () => {
-    V((D) => !D);
-  };
-  return /* @__PURE__ */ t.jsxs(
-    on,
-    {
-      onMouseEnter: se,
-      onMouseLeave: se,
-      children: [
-        o === !0 ? Oe(
-          /* @__PURE__ */ t.jsx(
-            ze,
-            {
-              connectedAccountProvider: N,
-              action: {
-                onBackClick: () => s(!1)
-              }
-            }
-          ),
-          document.body
-        ) : null,
-        /* @__PURE__ */ t.jsxs(
-          an,
-          {
-            windowSize: g,
-            wrapperWidth: q[0].width,
-            children: [
-              /* @__PURE__ */ t.jsx(cn, { children: Ae.otherAccount.title }),
-              /* @__PURE__ */ t.jsx(sn, { children: Ae.otherAccount.subTitle })
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(
-          ln,
-          {
-            windowSize: g,
-            wrapperWidth: q[1].width,
-            children: [
-              kt(
-                ee,
-                g,
-                k.mode === "dark",
-                e,
-                !0
-              ),
-              /* @__PURE__ */ t.jsxs(fn, { children: [
-                /* @__PURE__ */ t.jsx(Sn, { children: /* @__PURE__ */ t.jsx(vn, { windowSize: g, children: e.institutionDetails.institutionName }) }),
-                /* @__PURE__ */ t.jsxs(xn, { windowSize: g, children: [
-                  /* @__PURE__ */ t.jsxs(kn, { children: [
-                    /* @__PURE__ */ t.jsx(yn, { children: e.accountSubType?.name }),
-                    /* @__PURE__ */ t.jsx(wn, { children: e.maskedAccountNumber }),
-                    B && /* @__PURE__ */ t.jsx(bn, {})
-                  ] }),
-                  B && /* @__PURE__ */ t.jsx(
-                    Be,
-                    {
-                      productType: "other_connection",
-                      isUpdateLinkClicked: C === "update_account",
-                      isLoginRequired: B,
-                      isPendingVerification: !1,
-                      fetchAndUpdateStatues: {
-                        fetchStatus: d.fetchStatus,
-                        updateStatus: d.updateStatus,
-                        linkFetchStatus: b.fetchStatus,
-                        linkUpdateStatus: b.updateStatus,
-                        prevFetchState: r,
-                        prevUpdateState: A
-                      },
-                      onUpdateLinkTokenClick: Q,
-                      onChaseInfoClick: p
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          rn,
-          {
-            windowSize: g,
-            wrapperWidth: q[2].width,
-            children: me?.accountName ?? Xt
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          dn,
-          {
-            windowSize: g,
-            wrapperWidth: q[3].width,
-            children: m != null ? /* @__PURE__ */ t.jsx(
-              ye,
-              {
-                style: {
-                  width: "max-content",
-                  padding: 0,
-                  marginTop: i.sp2
-                },
-                tagTitle: m.name,
-                textColor: we(m.code)
-              }
-            ) : en
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(
-          un,
-          {
-            windowSize: g,
-            wrapperWidth: q[4].width,
-            children: [
-              /* @__PURE__ */ t.jsx(pn, { className: "balanceLabel", isRemoveHovered: a, children: ve("0,0.[00]", e.balances?.available) }),
-              e.balances?.lastRefreshTime ? /* @__PURE__ */ t.jsx(
-                hn,
-                {
-                  className: "balanceLabel",
-                  isRemoveHovered: a,
-                  children: ke(e.balances?.lastRefreshTime)
-                }
-              ) : J?.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(ue, { size: "Small", start: !0 }) : null,
-              a && /* @__PURE__ */ t.jsx(mn, { children: /* @__PURE__ */ t.jsx(
-                Qe,
-                {
-                  moreIconType: "plain",
-                  options: [
-                    {
-                      label: Ae.otherAccount.remove,
-                      value: "remove"
-                    }
-                  ],
-                  customStyleConfig: {
-                    valueContainer: () => ({
-                      height: i.sp3,
-                      ".more-icon": {
-                        width: i.sp3,
-                        height: i.sp3,
-                        color: k.colors.primary
-                      }
-                    }),
-                    container: () => ({
-                      marginLeft: i.sp0,
-                      position: "relative"
-                    }),
-                    control: () => ({
-                      background: "transparent"
-                    }),
-                    menu: () => ({
-                      position: "absolute",
-                      right: 0,
-                      borderRadius: i.sp1,
-                      marginTop: i.sp2,
-                      background: k.colors.grey5,
-                      width: "162px",
-                      border: `1px solid ${k.colors.grey3}`,
-                      boxShadow: `${i.sp0} 1px 2px ${i.sp0} ${oe.boxShadowElevation}`
-                    }),
-                    option: () => ({
-                      height: i.sp6,
-                      paddingLeft: i.sp3,
-                      paddingRight: i.sp3,
-                      display: "flex",
-                      alignItems: "center",
-                      color: oe.important,
-                      ":hover": {
-                        color: oe.important,
-                        backgroundColor: k.colors.background
-                      }
-                    })
-                  },
-                  menuPlacement: "bottom",
-                  onOptionSelection: (D) => {
-                    D === "remove" && P(e.paymentAccountId);
-                  },
-                  valueToIcon: tn
-                }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, on = n.div`
-  display: flex;
-  padding: ${i.sp4};
-  padding-right: ${i.sp8};
-  position: relative;
-`, an = n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  align-items: flex-start;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, cn = n(E)`
-  color: ${(e) => e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`, sn = n(F)`
-  color: ${(e) => e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`, ln = n.div`
-  display: flex;
-  align-items: center;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, rn = n(E)`
-  display: flex;
-  align-items: center;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, dn = n(E)`
-  display: flex;
-  align-items: center;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-`, un = n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  justify-content: flex-end;
-  align-items: flex-end;
-`, pn = n(E)`
-  color: ${(e) => e.theme.colors.hero};
-`, hn = n(F)`
-  color: ${(e) => e.theme.colors.hero};
-`, mn = n.div`
-  position: absolute;
-  right: ${i.sp4};
-`, gn = n.div`
-  margin-right: ${i.sp2};
-  width: ${(e) => fe.paymentAccountIconSize.valuePx(e.windowSize)};
-  height: ${(e) => fe.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-width: ${(e) => fe.paymentAccountIconSize.valuePx(e.windowSize)};
-  min-height: ${(e) => fe.paymentAccountIconSize.valuePx(e.windowSize)};
-`, fn = n.div`
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-`, Sn = n.div`
-  display: flex;
-  gap: ${i.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`, xn = n.div`
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "large" || e.windowSize === "extra-large" ? "row" : "column"};
-  align-items: ${(e) => e.windowSize === "large" || e.windowSize === "extra-large" ? "center" : "start"};
-`, yn = n(F)`
-  text-transform: capitalize;
-  color: inherit;
-`, wn = n(F)`
-  margin-left: ${i.sp1};
-`, vn = n(E)`
-  max-width: ${`calc(100% - ${i.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`, kn = n.div`
-  display: flex;
-  align-items: center;
-`, bn = n.div`
-  display: inline-block;
-  border-radius: ${i.sp2};
-  margin: ${i.sp0} ${i.sp2};
-  width: ${i.sp1};
-  height: ${i.sp1};
-  cursor: inherit;
-  background-color: ${(e) => e.theme.colors.grey1};
-`, {
-  common: {
-    settings: Se,
-    strings: { empty: $n }
-  }
-} = pe.getLocalizedStrings(), Cn = () => null, Tn = ({
-  paymentAccount: e,
-  bankAccountList: u,
-  balanceFetchStatus: J,
-  connectedAccountProvider: N,
-  onRemoveConnection: P,
-  onFetchLinkTokenClick: _,
-  onEstablishConnectionClick: W,
-  onEstablishConnectionSuccess: $,
-  onUpdatePaymentAccountStatus: c
-}) => {
-  const k = $e(), U = _e().analytics, [M, a] = H(!1), V = () => {
-    a(!0);
-  }, o = e.plaidConnectionDetails.link_account, s = e.plaidConnectionDetails.update_account, [p, b] = H(void 0), d = p === "update_account" ? s : o, [C, G] = H(d.linkToken ?? null), [w, h] = H(!1), f = Y(
-    o.updateStatus.fetchState
-  ), S = Y(
-    s.updateStatus.fetchState
-  ), L = Y(
-    s.fetchStatus.fetchState
-  ), j = e?.providerVerificationStatus, A = e?.isLoginRequired ?? !1, r = "other_connection", m = j?.code, B = ae(
-    (O, Q) => {
-      U.trackConnectBankSuccess(r, "Settings");
-      const ne = Q.accounts.find(
-        (ee) => ee.id === e.providerAccountId
-      ) ?? Q.accounts[0];
-      e.paymentAccountId != null && p === "update_account" && ne?.verification_status != null && !A ? c(
-        ne?.verification_status,
-        e.paymentAccountId,
-        "update_account",
-        y(r),
-        r
-      ) : W(
-        O,
-        y(r),
-        r
-      ), b(void 0), h(!1);
-    },
-    [
-      U,
-      r,
-      e.paymentAccountId,
-      e.providerAccountId,
-      p,
-      A,
-      c,
-      W
-    ]
-  ), l = ae(
-    (O, Q) => {
-      O != null && (U.trackConnectBankFailure(
-        r,
-        O.error_code + " " + O.error_message,
-        "Settings"
-      ), O.error_code === "TOO_MANY_VERIFICATION_ATTEMPTS" && e.paymentAccountId != null && c(
-        "verification_failed",
-        e.paymentAccountId,
-        "update_account",
-        y(r),
-        r
-      ), console.log("Plaid Connection Error", O, Q)), b(void 0), h(!1);
-    },
-    [
-      U,
-      r,
-      e.paymentAccountId,
-      c
-    ]
-  ), { open: T, ready: K } = Le({
-    token: C,
-    onSuccess: B,
-    onExit: l
-  });
-  R(() => {
-    d.fetchStatus.fetchState === "Completed" && d.linkToken != null && d.linkToken !== C && G(d.linkToken);
-  }, [d.fetchStatus.fetchState, d.linkToken, C]), R(() => {
-    w && T();
-  }, [w, T]), R(() => {
-    (f === "In-Progress" && o.updateStatus.fetchState === "Completed" || S === "In-Progress" && s.updateStatus.fetchState === "Completed") && (ce(m ?? "") || (_(
-      "link_account",
-      y(r)
-    ), $(
-      y(r),
-      r
-    )));
-  }, [
-    o.updateStatus.fetchState,
-    $,
-    _,
-    e?.providerVerificationStatus?.code,
-    e?.paymentAccountId,
-    f,
-    S,
-    s.updateStatus.fetchState,
-    m,
-    r
-  ]), R(() => {
-    (ce(m ?? "") || m === "verification_failed") && !w && p != null && d.linkToken === C && d.fetchStatus.fetchState === "Completed" && K && h(!0);
-  }, [
-    K,
-    C,
-    d.fetchStatus.fetchState,
-    d.linkToken,
-    m,
-    p,
-    w
-  ]);
-  const X = () => {
-    U.trackConnectBankGetBalance(r, "Settings"), b("update_account"), _(
-      "update_account",
-      y(r),
-      e.paymentAccountId
-    );
-  }, te = u.find(
-    (O) => O.accountId === e.zeniAccountId
-  );
-  return /* @__PURE__ */ t.jsxs(jn, { children: [
-    M === !0 ? Oe(
-      /* @__PURE__ */ t.jsx(
-        ze,
-        {
-          connectedAccountProvider: N,
-          action: {
-            onBackClick: () => a(!1)
-          }
-        }
-      ),
-      document.body
-    ) : null,
-    /* @__PURE__ */ t.jsxs(An, { children: [
-      /* @__PURE__ */ t.jsx(In, { children: `${Se.otherAccount.title} ${Se.otherAccount.subTitleSmall}` }),
-      /* @__PURE__ */ t.jsx(
-        Qe,
-        {
-          moreIconType: "plain",
-          options: [
-            {
-              label: Se.otherAccount.remove,
-              value: "remove"
-            }
-          ],
-          customStyleConfig: {
-            valueContainer: () => ({
-              height: i.sp3,
-              ".more-icon": {
-                width: i.sp3,
-                height: i.sp3,
-                color: k.colors.primary
-              }
-            }),
-            container: () => ({
-              marginLeft: i.sp0,
-              position: "relative"
-            }),
-            control: () => ({
-              background: "transparent"
-            }),
-            menu: () => ({
-              position: "absolute",
-              right: 0,
-              width: "158px",
-              border: `1px solid ${k.colors.grey3}`,
-              boxShadow: `${i.sp0} 1px 2px ${i.sp0} ${oe.boxShadowElevation}`
-            }),
-            option: () => ({
-              color: k.colors.important,
-              ":hover": {
-                color: k.colors.important,
-                backgroundColor: k.colors.background
-              }
-            })
-          },
-          menuPlacement: "bottom",
-          onOptionSelection: (O) => {
-            O === "remove" && P(e.paymentAccountId);
-          },
-          valueToIcon: Cn
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsxs(Pn, { children: [
-      /* @__PURE__ */ t.jsxs(Fn, { children: [
-        /* @__PURE__ */ t.jsx(Nn, { children: /* @__PURE__ */ t.jsx(Hn, { children: e.institutionDetails.institutionName }) }),
-        /* @__PURE__ */ t.jsxs(Un, { children: [
-          /* @__PURE__ */ t.jsx(Wn, { children: e.accountSubType?.name }),
-          /* @__PURE__ */ t.jsx(Mn, { children: e.maskedAccountNumber }),
-          /* @__PURE__ */ t.jsx(On, { children: j != null ? /* @__PURE__ */ t.jsx(
-            ye,
-            {
-              style: {
-                width: "max-content",
-                padding: 0
-              },
-              tagTitle: j.name,
-              textColor: we(
-                j.code
-              )
-            }
-          ) : null }),
-          A && /* @__PURE__ */ t.jsx(
-            Be,
-            {
-              productType: "other_connection",
-              isUpdateLinkClicked: p === "update_account",
-              isLoginRequired: A,
-              isPendingVerification: !1,
-              fetchAndUpdateStatues: {
-                fetchStatus: s.fetchStatus,
-                updateStatus: s.updateStatus,
-                linkFetchStatus: o.fetchStatus,
-                linkUpdateStatus: o.updateStatus,
-                prevFetchState: L,
-                prevUpdateState: S
-              },
-              onUpdateLinkTokenClick: X,
-              onChaseInfoClick: V
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsxs(Ln, { children: [
-        /* @__PURE__ */ t.jsx(Dn, { className: "balanceLabel", children: ve("0,0.[00]", e.balances?.available) }),
-        e.balances?.lastRefreshTime ? /* @__PURE__ */ t.jsx(Rn, { className: "balanceLabel", children: ke(e.balances?.lastRefreshTime) }) : J?.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(ue, { size: "ExtraSmall", start: !0 }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ t.jsxs(_n, { children: [
-      /* @__PURE__ */ t.jsx(zn, { children: Se.bankConnectionHeader.linkAccount }),
-      /* @__PURE__ */ t.jsx(Bn, { children: te?.accountName ?? $n })
-    ] })
-  ] });
-}, jn = n.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${i.sp3};
-`, An = n.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  margin-bottom: ${i.sp3};
-  justify-content: space-between;
-`, In = n(E)`
-  color: ${(e) => e.theme.colors.grey1};
-  display: flex;
-  align-items: center;
-`, Pn = n.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: ${i.sp3};
-`, _n = n.div`
-  display: flex;
-  align-items: center;
-`, zn = n(F)`
-  color: ${(e) => e.theme.colors.grey1};
-  margin-right: ${i.sp2};
-`, Bn = n(F)`
-  color: ${(e) => e.theme.colors.hero};
-`, On = n(E)`
-  display: flex;
-  align-items: center;
-  margin-left: ${i.sp2};
-`, Ln = n.div`
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-`, Dn = n(E)`
-  color: ${(e) => e.theme.colors.hero};
-`, Rn = n(F)`
-  color: ${(e) => e.theme.colors.hero};
-`, Fn = n.div``, Nn = n.div`
-  display: flex;
-  gap: ${i.sp2};
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-`, Wn = n(F)`
-  text-transform: capitalize;
-`, Mn = n(F)`
-  margin-left: ${i.sp1};
-`, Hn = n(E)`
-  max-width: ${`calc(100% - ${i.sp3})`};
-  text-transform: capitalize;
-  overflow: hidden;
-`, Un = n.div`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: ${i.sp2};
-`, {
-  settings: {
-    bankConnectionListHeader: Ie,
-    title: En,
-    infoText: Vn
-  }
-} = pe.getLocalizedStrings().common, be = {
-  pageContentPadding: new z(v[4], v[8]),
-  subtitleSectionWidth: new z(343, 580, 1200),
-  subTitleBottomMargin: new z(v[0], v[5])
-}, qn = {
-  qboLinkAcc: new yt("smallRegular", "standardRegular")
-}, Jn = "bankConnectionsSettingsPage", re = "bankAccountSection", de = "primaryAccountSection", Gn = "bill_pay", Yn = "reimbursement", Qn = "zeni_accounts", Zn = "charge_cards", Kn = "zeni_treasury", Ue = (e) => /* @__PURE__ */ t.jsx(ti, { children: q.map((u) => /* @__PURE__ */ t.jsx(
-  ni,
-  {
-    actualDataValue: u.value,
-    wrapperWidth: u.width,
-    windowSize: e,
-    children: /* @__PURE__ */ t.jsx(ii, { children: u.value })
-  },
-  u.value
-)) }), vi = ({
-  bankSetupView: e,
-  connectedAccountProvider: u,
-  onBackClick: J,
-  onUpdateAccountClick: N,
-  onFetchLinkTokenClick: P,
-  onUpdatePaymentAccountStatus: _,
-  onUpdatePaymentAccountLoginStatus: W,
-  onEstablishConnectionClick: $,
-  onEstablishConnectionSuccess: c,
-  onClickMenuIcon: k,
-  onUpdatePrimaryFundingAccount: g,
-  onRemoveConnection: U
-}) => {
-  const M = $e(), a = Pe(), { allFundingAccounts: V, primaryConnection: o } = e, s = nt({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: qe(e),
-    values: qe(e)
-  }), p = s.handleSubmit((h) => {
-  }), b = async (h, f) => {
-    const S = h.split("."), L = S[0], j = S[1], A = o.find(
-      (r) => r.productType === L
-    );
-    if (L != null && j != null) {
-      const r = f[L][j];
-      if (j === "primaryAccountSection") {
-        const B = V.find(
-          (l) => l.id === r.selectedOption
-        )?.accType;
-        r.selectedOption != null && B != null && g(
-          r.selectedOption,
-          y(L),
-          B
-        );
-      } else if (j === "bankAccountSection" && A != null && A.primaryFundingAccount != null && r.selectedOption != null) {
-        const m = A.primaryFundingAccount?.id, B = A.primaryFundingAccount?.accType;
-        m != null && B != null && N(
-          r.selectedOption,
-          m,
-          L,
-          y(L),
-          B
-        );
-      }
-    }
-  };
-  R(() => {
-    const h = s.watch((f, { name: S }) => {
-      S != null && f != null && it(() => b(S, f));
-    });
-    return () => {
-      h.unsubscribe();
-    };
-  });
-  const d = e.fetchState === "In-Progress" || e.fetchState === "Not-Started", C = e.fetchState === "Completed" && e.allFundingAccounts.length === 0, G = a === "small" ? Tn : nn, w = () => d ? /* @__PURE__ */ t.jsx(ci, { children: /* @__PURE__ */ t.jsx(ue, { size: "ExtraLarge", start: !0 }) }) : C ? /* @__PURE__ */ t.jsx(gt, { message: "No bank connections added." }) : /* @__PURE__ */ t.jsxs(Xn, { windowSize: a, children: [
-    /* @__PURE__ */ t.jsx(Ve, { children: Ie.primary }),
-    a !== "small" ? Ue(a) : null,
-    /* @__PURE__ */ t.jsx(ot, { ...s, children: /* @__PURE__ */ t.jsx(
-      "form",
-      {
-        id: pi(Jn),
-        onSubmit: p,
-        children: /* @__PURE__ */ t.jsx(si, { windowSize: a, children: e.primaryConnection.map(
-          (h) => h != null ? /* @__PURE__ */ t.jsx(
-            Ee,
-            {
-              windowSize: a,
-              children: /* @__PURE__ */ t.jsx(
-                Pt,
-                {
-                  allBankAccounts: e.allBankAccounts,
-                  setupView: h,
-                  connectedAccountProvider: u,
-                  onFetchLinkTokenClick: P,
-                  onUpdatePaymentAccountStatus: _,
-                  onUpdatePaymentAccountLoginStatus: W,
-                  onEstablishConnectionClick: $,
-                  onEstablishConnectionSuccess: c
-                }
-              )
-            },
-            h.productType
-          ) : null
-        ) })
-      }
-    ) }),
-    e.otherPaymentAccounts.length > 0 ? /* @__PURE__ */ t.jsxs(oi, { children: [
-      /* @__PURE__ */ t.jsx(Ve, { children: Ie.other }),
-      /* @__PURE__ */ t.jsx(di, { children: /* @__PURE__ */ t.jsx(
-        ft,
-        {
-          display: "flex",
-          placement: "right",
-          maxWidth: "340px",
-          title: Ie.otherToolTip,
-          style: {
-            padding: `12px ${i.sp3}`
-          },
-          children: /* @__PURE__ */ t.jsx(ui, {})
-        }
-      ) })
-    ] }) : null,
-    a !== "small" && e.otherPaymentAccounts.length > 0 ? Ue(a) : null,
-    e.otherPaymentAccounts.map((h) => {
-      const f = V.find(
-        (S) => S.id === h.paymentAccountId
-      )?.balanceFetchStatus;
-      return /* @__PURE__ */ t.jsx(
-        Ee,
-        {
-          windowSize: a,
-          children: /* @__PURE__ */ t.jsx(
-            G,
-            {
-              paymentAccount: h,
-              bankAccountList: e.allBankAccounts,
-              balanceFetchStatus: f,
-              connectedAccountProvider: u,
-              onRemoveConnection: U,
-              onFetchLinkTokenClick: P,
-              onEstablishConnectionClick: $,
-              onUpdatePaymentAccountStatus: _,
-              onEstablishConnectionSuccess: c
-            }
-          )
-        },
-        h.paymentAccountId
-      );
-    })
-  ] });
-  return /* @__PURE__ */ t.jsxs(ei, { children: [
-    /* @__PURE__ */ t.jsx(
-      mt,
-      {
-        source: "BankConnectionsSettingsPage",
-        title: En.bankConnections,
-        backgroundColor: M.colors.grey4,
-        style: { zIndex: 3 },
-        onBackClick: J,
-        showBackButton: !1,
-        showMenuIcon: a === "medium-compact" || a === "small",
-        onClickMenuIcon: k
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(ai, { windowSize: a, children: [
-      /* @__PURE__ */ t.jsx(li, { windowSize: a, children: /* @__PURE__ */ t.jsx(ri, { windowSize: a, children: Vn.bankConnections }) }),
-      w()
-    ] })
-  ] });
-}, Xn = n.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-left: ${(e) => be.pageContentPadding.valuePx(e.windowSize)};
-  padding-right: ${(e) => be.pageContentPadding.valuePx(e.windowSize)};
-`, ei = n.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  row-gap: ${i.sp3};
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, ti = n(F)`
-  top: ${i.sp0};
-  left: ${i.sp0};
-  min-height: ${i.sp8};
-  width: auto;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${i.sp3} ${i.sp8} ${i.sp3} ${i.sp4};
-  background-color: ${(e) => e.theme.colors.grey4};
-  justify-content: space-between;
-  position: sticky;
-`, ni = n.div`
-  color: ${(e) => e.theme.colors.grey1};
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  display: flex;
-  align-items: center;
-  gap: ${i.sp1};
-  left: ${i.sp0};
-  justify-content: ${(e) => e.actualDataValue === "Balance" ? "flex-end" : "flex-start"};
-  position: static;
-  z-index: 0;
-  padding-left: ${i.sp0};
-  box-sizing: border-box;
-  overflow: hidden;
-`, ii = n(F)`
-  display: flex;
-  gap: 5px;
-`, oi = n.div`
-  display: flex;
-  align-items: center;
-`, Ee = n.div`
-  display: flex;
-  min-height: 96px;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border-radius: ${i.sp2};
-  box-sizing: border-box;
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  margin-bottom: ${i.sp5};
-  color: ${(e) => e.theme.colors.hero};
-  .fundingAccount
-    .single-select-field__control
-    .select-value-container
-    .single-select-field__single-value {
-    color: ${(e) => e.theme.colors.hero};
-    ${Ye.standardRegular.css};
-  }
-  .qboLinkAcc
-    .single-select-field__control
-    .select-value-container
-    .single-select-field__single-value {
-    color: ${(e) => e.theme.colors.hero};
-    ${(e) => `${qn.qboLinkAcc.style(e.windowSize)}`};
-  }
-  &:hover {
-    border: ${(e) => `1px solid  ${e.theme.colors.primary}`};
-    color: ${(e) => e.theme.colors.primary};
-    .balanceLabel {
-      color: ${(e) => e.theme.colors.primary};
-    }
-    .single-select-field__control
-      .select-value-container
-      .single-select-field__single-value {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, ai = n.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-`, ci = n.div`
-  display: flex;
-  width: 100%;
-  height: calc(100vh - 110px);
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, si = n.div`
-  display: flex;
-  flex-direction: column;
-`, Ve = n(xt)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-right: ${i.sp1};
-  padding: ${i.sp3} ${i.sp0} ${i.sp3} ${i.sp2};
-`, li = n(St)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: ${(e) => be.subtitleSectionWidth.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => be.subTitleBottomMargin.valuePx(e.windowSize)};
-`, ri = n(E)`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.hero};
-`, di = n.div`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, ui = n(wt)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`, qe = (e) => {
-  const { primaryConnection: u, allBankAccounts: J, allFundingAccounts: N } = e, P = J.map((a) => ({
-    label: a.accountName,
-    value: a.accountId
-  })), _ = N.map((a) => ({
-    label: a.label,
-    value: a.id,
-    isRecommended: a.accType === "depositAccount"
-  })), W = u.find(
-    (a) => a.productType === "bill_pay"
-  ), $ = u.find(
-    (a) => a.productType === "reimbursement"
-  ), c = u.find(
-    (a) => a.productType === "zeni_accounts"
-  ), k = u.find(
-    (a) => a.productType === "charge_cards"
-  ), g = u.find(
-    (a) => a.productType === "zeni_treasury"
-  ), U = c?.allFundingAccounts.map((a) => ({
-    label: a.label,
-    value: a.id,
-    isRecommended: a.accType === "depositAccount"
-  })) ?? [], M = g?.allFundingAccounts.map((a) => ({
-    label: a.label,
-    value: a.id,
-    isRecommended: a.accType === "paymentAccount"
-  })) ?? [];
-  return {
-    [Gn]: {
-      [re]: {
-        selectedOption: W?.primaryFundingAccount?.zeniAccountId,
-        allOptions: P
-      },
-      [de]: {
-        selectedOption: W?.primaryFundingAccount?.id,
-        allOptions: _
-      }
-    },
-    [Yn]: {
-      [re]: {
-        selectedOption: $?.primaryFundingAccount?.zeniAccountId,
-        allOptions: P
-      },
-      [de]: {
-        selectedOption: $?.primaryFundingAccount?.id,
-        allOptions: _
-      }
-    },
-    [Qn]: {
-      [re]: {
-        selectedOption: c?.primaryFundingAccount?.zeniAccountId,
-        allOptions: P
-      },
-      [de]: {
-        selectedOption: c?.primaryFundingAccount?.id,
-        allOptions: U
-      }
-    },
-    [Kn]: {
-      [re]: {
-        selectedOption: g?.primaryFundingAccount?.zeniAccountId,
-        allOptions: P
-      },
-      [de]: {
-        selectedOption: g?.primaryFundingAccount?.id,
-        allOptions: M
-      }
-    },
-    [Zn]: {
-      [re]: {
-        selectedOption: k?.primaryFundingAccount?.zeniAccountId,
-        allOptions: P
-      },
-      [de]: {
-        selectedOption: k?.primaryFundingAccount?.id,
-        allOptions: _
-      }
-    }
-  };
-}, pi = (e) => `${e}_form`;
-export {
-  vi as default,
-  pi as formUniqueName
-};