@zeniai/web-components 3.16.42 → 3.16.44

package/dist/UncategorizedAccountsMappingPage-DG-TG1NT.js

@@ -0,0 +1,1160 @@
+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-BZbZ6JJC.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-oyJQP6ol.js";
+import { H as $o } from "./HelpButton-DY5Fs9rK.js";
+import { V as So } from "./VendorsAccountsSection-oxrBi671.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
+};