@zeniai/web-components 3.16.60 → 3.16.62

package/dist/UncategorizedAccountsMappingPage-B_m-aQN1.js

@@ -1,1160 +0,0 @@
-import { u as ne, d as ye, b as N, j as t, g as Ve, h as eo, F as oo } from "./vendor-.pnpm-DtFedGku.js";
-import { useState as to, useRef as no, useEffect as Te } from "react";
-import c from "@emotion/styled";
-import { hasFullOrAdminLevelAccess as je, hasBillPayAccessible as so, hasReimbursementAccessible as io, isVendorsTabVisible as co } from "@zeniai/client-epic-state";
-import { u as se, a as G, R as u, iu as C, it as oe, S as l, j8 as te, av as fe, C as Ae, eF as lo, G as $e, D as a, i7 as qe, dz as ro, aD as ao, j9 as Q, ja as uo, jb as Be, aE as mo, aN as po, aO as xo, aP as ho, jc as go, A as bo, ap as yo, jd as _e, p as fo, je as X, jf as Ao } from "./index-BPKgPg77.js";
-import { H as $o } from "./HelpButton-B2amus4B.js";
-import { V as So } from "./VendorsAccountsSection-DH0mosVk.js";
-const P = {
-  labelWidth: new u(210, 240, 260),
-  sectionWidth: new u(343, 580, 726),
-  iconContainerMaxWidthHeight: new u(a[6], a[7]),
-  iconContainerMarginRight: new u(12, a[3]),
-  iconPadding: new u(10, 12),
-  rowGap: new u(a[2], a[3]),
-  elementsMarginLeftRight: new u(a[3], a[4])
-}, We = {
-  title: new fe("standardMedium", "largeMedium")
-}, Ro = c.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => P.rowGap.valuePx(e.windowSize)};
-`, Co = c.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => P.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-  fill: ${(e) => e.theme.colors.grey1};
-  justify-content: space-between;
-  box-sizing: border-box;
-  &:hover {
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-`, Io = c.div`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  margin-left: ${(e) => P.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => P.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp4};
-  margin-bottom: ${l.sp0};
-`, vo = c.div`
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${We.title.style(e.windowSize)}`};
-`, Po = c.div`
-  display: flex;
-  flex-direction: column;
-`, Lo = c.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${(e) => P.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.iconColor.toString()};
-  border-radius: ${l.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? Ae.neutralGrey5Light : e.theme.colors.brandColorOnyx};
-  max-width: ${(e) => P.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => P.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${(e) => P.iconContainerMarginRight.valuePx(e.windowSize)};
-`, Oo = c.div`
-  ${(e) => `${We.title.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-`, Eo = c($e)`
-  color: ${(e) => e.theme.colors.hero};
-`, wo = c(lo)`
-  width: ${l.sp4};
-  height: ${l.sp4};
-`, ko = c.div`
-  display: flex;
-  flex-direction: column;
-`, zo = c.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: ${(e) => P.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => P.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp3};
-  margin-bottom: ${l.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${l.sp2};
-`, Y = (e, o) => `${e}.${o}`;
-function To({
-  sectionId: e,
-  containerRef: o,
-  accountMappingView: n
-}) {
-  const r = se(), m = ne(), i = G.getLocalizedStrings().uncategorizedAccountsMapping, E = P.labelWidth.value(r), w = n.billPayRecommendation != null ? [n.billPayRecommendation] : [], I = C(
-    n.billPayAccountHierarchy,
-    w,
-    "Accounts"
-  ), k = n.billPayRecommendation?.account?.reason ?? "", z = i.tooltip.replace("__based__", k).replace("__account__", i.billsSection.billPayExpenseAccount), S = n.billPayAccountList.find(
-    (g) => g.accountId === n.accountMappingLocalData?.selectedBillPayAccountId
-  ), R = {
-    valueContainer: (g) => ({
-      ...g,
-      padding: `2px ${l.sp3}`,
-      overflow: "unset"
-    }),
-    singleValue: () => ({
-      margin: 0
-    })
-  }, { getValues: d } = ye(), v = m.mode === "light" ? new N(m.colors.brandColorJadeLight) : new N(m.colors.brandColorJadeDark);
-  return /* @__PURE__ */ t.jsxs(Ro, { windowSize: r, children: [
-    /* @__PURE__ */ t.jsx(vo, { windowSize: r, children: i.billsSection.heading }),
-    /* @__PURE__ */ t.jsxs(Co, { windowSize: r, children: [
-      /* @__PURE__ */ t.jsxs(Io, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(
-          Lo,
-          {
-            windowSize: r,
-            iconColor: v,
-            isDarkMode: m.mode === "dark",
-            children: /* @__PURE__ */ t.jsx(wo, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(Po, { children: [
-          /* @__PURE__ */ t.jsx(Oo, { windowSize: r, children: i.billsSection.title }),
-          /* @__PURE__ */ t.jsx(Eo, { children: i.billsSection.subTitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsx(ko, { children: /* @__PURE__ */ t.jsx(zo, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-        oe,
-        {
-          isZeniRecommendsLabel: !0,
-          isLoading: !1,
-          label: {
-            label: i.billsSection.bankChargesAndFeesLabel,
-            width: E
-          },
-          groupedSingleSelectField: {
-            shouldShowChevronIcon: n.billPayRecommendation != null,
-            name: Y(e, "billPayAccount"),
-            placeholder: i.placeholder.accountPlaceholder,
-            noOptionsMessage: {
-              line1: i.noOptions.noAccountsFound,
-              line2: i.noOptions.establishQBO
-            },
-            valueToId: (g) => te(
-              g,
-              n.billPayAccountList
-            ),
-            defaultValue: {
-              selectedOption: S?.qboId,
-              allOptions: I
-            },
-            style: {
-              border: `1px solid ${m.colors.grey3}`
-            },
-            customStyleConfig: R,
-            registerOptions: {
-              required: !1
-            },
-            // tooltip,
-            menuPortal: o
-          },
-          style: {
-            border: `1px solid ${m.colors.grey3}`,
-            borderRadius: "inherit",
-            borderBottomRightRadius: "inherit"
-          },
-          fullWidthSelect: !0,
-          recommendationCheckboxField: n.billPayRecommendation != null ? {
-            tooltipProps: { text: z },
-            label: {
-              label: n.billPayRecommendation?.account?.accountName ?? G.getLocalizedStrings().common.strings.empty
-            },
-            checkBoxField: {
-              name: Y(
-                e,
-                "isRecommendedBillPayAccountChecked"
-              ),
-              defaultChecked: d(
-                Y(
-                  e,
-                  "isRecommendedBillPayAccountChecked"
-                )
-              )
-            }
-          } : void 0
-        },
-        Y(e, "billPayAccount")
-      ) }) })
-    ] })
-  ] });
-}
-const L = {
-  labelWidth: new u(120, 145, 160),
-  sectionWidth: new u(343, 580, 726),
-  iconContainerMaxWidthHeight: new u(a[6], a[7]),
-  iconContainerMarginRight: new u(12, a[3]),
-  iconPadding: new u(10, 12),
-  rowGap: new u(a[2], a[3]),
-  elementsMarginLeftRight: new u(a[3], a[4])
-}, Ne = {
-  title: new fe("standardMedium", "largeMedium")
-}, jo = c.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => L.rowGap.valuePx(e.windowSize)};
-`, Bo = c.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => L.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-  fill: ${(e) => e.theme.colors.grey1};
-  justify-content: space-between;
-  box-sizing: border-box;
-  &:hover {
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-`, Fo = c.div`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  margin-left: ${(e) => L.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => L.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp4};
-  margin-bottom: ${l.sp0};
-`, Do = c.div`
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${Ne.title.style(e.windowSize)}`};
-`, Ho = c.div`
-  display: flex;
-  flex-direction: column;
-`, qo = c.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${(e) => L.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.iconColor.toString()};
-  border-radius: ${l.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? Ae.neutralGrey5Light : e.theme.colors.brandColorOnyx};
-  max-width: ${(e) => L.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => L.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${(e) => L.iconContainerMarginRight.valuePx(e.windowSize)};
-`, _o = c.div`
-  ${(e) => `${Ne.title.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-`, Wo = c($e)`
-  color: ${(e) => e.theme.colors.hero};
-`, No = c(qe)`
-  width: ${l.sp4};
-  height: ${l.sp4};
-`, Go = c.div`
-  display: flex;
-  flex-direction: column;
-`, Uo = c.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: ${(e) => L.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => L.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp3};
-  margin-bottom: ${l.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${l.sp2};
-`, M = (e, o) => `${e}.${o}`;
-function Jo({
-  sectionId: e,
-  containerRef: o,
-  accountMappingView: n
-}) {
-  const r = se(), m = ne(), i = G.getLocalizedStrings().uncategorizedAccountsMapping, E = L.labelWidth.value(r), w = n.reimbursementsRecommendation != null ? [n.reimbursementsRecommendation] : [], I = C(
-    n.reimbursementsAccountHierarchy,
-    w,
-    "Accounts"
-  ), k = n.reimbursementsRecommendation?.account?.reason ?? "", z = i.tooltip.replace("__based__", k).replace(
-    "__account__",
-    i.reimbursementsSection.reimbursementsExpenseAccount
-  ), S = n.reimbursementsAccountList.find(
-    (g) => g.accountId === n.accountMappingLocalData?.selectedReimbursementsAccountId
-  ), R = {
-    valueContainer: (g) => ({
-      ...g,
-      padding: `2px ${l.sp3}`,
-      overflow: "unset"
-    }),
-    singleValue: () => ({
-      margin: 0
-    })
-  }, { getValues: d } = ye(), v = m.mode === "light" ? new N(m.colors.brandColorJadeLight) : new N(m.colors.brandColorJadeDark);
-  return /* @__PURE__ */ t.jsxs(jo, { windowSize: r, children: [
-    /* @__PURE__ */ t.jsx(Do, { windowSize: r, children: i.reimbursementsSection.heading }),
-    /* @__PURE__ */ t.jsxs(Bo, { windowSize: r, children: [
-      /* @__PURE__ */ t.jsxs(Fo, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(
-          qo,
-          {
-            windowSize: r,
-            iconColor: v,
-            isDarkMode: m.mode === "dark",
-            children: /* @__PURE__ */ t.jsx(No, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(Ho, { children: [
-          /* @__PURE__ */ t.jsx(_o, { windowSize: r, children: i.reimbursementsSection.title }),
-          /* @__PURE__ */ t.jsx(Wo, { children: i.reimbursementsSection.subTitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsx(Go, { children: /* @__PURE__ */ t.jsx(Uo, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-        oe,
-        {
-          isZeniRecommendsLabel: !0,
-          isLoading: !1,
-          label: {
-            label: i.reimbursementsSection.mileageLabel,
-            width: E
-          },
-          groupedSingleSelectField: {
-            shouldShowChevronIcon: n.reimbursementsRecommendation != null,
-            name: M(e, "reimbursementsAccount"),
-            placeholder: i.placeholder.accountPlaceholder,
-            noOptionsMessage: {
-              line1: i.noOptions.noAccountsFound,
-              line2: i.noOptions.establishQBO
-            },
-            valueToId: (g) => te(
-              g,
-              n.reimbursementsAccountList
-            ),
-            defaultValue: {
-              selectedOption: S?.qboId,
-              allOptions: I
-            },
-            style: {
-              border: `1px solid ${m.colors.grey3}`
-            },
-            customStyleConfig: R,
-            registerOptions: {
-              required: !1
-            },
-            // tooltip,
-            menuPortal: o
-          },
-          style: {
-            border: `1px solid ${m.colors.grey3}`,
-            borderRadius: "inherit",
-            borderBottomRightRadius: "inherit"
-          },
-          fullWidthSelect: !0,
-          recommendationCheckboxField: n.reimbursementsRecommendation != null ? {
-            tooltipProps: { text: z },
-            label: {
-              label: n.reimbursementsRecommendation?.account?.accountName ?? G.getLocalizedStrings().common.strings.empty
-            },
-            checkBoxField: {
-              name: M(
-                e,
-                "isRecommendedReimbursementsAccountChecked"
-              ),
-              defaultChecked: d(
-                M(
-                  e,
-                  "isRecommendedReimbursementsAccountChecked"
-                )
-              )
-            }
-          } : void 0
-        },
-        M(e, "reimbursementsAccount")
-      ) }) })
-    ] })
-  ] });
-}
-const O = {
-  labelWidth: new u(120, 145, 160),
-  sectionWidth: new u(343, 580, 726),
-  iconContainerMaxWidthHeight: new u(a[6], a[7]),
-  iconContainerMarginRight: new u(12, a[3]),
-  iconPadding: new u(10, 12),
-  rowGap: new u(a[2], a[3]),
-  elementsMarginLeftRight: new u(a[3], a[4])
-}, Ge = {
-  title: new fe("standardMedium", "largeMedium")
-}, Qo = c.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${(e) => O.rowGap.valuePx(e.windowSize)};
-`, Zo = c.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => O.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-  fill: ${(e) => e.theme.colors.grey1};
-  justify-content: space-between;
-  box-sizing: border-box;
-  &:hover {
-    border: 1px solid ${(e) => e.theme.colors.primary};
-    fill: ${(e) => e.theme.colors.primary};
-  }
-`, Ko = c.div`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  margin-left: ${(e) => O.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => O.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp4};
-  margin-bottom: ${l.sp0};
-`, Xo = c.div`
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${Ge.title.style(e.windowSize)}`};
-`, Yo = c.div`
-  display: flex;
-  flex-direction: column;
-`, Mo = c.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${(e) => O.iconPadding.valuePx(e.windowSize)};
-  background: ${(e) => e.iconColor.toString()};
-  border-radius: ${l.sp11};
-  width: fit-content;
-  height: fit-content;
-  color: ${(e) => e.isDarkMode ? Ae.neutralGrey5Light : e.theme.colors.brandColorOnyx};
-  max-width: ${(e) => O.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => O.iconContainerMaxWidthHeight.valuePx(e.windowSize)};
-  margin-right: ${(e) => O.iconContainerMarginRight.valuePx(e.windowSize)};
-`, Vo = c.div`
-  ${(e) => `${Ge.title.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-`, et = c($e)`
-  color: ${(e) => e.theme.colors.hero};
-`, ot = c(qe)`
-  width: ${l.sp4};
-  height: ${l.sp4};
-`, tt = c.div`
-  display: flex;
-  flex-direction: column;
-`, nt = c.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: ${(e) => O.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-right: ${(e) => O.elementsMarginLeftRight.valuePx(e.windowSize)};
-  margin-top: ${l.sp3};
-  margin-bottom: ${l.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${l.sp2};
-`, F = (e, o) => `${e}.${o}`;
-function st({
-  sectionId: e,
-  containerRef: o,
-  accountMappingView: n
-}) {
-  const r = se(), m = ne(), i = G.getLocalizedStrings().uncategorizedAccountsMapping, E = O.labelWidth.value(r), w = n.incomeRecommendation != null ? [n.incomeRecommendation] : [], I = C(
-    n.incomeAccountHierachy,
-    w
-  ), k = n.expenseRecommendation != null ? [n.expenseRecommendation] : [], z = C(
-    n.expenseAccountHierarchy,
-    k
-  ), S = n.incomeRecommendation?.account?.reason ?? "", R = i.tooltip.replace("__based__", S).replace("__account__", i.uncategorizedSection.incomeAccount), d = n.expenseRecommendation?.account?.reason ?? "", v = i.tooltip.replace("__based__", d).replace("__account__", i.uncategorizedSection.expenseAccount), g = n.incomeAccountList.find(
-    (A) => A.accountId === n.accountMappingLocalData?.selectedIncomeAccountId
-  ), T = n.expenseAccountList.find(
-    (A) => A.accountId === n.accountMappingLocalData?.selectedExpenseAccountId
-  ), D = {
-    valueContainer: (A) => ({
-      ...A,
-      padding: `2px ${l.sp3}`,
-      overflow: "unset"
-    }),
-    singleValue: () => ({
-      margin: 0
-    })
-  }, { getValues: H } = ye(), _ = m.mode === "light" ? new N(m.colors.brandColorJadeLight) : new N(m.colors.brandColorJadeDark);
-  return /* @__PURE__ */ t.jsxs(Qo, { windowSize: r, children: [
-    /* @__PURE__ */ t.jsx(Xo, { windowSize: r, children: i.uncategorizedSection.heading }),
-    /* @__PURE__ */ t.jsxs(Zo, { windowSize: r, children: [
-      /* @__PURE__ */ t.jsxs(Ko, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(
-          Mo,
-          {
-            windowSize: r,
-            iconColor: _,
-            isDarkMode: m.mode === "dark",
-            children: /* @__PURE__ */ t.jsx(ot, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(Yo, { children: [
-          /* @__PURE__ */ t.jsx(Vo, { windowSize: r, children: i.uncategorizedSection.title }),
-          /* @__PURE__ */ t.jsx(et, { children: i.uncategorizedSection.subTitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsx(tt, { children: /* @__PURE__ */ t.jsxs(nt, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(
-          oe,
-          {
-            isLoading: !1,
-            label: {
-              label: i.uncategorizedSection.incomeLabel,
-              width: E
-            },
-            groupedSingleSelectField: {
-              shouldShowChevronIcon: n.incomeRecommendation != null,
-              name: F(e, "incomeAccount"),
-              placeholder: i.placeholder.incomePlaceholder,
-              noOptionsMessage: {
-                line1: i.noOptions.noAccountsFound,
-                line2: i.noOptions.establishQBO
-              },
-              valueToId: (A) => te(
-                A,
-                n.incomeAccountList
-              ),
-              defaultValue: {
-                selectedOption: g?.qboId,
-                allOptions: I
-              },
-              style: {
-                width: "100%"
-              },
-              customStyleConfig: D,
-              registerOptions: {
-                required: !1
-              },
-              menuPortal: o
-            },
-            disableCurrentOption: () => !1,
-            style: {
-              borderBottom: `1px solid ${m.colors.grey3}`,
-              borderTopLeftRadius: "inherit",
-              borderTopRightRadius: "inherit"
-            },
-            fullWidthSelect: !0,
-            recommendationCheckboxField: n.incomeRecommendation != null ? {
-              tooltipProps: { text: R },
-              label: {
-                label: n.incomeRecommendation.account?.accountName ?? ""
-              },
-              checkBoxField: {
-                name: F(
-                  e,
-                  "isRecommendedIncomeAccountChecked"
-                ),
-                defaultChecked: H(
-                  F(
-                    e,
-                    "isRecommendedIncomeAccountChecked"
-                  )
-                )
-              }
-            } : void 0
-          },
-          F(e, "incomeAccount")
-        ),
-        /* @__PURE__ */ t.jsx(
-          oe,
-          {
-            isLoading: !1,
-            label: {
-              label: i.uncategorizedSection.expenseLabel,
-              width: E
-            },
-            groupedSingleSelectField: {
-              shouldShowChevronIcon: n.expenseRecommendation != null,
-              name: F(e, "expenseAccount"),
-              placeholder: i.placeholder.expensePlaceholder,
-              noOptionsMessage: {
-                line1: i.noOptions.noAccountsFound,
-                line2: i.noOptions.establishQBO
-              },
-              valueToId: (A) => te(
-                A,
-                n.expenseAccountList
-              ),
-              defaultValue: {
-                selectedOption: T?.qboId,
-                allOptions: z
-              },
-              style: {
-                borderBottom: `1px solid ${m.colors.grey3}`
-              },
-              customStyleConfig: D,
-              registerOptions: {
-                required: !1
-              },
-              // tooltip,
-              menuPortal: o
-            },
-            disableCurrentOption: () => !1,
-            style: {
-              borderBottom: `1px solid ${m.colors.grey3}`,
-              borderBottomLeftRadius: "inherit",
-              borderBottomRightRadius: "inherit"
-            },
-            fullWidthSelect: !0,
-            recommendationCheckboxField: n.expenseRecommendation != null ? {
-              tooltipProps: { text: v },
-              label: {
-                label: n.expenseRecommendation.account?.accountName ?? ""
-              },
-              checkBoxField: {
-                name: F(
-                  e,
-                  "isRecommendedExpenseAccountChecked"
-                ),
-                defaultChecked: H(
-                  F(
-                    e,
-                    "isRecommendedExpenseAccountChecked"
-                  )
-                )
-              }
-            } : void 0
-          },
-          F(e, "expenseAccount")
-        )
-      ] }) })
-    ] })
-  ] });
-}
-const Z = {
-  titleWidth: new u(343, 580, 826, 1048),
-  setupDetailsRowGap: new u(12, a[5], a[5]),
-  sectionsRowGap: new u(12, a[7], a[7]),
-  subTitlePaddingTop: new u(12, a[3]),
-  subTitlePaddingBottom: new u(a[3], a[3])
-}, { common: p, uncategorizedAccountsMapping: q } = G.getLocalizedStrings(), Fe = "uncategorizedAccountsMappingPage", W = "uncategorizedAccountSection", h = "filing1099Section", V = "billsAccountSection", ee = "reimbursementsAccountSection", Ue = "vendorsAccountSection", it = c.div`
-  display: flex;
-  height: 100vh;
-  width: 100%;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, ct = c.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-  row-gap: ${(e) => Z.setupDetailsRowGap.valuePx(e.windowSize)};
-`, lt = c.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: ${l.sp10};
-  row-gap: ${(e) => Z.sectionsRowGap.valuePx(e.windowSize)};
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`, rt = c.div`
-  display: flex;
-  flex: 1 1 auto;
-  height: 100%;
-  width: 100%;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`, dt = c(fo)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${(e) => Z.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${(e) => Z.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => Z.subTitlePaddingBottom.valuePx(e.windowSize)};
-  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
-`;
-function bt({
-  currentTenant: e,
-  accountMappingView: o,
-  isFiling1099FeatureEnabled: n,
-  isAccruedExpensesFeatureEnabled: r,
-  meetingUrl: m,
-  isSettings: i = !1,
-  onAccountMappingChange: E,
-  onSaveClick: w,
-  onBackClick: I,
-  onClickMenuIcon: k
-}) {
-  const z = ne(), S = se(), R = ro(), [d, v] = to(!1), g = ao(o.saveState.fetchState), T = no(null), {
-    incomeRecommendation: D,
-    expenseRecommendation: H,
-    billPayRecommendation: _,
-    reimbursementsRecommendation: A,
-    prepaidExpensesRecommendation: ie,
-    fixedAssetsRecommendation: ce,
-    accruedExpensesRecommendation: le
-  } = o, re = D != null ? [D] : [], de = H != null ? [H] : [], ae = _ != null ? [_] : [], ue = A != null ? [A] : [], me = ie, pe = ce, xe = le, s = C(
-    o.incomeAccountHierachy,
-    re,
-    "Accounts"
-  ), U = C(
-    o.expenseAccountHierarchy,
-    de,
-    "Accounts"
-  ), he = C(
-    o.billPayAccountHierarchy,
-    ae,
-    "Accounts"
-  ), ge = C(
-    o.reimbursementsAccountHierarchy,
-    ue,
-    "Accounts"
-  ), Se = C(
-    o.prepaidExpensesAccountHierarchy,
-    me,
-    "Accounts"
-  ), Re = C(
-    o.fixedAssetsAccountHierarchy,
-    pe,
-    "Accounts"
-  ), Ce = C(
-    o.accruedExpensesAccountHierarchy,
-    xe,
-    "Accounts"
-  ), Ie = C(
-    o.bankAccounts1099FilingAccountHierarchy,
-    [],
-    "Accounts"
-  ), ve = C(
-    o.expenseAccounts1099FilingAccountHierarchy,
-    [],
-    "Categories"
-  ), Pe = Q(
-    o.expenseTypeList,
-    q.filing1099Section.allExpenseTypes
-  ), Le = Q(
-    o.expense1099TypeList,
-    q.filing1099Section.all1099Types
-  ), Je = Q(
-    o.boxTypesList.int,
-    q.filing1099Section.allBoxes
-  ), Qe = Q(
-    o.boxTypesList.misc,
-    q.filing1099Section.allBoxes
-  ), Ze = Q(
-    o.boxTypesList.nec,
-    q.filing1099Section.allBoxes
-  ), be = {
-    int: Je,
-    misc: Qe,
-    nec: Ze
-  }, y = Ve({
-    mode: "all",
-    defaultValues: He(
-      o,
-      s,
-      U,
-      he,
-      ge,
-      Se,
-      Re,
-      Ce,
-      Ie,
-      ve,
-      Pe,
-      Le,
-      be
-    ),
-    resetOptions: {
-      keepDirtyValues: !0
-    },
-    // use "values" to get hot loaded selector view
-    values: He(
-      o,
-      s,
-      U,
-      he,
-      ge,
-      Se,
-      Re,
-      Ce,
-      Ie,
-      ve,
-      Pe,
-      Le,
-      be
-    )
-  }), Ke = y.handleSubmit((b) => {
-    const $ = b[h].bankAccount.selectedOptions.length, x = b[h].expenseCategory1099.length, f = $ === 0 && x === 1 && uo(
-      b[h].expenseCategory1099[0]
-    ), j = b[h].expenseCategory1099, J = [];
-    j.forEach((K, B) => {
-      if (!f) {
-        const Ee = K.accountId?.selectedOption, we = K.expenseType?.selectedOption, ke = K.type1099?.selectedOption, ze = K.boxType?.selectedOption;
-        (Ee == null || Ee === "") && (y.setError(
-          `${h}.expenseCategory1099.${B}.accountId`,
-          { type: "manual", message: "Account ID is required." }
-        ), J.push(`${B}.accountId`)), (we == null || we === "") && (y.setError(
-          `${h}.expenseCategory1099.${B}.expenseType`,
-          { type: "manual", message: "Expense Type is required." }
-        ), J.push(`${B}.expenseType`)), (ke == null || ke === "") && (y.setError(
-          `${h}.expenseCategory1099.${B}.type1099`,
-          { type: "manual", message: "Type 1099 is required." }
-        ), J.push(`${B}.type1099`)), (ze == null || ze === "") && (y.setError(
-          `${h}.expenseCategory1099.${B}.boxType`,
-          { type: "manual", message: "Box Type is required." }
-        ), J.push(`${B}.boxType`));
-      }
-    }), J.length === 0 && ($ > 0 && x > 1 && Be(
-      b[h].expenseCategory1099[0]
-    ) || $ > 0 && x === 1 && Be(
-      b[h].expenseCategory1099[0]
-    ) || f) && w(b);
-  }), Xe = async (b, $) => {
-    if (b.includes("isRecommendedIncomeAccountChecked")) {
-      const x = $[W].isRecommendedIncomeAccountChecked === !0 ? o.incomeRecommendation?.account?.qboId ?? p.strings.empty : o.accountMappingLocalData?.previousIncomeAccount?.qboId;
-      y.setValue(
-        `${W}.incomeAccount`,
-        {
-          selectedOption: x,
-          allOptions: s
-        },
-        { shouldValidate: !0 }
-      );
-    }
-    if (b.includes("isRecommendedExpenseAccountChecked")) {
-      const x = $[W].isRecommendedExpenseAccountChecked === !0 ? o.expenseRecommendation?.account?.qboId ?? p.strings.empty : o.accountMappingLocalData?.previousExpenseAccount?.qboId;
-      y.setValue(
-        `${W}.expenseAccount`,
-        {
-          selectedOption: x,
-          allOptions: U
-        },
-        { shouldValidate: !0 }
-      );
-    }
-    if (b.includes("isRecommendedBillPayAccountChecked")) {
-      const x = $[V].isRecommendedBillPayAccountChecked === !0 ? o.billPayRecommendation?.account?.qboId ?? p.strings.empty : o.accountMappingLocalData?.previousBillPayAccount?.qboId;
-      y.setValue(
-        `${V}.billPayAccount`,
-        {
-          selectedOption: x,
-          allOptions: he
-        },
-        { shouldValidate: !0 }
-      );
-    }
-    if (b.includes("isRecommendedReimbursementsAccountChecked")) {
-      const x = $[ee].isRecommendedReimbursementsAccountChecked === !0 ? o.reimbursementsRecommendation?.account?.qboId ?? p.strings.empty : o.accountMappingLocalData?.previousReimbursementsAccount?.qboId;
-      y.setValue(
-        `${ee}.reimbursementsAccount`,
-        {
-          selectedOption: x,
-          allOptions: ge
-        },
-        { shouldValidate: !0 }
-      );
-    }
-    if (b.includes("filing1099Section.expenseCategory1099")) {
-      const x = b.split(".").find((f) => !isNaN(Number(f)));
-      if (x !== void 0) {
-        const f = parseInt(x, 10), j = $[h].expenseCategory1099[f];
-        j.accountId?.selectedOption != null && y.clearErrors(
-          `${h}.expenseCategory1099.${f}.accountId`
-        ), j.expenseType?.selectedOption != null && y.clearErrors(
-          `${h}.expenseCategory1099.${f}.expenseType`
-        ), j.type1099?.selectedOption != null && y.clearErrors(
-          `${h}.expenseCategory1099.${f}.type1099`
-        ), j.boxType?.selectedOption != null && y.clearErrors(
-          `${h}.expenseCategory1099.${f}.boxType`
-        );
-      }
-    }
-    if (b.includes("type1099")) {
-      const x = b?.split(".")?.find((f) => !isNaN(Number(f)));
-      if (x != null) {
-        const f = parseInt(x, 10), j = $[h].expenseCategory1099[f].type1099?.selectedOption;
-        y.setValue(
-          `${h}.expenseCategory1099.${f}.boxType`,
-          {
-            selectedOption: p.strings.empty,
-            allOptions: _e(
-              j ?? p.strings.empty,
-              be
-            )
-          },
-          { shouldValidate: !0 }
-        );
-      }
-    }
-    E($);
-  };
-  Te(() => {
-    g === "In-Progress" && o.saveState.fetchState === "Completed" && I?.();
-  }, [g, o.saveState.fetchState, I]), Te(() => {
-    const b = y.watch(($, { name: x }) => {
-      x != null && $ != null && eo(() => Xe(x, $));
-    });
-    return () => {
-      b.unsubscribe();
-    };
-  });
-  const Oe = () => o.fetchState === "Completed" && (o.accountMappingLocalData?.selectedExpenseAccountId !== o.accountMappingLocalData?.previousExpenseAccount?.accountId || o.accountMappingLocalData?.selectedIncomeAccountId !== o.accountMappingLocalData?.previousIncomeAccount?.accountId || o.accountMappingLocalData?.selectedBillPayAccountId !== o.accountMappingLocalData?.previousBillPayAccount?.accountId || o.accountMappingLocalData?.selectedReimbursementsAccountId !== o.accountMappingLocalData?.previousReimbursementsAccount?.accountId || X(
-    o.accountMappingLocalData?.selectedPrepaidExpensesAccountIds,
-    o.accountMappingLocalData?.previousPrepaidExpensesAccount
-  ) || X(
-    o.accountMappingLocalData?.selectedFixedAssetsAccountIds,
-    o.accountMappingLocalData?.previousFixedAssetsAccount
-  ) || X(
-    o.accountMappingLocalData?.selectedAccruedExpensesAccountIds,
-    o.accountMappingLocalData?.previousAccruedExpensesAccount
-  ) || X(
-    o.accountMappingLocalData?.selectedBankAccounts1099FilingAccountIds,
-    o.accountMappingLocalData?.previousBankAccounts1099FilingAccount
-  ) || Ao(
-    o.accountMappingLocalData?.selectedExpenseAccounts1099FilingAccountIds,
-    o.accountMappingLocalData?.previousExpenseAccounts1099FilingAccount
-  )), Ye = o.fetchState !== "Completed", Me = {
-    onOkClick: () => {
-      v(!1), I?.(), y.reset();
-    },
-    onCancelClick: () => {
-      v(!1);
-    }
-  };
-  return /* @__PURE__ */ t.jsxs(it, { ref: T, children: [
-    /* @__PURE__ */ t.jsx(
-      mo,
-      {
-        title: i ? p.settings.title.accounting : q.title,
-        onBackClick: I,
-        backgroundColor: z.colors.grey4,
-        showBackButton: !i,
-        showMenuIcon: i ? S === "medium-compact" || S === "small" : !1,
-        onClickMenuIcon: k,
-        source: "UncategorizedAccountsMappingPage"
-      }
-    ),
-    d === !0 ? /* @__PURE__ */ t.jsx(
-      po,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(ho, { children: p.confirmationPopup.discardTitle }),
-        descriptionComponent: /* @__PURE__ */ t.jsx(xo, { children: p.confirmationPopup.discardDescription }),
-        primaryButtonText: p.confirmationPopup.discard,
-        secondaryButtonText: p.confirmationPopup.cancel,
-        action: Me,
-        proceedButtonVariant: "danger"
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsxs(ct, { windowSize: S, children: [
-      /* @__PURE__ */ t.jsx(dt, { windowSize: S, children: q.subTitle }),
-      Ye === !1 ? /* @__PURE__ */ t.jsx(oo, { ...y, children: /* @__PURE__ */ t.jsx(
-        "form",
-        {
-          id: De(Fe),
-          onSubmit: Ke,
-          children: /* @__PURE__ */ t.jsxs(lt, { windowSize: S, children: [
-            je(
-              R.loggedInUserRole ?? []
-            ) ? /* @__PURE__ */ t.jsx(
-              st,
-              {
-                sectionId: W,
-                containerRef: T.current,
-                accountMappingView: o
-              }
-            ) : null,
-            so(
-              e,
-              R.loggedInUserRoleMap
-            ) ? /* @__PURE__ */ t.jsx(
-              To,
-              {
-                sectionId: V,
-                containerRef: T.current,
-                accountMappingView: o
-              }
-            ) : null,
-            io(
-              e,
-              R.loggedInUserRoleMap
-            ) ? /* @__PURE__ */ t.jsx(
-              Jo,
-              {
-                sectionId: ee,
-                containerRef: T.current,
-                accountMappingView: o
-              }
-            ) : null,
-            je(
-              R.loggedInUserRole ?? []
-            ) ? /* @__PURE__ */ t.jsx(
-              So,
-              {
-                sectionId: Ue,
-                vendorAccountMappingSection: {
-                  accruedExpensesAccountHierarchy: o.accruedExpensesAccountHierarchy,
-                  accruedExpensesAccountList: o.accruedExpensesAccountList,
-                  accruedExpensesRecommendations: o.accruedExpensesRecommendation,
-                  fixedAssetsAccountHierarchy: o.fixedAssetsAccountHierarchy,
-                  fixedAssetsAccountList: o.fixedAssetsAccountList,
-                  fixedAssetsRecommendations: o.fixedAssetsRecommendation,
-                  prepaidExpensesAccountHierarchy: o.prepaidExpensesAccountHierarchy,
-                  prepaidExpensesAccountList: o.prepaidExpensesAccountList,
-                  prepaidExpensesRecommendations: o.prepaidExpensesRecommendation,
-                  selectedAccruedExpensesAccountIds: o.accountMappingLocalData?.selectedAccruedExpensesAccountIds ?? [],
-                  selectedFixedAssetsAccountIds: o.accountMappingLocalData?.selectedFixedAssetsAccountIds ?? [],
-                  selectedPrepaidExpensesAccountIds: o.accountMappingLocalData?.selectedPrepaidExpensesAccountIds ?? []
-                },
-                isAccruedExpensesFeatureEnabled: r
-              }
-            ) : null,
-            n && co(R.loggedInUserRoleMap) ? /* @__PURE__ */ t.jsx(
-              go,
-              {
-                sectionId: h,
-                accountMappingView: o,
-                containerRef: T.current,
-                isSettingsPage: !0
-              }
-            ) : null
-          ] })
-        }
-      ) }) : /* @__PURE__ */ t.jsx(rt, { children: /* @__PURE__ */ t.jsx(bo, { size: "ExtraLarge", start: !0 }) })
-    ] }),
-    Oe() === !0 ? /* @__PURE__ */ t.jsx(
-      yo,
-      {
-        formId: De(Fe),
-        primaryBtn: {
-          label: p.footer.save,
-          style: { width: "82px" },
-          isLoading: o.saveState.fetchState === "In-Progress",
-          isDisabled: o.saveState.fetchState === "In-Progress"
-        },
-        cancelBtn: {
-          label: p.footer.cancel,
-          style: { width: "82px" },
-          shouldResetOnCancel: !0,
-          onClick: () => {
-            v(!0);
-          }
-        }
-      }
-    ) : null,
-    i ? null : /* @__PURE__ */ t.jsx($o, { isFooterRendered: Oe(), meetingUrl: m })
-  ] });
-}
-const De = (e) => `${e}_form`, He = (e, o, n, r, m, i, E, w, I, k, z, S, R) => {
-  const {
-    accountMappingLocalData: d,
-    incomeRecommendation: v,
-    expenseRecommendation: g,
-    billPayRecommendation: T,
-    reimbursementsRecommendation: D
-  } = e, H = d?.selectedIncomeAccountId === v?.account?.accountId, _ = d?.selectedExpenseAccountId === g?.account?.accountId, A = d?.selectedBillPayAccountId === T?.account?.accountId, ie = d?.selectedReimbursementsAccountId === D?.account?.accountId, ce = d?.selectedIncomeAccountId != null ? e.incomeAccountList.find(
-    (s) => s.accountId === d.selectedIncomeAccountId
-  ) : void 0, le = d?.selectedExpenseAccountId != null ? e.expenseAccountList.find(
-    (s) => s.accountId === d.selectedExpenseAccountId
-  ) : void 0, re = d?.selectedBillPayAccountId != null ? e.billPayAccountList.find(
-    (s) => s.accountId === d.selectedBillPayAccountId
-  ) : void 0, de = d?.selectedReimbursementsAccountId != null ? e.reimbursementsAccountList.find(
-    (s) => s.accountId === d.selectedReimbursementsAccountId
-  ) : void 0, ae = d?.selectedPrepaidExpensesAccountIds != null ? e.prepaidExpensesAccountList.filter(
-    (s) => d.selectedPrepaidExpensesAccountIds.includes(
-      s.accountId
-    )
-  ) : [], ue = d?.selectedFixedAssetsAccountIds != null ? e.fixedAssetsAccountList.filter(
-    (s) => d.selectedFixedAssetsAccountIds.includes(
-      s.accountId
-    )
-  ) : [], me = d?.selectedAccruedExpensesAccountIds != null ? e.accruedExpensesAccountList.filter(
-    (s) => d.selectedAccruedExpensesAccountIds.includes(
-      s.accountId
-    )
-  ) : [], pe = d?.selectedBankAccounts1099FilingAccountIds != null ? e.bankAccounts1099FilingAccountList.filter(
-    (s) => d.selectedBankAccounts1099FilingAccountIds.includes(
-      s.accountId
-    )
-  ) : [], xe = d?.selectedExpenseAccounts1099FilingAccountIds != null ? d.selectedExpenseAccounts1099FilingAccountIds.map(
-    (s) => ({
-      accountId: s.accountId ?? p.strings.empty,
-      tax1099Config: {
-        expenseType1099: s.expenseType ?? p.strings.empty,
-        type1099: s.type1099 ?? p.strings.empty,
-        boxType: s.boxType ?? p.strings.empty
-      }
-    })
-  ) : [];
-  return {
-    [h]: {
-      bankAccount: {
-        selectedOptions: pe.map((s) => s.qboId).filter((s) => s != null),
-        allOptions: I
-      },
-      expenseCategory1099: xe.map((s) => ({
-        accountId: {
-          selectedOption: e.expenseAccounts1099FilingAccountList.find(
-            (U) => U.accountId === s.accountId
-          )?.qboId ?? p.strings.empty,
-          allOptions: k
-        },
-        expenseType: {
-          selectedOption: s?.tax1099Config?.expenseType1099 ?? p.strings.empty,
-          allOptions: z
-        },
-        type1099: {
-          selectedOption: s?.tax1099Config?.type1099 ?? p.strings.empty,
-          allOptions: S
-        },
-        boxType: {
-          selectedOption: s?.tax1099Config?.boxType ?? p.strings.empty,
-          allOptions: _e(
-            s?.tax1099Config?.type1099 ?? p.strings.empty,
-            R
-          )
-        }
-      }))
-    },
-    [W]: {
-      incomeAccount: {
-        selectedOption: ce?.qboId,
-        allOptions: o
-      },
-      isRecommendedIncomeAccountChecked: H,
-      expenseAccount: {
-        selectedOption: le?.qboId,
-        allOptions: n
-      },
-      isRecommendedExpenseAccountChecked: _
-    },
-    [V]: {
-      billPayAccount: {
-        selectedOption: re?.qboId,
-        allOptions: r
-      },
-      isRecommendedBillPayAccountChecked: A
-    },
-    [ee]: {
-      reimbursementsAccount: {
-        selectedOption: de?.qboId,
-        allOptions: m
-      },
-      isRecommendedReimbursementsAccountChecked: ie
-    },
-    [Ue]: {
-      prepaidExpensesAccount: {
-        selectedOptions: ae.map((s) => s.qboId).filter((s) => s != null),
-        allOptions: i
-      },
-      fixedAssetsAccount: {
-        selectedOptions: ue.map((s) => s.qboId).filter((s) => s != null),
-        allOptions: E
-      },
-      accruedExpensesAccount: {
-        selectedOptions: me.map((s) => s.qboId).filter((s) => s != null),
-        allOptions: w
-      }
-    }
-  };
-};
-export {
-  bt as default
-};