@zeniai/web-components 3.16.49 → 3.16.51

package/dist/InternationalWireVerificationPage-DMiuLUlB.js

@@ -0,0 +1,877 @@
+import { d as re, u as G, m as ae, j as t, e as ne, S as se, c as F, g as ce, h as de, F as ue } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useState as me, useMemo as he, useEffect as q } from "react";
+import m from "@emotion/styled";
+import { zeniDate as R, dateNow as pe } from "@zeniai/client-epic-state";
+import { S as i, kJ as ge, b as J, p as K, t as V, n as xe, C as _, u as H, aB as fe, R as c, D as o, a as Z, am as be, kK as Q, aH as we, fi as ye, E as X, eq as A, aD as $e, aE as Se, A as ve, ap as je, dS as Fe, av as ke } from "./index-Ced64tAR.js";
+import { L as Pe } from "./LabeledDocumentField-CJsB2pbM.js";
+const Ce = ({
+  name: e,
+  registerOptions: a,
+  defaultValue: n,
+  isDisabled: p,
+  style: d,
+  placeholder: s
+}) => {
+  const {
+    control: x,
+    formState: { errors: M }
+  } = re(), P = G(), z = ae(M, e ?? ""), f = (l) => ({
+    value: l.value,
+    label: l.label
+  }), w = (l) => l.map((h) => f(h)), D = (l) => {
+    if (!(l == null || !l))
+      return {
+        value: l,
+        label: n.allOptions.find((h) => h.value === l)?.label ?? l
+      };
+  }, g = (l) => l.map(
+    (h) => D(h)
+  ), C = {
+    container: (l) => ({
+      ...l,
+      width: "100%",
+      ...d
+    }),
+    menu: (l) => ({
+      ...l,
+      backgroundColor: P.colors.grey5,
+      borderRadius: i.sp1,
+      boxShadow: `${i.sp0} 2px ${i.sp2} ${P.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: 0
+    }),
+    menuList: (l) => ({
+      ...l,
+      borderRadius: i.sp1
+    })
+  }, y = {
+    hasError: z
+  };
+  return /* @__PURE__ */ t.jsx(
+    ne,
+    {
+      name: e,
+      control: x,
+      defaultValue: n,
+      rules: a,
+      render: ({ field: { onChange: l, onBlur: h, value: S, ref: B } }) => /* @__PURE__ */ t.jsx(
+        se,
+        {
+          ...y,
+          ref: B,
+          isMulti: !0,
+          isSearchable: !0,
+          isClearable: !0,
+          controlShouldRenderValue: !0,
+          placeholder: s,
+          value: g(
+            S.selectedOptions
+          ),
+          options: w(
+            S.allOptions
+          ),
+          onChange: (r) => {
+            l({
+              selectedOptions: r.map(
+                (u) => u?.value
+              ),
+              allOptions: S.allOptions
+            });
+          },
+          tabSelectsValue: !1,
+          openMenuOnFocus: !0,
+          classNamePrefix: "multi-select-field",
+          onBlur: h,
+          menuPlacement: "auto",
+          maxMenuHeight: 210,
+          menuShouldScrollIntoView: !1,
+          closeMenuOnSelect: !1,
+          components: {
+            Control: Le,
+            Option: Oe,
+            Input: ze,
+            MultiValue: De,
+            MultiValueLabel: Be,
+            MultiValueRemove: Te,
+            ValueContainer: Me,
+            DropdownIndicator: Ue,
+            IndicatorSeparator: Ye,
+            Placeholder: Ie,
+            ClearIndicator: Ve
+          },
+          hideSelectedOptions: !1,
+          styles: C,
+          isDisabled: p != null
+        }
+      )
+    }
+  );
+}, Le = (e) => {
+  const { menuIsOpen: a, isFocused: n, isDisabled: p, selectProps: d } = e, { value: s, hasError: x } = d;
+  return /* @__PURE__ */ t.jsx(
+    _e,
+    {
+      menuIsOpen: a,
+      isFocused: n,
+      isDisabled: p,
+      optionsLen: s.length,
+      hasError: x,
+      children: /* @__PURE__ */ t.jsx(F.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, Me = (e) => {
+  const { selectProps: a } = e, { value: n } = a;
+  return /* @__PURE__ */ t.jsxs(F.ValueContainer, { ...e, className: "select-value-container", children: [
+    e.children,
+    /* @__PURE__ */ t.jsx(Re, { className: "selected-options", children: n.map((p) => p.label).join(", ") })
+  ] });
+}, ze = (e) => {
+  const { selectProps: a } = e, { placeholder: n, value: p } = a;
+  return /* @__PURE__ */ t.jsx(
+    F.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: p.length === 0 ? n : void 0,
+      children: e.children
+    }
+  );
+}, De = (e) => /* @__PURE__ */ t.jsx(F.MultiValue, { ...e, children: e.children }), Be = (e) => {
+  const { data: a } = e;
+  return /* @__PURE__ */ t.jsx(F.MultiValueLabel, { ...e, children: a.label });
+}, Te = (e) => /* @__PURE__ */ t.jsx(F.MultiValueRemove, { ...e, children: /* @__PURE__ */ t.jsx(ee, { style: { marginTop: "2px" } }) }), Ve = (e) => /* @__PURE__ */ t.jsx(F.ClearIndicator, { ...e, children: /* @__PURE__ */ t.jsx(ee, {}) }), Ie = () => null, Oe = (e) => {
+  const { isSelected: a, isDisabled: n, isFocused: p } = e;
+  return /* @__PURE__ */ t.jsx(
+    Ee,
+    {
+      isFocused: p,
+      isSelected: a,
+      isDisabled: n,
+      children: /* @__PURE__ */ t.jsx(F.Option, { ...e, className: "select-option", children: /* @__PURE__ */ t.jsxs(We, { children: [
+        /* @__PURE__ */ t.jsx(ge, { countryCode3: e.value }),
+        /* @__PURE__ */ t.jsx(He, { children: /* @__PURE__ */ t.jsx(Ne, { isSelected: a, isDisabled: n, children: e.label }) }),
+        a ? /* @__PURE__ */ t.jsxs(qe, { children: [
+          /* @__PURE__ */ t.jsx(Ae, { className: "right-tick-icon" }),
+          /* @__PURE__ */ t.jsx(J, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, _e = m.div`
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+
+  .select-control {
+    border: none;
+    padding: 0 ${i.sp3};
+    min-height: 100%;
+    background-color: inherit;
+    box-shadow: none;
+
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+     background-color: ${(e) => e.hasError ? _.importantLight : e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      border: none;
+    }
+
+    width: auto;
+    cursor: pointer;
+
+    .multi-select-field__indicators {
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+    }
+
+    .multi-select-field__clear-indicator {
+      padding: 0;
+      margin-left: ${i.sp2};
+      color: ${(e) => e.theme.colors.primary};
+      transition: none;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+
+    .multi-select-field__value-container {
+      gap: ${(e) => e.isFocused ? `${i.sp2}` : `${i.sp0}`};
+    }
+  }
+
+  .select-value-container {
+    width: 100%;
+    padding: 6px ${i.sp0};
+    overflow: auto;
+    display: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "block" : "flex"};
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    cursor: pointer;
+
+    ${V.extraSmallRegular.css}
+
+    .selected-options {
+      display: ${(e) => e.isFocused ? "none" : "block"};
+      overflow: initial;
+      text-overflow: unset;
+      white-space: initial;
+      text-align: right;
+    }
+
+    .multi-select-field__multi-value {
+      padding: 1px ${i.sp2};
+      min-width: fit-content;
+      background-color: transparent;
+      margin: ${i.sp0};
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+      color: ${(e) => e.theme.colors.primary};
+      border: 1px solid ${(e) => e.theme.colors.primary};
+      box-sizing: border-box;
+      border-radius: ${i.sp1};
+      :last-of-type {
+        margin: ${i.sp0};
+      }
+    }
+
+    .multi-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "100%" : e.isFocused === !1 && e.optionsLen > 0 ? i.sp0 : "fit-content"};
+      ${V.standardRegular.css};
+      color: ${(e) => e.theme.colors.primary};
+      margin: ${i.sp0};
+      cursor: inherit;
+      color: ${(e) => e.hasError ? _.important : e.theme.colors.primary};
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "right" : "initial"};
+        align-items: center;
+        z-index: 2;
+        overflow: hidden;
+        cursor: inherit;
+
+        ::placeholder {
+          color: ${(e) => e.hasError ? _.important : e.theme.colors.grey1};
+        }
+        }
+
+        :disabled {
+          visibility: visible;
+        }
+      }
+    }
+
+    .multi-select-field__multi-value__label {
+      color: inherit;
+      padding: 0;
+      margin-right: ${i.sp1};
+      ${V.standardRegular.css};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .multi-select-field__multi-value__remove {
+      padding: 0;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+  }
+`, Re = m(K)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+`, Ee = m.div`
+  .select-option {
+    ${V.smallRegular.css};
+    height: ${i.sp6};
+    padding: 9px ${i.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    background-color: ${(e) => e.isSelected || e.isFocused ? e.theme.colors.background : e.theme.colors.grey5};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+
+      .right-tick-icon {
+        display: none;
+      }
+
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`, We = m.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, Ne = m.label`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+`, He = m.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`, qe = m.div`
+  display: flex;
+`, Ae = m(xe)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  color: ${(e) => e.theme.colors.primary};
+`, ee = m(J)`
+  width: ${i.sp3};
+  height: ${i.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, Ue = () => null, Ye = () => null, $ = {
+  width: new c(343, 580, 726),
+  height: new c(o[6], o[6]),
+  controlHeight: new c(o[6], o[6]),
+  paddingTopBottom: new c(o[2], o[2]),
+  marginTop: new c(o[2], o[2]),
+  marginBottom: new c(o[2], o[2]),
+  marginRight: new c(o[2], o[2]),
+  labelMarginLeft: new c(o[3], o[4]),
+  labelMarginRight: new c(o[3], o[4]),
+  labelMarginTop: new c(o[2], o[2])
+};
+function Ge({
+  isDisabled: e,
+  label: a,
+  multiSelectField: n,
+  style: p
+}) {
+  const d = H();
+  return /* @__PURE__ */ t.jsxs(Je, { size: d, style: p, isDisabled: e != null, children: [
+    /* @__PURE__ */ t.jsx(
+      fe,
+      {
+        isDisabled: e,
+        label: a.label,
+        htmlFor: n.name,
+        style: {
+          marginLeft: $.labelMarginLeft.value(d),
+          marginRight: $.labelMarginRight.value(d),
+          marginTop: $.labelMarginTop.value(d),
+          width: a.width ?? "auto"
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ce,
+      {
+        ...n,
+        isDisabled: e,
+        style: {
+          display: "flex",
+          flexGrow: 1,
+          maxWidth: a.width != null ? `calc(100% - ${a.width}px)` : "auto",
+          minHeight: $.controlHeight.value(d)
+        }
+      }
+    )
+  ] });
+}
+const Je = m.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => $.width.valuePx(e.size)};
+  min-height: ${(e) => $.height.valuePx(e.size)};
+  padding-right: ${(e) => $.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => $.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => $.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.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 2;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`, U = {
+  largeLabelWidth: new c(150, 210, 252),
+  paddingTopBottom: new c(o[3], o[3]),
+  labelHeight: new c(o[6], o[6]),
+  labelMarginLeft: new c(o[3], o[4]),
+  labelMarginRight: new c(o[3], o[4]),
+  labelMarginTop: new c(o[2], o[2]),
+  controlHeight: new c(o[6], o[6]),
+  paddingBottom: new c(o[3], o[2])
+}, Ke = ({
+  sectionId: e,
+  internationalOnboardingDetails: a,
+  filesEndPoint: n,
+  authParams: p,
+  isReadonly: d,
+  deleteFileStatusById: s,
+  updateFileStatusById: x,
+  onEditFileName: M,
+  onDeleteFile: P,
+  updateFilesEntity: z
+}) => {
+  const f = H(), { verificationFormLocalData: w } = a, {
+    dateFormat: { visual: D },
+    common: { documents: g },
+    commonSetUp: { businessVerification: C },
+    spendManagement: {
+      billPay: {
+        vendorCreation: {
+          wireDetails: { international: y }
+        }
+      }
+    }
+  } = Z.getLocalizedStrings(), l = U.largeLabelWidth.value(f), [h, S] = me(!1), B = a.verificationFormFields.slice().sort((r, u) => r.type === "file" && u.type !== "file" ? -1 : 0);
+  return /* @__PURE__ */ t.jsx(Ze, { children: /* @__PURE__ */ t.jsx(Qe, { children: B.map((r) => {
+    switch (r.type) {
+      case "file":
+        return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            Pe,
+            {
+              name: v(e, r.name),
+              isDisabled: d,
+              sizeLimit: ye,
+              deleteFileStatusById: s,
+              updateFileStatusById: x,
+              filesEndPoint: n,
+              authParams: p,
+              label: {
+                label: r.label,
+                width: l
+              },
+              filemetadataPayload: {
+                documentType: "certificate_of_good_standing",
+                purposeId: "international_wire_business_verification",
+                documentSide: "front"
+              },
+              file: a.userFiles.find(
+                (u) => u.fileId === w[r.name]
+              ),
+              acceptableTypes: [
+                "image/jpg",
+                "image/jpeg",
+                "image/png",
+                "application/pdf",
+                "image/heic",
+                "image/heif"
+              ],
+              registerOptions: {
+                required: !0
+              },
+              hasError: h,
+              updateFilesEntity: z,
+              onEditFileName: M,
+              onDeleteFile: P,
+              onFileSizeError: (u) => S(u),
+              placeholderText: C.dragDropClickPlaceholder,
+              showPhotoPicker: !0,
+              useMobileCam: !0,
+              showWebCamPopUpCloseIcon: !0
+            },
+            v(e, r.name)
+          ),
+          d !== "readonly" ? /* @__PURE__ */ t.jsx(Xe, { windowSize: f, isError: !1, children: g.formatDocumentText10MB }) : null,
+          /* @__PURE__ */ t.jsx(O, {})
+        ] });
+      case "date":
+        return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            we,
+            {
+              isDisabled: d,
+              label: {
+                label: r.label + y.colon,
+                width: l
+              },
+              style: {
+                paddingBottom: U.paddingBottom.valuePx(f)
+              },
+              dateField: {
+                name: v(e, r.name),
+                placeholder: r.placeholder,
+                defaultValue: w[r.name] ? R(
+                  w[r.name]
+                ) : void 0,
+                dateFormat: D.defaultInput,
+                maxDate: pe().subtract(1, "day"),
+                minDate: R("01 Jan 1900"),
+                autoComplete: "off",
+                registerOptions: {
+                  required: !0
+                }
+              }
+            },
+            v(e, r.name)
+          ),
+          /* @__PURE__ */ t.jsx(O, {})
+        ] });
+      case "enum":
+        return r.isMultipleValuesAllowed === !1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            be,
+            {
+              isDisabled: d,
+              label: {
+                label: r.label + y.colon,
+                width: l
+              },
+              singleSelectPickerField: {
+                name: v(e, r.name),
+                placeholder: r.placeholder,
+                optionHeight: o[6],
+                optionTextStyle: V.smallRegular,
+                maxMenuHeight: 206,
+                registerOptions: {
+                  required: !0,
+                  validate: (u) => u != null && !!u.selectedOption
+                },
+                defaultValue: {
+                  selectedOption: w[r.name],
+                  allOptions: r.fieldValues.map((u) => ({
+                    label: u.description,
+                    value: u.code
+                  }))
+                }
+              }
+            },
+            v(e, r.name)
+          ),
+          /* @__PURE__ */ t.jsx(O, {})
+        ] }) : /* @__PURE__ */ t.jsx(
+          Ge,
+          {
+            isDisabled: d,
+            label: {
+              label: r.label + y.colon,
+              width: l
+            },
+            style: {
+              zIndex: 0
+            },
+            multiSelectField: {
+              name: v(e, r.name),
+              placeholder: r.placeholder,
+              registerOptions: {
+                required: !0,
+                validate: (u) => u != null && !!u.selectedOptions && u.selectedOptions.length > 0
+              },
+              defaultValue: Q(
+                w[r.name],
+                r.fieldValues.map(
+                  (u) => u.code
+                  // countryCode returned from platform is Alpha 2
+                )
+              )
+            }
+          },
+          v(e, r.name)
+        );
+      default:
+        return /* @__PURE__ */ t.jsx(O, {});
+    }
+  }) }) });
+}, v = (e, a) => `${e}.formData.${a}`, Ze = m.div`
+  display: flex;
+  flex-direction: column;
+`, Qe = m.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${i.sp2};
+`, O = m.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Xe = m(X)`
+  padding: ${i.sp1} ${i.sp4};
+
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${i.sp0} ${i.sp0} ${i.sp2} ${i.sp2};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
+  color: ${(e) => e.isError ? _.important : e.theme.colors.grey1};
+`, j = {
+  width: new c(343, 580, 726),
+  titleWidth: new c(343, 580, 726, 826),
+  subTitlePaddingTop: new c(12, o[3]),
+  subTitlePaddingBottom: new c(o[3], o[3]),
+  verificationDetailsRowGap: new c(12, o[5], o[5]),
+  termsPaddingLeftRight: new c(o[0], o[3]),
+  marginLeft: new c(o[4], o[0])
+}, et = {
+  title: new ke("standardSemiBold", "largeSemiBold")
+}, N = "intlWireVerification", pt = ({
+  internationalOnboardingDetails: e,
+  filesEndPoint: a,
+  authParams: n,
+  isReadonly: p,
+  analytics: d,
+  isLocalCurrencyEnabled: s,
+  onEditFileName: x,
+  onDeleteFile: M,
+  updateFilesEntity: P,
+  onFormDataChange: z,
+  onCancelClick: f,
+  onSubmitClick: w
+}) => {
+  const D = G(), g = H(), C = "IntlWireverificationPage", { verificationFormFetchState: y, verificationFormSubmitState: l } = e, {
+    commonSetUp: { internationalWire: h },
+    common: { footer: S },
+    dateFormat: {
+      analytics: { YYYYDashMMDashDDFormat: B }
+    }
+  } = Z.getLocalizedStrings(), r = /* @__PURE__ */ t.jsxs(at, { children: [
+    h.terms1,
+    /* @__PURE__ */ t.jsx(A, { href: h.tosUrl, linkText: h.tos }),
+    h.and,
+    /* @__PURE__ */ t.jsx(
+      A,
+      {
+        href: h.privacyPolicyUrl,
+        linkText: h.privacyPolicy
+      }
+    )
+  ] }), u = $e(l.fetchState), I = ce({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: he(
+      () => tt(e),
+      [e]
+    )
+  }), { isValid: te } = I.formState;
+  q(() => {
+    u === "In-Progress" && l.fetchState === "Completed" && f();
+  }, [u, l, f]);
+  const oe = I.handleSubmit(() => {
+    te && (d?.trackSubmitIntlWire(s), w());
+  }), ie = async (E) => {
+    const b = E[N].formData;
+    if (b != null) {
+      let T = {};
+      Object.keys(b).forEach((k) => {
+        const W = e.verificationFormFields.find(
+          (L) => L.name === k
+        );
+        if (b[k] != null && W != null) {
+          let L;
+          switch (W.type) {
+            case "file":
+              L = b[k].fileId;
+              break;
+            case "date":
+              L = R(b[k].toString()).format(
+                B
+              );
+              break;
+            default:
+              L = W.isMultipleValuesAllowed === !0 ? b[k].selectedOptions.map(
+                (le) => Fe(le)
+              ) : b[k].selectedOption;
+              break;
+          }
+          T = {
+            ...T,
+            [k]: L
+          };
+        }
+      }), z(T);
+    }
+  };
+  return q(() => {
+    const E = I.watch((b, { name: T }) => {
+      T != null && b != null && de(() => ie(b));
+    });
+    return () => {
+      E.unsubscribe();
+    };
+  }), /* @__PURE__ */ t.jsxs(ot, { children: [
+    /* @__PURE__ */ t.jsx(
+      Se,
+      {
+        title: h.title,
+        backgroundColor: D.colors.grey4,
+        style: { zIndex: 4 },
+        onBackClick: () => {
+          f();
+        },
+        showBackButton: !0,
+        showMenuIcon: !1,
+        source: "InternationalWireVerificationPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(lt, { windowSize: g, children: [
+      /* @__PURE__ */ t.jsx(it, { windowSize: g, children: h.subTitle }),
+      y.fetchState === "In-Progress" || y.fetchState === "Not-Started" ? /* @__PURE__ */ t.jsx(rt, { children: /* @__PURE__ */ t.jsx(ve, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(ue, { ...I, children: /* @__PURE__ */ t.jsxs("form", { id: Y(C), onSubmit: oe, children: [
+        /* @__PURE__ */ t.jsx(nt, { windowSize: g, children: h.header }),
+        /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            internationalOnboardingDetails: e,
+            sectionId: N,
+            updateFilesEntity: P,
+            onEditFileName: x,
+            onDeleteFile: M,
+            isReadonly: p,
+            filesEndPoint: a,
+            authParams: n,
+            deleteFileStatusById: e.deleteFileStatusById,
+            updateFileStatusById: e.updateFileStatusById
+          }
+        )
+      ] }) })
+    ] }),
+    p !== "readonly" && y.fetchState === "Completed" ? /* @__PURE__ */ t.jsx(
+      je,
+      {
+        formId: Y(C),
+        primaryBtn: {
+          label: S.submit,
+          style: {
+            width: "auto",
+            minWidth: g === "small" ? "auto" : "82px"
+          },
+          isLoading: l.fetchState === "In-Progress"
+        },
+        containerStyle: {
+          width: g === "small" ? j.width.valuePx(g) : "auto",
+          justifyContent: g === "small" ? "space-between" : "center"
+        },
+        helperStyle: {
+          width: g === "small" ? j.width.valuePx(g) : "auto",
+          paddingLeft: j.termsPaddingLeftRight.valuePx(g),
+          paddingRight: j.termsPaddingLeftRight.valuePx(g),
+          textAlign: g === "small" ? "center" : "initial"
+        },
+        showCancel: !0,
+        cancelBtn: {
+          reverseSpinnerColor: !1,
+          label: S.cancel,
+          style: { width: g === "small" ? "auto" : "82px" },
+          onClick: () => {
+            f();
+          }
+        },
+        helperText: r,
+        style: {
+          padding: `12px ${i.sp3}`,
+          zIndex: 4
+        }
+      }
+    ) : null
+  ] });
+}, tt = (e) => {
+  const { verificationFormFields: a, verificationFormLocalData: n, userFiles: p } = e, d = {};
+  return a.forEach((s) => {
+    s.type === "enum" ? s.isMultipleValuesAllowed === !1 ? d[s.name] = {
+      selectedOption: n[s.name],
+      allOptions: s.fieldValues.map((x) => ({
+        label: x.description,
+        value: x.code
+      }))
+    } : d[s.name] = Q(
+      n[s.name],
+      s.fieldValues.map((x) => x.code)
+    ) : s.type === "date" ? d[s.name] = n[s.name] ? R(n[s.name]).toDate() : void 0 : s.type === "file" ? d[s.name] = p.find(
+      (x) => x.fileId !== n[s.name]
+    ) : d[s.name] = n[s.name];
+  }), {
+    [N]: {
+      formData: d
+    }
+  };
+}, Y = (e) => `${e}_form`, ot = m.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, it = m(K)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => j.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => j.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => j.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, lt = m.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: ${i.sp9};
+  row-gap: ${(e) => j.verificationDetailsRowGap.valuePx(e.windowSize)};
+`, rt = m.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, at = m(X)`
+  text-align: center;
+  max-width: 750px;
+  color: ${(e) => e.theme.colors.hero};
+`, nt = m.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${i.sp3};
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${et.title.style(e.windowSize)}`};
+`;
+export {
+  pt as default,
+  Y as uniqueName
+};