@zeniai/web-components 3.16.41 → 3.16.42

package/dist/ReimbursementSetUpPage-BzR91_eW.js

@@ -1,666 +0,0 @@
-import { u as Le, d as Je, m as Ze, j as t, g as Qe, h as Ye, b as $e, D as Ke, F as Xe } from "./vendor-.pnpm-BZbZ6JJC.js";
-import * as S from "react";
-import { useState as he, useEffect as k, useMemo as et } from "react";
-import o from "@emotion/styled";
-import { isVerifiedPaymentAccountProviderStatusCode as tt } from "@zeniai/client-epic-state";
-import { u as Me, a as Ie, R as a, hG as ke, hH as je, S as i, fO as nt, B as ot, j as Pe, av as Ae, Q as it, C as Z, D as n, G as at, a3 as st, aD as q, aE as lt, A as rt, gl as ct, eN as dt, gf as ut, ap as mt, _ as pt } from "./index-BtH6xclG.js";
-import { H as gt } from "./HelpButton-B0ZBXPeh.js";
-import { S as De } from "./SetUpDefaultSection-shC3qOy6.js";
-import { S as ht } from "./SpendMgmtSetupAccountSection-CAWyEGGM.js";
-import { U as ft } from "./UploadAdditionalDocumentOverlay-BlKvE3tT.js";
-const xt = (e) => /* @__PURE__ */ S.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ S.createElement("path", { d: "M12.7113 3H2.89261C2.39963 3 2 3.39963 2 3.89261V20.8522C2 21.3451 2.39963 21.7448 2.89261 21.7448H12.7113C13.2043 21.7448 13.6039 21.3451 13.6039 20.8522V3.89261C13.6039 3.39963 13.2043 3 12.7113 3Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M10.4798 13.7113H9.58719C9.3407 13.7113 9.14088 13.9111 9.14088 14.1576V16.8354C9.14088 17.0819 9.3407 17.2817 9.58719 17.2817H10.4798C10.7263 17.2817 10.9261 17.0819 10.9261 16.8354V14.1576C10.9261 13.9111 10.7263 13.7113 10.4798 13.7113Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M21.6374 16.1133C21.6374 16.1961 21.6143 16.2773 21.5708 16.3477C21.5273 16.4182 21.4651 16.4752 21.391 16.5123L19.8522 17.2817V14.6039H21.1911C21.3095 14.6039 21.423 14.6509 21.5067 14.7346C21.5904 14.8183 21.6374 14.9318 21.6374 15.0502V16.1133Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M19.8522 14.6039V13.265C19.8522 12.5268 22.53 10.1409 22.53 10.1409", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M19.8522 17.2817V19.9596C19.8522 20.433 19.6641 20.8871 19.3293 21.2219C18.9945 21.5567 18.5404 21.7448 18.067 21.7448C17.5935 21.7448 17.1394 21.5567 16.8046 21.2219C16.4698 20.8871 16.2817 20.433 16.2817 19.9596V7.90935C16.2817 7.55424 16.1407 7.21369 15.8896 6.96259C15.6385 6.7115 15.2979 6.57043 14.9428 6.57043H13.6039", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M2 10.1409H13.6039", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M11.3724 4.78528H4.23154C3.98505 4.78528 3.78523 4.9851 3.78523 5.23158V7.90941C3.78523 8.15589 3.98505 8.35571 4.23154 8.35571H11.3724C11.6189 8.35571 11.8187 8.15589 11.8187 7.90941V5.23158C11.8187 4.9851 11.6189 4.78528 11.3724 4.78528Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ S.createElement("path", { d: "M9.14088 19.0669H10.9261", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), g = {
-  sectionWidth: new a(343, 580, 726),
-  descriptionMarginBottom: new a(12, n[3]),
-  iconContainerMaxWidthHeight: new a(n[6], n[7]),
-  iconContainerMarginRight: new a(12, n[3]),
-  infoLabelPaddingLeft: new a(n[0], n[3]),
-  iconPadding: new a(10, 12),
-  iconWidthHeight: new a(20, n[4]),
-  rowGap: new a(n[2], n[3]),
-  containerPadding: new a(n[3], n[4])
-}, fe = {
-  title: new Ae("standardSemiBold", "largeSemiBold"),
-  infoLabel: new Ae("extraSmallRegular", "smallRegular")
-};
-function St({
-  companyMileageConfigInfo: e,
-  mileageDetails: v,
-  analytics: D,
-  style: T,
-  sectionId: j,
-  isActive: c = !0,
-  isDisabled: l,
-  onSaveMileageClick: Q
-}) {
-  const s = Me(), R = Le(), {
-    formState: { errors: Y },
-    trigger: K
-  } = Je(), L = vt(
-    j,
-    "mileageAmountInDenomination"
-  ), h = Ze(Y, L), { localData: r, updateStatus: B, mileageStatus: w } = v, H = e?.denominationConversions.amount == null || e.denominationConversions.amount !== r?.mileageAmountInDenomination, { commonSetUp: X, spendManagement: ee } = Ie.getLocalizedStrings(), { reimbursement: te } = ee, [C, M] = he(H), [ne, F] = he(!1);
-  k(() => {
-    h || K(L);
-  }, []), k(() => {
-    e?.denominationConversions.amount != null && e.denominationConversions.amount === r?.mileageAmountInDenomination && M(!1);
-  }, [e?.denominationConversions.amount]), k(() => {
-    C || F(C);
-  }, [C]);
-  const { reimbursementSetup: f } = te, { setUp: oe } = X, ie = C === !1 || B.fetchState === "In-Progress" ? "readonly" : l, ae = r && r?.denominationSymbol ? `${r?.denominationSymbol} ` : "", se = r && r?.mileageUnit ? r?.mileageUnit : "";
-  return /* @__PURE__ */ t.jsxs(
-    wt,
-    {
-      windowSize: s,
-      style: T,
-      isActive: c && l == null,
-      children: [
-        /* @__PURE__ */ t.jsxs(Dt, { windowSize: s, children: [
-          f.mileageHeader,
-          c === !1 ? /* @__PURE__ */ t.jsx(Lt, { children: oe.comingSoon }) : null
-        ] }),
-        /* @__PURE__ */ t.jsxs(Pt, { windowSize: s, children: [
-          /* @__PURE__ */ t.jsx(
-            jt,
-            {
-              windowSize: s,
-              isDarkMode: R.mode === "dark",
-              children: /* @__PURE__ */ t.jsx(
-                xt,
-                {
-                  width: g.iconWidthHeight.valuePx(s),
-                  height: g.iconWidthHeight.valuePx(s)
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(Ct, { children: [
-            /* @__PURE__ */ t.jsxs(At, { children: [
-              /* @__PURE__ */ t.jsxs(Tt, { children: [
-                /* @__PURE__ */ t.jsxs(Rt, { children: [
-                  /* @__PURE__ */ t.jsx(bt, { windowSize: s, children: e?.denominationConversions.amount == null ? f.mileageAddTitle : f.mileageEditTitle }),
-                  /* @__PURE__ */ t.jsx($t, { children: f.mileageSubTitle })
-                ] }),
-                w != null && e?.denominationConversions.amount != null && s === "small" ? /* @__PURE__ */ t.jsx(
-                  ke,
-                  {
-                    style: {
-                      width: "max-content",
-                      padding: i.sp0,
-                      marginTop: i.sp2
-                    },
-                    tagTitle: w.name,
-                    textColor: je(w.code)
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ t.jsxs(yt, { children: [
-                w != null && e?.denominationConversions.amount != null && s !== "small" ? /* @__PURE__ */ t.jsx(
-                  ke,
-                  {
-                    style: { width: "max-content" },
-                    tagTitle: w.name,
-                    textColor: je(w.code)
-                  }
-                ) : null,
-                /* @__PURE__ */ t.jsx(kt, {})
-              ] })
-            ] }),
-            /* @__PURE__ */ t.jsxs(Mt, { children: [
-              /* @__PURE__ */ t.jsxs(It, { children: [
-                /* @__PURE__ */ t.jsx(
-                  nt,
-                  {
-                    style: {
-                      height: i.sp6,
-                      textAlign: "left"
-                    },
-                    inputStyle: {
-                      textAlign: "left",
-                      paddingRight: i.sp10,
-                      backgroundColor: h ? void 0 : R.colors.background,
-                      color: C || h ? void 0 : R.colors.grey1
-                    },
-                    isFieldError: h,
-                    type: "number",
-                    autoFocus: !1,
-                    focus: ne,
-                    name: L,
-                    defaultValue: r?.mileageAmountInDenomination,
-                    returnValueType: "floatValue",
-                    allowEmptyFormatting: !0,
-                    prefix: ae,
-                    suffix: `  ${f.perText} ${se}`,
-                    decimalScale: 1,
-                    allowNegative: !1,
-                    isNumericString: !1,
-                    registerOptions: {
-                      min: 1,
-                      validate: (P) => P != null || l != null,
-                      required: l == null
-                    },
-                    isDisabled: ie
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(zt, { children: C ? /* @__PURE__ */ t.jsx(
-                  ot,
-                  {
-                    label: f.save,
-                    "data-testid": Pe("save-mileage"),
-                    onClick: () => {
-                      r?.mileageAmountInDenomination != null && H && !h && Q?.(
-                        r.mileageAmountInDenomination
-                      );
-                    },
-                    style: { outline: "none" },
-                    size: "small",
-                    disabled: l != null,
-                    variant: "light_transparent",
-                    reverseSpinnerColor: !1,
-                    loading: B.fetchState === "In-Progress"
-                  }
-                ) : /* @__PURE__ */ t.jsx(
-                  Et,
-                  {
-                    isDisabled: l,
-                    "data-testid": Pe("edit-mileage"),
-                    onClick: (P) => {
-                      P.stopPropagation(), M(!0), F(!0), D.trackReimbursementMileageRateEdit();
-                    }
-                  }
-                ) })
-              ] }),
-              r?.description != null ? /* @__PURE__ */ t.jsx(Vt, { size: s, hasError: h, children: h && e?.defaultMileageUnitAmount != null ? f.yourMileage.replace(
-                "__defaultMileageUnitAmount__",
-                (e.defaultMileageUnitAmount * 100).toString()
-              ) : r.description }) : null
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-const vt = (e, v) => `${e}.${v}`, wt = o.div`
-  display: flex;
-  flex-direction: column;
-  pointer-events: ${(e) => e.isLoading === !0 || e.isActive === !1 ? "none" : "initial"};
-  opacity: ${(e) => e.isActive ? 1 : 0.32};
-  row-gap: ${(e) => g.rowGap.valuePx(e.windowSize)};
-`, Ct = o.div`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-`, yt = o.div`
-  display: flex;
-`, bt = o.div`
-  ${(e) => `${fe.title.style(e.windowSize)}`};
-  color: ${(e) => e.isError === !0 ? Z.important : e.theme.colors.primary};
-`, $t = o(at)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: ${(e) => e.theme.colors.hero};
-`, kt = o.div`
-  display: flex;
-  width: ${i.sp4};
-  height: ${i.sp4};
-  margin-left: ${i.sp4};
-`, jt = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${(e) => g.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.isDarkMode ? e.theme.colors.brandColorJadeDark : e.theme.colors.brandColorJadeLight};
-  border-radius: ${i.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? Z.neutralGrey5Light : e.theme.colors.brandColorOnyx}; // As per design
-  max-width: ${(e) => g.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => g.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${(e) => g.iconContainerMarginRight.valuePx(e.windowSize)};
-`, Pt = o.div`
-  display: flex;
-  flex-direction: row;
-  padding: ${(e) => g.containerPadding.valuePx(e.windowSize)};
-  width: ${(e) => g.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${i.sp2};
-  fill: ${(e) => e.theme.colors.grey1};
-  color: ${(e) => e.theme.colors.grey1};
-  justify-content: space-between;
-  box-sizing: border-box;
-  &:hover {
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.theme.colors.primary};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-`, At = o.div`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-`, Dt = o.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${fe.title.style(e.windowSize)}`};
-`, Tt = o.div`
-  display: flex;
-  flex-direction: column;
-`, Rt = o.div``, Lt = o(it)`
-  color: ${(e) => e.theme.colors.comingSoon};
-  margin-left: ${i.sp3};
-`, Mt = o.div`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: flex-start;
-  margin-top: ${i.sp3};
-`, It = o.div`
-  display: flex;
-  height: ${i.sp6};
-  width: 100%;
-  position: relative;
-`, Vt = o.label`
-  display: flex;
-  padding-left: ${(e) => g.infoLabelPaddingLeft.valuePx(e.size)};
-  color: ${(e) => e.hasError === !0 ? Z.important : e.additionalInfoTextColor ?? e.theme.colors.hero};
-  ${(e) => `${fe.infoLabel.style(e.size)}`};
-  margin-top: ${i.sp1};
-`, zt = o.div`
-  display: flex;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: ${i.sp3};
-`, Et = o(st)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  cursor: ${(e) => e.isDisabled == null ? "pointer" : "default"};
-  pointer-events: ${(e) => e.isDisabled == null ? "initial" : "none"};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, m = {
-  titleWidth: new a(343, 580, 726, 826),
-  setupDetailsRowGap: new a(12, n[5], n[5]),
-  sectionRowGap: new a(n[5], n[9], n[9]),
-  lastSectionPaddingBottom: new a(n[7], n[10], n[10]),
-  iconWidthHeight: new a(20, n[4]),
-  subTitlePaddingTop: new a(12, n[3]),
-  subTitlePaddingBottom: new a(n[3], n[3]),
-  overlayWidth: new a(100, 100, 59)
-}, Te = "remiSetupPage", G = "remiAccount", J = "remiMileage", Kt = ({
-  remiSetupView: e,
-  isDisabled: v,
-  remiApprovalView: D,
-  connectedAccountProvider: T,
-  isAccountsEnabled: j,
-  filesEndPoint: c,
-  authParams: l,
-  meetingUrl: Q,
-  analytics: s,
-  accountsPromoConfig: R,
-  onBackClick: Y,
-  onBusinessVerificationSectionClick: K,
-  onSetupApprovalRulesSectionClick: L,
-  onFetchLinkTokenClick: h,
-  onEstablishConnectionClick: r,
-  onEstablishConnectionSuccess: B,
-  updateMileageDetails: w,
-  onUpdateAccountClick: H,
-  onUpdatePrimaryFundingAccount: X,
-  onUpdatePaymentAccountStatus: ee,
-  onUpdatePaymentAccountLoginStatus: te,
-  onEnableRemiClick: C,
-  onEnableRemiSuccess: M,
-  onSaveMileageClick: ne,
-  onClickMenuIcon: F,
-  onEditFileName: f,
-  onDeleteFile: oe,
-  updateFilesEntity: ie,
-  onCompanyOfficerUpdated: ae,
-  onSendForVerificationClick: se,
-  onSignUpClick: P
-}) => {
-  const U = Le(), d = Me(), [O, I] = he(!1), {
-    fetchState: b,
-    primaryFundingAccount: y,
-    allFundingAccounts: xe,
-    updateStatus: V,
-    accountUpdateStatus: Ve,
-    plaidConnectionDetails: le,
-    allBankAccounts: ze,
-    companyRemiInfo: Ee,
-    companyBillPayInfo: Se,
-    mileageRateConfig: We,
-    isRefreshingViewInBackground: Be,
-    selectedCompanyOfficer: p
-  } = e, {
-    fetchState: ve,
-    allApprovalRules: _,
-    approvalRulesStatus: He
-  } = D, re = le.link_account.updateStatus, ce = le.update_account.updateStatus, N = q(b), we = q(V.fetchState), Ce = q(
-    re.fetchState
-  ), ye = q(
-    ce.fetchState
-  ), z = Qe({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: et(
-      () => ge(e),
-      [e]
-    ),
-    values: ge(e)
-  });
-  k(() => {
-    !O && p?.additionalDocumentTypesRequestedForVerification.includes(
-      "social_security_card"
-    ) === !0 && p.areAdditionalDocumentsRequestedForVerification && !p.areAdditionalDocumentsSubmittedForVerification && p.userVerificationStatus?.code === "require_info" && I(!0), O && N === "In-Progress" && b === "Completed" && I(!1);
-  }, [p, b, N]), k(() => {
-    (N === "In-Progress" && b === "Completed" || Ce === "In-Progress" && re.fetchState === "Completed" || ye === "In-Progress" && ce.fetchState === "Completed") && z.reset(ge(e));
-  }, [
-    N,
-    b,
-    z,
-    e,
-    Ce,
-    re.fetchState,
-    ye,
-    ce.fetchState
-  ]);
-  const Fe = z.handleSubmit((A) => {
-    s.trackEnableReimbursement(), C();
-  }), Ue = async (A, W) => {
-    const u = W[G];
-    if (A.includes(G)) {
-      if (A.includes("fundingAccount")) {
-        if (u.fundingAccount.selectedOption != null && y?.id != u.fundingAccount.selectedOption) {
-          const x = xe.find(
-            (pe) => pe.id === u.fundingAccount.selectedOption
-          );
-          x != null && X(
-            u.fundingAccount.selectedOption,
-            x.accType
-          );
-        }
-      } else if (u.account.selectedOption != null && y?.id != null && y?.zeniAccountId != u.account.selectedOption) {
-        const x = u.account.allOptions.find(
-          (pe) => pe.value === u.account.selectedOption
-        );
-        x != null && typeof x.label == "string" && s.trackConnectBankLink(
-          x.value,
-          x.label,
-          "reimbursement"
-        ), H(
-          u.account.selectedOption,
-          y.id,
-          y.accType
-        );
-      }
-    } else if (A.includes(J)) {
-      const x = W[J];
-      w(x);
-    }
-  };
-  k(() => {
-    const A = z.watch((W, { name: u }) => {
-      u != null && W != null && Ye(() => Ue(u, W));
-    });
-    return () => {
-      A.unsubscribe();
-    };
-  }), k(() => {
-    we === "In-Progress" && V.fetchState === "Completed" && M();
-  }, [M, we, V.fetchState]);
-  const { commonSetUp: be, spendManagement: Oe } = Ie.getLocalizedStrings(), { reimbursement: _e } = Oe, { reimbursementSetup: E } = _e, { setUp: $ } = be, de = Se?.isBusinessVerified === !0 && (y?.accType === "depositAccount" || tt(
-    y?.providerVerificationStatus?.code ?? ""
-  )) && We?.denominationConversions.amount != null, ue = Ee?.isReimbursementEnabled === !0, Ne = de ? be.setUp.setupVerifiedSubTitle : E.setupSubTitle, qe = b === "In-Progress" || b === "Not-Started" || ve === "In-Progress" || ve === "Not-Started", me = U.mode === "light" ? new $e(U.colors.brandColorJadeLight) : new $e(U.colors.brandColorJadeDark), Ge = () => {
-    !O && p?.additionalDocumentTypesRequestedForVerification.includes(
-      "social_security_card"
-    ) === !0 && p.areAdditionalDocumentsRequestedForVerification && !p.areAdditionalDocumentsSubmittedForVerification && p.userVerificationStatus?.code === "require_info" ? I(!0) : K?.();
-  };
-  return /* @__PURE__ */ t.jsxs(Wt, { children: [
-    /* @__PURE__ */ t.jsx(
-      Ke,
-      {
-        anchor: "right",
-        PaperProps: {
-          style: {
-            width: m.overlayWidth.valuePercentage(d),
-            boxShadow: "none"
-          }
-        },
-        open: O,
-        onClose: () => I(!1),
-        style: { backgroundColor: Z.drawerBackground },
-        transitionDuration: 250,
-        children: /* @__PURE__ */ t.jsx(
-          ft,
-          {
-            authParams: l,
-            filesEndPoint: c,
-            updateStatus: V,
-            onEditFileName: f,
-            onDeleteFile: oe,
-            updateFilesEntity: ie,
-            companyOfficer: p,
-            onClose: () => I(!1),
-            onCompanyOfficerUpdated: ae,
-            onSendForVerificationClick: se
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      lt,
-      {
-        title: E.setupTitle,
-        backgroundColor: U.colors.grey4,
-        style: { zIndex: 3 },
-        onBackClick: Y,
-        showMenuIcon: !ue && (d === "medium-compact" || d === "small"),
-        onClickMenuIcon: F,
-        source: "ReimbursementSetUpPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(Ht, { windowSize: d, children: [
-      /* @__PURE__ */ t.jsx(Bt, { windowSize: d, children: Ne }),
-      qe ? /* @__PURE__ */ t.jsx(Ft, { children: /* @__PURE__ */ t.jsx(rt, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(Xe, { ...z, children: /* @__PURE__ */ t.jsx("form", { id: Re(Te), onSubmit: Fe, children: /* @__PURE__ */ t.jsxs(Ut, { windowSize: d, children: [
-        /* @__PURE__ */ t.jsx(
-          De,
-          {
-            onClick: Ge,
-            title: $.businessVerificationTitle,
-            subTitle: $.businessVerificationSubTitle,
-            header: $.businessVerificationHeader,
-            icon: {
-              element: /* @__PURE__ */ t.jsx(
-                ct,
-                {
-                  width: m.iconWidthHeight.valuePx(d),
-                  height: m.iconWidthHeight.valuePx(d)
-                }
-              ),
-              color: me
-            },
-            status: Se?.businessVerificationStatus,
-            isTagLoading: Be
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          ht,
-          {
-            connectedAccountProvider: T,
-            primaryFundingAccount: y,
-            plaidConnectionDetails: le,
-            allBankAccounts: ze,
-            allFundingAccounts: xe,
-            sectionId: G,
-            isDisabled: v,
-            onFetchLinkTokenClick: h,
-            onEstablishConnectionClick: r,
-            onUpdatePaymentAccountStatus: ee,
-            onUpdatePaymentAccountLoginStatus: te,
-            onEstablishConnectionSuccess: B,
-            icon: {
-              element: /* @__PURE__ */ t.jsx(
-                dt,
-                {
-                  width: m.iconWidthHeight.valuePx(d)
-                }
-              ),
-              color: me
-            },
-            analytics: s,
-            productType: "reimbursement",
-            isAccountsEnabled: j,
-            onSignUpClick: P,
-            pageName: "Reimbursement Setup",
-            accountsPromoConfig: R
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          St,
-          {
-            mileageDetails: e.mileageDetails,
-            companyMileageConfigInfo: e.mileageRateConfig,
-            sectionId: J,
-            onSaveMileageClick: ne,
-            analytics: s
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          De,
-          {
-            title: _.length > 0 ? $.approvalTitle : $.createApprovalTitle,
-            subTitle: E.approvalSubTitle,
-            header: _.length > 0 ? $.approvalHeader : $.setupApprovalHeader,
-            icon: {
-              element: /* @__PURE__ */ t.jsx(
-                ut,
-                {
-                  height: m.iconWidthHeight.valuePx(d)
-                }
-              ),
-              color: me
-            },
-            style: {
-              paddingBottom: m.lastSectionPaddingBottom.valuePx(d)
-            },
-            onClick: L,
-            status: _.length > 0 ? He : void 0
-          }
-        )
-      ] }) }) })
-    ] }),
-    de && !ue && _.length > 0 ? /* @__PURE__ */ t.jsx(
-      mt,
-      {
-        formId: Re(Te),
-        primaryBtn: {
-          label: E.enableReimbursements,
-          style: {
-            width: "auto",
-            minWidth: d === "small" ? "auto" : "181px"
-          },
-          isLoading: V.fetchState === "In-Progress" || Ve.fetchState === "In-Progress",
-          isDisabled: v != null
-        },
-        showCancel: !1,
-        helperText: E.terms,
-        cancelBtn: { label: "" },
-        style: {
-          padding: `12px ${i.sp3}`
-        }
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsx(
-      gt,
-      {
-        isFooterRendered: de && !ue,
-        meetingUrl: Q,
-        analytics: s,
-        productType: "reimbursement"
-      }
-    )
-  ] });
-}, Wt = o.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Bt = o(pt)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${(e) => m.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${(e) => m.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => m.subTitlePaddingBottom.valuePx(e.windowSize)};
-  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
-`, Ht = o.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-  row-gap: ${(e) => m.setupDetailsRowGap.valuePx(e.windowSize)};
-`, Ft = o.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};
-`, Ut = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => m.sectionRowGap.valuePx(e.windowSize)};
-`, ge = (e) => {
-  const {
-    allBankAccounts: v,
-    allFundingAccounts: D,
-    mileageDetails: T,
-    primaryFundingAccount: j
-  } = e, { localData: c } = T;
-  return {
-    [G]: {
-      fundingAccount: {
-        selectedOption: j?.id,
-        allOptions: D.map((l) => ({
-          label: l.label,
-          value: l.id,
-          isRecommended: l.accType === "depositAccount"
-        }))
-      },
-      account: {
-        selectedOption: j?.zeniAccountId,
-        allOptions: v.map((l) => ({
-          label: l.accountName,
-          value: l.accountId
-        }))
-      }
-    },
-    [J]: {
-      mileageAmount: c?.mileageUnitAmount?.amount,
-      mileageCurrencyCode: c?.mileageCurrencyCode ?? "USD",
-      mileageCurrencySymbol: c?.mileageCurrencySymbol ?? "$",
-      mileageUnit: c?.mileageUnit ?? "",
-      description: c?.description ?? "",
-      mileageAmountInDenomination: c?.mileageAmountInDenomination,
-      denomination: c?.denomination ?? "dollars",
-      denominationSymbol: c?.denominationSymbol ?? ""
-    }
-  };
-}, Re = (e) => `${e}_form`;
-export {
-  Kt as default,
-  Re as uniqueName
-};