@zeniai/web-components 3.16.78 → 3.16.79

package/dist/TransactionVendorDetailPage-XIWkQY0V.js

@@ -0,0 +1,425 @@
+import { u as k, j as o, g as q, h as H, F as G } from "./vendor-.pnpm-DtFedGku.js";
+import { useState as _, useEffect as T } from "react";
+import c from "@emotion/styled";
+import { u as A, R as n, j, a as M, aS as Z, iA as z, iQ as B, iR as U, iS as Q, iT as W, S as r, L as X, iU as J, iV as K, D as t, A as Y, ap as ee, b as te, av as oe, fu as ne } from "./index-D8643Kw5.js";
+const P = (e, u) => `${e}.${u}`, E = {
+  labelWidth: new n(120, 145, 160),
+  paddingBottom: new n(t[3], t[2]),
+  labelMarginLeft: new n(t[3], t[4]),
+  labelMarginRight: new n(t[3], t[4]),
+  labelMarginTop: new n(t[2], t[3]),
+  labelMarginBottom: new n(t[2], t[3]),
+  largeLabelPadding: new n(t[2], t[2]),
+  controlWidth: new n(110, 145, 160),
+  controlHeight: new n(t[6], t[6]),
+  paddingTopBottom: new n(t[2], t[2]),
+  labelHeight: new n(t[6], t[6])
+}, ae = M.getLocalizedStrings().transactionDetail.vendorDetails, d = ae.vendorCreation, re = ({
+  selectedAccountId: e,
+  isSaveError: u,
+  selectedClassId: v,
+  selectedOwnerId: a,
+  selectedVendorName: h,
+  allAccounts: g,
+  allClasses: $,
+  allOwners: b,
+  sectionId: m,
+  isDisabled: p,
+  accountsHierarchyList: x,
+  classHierarchyList: S
+}) => {
+  const l = A(), C = k(), y = E.labelWidth.value(l), I = E.controlWidth.value(l), L = (s) => g.filter((O) => O.accountId === s)[0]?.coaId ?? "", i = (s) => $.filter((O) => O.classId === s)[0]?.accountingClassNumber ?? "", f = (s) => {
+    const N = g.find(
+      (O) => O.accountId === s
+    )?.accountName;
+    return [J, K].includes(
+      N ?? ""
+    );
+  };
+  return /* @__PURE__ */ o.jsxs(
+    se,
+    {
+      "data-testid": j("vendor-details-section", m),
+      children: [
+        /* @__PURE__ */ o.jsx(ie, { children: d.vendorDetails.title }),
+        /* @__PURE__ */ o.jsxs(le, { children: [
+          /* @__PURE__ */ o.jsx(
+            Z,
+            {
+              label: {
+                label: d.vendorDetails.vendorName,
+                width: y
+              },
+              text: {
+                type: "text",
+                name: P(m, "vendorName"),
+                placeholder: d.placeholders.vendor,
+                defaultValue: h,
+                autoComplete: "off",
+                options: {
+                  required: !0
+                }
+              },
+              isSaveError: u,
+              showAdditionalInfoLabel: !1,
+              additionalInfoLabel: d.vendorAlreadyExistsErrorMsg,
+              style: { width: "auto" }
+            }
+          ),
+          /* @__PURE__ */ o.jsx(de, {}),
+          /* @__PURE__ */ o.jsx(
+            z,
+            {
+              isLoading: !1,
+              label: {
+                label: d.vendorDetails.vendorCategory,
+                width: y
+              },
+              groupedSingleSelectField: {
+                shouldShowChevronIcon: !1,
+                name: P(m, "vendorCategory"),
+                placeholder: d.placeholders.category,
+                valueToInfo: (s) => L(s),
+                defaultValue: {
+                  selectedOption: e,
+                  allOptions: B(x)
+                },
+                style: {
+                  width: "auto"
+                },
+                registerOptions: {
+                  required: !1
+                }
+              },
+              style: {
+                borderBottom: `1px solid ${C.colors.grey3}`
+              },
+              isDisabled: p,
+              disableCurrentOption: f,
+              zIndexOnFocus: !0,
+              additionalLabelInfo: d.vendorDetails.vendorCategoryAdditionText
+            }
+          ),
+          /* @__PURE__ */ o.jsx(
+            z,
+            {
+              isLoading: !1,
+              label: {
+                label: d.vendorDetails.vendorClass,
+                width: y
+              },
+              zIndexOnFocus: !0,
+              groupedSingleSelectField: {
+                shouldShowChevronIcon: !1,
+                name: P(m, "vendorClass"),
+                placeholder: d.placeholders.class,
+                valueToInfo: (s) => i(s),
+                defaultValue: {
+                  selectedOption: v,
+                  allOptions: U(S)
+                },
+                registerOptions: {
+                  required: !1
+                },
+                style: {
+                  width: "auto"
+                }
+              },
+              additionalLabelInfo: d.vendorDetails.vendorClassAdditionText,
+              style: {
+                borderBottom: `1px solid ${C.colors.grey3}`
+              },
+              isDisabled: p
+            }
+          ),
+          b != null ? /* @__PURE__ */ o.jsx(
+            Q,
+            {
+              label: {
+                label: d.vendorDetails.vendorOwner,
+                width: y
+              },
+              userSingleSelectField: {
+                name: P(m, "vendorOwner"),
+                placeholder: d.placeholders.owner,
+                defaultValue: {
+                  allOptions: W(b),
+                  selectedOption: a
+                },
+                registerOptions: {
+                  required: !1
+                },
+                style: {
+                  width: "auto"
+                },
+                menuPlacement: "top"
+              },
+              isDisabled: p,
+              style: {
+                justifyContent: "space-between"
+              },
+              controlWidth: I
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}, se = c.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${r.sp3};
+  padding-bottom: ${r.sp3};
+`, ie = c(X)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${r.sp3};
+  margin-right: ${r.sp6};
+`, le = c.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+`, de = c.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, D = "vendorDetails", ce = ({
+  id: e,
+  allAccounts: u,
+  allClasses: v,
+  allOwners: a,
+  selectedVendor: h,
+  formLocalData: g,
+  isDisabled: $,
+  onSaveVendor: b,
+  saveVendorDetailLocalData: m,
+  accountsHierarchyList: p,
+  classHierarchyList: x
+}) => {
+  const S = q({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: ue(
+      p,
+      x,
+      a,
+      g
+    )
+  }), [l, C] = _(!1), y = (i) => {
+    i.preventDefault(), S.getValues().vendorDetails.vendorName !== "" && l === !1 && b?.();
+  }, I = (i, f) => {
+    const s = ge(
+      i,
+      void 0
+    );
+    m?.(s);
+  }, L = async (i, f) => {
+    (i.includes("vendorName") || i.includes("vendorOwner") || i.includes("vendorClass") || i.includes("vendorCategory")) && (I(f), l === !0 && i.includes("vendorName") && C(!1));
+  };
+  return T(() => {
+    const i = S.watch((f, { name: s }) => {
+      s != null && f != null && H(() => L(s, f));
+    });
+    return () => {
+      i.unsubscribe();
+    };
+  }), T(() => {
+    h.saveStatus.fetchState === "Error" && h.saveStatus.error?.code === 409 && C(!0);
+  }, [h.saveStatus]), /* @__PURE__ */ o.jsx(G, { ...S, children: /* @__PURE__ */ o.jsx("form", { id: e, onSubmit: y, children: /* @__PURE__ */ o.jsx(
+    re,
+    {
+      sectionId: D,
+      selectedVendorDetails: h,
+      isSaveError: l,
+      selectedAccountId: g?.vendorCategory,
+      selectedClassId: g?.vendorClass,
+      selectedOwnerId: g?.vendorOwner,
+      allAccounts: u ?? [],
+      allClasses: v ?? [],
+      selectedVendorName: g?.vendorName,
+      allOwners: a,
+      isDisabled: $,
+      accountsHierarchyList: p,
+      classHierarchyList: x
+    }
+  ) }) });
+}, ue = (e, u, v, a) => ({
+  [D]: {
+    vendorName: a?.vendorName ?? "",
+    vendorOwner: {
+      allOptions: W(v),
+      selectedOption: a?.vendorOwner
+    },
+    vendorCategory: {
+      allOptions: B(e),
+      selectedOption: a?.vendorCategory
+    },
+    vendorClass: {
+      allOptions: U(u),
+      selectedOption: a?.vendorClass
+    }
+  }
+});
+function ge(e, u, v) {
+  const a = e?.[D];
+  return {
+    vendorCategory: a.vendorCategory.selectedOption,
+    vendorClass: a.vendorClass.selectedOption,
+    vendorId: u,
+    vendorName: a.vendorName,
+    vendorOwner: a.vendorOwner?.selectedOption
+  };
+}
+const w = {
+  containerPaddingLeft: new n(t[3], t[3], t[6]),
+  containerPaddingRight: new n(t[3], t[3], t[8]),
+  containerMarginTop: new n(t[2], t[2], t[4]),
+  navbarContainerPaddingTop: new n(t[3], t[3]),
+  navbarContainerPaddingBottom: new n(t[3], t[3]),
+  SectionTitleMarginTop: new n(0, t[3])
+}, F = {
+  sectionTitle: new oe("h6Regular", "h5Medium"),
+  sectionTitleLineHeight: new n(30, 40)
+}, pe = c.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, he = c.div`
+  margin-top: ${(e) => w.containerMarginTop.valuePx(e.windowSize)};
+  padding-left: ${(e) => w.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => w.containerPaddingRight.valuePx(e.windowSize)};
+`, ve = c.div`
+  display: flex;
+  flex: 1 1 auto;
+  height: 100vh;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, me = c.div`
+  background-color: ${(e) => e.theme.colors.grey4};
+  flex: 1;
+`, fe = c.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: ${r.sp0};
+  z-index: 2;
+  padding-left: ${(e) => w.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => w.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => w.navbarContainerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => w.navbarContainerPaddingBottom.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, we = c.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: 3px;
+  margin-bottom: 3px;
+`, xe = c(te)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Se = c(ne)`
+  display: flex;
+  width: 100%;
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${(e) => w.SectionTitleMarginTop.valuePx(e.windowSize)};
+  ${(e) => `${F.sectionTitle.style(e.windowSize)}`};
+  margin-left: ${(e) => e.windowSize === "small" ? r.sp3 : 0};
+  line-height: ${(e) => F.sectionTitleLineHeight.valuePx(e.windowSize)};
+`, R = "vendorDetailPage", V = (e) => `${e}_form`, Oe = ({
+  vendorDetailView: e,
+  onSaveSuccess: u,
+  onCancelClick: v,
+  onSaveVendor: a,
+  saveVendorDetailLocalData: h
+}) => {
+  const {
+    editVendorState: g,
+    newVendorState: $,
+    accountsHierarchyList: b,
+    classHierarchyList: m
+  } = e, p = A(), { footer: x, newVendor: S } = M.getLocalizedStrings().transactionDetail.vendorDetails.createVendor, l = Object.assign(
+    {},
+    g ?? $
+  );
+  if (T(() => {
+    l?.saveStatus?.fetchState === "Completed" && u?.();
+  }, [l]), e.fetchState === "Not-Started" || e.fetchState === "In-Progress")
+    return /* @__PURE__ */ o.jsx(ve, { children: /* @__PURE__ */ o.jsx(Y, { size: "ExtraLarge", start: !0 }) });
+  const C = l.saveStatus?.fetchState === "In-Progress";
+  return /* @__PURE__ */ o.jsxs(
+    pe,
+    {
+      windowSize: p,
+      "data-testid": j("transaction-vendor-detail-page"),
+      children: [
+        /* @__PURE__ */ o.jsxs(fe, { windowSize: p, children: [
+          /* @__PURE__ */ o.jsx(we, { children: /* @__PURE__ */ o.jsx(
+            xe,
+            {
+              onClick: v,
+              "data-testid": j("close-icon")
+            }
+          ) }),
+          /* @__PURE__ */ o.jsx(Se, { windowSize: p, children: S })
+        ] }),
+        /* @__PURE__ */ o.jsx(me, { children: /* @__PURE__ */ o.jsx(
+          he,
+          {
+            windowSize: p,
+            "data-testid": j("vendor-detail-page-form"),
+            children: /* @__PURE__ */ o.jsx(
+              ce,
+              {
+                id: V(R),
+                allAccounts: e.accountList.accounts,
+                allClasses: e.classList.classes,
+                allOwners: e.ownerList,
+                selectedVendor: l,
+                formLocalData: l.vendorDetailLocalData,
+                onSaveVendor: a,
+                saveVendorDetailLocalData: h,
+                accountsHierarchyList: b,
+                classHierarchyList: m
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ o.jsx(
+          ee,
+          {
+            formId: V(R),
+            primaryBtn: {
+              label: x.save,
+              isLoading: C
+            },
+            cancelBtn: {
+              label: x.cancel,
+              shouldResetOnCancel: !0,
+              onClick: v
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Oe as default,
+  V as formUniqueName
+};