@zeniai/web-components 3.17.8 → 3.17.9

package/dist/InternationalWireSwiftDetailsPage-tCSPP9DD.js

@@ -0,0 +1,753 @@
+import { d as Y, m as J, j as i, e as se, g as de, h as ce, k as ue, F as he } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as re, useMemo as ge, useState as me } from "react";
+import l from "@emotion/styled";
+import { getFormattedAddress as ee } from "@zeniai/client-epic-state";
+import { jm as pe, eq as fe, e as M, B as be, S as c, u as T, V as xe, C as $, t as we, fH as ve, e$ as Se, R as o, aq as $e, D as t, aB as ye, aw as ke, p as je, aD as te, a as Q, jx as q, aS as O, aY as ie, fj as Ce, aP as Le, aQ as Pe, aR as Ie, ao as Be, w as ze } from "./index-usWkcKCS.js";
+import { B as De, a as Re } from "./BankAccountWarningSection-DfA3e6wy.js";
+import { M as We } from "./MailingDetailsSection-CTQsW1Ad.js";
+import { M as Ee } from "./MagicLinkTitleSection-C4ZVM0kp.js";
+const _ = {
+  tooltipRightPosition: new o(t[6], t[6]),
+  tooltipTopPosition: new o(35, 35),
+  tooltipWidth: new o(180, 193)
+}, Ne = ({
+  protectedInfoText: e
+}) => {
+  const a = T();
+  return /* @__PURE__ */ i.jsxs(He, { children: [
+    /* @__PURE__ */ i.jsx(Ue, {}),
+    /* @__PURE__ */ i.jsx(qe, { className: "info-tooltip", windowSize: a, children: /* @__PURE__ */ i.jsx(Oe, { children: e }) })
+  ] });
+};
+function Me({
+  type: e,
+  name: a,
+  placeholder: n,
+  placeholderAlignment: g,
+  autoComplete: s = "off",
+  autoCapitalize: x = "off",
+  autoTrim: y = "off",
+  isDisabled: b,
+  defaultValue: P,
+  style: I,
+  hoverBgColor: w,
+  registerOptions: B,
+  protectedInfoText: v,
+  isSaveError: k = !1,
+  buttonProps: S,
+  disableCopyPaste: u = !1
+}) {
+  const {
+    control: r,
+    register: m,
+    formState: { errors: j },
+    setFocus: p
+  } = Y(), E = J(j, a), C = Object.assign({}, B), {
+    label: f,
+    isDisabled: V,
+    fetchState: N,
+    onButtonClick: F
+  } = S;
+  switch (e) {
+    case "email":
+      Object.assign(C, {
+        pattern: fe
+      });
+      break;
+    case "number":
+      Object.assign(C, { valueAsNumber: !0 });
+      break;
+    case "url":
+      Object.assign(C, {
+        pattern: pe
+      });
+  }
+  const A = b === "disabled" || b === "readonly" || v != null;
+  return v != null ? /* @__PURE__ */ i.jsxs(Fe, { style: I, children: [
+    /* @__PURE__ */ i.jsx(Ne, { protectedInfoText: v }),
+    /* @__PURE__ */ i.jsx(Ae, { id: a, children: P })
+  ] }) : /* @__PURE__ */ i.jsx(
+    Ve,
+    {
+      isError: E,
+      fetchState: N,
+      style: { display: "flex", alignItems: "center", width: "100%" },
+      keepButtonVisible: S.keepButtonVisible,
+      isButtonHidden: S.isHidden,
+      children: /* @__PURE__ */ i.jsx(
+        se,
+        {
+          name: a,
+          control: r,
+          rules: {
+            ...B
+          },
+          defaultValue: P ?? "",
+          "data-testid": M("text-field-with-button", a),
+          render: ({ field: { onChange: H, onBlur: K, value: U, ref: D } }) => /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            /* @__PURE__ */ i.jsx(
+              Te,
+              {
+                type: e === "password" || e === "hidden" ? e : void 0,
+                isError: E,
+                style: I,
+                placeholder: n,
+                disabled: A,
+                ...m(a, C),
+                id: a,
+                ref: D,
+                value: U,
+                autoComplete: s,
+                placeholderAlignment: g,
+                hoverBgColor: w,
+                isSaveError: k,
+                onBlur: K,
+                onChange: H,
+                "data-testid": M(
+                  "text-field-with-button-input",
+                  a
+                ),
+                onInput: (h) => {
+                  const d = h.target;
+                  switch (x) {
+                    case "off":
+                      break;
+                    case "characters":
+                      d.value = d.value.toLocaleUpperCase();
+                      break;
+                    case "words":
+                      d.value = d.value.charAt(0).toLocaleUpperCase().concat(d.value.slice(1));
+                      break;
+                  }
+                  switch (y) {
+                    case "off":
+                      break;
+                    case "trimStart":
+                      d.value = d.value.trimStart();
+                      break;
+                    case "trimEnd":
+                      d.value = d.value.trimEnd();
+                      break;
+                    case "trim":
+                      d.value = d.value.trim();
+                      break;
+                  }
+                },
+                onPaste: (h) => {
+                  u && h.preventDefault();
+                },
+                onCopy: (h) => {
+                  u && h.preventDefault();
+                },
+                keepButtonVisible: S.keepButtonVisible
+              }
+            ),
+            /* @__PURE__ */ i.jsx(
+              be,
+              {
+                label: f,
+                onClick: (h) => {
+                  h.stopPropagation(), p(a), setTimeout(() => {
+                    F();
+                  });
+                },
+                style: { outline: "none" },
+                size: "xs-small",
+                disabled: V,
+                variant: "success",
+                reverseSpinnerColor: !0,
+                loading: N === "In-Progress",
+                "data-testid": M(
+                  "text-field-button",
+                  `${a}-${f}`
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const Te = l(ve)`
+  display: flex;
+  border-width: ${c.sp0};
+  outline-width: ${c.sp0};
+  color: ${(e) => !e.isError && e.isSaveError === !1 ? e.theme.colors.primary : $.important};
+  background-color: ${(e) => e.isSaveError === !0 ? $.importantLight : e.theme.colors.grey5};
+  border-radius: ${c.sp1};
+  text-align: ${(e) => e.keepButtonVisible ? "left" : "right"};
+  padding: 0 ${c.sp3};
+  ::placeholder {
+    text-align: ${(e) => e.placeholderAlignment};
+    color: ${(e) => e.isError ? $.important : e.theme.colors.grey1};
+  }
+  &:focus {
+    text-align: left;
+    outline: none;
+    background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.background};
+    ${we.standardRegular.css};
+  }
+  &:hover {
+    background-color: ${(e) => e.isError ? $.importantLight : e.hoverBgColor !== null ? e.hoverBgColor : e.theme.colors.background};
+  }
+  &:disabled {
+    background-color: ${(e) => e.theme.colors.grey5};
+  }
+`, Ve = l.div`
+  position: relative;
+  button {
+    display: ${(e) => e.keepButtonVisible ? "flex" : "none"};
+    position: absolute;
+    right: ${c.sp3};
+  }
+
+  &:focus-within button {
+    display: ${(e) => e.isButtonHidden ? "none" : "flex"};
+  }
+`, Fe = l.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 ${c.sp3};
+`, Ae = l(xe)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-left: 12px;
+  margin-top: 6px;
+`, He = l.div`
+  color: ${(e) => e.theme.colors.primary};
+`, Ue = l(Se)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${c.sp3};
+  height: ${c.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    & + .info-tooltip {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`, qe = l.div`
+  display: none;
+  background-color: ${(e) => e.theme.colors.primary};
+  position: absolute;
+  padding: 2px 5px;
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: ${c.sp1};
+  z-index: 1;
+  right: ${(e) => _.tooltipRightPosition.valuePx(e.windowSize)};
+  width: ${(e) => _.tooltipWidth.valuePx(e.windowSize)};
+  top: ${(e) => _.tooltipTopPosition.valuePx(e.windowSize)};
+`, Oe = l($e)`
+  color: ${(e) => e.theme.colors.grey5};
+`, L = {
+  width: new o(343, 580, 726),
+  height: new o(t[6], t[6]),
+  controlHeight: new o(t[6], t[6]),
+  paddingTopBottom: new o(t[2], t[2]),
+  marginTop: new o(t[2], t[2]),
+  marginBottom: new o(t[2], t[2]),
+  marginRight: new o(t[2], t[2]),
+  labelMarginLeft: new o(t[3], t[4]),
+  labelMarginRight: new o(t[3], t[4]),
+  labelMarginTop: new o(t[2], t[2])
+}, _e = {
+  infoLabel: new ke("extraSmallRegular", "smallRegular")
+};
+function Ge({
+  isDisabled: e,
+  label: a,
+  text: n,
+  style: g,
+  additionalInfoLabel: s,
+  showAdditionalInfoLabel: x = !0,
+  protectedInfoText: y,
+  isSaveError: b,
+  showTickIcon: P,
+  showErrorInfoLabel: I,
+  errorInfoLabel: w,
+  disableCopyPaste: B = !1,
+  showTooltip: v = !1,
+  tooltipTitle: k,
+  onBlur: S
+}) {
+  const u = T(), {
+    formState: { errors: r }
+  } = Y(), m = J(r, n.name);
+  return /* @__PURE__ */ i.jsxs(
+    Qe,
+    {
+      size: u,
+      style: g,
+      isDisabled: e != null,
+      isError: m,
+      "data-testid": M(
+        "labeled-text-field-with-button",
+        n.name
+      ),
+      children: [
+        /* @__PURE__ */ i.jsx(
+          ye,
+          {
+            isDisabled: e,
+            label: a.label,
+            style: {
+              marginLeft: L.labelMarginLeft.value(u),
+              marginRight: L.labelMarginRight.value(u),
+              marginTop: L.labelMarginTop.value(u),
+              width: a.width ?? "auto"
+            },
+            showTooltip: v,
+            tooltipTitle: k
+          }
+        ),
+        /* @__PURE__ */ i.jsxs(Ye, { labelWidth: a.width, children: [
+          /* @__PURE__ */ i.jsx(
+            Me,
+            {
+              ...n,
+              style: {
+                ...n.style,
+                display: "flex",
+                flexGrow: 1,
+                width: "-webkit-fill-available",
+                height: L.controlHeight.value(u),
+                cursor: "inherit"
+              },
+              protectedInfoText: y,
+              isSaveError: b,
+              onBlur: S,
+              disableCopyPaste: B
+            }
+          ),
+          (x || m) && /* @__PURE__ */ i.jsxs(oe, { size: u, isError: m, children: [
+            P === !0 ? /* @__PURE__ */ i.jsx(Je, { children: /* @__PURE__ */ i.jsx(Ke, {}) }) : null,
+            s
+          ] }),
+          I === !0 && /* @__PURE__ */ i.jsx(oe, { size: u, isError: !0, children: w })
+        ] })
+      ]
+    }
+  );
+}
+const Qe = l.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => L.width.valuePx(e.size)};
+  min-height: ${(e) => L.height.valuePx(e.size)};
+  padding-right: ${(e) => L.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => L.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => L.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;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    input {
+      background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${(e) => e.isError ? $.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? $.importantLight : e.theme.colors.background};
+    }
+  }
+`, Ye = l.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, oe = l.label`
+  display: flex;
+  color: ${(e) => e.isError ? $.important : e.theme.colors.grey1};
+  ${(e) => `${_e.infoLabel.style(e.size)}`};
+  padding-right: ${c.sp3};
+  text-align: right;
+`, Je = l.div`
+  display: flex;
+  margin-right: ${c.sp1};
+  align-items: center;
+`, Ke = l(je)`
+  width: ${c.sp3};
+  height: ${c.sp3};
+  color: ${$.successDark};
+`, ne = {
+  largeLabelWidth: new o(120, 140, 220),
+  veryLargeLabelWidth: new o(120, 140, 256),
+  paddingTopBottom: new o(t[2], t[2]),
+  labelHeight: new o(t[6], t[6]),
+  labelMarginLeft: new o(t[3], t[4]),
+  labelMarginRight: new o(t[3], t[4]),
+  labelMarginTop: new o(t[2], t[2]),
+  controlHeight: new o(t[6], t[6])
+}, Xe = ({
+  sectionId: e,
+  bankNameBySwift: a,
+  bankAccountToCreate: n,
+  isDisabled: g,
+  fetchBankNameBySwiftStatus: s,
+  onFetchBankNameBySwift: x,
+  style: y
+}) => {
+  const b = T(), {
+    getValues: P,
+    setValue: I,
+    formState: { errors: w }
+  } = Y(), { fetchState: B } = s, v = te(s.fetchState), k = te(n?.bankSwiftCode), S = J(w, R(e, "bankSwiftCode"));
+  re(() => {
+    (v === "In-Progress" || k != null && k !== n?.bankSwiftCode) && s.fetchState === "Completed" && n?.bankSwiftCode != null && Object.keys(a).includes(
+      n?.bankSwiftCode
+    ) && a[n?.bankSwiftCode].bankName && I(
+      R(e, "bankName"),
+      a[n?.bankSwiftCode].bankName
+    );
+  }, [
+    n?.bankName,
+    n?.bankSwiftCode,
+    s.fetchState,
+    v,
+    k
+  ]);
+  const u = Q.getLocalizedStrings().spendManagement.billPay.vendorCreation.wireDetails, { international: r } = u, m = ne.largeLabelWidth.value(b), j = ne.veryLargeLabelWidth.value(b);
+  return /* @__PURE__ */ i.jsx(Ze, { style: y, children: /* @__PURE__ */ i.jsxs(et, { children: [
+    /* @__PURE__ */ i.jsx(
+      Ge,
+      {
+        label: {
+          label: r.swiftCode,
+          width: m
+        },
+        text: {
+          type: "text",
+          name: R(e, "bankSwiftCode"),
+          placeholder: r.addSwiftCode,
+          defaultValue: n?.bankSwiftCode,
+          registerOptions: {
+            required: !0,
+            pattern: q
+          },
+          autoCapitalize: "characters",
+          autoTrim: "trim",
+          buttonProps: {
+            label: r.verify,
+            isDisabled: q.test(n?.bankSwiftCode ?? "") === !1,
+            isHidden: s.fetchState === "Completed",
+            keepButtonVisible: q.test(n?.bankSwiftCode ?? "") === !0 && s.fetchState !== "Completed",
+            fetchState: B,
+            onButtonClick: () => {
+              n?.bankSwiftCode != null && x(n.bankSwiftCode);
+            }
+          }
+        },
+        isDisabled: g,
+        style: { width: "auto" },
+        additionalInfoLabel: n?.bankName ? n?.bankName : void 0,
+        showTickIcon: !!n?.bankName,
+        showAdditionalInfoLabel: !S,
+        errorInfoLabel: r.invalidSwiftCode
+      }
+    ),
+    /* @__PURE__ */ i.jsx(G, {}),
+    /* @__PURE__ */ i.jsx(
+      O,
+      {
+        label: {
+          label: r.iban,
+          width: m
+        },
+        text: {
+          type: "text",
+          name: R(e, "bankAccountIban"),
+          placeholder: r.addIban,
+          defaultValue: n?.bankAccountIban,
+          autoCapitalize: "characters",
+          options: {
+            required: !0,
+            pattern: ie
+          }
+        },
+        isDisabled: g,
+        style: { width: "auto" },
+        showAdditionalInfoLabel: !1,
+        additionalInfoLabel: r.invalidIban
+      }
+    ),
+    /* @__PURE__ */ i.jsx(G, {}),
+    /* @__PURE__ */ i.jsx(
+      O,
+      {
+        label: {
+          label: r.confirmIban,
+          width: j
+        },
+        text: {
+          type: "text",
+          name: R(e, "confirmedBankAccountIban"),
+          placeholder: r.addConfirmIban,
+          defaultValue: n?.confirmedBankAccountIban,
+          autoCapitalize: "characters",
+          options: {
+            required: !0,
+            pattern: ie,
+            validate: (p) => p != null ? P(`${e}.bankAccountIban`) === p : !1
+          }
+        },
+        disableCopyPaste: !0,
+        isDisabled: g,
+        style: { width: "auto" },
+        showAdditionalInfoLabel: !1,
+        additionalInfoLabel: r.ibanDontMatch
+      }
+    ),
+    /* @__PURE__ */ i.jsx(G, {}),
+    /* @__PURE__ */ i.jsx(
+      O,
+      {
+        label: {
+          label: r.accountNickName,
+          width: m
+        },
+        text: {
+          type: "text",
+          name: R(e, "bankAccountName"),
+          placeholder: Ce(
+            r.accountNickName
+          ),
+          defaultValue: n?.bankAccountName,
+          options: {
+            required: !1
+          }
+        },
+        isDisabled: g,
+        style: { width: "auto" }
+      }
+    )
+  ] }) });
+}, R = (e, a) => `${e}.${a}`, Ze = l.div`
+  display: flex;
+  flex-direction: column;
+`, et = l.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${c.sp0} 2px ${c.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${c.sp2};
+`, G = l.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, z = {
+  paddingTop: new o(t[2], t[3]),
+  paddingRight: new o(t[3], t[8]),
+  paddingBottom: new o(t[2], t[3]),
+  paddingLeft: new o(t[3], t[6]),
+  paddingTopBottomContainer: new o(t[3], t[3]),
+  paddingLeftContainer: new o(t[3], t[6]),
+  paddingRightContainer: new o(t[3], t[8]),
+  height: new o(t[6], t[6]),
+  controlHeight: new o(t[6], t[6]),
+  paddingTopBottom: new o(t[2], t[2]),
+  marginTop: new o(t[2], t[2]),
+  marginBottom: new o(t[2], t[3]),
+  marginRight: new o(t[2], t[2]),
+  marginLeft: new o(t[4], t[6]),
+  labelMarginLeft: new o(t[4], t[4]),
+  labelMarginRight: new o(t[4], t[4]),
+  labelMarginTop: new o(t[2], t[2]),
+  buttonWidth: new o(140, 140)
+}, ae = "internationalDetailsPage", W = "internationalWireSwiftAccountSection", tt = "mailingAddressSection", le = (e) => `${e}_form`, ft = ({
+  bankAccountCreationState: e,
+  bankNameBySwift: a,
+  addressType: n,
+  fetchBankNameBySwiftStatus: g,
+  bankAccountToCreate: s,
+  addressToEdit: x,
+  mailingAddress: y,
+  isDisabled: b,
+  style: P,
+  companyName: I,
+  isMagicLink: w,
+  currencySymbol: B,
+  amount: v,
+  onSaveHandler: k,
+  onBankDetailsUpdated: S,
+  onFetchBankNameBySwift: u,
+  onAddressClick: r,
+  onBackClick: m
+}) => {
+  const j = T(), p = de({
+    mode: "all",
+    reValidateMode: "onBlur",
+    defaultValues: ge(
+      () => it(s),
+      [s]
+    )
+  }), [E, C] = me(!1), f = Q.getLocalizedStrings().spendManagement.billPay.vendorCreation, V = Q.getLocalizedStrings().common.footer, { international: N } = f.wireDetails, F = {
+    onOkClick: () => {
+      C(!1), p.reset(), m?.();
+    },
+    onCancelClick: () => {
+      C(!1);
+    }
+  }, A = async (D, h) => {
+    const d = h[W].bankName, X = h[W].bankSwiftCode, Z = Object.assign({}, h);
+    D === `${W}.bankSwiftCode` && (d || !d && a[X]?.bankName) && (Z[W].bankName = a[X]?.bankName ?? ""), S(Z);
+  };
+  re(() => {
+    const D = p.watch((h, { name: d }) => {
+      d != null && h != null && ce(() => A(d, h));
+    });
+    return () => {
+      D.unsubscribe();
+    };
+  });
+  const H = p.handleSubmit((D) => {
+    g.fetchState !== "In-Progress" && k("wire");
+  }), U = !ue(
+    y != null ? ee(y) : y,
+    x != null ? ee(x) : x
+  ) || ot(s) || p.formState.isDirty;
+  return /* @__PURE__ */ i.jsxs(at, { children: [
+    /* @__PURE__ */ i.jsxs(lt, { style: P, size: j, children: [
+      E === !0 ? /* @__PURE__ */ i.jsx(
+        Le,
+        {
+          titleComponent: /* @__PURE__ */ i.jsx(Ie, { children: f.discardTitle }),
+          descriptionComponent: /* @__PURE__ */ i.jsx(Pe, { children: f.discardDescription }),
+          primaryButtonText: f.discard,
+          secondaryButtonText: f.cancel,
+          action: F
+        }
+      ) : null,
+      /* @__PURE__ */ i.jsx(
+        De,
+        {
+          header: w ? /* @__PURE__ */ i.jsx(
+            Ee,
+            {
+              companyName: I ?? "",
+              currencySymbol: B ?? "",
+              amount: v ?? 0
+            }
+          ) : N.addInternationalWireDetails,
+          isMagicLink: w,
+          isDirty: U,
+          onBackClick: m,
+          setShowConfirmationPopup: C
+        }
+      ),
+      e?.fetchState === "Error" && e.error?.code === 409 ? /* @__PURE__ */ i.jsx(
+        Re,
+        {
+          warningText: f.bankAccountCommon.accountExistWarning
+        }
+      ) : null,
+      /* @__PURE__ */ i.jsx(rt, { size: j, children: f.bankAccountCommon.accountDetailsTitle }),
+      /* @__PURE__ */ i.jsx(he, { ...p, children: /* @__PURE__ */ i.jsxs("form", { id: le(ae), onSubmit: H, children: [
+        /* @__PURE__ */ i.jsx(nt, { size: j, children: /* @__PURE__ */ i.jsx(
+          Xe,
+          {
+            bankAccountToCreate: s,
+            bankNameBySwift: a,
+            fetchBankNameBySwiftStatus: g,
+            sectionId: W,
+            isDisabled: b,
+            onFetchBankNameBySwift: u
+          }
+        ) }),
+        /* @__PURE__ */ i.jsx(
+          We,
+          {
+            sectionId: tt,
+            isDisabled: b,
+            addressType: n,
+            addressToEdit: x,
+            onAddressClick: r
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ i.jsx(
+      Be,
+      {
+        formId: le(ae),
+        primaryBtn: {
+          label: w ? f.bankAccountCommon.submitDetails : f.bankAccountCommon.saveAccount,
+          isLoading: e.fetchState === "In-Progress",
+          style: { width: z.buttonWidth.value(j) },
+          isDisabled: b != null
+        },
+        showCancel: !w,
+        cancelBtn: {
+          label: V.cancel,
+          style: { width: z.buttonWidth.value(j) },
+          shouldResetOnCancel: !1,
+          onClick: () => {
+            p.formState.isDirty ? C(!0) : (p.reset(), m?.());
+          }
+        }
+      }
+    )
+  ] });
+}, it = (e) => ({
+  [W]: {
+    bankSwiftCode: e?.bankSwiftCode,
+    bankName: e?.bankName ?? "",
+    bankAccountIban: e?.bankAccountIban,
+    confirmedBankAccountIban: e?.confirmedBankAccountIban,
+    bankAccountName: e?.bankAccountName
+  }
+}), ot = (e) => {
+  if (e == null)
+    return !1;
+  const { bankAccountName: a, bankSwiftCode: n, bankName: g, bankAccountIban: s } = e;
+  return !!a || !!n || !!g || !!s;
+}, nt = l.div`
+  padding-left: ${(e) => z.paddingLeftContainer.valuePx(e.size)};
+  padding-right: ${(e) => z.paddingRightContainer.valuePx(e.size)};
+  padding-top: ${(e) => z.paddingTopBottomContainer.valuePx(e.size)};
+  padding-bottom: ${(e) => z.paddingTopBottomContainer.valuePx(e.size)};
+`, at = l.div`
+  background-color: ${(e) => e.theme.colors.grey4};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`, lt = l.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`, rt = l(ze)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-left: ${(e) => z.marginLeft.valuePx(e.size)};
+  margin-top: ${c.sp3};
+`;
+export {
+  ft as I
+};