@zeniai/web-components 3.16.33 → 3.16.34

package/dist/ExpressPayPage-VDOQ3JPA.js

@@ -1,1136 +0,0 @@
-import { u as ze, j as t, g as nt, h as it, F as ot } from "./vendor-.pnpm-DxbX2tX4.js";
-import { useState as We, useRef as lt, useEffect as fe } from "react";
-import c from "@emotion/styled";
-import { NEW_INTERNATIONAL_METHOD_SUBTEXT as at, dateNow as oe, zeniDate as Ee, getNextNthWorkingDay as Ve, toAmount as rt } from "@zeniai/client-epic-state";
-import { u as K, a as q, kL as st, kM as dt, S as l, o as ct, R as s, am as mt, hN as ut, hO as pt, fh as ke, ia as ht, kN as gt, aH as yt, fl as qe, fi as xt, D as n, L as we, hk as He, C as Ue, E as bt, kO as ft, aQ as wt, hl as Oe, hs as Le, t as ye, hw as vt, en as _e, aD as Ae, aE as St, ap as Tt } from "./index-B3sr4TRT.js";
-import { L as Pt } from "./LabeledDocumentField-Dfcp0nZM.js";
-import { L as ee } from "./LabeledText-B-PVB5L4.js";
-const Ct = {
-  progressBarWidth: new s(343, 726)
-}, jt = ({ pageIndex: e }) => {
-  const o = K(), i = ze(), m = q.getLocalizedStrings().spendManagement.zeniAccounts.expressPay.progressBar, y = [
-    m.stateOne,
-    m.stateTwo,
-    m.stateThree
-  ];
-  return o === "small" ? /* @__PURE__ */ t.jsxs(Ft, { children: [
-    /* @__PURE__ */ t.jsx(
-      st,
-      {
-        coloredSectionCount: e,
-        stretchedSection: 1,
-        totalSections: 2,
-        barColor: i.colors.brandColorJade,
-        isFrozen: !1,
-        topMargin: 8
-      }
-    ),
-    /* @__PURE__ */ t.jsx(Ot, { children: y.map((g, a) => /* @__PURE__ */ t.jsx(
-      Lt,
-      {
-        isLast: a == y.length - 1,
-        isRelevant: a <= e,
-        perSectionHeight: 100 / y.length,
-        children: /* @__PURE__ */ t.jsx(Be, { children: g })
-      },
-      a
-    )) })
-  ] }) : /* @__PURE__ */ t.jsxs($t, { windowSize: o, children: [
-    /* @__PURE__ */ t.jsx(
-      dt,
-      {
-        coloredSectionCount: e,
-        totalSections: 2,
-        barColor: i.colors.brandColorJade,
-        isFrozen: !1
-      }
-    ),
-    /* @__PURE__ */ t.jsx(It, { children: y.map((g, a) => /* @__PURE__ */ t.jsx(
-      kt,
-      {
-        stateIndex: a,
-        isRelevant: a <= e,
-        children: /* @__PURE__ */ t.jsx(Be, { children: g })
-      },
-      g
-    )) })
-  ] });
-}, $t = c.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: ${l.sp3};
-  position: relative;
-  width: ${(e) => Ct.progressBarWidth.valuePx(e.windowSize)};
-`, Ft = c.div`
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  height: 136px;
-  margin-top: ${l.sp3};
-  margin-left: ${l.sp2};
-  margin-bottom: ${l.sp5};
-  align-self: flex-start;
-`, It = c.div`
-  display: flex;
-  margin: ${l.sp3} ${l.sp0};
-  justify-content: space-between;
-  height: ${l.sp6};
-`, kt = c.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: ${(e) => e.stateIndex === 0 ? "left" : e.stateIndex === 1 ? "center" : "right"};
-  color: ${(e) => e.isRelevant ? e.theme.colors.primary : e.theme.colors.grey2};
-`, Be = c(ct)``, Ot = c.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin: -${l.sp2} ${l.sp3} ${l.sp3} ${l.sp3};
-  justify-content: space-between;
-  height: 186px;
-`, Lt = c.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  position: relative;
-  height: ${(e) => `${e.perSectionHeight}%`};
-  color: ${(e) => e.isRelevant ? e.theme.colors.primary : e.theme.colors.grey2};
-`, F = {
-  containerWidth: new s(343, 580, 726),
-  labelWidth: new s(120, 160, 160),
-  largeLabelWidth: new s(150, 228, 228),
-  largeLabelPickerWidth: new s(100, 180, 180),
-  paddingBottom: new s(n[3], n[2]),
-  marginTop: new s(n[2], n[0]),
-  paddingRight: new s(n[2], n[3]),
-  labelMarginLeftPicker: new s(n[3], n[4]),
-  labelMarginRightPicker: new s(n[3], n[4]),
-  labelMarginTopPicker: new s(n[2], n[2]),
-  labeledFieldPaddingLeft: new s(n[0], n[0]),
-  labeledFieldPaddingRight: new s(n[2], n[2]),
-  labeledFieldPaddingTop: new s(n[2], n[2]),
-  labeledFieldPaddingBottom: new s(n[2], n[2]),
-  infoLabelPaddingRight: new s(n[0], n[3]),
-  infoLabelMarginTop: new s(n[1], n[0])
-}, z = (e, o) => `${e}.${o}`, At = ({
-  sectionId: e,
-  paymentDetails: o,
-  allPaymentMethods: i,
-  paymentToOptions: m,
-  withdrawFromList: y,
-  internationalVerificationStatus: g,
-  fileProps: a,
-  receiptFile: I,
-  deleteFileStatusById: C,
-  updateFileStatusById: j,
-  onClickAddAccount: P
-}) => {
-  const p = K(), { spendManagement: f, dateFormat: $, common: d } = q.getLocalizedStrings(), w = f.billPay.billDetails, Q = $.visual.defaultInput, ae = f.zeniAccounts.expressPay, re = d.documents, H = F.largeLabelWidth.value(p), [x, X] = We(!1), U = i.filter(
-    (r) => r.method.includes(
-      o?.withdrawFrom?.accType ?? "depositAccount"
-    ) && r.method.includes(at) === !1
-  ), O = (r) => m.find((h) => h.id === r), B = (r) => He(O(r)), se = () => {
-    let r = [];
-    return o?.paymentType?.method.includes("wire") === !0 ? r = m.filter((h) => !!h.bankRoutingNumberWireTransfer).map((h) => h.id) : r = m.filter((h) => !!h.bankRoutingNumberAch).map((h) => h.id), r;
-  }, de = (r) => {
-    const h = O(r), T = q.getLocalizedStrings().spendManagement.billPay;
-    return o?.paymentType?.method.includes("ach") === !0 ? /* @__PURE__ */ t.jsxs(xe, { children: [
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.achDetails.bankRoutingNumber }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankRoutingNumberAch ?? T.vendorCreation.emptyPlaceholderString })
-      ] }),
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.achDetails.bankName }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankName ?? T.vendorCreation.emptyPlaceholderString })
-      ] }),
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.achDetails.bankAccountNumber }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankAccountNumber ?? T.vendorCreation.emptyPlaceholderString })
-      ] })
-    ] }) : o?.paymentType?.method.includes("wire") === !0 ? o.paymentType?.method.includes("international") === !0 ? /* @__PURE__ */ t.jsx(xe, { children: h?.piLabels.map((_) => /* @__PURE__ */ t.jsxs(V, { children: [
-      /* @__PURE__ */ t.jsxs(W, { children: [
-        _.name,
-        T.paymentDetails.colon
-      ] }),
-      /* @__PURE__ */ t.jsx(E, { children: _.value })
-    ] }, _.name)) }) : /* @__PURE__ */ t.jsxs(xe, { children: [
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.wireDetails.bankRoutingNumber }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankRoutingNumberWireTransfer ?? T.vendorCreation.emptyPlaceholderString })
-      ] }),
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.achDetails.bankName }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankName ?? T.vendorCreation.emptyPlaceholderString })
-      ] }),
-      /* @__PURE__ */ t.jsxs(V, { children: [
-        /* @__PURE__ */ t.jsx(W, { children: T.vendorCreation.wireDetails.accountNumber }),
-        /* @__PURE__ */ t.jsx(E, { children: h?.bankAccountNumber ?? T.vendorCreation.emptyPlaceholderString })
-      ] })
-    ] }) : "";
-  };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(Bt, { children: w.paymentDetailsTitle }),
-    /* @__PURE__ */ t.jsxs(Mt, { windowSize: p, children: [
-      /* @__PURE__ */ t.jsx(
-        mt,
-        {
-          label: {
-            label: w.withdrawFrom,
-            width: H,
-            style: {
-              marginLeft: F.labelMarginLeftPicker.valuePx(p),
-              marginTop: F.labelMarginTopPicker.valuePx(p),
-              marginRight: F.labelMarginRightPicker.valuePx(p),
-              width: F.largeLabelPickerWidth.value(p)
-            }
-          },
-          style: {
-            paddingTop: F.labeledFieldPaddingTop.valuePx(p),
-            paddingBottom: F.labeledFieldPaddingBottom.valuePx(p),
-            paddingLeft: F.labeledFieldPaddingLeft.valuePx(p),
-            paddingRight: F.labeledFieldPaddingRight.valuePx(p),
-            border: "none",
-            width: "auto",
-            display: p === "small" ? "flex" : "inherit"
-          },
-          infoLabelStyle: {
-            textAlign: p === "small" ? "left" : "right",
-            paddingRight: F.infoLabelPaddingRight.valuePx(p),
-            marginTop: F.infoLabelMarginTop.valuePx(p)
-          },
-          singleSelectPickerField: {
-            name: z(e, "withdrawFrom"),
-            placeholder: ke(w.withdrawFrom),
-            style: { position: "relative" },
-            capitalizeOptions: !0,
-            isOptionRemovable: !1,
-            showTickIcon: !1,
-            valueToLogo: (r, h) => pt(y, r, h),
-            valueToSubLabels: (r, h) => ut(y, r, h, !1),
-            defaultValue: {
-              selectedOption: o?.withdrawFrom?.id,
-              allOptions: y.map((r) => ({
-                label: r.label,
-                value: r.id
-              }))
-            },
-            textAlignment: "right",
-            registerOptions: {
-              required: !0,
-              validate: (r) => r != null && !!r.selectedOption
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(J, {}),
-      /* @__PURE__ */ t.jsx(
-        ht,
-        {
-          showAdditionalInfoLabel: !1,
-          label: {
-            label: w.amount,
-            width: H
-          },
-          formattedTextField: {
-            type: "number",
-            name: z(e, "amount"),
-            defaultValue: o?.recipientAmount ?? 0,
-            placeholder: ke(w.amount),
-            returnValueType: "floatValue",
-            prefix: "$",
-            allowNegative: !1,
-            isNumericString: !1,
-            registerOptions: {
-              required: !0,
-              validate: (r) => r != null && r !== 0
-            },
-            autoComplete: "off",
-            decimalSeparator: ".",
-            decimalScale: 2,
-            fixedDecimalScale: !1,
-            thousandSeparator: !0,
-            shouldHighlightZeroAmount: !0
-          },
-          style: { width: "auto" }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(J, {}),
-      /* @__PURE__ */ t.jsx(
-        gt,
-        {
-          label: {
-            label: w.paymentMethod,
-            width: F.labelWidth.value(p)
-          },
-          style: { width: "auto" },
-          disableOutline: !0,
-          paymentSingleSelectField: {
-            name: z(e, "paymentMethod"),
-            placeholder: w.billTypeMethodPlaceholder,
-            defaultValue: o?.paymentType,
-            allPaymentMethods: U,
-            isAdmin: !0,
-            internationalVerificationStatus: g,
-            registerOptions: {
-              required: !0,
-              validate: (r) => r != null
-            },
-            onInternationalWireVerifyClick: () => {
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(J, {}),
-      /* @__PURE__ */ t.jsx(
-        yt,
-        {
-          label: {
-            label: w.paymentDate,
-            width: F.labelWidth.value(p)
-          },
-          style: {
-            paddingBottom: F.paddingBottom.valuePx(p),
-            width: "auto"
-          },
-          dateField: {
-            name: z(e, "paymentDate"),
-            placeholder: w.paymentDate,
-            dateFormat: Q,
-            autoComplete: "off",
-            minDate: oe(),
-            registerOptions: {
-              required: !0
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(J, {}),
-      /* @__PURE__ */ t.jsx(
-        qe,
-        {
-          label: {
-            label: w.paymentTo,
-            width: H
-          },
-          style: {
-            width: "auto"
-          },
-          isFunctional: !0,
-          singleSelectField: {
-            singleSelect: {
-              name: z(e, "paymentTo"),
-              placeholder: w.selectAccount,
-              getTooltipInfo: de,
-              menuPlacement: "top",
-              maxMenuHeight: 308,
-              isOptionRemovable: !1,
-              showEyeIconOnSelect: !1,
-              showVerifiedIcon: !0,
-              onClickCreateBankAccount: P,
-              showAddBankAccountOption: !0,
-              showCollectPaymentDetailsOption: !1,
-              getLabelForId: B
-            },
-            defaultValue: {
-              selectedOption: o?.paymentType != null ? o?.paymentTo?.id : "",
-              allOptions: o?.paymentType != null ? se() : []
-            },
-            registerOptions: {
-              required: !0,
-              validate: (r) => r?.selectedOption != null
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(J, {}),
-      /* @__PURE__ */ t.jsx(
-        Pt,
-        {
-          name: z(e, "receipt"),
-          sizeLimit: xt,
-          deleteFileStatusById: C,
-          updateFileStatusById: j,
-          filesEndPoint: a.filesEndPoint,
-          authParams: a.authParams,
-          label: {
-            label: ae.reciept,
-            width: H
-          },
-          filemetadataPayload: {
-            documentType: "id_document",
-            purposeId: "business_verification_others",
-            documentSide: "front"
-          },
-          file: I,
-          acceptableTypes: [
-            "image/jpg",
-            "image/jpeg",
-            "image/png",
-            "application/pdf",
-            "image/heic",
-            "image/heif"
-          ],
-          registerOptions: {
-            required: !1
-          },
-          hasError: x,
-          updateFilesEntity: a.updateFilesEntity,
-          onEditFileName: a.onEditFileName,
-          onDeleteFile: a.onDeleteFile,
-          onFileSizeError: (r) => X(r),
-          isOptional: !0,
-          style: I != null ? {
-            borderBottomLeftRadius: "inherit",
-            borderBottomRightRadius: "inherit"
-          } : void 0
-        },
-        z(e, "receipt")
-      ),
-      I == null ? /* @__PURE__ */ t.jsx(Nt, { windowSize: p, isError: x, children: re.formatDocumentText10MB }) : null,
-      /* @__PURE__ */ t.jsx(J, {})
-    ] })
-  ] });
-}, Bt = c(we)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${l.sp3};
-`, Mt = c.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-  width: ${(e) => F.containerWidth.valuePx(e.windowSize)};
-`, J = c.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, W = c.div`
-  box-sizing: border-box;
-  text-align: left;
-  flex: 1 0 50%;
-  color: ${Ue.heroDark};
-`, E = c.div`
-  box-sizing: border-box;
-  text-align: right;
-  word-break: break-word;
-  color: ${(e) => e.theme.colors.brandColorPearl};
-`, xe = c.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${l.sp1};
-`, V = c.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`, Nt = c(bt)`
-  padding: ${l.sp1} ${l.sp4};
-  background: ${(e) => e.theme.colors.grey4};
-  border-radius: ${l.sp0} ${l.sp0} ${l.sp2} ${l.sp2};
-  text-align: ${(e) => e.windowSize === "small" ? "initial" : "right"};
-  color: ${(e) => e.isError ? Ue.important : e.theme.colors.grey1};
-`, Rt = {
-  paddingTopBottom: new s(n[3], n[3]),
-  paddingLeftRight: new s(n[3], n[8]),
-  paddingLeftRightSubPage: new s(n[3], n[8]),
-  marginLeftSubtitle: new s(n[3], n[8]),
-  marginRightSubtitle: new s(n[5], n[8]),
-  marginTopSubtitle: new s(n[4], n[3]),
-  largeLabelWidth: new s(150, 210, 210),
-  paddingBottom: new s(n[3], n[2]),
-  customTitleMarginBottom: new s(n[0], n[3]),
-  customTitleMarginLeft: new s(n[3], n[8])
-}, te = (e, o) => `${e}.${o}`, zt = ({
-  sectionId: e,
-  vendorTypeList: o,
-  formLocalData: i,
-  vendorSearchAutoCompleteData: m,
-  vendorSearchAutoCompleteActions: y
-}) => {
-  const g = K(), a = q.getLocalizedStrings().spendManagement.zeniAccounts.expressPay, I = Rt.largeLabelWidth.value(g), C = lt();
-  fe(() => {
-    m?.entityAutoCompleteView.fetchState === "Completed" && C.current?.(
-      Wt(m?.entityAutoCompleteView)
-    );
-  }, [m?.entityAutoCompleteView.fetchState]);
-  const P = {
-    vendorSearchAutoCompleteData: m,
-    loadOptions: (d, w) => {
-      y?.onAutoCompleteInputChange?.(
-        d,
-        "vendor"
-      ), C.current = w;
-    }
-  }, p = P?.vendorSearchAutoCompleteData?.autoCompleteText != null && (P?.vendorSearchAutoCompleteData?.entityAutoCompleteView.fetchState === "In-Progress" || P?.vendorSearchAutoCompleteData?.entityAutoCompleteView.fetchState === "Not-Started"), f = {
-    defaultOptions: Ye(
-      i?.vendorId,
-      i?.vendorName,
-      m?.entityAutoCompleteView
-    ),
-    selectedOption: i?.vendorId ?? i?.vendorName ?? ""
-  }, $ = {
-    valueContainer: (d) => ({
-      ...d,
-      padding: `2px ${g === "small" ? l.sp2 : l.sp3} !important`,
-      overflow: "unset"
-    }),
-    singleValue: (d) => ({
-      ...d,
-      margin: 0
-    }),
-    placeholder: (d) => ({
-      ...d,
-      fontWeight: "normal"
-    })
-  };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(Et, { children: a.recipientSectionTitle }),
-    /* @__PURE__ */ t.jsx(Vt, { children: /* @__PURE__ */ t.jsxs(qt, { children: [
-      /* @__PURE__ */ t.jsx(
-        ft,
-        {
-          label: {
-            label: a.recipientName,
-            width: I
-          },
-          addIconInCreateLabel: !0,
-          autoCompleteSingleSelectField: {
-            name: te(e, "recipient"),
-            placeholder: g === "small" ? a.placeholders.recipientNameMobile : a.placeholders.recipientName,
-            valueToId: (d) => d,
-            defaultValue: {
-              ...f
-            },
-            style: {
-              width: "100%"
-            },
-            customStyleConfig: $,
-            registerOptions: {
-              required: !0,
-              validate: (d) => d != null && !!d.selectedOption
-            },
-            loadOptions: P?.loadOptions,
-            isOptionsLoading: p,
-            makeCreateOptionSticky: !0,
-            entity: "recipient"
-          },
-          style: {
-            justifyContent: "space-between"
-          },
-          fullWidthSelect: !0
-        },
-        te(e, "recipient")
-      ),
-      /* @__PURE__ */ t.jsx(Me, {}),
-      /* @__PURE__ */ t.jsx(
-        qe,
-        {
-          label: {
-            label: a.recipientType,
-            width: I
-          },
-          singleSelectField: {
-            singleSelect: {
-              name: te(e, "recipientType"),
-              placeholder: a.placeholders.recipientType,
-              showValueEyeIcon: !1,
-              showEyeIconOnSelect: !1,
-              getLabelForId: (d) => o.find((w) => w.code === d)?.name ?? "",
-              showTickMark: !1,
-              maxMenuHeight: 250
-            },
-            defaultValue: {
-              selectedOption: i?.vendorType,
-              allOptions: o.map((d) => d.code)
-            },
-            registerOptions: {
-              required: !0,
-              validate: (d) => !!d.selectedOption
-            }
-          },
-          isFunctional: !0
-        }
-      ),
-      /* @__PURE__ */ t.jsx(Me, {}),
-      /* @__PURE__ */ t.jsx(
-        wt,
-        {
-          showAdditionalInfoLabel: !1,
-          label: {
-            label: a.recipientEmail,
-            width: I
-          },
-          text: {
-            type: "email",
-            name: te(e, "recipientEmail"),
-            placeholder: a.placeholders.recipientEmail,
-            options: {
-              required: !0
-            }
-          },
-          style: {
-            borderBottomLeftRadius: "inherit",
-            borderBottomRightRadius: "inherit"
-          }
-        }
-      )
-    ] }) })
-  ] });
-}, Ye = (e, o, i) => {
-  if (e == null)
-    return [];
-  const m = i?.vendor?.find(
-    (y) => y.id === e
-  );
-  return m != null || e != null ? [
-    {
-      label: m?.name ?? o ?? e ?? "",
-      value: e ?? o ?? ""
-    }
-  ] : [];
-}, Wt = (e) => e?.vendor.map((i) => ({
-  label: i.name,
-  value: i.zeniId,
-  zeniId: i.zeniId
-})) ?? [], Et = c(we)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${l.sp3};
-`, Vt = c.div`
-  display: flex;
-  flex-direction: column;
-`, qt = c.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-`, Me = c.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, le = {
-  containerWidth: new s(343, 580, 726),
-  largeLabelWidth: new s(150, 215, 215),
-  reviewContainerMarginLeft: new s(n[3], n[6]),
-  reviewContainerMarginRight: new s(n[3], n[8])
-}, Ht = ({
-  vendorName: e,
-  reviewDetails: o,
-  paymentToOptions: i,
-  style: m
-}) => {
-  const y = K(), g = le.largeLabelWidth.value(y), { billPay: a } = q.getLocalizedStrings().spendManagement, { dateFormat: I, common: C } = q.getLocalizedStrings(), j = a.billDetails, P = o?.paymentType, p = I.visual.MMMDCommaYYYYformat, f = {
-    amount: o?.amount?.amount ?? 0,
-    currencyCode: C.currency.currencyCode,
-    currencySymbol: C.currency.currencySymbol
-  }, $ = He(
-    i.find(
-      (Q) => Q.id === o?.paymentToAccountId
-    )
-  ), d = o?.paymentDate, w = Oe(
-    P?.method ?? ""
-  );
-  return /* @__PURE__ */ t.jsx(Xt, { children: /* @__PURE__ */ t.jsxs(Zt, { windowSize: y, style: m, children: [
-    /* @__PURE__ */ t.jsxs(Kt, { children: [
-      /* @__PURE__ */ t.jsx(ne, { children: j.pay }),
-      /* @__PURE__ */ t.jsx(ne, { children: /* @__PURE__ */ t.jsx(
-        Le,
-        {
-          amount: f,
-          integerStyles: ye.largeSemiBold.cssObject
-        }
-      ) }),
-      /* @__PURE__ */ t.jsx(ne, { children: j.to }),
-      /* @__PURE__ */ t.jsx(ne, { children: e })
-    ] }),
-    /* @__PURE__ */ t.jsxs(Gt, { windowSize: y, children: [
-      /* @__PURE__ */ t.jsx(
-        ee,
-        {
-          label: {
-            label: j.withdrawFrom,
-            width: g
-          },
-          style: { width: "auto", gap: n[3] },
-          value: o?.withdrawFrom != null ? vt(
-            o.withdrawFrom,
-            y
-          ) : C.strings.empty
-        }
-      ),
-      /* @__PURE__ */ t.jsx(be, {}),
-      /* @__PURE__ */ t.jsx(
-        ee,
-        {
-          label: {
-            label: j.paymentMethod,
-            width: g
-          },
-          style: { width: "auto" },
-          value: Oe(
-            P?.method ?? ""
-          )
-        }
-      ),
-      /* @__PURE__ */ t.jsx(be, {}),
-      d != null ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(
-          ee,
-          {
-            label: {
-              label: j.paymentDate,
-              width: g
-            },
-            style: { width: "auto" },
-            value: d.format(p),
-            additionalInfoLabel: `${j.estimatedArrival}${Ee(
-              Ve(
-                d.toDate(),
-                [0, 6],
-                P?.maxPeriod.value ?? 0
-              ).toDateString()
-            ).format(p)} - (${w.length > 0 ? `${w} ` : ""}${j.deliveryTimeLabel} = ${P?.maxPeriod.value ?? "0"} ${j.deliveryTimeUnits})`
-          }
-        ),
-        /* @__PURE__ */ t.jsx(be, {})
-      ] }) : null,
-      /* @__PURE__ */ t.jsx(
-        ee,
-        {
-          label: {
-            label: j.paymentTo,
-            width: g
-          },
-          style: { width: "auto" },
-          value: $ ?? ""
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsx(_t, { children: /* @__PURE__ */ t.jsxs(Yt, { windowSize: y, children: [
-      /* @__PURE__ */ t.jsx(Jt, { children: /* @__PURE__ */ t.jsx(Ut, { children: a.paymentDetails.total }) }),
-      /* @__PURE__ */ t.jsx(Qt, { children: /* @__PURE__ */ t.jsx(
-        Le,
-        {
-          amount: rt(
-            f.amount,
-            f.currencyCode,
-            f.currencySymbol
-          ),
-          integerStyles: ye.h6Medium.cssObject,
-          decimalStyles: ye.standardMedium.cssObject
-        }
-      ) })
-    ] }) })
-  ] }) });
-}, Ut = c.div``, _t = c.div`
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-`, Yt = c.div`
-  width: 100%;
-  padding: ${l.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(e) => e.theme.colors.grey3};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${l.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${l.sp2};
-`, Jt = c(_e)`
-  gap: ${l.sp1};
-  display: flex;
-  width: 100%;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-`, Qt = c(_e)`
-  display: flex;
-  width: calc(100% - 176px);
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-`, Xt = c.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`, Zt = c.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  margin-left: ${(e) => le.reviewContainerMarginLeft.valuePx(e.windowSize)};
-  margin-right: ${(e) => le.reviewContainerMarginRight.valuePx(e.windowSize)};
-`, Gt = c.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${l.sp2};
-  margin-bottom: ${l.sp3};
-  margin-top: ${l.sp3};
-  width: ${(e) => le.containerWidth.valuePx(e.windowSize)};
-`, be = c.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Kt = c.div`
-  display: flex;
-`, ne = c(we)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  margin-right: ${l.sp1};
-`, Ne = "expressPayPage", Dt = (e) => `${e}_form`, A = "recipientDetails", k = "paymentDetails", ie = {
-  buttonWidth: new s(160, 140),
-  largeButtonWidth: new s(166, 166)
-}, cn = ({
-  expressPayDetails: e,
-  fileProps: o,
-  analytics: i,
-  accountId: m,
-  onClickAddAccount: y,
-  onSaveVendor: g,
-  onVendorSelected: a,
-  updateSelectedVendorForCreate: I,
-  onBackClick: C,
-  saveVendorDetailLocalData: j,
-  saveExpressPayLocalData: P,
-  resetVendorSaveStatus: p,
-  onSchedulePayment: f,
-  initializeVendorAddress: $,
-  vendorSearchAutoCompleteData: d,
-  vendorSearchAutoCompleteActions: w,
-  onEditFileName: Q,
-  onDeleteFile: ae,
-  updateFilesEntity: re
-}) => {
-  const {
-    vendorViewDetails: H,
-    expressPayLocalData: x,
-    vendorTypeList: X,
-    allPaymentMethods: U,
-    paymentToOptions: O,
-    withdrawFromList: B,
-    internationalWireOnboardingStatus: se,
-    deleteFileStatusById: de,
-    updateFileStatusById: r,
-    submitStatus: h,
-    receiptFile: T,
-    vendorSaveStatus: _
-  } = e, [v, Z] = We(0), Je = ze(), G = K(), { common: ve, spendManagement: Qe } = q.getLocalizedStrings(), ce = ve.footer, Se = ve.currency, me = Qe.zeniAccounts.expressPay, { editVendorState: ue, newVendorState: Te } = H, M = x?.vendorId != null ? ue?.vendorDetailLocalData : Te?.vendorDetailLocalData, Pe = Object.assign(
-    {},
-    ue ?? Te
-  ), Xe = M?.vendorName, Ce = B.find(
-    (u) => u.id === m
-  ), D = nt({
-    mode: "onBlur",
-    reValidateMode: "onChange",
-    defaultValues: Re(
-      X,
-      B,
-      O,
-      Ce,
-      U,
-      M,
-      x,
-      T,
-      d?.entityAutoCompleteView
-    ),
-    values: Re(
-      X,
-      B,
-      O,
-      Ce,
-      U,
-      M,
-      x,
-      T,
-      d?.entityAutoCompleteView
-    )
-  }), je = Ae(
-    Pe.saveStatus?.fetchState
-  ), $e = Ae(h);
-  fe(() => {
-    const u = D.watch((S, { name: b }) => {
-      b != null && S != null && it(() => Ze(b, S));
-    });
-    return () => {
-      u.unsubscribe();
-    };
-  }), fe(() => {
-    je === "In-Progress" && _ === "Completed" && (v === 0 ? (Z(1), p?.(x?.vendorId)) : v === 1 && Z(2)), $e === "In-Progress" && h === "Completed" && C(x?.vendorId);
-  }, [
-    je,
-    _,
-    v,
-    p,
-    x?.vendorId,
-    $e,
-    h,
-    C
-  ]);
-  const Ze = async (u, S) => {
-    if (u !== "recipientDetails.recipientEmail")
-      if (u === "recipientDetails.recipient") {
-        const b = S[A].recipient.selectedOption, L = d?.entityAutoCompleteView.vendor.find(
-          (Y) => Y.zeniId === b
-        );
-        Ge(S), $(), M?.vendorId !== b && L != null && (a?.(b), he(
-          S,
-          !1,
-          O,
-          b
-        ));
-      } else if (u.includes("recipient"))
-        pe(S);
-      else {
-        const b = S[k].paymentMethod?.method, L = x?.paymentType?.method, Y = b != null && L != null && (b.toLowerCase().includes("ach") && L.toLowerCase().includes("wire") || b.toLowerCase().includes("wire") && L.toLowerCase().includes("ach"));
-        he(
-          S,
-          Y,
-          O,
-          x?.vendorId
-        );
-      }
-  }, Ge = (u) => {
-    const S = u[A].recipient.selectedOption, b = d?.entityAutoCompleteView.vendor.find(
-      (L) => L.id === S
-    ) != null;
-    if (S != null && b === !0) {
-      I?.(S), he(u, !1, O, S);
-      return;
-    }
-    pe(u, !0);
-  }, pe = (u, S) => {
-    const b = M?.vendorId, L = d?.entityAutoCompleteView.vendor.find(
-      (ge) => ge.zeniId === b
-    ) != null, Y = en(
-      u,
-      L === !0 ? b : void 0,
-      M,
-      S
-    );
-    j?.(Y, b);
-  }, he = (u, S, b, L) => {
-    const ge = (() => {
-      let N = [];
-      return u[k].paymentMethod?.method.includes(
-        "wire"
-      ) === !0 ? N = b.filter((R) => !!R.bankRoutingNumberWireTransfer).map((R) => R.id) : N = b.filter((R) => !!R.bankRoutingNumberAch).map((R) => R.id), N;
-    })(), et = b.find(
-      (N) => N.id === u[k]?.paymentTo?.selectedOption
-    ), tt = {
-      vendorId: L,
-      amount: {
-        amount: u[k].amount,
-        currencyCode: Se.currencyCode,
-        currencySymbol: Se.currencySymbol
-      },
-      paymentDate: u[k].paymentDate ? Ee(u[k].paymentDate.toString()) : oe(),
-      paymentType: u[k]?.paymentMethod != null ? u[k]?.paymentMethod : void 0,
-      paymentToAccountId: S ? ge[0] : et?.id,
-      withdrawFrom: B.find(
-        (N) => N.id === u[k]?.withdrawFrom?.selectedOption
-      ),
-      receiptFileId: u[k].receipt?.fileId
-    };
-    P?.(tt);
-  }, Fe = D.handleSubmit(() => {
-    if (v === 0 || v === 1) {
-      i.trackExpressPayNextClick(
-        v === 0 ? "Recipient Details" : "Payment Details"
-      );
-      const u = D.getValues();
-      pe(u), g(x?.vendorId);
-    } else
-      i.trackExpressPayScheduleClick(), f();
-  }), Ke = () => {
-    v === 2 ? Z(1) : C(x?.vendorId);
-  }, De = () => {
-    v === 0 ? C(x?.vendorId) : Z(v === 1 ? 0 : 1);
-  }, Ie = {
-    withdrawFrom: x?.withdrawFrom,
-    paymentTo: x?.paymentToAccountId != null ? O.find(
-      (u) => u.id === x?.paymentToAccountId
-    ) : void 0,
-    paymentDate: x?.paymentDate,
-    paymentType: x?.paymentType ?? U?.[0],
-    recipientAmount: x?.amount?.amount
-  };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      St,
-      {
-        title: me.pageTitle,
-        onBackClick: De,
-        backgroundColor: Je.colors.grey4,
-        hideSearchBtn: !0,
-        source: "ExpressPayPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(tn, { windowSize: G, children: [
-      /* @__PURE__ */ t.jsx(jt, { pageIndex: v }),
-      /* @__PURE__ */ t.jsx(ot, { ...D, children: /* @__PURE__ */ t.jsx("form", { id: Ne, onSubmit: Fe, children: v === 0 ? /* @__PURE__ */ t.jsx(
-        zt,
-        {
-          sectionId: A,
-          vendorTypeList: X,
-          formLocalData: M,
-          vendorSearchAutoCompleteData: d,
-          vendorSearchAutoCompleteActions: w
-        }
-      ) : v === 1 ? /* @__PURE__ */ t.jsx(
-        At,
-        {
-          sectionId: k,
-          paymentDetails: Ie,
-          paymentToOptions: O,
-          allPaymentMethods: U,
-          withdrawFromList: B,
-          internationalVerificationStatus: se,
-          fileProps: {
-            ...o,
-            onEditFileName: Q,
-            onDeleteFile: ae,
-            updateFilesEntity: re
-          },
-          deleteFileStatusById: de,
-          updateFileStatusById: r,
-          receiptFile: T,
-          onClickAddAccount: () => {
-            const u = Ie?.paymentType;
-            u != null && y(u);
-          }
-        }
-      ) : v === 2 ? /* @__PURE__ */ t.jsx(
-        Ht,
-        {
-          reviewDetails: x,
-          paymentToOptions: O,
-          vendorName: Xe
-        }
-      ) : null }) })
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      Tt,
-      {
-        formId: Dt(Ne),
-        style: { width: "100%" },
-        primaryBtn: {
-          label: v === 2 ? oe().isSame(x?.paymentDate, "date") ? me.sendMoney : me.schedulePayment : ce.next,
-          isLoading: v === 0 || v === 1 ? Pe.saveStatus?.fetchState === "In-Progress" : h === "In-Progress",
-          style: {
-            width: v === 2 ? ie.largeButtonWidth.value(G) : ie.buttonWidth.value(G),
-            whiteSpace: "nowrap"
-          },
-          isDisabled: !1,
-          onClick: () => {
-            Fe();
-          }
-        },
-        cancelBtn: {
-          label: v === 2 ? ce.edit : ce.cancel,
-          style: {
-            width: v === 2 ? ie.largeButtonWidth.value(G) : ie.buttonWidth.value(G),
-            whiteSpace: "nowrap"
-          },
-          shouldResetOnCancel: !1,
-          onClick: Ke
-        }
-      }
-    )
-  ] });
-}, Re = (e, o, i, m, y, g, a, I, C) => {
-  const P = (() => {
-    let f = [];
-    return a?.paymentType?.method.includes("wire") === !0 ? f = i.filter(($) => !!$.bankRoutingNumberWireTransfer).map(($) => $.id) : f = i.filter(($) => !!$.bankRoutingNumberAch).map(($) => $.id), f;
-  })();
-  return {
-    [A]: {
-      recipient: {
-        defaultOptions: Ye(
-          g?.vendorId,
-          g?.vendorName,
-          C
-        ),
-        selectedOption: g?.vendorId ?? g?.vendorName ?? ""
-      },
-      recipientEmail: g?.contacts?.[0]?.email ?? "",
-      recipientName: g?.vendorName ?? "",
-      recipientType: {
-        allOptions: e.map((f) => f.code),
-        selectedOption: g?.vendorType
-      }
-    },
-    [k]: {
-      paymentMethod: a?.paymentType ?? y?.[0],
-      withdrawFrom: {
-        selectedOption: a?.withdrawFrom?.id ?? m?.id ?? o[0]?.id,
-        allOptions: o.map((f) => ({
-          label: f.label,
-          value: f.id
-        }))
-      },
-      amount: a?.amount.amount ?? 0,
-      paymentDate: a?.paymentDate?.toDate() ?? Ve(oe().toDate(), [0, 6], 0),
-      paymentTo: {
-        allOptions: a?.paymentType != null ? P : [],
-        selectedOption: a?.paymentToAccountId ?? P[0]
-      },
-      receipt: I
-    }
-  };
-};
-function en(e, o, i, m) {
-  const y = e[A].recipient.defaultOptions.find(
-    (a) => a.value === e[A].recipient.selectedOption
-  );
-  return {
-    vendorType: m === !0 ? void 0 : e[A].recipientType.selectedOption,
-    vendorId: o,
-    vendorName: y?.label ?? i?.vendorName,
-    contacts: m === !0 ? [] : [
-      {
-        fullName: "",
-        email: e[A].recipientEmail,
-        phone: ""
-      }
-    ],
-    bankAccountIds: m === !0 ? [] : i?.bankAccountIds ?? [],
-    paymentInstrumentIds: m === !0 ? [] : i?.paymentInstrumentIds ?? [],
-    vendorOwner: m === !0 ? void 0 : i?.vendorOwner,
-    isVendor1099: i?.isVendor1099,
-    documentIds: i?.documentIds ?? [],
-    fileIdsToBeDeleted: i?.fileIdsToBeDeleted ?? [],
-    countryCode: m === !0 ? void 0 : i?.countryCode,
-    currencyCode: i?.currencyCode,
-    currencySymbol: m === !0 ? void 0 : i?.currencySymbol,
-    deleteFileStatusById: i?.deleteFileStatusById ?? {},
-    updateFileStatusById: i?.updateFileStatusById ?? {},
-    recommendedCategory: i?.recommendedCategory,
-    recommendedClass: i?.recommendedClass,
-    isCategoryUpdateSelected: i?.isCategoryUpdateSelected ?? !1,
-    isClassUpdateSelected: i?.isClassUpdateSelected ?? !1,
-    isCategoryRecommendationPrefilled: i?.isCategoryRecommendationPrefilled ?? !0,
-    isClassRecommendationPrefilled: i?.isClassRecommendationPrefilled ?? !0
-  };
-}
-const tn = c.div`
-  display: flex;
-  flex-wrap: wrap;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  background-color: ${(e) => e.theme.colors.grey4};
-  margin-top: ${(e) => e.windowSize === "small" ? l.sp3 : 0};
-`;
-export {
-  cn as default,
-  Dt as formUniqueName
-};