@zeniai/web-components 3.16.99 → 3.17.2

package/dist/EditPeoplePage-uYYqt7yV.js

@@ -0,0 +1,392 @@
+import { u as ae, g as de, j as o, F as ce } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as M, useRef as pe, useMemo as ue, useEffect as H } from "react";
+import l from "@emotion/styled";
+import { toUserRoleTypeStrict as me, hasInvestorBankerLevelAccess as fe } from "@zeniai/client-epic-state";
+import { u as ge, a as he, i3 as ve, aD as xe, aP as Re, v as Pe, aQ as we, aR as ye, aZ as $e, e as Z, S as r, Z as Ie, ao as Se, R as I, i5 as je, i6 as Ce, i7 as Ue, fe as be, w as _e, C as Q, x as ze, D as n } from "./index-BEMjPEfs.js";
+import { Z as Ne } from "./ZeniAvatar-DWmQo2ei.js";
+import { A as Be } from "./AllUserItems-CPYizeRm.js";
+const S = {
+  containerPaddingTop: new I(n[3], n[3]),
+  containerPaddingLeft: new I(n[3], n[6], n[6]),
+  containerPaddingRight: new I(n[3], n[6], n[8]),
+  buttonWidth: new I(85, 85),
+  marginBottom: new I(n[3], n[3])
+}, G = "editPeoplePage", w = "userItems", d = he.getLocalizedStrings().peoplePage, Xe = ({
+  peopleDetails: e,
+  managersList: u,
+  classList: y,
+  controllersList: j,
+  mode: c,
+  isZeniTenant: z,
+  onCloseClick: C,
+  onResetClick: U,
+  onSaveClick: m,
+  onDeleteUser: K,
+  onPeopleLocalDataUpdated: X,
+  analytics: k,
+  isReimbursementDisabled: A,
+  isZeniAccountsDisabled: O,
+  isChargeCardDisabled: V,
+  isTreasuryDisabled: W,
+  isBankingOnlyTenant: x,
+  isCardsOnlyTenant: R,
+  isLiteRoleDisabled: F
+}) => {
+  const $ = ge(), [Y, N] = M(!1), [D, ee] = M(-1), oe = c === "zeni_only" ? d.invitePage.editZeniTitle : d.invitePage.editTitle, te = pe(null), B = ue(
+    () => ve(
+      A,
+      O,
+      V,
+      x,
+      R,
+      F,
+      W
+    ),
+    [
+      A,
+      O,
+      V,
+      x,
+      R,
+      F,
+      W
+    ]
+  ), q = ae(), i = de({
+    mode: "onBlur",
+    reValidateMode: "onChange",
+    defaultValues: J(
+      e.people,
+      u,
+      y,
+      c,
+      B,
+      x,
+      R
+    ),
+    values: J(
+      e.people,
+      u,
+      y,
+      c,
+      B,
+      x,
+      R
+    )
+  }), re = i.handleSubmit(
+    () => {
+      T() && m();
+    },
+    () => {
+      T(), console.warn("Edit Profile form error");
+    }
+  ), T = () => {
+    const f = i.getValues();
+    let s = !0;
+    return f.userItems.forEach((g, P) => {
+      const { role: E, department: a, nonZeniRole: h, manager: p } = g;
+      if (c === "zeni_only") {
+        const t = E.selectedOptions;
+        (!t?.length || t?.length === 1 && t?.includes("company_officer")) && (i.setError(`${w}.${P}.role`, {
+          type: "required"
+        }), s = !1);
+      } else {
+        const t = h?.userRole.selectedRole;
+        (t != null && h != null ? h.productsByUserRole[t].map((v) => v.selectedOption).filter((v) => v != null) : []).length < 1 && (i.setError(
+          `${w}.${P}.nonZeniRole.userRole.selectedRole`,
+          {
+            type: "required"
+          }
+        ), s = !1), t !== "investor_or_banker" && a?.selectedOption == null && (x || R || (i.setError(`${w}.${P}.department`, {
+          type: "required"
+        }), s = !1)), p?.selectedUser == null && t !== "investor_or_banker" && (i.setError(`${w}.${P}.manager`, {
+          type: "required"
+        }), s = !1);
+      }
+    }), s;
+  }, se = async (f, s) => {
+    const g = [], { userItems: P } = s, E = e.person?.userRole?.userRoleId;
+    P.forEach((a) => {
+      let h = {};
+      if (E != null) {
+        if (c === "zeni_only")
+          h = {
+            email: a.email,
+            role: a.role.selectedOptions
+          };
+        else {
+          const p = a.nonZeniRole?.userRole.selectedRole;
+          let t = [];
+          p === "admin" || p === "investor_or_banker" ? t.push(p) : t = p != null ? (a.nonZeniRole?.productsByUserRole[p] ?? []).map(
+            (v) => me(v.selectedOption?.value)
+          ).filter(
+            (v) => v != null
+          ) : [], p === "employee" && t.length === 0 && t.push("reimbursements_user");
+          const _ = fe(t);
+          h = {
+            email: a.email,
+            role: t,
+            departmentId: _ ? void 0 : a.department?.selectedOption?.value,
+            managerId: _ ? void 0 : a.manager?.selectedUser
+          };
+        }
+        g.push(h);
+      }
+    }), X(g);
+  };
+  H(() => {
+    const f = i.watch((s, { name: g }) => {
+      g != null && s != null && se(g, s);
+    });
+    return () => {
+      f.unsubscribe();
+    };
+  });
+  const ne = () => {
+    N(!0);
+  }, le = {
+    onOkClick: () => {
+      const f = e.person;
+      k?.trackRemoveUserAccess(
+        f.userRole.userRoles,
+        f.userRole.userEmail
+      ), K?.(e.person);
+    },
+    onCancelClick: () => {
+      N(!1);
+    }
+  }, L = xe(
+    e.person?.update
+  ), b = e.person?.update, ie = d.deleteOverlay.description.replace(
+    "‘_user-name_’",
+    `"${e.person?.user?.firstName} ${e.person?.user?.lastName}"`
+  );
+  return H(() => {
+    b == null && L === "removeUsers" && (N(!1), U?.());
+  }, [b, L]), /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    Y === !0 ? /* @__PURE__ */ o.jsx(
+      Re,
+      {
+        titleComponent: /* @__PURE__ */ o.jsx(ye, { children: d.deleteOverlay.title }),
+        descriptionComponent: /* @__PURE__ */ o.jsx(we, { children: ie }),
+        primaryButtonText: d.deleteOverlay.remove,
+        secondaryButtonText: d.deleteOverlay.cancel,
+        action: le,
+        proceedButtonVariant: "danger",
+        isLoading: b === "removeUsers",
+        isDisabled: b === "removeUsers",
+        style: { background: q.colors.overlayColor },
+        children: e.person?.user != null ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(Fe, {}),
+          /* @__PURE__ */ o.jsx(Ve, { children: /* @__PURE__ */ o.jsx(
+            We,
+            {
+              src: e.person?.user.photo?.toString() ?? Pe,
+              alt: e.person?.user.userId,
+              loading: "lazy"
+            }
+          ) })
+        ] }) : null
+      }
+    ) : null,
+    /* @__PURE__ */ o.jsx(
+      $e,
+      {
+        title: oe,
+        backgroundColor: q.colors.grey4,
+        style: { zIndex: 4 },
+        onCloseClick: C,
+        isTitleAlignLeft: $ === "small"
+      }
+    ),
+    /* @__PURE__ */ o.jsxs(
+      Ee,
+      {
+        "data-testid": Z("edit-people-page-container"),
+        windowSize: $,
+        ref: te,
+        children: [
+          /* @__PURE__ */ o.jsxs(Oe, { children: [
+            /* @__PURE__ */ o.jsx(
+              Ne,
+              {
+                personBasic: e.person?.user,
+                styles: { height: r.sp6, width: r.sp6 }
+              }
+            ),
+            /* @__PURE__ */ o.jsxs(Ze, { children: [
+              /* @__PURE__ */ o.jsx(ke, { children: e.person?.user?.firstName ? /* @__PURE__ */ o.jsxs(Ae, { children: [
+                e.person?.user?.firstName ?? "",
+                " ",
+                e.person?.user?.lastName ?? ""
+              ] }) : null }),
+              /* @__PURE__ */ o.jsx(
+                Te,
+                {
+                  className: "delete-icon-wrapper",
+                  "data-testid": Z(
+                    "edit-people-page-delete-icon-wrapper"
+                  ),
+                  onClick: ne,
+                  children: /* @__PURE__ */ o.jsx(
+                    Ie,
+                    {
+                      style: { padding: "2px 5px" },
+                      enterDelay: 600,
+                      title: d.deleteOverlay.title,
+                      placement: "top",
+                      children: /* @__PURE__ */ o.jsx(qe, { windowsize: $ })
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ o.jsx(ce, { ...i, children: /* @__PURE__ */ o.jsx("form", { id: `${G}_form`, onSubmit: re, children: /* @__PURE__ */ o.jsx(
+            Be,
+            {
+              control: i.control,
+              sectionId: w,
+              deleteConfirmationIndex: D,
+              updateDeleteConfirmationIndex: ee,
+              mode: c,
+              isZeniTenant: z,
+              classList: y,
+              managersList: u,
+              controllersList: j,
+              customerRoleOptions: B,
+              isBankingOnlyTenant: x,
+              isCardsOnlyTenant: R,
+              isEdit: !0,
+              person: e.person,
+              analytics: k
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      Se,
+      {
+        formId: `${G}_form`,
+        "data-testid": Z("edit-people-page-footer"),
+        primaryBtn: {
+          label: d.invitePage.update,
+          style: {
+            width: S.buttonWidth.value($)
+          },
+          isLoading: e.updatePersonState.fetchState === "In-Progress",
+          isDisabled: e.updatePersonState.fetchState === "In-Progress"
+        },
+        showCancel: !0,
+        cancelBtn: {
+          label: d.invitePage.cancel,
+          style: {
+            width: S.buttonWidth.value($)
+          },
+          shouldResetOnCancel: !1,
+          onClick: C
+        },
+        separatorStyle: { marginRight: r.sp4 }
+      }
+    )
+  ] });
+}, J = (e, u, y, j, c, z, C) => {
+  const U = y.map((m) => ({
+    label: m.fullyQualifiedAccountingClassName ?? "",
+    value: m.classId,
+    hoverText: m.accountingClassNumber
+  }));
+  return {
+    [w]: [
+      {
+        userIndex: 0,
+        email: e[0].email,
+        role: j === "zeni_only" ? {
+          allOptions: be.roles,
+          selectedOptions: e[0]?.role
+        } : void 0,
+        nonZeniRole: j !== "zeni_only" ? {
+          userRole: {
+            selectedRole: Ue(e[0]?.role),
+            allRootRole: Ce(
+              z,
+              C
+            )
+          },
+          productsByUserRole: je(
+            e[0]?.role,
+            c
+          )
+        } : void 0,
+        manager: {
+          allUsers: u,
+          selectedUser: e[0]?.managerId ? e[0]?.managerId : "no_manager"
+        },
+        department: {
+          allOptions: U,
+          selectedOption: U.find(
+            (m) => m.value === e[0]?.departmentId
+          )
+        }
+      }
+    ]
+  };
+}, Ye = (e, u) => `${e}.${u}`, Ee = l.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  padding-left: ${(e) => `${S.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${S.containerPaddingRight.valuePx(e.windowSize)}`};
+  overflow-x: hidden;
+  height: 100%;
+  padding-top: ${(e) => `${S.containerPaddingTop.valuePx(e.windowSize)}`};
+  gap: ${r.sp2};
+`, Ze = l.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+`, ke = l.div``, Ae = l(_e)`
+  color: ${(e) => e.theme.colors.primary};
+`, Oe = l.div`
+  display: flex;
+  gap: ${r.sp2};
+  align-items: center;
+  margin: ${r.sp0} ${r.sp1};
+`, Ve = l.div`
+  position: absolute;
+  top: -26px;
+`, We = l.img`
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  color: ${(e) => e.theme.colors.hero};
+`, Fe = l.div`
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 62px;
+  width: ${r.sp9};
+  border-radius: 50% 50% 0 0;
+  background-color: ${(e) => e.theme.colors.grey5};
+`, qe = l(ze)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  color: ${(e) => e.windowsize === "small" ? Q.important : e.theme.colors.hero};
+  &:hover {
+    color: ${Q.important};
+  }
+`, Te = l.div`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+  position: relative;
+`;
+export {
+  Xe as default,
+  Ye as uniqueName
+};