@zeniai/web-components 3.17.12 → 3.17.14

package/dist/BillPayPromoPage-uoBWechB.js

@@ -0,0 +1,292 @@
+import { j as e, u as z } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as C, useEffect as Y } from "react";
+import t from "@emotion/styled";
+import { hasBillPayAdminLevelAccess as _, hasBillPayAccess as ee, hasOnlyBillPayAccess as se } from "@zeniai/client-epic-state";
+import { dB as oe, u as f, aD as te, a as M, hH as le, aE as re, B as k, e as B, er as m, S as o, V as ie, H as ne, P as U, E as ae, R as ce, C as w, ad as de, a7 as pe, n as me, D as xe } from "./index-De4lhuEW.js";
+import { V as he } from "./VideoPopup-Bnm-RZPy.js";
+import { S } from "./usp-line-BBd1wKwW.js";
+const A = "https://storage.googleapis.com/zeni-apis.appspot.com/images/Billpay-Light.png", I = "https://storage.googleapis.com/zeni-apis.appspot.com/images/Billpay-Dark.png", ge = {
+  midContainerMarginBottom: new ce(xe[5], 44)
+}, ue = t.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  background-color: ${(s) => s.theme.colors.grey4};
+`, je = t.div`
+  padding: ${(s) => s.windowSize === "small" ? `${o.sp0} ${o.sp3}` : `${o.sp0} ${o.sp8}`};
+  text-align: center;
+`, ye = t(ne)`
+  max-width: 600px;
+  margin: auto;
+  padding: ${o.sp7} ${o.sp0};
+  color: ${(s) => s.theme.colors.primary};
+`, fe = t(ie)`
+  max-width: 600px;
+  margin: auto;
+  padding: ${o.sp5} ${o.sp0};
+  color: ${(s) => s.theme.colors.primary};
+`, L = t.div`
+  display: flex;
+  flex-direction: ${(s) => s.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+  margin-bottom: ${(s) => ge.midContainerMarginBottom.valuePx(s.windowSize)};
+`, we = t.div``, x = t.img``, R = t.div`
+  width: ${(s) => s.windowSize === "small" ? "auto" : "376px"};
+  display: flex;
+  flex-direction: column;
+`, D = t.div`
+  width: ${(s) => s.windowSize === "small" ? "100%" : "calc(100% - 376px)"};
+  overflow: hidden;
+  max-width: 712px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+`, H = t.div`
+  margin-left: ${(s) => s.windowSize === "small" ? o.sp0 : o.sp6};
+  margin-bottom: ${(s) => s.windowSize === "small" ? o.sp4 : o.sp0};
+  background: ${(s) => s.theme.colors.grey3};
+  border-radius: 12px;
+  border: ${(s) => `1px solid ${s.theme.colors.grey3}`};
+  padding: 15px;
+`, a = t.div`
+  border-radius: ${o.sp12};
+  border: ${(s) => `1px solid ${s.theme.colors.grey2}`};
+  padding: ${(s) => s.windowSize === "small" ? `${o.sp2} ${o.sp4} ${o.sp2} ${o.sp0}` : `${o.sp3} ${o.sp5} ${o.sp3} ${o.sp0}`};
+  background: ${(s) => s.theme.colors.grey5};
+  position: relative;
+  margin-bottom: ${o.sp3};
+  display: flex;
+  align-items: center;
+  text-align: start;
+  box-sizing: border-box;
+`, g = t(me)`
+  color: ${(s) => s.theme.colors.champion};
+`, u = t(pe)`
+  color: ${(s) => s.theme.colors.champion};
+`, j = t(U)`
+  color: ${(s) => s.theme.colors.champion};
+`, y = t(de)`
+  color: ${(s) => s.theme.colors.champion};
+`, c = t.div``, d = t.div`
+  padding-left: ${o.sp3};
+`, V = t(S)`
+  color: ${w.graphColor16Dark};
+`, E = t(S)`
+  color: ${w.graphColor09Dark};
+`, O = t(S)`
+  color: ${w.graphColor28Dark};
+`, Se = t(ae)`
+  margin: ${o.sp3} auto;
+  max-width: 719px;
+  color: ${(s) => s.theme.colors.hero};
+`, $e = t.div`
+  display: flex;
+  flex-direction: ${(s) => s.windowSize === "small" ? "column" : "row"};
+  align-items: center;
+  justify-content: center;
+`, Pe = t(U)`
+  margin: ${(s) => s.windowSize === "small" ? o.sp1 : `auto ${o.sp5}`};
+  color: ${(s) => s.theme.colors.grey1};
+`, l = M.getLocalizedStrings().spendManagement.billPay.billPayPromo, i = M.getLocalizedStrings().commonSetUp.businessVerification.terms, Ie = ({
+  billPaySetupView: s,
+  analytics: r,
+  meetingUrl: F,
+  videoUrl: Z,
+  onButtonClick: N,
+  onBackClick: W,
+  onSetupBillPaySuccess: $,
+  onClickMenuIcon: G
+}) => {
+  const h = oe(), n = f(), { billPayTermsDetails: p } = s, [q, J] = C(!1), [K, P] = C(!1), v = te(
+    p?.fetchStatus.fetchState
+  );
+  Y(() => {
+    v === "In-Progress" && p?.fetchStatus.fetchState === "Completed" && $?.();
+  }, [v, $, p?.fetchStatus]);
+  const Q = () => {
+    r?.trackBillPayPromoScheduleDemo(), P(!0);
+  }, X = _(
+    h.loggedInUserRoleMap
+  ), T = ee(
+    h.loggedInUserRoleMap
+  ) && !X, b = T ? l.setupNonAccessableUsersPromoText : l.promoText;
+  return /* @__PURE__ */ e.jsxs(ue, { children: [
+    q === !0 ? /* @__PURE__ */ e.jsx(
+      he,
+      {
+        onCancelClick: () => {
+          J(!1);
+        },
+        videoUrl: Z
+      }
+    ) : null,
+    K === !0 ? /* @__PURE__ */ e.jsx(
+      le,
+      {
+        onCancelClick: () => {
+          P(!1);
+        },
+        meetingUrl: F
+      }
+    ) : null,
+    /* @__PURE__ */ e.jsx(
+      re,
+      {
+        title: l.title,
+        onBackClick: W,
+        showBackButton: !se(h.loggedInUserRoleMap),
+        showMenuIcon: n === "small" || n === "medium-compact",
+        onClickMenuIcon: G,
+        source: "BillPayPromoPage"
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(je, { windowSize: n, children: [
+      n === "small" ? /* @__PURE__ */ e.jsx(fe, { children: b }) : /* @__PURE__ */ e.jsx(ye, { children: b }),
+      n === "small" ? /* @__PURE__ */ e.jsx(ve, {}) : /* @__PURE__ */ e.jsx(Te, {}),
+      T === !1 ? /* @__PURE__ */ e.jsxs(we, { children: [
+        /* @__PURE__ */ e.jsxs($e, { windowSize: n, children: [
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              variant: "secondary",
+              label: l.scheduleDemoButton,
+              onClick: Q,
+              "data-testid": B("billpay-schedule-demo-button")
+            }
+          ),
+          /* @__PURE__ */ e.jsx(Pe, { windowSize: n, children: l.orText }),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              variant: "primary",
+              label: l.setupBillPayButton,
+              loading: p?.fetchStatus.fetchState === "In-Progress",
+              onClick: N,
+              "data-testid": B("billpay-setup-button")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(Se, { children: [
+          l.terms.terms1,
+          /* @__PURE__ */ e.jsx(m, { href: i.consentUrl, linkText: i.consent }),
+          i.term2,
+          /* @__PURE__ */ e.jsx(m, { href: i.depositUrl, linkText: i.depositTerms }),
+          i.term3,
+          /* @__PURE__ */ e.jsx(
+            m,
+            {
+              href: i.privacyPolicyUrl,
+              onZeniLinkClick: () => (r?.trackBillPayPrivacyPolicy(), !0),
+              linkText: i.privacy
+            }
+          ),
+          i.term4,
+          /* @__PURE__ */ e.jsx(
+            m,
+            {
+              href: i.tosUrl,
+              onZeniLinkClick: () => (r?.trackBillPayAgreement(), !0),
+              linkText: i.tos
+            }
+          ),
+          i.term5,
+          l.terms.terms3
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}, ve = () => {
+  const s = z(), r = f();
+  return /* @__PURE__ */ e.jsxs(L, { windowSize: r, children: [
+    /* @__PURE__ */ e.jsx(D, { windowSize: r, children: /* @__PURE__ */ e.jsx(H, { windowSize: r, children: s.mode === "dark" ? /* @__PURE__ */ e.jsx(
+      x,
+      {
+        src: I,
+        alt: "forecast-promo",
+        style: { width: "100%", height: "auto" },
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      x,
+      {
+        src: A,
+        alt: "forecast-promo",
+        style: { width: "100%", height: "auto" },
+        loading: "lazy"
+      }
+    ) }) }),
+    /* @__PURE__ */ e.jsxs(R, { windowSize: r, children: [
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(O, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(y, { children: l.fullyManagedText.bold }),
+          /* @__PURE__ */ e.jsx(j, { children: l.fullyManagedText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(E, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(y, { children: l.multiLevelApprovalText.bold }),
+          /* @__PURE__ */ e.jsx(j, { children: l.multiLevelApprovalText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(V, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(y, { children: l.aiPoweredText.bold }),
+          /* @__PURE__ */ e.jsx(j, { children: l.aiPoweredText.regular })
+        ] })
+      ] })
+    ] })
+  ] });
+}, Te = () => {
+  const s = z(), r = f();
+  return /* @__PURE__ */ e.jsxs(L, { windowSize: r, children: [
+    /* @__PURE__ */ e.jsxs(R, { windowSize: r, children: [
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(O, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(u, { children: l.fullyManagedText.bold }),
+          /* @__PURE__ */ e.jsx(g, { children: l.fullyManagedText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(E, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(u, { children: l.multiLevelApprovalText.bold }),
+          /* @__PURE__ */ e.jsx(g, { children: l.multiLevelApprovalText.regular })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { windowSize: r, style: { width: "376px" }, children: [
+        /* @__PURE__ */ e.jsx(c, { children: /* @__PURE__ */ e.jsx(V, {}) }),
+        /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(u, { children: l.aiPoweredText.bold }),
+          /* @__PURE__ */ e.jsx(g, { children: l.aiPoweredText.regular })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx(D, { windowSize: r, children: /* @__PURE__ */ e.jsx(H, { windowSize: r, children: s.mode === "dark" ? /* @__PURE__ */ e.jsx(
+      x,
+      {
+        src: I,
+        alt: "forecast-promo",
+        style: { width: "615px", height: "402px" },
+        loading: "lazy"
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      x,
+      {
+        src: A,
+        alt: "forecast-promo",
+        style: { width: "615px", height: "402px" },
+        loading: "lazy"
+      }
+    ) }) })
+  ] });
+};
+export {
+  Ie as default
+};

package/dist/BillPaySetUpPage-DEdCaYsU.js

@@ -0,0 +1,408 @@
+import { u as _e, g as Fe, h as He, b as Q, j as t, D as $e, F as ze } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as Ue, useRef as Le, useMemo as qe, useEffect as W } from "react";
+import f from "@emotion/styled";
+import { isVerifiedPaymentAccountProviderStatusCode as Ee } from "@zeniai/client-epic-state";
+import { u as Ne, aD as k, a as Me, e as Ge, C as Je, R as u, aE as Ke, A as Ze, hI as U, go as Qe, hJ as Xe, eP as Ye, gi as et, Z as tt, hK as it, ao as ot, S as q, hL as nt, D as a, o as at, ag as st } from "./index-De4lhuEW.js";
+import { U as lt } from "./UploadAdditionalDocumentOverlay-Cex2ZoTo.js";
+const o = {
+  titleWidth: new u(343, 580, 726, 826),
+  setupDetailsRowGap: new u(12, a[5], a[5]),
+  sectionRowGap: new u(a[5], a[9], a[9]),
+  lastSectionPaddingBottom: new u(a[7], a[10], a[10]),
+  iconWidthHeight: new u(20, a[4]),
+  subTitlePaddingTop: new u(12, a[3]),
+  subTitlePaddingBottom: new u(a[3], a[3]),
+  overlayWidth: new u(100, 100, 59)
+}, X = "billPaySetUpPage", V = "billPayAccount", Pt = ({
+  billPaySetupView: e,
+  isDisabled: P,
+  billpayApprovalView: O,
+  meetingUrl: b,
+  showIntlWiseWidget: c,
+  connectedAccountProvider: ee,
+  isAccountsEnabled: te,
+  isLocalCurrencyEnabled: ie,
+  analytics: m,
+  filesEndPoint: oe,
+  authParams: ne,
+  accountsPromoConfig: ae,
+  onBackClick: se,
+  onBusinessVerificationSectionClick: le,
+  onSetupApprovalRulesSectionClick: ce,
+  onFetchLinkTokenClick: re,
+  onEstablishConnectionClick: de,
+  onEstablishConnectionSuccess: ue,
+  onUpdatePrimaryFundingAccount: pe,
+  onUpdateAccountClick: he,
+  onUpdatePaymentAccountStatus: ge,
+  onUpdatePaymentAccountLoginStatus: fe,
+  onEnableBillPayClick: me,
+  onEnableBillPaySuccess: E,
+  onClickMenuIcon: Se,
+  onInternationPaymentSetUpClick: ve,
+  onEditFileName: xe,
+  onDeleteFile: ye,
+  updateFilesEntity: Pe,
+  onCompanyOfficerUpdated: be,
+  onSendForVerificationClick: we,
+  onSignUpClick: Ae
+}) => {
+  const w = _e(), i = Ne(), [A, S] = Ue(!1), N = Le(null), {
+    fetchState: p,
+    updateStatus: v,
+    accountUpdateStatus: Te,
+    plaidConnectionDetails: R,
+    allBankAccounts: Be,
+    companyBillPayInfo: T,
+    isRefreshingViewInBackground: Ce,
+    selectedCompanyOfficer: l,
+    primaryFundingAccount: r,
+    allFundingAccounts: M
+  } = e, h = T?.internationalWireOnboardingStatus, B = h == null || h.code === "onboarding_status_not_started", {
+    fetchState: G,
+    allApprovalRules: C,
+    approvalRulesStatus: Ie
+  } = O, _ = R.link_account.updateStatus, F = R.update_account.updateStatus, I = k(p), J = k(v.fetchState), K = k(
+    _.fetchState
+  ), Z = k(
+    F.fetchState
+  ), x = Fe({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: qe(
+      () => L(e),
+      [e]
+    ),
+    values: L(e)
+  });
+  W(() => {
+    !A && l?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && l.areAdditionalDocumentsRequestedForVerification && !l.areAdditionalDocumentsSubmittedForVerification && l.userVerificationStatus?.code === "require_info" && S(!0), A && I === "In-Progress" && p === "Completed" && S(!1);
+  }, [l, p, I]), W(() => {
+    (I === "In-Progress" && p === "Completed" || K === "In-Progress" && _.fetchState === "Completed" || Z === "In-Progress" && F.fetchState === "Completed") && x.reset(L(e));
+  }, [
+    I,
+    p,
+    x,
+    e,
+    K,
+    _.fetchState,
+    Z,
+    F.fetchState
+  ]);
+  const je = x.handleSubmit((y) => {
+    m.trackEnableBillPay(), me();
+  }), De = async (y, D) => {
+    const n = D[V];
+    if (y.includes(V)) {
+      if (y.includes("fundingAccount")) {
+        if (n.fundingAccount.selectedOption != null && r?.id != n.fundingAccount.selectedOption) {
+          const g = M.find(
+            (z) => z.id === n.fundingAccount.selectedOption
+          );
+          g != null && pe(
+            n.fundingAccount.selectedOption,
+            g.accType
+          );
+        }
+      } else if (n.account.selectedOption != null && r?.id != null && r?.zeniAccountId != n.account.selectedOption) {
+        const g = n.account.allOptions.find(
+          (z) => z.value === n.account.selectedOption
+        );
+        g != null && typeof g.label == "string" && m.trackConnectBankLink(
+          g.value,
+          g.label,
+          "bill_pay"
+        ), he(
+          n.account.selectedOption,
+          r.id,
+          r.accType
+        );
+      }
+    }
+  };
+  W(() => {
+    const y = x.watch((D, { name: n }) => {
+      n != null && D != null && He(() => De(n, D));
+    });
+    return () => {
+      y.unsubscribe();
+    };
+  }), W(() => {
+    J === "In-Progress" && v.fetchState === "Completed" && E();
+  }, [E, J, v.fetchState]);
+  const { commonSetUp: We, spendManagement: ke } = Me.getLocalizedStrings(), { setUp: d } = We, { billPaySetup: s } = ke.billPay, H = T?.isBusinessVerified === !0 && (r?.accType === "depositAccount" || Ee(
+    r?.providerVerificationStatus?.code ?? ""
+  )), $ = T?.isBillPayEnabled === !0, Ve = H ? d.setupVerifiedSubTitle : s.setupSubTitle, Oe = p === "In-Progress" || p === "Not-Started" || G === "In-Progress" || G === "Not-Started", j = w.mode === "light" ? new Q(w.colors.brandColorJadeLight) : new Q(w.colors.brandColorJadeDark), Re = () => {
+    !A && l?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && l.areAdditionalDocumentsRequestedForVerification && !l.areAdditionalDocumentsSubmittedForVerification && l.userVerificationStatus?.code === "require_info" ? S(!0) : le?.();
+  };
+  return /* @__PURE__ */ t.jsxs(rt, { ref: N, children: [
+    /* @__PURE__ */ t.jsx(
+      $e,
+      {
+        anchor: "right",
+        PaperProps: {
+          style: {
+            width: o.overlayWidth.valuePercentage(i),
+            boxShadow: "none"
+          }
+        },
+        open: A,
+        onClose: () => S(!1),
+        style: { backgroundColor: Je.drawerBackground },
+        transitionDuration: 250,
+        "data-testid": Ge("bill-pay-setup-drawer"),
+        children: /* @__PURE__ */ t.jsx(
+          lt,
+          {
+            authParams: ne,
+            filesEndPoint: oe,
+            updateStatus: v,
+            onEditFileName: xe,
+            onDeleteFile: ye,
+            updateFilesEntity: Pe,
+            companyOfficer: l,
+            onClose: () => S(!1),
+            onCompanyOfficerUpdated: be,
+            onSendForVerificationClick: we
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ke,
+      {
+        title: s.setupTitle,
+        style: { zIndex: 3 },
+        onBackClick: se,
+        showMenuIcon: !$ && (i === "medium-compact" || i === "small"),
+        onClickMenuIcon: Se,
+        scrollableContent: N,
+        backgroundColor: w.colors.grey4,
+        source: "BillPaySetUpPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(pt, { windowSize: i, children: [
+      /* @__PURE__ */ t.jsx(ut, { windowSize: i, children: Ve }),
+      Oe ? /* @__PURE__ */ t.jsx(ht, { children: /* @__PURE__ */ t.jsx(Ze, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsxs(ct, { children: [
+        /* @__PURE__ */ t.jsx(ze, { ...x, children: /* @__PURE__ */ t.jsx("form", { id: Y(X), onSubmit: je, children: /* @__PURE__ */ t.jsxs(gt, { windowSize: i, children: [
+          /* @__PURE__ */ t.jsx(
+            U,
+            {
+              onClick: Re,
+              title: d.businessVerificationTitle,
+              subTitle: d.businessVerificationSubTitle,
+              header: d.businessVerificationHeader,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  Qe,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: j
+              },
+              status: T?.businessVerificationStatus,
+              isLoading: Ce,
+              isActiveWhileLoading: !0
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Xe,
+            {
+              connectedAccountProvider: ee,
+              primaryFundingAccount: r,
+              allFundingAccounts: M,
+              plaidConnectionDetails: R,
+              allBankAccounts: Be,
+              sectionId: V,
+              isDisabled: P,
+              onFetchLinkTokenClick: re,
+              onEstablishConnectionClick: de,
+              onUpdatePaymentAccountStatus: ge,
+              onUpdatePaymentAccountLoginStatus: fe,
+              onEstablishConnectionSuccess: ue,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  Ye,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: j
+              },
+              analytics: m,
+              productType: "bill_pay",
+              isAccountsEnabled: te,
+              onSignUpClick: Ae,
+              pageName: "Bill Pay Setup",
+              accountsPromoConfig: ae
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            U,
+            {
+              title: C.length > 0 ? d.approvalTitle : d.createApprovalTitle,
+              subTitle: s.approvalSubTitle,
+              header: C.length > 0 ? d.approvalHeader : d.setupApprovalHeader,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  et,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: j
+              },
+              style: {
+                paddingBottom: o.lastSectionPaddingBottom.valuePx(i)
+              },
+              onClick: ce,
+              status: C.length > 0 ? Ie : void 0
+            }
+          )
+        ] }) }) }),
+        c === !0 ? /* @__PURE__ */ t.jsx(
+          U,
+          {
+            title: B ? s.enableInternationalWireTitle : s.internationWireTitle,
+            subTitle: s.internationalWireSubTitle2,
+            header: s.internationalWireHeader,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                it,
+                {
+                  width: o.iconWidthHeight.valuePx(i),
+                  height: o.iconWidthHeight.valuePx(i)
+                }
+              ),
+              color: j
+            },
+            style: {
+              paddingBottom: o.lastSectionPaddingBottom.valuePx(i)
+            },
+            isClickable: !0,
+            onClick: () => {
+              B && m.trackEnableIntlWire(ie), ve?.();
+            },
+            status: B ? void 0 : {
+              name: h.name,
+              code: h.code
+            },
+            statusInfoIcon: h?.code === "verification_pending" || h?.code === "verification_failed" ? /* @__PURE__ */ t.jsx(
+              tt,
+              {
+                title: h.code === "verification_pending" ? s.tooltipTexts.pendingInternationalVerificationText : s.tooltipTexts.internationalVerificationFailed,
+                children: /* @__PURE__ */ t.jsx(dt, {})
+              }
+            ) : void 0,
+            shouldHover: !0,
+            showRightArrow: B
+          }
+        ) : null
+      ] })
+    ] }),
+    H && !$ && C.length > 0 ? /* @__PURE__ */ t.jsx(
+      ot,
+      {
+        formId: Y(X),
+        primaryBtn: {
+          label: s.enableBillPay,
+          style: {
+            width: "auto",
+            minWidth: i === "small" ? "auto" : "181px"
+          },
+          isLoading: v.fetchState === "In-Progress" || Te.fetchState === "In-Progress",
+          isDisabled: P != null
+        },
+        showCancel: !1,
+        helperText: s.terms,
+        cancelBtn: { label: "" },
+        style: {
+          padding: `12px ${q.sp3}`
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      nt,
+      {
+        isFooterRendered: H && !$,
+        meetingUrl: b,
+        analytics: m,
+        productType: "bill_pay"
+      }
+    )
+  ] });
+}, ct = f.div``, rt = f.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+  height: 100vh;
+  overflow-y: auto;
+`, dt = f(st)`
+  width: ${q.sp3};
+  height: ${q.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ut = f(at)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => o.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => o.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => o.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, pt = f.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${(e) => o.setupDetailsRowGap.valuePx(e.windowSize)};
+`, ht = f.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};
+`, gt = f.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => o.sectionRowGap.valuePx(e.windowSize)};
+`, L = (e) => {
+  const { allBankAccounts: P, allFundingAccounts: O, primaryFundingAccount: b } = e;
+  return {
+    [V]: {
+      fundingAccount: {
+        selectedOption: b?.id,
+        allOptions: O.map((c) => ({
+          label: c.label,
+          value: c.id,
+          isRecommended: c.accType === "depositAccount"
+        }))
+      },
+      account: {
+        selectedOption: b?.zeniAccountId,
+        allOptions: P.map((c) => ({
+          label: c.accountName,
+          value: c.accountId
+        }))
+      }
+    }
+  };
+}, Y = (e) => `${e}_form`;
+export {
+  Pt as default,
+  Y as uniqueName
+};