@zeniai/web-components 3.16.66 → 3.16.68

package/dist/CreditCardPaymentDrawerPage-DZiCMC3v.js

@@ -0,0 +1,1169 @@
+import { u as ze, j as t, g as na, aD as oa, h as ra, F as ia } from "./vendor-.pnpm-DtFedGku.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 ge, dB as pe, R as d, Z as ca, a as U, j as ae, hu 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, f0 as Ie, hB as ua, _ as ga, p as We, b as Ve, j4 as pa, w as ma, j5 as ha, hS as ya, i1 as fa, D as i, aD as Se, am as xa, hX as wa, fj as $a, jf as ve, jg as Ca, ii as Sa, a1 as va, jh as La, j6 as ba, B as Ra, A as Pa, aj as Aa, es as Ta, H as ja } from "./index-SJFqjz6R.js";
+import { zeniDate as de, getNextNthWorkingDay as ka, dateNow as Da, isVerifiedPaymentAccountProviderStatusCode as Fa, isVerifiedStatusCode as Le, checkIfLowBalance as Ba } from "@zeniai/client-epic-state";
+import { L as Ma } from "./LabeledControlledCheckBoxField-EEmNHedK.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: m,
+  productInformation: c,
+  cashbackInformation: y,
+  paymentSourceInformation: R,
+  creditAccountInformation: h,
+  debitAccountInformation: x,
+  setShowReviewContent: w,
+  onTransferClick: f,
+  isCompleteOutstandingBalanceBeingPaid: S
+}) => {
+  const u = ge(), 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(
+              m,
+              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(
+              ka(
+                Da().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(
+              m,
+              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
+  ), m = 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(m)
+            }
+          )
+        }
+      );
+    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(ga)`
+  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(ma)`
+  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: gt },
+    billPay: { insufficientFunds: pt },
+    chargeCard: { payEarly: W }
+  },
+  commonSetUp: {
+    setUp: { accountsPlg: re }
+  }
+} = U.getLocalizedStrings(), He = "amount", mt = "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: m,
+  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 = ge(), 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, me] = 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, g) => {
+      const T = g.accounts.find(
+        (ta) => ta.id === c?.providerAccountId
+      ) ?? g.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, g) => {
+      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, g)), 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") && (Fa(A ?? "") || (f?.("link_account"), w()));
+  }, [
+    b.updateStatus.fetchState,
+    w,
+    f,
+    he,
+    fe,
+    oe.updateStatus.fetchState,
+    A
+  ]), M(() => {
+    (Le(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 && me(L.linkToken);
+  }, [L.fetchStatus.fetchState, L.linkToken, N]), M(() => {
+    F && ce();
+  }, [F, ce]), M(() => {
+    (A == null || A === "verification_failed" || A === "verification_expired" || Le(A)) && (de((/* @__PURE__ */ new Date()).toISOString()).isAfter(
+      b.expiration
+    ) || b.linkToken == null) && f?.("link_account");
+  }, []);
+  const { isValid: Ke } = I.formState, Je = async (l, g) => {
+    if (l != null) {
+      if (l.includes("amount"))
+        return;
+      const T = je(
+        g,
+        n.transferFromAccounts,
+        n.chargeCardRepaymentDetailLocalData.idempotencyKey
+      );
+      R(T);
+    }
+  }, Qe = (l) => {
+    if (m != null)
+      return m;
+    const g = n.transferFromAccounts.find(
+      (T) => T.id === l
+    );
+    return g?.accountBalance?.available != null && Ba(
+      n.chargeCardRepaymentDetailLocalData.amount,
+      g?.accountBalance?.available
+    ) ? pt.addMoney : "";
+  };
+  M(() => {
+    const l = I.watch((g, { name: T }) => {
+      T != null && g != null && ra(() => Je(T, g));
+    });
+    return () => {
+      l.unsubscribe();
+    };
+  });
+  const ea = I.watch("paymentDetails.amount"), aa = I.handleSubmit(() => {
+    if (Ke) {
+      const l = I.getValues(), g = je(
+        l,
+        n.transferFromAccounts,
+        n.chargeCardRepaymentDetailLocalData.idempotencyKey
+      );
+      R(g), 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(
+                Ma,
+                {
+                  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(_, mt),
+                placeholder: $a(
+                  se.labels.transferFrom
+                ),
+                style: { position: "relative" },
+                capitalizeOptions: !0,
+                isOptionRemovable: !1,
+                showTickIcon: !1,
+                valueToLogo: (l, g) => Ye(
+                  n.transferFromAccounts,
+                  l,
+                  g
+                ),
+                valueToSubLabels: (l, g) => wa(
+                  n.transferFromAccounts,
+                  l,
+                  g,
+                  !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 ? me(b.linkToken) : F ? ce() : B(!0);
+                }
+              },
+              valueToAdditionalLabel: Qe
+            }
+          ),
+          n?.chargeCardRepaymentDetailLocalData.transferFrom == null || n?.chargeCardRepaymentDetailLocalData.transferFrom?.accType === "paymentAccount" ? /* @__PURE__ */ t.jsx(
+            ve,
+            {
+              maxInsuredAmount: p,
+              heading: /* @__PURE__ */ t.jsxs(yt, { windowSize: s, children: [
+                W.earn,
+                /* @__PURE__ */ t.jsx(ft, { children: W.percentageCashback.replace(
+                  "__percentage__",
+                  Ca
+                ) }),
+                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(
+            ve,
+            {
+              maxInsuredAmount: p,
+              heading: re.moveMoneyHeading,
+              buttonText: re.moveMoneyButtonText,
+              isAccountsEnabled: y,
+              pageName: W.creditCardPayment,
+              onMoveMoneyClick: j
+            }
+          ) : /* @__PURE__ */ t.jsx(xt, {}),
+          /* @__PURE__ */ t.jsx(
+            Sa,
+            {
+              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: gt.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(va)`
+  color: ${(e) => e.theme.colors.primary};
+  width: ${(e) => e.windowSize === "small" ? "80%" : "100%"};
+`, ft = o(La)`
+  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: m,
+  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 = ge(), 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,
+            m,
+            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(
+        ba,
+        {
+          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(
+        Ra,
+        {
+          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: m,
+      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,
+              m,
+              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: m,
+          cashbackInformation: x,
+          paymentSourceInformation: w,
+          creditAccountInformation: y,
+          debitAccountInformation: h
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        Pa,
+        {
+          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,
+              m,
+              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(Aa)`
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+  white-space: pre-line;
+`, Rt = o(Ta)`
+  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(ja)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-top: ${a.sp3};
+  margin-bottom: ${a.sp2};
+`, Ot = ({
+  autoPayThreshold: e,
+  paymentDetails: r,
+  isZeniAccountSetupEnabled: p,
+  maxInsuredAmount: n,
+  onUpdatePaymentAccountStatus: m,
+  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: m,
+    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 {
+  Ot as default
+};