@zeniai/web-components 3.17.11 → 3.17.13

package/dist/TransactionVendorDetailPage-roeJ3hTY.js

@@ -1,425 +0,0 @@
-import { u as U, j as o, g as q, h as H, F as G } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as _, useEffect as L } from "react";
-import c from "@emotion/styled";
-import { u as A, R as n, e as I, a as M, aS as Z, iB as z, iR as B, iS as W, iT as X, iU as k, S as r, k as J, iV as K, iW as Q, D as t, A as Y, ao as ee, b as te, aw as oe, fv as ne } from "./index-Dg4HzhKR.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 = U(), y = E.labelWidth.value(l), j = E.controlWidth.value(l), N = (s) => g.filter((O) => O.accountId === s)[0]?.coaId ?? "", i = (s) => $.filter((O) => O.classId === s)[0]?.accountingClassNumber ?? "", f = (s) => {
-    const T = g.find(
-      (O) => O.accountId === s
-    )?.accountName;
-    return [K, Q].includes(
-      T ?? ""
-    );
-  };
-  return /* @__PURE__ */ o.jsxs(
-    se,
-    {
-      "data-testid": I("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) => N(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: W(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(
-            X,
-            {
-              label: {
-                label: d.vendorDetails.vendorOwner,
-                width: y
-              },
-              userSingleSelectField: {
-                name: P(m, "vendorOwner"),
-                placeholder: d.placeholders.owner,
-                defaultValue: {
-                  allOptions: k(b),
-                  selectedOption: a
-                },
-                registerOptions: {
-                  required: !1
-                },
-                style: {
-                  width: "auto"
-                },
-                menuPlacement: "top"
-              },
-              isDisabled: p,
-              style: {
-                justifyContent: "space-between"
-              },
-              controlWidth: j
-            }
-          ) : null
-        ] })
-      ]
-    }
-  );
-}, se = c.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${r.sp3};
-  padding-bottom: ${r.sp3};
-`, ie = c(J)`
-  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?.();
-  }, j = (i, f) => {
-    const s = ge(
-      i,
-      void 0
-    );
-    m?.(s);
-  }, N = async (i, f) => {
-    (i.includes("vendorName") || i.includes("vendorOwner") || i.includes("vendorClass") || i.includes("vendorCategory")) && (j(f), l === !0 && i.includes("vendorName") && C(!1));
-  };
-  return L(() => {
-    const i = S.watch((f, { name: s }) => {
-      s != null && f != null && H(() => N(s, f));
-    });
-    return () => {
-      i.unsubscribe();
-    };
-  }), L(() => {
-    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: k(v),
-      selectedOption: a?.vendorOwner
-    },
-    vendorCategory: {
-      allOptions: B(e),
-      selectedOption: a?.vendorCategory
-    },
-    vendorClass: {
-      allOptions: W(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 (L(() => {
-    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": I("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": I("close-icon")
-            }
-          ) }),
-          /* @__PURE__ */ o.jsx(Se, { windowSize: p, children: S })
-        ] }),
-        /* @__PURE__ */ o.jsx(me, { children: /* @__PURE__ */ o.jsx(
-          he,
-          {
-            windowSize: p,
-            "data-testid": I("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
-};