@zeniai/web-components 3.16.99 → 3.17.1

package/dist/CreateOrEditVendorPage-RymufHUF.js

@@ -0,0 +1,763 @@
+import { j as t, u as Ye, k as q, ax as qe } from "./vendor-.pnpm-B2klaOGU.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-DOPIZEh4.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
+};