@zeniai/web-components 3.16.80 → 3.16.81

package/dist/CreateOrEditVendorPage-hEPeylx6.js

@@ -0,0 +1,755 @@
+import { j as t, u as Ye, k as U, b5 as qe } from "./vendor-.pnpm-DtFedGku.js";
+import { useState as j, useRef as te, useEffect as Ge } from "react";
+import n from "@emotion/styled";
+import { u as w, a as h, p as Q, Z as S, j as $, S as o, C as D, fs as se, G as ae, z as ce, aP as le, aQ as de, aR as pe, L as me, _ as ue, w as he, a3 as Qe, aE as Ze, A as Je, ft as Ke, ap as Xe, R as _, F as et, fu as tt, D as b } from "./index-DdY07evx.js";
+const ot = ({
+  bankAccountNumberOrIban: e,
+  accountNumberOrIbanLabel: i,
+  bankName: a,
+  routingNumberOrSwiftCode: l,
+  accountName: u,
+  routingNumberOrSwiftCodeLabel: m,
+  onDeleteClick: y
+}) => {
+  const v = w(), p = h.getLocalizedStrings().spendManagement.billPay.vendorCreation, g = /* @__PURE__ */ t.jsxs(nt, { children: [
+    /* @__PURE__ */ t.jsxs(H, { children: [
+      /* @__PURE__ */ t.jsx(Y, { children: m }),
+      /* @__PURE__ */ t.jsx(q, { children: l })
+    ] }),
+    /* @__PURE__ */ t.jsxs(H, { children: [
+      /* @__PURE__ */ t.jsx(Y, { children: p.achDetails.bankName }),
+      /* @__PURE__ */ t.jsx(q, { children: a })
+    ] }),
+    /* @__PURE__ */ t.jsxs(H, { children: [
+      /* @__PURE__ */ t.jsx(Y, { children: i }),
+      /* @__PURE__ */ t.jsx(q, { children: e })
+    ] })
+  ] });
+  return /* @__PURE__ */ t.jsxs(at, { size: v, children: [
+    /* @__PURE__ */ t.jsxs(it, { children: [
+      /* @__PURE__ */ t.jsxs(Q, { children: [
+        `${a} ${p.paymentAccountDetailConnector} ${e.slice(-4)}`,
+        /* @__PURE__ */ t.jsx(S, { title: g, placement: "top", children: /* @__PURE__ */ t.jsx(lt, { children: /* @__PURE__ */ t.jsx(dt, {}) }) })
+      ] }),
+      /* @__PURE__ */ t.jsx(rt, { children: u ?? p.emptyPlaceholderString })
+    ] }),
+    /* @__PURE__ */ t.jsx(st, { children: /* @__PURE__ */ t.jsx(
+      S,
+      {
+        enterDelay: 600,
+        display: "flex",
+        title: p.deleteAccountTooltip,
+        placement: "top",
+        children: /* @__PURE__ */ t.jsx(
+          ct,
+          {
+            onClick: (f) => {
+              f.stopPropagation(), y();
+            },
+            "data-testid": $(
+              "delete-vendor-account-section",
+              u
+            ),
+            children: /* @__PURE__ */ t.jsx(pt, {})
+          }
+        )
+      }
+    ) })
+  ] });
+}, nt = n.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${o.sp1};
+`, H = n.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`, Y = n.div`
+  box-sizing: border-box;
+  text-align: left;
+  flex: 1 0 50%;
+  color: ${D.heroDark};
+`, q = n.div`
+  box-sizing: border-box;
+  text-align: right;
+  word-break: break-word;
+  color: ${(e) => e.theme.colors.brandColorPearl};
+`, rt = n(ae)`
+  color: ${(e) => e.theme.colors.grey1};
+`, it = n.div`
+  display: flex;
+  flex-direction: column;
+`, st = n.div`
+  margin-top: ${o.sp0};
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp5};
+`, at = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: ${o.sp2};
+  margin-bottom: ${o.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  &:hover {
+    cursor: pointer;
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    svg {
+      display: block;
+    }
+  }
+  border-radius: ${o.sp2};
+  padding: ${o.sp3} ${o.sp4};
+  color: ${(e) => e.theme.colors.primary};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, ct = n.div`
+  width: ${o.sp3};
+`, lt = n.div`
+  display: flex;
+  width: ${o.sp3};
+  transform: translate(${o.sp2}, 2px);
+  height: ${o.sp3};
+`, dt = n(se)`
+  cursor: pointer;
+  height: ${o.sp3};
+  width: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, pt = n(ce)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${D.important};
+  }
+`, mt = ({
+  paymentInstrument: e,
+  onDeleteClick: i
+}) => {
+  const a = w(), l = h.getLocalizedStrings().spendManagement.billPay.vendorCreation, u = /* @__PURE__ */ t.jsx(ut, { children: e.piLabels.map((m) => /* @__PURE__ */ t.jsxs(ht, { children: [
+    /* @__PURE__ */ t.jsxs(gt, { children: [
+      m.name,
+      l.colon
+    ] }),
+    /* @__PURE__ */ t.jsx(xt, { children: m.value })
+  ] }, m.name)) });
+  return /* @__PURE__ */ t.jsxs(bt, { size: a, children: [
+    /* @__PURE__ */ t.jsx($t, { children: /* @__PURE__ */ t.jsxs(Q, { children: [
+      e.displayText,
+      /* @__PURE__ */ t.jsx(S, { title: u, placement: "top", children: /* @__PURE__ */ t.jsx(yt, { children: /* @__PURE__ */ t.jsx(vt, {}) }) })
+    ] }) }),
+    /* @__PURE__ */ t.jsx(ft, { children: /* @__PURE__ */ t.jsx(
+      S,
+      {
+        enterDelay: 600,
+        display: "flex",
+        title: l.deleteAccountTooltip,
+        placement: "top",
+        children: /* @__PURE__ */ t.jsx(
+          wt,
+          {
+            onClick: (m) => {
+              m.stopPropagation(), i();
+            },
+            "data-testid": $(
+              "delete-vendor-international-account-section",
+              e.paymentInstrumentId
+            ),
+            children: /* @__PURE__ */ t.jsx(Ct, {})
+          }
+        )
+      }
+    ) })
+  ] });
+}, ut = n.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${o.sp1};
+`, ht = n.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`, gt = n.div`
+  box-sizing: border-box;
+  text-align: left;
+  flex: 1 0 50%;
+  color: ${D.heroDark};
+`, xt = n.div`
+  box-sizing: border-box;
+  text-align: right;
+  word-break: break-word;
+  color: ${(e) => e.theme.colors.brandColorPearl};
+`, $t = n.div`
+  display: flex;
+  flex-direction: column;
+`, ft = n.div`
+  margin-top: ${o.sp0};
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp5};
+`, bt = n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: ${o.sp2};
+  margin-bottom: ${o.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  &:hover {
+    cursor: pointer;
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    svg {
+      display: block;
+    }
+  }
+  border-radius: ${o.sp2};
+  padding: ${o.sp3} ${o.sp4};
+  color: ${(e) => e.theme.colors.primary};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, wt = n.div`
+  width: ${o.sp3};
+`, yt = n.div`
+  display: flex;
+  width: ${o.sp3};
+  transform: translate(${o.sp2}, 2px);
+  height: ${o.sp3};
+`, vt = n(se)`
+  cursor: pointer;
+  height: ${o.sp3};
+  width: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ct = n(ce)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${D.important};
+  }
+`, ge = (e, i) => {
+  const a = h.getLocalizedStrings().spendManagement.billPay.vendorCreation;
+  switch (e) {
+    case "ach":
+      return a.achDetails.ach;
+    case "wire":
+      switch (i) {
+        case "us-domestic":
+          return a.wireDetails.domestic.domestic;
+        case "international":
+          return a.wireDetails.international.international;
+        default:
+          return "";
+      }
+    default:
+      return "";
+  }
+}, G = ({
+  type: e,
+  subType: i,
+  vendorAccountDetails: a,
+  vendorAccountDetailsInternational: l,
+  onRemoveBankAccount: u,
+  onAddNewAccountDetailClick: m
+}) => {
+  const y = w(), [v, p] = j(!1), [g, f] = j(""), [P, L] = j(!1), d = h.getLocalizedStrings().spendManagement.billPay.vendorCreation, A = (s) => {
+    f(s), p(!0);
+  }, N = {
+    onOkClick: () => {
+      p(!1), u(g, P);
+    },
+    onCancelClick: () => {
+      p(!1), f("");
+    }
+  }, T = (s) => e === "ach" || e === "wire" && i === "us-domestic" ? s.bankAccountNumber : e === "wire" && i === "international" ? s.bankAccountIban ?? "" : "", z = (s) => e === "ach" ? s.bankRoutingNumberAch : e === "wire" && i === "us-domestic" ? s.bankRoutingNumberWireTransfer : e === "wire" && i === "international" ? s.bankSwiftCode ?? "" : "", B = () => e === "ach" ? d.achDetails.bankRoutingNumber : e === "wire" && i === "us-domestic" ? d.wireDetails.bankRoutingNumber : e === "wire" && i === "international" ? d.wireDetails.international.swiftCode : "", R = () => e === "ach" ? d.achDetails.bankAccountNumber : e === "wire" && i === "us-domestic" ? d.wireDetails.accountNumber : e === "wire" && i === "international" ? d.wireDetails.international.iban : "";
+  return /* @__PURE__ */ t.jsxs(It, { children: [
+    v === !0 ? /* @__PURE__ */ t.jsx(
+      le,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(pe, { children: d.areYOuSure }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(de, { children: d.ifYouSubmit }),
+        primaryButtonText: d.delete,
+        secondaryButtonText: d.cancel,
+        action: N,
+        isEditPopup: !0,
+        proceedButtonVariant: "danger"
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(kt, { windowSize: y, children: `${ge(e, i)} ${d.accountsLabel}` }),
+    a?.map((s) => /* @__PURE__ */ t.jsx(oe, { children: /* @__PURE__ */ t.jsx(
+      ot,
+      {
+        bankName: s.bankName,
+        bankAccountNumberOrIban: T(
+          s
+        ),
+        routingNumberOrSwiftCode: z(
+          s
+        ),
+        routingNumberOrSwiftCodeLabel: B(),
+        accountNumberOrIbanLabel: R(),
+        accountName: s.bankAccountName,
+        onDeleteClick: () => A(s.bankAccountId)
+      }
+    ) }, s.bankAccountId)),
+    l?.map((s) => /* @__PURE__ */ t.jsx(oe, { children: /* @__PURE__ */ t.jsx(
+      mt,
+      {
+        paymentInstrument: s,
+        onDeleteClick: () => {
+          L(!0), A(s.paymentInstrumentId);
+        }
+      }
+    ) }, s.paymentInstrumentId)),
+    /* @__PURE__ */ t.jsx(
+      jt,
+      {
+        onAddAccountDetailsSection: m,
+        type: e,
+        subType: i
+      }
+    )
+  ] });
+}, jt = ({
+  onAddAccountDetailsSection: e,
+  type: i,
+  subType: a
+}) => {
+  const l = w(), u = h.getLocalizedStrings().spendManagement.billPay;
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs(
+    At,
+    {
+      windowSize: l,
+      onClick: e,
+      "data-testid": $("add-vendor-account", i),
+      children: [
+        /* @__PURE__ */ t.jsx(St, {}),
+        /* @__PURE__ */ t.jsx(ue, { children: `${u.vendorCreation.addPrefix} ${ge(
+          i,
+          a
+        )}` })
+      ]
+    }
+  ) });
+}, St = n(he)`
+  margin-right: ${o.sp2};
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, At = n.div`
+  padding: ${o.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  margin-top: ${o.sp2};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, kt = n(me)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${o.sp2};
+`, oe = n.div``, It = n.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp2};
+  padding-bottom: ${o.sp2};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp3};
+`, Dt = ({
+  addressState: e,
+  onUpdateMailingAddress: i
+}) => {
+  const a = w(), l = h.getLocalizedStrings().spendManagement.billPay.vendorCreation;
+  return /* @__PURE__ */ t.jsxs(Ot, { children: [
+    /* @__PURE__ */ t.jsxs(Vt, { windowSize: a, children: [
+      `${l.mailingAddressLabel}`,
+      /* @__PURE__ */ t.jsx(Rt, { children: `${l.mailingAddressPlaceholder}` })
+    ] }),
+    e != null ? /* @__PURE__ */ t.jsxs(Bt, { children: [
+      Pt(e),
+      /* @__PURE__ */ t.jsx(
+        S,
+        {
+          enterDelay: 600,
+          display: "flex",
+          title: l.editMailingAddressTooltip,
+          placement: "top",
+          children: /* @__PURE__ */ t.jsx(
+            Lt,
+            {
+              "data-testid": $("edit-vendor-mailing-address"),
+              onClick: () => i("vendor_address"),
+              children: /* @__PURE__ */ t.jsx(Nt, {})
+            }
+          )
+        }
+      )
+    ] }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs(
+      zt,
+      {
+        windowSize: a,
+        "data-testid": $("add-vendor-mailing-address"),
+        onClick: () => i("vendor_address"),
+        children: [
+          /* @__PURE__ */ t.jsx(Tt, {}),
+          /* @__PURE__ */ t.jsx(ue, { children: l.addMailingAddress })
+        ]
+      }
+    ) })
+  ] });
+}, Pt = (e) => [
+  e.street[2],
+  e.street[0],
+  e.street[1],
+  e.city,
+  `${e.state} ${e.postalCode}`.trim(),
+  e.countryCode ?? e.country
+].filter(Boolean).join(", "), Lt = n.div`
+  width: ${o.sp3};
+  svg {
+    display: none;
+  }
+`, Nt = n(Qe)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Tt = n(he)`
+  margin-right: ${o.sp2};
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, zt = n.div`
+  padding: ${o.sp3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  margin-top: ${o.sp2};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, Bt = n(Q)`
+  margin-top: ${o.sp2};
+  padding: ${o.sp3} ${o.sp4};
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    border: 1px solid ${(e) => e.theme.colors.primary};
+    svg {
+      display: block;
+    }
+  }
+`, Rt = n(ae)`
+  color: ${(e) => e.theme.colors.grey1};
+  transform: translateY(${o.sp1});
+`, Vt = n(me)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${o.sp2};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: ${o.sp3};
+`, Ot = n.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp2};
+  padding-bottom: ${o.sp2};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp3};
+`, ne = "createVendorPage", re = (e) => `${e}_form`, I = {
+  containerPaddingLeft: new _(b[3], b[6], b[6]),
+  containerPaddingRight: new _(b[3], b[6], b[8]),
+  buttonWidth: new _(125, 125)
+}, Et = n.div`
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+`, Mt = n.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  padding-left: ${(e) => `${I.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${(e) => `${I.containerPaddingRight.valuePx(e.windowSize)}`};
+  overflow: auto;
+`, Wt = n.div`
+  display: flex;
+  flex: 1 1 auto;
+  height: 100vh;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, Ft = n(tt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${o.sp3};
+  margin-top: ${o.sp3};
+`, Ut = n(et)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, _t = n.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${o.sp11};
+`, x = h.getLocalizedStrings().spendManagement.billPay.vendorCreation, Ht = h.getLocalizedStrings().common.footer, ie = h.getLocalizedStrings().common.currency, Zt = ({
+  vendorViewDetails: e,
+  vendorId: i,
+  screenType: a,
+  analytics: l,
+  filesEndPoint: u,
+  authParams: m,
+  vendorSearchAutoCompleteData: y,
+  vendorSearchAutoCompleteActions: v,
+  isLocalCurrencyEnabled: p,
+  onBackClick: g,
+  onVendorSelected: f,
+  navigateToBankDetailPage: P,
+  updateSelectedVendorForCreate: L,
+  onRemoveBankAccount: d,
+  updateSaveFetchState: A,
+  onSaveVendor: N,
+  navigateToMailingAddressPage: T,
+  saveVendorDetailLocalData: z,
+  resetVendorDetailLocalData: B,
+  saveContactsInVendorDetailLocalData: R,
+  updateFilesEntity: s,
+  onEditFileName: xe,
+  onFetchAndUpdateVendorRecommendations: $e
+}) => {
+  const {
+    accountList: { accounts: fe },
+    classList: { classes: be },
+    vendorTypeList: we,
+    ownerList: ye,
+    editVendorState: V,
+    newVendorState: Z,
+    fetchState: ve,
+    hasWireTransfer: J,
+    hasInternationalWireTransfer: O,
+    deleteFileStatusById: Ce,
+    updateFileStatusById: je,
+    accountsHierarchyList: Se,
+    classHierarchyList: Ae
+  } = e, k = i != null ? V?.vendorDetailLocalData : Z?.vendorDetailLocalData, c = Object.assign(
+    {},
+    V ?? Z
+  ), ke = Ye(), C = w(), [Ie, E] = j(!1), [De, M] = j(!1), K = a === "create" ? x.newVendorTitle : x.editVendor, Pe = (c.bankAccountsUpdated ?? []).map((r) => r.bankAccountId).sort(), Le = (c.vendorBasic?.bankAccounts ?? []).map((r) => r.bankAccountId).sort(), Ne = !U(
+    Pe,
+    Le
+  ), Te = (c.paymentInstrumentsUpdated ?? []).map(
+    (r) => r.paymentInstrumentId
+  ).sort(), ze = (c.vendorBasic?.paymentInstruments ?? []).map(
+    (r) => r.paymentInstrumentId
+  ).sort(), Be = !U(
+    Te,
+    ze
+  ), Re = (k?.contacts ?? []).filter(
+    (r) => r.email !== "" || r.fullName !== "" || r.phone !== ""
+  ).map((r) => qe(r, "contactInfoType")), Ve = c.vendorBasic?.contacts ?? [], Oe = !U(Re, Ve), Ee = c.bankAccountsUpdated.filter(
+    (r) => !!r.bankRoutingNumberAch
+  ), Me = c.bankAccountsUpdated.filter(
+    (r) => !!r.bankRoutingNumberWireTransfer
+  ), We = c.paymentInstrumentsUpdated.filter(
+    (r) => !!r.piNumber
+  ), X = () => {
+    M(!0);
+  }, Fe = (r) => {
+    E(r);
+  }, Ue = {
+    onOkClick: () => {
+      M(!1), E(!1), B?.(), g();
+    },
+    onCancelClick: () => {
+      M(!1), E(!1);
+    }
+  }, W = te(null), _e = (r) => {
+    W.current?.syncFormData(), T(r);
+  }, F = (r, He) => {
+    W.current?.syncFormData(), P(r, He);
+  };
+  Ge(() => {
+    c?.saveStatus?.fetchState === "Completed" && (A(), g());
+  }, [c]);
+  const ee = te(null);
+  return /* @__PURE__ */ t.jsxs(Et, { windowSize: C, children: [
+    /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        "data-testid": $("vendor-detail-container-nav-bar"),
+        title: K,
+        backgroundColor: ke.colors.grey4,
+        leftSideComponent: /* @__PURE__ */ t.jsx(
+          Ut,
+          {
+            onClick: X,
+            "data-testid": $("create-edit-vendor-nav-bar-back")
+          }
+        ),
+        enableTitleOnScroll: !0,
+        scrollableContent: ee,
+        source: "CreateOrEditVendorPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Mt, { windowSize: C, ref: ee, children: [
+      ve === "In-Progress" ? /* @__PURE__ */ t.jsx(Wt, { children: /* @__PURE__ */ t.jsx(Je, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        Ie === !0 ? /* @__PURE__ */ t.jsx(
+          le,
+          {
+            titleComponent: /* @__PURE__ */ t.jsx(pe, { children: x.discardTitle }),
+            descriptionComponent: /* @__PURE__ */ t.jsx(de, { children: x.discardDescription }),
+            primaryButtonText: x.discard,
+            secondaryButtonText: x.cancel,
+            action: Ue
+          }
+        ) : null,
+        C !== "small" ? /* @__PURE__ */ t.jsx(Ft, { children: K }) : null,
+        /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            ref: W,
+            id: re(ne),
+            allAccounts: fe,
+            allClasses: be,
+            accountsHierarchyList: Se,
+            classHierarchyList: Ae,
+            vendorTypeList: we,
+            allOwners: ye,
+            vendorSearchAutoCompleteData: y,
+            vendorSearchAutoCompleteActions: v,
+            onVendorSelected: f,
+            screenType: a,
+            hasInternationalWireTransfer: O,
+            selectedVendor: c,
+            formLocalData: k,
+            isBankAccountChanged: Ne,
+            isContactListChanged: Oe,
+            isPaymentInstrumentChanged: Be,
+            analytics: l,
+            pageBackBtnClicked: De,
+            onBackClick: g,
+            onSaveVendor: N,
+            saveContactsInVendorDetailLocalData: R,
+            updateSelectedVendorForCreate: L,
+            saveVendorDetailLocalData: z,
+            updateFilesEntity: s,
+            toggleConfirmationPopup: Fe,
+            filesEndPoint: u,
+            authParams: m,
+            onEditFileName: xe,
+            deleteFileStatusById: Ce,
+            updateFileStatusById: je,
+            onFetchAndUpdateVendorRecommendations: $e,
+            isLocalCurrencyEnabled: p
+          }
+        ),
+        J || O ? /* @__PURE__ */ t.jsx(
+          Dt,
+          {
+            addressState: c.vendorNewAddressStatus?.addressToCreate,
+            onUpdateMailingAddress: _e
+          }
+        ) : null,
+        c.vendorDetailLocalData?.currencyCode == null || c.vendorDetailLocalData?.currencyCode === ie.currencyCode ? /* @__PURE__ */ t.jsx(
+          G,
+          {
+            type: "ach",
+            vendorAccountDetails: Ee,
+            onAddNewAccountDetailClick: () => F("ach", "standard"),
+            onRemoveBankAccount: d
+          }
+        ) : null,
+        J && (c.vendorDetailLocalData?.currencyCode == null || c.vendorDetailLocalData?.currencyCode === ie.currencyCode) ? /* @__PURE__ */ t.jsx(
+          G,
+          {
+            type: "wire",
+            subType: "us-domestic",
+            vendorAccountDetails: Me,
+            onAddNewAccountDetailClick: () => F(
+              "wire",
+              "us-domestic"
+            ),
+            onRemoveBankAccount: d
+          }
+        ) : null,
+        O && (k?.countryCode != null && k.countryCode !== "US" || p) ? /* @__PURE__ */ t.jsx(
+          G,
+          {
+            type: "wire",
+            subType: "international",
+            vendorAccountDetailsInternational: We,
+            isLocalCurrencyEnabled: p,
+            onAddNewAccountDetailClick: () => F(
+              "wire",
+              "international"
+            ),
+            onRemoveBankAccount: d
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ t.jsx(_t, {})
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      Xe,
+      {
+        formId: re(ne),
+        primaryBtn: {
+          label: x.saveDetails,
+          isLoading: c.saveStatus?.fetchState === "In-Progress",
+          style: { width: I.buttonWidth.value(C) },
+          isDisabled: !1
+        },
+        cancelBtn: {
+          label: Ht.cancel,
+          style: { width: I.buttonWidth.value(C) },
+          shouldResetOnCancel: !1,
+          onClick: X
+        }
+      }
+    )
+  ] });
+};
+export {
+  Zt as default,
+  re as formUniqueName
+};