@zeniai/web-components 3.16.93 → 3.16.95

package/dist/PaymentAccountSetupBillingAddressSection-DFeVoMTQ.js

@@ -0,0 +1,623 @@
+import { j as t, u as ie, d as pe, b as J } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as E, useEffect as T } 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 q, 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, he as ee, eP as ve, iJ as Ce, aw as Le } from "./index-B9wG56Sb.js";
+import "@zeniai/client-epic-state";
+import { S as $e } from "./SetUpAccountSection-BKOCyUH3.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};
+`, Te = a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: ${o.sp8};
+  border-right: 1px solid ${(e) => e.theme.colors.grey3};
+`, Ie = 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 = q(), 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(Te, { children: /* @__PURE__ */ t.jsx(Ie, { 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;
+  T(() => (m(["card"]), () => {
+    l(!1), L(""), n();
+  }), []), T(() => {
+    n();
+  }, [e]), T(() => {
+    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]), T(() => {
+    (r.cardSetupConfirmStatus.error || r.addCardPaymentSourceStatus.error) && (m(["card"]), setTimeout(() => {
+      d(!1);
+    }, 2e3));
+  }, [
+    r.cardSetupConfirmStatus.error,
+    r.addCardPaymentSourceStatus.error
+  ]), T(() => {
+    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 = q();
+  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, Z = {
+  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"
+  }
+}, I = {
+  sectionWidth: new N(343, 580, 726),
+  iconWidthHeight: new N(20, ce[4])
+}, Fe = {
+  title: new Le("standardSemiBold", "largeSemiBold")
+}, re = (e) => e ? Z[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(
+    Z[i.cardsList[0]?.brand]?.name ?? ""
+  )} ${r}`,
+  subtitle: `${ee(
+    Z[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 = q(), { register: W } = pe(), U = w.mode === "light" ? new J(w.colors.brandColorJadeLight) : new J(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: I.iconWidthHeight.valuePx(u),
+          height: I.iconWidthHeight.valuePx(u),
+          alt: re(A).name,
+          loading: "lazy"
+        }
+      ),
+      color: new J(U)
+    },
+    showCompletedIcon: !1,
+    isError: z === "Error",
+    isLoading: z === "In-Progress",
+    isCompleted: !0,
+    showRightArrow: !1
+  }), /* @__PURE__ */ t.jsxs(Oe, { windowSize: u, children: [
+    /* @__PURE__ */ t.jsx(
+      Je,
+      {
+        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: I.iconWidthHeight.valuePx(u),
+              height: I.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(qe, { children: [
+    /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        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) => I.sectionWidth.valuePx(e.windowSize)};
+  padding-bottom: ${o.sp3};
+`, Je = a.input`
+  display: none;
+`, Ze = 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};
+`, qe = a.div`
+  margin-top: ${o.sp5};
+  margin-bottom: ${o.sp4};
+`;
+export {
+  ot as C,
+  st as P,
+  Me as c,
+  re as g
+};