@zeniai/web-components 3.16.69 → 3.16.70

package/dist/ReimbursementSetUpPage-BkjvoOYH.js

@@ -0,0 +1,663 @@
+import { u as Le, d as Je, m as Ze, j as t, g as Qe, h as Ke, b as $e, D as Ye, F as Xe } from "./vendor-.pnpm-DtFedGku.js";
+import * as S from "react";
+import { useState as he, useEffect as k, useMemo as et } from "react";
+import i from "@emotion/styled";
+import { isVerifiedPaymentAccountProviderStatusCode as tt } from "@zeniai/client-epic-state";
+import { u as Me, a as Ie, R as a, hN as ke, hO as je, S as o, fQ as nt, B as it, j as Pe, av as Ae, Q as ot, C as Z, D as n, G as at, a3 as st, aD as q, aE as lt, A as rt, hH as De, gn as ct, hI as dt, eP as ut, gh as mt, ap as pt, hK as gt, _ as ht } from "./index-Dw5qKKzZ.js";
+import { U as ft } from "./UploadAdditionalDocumentOverlay-DsDLbaGz.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: K },
+    trigger: Y
+  } = Je(), L = vt(
+    j,
+    "mileageAmountInDenomination"
+  ), h = Ze(K, 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 || Y(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: ie } = X, oe = 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: ie.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: o.sp0,
+                      marginTop: o.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: o.sp6,
+                      textAlign: "left"
+                    },
+                    inputStyle: {
+                      textAlign: "left",
+                      paddingRight: o.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: oe
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(zt, { children: C ? /* @__PURE__ */ t.jsx(
+                  it,
+                  {
+                    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 = i.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 = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+`, yt = i.div`
+  display: flex;
+`, bt = i.div`
+  ${(e) => `${fe.title.style(e.windowSize)}`};
+  color: ${(e) => e.isError === !0 ? Z.important : e.theme.colors.primary};
+`, $t = i(at)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: ${(e) => e.theme.colors.hero};
+`, kt = i.div`
+  display: flex;
+  width: ${o.sp4};
+  height: ${o.sp4};
+  margin-left: ${o.sp4};
+`, jt = i.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: ${o.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 = i.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) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.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 = i.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+`, Dt = i.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${fe.title.style(e.windowSize)}`};
+`, Tt = i.div`
+  display: flex;
+  flex-direction: column;
+`, Rt = i.div``, Lt = i(ot)`
+  color: ${(e) => e.theme.colors.comingSoon};
+  margin-left: ${o.sp3};
+`, Mt = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: ${o.sp3};
+`, It = i.div`
+  display: flex;
+  height: ${o.sp6};
+  width: 100%;
+  position: relative;
+`, Vt = i.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: ${o.sp1};
+`, zt = i.div`
+  display: flex;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: ${o.sp3};
+`, Et = i(st)`
+  width: ${o.sp3};
+  height: ${o.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", Zt = ({
+  remiSetupView: e,
+  isDisabled: v,
+  remiApprovalView: D,
+  connectedAccountProvider: T,
+  isAccountsEnabled: j,
+  filesEndPoint: c,
+  authParams: l,
+  meetingUrl: Q,
+  analytics: s,
+  accountsPromoConfig: R,
+  onBackClick: K,
+  onBusinessVerificationSectionClick: Y,
+  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: ie,
+  updateFilesEntity: oe,
+  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 && Ke(() => 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) : Y?.();
+  };
+  return /* @__PURE__ */ t.jsxs(Wt, { children: [
+    /* @__PURE__ */ t.jsx(
+      Ye,
+      {
+        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: ie,
+            updateFilesEntity: oe,
+            companyOfficer: p,
+            onClose: () => I(!1),
+            onCompanyOfficerUpdated: ae,
+            onSendForVerificationClick: se
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      lt,
+      {
+        title: E.setupTitle,
+        backgroundColor: U.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: K,
+        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(
+          dt,
+          {
+            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(
+                ut,
+                {
+                  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(
+                mt,
+                {
+                  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(
+      pt,
+      {
+        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 ${o.sp3}`
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      gt,
+      {
+        isFooterRendered: de && !ue,
+        meetingUrl: Q,
+        analytics: s,
+        productType: "reimbursement"
+      }
+    )
+  ] });
+}, Wt = i.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Bt = i(ht)`
+  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 = i.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 = i.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 = i.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 {
+  Zt as default,
+  Re as uniqueName
+};