@zeniai/web-components 3.16.86 → 3.16.87

package/dist/PaymentAccountSetupBillingAddressSection-CAtNIHNN.js

@@ -1,623 +0,0 @@
-import { j as t, u as ie, d as pe, b as Z } from "./vendor-.pnpm-D5gxGIYo.js";
-import { useState as E, useEffect as I } from "react";
-import a from "@emotion/styled";
-import { Elements as me, useStripe as ge, useElements as he, CardNumberElement as Y, CardExpiryElement as Q, CardCvcElement as X } from "@stripe/react-stripe-js";
-import { loadStripe as ue } from "@stripe/stripe-js";
-import { aD as fe, t as M, S as o, C as R, u as J, eY as xe, a as K, e_ as Se, o as ne, ao as be, er as V, R as N, E as ye, D as ce, hd as ee, eP as ve, iI as Ce, aw as Le } from "./index-CHni923I.js";
-import "@zeniai/client-epic-state";
-import { S as $e } from "./SetUpAccountSection-B3SpVh8j.js";
-const je = {
-  containerHeight: new N(656, 720),
-  labelWidth: new N(ce[12], 90)
-}, ze = a.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  width: ${(e) => e.windowSize === "small" ? "90%" : "544px"};
-  margin: 0 auto;
-  justify-content: center;
-  box-shadow: ${R.Elevation2Dark};
-  border-radius: ${o.sp2};
-`, Ee = a.form`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${o.sp2};
-`, Re = a(Se)`
-  padding-top: ${o.sp4};
-  text-align: center;
-  color: ${(e) => e.theme.colors.primary};
-`, we = a(ne)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: center;
-`, Ue = a.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  max-height: ${(e) => je.containerHeight.valuePx(e.windowSize)};
-  width: ${(e) => e.windowSize === "small" ? "90%" : "544px"};
-
-  .InputContainer input {
-    margin-left: ${o.sp1};
-  }
-`, _e = a.label`
-  width: 71px;
-  margin: auto;
-  margin-left: ${o.sp2};
-`, Pe = a.label`
-  width: 38px;
-  margin: auto;
-  margin-left: ${o.sp4};
-`, Ae = a.div`
-  width: 432px;
-  height: ${o.sp8};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(e) => e.theme.colors.grey5};
-  margin-top: ${o.sp3};
-  margin-bottom: ${o.sp6};
-  border-radius: ${o.sp2};
-`, Ie = a.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: ${o.sp8};
-  border-right: 1px solid ${(e) => e.theme.colors.grey3};
-`, Te = a.label`
-  width: 257px;
-  margin: auto;
-`, ke = a.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  color: ${(e) => e.theme.colors.grey1};
-  height: ${o.sp8};
-  border-right: 1px solid ${(e) => e.theme.colors.grey3};
-`, Be = a.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: ${o.sp8};
-`, te = a.span`
-  height: ${o.sp8};
-  display: none;
-`, le = a(ne)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  color: ${R.important};
-  width: 434px;
-  text-align: center;
-`, {
-  cardPayment: c,
-  common: { footer: oe }
-} = K.getLocalizedStrings(), De = a(ye)`
-  color: ${(e) => e.theme.colors.hero};
-  text-align: center;
-  margin-top: ${o.sp2};
-`, se = (e) => `${e}_form`, ae = "CardPaymentPaymentForm", He = ({
-  cardPaymentView: e,
-  clientSecret: r,
-  cardSetupInProgress: p,
-  handleConfirmCardSetupIntent: i,
-  updateCardPaymentModalState: x,
-  handleAddCardPaymentSource: l,
-  setCardSetupInProgress: m
-}) => {
-  const S = ge(), n = he(), [d, g] = E(!1), [L, $] = E(!1), [b, y] = E(!1), [h, v] = E(!1), j = J(), k = e.cardSetupConfirmStatus.fetchState, B = e.addCardPaymentSourceStatus.fetchState, D = e.cardSetupIntentStatus.fetchState, [w, u] = E(!1), W = async (f) => {
-    if (f.preventDefault(), !S || !n)
-      return;
-    const C = n.getElement(Y), P = n.getElement(Q), A = n.getElement(X);
-    (!C || !P || !A) && u(!0), v(!0), m(!0), C != null && P != null && A != null && S.confirmCardSetup(r, {
-      payment_method: {
-        card: C
-      }
-    }).then((z) => {
-      v(!1), i(z), z.setupIntent?.id != null && l(
-        "card",
-        "payment_intent",
-        z.setupIntent?.id
-      );
-    }).catch(() => {
-      v(!1), setTimeout(() => {
-        m(!1);
-      }, 2e3);
-    });
-  }, U = ie(), _ = {
-    showIcon: !0,
-    style: {
-      base: {
-        ...M.standardRegular.cssObject,
-        color: U.colors.primary,
-        "::placeholder": {
-          color: U.colors.grey2
-        }
-      },
-      invalid: {
-        color: R.important,
-        iconColor: R.important
-      }
-    }
-  }, H = k === "In-Progress" || B === "In-Progress" || D === "In-Progress" || h === !0 || p === !0, O = d || L || b || k === "In-Progress" || B === "In-Progress" || D === "In-Progress" || h === !0 || p === !0;
-  return /* @__PURE__ */ t.jsx(Ue, { windowSize: j, children: /* @__PURE__ */ t.jsxs(Ee, { onSubmit: W, id: se(ae), children: [
-    /* @__PURE__ */ t.jsxs(Ae, { children: [
-      /* @__PURE__ */ t.jsx(Ie, { children: /* @__PURE__ */ t.jsx(Te, { children: /* @__PURE__ */ t.jsx(
-        Y,
-        {
-          options: _,
-          onChange: (f) => g(!!f.error)
-        }
-      ) }) }),
-      /* @__PURE__ */ t.jsx(ke, { children: /* @__PURE__ */ t.jsxs(_e, { children: [
-        /* @__PURE__ */ t.jsx(te, { children: c.cardNumber }),
-        /* @__PURE__ */ t.jsx(
-          Q,
-          {
-            options: _,
-            onChange: (f) => $(!!f.error)
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ t.jsx(Be, { children: /* @__PURE__ */ t.jsxs(Pe, { children: [
-        /* @__PURE__ */ t.jsx(te, { children: c.CVC }),
-        /* @__PURE__ */ t.jsx(
-          X,
-          {
-            options: _,
-            onChange: (f) => y(!!f.error)
-          }
-        )
-      ] }) })
-    ] }),
-    e.cardSetupConfirmStatus.error || w ? /* @__PURE__ */ t.jsx(le, { children: c.errorMsg }) : null,
-    /* @__PURE__ */ t.jsx(
-      be,
-      {
-        style: {
-          width: "100%",
-          padding: `${o.sp3} 0 0 0`,
-          borderTop: "none",
-          position: "inherit"
-        },
-        formId: se(ae),
-        primaryBtn: {
-          label: oe.linkCard,
-          style: {
-            width: "104px",
-            height: o.sp6
-          },
-          isLoading: H,
-          isDisabled: O,
-          type: "submit"
-        },
-        cancelBtn: {
-          label: oe.cancel,
-          style: {
-            width: "104px",
-            height: o.sp6
-          },
-          onClick: () => {
-            x(!1);
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(De, { windowSize: j, children: [
-      c.terms.term1,
-      /* @__PURE__ */ t.jsx(
-        V,
-        {
-          href: c.terms.term2Link,
-          linkText: c.terms.term2
-        }
-      ),
-      c.terms.term3,
-      /* @__PURE__ */ t.jsx(
-        V,
-        {
-          href: c.terms.term4Link,
-          linkText: c.terms.term4
-        }
-      )
-    ] })
-  ] }) });
-}, ot = ({
-  isCardPaymentOpen: e,
-  cardPaymentView: r,
-  stripeKey: p,
-  cardSetupInProgress: i,
-  handleConfirmCardSetupIntent: x,
-  updateCardPaymentModalState: l,
-  handleCreateCardSetupIntent: m,
-  handleAddCardPaymentSource: S,
-  handleResetCardPaymentErrorStatuses: n,
-  setCardSetupInProgress: d
-}) => {
-  const [g, L] = E(""), $ = ue(p), b = fe(
-    r.addCardPaymentSourceStatus.fetchState
-  ), y = r.addCardPaymentSourceStatus.fetchState;
-  I(() => (m(["card"]), () => {
-    l(!1), L(""), n();
-  }), []), I(() => {
-    n();
-  }, [e]), I(() => {
-    b === "In-Progress" && y === "Error" ? (d(!1), setTimeout(() => {
-      l(!1);
-    }, 2e3)) : b === "In-Progress" && y === "Completed" && (m(["card"]), setTimeout(() => {
-      l(!1), d(!1);
-    }, 2e3));
-  }, [b, y]), I(() => {
-    (r.cardSetupConfirmStatus.error || r.addCardPaymentSourceStatus.error) && (m(["card"]), setTimeout(() => {
-      d(!1);
-    }, 2e3));
-  }, [
-    r.cardSetupConfirmStatus.error,
-    r.addCardPaymentSourceStatus.error
-  ]), I(() => {
-    r.clientSecret != null && L(r.clientSecret);
-  }, [r.clientSecret]);
-  const h = {
-    theme: "stripe",
-    variables: {
-      borderRadius: o.sp1,
-      fontSizeBase: M.standardRegular.fontSize,
-      fontFamily: M.standardRegular.fontFamily
-    },
-    rules: {
-      ".Input": {
-        border: `1px solid ${R.neutralGrey3Light}`,
-        borderRadius: o.sp1,
-        padding: "10px",
-        fontSize: M.standardRegular.fontSize
-      }
-    }
-  }, v = {
-    clientSecret: g,
-    appearance: h
-  }, j = J();
-  return /* @__PURE__ */ t.jsx(xe, { open: e, children: /* @__PURE__ */ t.jsxs(
-    ze,
-    {
-      windowSize: j,
-      isError: !!r.cardSetupConfirmStatus.error,
-      children: [
-        /* @__PURE__ */ t.jsx(Re, { children: c.title }),
-        /* @__PURE__ */ t.jsx(we, { children: c.subtitle }),
-        g && $ != null ? /* @__PURE__ */ t.jsx(me, { options: v, stripe: $, children: /* @__PURE__ */ t.jsx(
-          He,
-          {
-            clientSecret: g,
-            handleConfirmCardSetupIntent: x,
-            updateCardPaymentModalState: l,
-            handleAddCardPaymentSource: S,
-            cardPaymentView: r,
-            cardSetupInProgress: i,
-            setCardSetupInProgress: d
-          }
-        ) }) : /* @__PURE__ */ t.jsx(le, { children: c.errorMsg })
-      ]
-    }
-  ) });
-}, { cardBrands: s } = K.getLocalizedStrings().cardPayment, q = {
-  visa: {
-    name: s.visa,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/visa.svg"
-  },
-  mastercard: {
-    name: s.mastercard,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/mastercard.svg"
-  },
-  american_express: {
-    name: s.american_express,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/amex.svg"
-  },
-  discover: {
-    name: s.discover,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/discover-global.svg"
-  },
-  jcb: {
-    name: s.jcb,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/jcb-card.svg"
-  },
-  diners_club: {
-    name: s.diners_club,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/dinersclub.svg"
-  },
-  unionpay: {
-    name: s.unionpay,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  rupay: {
-    name: s.rupay,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/rupay-card.svg"
-  },
-  bancontact: {
-    name: s.bancontact,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  cmr_falabella: {
-    name: s.cmr_falabella,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  tarjeta_naranja: {
-    name: s.tarjeta_naranja,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  nativa: {
-    name: s.nativa,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  cencosud: {
-    name: s.cencosud,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  cabal: {
-    name: s.cabal,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  argencard: {
-    name: s.argencard,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  elo: {
-    name: s.elo,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/elo-card.svg"
-  },
-  hipercard: {
-    name: s.hipercard,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/hipercard.svg"
-  },
-  carnet: {
-    name: s.carnet,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/carnet.svg"
-  },
-  maestro: {
-    name: s.maestro,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/maestro.svg"
-  },
-  not_applicable: {
-    name: s.not_applicable,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  eftpos_australia: {
-    name: s.eftpos_australia,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  girocard: {
-    name: s.girocard,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  other: {
-    name: s.other,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  },
-  unknown: {
-    name: s.unknown,
-    iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-  }
-}, T = {
-  sectionWidth: new N(343, 580, 726),
-  iconWidthHeight: new N(20, ce[4])
-}, Fe = {
-  title: new Le("standardSemiBold", "largeSemiBold")
-}, re = (e) => e ? q[e] ?? {
-  name: "Other",
-  iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-} : {
-  name: "Other",
-  iconURL: "https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"
-}, Me = (e, r, p, i) => ({
-  header: e,
-  title: `${ee(
-    q[i.cardsList[0]?.brand]?.name ?? ""
-  )} ${r}`,
-  subtitle: `${ee(
-    q[i.cardsList[0]?.brand]?.name ?? ""
-  )} ${p} ${i.cardsList[0]?.last4}`,
-  status: i.cardsList[0]?.status
-}), Ne = a.img`
-  width: ${(e) => e.width}px;
-  height: ${(e) => e.height}px;
-`, st = ({
-  paymentAccount: e,
-  plaidConnectionDetails: r,
-  connectedAccountProvider: p,
-  sectionId: i,
-  isDisabled: x,
-  hasError: l = !1,
-  isValid: m,
-  style: S,
-  analytics: n,
-  onFetchLinkTokenClick: d,
-  onEstablishConnectionClick: g,
-  onUpdatePaymentAccountStatus: L,
-  onUpdatePaymentAccountLoginStatus: $,
-  onEstablishConnectionSuccess: b,
-  updateCardPaymentModalState: y,
-  cardPaymentView: h,
-  resetCardPaymentViewState: v,
-  cardSetupInProgress: j = !1,
-  googleAPIKey: k,
-  subscriptionBillingAddress: B,
-  subscriptionBillingAddressSectionId: D
-}) => {
-  const w = ie(), u = J(), { register: W } = pe(), U = w.mode === "light" ? new Z(w.colors.brandColorJadeLight) : new Z(w.colors.brandColorJadeDark), {
-    common: _,
-    customerOnboardingPage: {
-      sections: {
-        link_payment_account: { title: H, text: O, subText: f },
-        card_payment_method: C
-      }
-    }
-  } = K.getLocalizedStrings(), P = h.cardsList.length > 0, A = h.cardsList[0]?.brand ?? "other", z = h.addCardPaymentSourceStatus.fetchState, F = Me(
-    C.header,
-    C.titleText,
-    C.protectedCardNo,
-    h
-  );
-  let G;
-  return P && (G = {
-    header: F.header,
-    title: F.title,
-    subtitle: F.subtitle,
-    status: F.status === "valid" ? {
-      name: "Verified",
-      code: "verified"
-    } : {
-      name: "Pending",
-      code: "pending"
-    },
-    showAddPaymentMethodDropDown: P === !0,
-    icon: {
-      element: /* @__PURE__ */ t.jsx(
-        Ne,
-        {
-          src: re(A).iconURL,
-          width: T.iconWidthHeight.valuePx(u),
-          height: T.iconWidthHeight.valuePx(u),
-          alt: re(A).name,
-          loading: "lazy"
-        }
-      ),
-      color: new Z(U)
-    },
-    showCompletedIcon: !1,
-    isError: z === "Error",
-    isLoading: z === "In-Progress",
-    isCompleted: !0,
-    showRightArrow: !1
-  }), /* @__PURE__ */ t.jsxs(Oe, { windowSize: u, children: [
-    /* @__PURE__ */ t.jsx(
-      Ze,
-      {
-        type: "hidden",
-        ...W(`${i}.connected`, {
-          validate: (de) => l ? de === "true" : !0
-        }),
-        value: m ? "true" : "false"
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      $e,
-      {
-        connectedAccountProvider: p,
-        paymentAccount: e,
-        plaidConnectionDetails: r,
-        allBankAccounts: [],
-        header: H,
-        sectionTitle: H,
-        defaultSectionTitle: O,
-        defaultSectionSubTitle: f,
-        sectionId: i,
-        isDisabled: x,
-        hasError: l,
-        showZeniAccountSection: !1,
-        isCompleted: e?.providerVerificationStatus?.code?.includes(
-          "verified"
-        ) === !0 && e?.isLoginRequired === !1,
-        showCompletedIcon: u === "small",
-        onFetchLinkTokenClick: d,
-        onEstablishConnectionClick: g,
-        onUpdatePaymentAccountStatus: L,
-        onUpdatePaymentAccountLoginStatus: $,
-        onEstablishConnectionSuccess: b,
-        style: S,
-        icon: {
-          element: /* @__PURE__ */ t.jsx(
-            ve,
-            {
-              width: T.iconWidthHeight.valuePx(u),
-              height: T.iconWidthHeight.valuePx(u)
-            }
-          ),
-          color: U
-        },
-        analytics: n,
-        productType: "onboarding",
-        resetCardPaymentViewState: v,
-        cardPaymentSectionValues: G,
-        cardPaymentView: h,
-        updateCardPaymentModalState: y,
-        referrer: "Onboarding",
-        cardSetupInProgress: j
-      }
-    ),
-    We(
-      u,
-      _.headers.billingAddress,
-      D,
-      n,
-      B,
-      k,
-      x
-    )
-  ] });
-}, We = (e, r, p, i, x, l, m) => {
-  const S = {
-    "Add street address": "street_address",
-    "Add suite": "suite",
-    "Add city": "city",
-    "Add state": "state",
-    "Select country": "country",
-    "Add ZIP code": "zip_code",
-    "Add secondary info": "secondary_info"
-  };
-  return /* @__PURE__ */ t.jsxs(Je, { children: [
-    /* @__PURE__ */ t.jsx(
-      qe,
-      {
-        windowSize: e,
-        isDisabled: m === "disabled",
-        children: r
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      Ce,
-      {
-        googleAPIKey: l ?? "",
-        addressToEdit: x,
-        sectionId: `${p}`,
-        style: {
-          marginLeft: "0px"
-        },
-        elementsStyle: {
-          paddingRight: "0px"
-        },
-        onFormFieldClick: (n) => {
-          if (n.target instanceof HTMLInputElement) {
-            const { placeholder: d } = n.target;
-            if (d) {
-              const g = S[d];
-              g && i.trackOnboardingBillingAddress(g);
-            }
-          }
-        }
-      }
-    )
-  ] });
-}, Oe = a.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => T.sectionWidth.valuePx(e.windowSize)};
-  padding-bottom: ${o.sp3};
-`, Ze = a.input`
-  display: none;
-`, qe = a.div`
-  ${(e) => `${Fe.title.style(e.windowSize)}`};
-  margin-bottom: ${o.sp3};
-  margin-top: ${o.sp3};
-  color: ${(e) => e.isError === !0 ? R.important : e.isDisabled === !0 ? e.theme.colors.grey1 : e.theme.colors.primary};
-`, Je = a.div`
-  margin-top: ${o.sp5};
-  margin-bottom: ${o.sp4};
-`;
-export {
-  ot as C,
-  st as P,
-  Me as c,
-  re as g
-};