@zeniai/web-components 3.17.23 → 3.17.24

package/dist/CreateOrEditVendorPage-CC5jroI_.js

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