@zeniai/web-components 3.17.3 → 3.17.4

package/dist/ExpressPayPage-CgQPS4bt.js

@@ -0,0 +1,1136 @@
+import { u as ze, j as t, g as nt, h as it, F as ot } from "./vendor-.pnpm-B2klaOGU.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, l4 as st, l5 as dt, S as l, n as ct, R as s, al as mt, hQ as ut, hR as pt, fj as ke, ij as ht, l6 as gt, aH as yt, fn as qe, fk as xt, D as n, k as we, hn as He, C as Ue, E as bt, l7 as ft, aS as wt, ho as Oe, hv as Ae, t as ye, hz as vt, eo as _e, aD as Le, aE as St, ao as Tt } from "./index-CR2Dmphx.js";
+import { L as Pt } from "./LabeledDocumentField-CEZCg_0V.js";
+import { L as ee } from "./LabeledText-C1bxn2Gb.js";
+const jt = {
+  progressBarWidth: new s(343, 726)
+}, Ct = ({ 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(
+      At,
+      {
+        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) => jt.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;
+`, At = 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}`, Lt = ({
+  sectionId: e,
+  paymentDetails: o,
+  allPaymentMethods: i,
+  paymentToOptions: m,
+  withdrawFromList: y,
+  internationalVerificationStatus: g,
+  fileProps: a,
+  receiptFile: I,
+  deleteFileStatusById: j,
+  updateFileStatusById: C,
+  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: j,
+          updateFileStatusById: C,
+          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(Rt, { 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%;
+`, Rt = 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};
+`, Nt = {
+  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 = Nt.largeLabelWidth.value(g), j = lt();
+  fe(() => {
+    m?.entityAutoCompleteView.fetchState === "Completed" && j.current?.(
+      Wt(m?.entityAutoCompleteView)
+    );
+  }, [m?.entityAutoCompleteView.fetchState]);
+  const P = {
+    vendorSearchAutoCompleteData: m,
+    loadOptions: (d, w) => {
+      y?.onAutoCompleteInputChange?.(
+        d,
+        "vendor"
+      ), j.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: j } = q.getLocalizedStrings(), C = a.billDetails, P = o?.paymentType, p = I.visual.MMMDCommaYYYYformat, f = {
+    amount: o?.amount?.amount ?? 0,
+    currencyCode: j.currency.currencyCode,
+    currencySymbol: j.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: C.pay }),
+      /* @__PURE__ */ t.jsx(ne, { children: /* @__PURE__ */ t.jsx(
+        Ae,
+        {
+          amount: f,
+          integerStyles: ye.largeSemiBold.cssObject
+        }
+      ) }),
+      /* @__PURE__ */ t.jsx(ne, { children: C.to }),
+      /* @__PURE__ */ t.jsx(ne, { children: e })
+    ] }),
+    /* @__PURE__ */ t.jsxs(Gt, { windowSize: y, children: [
+      /* @__PURE__ */ t.jsx(
+        ee,
+        {
+          label: {
+            label: C.withdrawFrom,
+            width: g
+          },
+          style: { width: "auto", gap: n[3] },
+          value: o?.withdrawFrom != null ? vt(
+            o.withdrawFrom,
+            y
+          ) : j.strings.empty
+        }
+      ),
+      /* @__PURE__ */ t.jsx(be, {}),
+      /* @__PURE__ */ t.jsx(
+        ee,
+        {
+          label: {
+            label: C.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: C.paymentDate,
+              width: g
+            },
+            style: { width: "auto" },
+            value: d.format(p),
+            additionalInfoLabel: `${C.estimatedArrival}${Ee(
+              Ve(
+                d.toDate(),
+                [0, 6],
+                P?.maxPeriod.value ?? 0
+              ).toDateString()
+            ).format(p)} - (${w.length > 0 ? `${w} ` : ""}${C.deliveryTimeLabel} = ${P?.maxPeriod.value ?? "0"} ${C.deliveryTimeUnits})`
+          }
+        ),
+        /* @__PURE__ */ t.jsx(be, {})
+      ] }) : null,
+      /* @__PURE__ */ t.jsx(
+        ee,
+        {
+          label: {
+            label: C.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(
+        Ae,
+        {
+          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};
+`, Re = "expressPayPage", Dt = (e) => `${e}_form`, L = "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: j,
+  saveVendorDetailLocalData: C,
+  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, je = B.find(
+    (u) => u.id === m
+  ), D = nt({
+    mode: "onBlur",
+    reValidateMode: "onChange",
+    defaultValues: Ne(
+      X,
+      B,
+      O,
+      je,
+      U,
+      M,
+      x,
+      T,
+      d?.entityAutoCompleteView
+    ),
+    values: Ne(
+      X,
+      B,
+      O,
+      je,
+      U,
+      M,
+      x,
+      T,
+      d?.entityAutoCompleteView
+    )
+  }), Ce = Le(
+    Pe.saveStatus?.fetchState
+  ), $e = Le(h);
+  fe(() => {
+    const u = D.watch((S, { name: b }) => {
+      b != null && S != null && it(() => Ze(b, S));
+    });
+    return () => {
+      u.unsubscribe();
+    };
+  }), fe(() => {
+    Ce === "In-Progress" && _ === "Completed" && (v === 0 ? (Z(1), p?.(x?.vendorId)) : v === 1 && Z(2)), $e === "In-Progress" && h === "Completed" && j(x?.vendorId);
+  }, [
+    Ce,
+    _,
+    v,
+    p,
+    x?.vendorId,
+    $e,
+    h,
+    j
+  ]);
+  const Ze = async (u, S) => {
+    if (u !== "recipientDetails.recipientEmail")
+      if (u === "recipientDetails.recipient") {
+        const b = S[L].recipient.selectedOption, A = d?.entityAutoCompleteView.vendor.find(
+          (Y) => Y.zeniId === b
+        );
+        Ge(S), $(), M?.vendorId !== b && A != null && (a?.(b), he(
+          S,
+          !1,
+          O,
+          b
+        ));
+      } else if (u.includes("recipient"))
+        pe(S);
+      else {
+        const b = S[k].paymentMethod?.method, A = x?.paymentType?.method, Y = b != null && A != null && (b.toLowerCase().includes("ach") && A.toLowerCase().includes("wire") || b.toLowerCase().includes("wire") && A.toLowerCase().includes("ach"));
+        he(
+          S,
+          Y,
+          O,
+          x?.vendorId
+        );
+      }
+  }, Ge = (u) => {
+    const S = u[L].recipient.selectedOption, b = d?.entityAutoCompleteView.vendor.find(
+      (A) => A.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, A = d?.entityAutoCompleteView.vendor.find(
+      (ge) => ge.zeniId === b
+    ) != null, Y = en(
+      u,
+      A === !0 ? b : void 0,
+      M,
+      S
+    );
+    C?.(Y, b);
+  }, he = (u, S, b, A) => {
+    const ge = (() => {
+      let R = [];
+      return u[k].paymentMethod?.method.includes(
+        "wire"
+      ) === !0 ? R = b.filter((N) => !!N.bankRoutingNumberWireTransfer).map((N) => N.id) : R = b.filter((N) => !!N.bankRoutingNumberAch).map((N) => N.id), R;
+    })(), et = b.find(
+      (R) => R.id === u[k]?.paymentTo?.selectedOption
+    ), tt = {
+      vendorId: A,
+      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(
+        (R) => R.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) : j(x?.vendorId);
+  }, De = () => {
+    v === 0 ? j(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(Ct, { pageIndex: v }),
+      /* @__PURE__ */ t.jsx(ot, { ...D, children: /* @__PURE__ */ t.jsx("form", { id: Re, onSubmit: Fe, children: v === 0 ? /* @__PURE__ */ t.jsx(
+        zt,
+        {
+          sectionId: L,
+          vendorTypeList: X,
+          formLocalData: M,
+          vendorSearchAutoCompleteData: d,
+          vendorSearchAutoCompleteActions: w
+        }
+      ) : v === 1 ? /* @__PURE__ */ t.jsx(
+        Lt,
+        {
+          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(Re),
+        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
+        }
+      }
+    )
+  ] });
+}, Ne = (e, o, i, m, y, g, a, I, j) => {
+  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 {
+    [L]: {
+      recipient: {
+        defaultOptions: Ye(
+          g?.vendorId,
+          g?.vendorName,
+          j
+        ),
+        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[L].recipient.defaultOptions.find(
+    (a) => a.value === e[L].recipient.selectedOption
+  );
+  return {
+    vendorType: m === !0 ? void 0 : e[L].recipientType.selectedOption,
+    vendorId: o,
+    vendorName: y?.label ?? i?.vendorName,
+    contacts: m === !0 ? [] : [
+      {
+        fullName: "",
+        email: e[L].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
+};