@zeniai/web-components 3.16.39 → 3.16.40

package/dist/CreditCardPaymentDrawerPage-DjUsTinZ.js

@@ -1,1171 +0,0 @@
-import { u as ze, j as t, g as na, aD as oa, h as ra, F as ia } from "./vendor-.pnpm-BZbZ6JJC.js";
-import o from "@emotion/styled";
-import { useState as Y, useEffect as M, useRef as la, useMemo as we, useCallback as $e } from "react";
-import { u as me, dB as pe, R as d, Z as ca, a as U, j as ae, hs as _e, av as H, C as Z, S as a, ao as Ce, t as sa, a5 as Ee, ap as Oe, F as da, V as Ne, e_ as Ie, hz as ua, _ as ma, p as We, b as Ve, hP as pa, w as ga, hR as ha, hJ as ya, hX as fa, D as i, aD as Se, am as xa, hN as wa, fh as $a, ia as Ca, a1 as Sa, hQ as va, iY as La, B as ba, A as Ra, aj as Pa, er as Aa, H as Ta } from "./index-tqMNQjSm.js";
-import { zeniDate as de, getNextNthWorkingDay as ja, dateNow as ka, isVerifiedPaymentAccountProviderStatusCode as Da, isVerifiedStatusCode as ve, checkIfLowBalance as Fa } from "@zeniai/client-epic-state";
-import { L as Ba } from "./LabeledControlledCheckBoxField-B4Jzs1P3.js";
-import { C as Ma } from "./ChargeCardUtils-CuCE8WUR.js";
-import { C as Le } from "./CreditCardPaymentPlgSection-aSz8bfzl.js";
-const te = {
-  largeLabelWidth: new d(120, 120, 160),
-  navBarContainerPaddingXaxis: new d(10, 19),
-  containerPaddingLeft: new d(i[3], i[6], i[8]),
-  containerPaddingRight: new d(i[3], i[6], i[8]),
-  reviewContentWrapperPaddingBottom: new d(i[5], i[8])
-}, ue = {
-  pageTitle: new H("h6Regular", "h5Regular"),
-  integerAmountInput: new H("h5Regular", "h2Regular"),
-  decimalAmountInput: new H("largeSemiBold", "h5Medium")
-}, {
-  dateFormat: {
-    visual: { MMMDCommaYYYYformat: za }
-  },
-  common: {
-    edit: _a,
-    labels: be,
-    currency: Re,
-    navBar: { back: Ea }
-  },
-  spendManagement: {
-    zeniAccounts: {
-      zeniAccountList: { transferDrawer: Oa }
-    },
-    chargeCard: { payEarly: ee }
-  }
-} = U.getLocalizedStrings(), Na = ({
-  paymentDetails: e,
-  isCashbackInfoFetchStateCompleted: r,
-  isCreditCardInfoFetchStateCompleted: p,
-  isDebitCardInfoFetchStateCompleted: n,
-  controllerEmails: g,
-  productInformation: c,
-  cashbackInformation: y,
-  paymentSourceInformation: R,
-  creditAccountInformation: h,
-  debitAccountInformation: x,
-  setShowReviewContent: w,
-  onTransferClick: f,
-  isCompleteOutstandingBalanceBeingPaid: S
-}) => {
-  const u = me(), j = ze(), k = pe().analytics, [z, v] = Y(!1);
-  M(() => {
-    e.error != null ? v(!0) : v(!1);
-  }, [e.error]);
-  const D = te.largeLabelWidth.value(u);
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsxs(Xa, { windowSize: u, children: [
-      /* @__PURE__ */ t.jsx(ot, { windowSize: u, children: /* @__PURE__ */ t.jsx(ca, { title: Ea, enterTouchDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
-        nt,
-        {
-          "data-testid": ae(
-            "nav-bar-back-credit-card-payment-review"
-          ),
-          onClick: () => {
-            r && p && n && k.trackCardsPayEarlyFormClick(
-              g,
-              c,
-              y,
-              "Back",
-              e.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-              {
-                paymentAmount: e.chargeCardRepaymentDetailLocalData.amount.amount,
-                paymentAccountName: e.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-                paymentAccountType: e.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-                paymentAccountLastFourDigits: e.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-                paymentCompleteEta: void 0,
-                paymentInitiatedDate: void 0
-              },
-              R,
-              h,
-              x
-            ), w(!1);
-          }
-        }
-      ) }) }),
-      /* @__PURE__ */ t.jsx(rt, { windowSize: u, children: Oa.reviewAndConfirm }),
-      /* @__PURE__ */ t.jsx(Wa, { children: /* @__PURE__ */ t.jsx(
-        _e,
-        {
-          amount: e.chargeCardRepaymentDetailLocalData.amount,
-          integerStyles: ue.integerAmountInput.styleObject(
-            u
-          ),
-          decimalStyles: ue.decimalAmountInput.styleObject(
-            u
-          )
-        }
-      ) }),
-      z ? /* @__PURE__ */ t.jsx(qa, { children: /* @__PURE__ */ t.jsxs(Ha, { children: [
-        /* @__PURE__ */ t.jsxs(Ka, { children: [
-          /* @__PURE__ */ t.jsx(Qa, {}),
-          /* @__PURE__ */ t.jsxs(Ua, { children: [
-            /* @__PURE__ */ t.jsx(Za, { children: e.error?.title }),
-            /* @__PURE__ */ t.jsx(Ga, { children: e.error?.message })
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsx(Ja, { children: /* @__PURE__ */ t.jsx(
-          et,
-          {
-            "data-testid": ae(
-              "close-error-credit-card-payment-review"
-            ),
-            onClick: () => {
-              v(!1);
-            },
-            style: {
-              width: a.sp3,
-              height: a.sp3,
-              color: Z.heroLight
-            }
-          }
-        ) })
-      ] }) }) : null,
-      /* @__PURE__ */ t.jsx(tt, { windowSize: u, children: /* @__PURE__ */ t.jsxs(Ya, { children: [
-        /* @__PURE__ */ t.jsx(
-          Ce,
-          {
-            label: {
-              label: be.transferFrom,
-              width: D
-            },
-            text: /* @__PURE__ */ t.jsxs(Pe, { windowSize: u, children: [
-              Ye(
-                e.transferFromAccounts,
-                e.chargeCardRepaymentDetailLocalData.transferFrom?.id ?? "",
-                !0
-              ),
-              /* @__PURE__ */ t.jsx(Va, { windowSize: u, children: e.chargeCardRepaymentDetailLocalData.transferFrom?.label })
-            ] }),
-            style: { width: "auto" }
-          }
-        ),
-        /* @__PURE__ */ t.jsx(at, {}),
-        /* @__PURE__ */ t.jsx(
-          Ce,
-          {
-            label: {
-              label: be.amount,
-              width: D
-            },
-            showAdditionalInfoLabel: !0,
-            additionalInfoLabel: `${S ? ee.creditLimitReset : ee.creditLimitUpdate} ${de(
-              ja(
-                ka().toDate(),
-                [0, 6],
-                3
-              ).toDateString()
-            ).format(za)} ${ee.business23Days}`,
-            additionalInfoLabelStyles: {
-              color: j.colors.hero,
-              ...sa.smallRegular.cssObject
-            },
-            text: /* @__PURE__ */ t.jsx(Pe, { windowSize: u, children: Ee("0,0.[00]", {
-              amount: e.chargeCardRepaymentDetailLocalData.amount.amount,
-              currencyCode: Re.currencyCode,
-              currencySymbol: Re.currencySymbol
-            }) }),
-            style: { width: "auto" }
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      Oe,
-      {
-        style: { zIndex: 4, paddingTop: a.sp3, paddingBottom: a.sp0 },
-        helperText: ee.byClickingPayNowIAuthorizeZeniToInitiateThePayment,
-        helperStyle: {
-          padding: `${a.sp0} ${a.sp0} ${a.sp3} ${a.sp0}`
-        },
-        cancelBtn: {
-          label: _a,
-          onClick: () => {
-            r && p && n && k.trackCardsPayEarlyFormClick(
-              g,
-              c,
-              y,
-              "Edit",
-              e.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-              {
-                paymentAmount: e.chargeCardRepaymentDetailLocalData.amount.amount,
-                paymentAccountName: e.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-                paymentAccountType: e.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-                paymentAccountLastFourDigits: e.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-                paymentCompleteEta: void 0,
-                paymentInitiatedDate: void 0
-              },
-              R,
-              h,
-              x
-            ), w(!1);
-          },
-          style: { minWidth: 94 }
-        },
-        primaryBtn: {
-          label: ee.payNow,
-          onClick: f,
-          isLoading: e.updateStatus === "In-Progress",
-          style: { minWidth: 94 }
-        }
-      }
-    )
-  ] });
-}, Ye = (e, r, p) => {
-  if (r === "")
-    return /* @__PURE__ */ t.jsx(ut, {});
-  const n = e.find(
-    (c) => c.id === r
-  ), g = e.findIndex(
-    (c) => c.id === r
-  );
-  if (n != null) {
-    if (n.accType === "depositAccount")
-      return /* @__PURE__ */ t.jsx(
-        st,
-        {
-          isOptionSelected: p,
-          children: /* @__PURE__ */ t.jsx(
-            dt,
-            {
-              color: pa(g)
-            }
-          )
-        }
-      );
-    if (n.accType === "paymentAccount")
-      return n.logo !== void 0 && (n.logo.base64 || n.logo.url) ? /* @__PURE__ */ t.jsx(
-        it,
-        {
-          src: Ia(n.logo),
-          isOptionSelected: p,
-          loading: "lazy"
-        }
-      ) : /* @__PURE__ */ t.jsx(lt, { isOptionSelected: p, children: /* @__PURE__ */ t.jsx(ct, {}) });
-  }
-  return null;
-}, Ia = (e) => e.base64 !== void 0 ? `${ya}${e.base64.toString()}` : e.url !== void 0 ? e.url.toString() : "", Wa = o(Ie)`
-  color: ${(e) => e.theme.colors.primary};
-  padding-top: ${a.sp3};
-`, Va = o.div`
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-`, Pe = o(We)`
-  display: flex;
-  align-items: ${(e) => e.windowSize === "small" ? "start" : "center"};
-`, Ya = o.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${a.sp0} 2px ${a.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${a.sp2};
-`, Ha = o.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  padding: ${a.sp3} ${a.sp4};
-  background-color: ${Z.importantLight};
-  border-radius: ${a.sp2};
-`, Ua = o.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: ${a.sp2};
-`, Za = o(ma)`
-  color: ${Z.important};
-`, Ga = o(We)`
-  color: ${Z.important};
-`, qa = o.div`
-  margin-top: ${a.sp3};
-  display: flex;
-  background-color: ${(e) => e.theme.colors.grey5};
-  justify-content: space-between;
-  padding: ${a.sp3} ${a.sp4};
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-radius: ${a.sp2};
-  box-shadow: ${(e) => `${a.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
-`, Xa = o.div`
-  height: auto;
-  padding-left: ${(e) => `${te.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${te.containerPaddingRight.valuePx(e.windowSize)}`};
-  margin-bottom: auto;
-`, Ka = o.div`
-  display: flex;
-  align-items: flex-start;
-`, Ja = o.div``, Qa = o(ua)`
-  width: ${a.sp4};
-  height: ${a.sp4};
-  color: ${Z.important};
-`, et = o(Ve)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  min-height: ${a.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, at = o.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, tt = o.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${a.sp3};
-  padding-bottom: ${(e) => `${te.reviewContentWrapperPaddingBottom.valuePx(
-  e.windowSize
-)}`};
-`, nt = o(da)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  min-height: ${a.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, ot = o.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  top: ${a.sp0};
-  padding: ${(e) => `${te.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${a.sp0}`};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, rt = o(Ne)`
-  ${(e) => `${ue.pageTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  padding: ${a.sp3} ${a.sp0} ${a.sp3} ${a.sp0};
-`, it = o.img`
-  display: flex;
-  width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  height: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  min-width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  margin-right: ${a.sp2};
-`, lt = o.div`
-  min-width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  height: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-`, ct = o(fa)`
-  min-width: inherit;
-  width: inherit;
-  height: inherit;
-  margin-right: ${a.sp2};
-`, st = o.div`
-  min-width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  width: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  height: ${(e) => e.isOptionSelected ? a.sp4 : a.sp5};
-  margin-right: ${a.sp2};
-`, dt = o(ha)`
-  min-width: inherit;
-  width: inherit;
-  height: inherit;
-  margin-right: ${a.sp2};
-`, ut = o(ga)`
-  min-width: ${a.sp4};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  margin-right: 12px;
-  margin-left: ${a.sp1};
-  color: ${(e) => e.theme.colors.hero};
-`, {
-  common: se,
-  spendManagement: {
-    zeniAccounts: { zeniAccountList: mt },
-    billPay: { insufficientFunds: pt },
-    chargeCard: { payEarly: W }
-  },
-  commonSetUp: {
-    setUp: { accountsPlg: re }
-  }
-} = U.getLocalizedStrings(), He = "amount", gt = "withdrawFrom", _ = "paymentDetails", Ue = "creditCardPaymentPage", ie = (e, r) => `${e}.${r}`, Ze = (e) => `${e}_form`, $ = {
-  largeLabelWidth: new d(120, 120, 160),
-  labelMarginRight: new d(i[3], i[3]),
-  labelMarginLeftPicker: new d(i[3], i[4]),
-  labelMarginRightPicker: new d(i[3], i[4]),
-  labelMarginTopPicker: new d(i[2], i[2]),
-  labeledFieldPaddingLeft: new d(i[2], i[0]),
-  labeledFieldPaddingRight: new d(i[2], i[2]),
-  labeledFieldPaddingTop: new d(i[2], i[2]),
-  labeledFieldPaddingBottom: new d(i[2], i[2]),
-  infoLabelPaddingRight: new d(i[0], i[3]),
-  infoLabelMarginTop: new d(i[1], i[0]),
-  checkBoxTop: new d(i[1], i[0])
-}, Ae = {
-  integerAmountInput: new H("h5Regular", "h2Regular"),
-  decimalAmountInput: new H("largeSemiBold", "h5Medium")
-};
-function ht({
-  autoPayThreshold: e,
-  plaidConnectionDetails: r,
-  maxInsuredAmount: p,
-  paymentDetails: n,
-  lowBalanceAdditionalInfo: g,
-  paymentAccount: c,
-  isAccountsEnabled: y,
-  onSaveChangesToLocalStore: R,
-  onUpdatePaymentAccountStatus: h,
-  onEstablishConnectionClick: x,
-  onEstablishConnectionSuccess: w,
-  onFetchLinkTokenClick: f,
-  setShowReviewLoading: S,
-  onSignUpAccountClick: u,
-  onMoveMoneyClick: j,
-  isCashbackInfoFetchStateCompleted: E,
-  isCreditCardInfoFetchStateCompleted: k,
-  isDebitCardInfoFetchStateCompleted: z,
-  controllerEmails: v,
-  productInformation: D,
-  cashbackInformation: G,
-  paymentSourceInformation: q,
-  creditAccountInformation: X,
-  debitAccountInformation: K
-}) {
-  const s = me(), le = ze(), C = $.largeLabelWidth.value(s), J = pe().analytics, Q = la(null), [F, B] = Y(!1), [P, O] = Y(
-    void 0
-  ), b = r.link_account, oe = r.update_account, L = P === "update_account" ? oe : b, [N, ge] = Y(L.linkToken ?? null), he = Se(
-    b.updateStatus.fetchState
-  ), I = na({
-    mode: "all",
-    reValidateMode: "onBlur",
-    defaultValues: we(
-      () => Te(n),
-      [n]
-    ),
-    values: we(() => Te(n), [n])
-  }), ye = c?.isLoginRequired ?? !1, A = c?.providerVerificationStatus?.code, fe = Se(
-    oe.updateStatus.fetchState
-  ), qe = $e(
-    (l, m) => {
-      const T = m.accounts.find(
-        (ta) => ta.id === c?.providerAccountId
-      ) ?? m.accounts[0];
-      c?.paymentAccountId != null && P === "update_account" && T?.verification_status != null && !ye ? h(
-        T?.verification_status,
-        c.paymentAccountId,
-        "update_account"
-      ) : x?.(l, P), O(void 0), B(!1);
-    },
-    [
-      c?.paymentAccountId,
-      c?.providerAccountId,
-      P,
-      ye,
-      h,
-      x
-    ]
-  ), Xe = $e(
-    (l, m) => {
-      l != null && (l.error_code === "TOO_MANY_VERIFICATION_ATTEMPTS" && c?.paymentAccountId != null && h(
-        "verification_failed",
-        c.paymentAccountId,
-        "update_account"
-      ), console.log("Plaid Connection Error", l, m)), O(void 0), B(!1);
-    },
-    [c?.paymentAccountId, h]
-  ), { open: ce, ready: xe } = oa({
-    token: N,
-    onSuccess: qe,
-    onExit: Xe
-  });
-  M(() => {
-    (he === "In-Progress" && b.updateStatus.fetchState === "Completed" || fe === "In-Progress" && oe.updateStatus.fetchState === "Completed") && (Da(A ?? "") || (f?.("link_account"), w()));
-  }, [
-    b.updateStatus.fetchState,
-    w,
-    f,
-    he,
-    fe,
-    oe.updateStatus.fetchState,
-    A
-  ]), M(() => {
-    (ve(A ?? "") || A === "verification_failed") && !F && P != null && L.linkToken === N && L.fetchStatus.fetchState === "Completed" && xe && B(!0);
-  }, [
-    xe,
-    N,
-    L.fetchStatus.fetchState,
-    L.linkToken,
-    A,
-    P,
-    F
-  ]), M(() => {
-    L.fetchStatus.fetchState === "Completed" && L.linkToken != null && L.linkToken !== N && ge(L.linkToken);
-  }, [L.fetchStatus.fetchState, L.linkToken, N]), M(() => {
-    F && ce();
-  }, [F, ce]), M(() => {
-    (A == null || A === "verification_failed" || A === "verification_expired" || ve(A)) && (de((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-      b.expiration
-    ) || b.linkToken == null) && f?.("link_account");
-  }, []);
-  const { isValid: Ke } = I.formState, Je = async (l, m) => {
-    if (l != null) {
-      if (l.includes("amount"))
-        return;
-      const T = je(
-        m,
-        n.transferFromAccounts,
-        n.chargeCardRepaymentDetailLocalData.idempotencyKey
-      );
-      R(T);
-    }
-  }, Qe = (l) => {
-    if (g != null)
-      return g;
-    const m = n.transferFromAccounts.find(
-      (T) => T.id === l
-    );
-    return m?.accountBalance?.available != null && Fa(
-      n.chargeCardRepaymentDetailLocalData.amount,
-      m?.accountBalance?.available
-    ) ? pt.addMoney : "";
-  };
-  M(() => {
-    const l = I.watch((m, { name: T }) => {
-      T != null && m != null && ra(() => Je(T, m));
-    });
-    return () => {
-      l.unsubscribe();
-    };
-  });
-  const ea = I.watch("paymentDetails.amount"), aa = I.handleSubmit(() => {
-    if (Ke) {
-      const l = I.getValues(), m = je(
-        l,
-        n.transferFromAccounts,
-        n.chargeCardRepaymentDetailLocalData.idempotencyKey
-      );
-      R(m), S(!0), E && k && z && J.trackCardsPayEarlyFormClick(
-        v,
-        D,
-        G,
-        "Review",
-        n.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-        {
-          paymentAmount: n.chargeCardRepaymentDetailLocalData.amount.amount,
-          paymentAccountName: n.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-          paymentAccountType: n.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-          paymentAccountLastFourDigits: n.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-          paymentCompleteEta: void 0,
-          paymentInitiatedDate: void 0
-        },
-        q,
-        X,
-        K
-      );
-    }
-  });
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx($t, { children: /* @__PURE__ */ t.jsx(
-      _e,
-      {
-        amount: {
-          amount: ea ?? 0,
-          currencyCode: n.chargeCardRepaymentDetailLocalData.amount.currencyCode,
-          currencySymbol: n.chargeCardRepaymentDetailLocalData.amount.currencySymbol
-        },
-        integerStyles: Ae.integerAmountInput.styleObject(s),
-        decimalStyles: Ae.decimalAmountInput.styleObject(s)
-      }
-    ) }),
-    /* @__PURE__ */ t.jsx(ia, { ...I, children: /* @__PURE__ */ t.jsx(
-      wt,
-      {
-        id: Ze(Ue),
-        onSubmit: aa,
-        children: /* @__PURE__ */ t.jsxs(Ct, { children: [
-          /* @__PURE__ */ t.jsx(
-            xa,
-            {
-              selectRef: Q,
-              label: {
-                label: se.labels.transferFrom,
-                width: C,
-                style: {
-                  marginLeft: $.labelMarginLeftPicker.valuePx(s),
-                  marginTop: $.labelMarginTopPicker.valuePx(s),
-                  marginRight: $.labelMarginRightPicker.valuePx(s),
-                  width: $.largeLabelWidth.value(s)
-                }
-              },
-              style: {
-                paddingTop: $.labeledFieldPaddingTop.valuePx(s),
-                paddingBottom: $.labeledFieldPaddingBottom.valuePx(s),
-                paddingLeft: $.labeledFieldPaddingLeft.valuePx(s),
-                paddingRight: $.labeledFieldPaddingRight.valuePx(s),
-                border: "none",
-                width: "auto",
-                display: "flex"
-              },
-              infoLabelStyle: {
-                textAlign: "right",
-                paddingRight: $.infoLabelPaddingRight.valuePx(s),
-                marginTop: $.infoLabelMarginTop.valuePx(s),
-                color: Z.brandColorGoldDark
-              },
-              bottomComponent: /* @__PURE__ */ t.jsx(
-                Ba,
-                {
-                  label: {
-                    label: W.enableAutoPay.replace(
-                      "__autoPayThreshold__",
-                      e.toString()
-                    ),
-                    style: {
-                      textAlign: s === "small" ? "end" : "center",
-                      color: le.colors.primary
-                    }
-                  },
-                  style: {
-                    width: "unset",
-                    marginRight: a.sp3,
-                    alignItems: s === "small" ? "flex-start" : "center"
-                  },
-                  checkBoxField: {
-                    name: ie(
-                      _,
-                      "enableAutoPay"
-                    ),
-                    checkBoxValue: ie(
-                      _,
-                      "enableAutoPay"
-                    ),
-                    defaultChecked: n.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-                    style: {
-                      top: $.checkBoxTop.valuePx(s)
-                    }
-                  }
-                }
-              ),
-              singleSelectPickerField: {
-                name: ie(_, gt),
-                placeholder: $a(
-                  se.labels.transferFrom
-                ),
-                style: { position: "relative" },
-                capitalizeOptions: !0,
-                isOptionRemovable: !1,
-                showTickIcon: !1,
-                valueToLogo: (l, m) => Ye(
-                  n.transferFromAccounts,
-                  l,
-                  m
-                ),
-                valueToSubLabels: (l, m) => wa(
-                  n.transferFromAccounts,
-                  l,
-                  m,
-                  !0
-                ),
-                defaultValue: {
-                  selectedOption: n.chargeCardRepaymentDetailLocalData.transferFrom?.id,
-                  allOptions: n.transferFromAccounts.map(
-                    (l) => ({
-                      label: l.label,
-                      value: l.id,
-                      isRecommended: l.accType === "depositAccount"
-                    })
-                  )
-                },
-                textAlignment: "right",
-                registerOptions: {
-                  required: !0,
-                  validate: (l) => l != null && !!l.selectedOption
-                },
-                showCreateOption: !0,
-                onClickCreateOption: () => {
-                  O("link_account"), b.linkToken == null || de((/* @__PURE__ */ new Date()).toISOString()).isAfter(
-                    b.expiration
-                  ) ? f?.("link_account") : N !== b.linkToken ? ge(b.linkToken) : F ? ce() : B(!0);
-                }
-              },
-              valueToAdditionalLabel: Qe
-            }
-          ),
-          n?.chargeCardRepaymentDetailLocalData.transferFrom == null || n?.chargeCardRepaymentDetailLocalData.transferFrom?.accType === "paymentAccount" ? /* @__PURE__ */ t.jsx(
-            Le,
-            {
-              maxInsuredAmount: p,
-              heading: /* @__PURE__ */ t.jsxs(yt, { windowSize: s, children: [
-                W.earn,
-                /* @__PURE__ */ t.jsx(ft, { children: W.percentageCashback.replace(
-                  "__percentage__",
-                  Ma
-                ) }),
-                W.whenYouPayViaZeniChecking
-              ] }),
-              buttonText: y ? re.switchButtonText : re.signUpButtonText,
-              isAccountsEnabled: y,
-              pageName: W.creditCardPayment,
-              onSignUpClick: u,
-              onSwitchClick: () => {
-                Q.current != null && Q.current.focus();
-              }
-            }
-          ) : n?.chargeCardRepaymentDetailLocalData.transferFrom?.accType === "depositAccount" && n?.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance != null && n.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance.available != null && n.chargeCardRepaymentDetailLocalData.transferFrom.accountBalance.available.amount < n.chargeCardRepaymentDetailLocalData.amount.amount ? /* @__PURE__ */ t.jsx(
-            Le,
-            {
-              maxInsuredAmount: p,
-              heading: re.moveMoneyHeading,
-              buttonText: re.moveMoneyButtonText,
-              isAccountsEnabled: y,
-              pageName: W.creditCardPayment,
-              onMoveMoneyClick: j
-            }
-          ) : /* @__PURE__ */ t.jsx(xt, {}),
-          /* @__PURE__ */ t.jsx(
-            Ca,
-            {
-              showAdditionalInfoLabel: !1,
-              label: {
-                label: se.labels.amount,
-                width: C
-              },
-              formattedTextField: {
-                type: "number",
-                name: ie(_, He),
-                defaultValue: n.chargeCardRepaymentDetailLocalData.amount.amount === 0 ? void 0 : n.chargeCardRepaymentDetailLocalData.amount.amount,
-                placeholder: mt.transferDrawer.amountPlaceholder,
-                returnValueType: "floatValue",
-                prefix: "$",
-                allowNegative: !1,
-                isNumericString: !1,
-                registerOptions: {
-                  required: !0,
-                  validate: (l) => !!l && l > 0
-                },
-                autoComplete: "off",
-                decimalSeparator: ".",
-                decimalScale: 2,
-                fixedDecimalScale: !1,
-                thousandSeparator: !0,
-                allowLeadingZeros: !1
-              },
-              style: {
-                width: "auto",
-                paddingLeft: $.labeledFieldPaddingLeft.valuePx(s)
-              }
-            }
-          )
-        ] })
-      }
-    ) })
-  ] });
-}
-const yt = o(Sa)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${(e) => e.windowSize === "small" ? "80%" : "100%"};
-`, ft = o(va)`
-  color: ${(e) => e.theme.colors.primary};
-`, xt = o.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Te = (e) => ({
-  paymentDetails: {
-    [He]: e.chargeCardRepaymentDetailLocalData.amount.amount,
-    withdrawFrom: {
-      allOptions: e.transferFromAccounts.map(
-        (r) => ({
-          label: r.label,
-          value: r.id
-        })
-      ),
-      selectedOption: e.chargeCardRepaymentDetailLocalData.transferFrom?.id
-    },
-    enableAutoPay: e.chargeCardRepaymentDetailLocalData.isAutoRepayment
-  }
-}), wt = o.form`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: ${a.sp6};
-`, $t = o(Ie)`
-  color: ${(e) => e.theme.colors.primary};
-  margin: ${a.sp5} ${a.sp0} ${a.sp3} ${a.sp0};
-`, Ct = o.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${a.sp0} 2px ${a.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${a.sp2};
-`, je = (e, r, p) => ({
-  amount: {
-    amount: e[_].amount ?? 0,
-    currencyCode: "USD",
-    currencySymbol: "$"
-  },
-  transferFrom: r.find(
-    (n) => n.id === e[_].withdrawFrom.selectedOption
-  ),
-  isAutoRepayment: e[_].enableAutoPay,
-  idempotencyKey: p
-}), ne = {
-  navBarContainerPaddingXaxis: new d(10, 19),
-  containerPaddingLeft: new d(16, 40, 56),
-  containerPaddingRight: new d(16, 40, 56),
-  successContentMargin: new d(i[3], i[12]),
-  buttonTrayGap: new d(i[4], i[5])
-}, St = {
-  sectionTitle: new H("h6Regular", "h5Regular")
-}, ke = U.getLocalizedStrings().spendManagement.zeniAccounts.zeniAccountList, V = U.getLocalizedStrings().spendManagement.chargeCard.payEarly, { dateFormat: De } = U.getLocalizedStrings(), vt = ({
-  autoPayThreshold: e,
-  paymentDetails: r,
-  maxInsuredAmount: p,
-  isAccountsEnabled: n,
-  productInformation: g,
-  controllerEmails: c,
-  creditAccountInformation: y,
-  creditAccountSpentAmount: R,
-  debitAccountInformation: h,
-  cashbackInformation: x,
-  paymentSourceInformation: w,
-  isCashbackInfoFetchStateCompleted: f,
-  isCreditCardInfoFetchStateCompleted: S,
-  isDebitCardInfoFetchStateCompleted: u,
-  paymentInitiatedDate: j,
-  onSaveChangesToLocalStore: E,
-  onTransferClick: k,
-  goToCards: z,
-  onDismissClick: v,
-  onEstablishConnectionClick: D,
-  onFetchLinkTokenClick: G,
-  plaidConnectionDetails: q,
-  onSignUpAccountClick: X,
-  onMoveMoneyClick: K,
-  onUpdatePaymentAccountStatus: s,
-  onEstablishConnectionSuccess: le
-}) => {
-  const C = me(), J = pe().analytics, [Q, F] = Y(!1), [B, P] = Y(!1);
-  M(() => {
-    B && setTimeout(() => {
-      P(!1), F(!0);
-    }, 1e3);
-  }, [B]);
-  const O = r.chargeCardRepaymentDetailLocalData.amount.amount === R;
-  return /* @__PURE__ */ t.jsx(Lt, { windowSize: C, children: r.updateStatus === "Completed" ? /* @__PURE__ */ t.jsxs(Fe, { windowSize: C, isTransferCompleted: !0, children: [
-    /* @__PURE__ */ t.jsx(Be, { windowSize: C, children: /* @__PURE__ */ t.jsx(
-      Me,
-      {
-        "data-testid": ae(
-          "cross-credit-card-payment-success-close-button"
-        ),
-        onClick: () => {
-          f && S && u && J.trackCardsPayEarlyFormClick(
-            c,
-            g,
-            x,
-            "Cross Icon",
-            r.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-            {
-              paymentAmount: r.chargeCardRepaymentDetailLocalData.amount.amount,
-              paymentAccountName: r.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-              paymentAccountType: r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-              paymentAccountLastFourDigits: r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-              paymentCompleteEta: void 0,
-              paymentInitiatedDate: void 0
-            },
-            w,
-            y,
-            h
-          ), v?.();
-        }
-      }
-    ) }),
-    /* @__PURE__ */ t.jsxs(At, { windowSize: C, children: [
-      /* @__PURE__ */ t.jsx(
-        La,
-        {
-          width: 150,
-          height: 150,
-          shouldDisplay: !0,
-          animationInLoop: 1
-        }
-      ),
-      /* @__PURE__ */ t.jsx(bt, { children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        V.youvePaid,
-        /* @__PURE__ */ t.jsx(Rt, { children: Ee(
-          "0,0.[00]",
-          r.chargeCardRepaymentDetailLocalData.amount
-        ) }),
-        ke.transferDrawer.internal.transferSuccessMsgMidfix,
-        `"${r.chargeCardRepaymentDetailLocalData.transferFrom?.label}".`,
-        O ? V.theCreditLimitWillResetWithin23BusinessDays : V.theCreditLimitWillUpdateWithin23BusinessDays
-      ] }) }),
-      /* @__PURE__ */ t.jsx(Pt, { windowSize: C, children: /* @__PURE__ */ t.jsx(
-        ba,
-        {
-          variant: "primary",
-          label: V.goToCards,
-          "data-testid": ae("back-to-cards-button"),
-          onClick: z
-        }
-      ) })
-    ] })
-  ] }) : Q ? /* @__PURE__ */ t.jsx(
-    Na,
-    {
-      paymentDetails: r,
-      setShowReviewContent: F,
-      onTransferClick: k,
-      isCashbackInfoFetchStateCompleted: f,
-      isCreditCardInfoFetchStateCompleted: S,
-      isDebitCardInfoFetchStateCompleted: u,
-      controllerEmails: c,
-      productInformation: g,
-      cashbackInformation: x,
-      paymentSourceInformation: w,
-      creditAccountInformation: y,
-      debitAccountInformation: h,
-      isCompleteOutstandingBalanceBeingPaid: O
-    }
-  ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsxs(Fe, { windowSize: C, isTransferCompleted: !1, children: [
-      /* @__PURE__ */ t.jsx(Be, { windowSize: C, children: /* @__PURE__ */ t.jsx(
-        Me,
-        {
-          "data-testid": ae(
-            "cross-amount-details-close-button"
-          ),
-          onClick: () => {
-            f && S && u && J.trackCardsPayEarlyFormClick(
-              c,
-              g,
-              x,
-              "Cross Icon",
-              r.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-              {
-                paymentAmount: r.chargeCardRepaymentDetailLocalData.amount.amount,
-                paymentAccountName: r.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-                paymentAccountType: r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-                paymentAccountLastFourDigits: r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-                paymentCompleteEta: j?.add(3, "day").format(De.visual.MMMDCommaYYYYformat),
-                paymentInitiatedDate: j?.format(
-                  De.visual.MMMDCommaYYYYformat
-                )
-              },
-              w,
-              y,
-              h
-            ), v?.();
-          }
-        }
-      ) }),
-      C === "small" ? /* @__PURE__ */ t.jsx(Tt, { windowSize: C, children: V.payCreditCardBalance }) : /* @__PURE__ */ t.jsx(jt, { children: V.payCreditCardBalance }),
-      r.fetchState === "Completed" ? /* @__PURE__ */ t.jsx(
-        ht,
-        {
-          autoPayThreshold: e,
-          maxInsuredAmount: p,
-          onSaveChangesToLocalStore: E,
-          plaidConnectionDetails: q,
-          paymentDetails: r,
-          setShowReviewLoading: P,
-          onEstablishConnectionSuccess: le,
-          isAccountsEnabled: n,
-          onFetchLinkTokenClick: G,
-          onUpdatePaymentAccountStatus: s,
-          onEstablishConnectionClick: D,
-          onSignUpAccountClick: X,
-          onMoveMoneyClick: K,
-          isCashbackInfoFetchStateCompleted: f,
-          isCreditCardInfoFetchStateCompleted: S,
-          isDebitCardInfoFetchStateCompleted: u,
-          controllerEmails: c,
-          productInformation: g,
-          cashbackInformation: x,
-          paymentSourceInformation: w,
-          creditAccountInformation: y,
-          debitAccountInformation: h
-        }
-      ) : /* @__PURE__ */ t.jsx(
-        Ra,
-        {
-          size: "Standard",
-          start: !0,
-          style: {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "calc(100vh - 210px)"
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      Oe,
-      {
-        style: {
-          zIndex: 4,
-          paddingTop: a.sp3,
-          paddingBottom: a.sp3
-        },
-        formId: Ze(Ue),
-        helperStyle: { paddingTop: a.sp0, paddingBottom: a.sp0 },
-        primaryBtn: {
-          label: U.getLocalizedStrings().common.review,
-          isLoading: B
-        },
-        cancelBtn: {
-          label: ke.transferDrawer.cancelBtn,
-          onClick: () => {
-            f && S && u && J.trackCardsPayEarlyFormClick(
-              c,
-              g,
-              x,
-              "Cancel",
-              r.chargeCardRepaymentDetailLocalData.isAutoRepayment,
-              {
-                paymentAmount: r.chargeCardRepaymentDetailLocalData.amount.amount,
-                paymentAccountName: r.chargeCardRepaymentDetailLocalData.transferFrom?.label,
-                paymentAccountType: r.chargeCardRepaymentDetailLocalData.transferFrom?.accType,
-                paymentAccountLastFourDigits: r.chargeCardRepaymentDetailLocalData.transferFrom?.accountLast4,
-                paymentCompleteEta: void 0,
-                paymentInitiatedDate: void 0
-              },
-              w,
-              y,
-              h
-            ), v?.();
-          }
-        }
-      }
-    )
-  ] }) });
-}, Lt = o.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100vh;
-  width: 100%;
-`, bt = o(Pa)`
-  color: ${(e) => e.theme.colors.primary};
-  text-align: center;
-  white-space: pre-line;
-`, Rt = o(Aa)`
-  display: inline;
-`, Fe = o.div`
-  height: ${(e) => e.isTransferCompleted ? "100%" : "auto"};
-  padding-left: ${(e) => `${ne.containerPaddingLeft.valuePx(e.windowSize)}`};
-  padding-right: ${(e) => `${ne.containerPaddingRight.valuePx(e.windowSize)}`};
-  margin-bottom: auto;
-`, Pt = o.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column-reverse" : "row"};
-  margin-top: ${a.sp6};
-  gap: ${(e) => `${ne.buttonTrayGap.valuePx(e.windowSize)}`};
-`, At = o.div`
-  height: 80%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: ${(e) => `${a.sp0} ${ne.successContentMargin.valuePx(
-  e.windowSize
-)}`};
-  align-items: center;
-`, Be = o.div`
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  top: ${a.sp0};
-  padding: ${(e) => `${ne.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${a.sp0}`};
-  z-index: 2;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, Me = o(Ve)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  min-height: ${a.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Tt = o(Ne)`
-  ${(e) => `${St.sectionTitle.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${a.sp3};
-  margin-bottom: ${a.sp0};
-  margin-right: ${a.sp3};
-`, jt = o(Ta)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${a.sp3};
-  margin-bottom: ${a.sp2};
-`, It = ({
-  autoPayThreshold: e,
-  paymentDetails: r,
-  isZeniAccountSetupEnabled: p,
-  maxInsuredAmount: n,
-  onUpdatePaymentAccountStatus: g,
-  onSaveChangesToLocalStore: c,
-  creditAccountSpentAmount: y,
-  onTransferClick: R,
-  controllerEmails: h,
-  productInformation: x,
-  creditAccountInformation: w,
-  debitAccountInformation: f,
-  cashbackInformation: S,
-  paymentSourceInformation: u,
-  isCashbackInfoFetchStateCompleted: j,
-  isCreditCardInfoFetchStateCompleted: E,
-  isDebitCardInfoFetchStateCompleted: k,
-  goToCards: z,
-  onDismissClick: v,
-  onEstablishConnectionClick: D,
-  onEstablishConnectionSuccess: G,
-  onFetchLinkTokenClick: q,
-  plaidConnectionDetails: X,
-  onSignUpAccountClick: K,
-  onMoveMoneyClick: s
-}) => /* @__PURE__ */ t.jsx(kt, { children: /* @__PURE__ */ t.jsx(
-  vt,
-  {
-    autoPayThreshold: e,
-    paymentDetails: r,
-    maxInsuredAmount: n,
-    productInformation: x,
-    controllerEmails: h,
-    creditAccountInformation: w,
-    debitAccountInformation: f,
-    cashbackInformation: S,
-    paymentSourceInformation: u,
-    isCashbackInfoFetchStateCompleted: j,
-    isCreditCardInfoFetchStateCompleted: E,
-    isDebitCardInfoFetchStateCompleted: k,
-    creditAccountSpentAmount: y,
-    onSaveChangesToLocalStore: c,
-    onTransferClick: R,
-    goToCards: z,
-    onDismissClick: v,
-    plaidConnectionDetails: X,
-    isAccountsEnabled: p,
-    onEstablishConnectionClick: D,
-    onFetchLinkTokenClick: q,
-    onUpdatePaymentAccountStatus: g,
-    onEstablishConnectionSuccess: G,
-    onSignUpAccountClick: K,
-    onMoveMoneyClick: s
-  }
-) }), kt = o.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  overflow-x: hidden;
-  height: 100%;
-  width: 100%;
-`;
-export {
-  It as default
-};