@zeniai/web-components 3.16.55 → 3.16.57

package/dist/VendorInternationalWireDetailsPage-E6zrDQ-T.js

@@ -0,0 +1,968 @@
+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-Q8NJHkXi.js";
+import { useMemo as Ce, useState as Q, useEffect as ie, useCallback as Z } from "react";
+import y from "@emotion/styled";
+import { getFormattedAddress as K } from "@zeniai/client-epic-state";
+import { u as J, j as $e, aB as U, R as i, C as W, D as t, A as Se, av as je, S as m, Z as we, G as Fe, ag as Le, a as G, he as De, hf as re, am as X, at as q, aQ as Oe, fJ as Te, aN as ze, aO as Pe, aP as Re, ap as ke, dS as Ie, y as Me } from "./index-DIy5Kjs9.js";
+import { B as Be, a as _e } from "./BankAccountWarningSection-Cw2H6RhJ.js";
+import { M as Ae } from "./MailingDetailsSection-BeHUyHDU.js";
+import { C as Ee } from "./CurrencySelectField-Bz1wETR-.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 je("extraSmallRegular", "smallRegular")
+};
+function We({
+  isDisabled: e,
+  label: n,
+  currencySelectField: l,
+  style: x,
+  errorInfoLabel: p,
+  isAdditionalInfoLabelLoading: r = !1,
+  showAdditionalLabelTooltip: a = !1,
+  additionalLabelTooltip: w,
+  additionalInfoLabel: C,
+  showAdditionalInfoLabel: D = !0
+}) {
+  const $ = J(), {
+    formState: { errors: f }
+  } = le(), S = ae(), j = 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 || j) {
+      let u = null;
+      return a === !0 && D && w && (u = /* @__PURE__ */ o.jsx(
+        we,
+        {
+          placement: $ === "small" ? "bottom" : "right",
+          maxWidth: "364px",
+          title: /* @__PURE__ */ o.jsx(Ue, { children: w }),
+          children: /* @__PURE__ */ o.jsx(Qe, { children: /* @__PURE__ */ o.jsx(Ze, {}) })
+        }
+      )), /* @__PURE__ */ o.jsxs(
+        Je,
+        {
+          size: $,
+          isError: j,
+          hasToolTip: a,
+          isDisabled: e != null,
+          children: [
+            u,
+            C
+          ]
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ o.jsxs(
+    qe,
+    {
+      size: $,
+      style: x,
+      isDisabled: e != null,
+      isError: j,
+      "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($)
+              }
+            }
+          ),
+          j ? /* @__PURE__ */ o.jsx(He, { windowSize: $, hasError: j, 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;
+`, Je = 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};
+`, Qe = y.div`
+  display: flex;
+  margin-right: ${m.sp2};
+  margin-top: 2px;
+  align-items: center;
+`, Ze = 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: w,
+  isCurrencyDropdownReadonly: C,
+  isDisabled: D,
+  style: $
+}) => {
+  const f = J(), { getValues: S } = le(), j = 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: w === !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: j.colors.background,
+            border: `1px solid ${j.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: w,
+  billAmount: C,
+  onAccountDetailsUpdated: D,
+  onCurrencyUpdated: $,
+  onSaveHandler: f,
+  onBackClick: S,
+  onAddressClick: j
+}) => {
+  const h = J(), 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] = Q(!1), [d, s] = Q(!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 = Z(() => {
+    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 = Z(() => {
+    _ && H(), j(r);
+  }, [_, H, j, r]), pe = F.handleSubmit((c) => {
+    _ && H(), f();
+  }), he = !be(
+    w != null ? K(w) : w,
+    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: w,
+  billAmount: C,
+  onAccountDetailsUpdated: D,
+  onCurrencyUpdated: $,
+  onSaveHandler: f,
+  onBackClick: S,
+  onAddressClick: j
+}) => {
+  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: w,
+      addressType: p,
+      billAmount: C,
+      isDisabled: r,
+      onSaveHandler: f,
+      onBackClick: S,
+      onAddressClick: j,
+      onAccountDetailsUpdated: D,
+      onCurrencyUpdated: $,
+      vendorType: x,
+      isCountryDropdownReadonly: b,
+      isCurrencyDropdownReadonly: R
+    }
+  );
+};
+export {
+  ft as default
+};