@zeniai/web-components 3.16.91 → 3.16.92

package/dist/TransactionVendorDetailPage-CLaq9K79.js

@@ -0,0 +1,425 @@
+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-B_vMG-7O.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
+};

package/dist/TransactionVendorDetailPage-naDUw2gO.cjs

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),j=require("react"),d=require("@emotion/styled"),e=require("./index-8M9nU4Oy.cjs"),R=(t,l)=>`${t}.${l}`,P={labelWidth:new e.ResponsiveSized(120,145,160),paddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[3]),labelMarginBottom:new e.ResponsiveSized(e.sp[2],e.sp[3]),largeLabelPadding:new e.ResponsiveSized(e.sp[2],e.sp[2]),controlWidth:new e.ResponsiveSized(110,145,160),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelHeight:new e.ResponsiveSized(e.sp[6],e.sp[6])},N=e.appLocale.getLocalizedStrings().transactionDetail.vendorDetails,a=N.vendorCreation,D=({selectedAccountId:t,isSaveError:l,selectedClassId:g,selectedOwnerId:n,selectedVendorName:u,allAccounts:c,allClasses:b,allOwners:w,sectionId:x,isDisabled:p,accountsHierarchyList:h,classHierarchyList:S})=>{const r=e.useWindowSizeContext(),f=o.useTheme(),C=P.labelWidth.value(r),$=P.controlWidth.value(r),E=s=>c.filter(y=>y.accountId===s)[0]?.coaId??"",i=s=>b.filter(y=>y.classId===s)[0]?.accountingClassNumber??"",v=s=>{const z=c.find(y=>y.accountId===s)?.accountName;return[e.UNCATEGORIZED_INCOME,e.UNCATEGORIZED_EXPENSE].includes(z??"")};return o.jsxRuntimeExports.jsxs(F,{"data-testid":e.generateDataTestId("vendor-details-section",x),children:[o.jsxRuntimeExports.jsx(M,{children:a.vendorDetails.title}),o.jsxRuntimeExports.jsxs(V,{children:[o.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:a.vendorDetails.vendorName,width:C},text:{type:"text",name:R(x,"vendorName"),placeholder:a.placeholders.vendor,defaultValue:u,autoComplete:"off",options:{required:!0}},isSaveError:l,showAdditionalInfoLabel:!1,additionalInfoLabel:a.vendorAlreadyExistsErrorMsg,style:{width:"auto"}}),o.jsxRuntimeExports.jsx(A,{}),o.jsxRuntimeExports.jsx(e.LabeledGroupSingleSelectWithRecommendationCheckboxField,{isLoading:!1,label:{label:a.vendorDetails.vendorCategory,width:C},groupedSingleSelectField:{shouldShowChevronIcon:!1,name:R(x,"vendorCategory"),placeholder:a.placeholders.category,valueToInfo:s=>E(s),defaultValue:{selectedOption:t,allOptions:e.getGroupedCategories(h)},style:{width:"auto"},registerOptions:{required:!1}},style:{borderBottom:`1px solid ${f.colors.grey3}`},isDisabled:p,disableCurrentOption:v,zIndexOnFocus:!0,additionalLabelInfo:a.vendorDetails.vendorCategoryAdditionText}),o.jsxRuntimeExports.jsx(e.LabeledGroupSingleSelectWithRecommendationCheckboxField,{isLoading:!1,label:{label:a.vendorDetails.vendorClass,width:C},zIndexOnFocus:!0,groupedSingleSelectField:{shouldShowChevronIcon:!1,name:R(x,"vendorClass"),placeholder:a.placeholders.class,valueToInfo:s=>i(s),defaultValue:{selectedOption:g,allOptions:e.getGroupedClasses(S)},registerOptions:{required:!1},style:{width:"auto"}},additionalLabelInfo:a.vendorDetails.vendorClassAdditionText,style:{borderBottom:`1px solid ${f.colors.grey3}`},isDisabled:p}),w!=null?o.jsxRuntimeExports.jsx(e.LabeledUserSingleSelectField,{label:{label:a.vendorDetails.vendorOwner,width:C},userSingleSelectField:{name:R(x,"vendorOwner"),placeholder:a.placeholders.owner,defaultValue:{allOptions:e.getFormattedOwnersList(w),selectedOption:n},registerOptions:{required:!1},style:{width:"auto"},menuPlacement:"top"},isDisabled:p,style:{justifyContent:"space-between"},controlWidth:$}):null]})]})},F=d.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${e.Space.sp3};
+  padding-bottom: ${e.Space.sp3};
+`,M=d(e.LargeSemiBold)`
+  color: ${t=>t.theme.colors.primary};
+  margin-bottom: ${e.Space.sp3};
+  margin-right: ${e.Space.sp6};
+`,V=d.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+`,A=d.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,I="vendorDetails",B=({id:t,allAccounts:l,allClasses:g,allOwners:n,selectedVendor:u,formLocalData:c,isDisabled:b,onSaveVendor:w,saveVendorDetailLocalData:x,accountsHierarchyList:p,classHierarchyList:h})=>{const S=o.useForm({mode:"all",reValidateMode:"onChange",defaultValues:q(p,h,n,c)}),[r,f]=j.useState(!1),C=i=>{i.preventDefault(),S.getValues().vendorDetails.vendorName!==""&&r===!1&&w?.()},$=(i,v)=>{const s=W(i,void 0);x?.(s)},E=async(i,v)=>{(i.includes("vendorName")||i.includes("vendorOwner")||i.includes("vendorClass")||i.includes("vendorCategory"))&&($(v),r===!0&&i.includes("vendorName")&&f(!1))};return j.useEffect(()=>{const i=S.watch((v,{name:s})=>{s!=null&&v!=null&&o.defer(()=>E(s,v))});return()=>{i.unsubscribe()}}),j.useEffect(()=>{u.saveStatus.fetchState==="Error"&&u.saveStatus.error?.code===409&&f(!0)},[u.saveStatus]),o.jsxRuntimeExports.jsx(o.FormProvider,{...S,children:o.jsxRuntimeExports.jsx("form",{id:t,onSubmit:C,children:o.jsxRuntimeExports.jsx(D,{sectionId:I,selectedVendorDetails:u,isSaveError:r,selectedAccountId:c?.vendorCategory,selectedClassId:c?.vendorClass,selectedOwnerId:c?.vendorOwner,allAccounts:l??[],allClasses:g??[],selectedVendorName:c?.vendorName,allOwners:n,isDisabled:b,accountsHierarchyList:p,classHierarchyList:h})})})},q=(t,l,g,n)=>({[I]:{vendorName:n?.vendorName??"",vendorOwner:{allOptions:e.getFormattedOwnersList(g),selectedOption:n?.vendorOwner},vendorCategory:{allOptions:e.getGroupedCategories(t),selectedOption:n?.vendorCategory},vendorClass:{allOptions:e.getGroupedClasses(l),selectedOption:n?.vendorClass}}});function W(t,l,g){const n=t?.[I];return{vendorCategory:n.vendorCategory.selectedOption,vendorClass:n.vendorClass.selectedOption,vendorId:l,vendorName:n.vendorName,vendorOwner:n.vendorOwner?.selectedOption}}const m={containerPaddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[3],e.sp[6]),containerPaddingRight:new e.ResponsiveSized(e.sp[3],e.sp[3],e.sp[8]),containerMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2],e.sp[4]),navbarContainerPaddingTop:new e.ResponsiveSized(e.sp[3],e.sp[3]),navbarContainerPaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[3]),SectionTitleMarginTop:new e.ResponsiveSized(0,e.sp[3])},T={sectionTitle:new e.ResponsiveSizedStyle("h6Regular","h5Medium"),sectionTitleLineHeight:new e.ResponsiveSized(30,40)},k=d.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+`,G=d.div`
+  margin-top: ${t=>m.containerMarginTop.valuePx(t.windowSize)};
+  padding-left: ${t=>m.containerPaddingLeft.valuePx(t.windowSize)};
+  padding-right: ${t=>m.containerPaddingRight.valuePx(t.windowSize)};
+`,U=d.div`
+  display: flex;
+  flex: 1 1 auto;
+  height: 100vh;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+`,H=d.div`
+  background-color: ${t=>t.theme.colors.grey4};
+  flex: 1;
+`,_=d.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: ${e.Space.sp0};
+  z-index: 2;
+  padding-left: ${t=>m.containerPaddingLeft.valuePx(t.windowSize)};
+  padding-right: ${t=>m.containerPaddingRight.valuePx(t.windowSize)};
+  padding-top: ${t=>m.navbarContainerPaddingTop.valuePx(t.windowSize)};
+  padding-bottom: ${t=>m.navbarContainerPaddingBottom.valuePx(t.windowSize)};
+  background-color: ${t=>t.theme.colors.grey4};
+`,Z=d.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: 3px;
+  margin-bottom: 3px;
+`,X=d(e.SvgClose)`
+  cursor: pointer;
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,J=d(e.H5Medium)`
+  display: flex;
+  width: 100%;
+  color: ${t=>t.theme.colors.primary};
+  margin-top: ${t=>m.SectionTitleMarginTop.valuePx(t.windowSize)};
+  ${t=>`${T.sectionTitle.style(t.windowSize)}`};
+  margin-left: ${t=>t.windowSize==="small"?e.Space.sp3:0};
+  line-height: ${t=>T.sectionTitleLineHeight.valuePx(t.windowSize)};
+`,L="vendorDetailPage",O=t=>`${t}_form`,K=({vendorDetailView:t,onSaveSuccess:l,onCancelClick:g,onSaveVendor:n,saveVendorDetailLocalData:u})=>{const{editVendorState:c,newVendorState:b,accountsHierarchyList:w,classHierarchyList:x}=t,p=e.useWindowSizeContext(),{footer:h,newVendor:S}=e.appLocale.getLocalizedStrings().transactionDetail.vendorDetails.createVendor,r=Object.assign({},c??b);if(j.useEffect(()=>{r?.saveStatus?.fetchState==="Completed"&&l?.()},[r]),t.fetchState==="Not-Started"||t.fetchState==="In-Progress")return o.jsxRuntimeExports.jsx(U,{children:o.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraLarge",start:!0})});const f=r.saveStatus?.fetchState==="In-Progress";return o.jsxRuntimeExports.jsxs(k,{windowSize:p,"data-testid":e.generateDataTestId("transaction-vendor-detail-page"),children:[o.jsxRuntimeExports.jsxs(_,{windowSize:p,children:[o.jsxRuntimeExports.jsx(Z,{children:o.jsxRuntimeExports.jsx(X,{onClick:g,"data-testid":e.generateDataTestId("close-icon")})}),o.jsxRuntimeExports.jsx(J,{windowSize:p,children:S})]}),o.jsxRuntimeExports.jsx(H,{children:o.jsxRuntimeExports.jsx(G,{windowSize:p,"data-testid":e.generateDataTestId("vendor-detail-page-form"),children:o.jsxRuntimeExports.jsx(B,{id:O(L),allAccounts:t.accountList.accounts,allClasses:t.classList.classes,allOwners:t.ownerList,selectedVendor:r,formLocalData:r.vendorDetailLocalData,onSaveVendor:n,saveVendorDetailLocalData:u,accountsHierarchyList:w,classHierarchyList:x})})}),o.jsxRuntimeExports.jsx(e.Footer,{formId:O(L),primaryBtn:{label:h.save,isLoading:f},cancelBtn:{label:h.cancel,shouldResetOnCancel:!0,onClick:g}})]})};exports.default=K;exports.formUniqueName=O;