@zeniai/web-components 3.16.92 → 3.16.94

package/dist/NotificationSettingsPage-CsaIk9hI.js

@@ -0,0 +1,541 @@
+import { u as Y, j as t, g as ie, h as se, F as re } from "./vendor-.pnpm-B2klaOGU.js";
+import { useCallback as L, 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 J, a as C, h9 as me, aL as j, fV as pe, fW as ue, O as he, S as n, w as K, F as Q, o as X, R as M, E as ge, D as w, aC as fe, fN as xe, z as $e, P as Se, aE as ye, ao as be } from "./index-B9wG56Sb.js";
+import { B as je } from "./BusyIndication-K5tZ950O.js";
+const { common: we } = C.getLocalizedStrings(), A = {
+  notePadding: new M(w[3], w[4]),
+  noteGap: new M(w[0], 6)
+}, P = (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;
+`, Ne = o(K)`
+  color: ${(e) => e.theme.colors.primary};
+`, Ie = 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};
+    }
+  }
+`, T = o.div`
+  flex: 1;
+`, q = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+`, Oe = o(Q)`
+  color: ${(e) => e.theme.colors.primary};
+  flex: 1;
+  width: 120px;
+  text-align: center;
+`, Pe = o(ge)`
+  padding: ${(e) => `${n.sp1}  ${A.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) => A.noteGap.valuePx(e.windowSize)};
+`, Fe = o.div``, Me = o.span``;
+function ze({
+  sectionId: e,
+  monthEndInsightsNotificationLocalData: i,
+  monthEndInsightsNotificationSettings: s,
+  managersList: l,
+  allUsers: g,
+  classList: p,
+  controllersList: x
+}) {
+  const u = Y(), a = J(), { 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(Ne, { children: $.monthEndInsights }),
+      /* @__PURE__ */ t.jsx(Fe, { children: /* @__PURE__ */ t.jsx(Oe, { children: S.email }) })
+    ] }),
+    /* @__PURE__ */ t.jsxs(Ie, { 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: P(e, "notify"),
+                name: P(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(T, { children: /* @__PURE__ */ t.jsx(q, { children: c.labels.notifyOthers }) }),
+            /* @__PURE__ */ t.jsx(T, { 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 N = p.find(
+                      (k) => k.classId === m.userRole.accountingClassIDs[0]
+                    );
+                    return N != null && y.push(N.className), y;
+                  } else
+                    return [];
+                },
+                name: P(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(Pe, { windowSize: a, children: [
+            c.stopReceivingEmailsText,
+            h ? /* @__PURE__ */ t.jsxs(
+              ke,
+              {
+                href: `mailto:${h.email}?cc=${R}&subject=${encodeURIComponent(
+                  c.stopReceivingMonthEndInsightsSubject
+                )}`,
+                children: [
+                  /* @__PURE__ */ t.jsx(Me, { children: `${h.firstName} ${h.lastName}` }),
+                  /* @__PURE__ */ t.jsx(he, { className: "arrowIcon" })
+                ]
+              }
+            ) : null
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+const V = (e, i, s) => `${e}.${i}.${s}`, Le = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${n.sp3};
+`, Be = o.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, Ae = o(K)`
+  color: ${(e) => e.theme.colors.primary};
+`, U = o.div`
+  display: flex;
+`, _ = o(Q)`
+  color: ${(e) => e.theme.colors.primary};
+  flex: 1;
+  width: 120px;
+  text-align: center;
+`, Te = o.div`
+  width: 120px;
+  display: flex;
+`, qe = o.div`
+  width: 120px;
+  display: flex;
+  padding-right: 12px;
+`, Ve = o(X)`
+  color: ${(e) => e.theme.colors.hero};
+`, Ue = 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(Le, { children: [
+    /* @__PURE__ */ t.jsxs(Be, { children: [
+      /* @__PURE__ */ t.jsx(Ae, { children: p.sectionTitle.reminders }),
+      /* @__PURE__ */ t.jsxs(U, { children: [
+        /* @__PURE__ */ t.jsx(_, { children: l.frequency }),
+        /* @__PURE__ */ t.jsx(_, { children: p.mode.email })
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsx(Ue, { children: u.map((a, $) => /* @__PURE__ */ t.jsxs(
+      _e,
+      {
+        firstElement: $ === 0,
+        lastElement: $ === u.length - 1,
+        children: [
+          /* @__PURE__ */ t.jsx(Ve, { children: p.reminders[a] }),
+          /* @__PURE__ */ t.jsxs(U, { children: [
+            /* @__PURE__ */ t.jsx(qe, { children: /* @__PURE__ */ t.jsx(
+              fe,
+              {
+                defaultValue: {
+                  allOptions: p.reminderFrequencyOptions,
+                  selectedOption: i[a].frequency
+                },
+                name: V(e, a, "frequency")
+              }
+            ) }),
+            /* @__PURE__ */ t.jsx(Te, { children: /* @__PURE__ */ t.jsx(
+              xe,
+              {
+                mode: "always_on",
+                checkBoxes: x.map((c) => ({
+                  label: "",
+                  value: c,
+                  defaultChecked: i[a].preferredMode.includes(c),
+                  groupLabel: !1
+                })),
+                name: V(
+                  e,
+                  a,
+                  "preferredMode"
+                ),
+                style: { flexDirection: "row" },
+                checkBoxContainerStyle: { justifyContent: "center" }
+              }
+            ) })
+          ] })
+        ]
+      },
+      a
+    )) })
+  ] });
+}
+const F = {
+  contentPadding: new M(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 = Y(), s = J(), {
+    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: W(c, S)
+  }), b = L(
+    (O) => {
+      p(Xe(O));
+    },
+    [p]
+  ), N = m.handleSubmit(() => {
+    u();
+  }), k = L(() => {
+    m.reset(), a();
+  }, [a]);
+  B(() => {
+    l.updateStatus.fetchState === "Completed" && (m.reset(
+      W(c, S)
+    ), x());
+  }, [
+    c,
+    l.updateStatus.fetchState,
+    S
+  ]), B(() => {
+    const O = m.watch((z, { name: oe }) => {
+      oe != null && z != null && se(() => b(z));
+    });
+    return () => {
+      O.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(We, { 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(Ye, { windowSize: s, children: /* @__PURE__ */ t.jsx(re, { ...m, children: /* @__PURE__ */ t.jsx("form", { id: H(D), onSubmit: N, children: /* @__PURE__ */ t.jsxs(Je, { 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(
+          ze,
+          {
+            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(Ke, { onClick: s, children: /* @__PURE__ */ t.jsx($e, {}) }),
+    /* @__PURE__ */ t.jsx(Qe, { children: He.label })
+  ] }) : /* @__PURE__ */ t.jsx(Ge, { ...e });
+}
+const We = 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};
+`, Ye = o.div`
+  padding-left: ${(e) => F.contentPadding.valuePx(e.windowSize)};
+  padding-right: ${(e) => F.contentPadding.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => F.contentPadding.valuePx(e.windowSize)};
+`, Je = o.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${n.sp8};
+`, Ke = 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 I(e) {
+  const i = Z.notifications.reminderFrequencyOptions;
+  return {
+    preferredMode: e.preferredMode,
+    frequency: {
+      selectedOption: e.frequency,
+      allOptions: i
+    }
+  };
+}
+function W(e, i) {
+  return {
+    [f]: {
+      missingReceiptNotification: I(
+        e.reminders.missingReceiptNotification
+      ),
+      uncategorizedTransactionNotification: I(
+        e.reminders.uncategorizedTransactionNotification
+      ),
+      pendingBillApprovalNotification: I(
+        e.reminders.pendingBillApprovalNotification
+      ),
+      pendingReimbursementApprovalNotification: I(
+        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
+};