@zeniai/web-components 3.17.12 → 3.17.14

package/dist/BankConnectionsSettingsPage-DnQ2TNJK.js

@@ -0,0 +1,1694 @@
+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-De4lhuEW.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-Ae0JN5Kn.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
+};