@zeniai/web-components 3.17.1 → 3.17.2

package/dist/VendorInternationalWireDetailsPage-5aoJxFaD.js

@@ -1,968 +0,0 @@
-import { d as le, u as ae, m as ye, j as o, g as fe, h as xe, k as be, F as ve } from "./vendor-.pnpm-B2klaOGU.js";
-import { useMemo as Ce, useState as Z, useEffect as ie, useCallback as J } from "react";
-import y from "@emotion/styled";
-import { getFormattedAddress as K } from "@zeniai/client-epic-state";
-import { u as Q, e as $e, aB as U, R as i, C as W, D as t, A as Se, aw as we, S as m, Z as je, F as Fe, ag as Le, a as G, hh as De, hi as re, al as X, at as q, aS as Oe, fM as Te, aP as ze, aQ as Pe, aR as Re, ao as ke, dU as Ie, w as Me } from "./index-DOPIZEh4.js";
-import { B as Be, a as _e } from "./BankAccountWarningSection-aF1r11G6.js";
-import { M as Ae } from "./MailingDetailsSection-Bqq-sUiw.js";
-import { C as Ee } from "./CurrencySelectField-DV_CphBb.js";
-const T = {
-  width: new i(343, 580, 726),
-  height: new i(t[6], t[6]),
-  controlHeight: new i(t[6], t[6]),
-  paddingTopBottom: new i(t[2], t[2]),
-  marginTop: new i(t[2], t[2]),
-  marginBottom: new i(t[2], t[2]),
-  marginRight: new i(t[2], t[2]),
-  labelMarginLeft: new i(t[3], t[4]),
-  labelMarginRight: new i(t[3], t[4]),
-  labelMarginTop: new i(t[2], t[2])
-}, se = {
-  infoLabel: new we("extraSmallRegular", "smallRegular")
-};
-function We({
-  isDisabled: e,
-  label: n,
-  currencySelectField: l,
-  style: x,
-  errorInfoLabel: p,
-  isAdditionalInfoLabelLoading: r = !1,
-  showAdditionalLabelTooltip: a = !1,
-  additionalLabelTooltip: j,
-  additionalInfoLabel: C,
-  showAdditionalInfoLabel: D = !0
-}) {
-  const $ = Q(), {
-    formState: { errors: f }
-  } = le(), S = ae(), w = ye(f, l.name), h = () => {
-    if (r === !0)
-      return /* @__PURE__ */ o.jsx(Ge, { children: /* @__PURE__ */ o.jsx(Se, { size: "Small", start: !0 }) });
-    if (D && C || w) {
-      let u = null;
-      return a === !0 && D && j && (u = /* @__PURE__ */ o.jsx(
-        je,
-        {
-          placement: $ === "small" ? "bottom" : "right",
-          maxWidth: "364px",
-          title: /* @__PURE__ */ o.jsx(Ue, { children: j }),
-          children: /* @__PURE__ */ o.jsx(Ze, { children: /* @__PURE__ */ o.jsx(Je, {}) })
-        }
-      )), /* @__PURE__ */ o.jsxs(
-        Qe,
-        {
-          size: $,
-          isError: w,
-          hasToolTip: a,
-          isDisabled: e != null,
-          children: [
-            u,
-            C
-          ]
-        }
-      );
-    }
-  };
-  return /* @__PURE__ */ o.jsxs(
-    qe,
-    {
-      size: $,
-      style: x,
-      isDisabled: e != null,
-      isError: w,
-      "data-testid": $e(
-        "labeled-currency-field",
-        l.name
-      ),
-      children: [
-        /* @__PURE__ */ o.jsx(
-          U,
-          {
-            isDisabled: e,
-            label: n.label,
-            htmlFor: l.name,
-            style: {
-              marginLeft: T.labelMarginLeft.value($),
-              marginRight: T.labelMarginRight.value($),
-              marginTop: T.labelMarginTop.value($),
-              width: n.width ?? "auto",
-              color: e === "disabled" ? S.colors.grey2 : S.colors.hero
-            }
-          }
-        ),
-        /* @__PURE__ */ o.jsxs(Ne, { labelWidth: n.width, children: [
-          /* @__PURE__ */ o.jsx(
-            Ee,
-            {
-              ...l,
-              isDisabled: e,
-              style: {
-                display: "flex",
-                flexGrow: 1,
-                height: T.controlHeight.value($)
-              }
-            }
-          ),
-          w ? /* @__PURE__ */ o.jsx(He, { windowSize: $, hasError: w, children: p }) : null,
-          h()
-        ] })
-      ]
-    }
-  );
-}
-const qe = y.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => T.width.valuePx(e.size)};
-  min-height: ${(e) => T.height.valuePx(e.size)};
-  padding-right: ${(e) => T.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => T.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => T.paddingTopBottom.valuePx(e.size)};
-  :first-of-type {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  :first-of-type {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  &:focus-within {
-    z-index: 2;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-    .select-control {
-      background-color: ${(e) => e.isError ? W.importantLight : e.theme.colors.background};
-    }
-  }
-
-  .select-control {
-    background-color: ${(e) => e.isError ? W.importantLight : e.theme.colors.grey5};
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
-    .select-control {
-      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? W.importantLight : e.theme.colors.background};
-    }
-  }
-`, He = y.label`
-  color: ${(e) => e.hasError === !0 ? W.important : e.additionalInfoTextColor ?? e.theme.colors.grey1};
-  width: auto;
-  ${(e) => `${se.infoLabel.style(e.windowSize)}`};
-  padding-right: ${m.sp3};
-  text-align: right;
-`, Ne = y.div`
-  display: flex;
-  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
-  justify-content: flex-end;
-  flex-direction: column;
-  position: relative;
-`, Ue = y(Fe)`
-  padding: 12px;
-  color: ${(e) => e.theme.colors.grey1};
-  background: ${(e) => e.theme.colors.overlayColor};
-  border-radius: ${m.sp1};
-`, Ge = y.div`
-  padding-right: ${m.sp3};
-  padding-top: ${m.sp1};
-  display: flex;
-  justify-content: flex-end;
-`, Qe = y.label`
-  display: flex;
-  justify-content: flex-end;
-  color: ${(e) => e.isDisabled ? e.theme.colors.grey2 : e.isError ? W.important : e.theme.colors.hero};
-  ${(e) => `${se.infoLabel.style(e.size)}`};
-  padding-right: ${m.sp3};
-  text-align: right;
-  margin-top: ${(e) => e.hasToolTip === !0 ? m.sp1 : m.sp0};
-`, Ze = y.div`
-  display: flex;
-  margin-right: ${m.sp2};
-  margin-top: 2px;
-  align-items: center;
-`, Je = y(Le)`
-  width: ${m.sp3};
-  height: ${m.sp3};
-  color: inherit;
-`, L = {
-  largeLabelWidth: new i(120, 140, 220),
-  paddingTopBottom: new i(t[3], t[3]),
-  labelHeight: new i(t[6], t[6]),
-  labelMarginLeft: new i(t[3], t[4]),
-  labelMarginRight: new i(t[3], t[4]),
-  labelMarginTop: new i(t[2], t[2]),
-  controlHeight: new i(t[6], t[6]),
-  toolTipWidth: new i(60, 150)
-}, Ke = ({
-  dynamicFormFetchState: e,
-  dynamicFormConfig: n,
-  supportedAccountTypes: l,
-  supportedCountries: x,
-  supportedCurrencies: p,
-  wireAccountToCreate: r,
-  sectionId: a,
-  isCountryDropdownReadonly: j,
-  isCurrencyDropdownReadonly: C,
-  isDisabled: D,
-  style: $
-}) => {
-  const f = Q(), { getValues: S } = le(), w = ae(), h = G.getLocalizedStrings().spendManagement.billPay.vendorCreation.wireDetails, { international: u } = h, b = L.largeLabelWidth.value(f), R = r?.accountType?.type, F = r?.countryCode == null, _ = r?.currencyCode == null, O = ["phone", "email", "other"];
-  return /* @__PURE__ */ o.jsx(Xe, { style: $, children: /* @__PURE__ */ o.jsxs(Ye, { children: [
-    /* @__PURE__ */ o.jsx(
-      De,
-      {
-        isDisabled: j === !0 ? "readonly" : void 0,
-        label: {
-          label: u.country,
-          width: b
-        },
-        style: {
-          width: "auto"
-        },
-        countrySelectField: {
-          name: P(a, "vendorCountry"),
-          placeholder: u.countryPlaceholder,
-          defaultValue: re(
-            r?.countryCode,
-            x.map(
-              (d) => d.countryCode
-              // countryCode returned from platform is Alpha 2
-            )
-          ),
-          registerOptions: {
-            validate: (d) => !!(d != null && d.selectedOption)
-          }
-        },
-        additionalInfoLabel: h.international.countryAdditionalInfo
-      }
-    ),
-    /* @__PURE__ */ o.jsx(I, {}),
-    /* @__PURE__ */ o.jsx(
-      We,
-      {
-        isDisabled: F === !0 ? "disabled" : C === !0 ? "readonly" : void 0,
-        label: {
-          label: u.currency,
-          width: b
-        },
-        style: {
-          width: "auto"
-        },
-        currencySelectField: {
-          name: P(a, "vendorCurrency"),
-          placeholder: u.currencyPlaceholder,
-          defaultValue: {
-            allOptions: p.map((d) => ({
-              label: `${d.currencySymbol} - ${d.currencyName}`,
-              value: d.currencyCode,
-              countryCode: d.countryCode,
-              currency: d.currencyName
-            })),
-            selectedOption: r?.currencyCode
-          },
-          registerOptions: {
-            validate: (d) => !!(d != null && d.selectedOption)
-          }
-        },
-        additionalInfoLabel: h.international.currencyAdditionalInfo
-      }
-    ),
-    /* @__PURE__ */ o.jsx(I, {}),
-    _ !== !0 && e === "Completed" ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      /* @__PURE__ */ o.jsx(
-        X,
-        {
-          isDisabled: void 0,
-          label: {
-            label: u.typeOfAccount,
-            width: b
-          },
-          style: {
-            width: "auto"
-          },
-          singleSelectPickerField: {
-            name: P(a, "typeOfAccount"),
-            placeholder: u.typeOfAccountPlaceholder,
-            defaultValue: {
-              selectedOption: r?.accountType?.type,
-              allOptions: l.map((d) => ({
-                label: d.title,
-                value: d.type
-              }))
-            },
-            registerOptions: {
-              validate: (d) => !!(d != null && d.selectedOption)
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ o.jsx(I, {})
-    ] }) : null,
-    r != null && R != null && r.dynamicForm[R] != null && n.length > 0 ? Object.keys(
-      r.dynamicForm[R]
-    ).map((d) => {
-      const s = n.filter(
-        (B) => B.name === d
-      )[0], g = r.accountType?.type;
-      if (g != null && s != null) {
-        const B = r.dynamicForm[g][d];
-        switch (s.fieldType) {
-          case "text":
-            return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-              /* @__PURE__ */ o.jsx(
-                Oe,
-                {
-                  label: {
-                    label: s.label + u.colon,
-                    width: b
-                  },
-                  text: {
-                    type: "text",
-                    name: k(
-                      a,
-                      "dynamicForm",
-                      g,
-                      s.name
-                    ),
-                    placeholder: s.placeholder,
-                    defaultValue: B,
-                    options: {
-                      required: s.required,
-                      pattern: s.validationRegex != null ? new RegExp(s.validationRegex) : void 0,
-                      maxLength: s.maxLength,
-                      minLength: s.minLength
-                    }
-                  },
-                  isDisabled: D,
-                  style: { width: "auto" },
-                  showAdditionalInfoLabel: !1
-                },
-                k(
-                  a,
-                  "dynamicForm",
-                  g,
-                  s.name
-                )
-              ),
-              /* @__PURE__ */ o.jsx(I, {})
-            ] });
-          case "select":
-            return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-              /* @__PURE__ */ o.jsx(
-                X,
-                {
-                  isDisabled: void 0,
-                  label: {
-                    label: s.label + u.colon,
-                    width: b
-                  },
-                  style: {
-                    width: "auto"
-                  },
-                  singleSelectPickerField: {
-                    name: k(
-                      a,
-                      "dynamicForm",
-                      g,
-                      s.name
-                    ),
-                    placeholder: s.placeholder,
-                    defaultValue: {
-                      selectedOption: B,
-                      allOptions: s.valuesAllowed ?? []
-                    }
-                  }
-                },
-                k(
-                  a,
-                  "dynamicForm",
-                  g,
-                  s.name
-                )
-              ),
-              /* @__PURE__ */ o.jsx(I, {})
-            ] });
-          case "radio":
-            return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-              /* @__PURE__ */ o.jsxs(
-                Y,
-                {
-                  size: f,
-                  children: [
-                    /* @__PURE__ */ o.jsx(
-                      U,
-                      {
-                        label: s.label + u.colon,
-                        htmlFor: k(
-                          a,
-                          "dynamicForm",
-                          g,
-                          s.name
-                        ),
-                        style: {
-                          marginLeft: L.labelMarginLeft.value(f),
-                          marginRight: L.labelMarginRight.value(f),
-                          width: b
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ o.jsx(
-                      V,
-                      {
-                        labelWidth: b,
-                        size: f,
-                        children: s.valuesAllowed?.map((A) => /* @__PURE__ */ o.jsx(
-                          q,
-                          {
-                            label: {
-                              label: A.label
-                            },
-                            style: {
-                              paddingRight: `${m.sp4}`,
-                              width: "auto"
-                            },
-                            radioField: {
-                              name: k(
-                                a,
-                                "dynamicForm",
-                                g,
-                                s.name
-                              ),
-                              id: s.name,
-                              value: A.value,
-                              registerOptions: {
-                                required: !0
-                              }
-                            }
-                          },
-                          A.value
-                        ))
-                      }
-                    )
-                  ]
-                },
-                k(
-                  a,
-                  "dynamicForm",
-                  g,
-                  s.name
-                )
-              ),
-              /* @__PURE__ */ o.jsx(I, {})
-            ] });
-          default:
-            return null;
-        }
-      } else
-        return null;
-    }) : null,
-    /* @__PURE__ */ o.jsxs(Ve, { size: f, children: [
-      /* @__PURE__ */ o.jsxs(Y, { size: f, children: [
-        /* @__PURE__ */ o.jsx(
-          U,
-          {
-            label: u.addSource,
-            htmlFor: P(a, "source"),
-            style: {
-              marginLeft: L.labelMarginLeft.value(f),
-              marginRight: L.labelMarginRight.value(f),
-              width: b
-            },
-            showTooltip: !0,
-            tooltipTitle: u.sourceTooltip,
-            toolTipWidth: L.toolTipWidth.valuePx(f)
-          }
-        ),
-        /* @__PURE__ */ o.jsxs(V, { labelWidth: b, size: f, children: [
-          /* @__PURE__ */ o.jsx(
-            q,
-            {
-              label: {
-                label: u.phone
-              },
-              style: { paddingRight: `${m.sp4}`, width: "auto" },
-              isContainerClickable: !0,
-              radioField: {
-                name: P(a, "source"),
-                id: O[0],
-                value: O[0],
-                registerOptions: {
-                  required: !0
-                },
-                radioSize: "small"
-              }
-            }
-          ),
-          /* @__PURE__ */ o.jsx(
-            q,
-            {
-              label: {
-                label: u.email
-              },
-              style: { paddingRight: `${m.sp4}`, width: "auto" },
-              isContainerClickable: !0,
-              radioField: {
-                name: P(a, "source"),
-                id: O[1],
-                value: O[1],
-                registerOptions: {
-                  required: !0
-                },
-                radioSize: "small"
-              }
-            }
-          ),
-          /* @__PURE__ */ o.jsx(
-            q,
-            {
-              label: {
-                label: u.other
-              },
-              style: { width: "auto" },
-              isContainerClickable: !0,
-              radioField: {
-                name: P(a, "source"),
-                id: O[2],
-                value: O[2],
-                registerOptions: {
-                  required: !0
-                },
-                radioSize: "small"
-              }
-            }
-          )
-        ] })
-      ] }),
-      S(`${a}.source`) === "other" ? /* @__PURE__ */ o.jsx(
-        Te,
-        {
-          type: "text",
-          name: P(a, "otherSource"),
-          placeholder: u.sourcePlaceholder,
-          style: {
-            display: "flex",
-            flexGrow: 1,
-            cursor: "inherit",
-            height: m.sp7,
-            width: "calc(100% - largeLabelWidth)",
-            background: w.colors.background,
-            border: `1px solid ${w.colors.background}`,
-            marginLeft: b
-          },
-          registerOptions: {
-            required: !0,
-            validate: (d) => S(`${a}.source`) === "other" && !!d
-          }
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ o.jsx(I, {})
-  ] }) });
-}, P = (e, n) => `${e}.${n}`, k = (e, n, l, x) => `${e}.${n}.${l}.${x}`, Xe = y.div`
-  display: flex;
-  flex-direction: column;
-`, Ye = y.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${m.sp0} 2px ${m.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${m.sp2};
-`, I = y.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Ve = y.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding-right: ${(e) => L.labelMarginRight.valuePx(e.size)};
-  padding-top: ${(e) => L.labelMarginTop.valuePx(e.size)};
-  padding-bottom: ${(e) => L.paddingTopBottom.valuePx(e.size)};
-  &:hover {
-    z-index: 1;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-  }
-`, Y = y.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-height: ${(e) => L.labelHeight.valuePx(e.size)};
-  align-items: center;
-`, V = y.div`
-  display: flex;
-  flex-direction: row;
-  width: ${(e) => `calc(100% - ${e.labelWidth}px)`};
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-grow: 1;
-  height: ${(e) => L.controlHeight.valuePx(e.size)};
-  align-items: center;
-`, M = {
-  paddingTop: new i(t[2], t[3]),
-  paddingRight: new i(t[3], t[8]),
-  paddingBottom: new i(t[2], t[3]),
-  paddingLeft: new i(t[3], t[6]),
-  paddingTopBottomContainer: new i(t[3], t[3]),
-  paddingLeftContainer: new i(t[3], t[6]),
-  paddingRightContainer: new i(t[3], t[8]),
-  height: new i(t[6], t[6]),
-  controlHeight: new i(t[6], t[6]),
-  paddingTopBottom: new i(t[2], t[2]),
-  marginTop: new i(t[2], t[2]),
-  marginBottom: new i(t[2], t[3]),
-  marginRight: new i(t[2], t[2]),
-  marginLeft: new i(t[4], t[6]),
-  labelMarginLeft: new i(t[4], t[4]),
-  labelMarginRight: new i(t[4], t[4]),
-  labelMarginTop: new i(t[2], t[2]),
-  buttonWidth: new i(140, 140)
-}, ee = "internationalDetailsPage", v = "internationalWireSection", et = "mailingAddressSection", te = (e) => `${e}_form`, tt = ({
-  internationalWireView: e,
-  vendorType: n,
-  isCountryDropdownReadonly: l = !1,
-  isCurrencyDropdownReadonly: x = !1,
-  isDisabled: p,
-  addressType: r,
-  addressToEdit: a,
-  mailingAddress: j,
-  billAmount: C,
-  onAccountDetailsUpdated: D,
-  onCurrencyUpdated: $,
-  onSaveHandler: f,
-  onBackClick: S,
-  onAddressClick: w
-}) => {
-  const h = Q(), u = e.createInternationalWireDetails.localData, b = e.createInternationalWireDetails.createStatus, R = e.fetchState, F = fe({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: Ce(
-      () => oe(e),
-      [e]
-    ),
-    values: oe(e)
-  }), [_, O] = Z(!1), [d, s] = Z(!1), g = G.getLocalizedStrings().spendManagement.billPay.vendorCreation, B = G.getLocalizedStrings().common.footer, { international: A } = g.wireDetails, de = {
-    onOkClick: () => {
-      s(!1), F.reset(), S();
-    },
-    onCancelClick: () => {
-      s(!1);
-    }
-  }, ce = (c, z) => {
-    if (c.includes("account_holder_name") || c.includes("bank_account_iban") || c.includes("bank_swift_code") || c.includes("account_number") || c.includes("sort_code") || c.includes("ifsc_code") || c.includes("upi_id") || c.includes("contact_no") || c.includes("bank_code") || c.includes("institution_number") || c.includes("transit_number") || c.includes("identification_value") || c.includes("branch_code") || c.includes("clabe") || c.includes("bsb_code") || c.includes("proxy_value") || c.includes("php_e_wallet_no")) {
-      O(!0);
-      return;
-    }
-    const E = c === `${v}.vendorCountry`, N = c === `${v}.vendorCurrency`;
-    N && z[v].vendorCurrency.selectedOption != null && $(
-      z[v].vendorCurrency.selectedOption,
-      C,
-      n
-    );
-    const ge = { ...z }, me = ne(
-      ge,
-      e,
-      E,
-      N,
-      x
-    );
-    D(
-      me,
-      C,
-      n,
-      N || E
-    );
-  };
-  ie(() => {
-    const c = F.watch((z, { name: E }) => {
-      E != null && z != null && xe(() => ce(E, z));
-    });
-    return () => {
-      c.unsubscribe();
-    };
-  });
-  const H = J(() => {
-    const c = F.getValues(), z = ne(
-      c,
-      e,
-      !1,
-      // isCountryUpdated - not needed for final submission
-      !1,
-      // isCurrencyUpdated - not needed for final submission
-      x
-    );
-    D(
-      z,
-      C,
-      n,
-      !1
-      // isCountryOrCurrencyUpdated - not needed for final submission
-    ), O(!1);
-  }, [
-    F,
-    e,
-    x,
-    D,
-    C,
-    n
-  ]), ue = J(() => {
-    _ && H(), w(r);
-  }, [_, H, w, r]), pe = F.handleSubmit((c) => {
-    _ && H(), f();
-  }), he = !be(
-    j != null ? K(j) : j,
-    a != null ? K(a) : a
-  ) || // isBankAccountDataUnSaved(wireAccountToCreate) ||
-  F.formState.isDirty;
-  return /* @__PURE__ */ o.jsxs(at, { children: [
-    /* @__PURE__ */ o.jsxs(it, { size: h, children: [
-      d === !0 ? /* @__PURE__ */ o.jsx(
-        ze,
-        {
-          titleComponent: /* @__PURE__ */ o.jsx(Re, { children: g.discardTitle }),
-          descriptionComponent: /* @__PURE__ */ o.jsx(Pe, { children: g.discardDescription }),
-          primaryButtonText: g.discard,
-          secondaryButtonText: g.cancel,
-          action: de
-        }
-      ) : null,
-      /* @__PURE__ */ o.jsx(
-        Be,
-        {
-          header: A.addInternationalWireDetails,
-          isDirty: he,
-          onBackClick: S,
-          setShowConfirmationPopup: s
-        }
-      ),
-      b?.fetchState === "Error" && b.error?.code === 409 ? /* @__PURE__ */ o.jsx(
-        _e,
-        {
-          warningText: g.bankAccountCommon.accountExistWarning
-        }
-      ) : null,
-      /* @__PURE__ */ o.jsx(rt, { size: h, children: g.bankAccountCommon.accountDetailsTitle }),
-      /* @__PURE__ */ o.jsx(ve, { ...F, children: /* @__PURE__ */ o.jsxs("form", { id: te(ee), onSubmit: pe, children: [
-        /* @__PURE__ */ o.jsx(lt, { size: h, children: /* @__PURE__ */ o.jsx(
-          Ke,
-          {
-            wireAccountToCreate: u,
-            dynamicFormFetchState: R,
-            supportedAccountTypes: e.supportedAccountTypes,
-            supportedCountries: e.supportedCountries,
-            supportedCurrencies: e.supportedCurrencies,
-            dynamicFormConfig: e.dynamicForm,
-            sectionId: v,
-            isDisabled: p,
-            isCountryDropdownReadonly: l,
-            isCurrencyDropdownReadonly: x
-          }
-        ) }),
-        /* @__PURE__ */ o.jsx(
-          Ae,
-          {
-            sectionId: et,
-            isDisabled: p,
-            addressType: r,
-            addressToEdit: a,
-            onAddressClick: ue
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ o.jsx(
-      ke,
-      {
-        formId: te(ee),
-        primaryBtn: {
-          label: g.bankAccountCommon.saveAccount,
-          isLoading: b.fetchState === "In-Progress",
-          style: { width: M.buttonWidth.value(h) },
-          isDisabled: p != null
-        },
-        cancelBtn: {
-          label: B.cancel,
-          style: { width: M.buttonWidth.value(h) },
-          shouldResetOnCancel: !1,
-          onClick: () => {
-            F.formState.isDirty ? s(!0) : (F.reset(), S());
-          }
-        }
-      }
-    )
-  ] });
-}, ot = (e) => {
-  const n = e.dynamicForm, l = e.createInternationalWireDetails.localData?.dynamicForm, x = e.createInternationalWireDetails.localData?.accountType?.type;
-  let p = {};
-  return l != null && n.length > 0 ? (Object.keys(l).forEach((r) => {
-    r === x ? (p = {
-      ...p,
-      [r]: {}
-    }, Object.keys(l[r]).forEach((a) => {
-      n.find(
-        (C) => C.name === a
-      )?.fieldType === "select" ? p[r] = {
-        ...p[r],
-        [a]: {
-          selectedOption: l[r][a],
-          allOptions: n.find((C) => C.name === a)?.valuesAllowed ?? []
-        }
-      } : p[r] = {
-        ...p[r],
-        [a]: l[r][a]
-      };
-    })) : p = {
-      ...p,
-      [r]: {}
-    };
-  }), p) : {};
-}, oe = (e) => {
-  const n = e.createInternationalWireDetails.localData?.source;
-  return {
-    [v]: {
-      vendorCountry: re(
-        e.createInternationalWireDetails.localData?.countryCode,
-        e.supportedCountries.map(
-          (l) => l.countryCode
-        )
-        // countryCode returned from platform is Alpha 2
-      ),
-      vendorCurrency: {
-        allOptions: e.supportedCurrencies.map(
-          (l) => ({
-            label: `${l.currencyCode} - ${l.currencyName}`,
-            value: l.currencyCode,
-            countryCode: l.currencySymbol,
-            currency: l.currencyName
-          })
-        ),
-        selectedOption: e.createInternationalWireDetails.localData?.currencyCode
-      },
-      typeOfAccount: {
-        allOptions: e.supportedAccountTypes.map(
-          (l) => ({
-            label: l.title,
-            value: l.type
-          })
-        ),
-        selectedOption: e.createInternationalWireDetails.localData?.accountType?.type
-      },
-      dynamicForm: ot(e),
-      source: n != null && n !== "phone" && n !== "email" ? "other" : n,
-      otherSource: n != null && n !== "phone" && n !== "email" ? n : void 0
-    }
-  };
-}, nt = (e) => {
-  let n = {};
-  return Object.keys(e).forEach((l) => {
-    n = {
-      ...n,
-      [l]: typeof e[l] == "string" ? e[l] : e[l].selectedOption
-    };
-  }), n;
-}, ne = (e, n, l, x, p) => {
-  const r = n.createInternationalWireDetails.localData?.accountType?.type;
-  return {
-    dynamicForm: r != null ? {
-      ...n.createInternationalWireDetails.localData?.dynamicForm,
-      [r]: nt(
-        e[v].dynamicForm?.[r] ?? {}
-      )
-    } : n.createInternationalWireDetails.localData?.dynamicForm ?? {},
-    source: e[v].source === "other" ? e[v].otherSource ?? "" : e[v].source,
-    countryCode: e[v].vendorCountry.selectedOption != null ? Ie(
-      e[v].vendorCountry.selectedOption
-    ) : void 0,
-    currencyCode: l && !p ? void 0 : e[v].vendorCurrency.selectedOption,
-    accountType: x || e[v].typeOfAccount.selectedOption == null ? void 0 : {
-      type: e[v].typeOfAccount.selectedOption,
-      title: n.supportedAccountTypes.filter(
-        (a) => a.type === e[v].typeOfAccount.selectedOption
-      )[0].title
-    }
-  };
-}, lt = y.div`
-  padding-left: ${(e) => M.paddingLeftContainer.valuePx(e.size)};
-  padding-right: ${(e) => M.paddingRightContainer.valuePx(e.size)};
-  padding-top: ${(e) => M.paddingTopBottomContainer.valuePx(e.size)};
-  padding-bottom: ${(e) => M.paddingTopBottomContainer.valuePx(e.size)};
-`, at = y.div`
-  background-color: ${(e) => e.theme.colors.grey4};
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`, it = y.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`, rt = y(Me)`
-  color: ${(e) => e.theme.colors.champion};
-  margin-left: ${(e) => M.marginLeft.valuePx(e.size)};
-  margin-top: ${m.sp3};
-`, ft = ({
-  internationalWireView: e,
-  vendorViewDetails: n,
-  bankAccountContext: l,
-  vendorType: x,
-  addressType: p,
-  isDisabled: r,
-  addressToEdit: a,
-  mailingAddress: j,
-  billAmount: C,
-  onAccountDetailsUpdated: D,
-  onCurrencyUpdated: $,
-  onSaveHandler: f,
-  onBackClick: S,
-  onAddressClick: w
-}) => {
-  const h = {
-    ...n.editVendorState ?? n.newVendorState
-  }, u = h.vendorDetailLocalData?.paymentInstrumentIds != null && h.vendorDetailLocalData?.paymentInstrumentIds.length > 0, b = h.vendorBasic?.countryCode != null || u, R = h.vendorBasic?.currencyCode != null || u;
-  return ie(() => {
-    (l === "vendor" && e.createInternationalWireDetails.createStatus.fetchState === "Completed" || h?.saveStatus?.fetchState === "Completed") && S();
-  }, [
-    h?.saveStatus?.fetchState,
-    S,
-    l,
-    e.createInternationalWireDetails.createStatus
-  ]), /* @__PURE__ */ o.jsx(
-    tt,
-    {
-      internationalWireView: e,
-      addressToEdit: a,
-      mailingAddress: j,
-      addressType: p,
-      billAmount: C,
-      isDisabled: r,
-      onSaveHandler: f,
-      onBackClick: S,
-      onAddressClick: w,
-      onAccountDetailsUpdated: D,
-      onCurrencyUpdated: $,
-      vendorType: x,
-      isCountryDropdownReadonly: b,
-      isCurrencyDropdownReadonly: R
-    }
-  );
-};
-export {
-  ft as default
-};