@zeniai/web-components 3.16.73 → 3.16.74

package/dist/CreateOrEditVendorPage-CToibZxi.js

@@ -1,755 +0,0 @@
-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 Z, Z as S, j as $, S as o, C as D, fs as se, G as ae, z as ce, aN as le, aO as de, aP as pe, L as me, _ as ue, w as he, a3 as Ze, aE as Je, A as Ke, ft as Qe, ap as Xe, R as _, F as et, fu as tt, D as b } from "./index-BZH5WUM6.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(Z, { 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(Z, { 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(Ze)`
-  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(Z)`
-  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, Jt = ({
-  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: J,
-    fetchState: ve,
-    hasWireTransfer: K,
-    hasInternationalWireTransfer: O,
-    deleteFileStatusById: Ce,
-    updateFileStatusById: je,
-    accountsHierarchyList: Se,
-    classHierarchyList: Ae
-  } = e, k = i != null ? V?.vendorDetailLocalData : J?.vendorDetailLocalData, c = Object.assign(
-    {},
-    V ?? J
-  ), ke = Ye(), C = w(), [Ie, E] = j(!1), [De, M] = j(!1), Q = 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(
-      Je,
-      {
-        "data-testid": $("vendor-detail-container-nav-bar"),
-        title: Q,
-        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(Ke, { 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: Q }) : null,
-        /* @__PURE__ */ t.jsx(
-          Qe,
-          {
-            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
-          }
-        ),
-        K || 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,
-        K && (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 {
-  Jt as default,
-  re as formUniqueName
-};