@zeniai/web-components 3.16.40 → 3.16.42

package/dist/NotificationSettingsPage-8rUDFukk.js

@@ -1,541 +0,0 @@
-import { u as K, j as t, g as ie, h as se, F as re } from "./vendor-.pnpm-BZbZ6JJC.js";
-import { useCallback as z, useEffect as B } from "react";
-import o from "@emotion/styled";
-import { NOTIFICATION_MODES as le, REMINDER_NOTIFICATION_TYPES as ce, isMonthEndNotificationsSectionVisibleOnSettingsPage as ae, isRemindersSectionVisibleOnSettingsPage as de } from "@zeniai/client-epic-state";
-import { u as W, a as C, h6 as me, aL as j, fS as pe, fT as ue, J as he, S as n, y as Y, G as Q, p as X, R as F, E as ge, D as w, aC as fe, fK as xe, x as $e, P as Se, aE as ye, ap as be } from "./index-oeut1pIL.js";
-import { B as je } from "./BusyIndication-BgMTrFEc.js";
-const { common: we } = C.getLocalizedStrings(), T = {
-  notePadding: new F(w[3], w[4]),
-  noteGap: new F(w[0], 6)
-}, O = (e, i) => `${e}.${i}`, ve = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${n.sp3};
-`, Ce = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`, Ie = o(Y)`
-  color: ${(e) => e.theme.colors.primary};
-`, Ne = o.div`
-  border-radius: ${n.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
-`, Ee = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
-  padding: ${n.sp3} ${n.sp7} ${n.sp3} ${n.sp4};
-  pointer-events: ${(e) => e.disabled ? "none" : "all"};
-  background-color: ${(e) => e.theme.colors.grey5};
-  &:hover {
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    border-top-right-radius: ${n.sp2};
-    border-top-left-radius: ${n.sp2};
-  }
-`, Re = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: ${(e) => e.lastElement === !0 ? "unset" : `1px solid ${e.theme.colors.grey3}`};
-  padding: ${n.sp2} ${n.sp1} ${n.sp2} ${n.sp4};
-  background-color: ${(e) => e.theme.colors.grey5};
-  &:hover {
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    border-bottom-right-radius: ${n.sp2};
-    border-bottom-left-radius: ${n.sp2};
-  }
-`, ke = o.a`
-  color: ${(e) => e.theme.colors.hero};
-  text-decoration: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  .arrowIcon {
-    cursor: pointer;
-    height: 12px;
-    width: 12px;
-  }
-  :hover {
-    color: ${(e) => e.theme.colors.primary};
-    .arrowIcon {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, A = o.div`
-  flex: 1;
-`, q = o(X)`
-  color: ${(e) => e.theme.colors.hero};
-`, Pe = o(Q)`
-  color: ${(e) => e.theme.colors.primary};
-  flex: 1;
-  width: 120px;
-  text-align: center;
-`, Oe = o(ge)`
-  padding: ${(e) => `${n.sp1}  ${T.notePadding.valuePx(e.windowSize)}`};
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${n.sp0} ${n.sp0} ${n.sp2} ${n.sp2};
-  text-align: left;
-  color: ${(e) => e.theme.colors.grey1};
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
-  gap: ${(e) => T.noteGap.valuePx(e.windowSize)};
-`, Me = o.div``, Fe = o.span``;
-function Le({
-  sectionId: e,
-  monthEndInsightsNotificationLocalData: i,
-  monthEndInsightsNotificationSettings: s,
-  managersList: l,
-  allUsers: g,
-  classList: p,
-  controllersList: x
-}) {
-  const u = K(), a = W(), { sectionTitle: $, monthEndInsights: c, mode: S } = we.settings.notifications, h = x[0], R = x.slice(1).reduce((d, r) => d.concat(`${r.email},`), "");
-  return /* @__PURE__ */ t.jsxs(ve, { children: [
-    /* @__PURE__ */ t.jsxs(Ce, { children: [
-      /* @__PURE__ */ t.jsx(Ie, { children: $.monthEndInsights }),
-      /* @__PURE__ */ t.jsx(Me, { children: /* @__PURE__ */ t.jsx(Pe, { children: S.email }) })
-    ] }),
-    /* @__PURE__ */ t.jsxs(Ne, { children: [
-      /* @__PURE__ */ t.jsxs(
-        Ee,
-        {
-          disabled: s.enabled == null,
-          children: [
-            /* @__PURE__ */ t.jsx(q, { children: c.labels.notifyMe }),
-            /* @__PURE__ */ t.jsx(
-              me,
-              {
-                defaultChecked: i.notify,
-                checkBoxValue: O(e, "notify"),
-                name: O(e, "notify"),
-                checkedIconColor: s.enabled == null ? u.colors.grey2 : void 0
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        j,
-        {
-          controller: s.enabled != null,
-          children: /* @__PURE__ */ t.jsxs(Re, { children: [
-            /* @__PURE__ */ t.jsx(A, { children: /* @__PURE__ */ t.jsx(q, { children: c.labels.notifyOthers }) }),
-            /* @__PURE__ */ t.jsx(A, { children: /* @__PURE__ */ t.jsx(
-              pe,
-              {
-                hideEmailTooltip: !1,
-                showBackgroundColorIfHasAnySelectedOption: !1,
-                shouldHaveBackgroundColor: !1,
-                value: {
-                  allUsers: g,
-                  selectedUsers: g.filter(
-                    (d) => i.recipientEmailIds.includes(
-                      d.email
-                    )
-                  ),
-                  allNonUsers: [],
-                  selectedNonUsers: []
-                },
-                hideMultiValueOnBlur: !1,
-                valueToSubtitle: (d) => {
-                  const r = l.findIndex(
-                    (m) => m.userId === d
-                  ), y = [];
-                  if (r !== -1) {
-                    const m = l[r], b = ue(
-                      m.userRole.userRoles
-                    );
-                    b.length > 0 && y.push(b);
-                    const I = p.find(
-                      (k) => k.classId === m.userRole.accountingClassIDs[0]
-                    );
-                    return I != null && y.push(I.className), y;
-                  } else
-                    return [];
-                },
-                name: O(e, "recipientEmailIds"),
-                placeholderLabel: c.userFieldPlaceholder,
-                customStyleConfig: {
-                  valueContainer: (d, { selectProps: r }) => ({
-                    justifyContent: r.menuIsOpen === !1 ? "flex-end" : "flex-start"
-                  }),
-                  input: (d, { selectProps: r }) => ({
-                    display: r.menuIsOpen === !1 ? "none" : "inline-grid"
-                  }),
-                  control: (d, { selectProps: r }) => ({
-                    backgroundColor: r.menuIsOpen === !0 ? u.colors.background : "unset"
-                  }),
-                  container: (d, { selectProps: r }) => ({
-                    backgroundColor: r.menuIsOpen === !0 ? u.colors.background : "unset"
-                  }),
-                  multiValue: (d, { selectProps: r }) => ({
-                    outline: r.menuIsOpen === !1 ? "unset" : `1px solid ${u.colors.primary}`
-                  })
-                }
-              }
-            ) })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        j,
-        {
-          controller: s.enabled == null,
-          children: /* @__PURE__ */ t.jsxs(Oe, { windowSize: a, children: [
-            c.stopReceivingEmailsText,
-            h ? /* @__PURE__ */ t.jsxs(
-              ke,
-              {
-                href: `mailto:${h.email}?cc=${R}&subject=${encodeURIComponent(
-                  c.stopReceivingMonthEndInsightsSubject
-                )}`,
-                children: [
-                  /* @__PURE__ */ t.jsx(Fe, { children: `${h.firstName} ${h.lastName}` }),
-                  /* @__PURE__ */ t.jsx(he, { className: "arrowIcon" })
-                ]
-              }
-            ) : null
-          ] })
-        }
-      )
-    ] })
-  ] });
-}
-const U = (e, i, s) => `${e}.${i}.${s}`, ze = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${n.sp3};
-`, Be = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`, Te = o(Y)`
-  color: ${(e) => e.theme.colors.primary};
-`, V = o.div`
-  display: flex;
-`, _ = o(Q)`
-  color: ${(e) => e.theme.colors.primary};
-  flex: 1;
-  width: 120px;
-  text-align: center;
-`, Ae = o.div`
-  width: 120px;
-  display: flex;
-`, qe = o.div`
-  width: 120px;
-  display: flex;
-  padding-right: 12px;
-`, Ue = o(X)`
-  color: ${(e) => e.theme.colors.hero};
-`, Ve = o.div`
-  border-radius: ${n.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
-`, _e = o.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: ${(e) => e.lastElement === !0 ? "unset" : `1px solid ${e.theme.colors.grey3}`};
-  background-color: ${(e) => e.theme.colors.grey5};
-  padding: ${n.sp2} ${n.sp0} ${n.sp2} ${n.sp4};
-  &:hover {
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    border-top-right-radius: ${(e) => e.firstElement === !0 ? n.sp2 : n.sp0};
-    border-top-left-radius: ${(e) => e.firstElement === !0 ? n.sp2 : n.sp0};
-    border-bottom-left-radius: ${(e) => e.lastElement === !0 ? n.sp2 : n.sp0};
-    border-bottom-right-radius: ${(e) => e.lastElement === !0 ? n.sp2 : n.sp0};
-  }
-`;
-function De({
-  sectionId: e,
-  remindersLocalData: i,
-  reminderNotificationSettings: s
-}) {
-  const { texts: l, settings: g } = C.getLocalizedStrings().common, { notifications: p } = g, x = le.slice(0, 1), u = ce.filter(
-    (a) => s[a] != null
-  );
-  return /* @__PURE__ */ t.jsxs(ze, { children: [
-    /* @__PURE__ */ t.jsxs(Be, { children: [
-      /* @__PURE__ */ t.jsx(Te, { children: p.sectionTitle.reminders }),
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(_, { children: l.frequency }),
-        /* @__PURE__ */ t.jsx(_, { children: p.mode.email })
-      ] })
-    ] }),
-    /* @__PURE__ */ t.jsx(Ve, { children: u.map((a, $) => /* @__PURE__ */ t.jsxs(
-      _e,
-      {
-        firstElement: $ === 0,
-        lastElement: $ === u.length - 1,
-        children: [
-          /* @__PURE__ */ t.jsx(Ue, { children: p.reminders[a] }),
-          /* @__PURE__ */ t.jsxs(V, { children: [
-            /* @__PURE__ */ t.jsx(qe, { children: /* @__PURE__ */ t.jsx(
-              fe,
-              {
-                defaultValue: {
-                  allOptions: p.reminderFrequencyOptions,
-                  selectedOption: i[a].frequency
-                },
-                name: U(e, a, "frequency")
-              }
-            ) }),
-            /* @__PURE__ */ t.jsx(Ae, { children: /* @__PURE__ */ t.jsx(
-              xe,
-              {
-                mode: "always_on",
-                checkBoxes: x.map((c) => ({
-                  label: "",
-                  value: c,
-                  defaultChecked: i[a].preferredMode.includes(c),
-                  groupLabel: !1
-                })),
-                name: U(
-                  e,
-                  a,
-                  "preferredMode"
-                ),
-                style: { flexDirection: "row" },
-                checkBoxContainerStyle: { justifyContent: "center" }
-              }
-            ) })
-          ] })
-        ]
-      },
-      a
-    )) })
-  ] });
-}
-const M = {
-  contentPadding: new F(w[3], w[8])
-}, f = "reminders", v = "monthEndInsights", D = "notificationSettingsPage", H = (e) => `${e}_form`, { settings: Z, reloadPage: He } = C.getLocalizedStrings().common, Ge = (e) => {
-  const i = K(), s = W(), {
-    notificationSettingsView: l,
-    signedInUser: g,
-    onFormDataChange: p,
-    resetUpdateStatus: x,
-    onSave: u,
-    onCancel: a,
-    onClickMenuIcon: $
-  } = e, {
-    notificationSettingsLocalData: c,
-    allUsers: S,
-    notificationSettings: h,
-    classList: R,
-    managersList: d,
-    updateStatus: r,
-    controllersList: y
-  } = l, m = ie({
-    defaultValues: J(c, S)
-  }), b = z(
-    (P) => {
-      p(Xe(P));
-    },
-    [p]
-  ), I = m.handleSubmit(() => {
-    u();
-  }), k = z(() => {
-    m.reset(), a();
-  }, [a]);
-  B(() => {
-    l.updateStatus.fetchState === "Completed" && (m.reset(
-      J(c, S)
-    ), x());
-  }, [
-    c,
-    l.updateStatus.fetchState,
-    S
-  ]), B(() => {
-    const P = m.watch((L, { name: oe }) => {
-      oe != null && L != null && se(() => b(L));
-    });
-    return () => {
-      P.unsubscribe();
-    };
-  }, [m, b]);
-  const ee = Object.keys(m.formState.dirtyFields).length > 0, te = g.userEmail != null ? ae(
-    h.monthEndInsightsNotificationSettings,
-    g.userEmail
-  ) : !1, ne = de(
-    h.reminderNotificationSettings
-  );
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsxs(Je, { children: [
-      /* @__PURE__ */ t.jsx(
-        ye,
-        {
-          source: "NotificationSettingsPage",
-          title: Z.title.notifications,
-          backgroundColor: i.colors.grey4,
-          showBackButton: !1,
-          showMenuIcon: s === "medium-compact" || s === "small",
-          onClickMenuIcon: $
-        }
-      ),
-      /* @__PURE__ */ t.jsx(Ke, { windowSize: s, children: /* @__PURE__ */ t.jsx(re, { ...m, children: /* @__PURE__ */ t.jsx("form", { id: H(D), onSubmit: I, children: /* @__PURE__ */ t.jsxs(We, { children: [
-        /* @__PURE__ */ t.jsx(j, { controller: ne, children: /* @__PURE__ */ t.jsx(
-          De,
-          {
-            reminderNotificationSettings: h.reminderNotificationSettings,
-            remindersLocalData: c.reminders,
-            sectionId: f
-          }
-        ) }),
-        /* @__PURE__ */ t.jsx(j, { controller: te, children: /* @__PURE__ */ t.jsx(
-          Le,
-          {
-            monthEndInsightsNotificationLocalData: c.monthEndInsights,
-            monthEndInsightsNotificationSettings: h.monthEndInsightsNotificationSettings,
-            sectionId: v,
-            allUsers: S,
-            classList: R,
-            managersList: d,
-            controllersList: y
-          }
-        ) })
-      ] }) }) }) })
-    ] }),
-    /* @__PURE__ */ t.jsx(j, { controller: ee, children: /* @__PURE__ */ t.jsx(
-      be,
-      {
-        style: { width: "100%" },
-        formId: H(D),
-        primaryBtn: {
-          label: C.getLocalizedStrings().common.footer.save,
-          isLoading: r.fetchState === "In-Progress",
-          style: { width: "82px" }
-        },
-        cancelBtn: {
-          label: C.getLocalizedStrings().common.footer.cancel,
-          onClick: k,
-          style: { width: "82px" }
-        }
-      }
-    ) })
-  ] });
-};
-function st(e) {
-  const { notificationSettingsView: i, onRefresh: s } = e, { fetchState: l } = i;
-  return l === "Not-Started" || l === "In-Progress" ? /* @__PURE__ */ t.jsx(G, { children: /* @__PURE__ */ t.jsx(je, { fetchState: l, styles: { margin: n.sp0 } }) }) : l === "Error" ? /* @__PURE__ */ t.jsxs(G, { children: [
-    /* @__PURE__ */ t.jsx(Ye, { onClick: s, children: /* @__PURE__ */ t.jsx($e, {}) }),
-    /* @__PURE__ */ t.jsx(Qe, { children: He.label })
-  ] }) : /* @__PURE__ */ t.jsx(Ge, { ...e });
-}
-const Je = o.div`
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  flex-direction: column;
-  row-gap: ${n.sp3};
-  background-color: ${(e) => e.theme.colors.grey4};
-`, G = o.div`
-  display: flex;
-  height: 100vh;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  row-gap: ${n.sp3};
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Ke = o.div`
-  padding-left: ${(e) => M.contentPadding.valuePx(e.windowSize)};
-  padding-right: ${(e) => M.contentPadding.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => M.contentPadding.valuePx(e.windowSize)};
-`, We = o.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${n.sp8};
-`, Ye = o.div`
-  height: 96px;
-  width: 96px;
-  background: ${(e) => e.theme.colors.background};
-  border-radius: 50%;
-  cursor: pointer;
-  & svg {
-    margin: ${n.sp5};
-    color: ${(e) => e.theme.colors.grey1};
-  }
-  &:hover {
-    & svg {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, Qe = o(Se)`
-  margin-top: ${n.sp3};
-  color: ${(e) => e.theme.colors.hero};
-`;
-function N(e) {
-  const i = Z.notifications.reminderFrequencyOptions;
-  return {
-    preferredMode: e.preferredMode,
-    frequency: {
-      selectedOption: e.frequency,
-      allOptions: i
-    }
-  };
-}
-function J(e, i) {
-  return {
-    [f]: {
-      missingReceiptNotification: N(
-        e.reminders.missingReceiptNotification
-      ),
-      uncategorizedTransactionNotification: N(
-        e.reminders.uncategorizedTransactionNotification
-      ),
-      pendingBillApprovalNotification: N(
-        e.reminders.pendingBillApprovalNotification
-      ),
-      pendingReimbursementApprovalNotification: N(
-        e.reminders.pendingReimbursementApprovalNotification
-      )
-    },
-    [v]: {
-      notify: e.monthEndInsights.notify,
-      recipientEmailIds: {
-        allNonUsers: [],
-        selectedNonUsers: [],
-        allUsers: i,
-        selectedUsers: i.filter(
-          (l) => e.monthEndInsights.recipientEmailIds.includes(l.email)
-        )
-      }
-    }
-  };
-}
-function E(e) {
-  return {
-    preferredMode: e.preferredMode,
-    frequency: e.frequency.selectedOption
-  };
-}
-function Xe(e) {
-  return {
-    [f]: {
-      missingReceiptNotification: E(
-        e[f].missingReceiptNotification
-      ),
-      uncategorizedTransactionNotification: E(
-        e[f].uncategorizedTransactionNotification
-      ),
-      pendingBillApprovalNotification: E(
-        e[f].pendingBillApprovalNotification
-      ),
-      pendingReimbursementApprovalNotification: E(
-        e[f].pendingReimbursementApprovalNotification
-      )
-    },
-    [v]: {
-      ...e[v],
-      recipientEmailIds: e[v].recipientEmailIds.selectedUsers.map((s) => s.email)
-    }
-  };
-}
-export {
-  st as default,
-  H as uniqueName
-};