@loczer/storefront-sdk 0.166.0 → 0.167.0

package/dist/pages/CheckoutPaymentPage.js

@@ -1,154 +1,155 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useState as _, useRef as H, useEffect as E, useMemo as K } from "react";
+import { useState as f, useRef as j, useEffect as T, useMemo as K } from "react";
 import { toast as G } from "@rpcbase/client";
 import { useParams as J, useNavigate as Q, useSearchParams as V, Link as N } from "@rpcbase/router";
 import { loadStripe as W } from "@stripe/stripe-js";
 import { Elements as Z, useStripe as ee } from "@stripe/react-stripe-js";
-import { AlertTriangle as O, ShieldCheck as te, Loader2 as T, CheckCircle2 as re, XCircle as se, CircleDashed as ne, ArrowRight as ae } from "lucide-react";
-import { useTranslation as I } from "react-i18next";
-import { apiPost as ce } from "../lib/apiCall.js";
-import { ROUTE as ie, responseSchema as le } from "../lib/checkoutPaymentSession.js";
-import { pickBookingSearchParams as oe } from "../lib/booking.js";
+import { AlertTriangle as O, ShieldCheck as te, CheckCircle2 as re, XCircle as se, CircleDashed as ne, ArrowRight as ae, Loader2 as ce } from "lucide-react";
+import { useTranslation as E } from "react-i18next";
+import { apiPost as ie } from "../lib/apiCall.js";
+import { ROUTE as oe, responseSchema as le } from "../lib/checkoutPaymentSession.js";
+import { pickBookingSearchParams as ue } from "../lib/booking.js";
 import { useStorefrontCart as me } from "../lib/cart.js";
 import { MollieCardFieldsForm as de } from "../components/payment/MollieCardFieldsForm.js";
-import { StripeCardFieldsForm as ue } from "../components/payment/StripeCardFieldsForm.js";
-import { Button as f } from "../ui/button.js";
+import { StripeCardFieldsForm as pe } from "../components/payment/StripeCardFieldsForm.js";
+import { Button as S } from "../ui/button.js";
 import { Card as y } from "../ui/card.js";
-const pe = {}, he = () => pe?.RB_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim() ?? "", _e = he(), fe = 20, ye = 2500, xe = (t, l, c) => {
+const he = {}, _e = () => he?.RB_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim() ?? "", fe = _e(), ye = 20, xe = 2500, ge = (t, u, a) => {
   try {
-    return new Intl.NumberFormat(c, {
+    return new Intl.NumberFormat(a, {
       style: "currency",
-      currency: l.toUpperCase()
+      currency: u.toUpperCase()
     }).format(t / 100);
   } catch {
-    return `${(t / 100).toFixed(2)} ${l.toUpperCase()}`;
+    return `${(t / 100).toFixed(2)} ${u.toUpperCase()}`;
   }
 };
-function ge({
+function ke({
   clientSecret: t,
-  onSuccess: l
+  onSuccess: u
 }) {
-  const { t: c } = I(), u = ee();
+  const { t: a } = E(), _ = ee();
   return /* @__PURE__ */ e(
-    ue,
+    pe,
     {
       requireEmail: !1,
-      submitLabel: c("checkout_payment_authorize_button"),
-      submittingLabel: c("checkout_payment_authorizing_button"),
+      submitLabel: a("checkout_payment_authorize_button"),
+      submittingLabel: a("checkout_payment_authorizing_button"),
       onSubmit: async ({ paymentMethodId: x }) => {
-        if (!u)
-          throw new Error(c("secure_payment_link.errors.stripe_not_ready"));
-        const o = await u.confirmCardPayment(
+        if (!_)
+          throw new Error(a("secure_payment_link.errors.stripe_not_ready"));
+        const m = await _.confirmCardPayment(
           t,
           {
             payment_method: x
           }
         );
-        if (o.error)
-          throw new Error(o.error.message ?? c("secure_payment_link.errors.payment_failed"));
-        const r = o.paymentIntent?.status;
+        if (m.error)
+          throw new Error(m.error.message ?? a("secure_payment_link.errors.payment_failed"));
+        const r = m.paymentIntent?.status;
         if (r !== "succeeded" && r !== "processing" && r !== "requires_capture")
-          throw new Error(c("secure_payment_link.errors.payment_failed"));
-        l();
+          throw new Error(a("secure_payment_link.errors.payment_failed"));
+        u();
       }
     }
   );
 }
-function q() {
-  const { t } = I();
+function be() {
+  const { t } = E();
   return /* @__PURE__ */ n("div", { className: "flex min-h-48 items-center justify-center gap-2 text-sm text-slate-600", children: [
-    /* @__PURE__ */ e(T, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+    /* @__PURE__ */ e(ce, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
     /* @__PURE__ */ e("span", { children: t("secure_payment_link.form.loading_session") })
   ] });
 }
-function Me() {
-  const { t, i18n: l } = I(), { storeSlug: c } = J(), u = Q(), { clear: x } = me(), [o] = V(), [r, p] = _(null), [h, S] = _(!0), [A, g] = _(null), [D, U] = _(0), [$, R] = _(0), k = H(!1), m = o.get("checkout_session_id")?.trim() ?? "", M = new URLSearchParams(o.toString());
-  M.delete("checkout_session_id");
-  const d = oe(M).toString(), v = `/${c ?? ""}/checkout${d ? `?${d}` : ""}`, P = `/${c ?? ""}/checkout/success${d ? `?${d}` : ""}`, j = async (a) => {
-    if (!c || !m)
+function Be() {
+  const { t, i18n: u } = E(), { storeSlug: a } = J(), _ = Q(), { clear: x } = me(), [m] = V(), [r, d] = f(null), [q, g] = f(!0), [I, k] = f(null), [D, X] = f(0), [A, U] = f(0), b = j(!1), l = j(null), p = m.get("checkout_session_id")?.trim() ?? "", $ = new URLSearchParams(m.toString());
+  $.delete("checkout_session_id");
+  const h = ue($).toString(), v = `/${a ?? ""}/checkout${h ? `?${h}` : ""}`, P = `/${a ?? ""}/checkout/success${h ? `?${h}` : ""}`, R = async (c) => {
+    if (!a || !p)
       throw new Error(t("checkout_payment_return_missing_session"));
-    const s = await ce(
-      ie,
+    const s = await ie(
+      oe,
       {
-        storeSlug: c,
-        checkoutSessionId: m,
-        returnSearch: d || void 0,
-        cardToken: a
+        storeSlug: a,
+        checkoutSessionId: p,
+        returnSearch: h || void 0,
+        cardToken: c
       }
     );
     return le.parse(s);
   }, C = async () => {
-    k.current || (k.current = !0, G.success(t("checkout_success_toast")), await u(P, { replace: !0 }), x());
+    b.current || (b.current = !0, G.success(t("checkout_success_toast")), await _(P, { replace: !0 }), x());
   };
-  E(() => {
-    k.current = !1, R(0);
-  }, [m]), E(() => {
-    if (!c || !m) {
-      p(null), g(t("checkout_payment_return_missing_session")), S(!1);
+  T(() => {
+    b.current = !1, l.current = null, d(null), g(!0), U(0);
+  }, [p]), T(() => {
+    if (!a || !p) {
+      l.current = null, d(null), k(t("checkout_payment_return_missing_session")), g(!1);
       return;
     }
-    let a = !1;
-    return S(!0), g(null), (async () => {
+    let c = !1;
+    const s = l.current === null;
+    return g(s), k(null), (async () => {
       try {
-        const s = await j();
-        if (a) return;
-        if (!s.success) {
-          p(null), g(s.message || t("checkout_payment_return_status_error"));
+        const i = await R();
+        if (c) return;
+        if (!i.success) {
+          l.current = null, d(null), k(i.message || t("checkout_payment_return_status_error"));
           return;
         }
-        p(s);
-        const w = s.paymentStatus;
-        (w === "authorized" || w === "succeeded") && !k.current && await C();
-      } catch (s) {
-        if (a) return;
-        console.error("Failed to fetch checkout payment session", s), p(null), g(t("checkout_payment_return_status_error"));
+        l.current = i, d(i);
+        const F = i.paymentStatus;
+        (F === "authorized" || F === "succeeded") && !b.current && await C();
+      } catch (i) {
+        if (c) return;
+        console.error("Failed to fetch checkout payment session", i), l.current = null, d(null), k(t("checkout_payment_return_status_error"));
       } finally {
-        a || S(!1);
+        !c && s && g(!1);
       }
     })(), () => {
-      a = !0;
+      c = !0;
     };
-  }, [m, x, u, d, D, c, P, t]);
-  const i = r?.paymentStatus ?? "pending";
-  E(() => {
-    if (i !== "pending" || $ >= fe || !r?.payment?.id) return;
-    const a = window.setTimeout(() => {
-      R((s) => s + 1), U((s) => s + 1);
-    }, ye);
+  }, [p, x, _, h, D, a, P, t]);
+  const o = r?.paymentStatus ?? "pending";
+  T(() => {
+    if (o !== "pending" || r?.providerType === "stripe_connect_oauth" || A >= ye || !r?.payment?.id) return;
+    const c = window.setTimeout(() => {
+      U((s) => s + 1), X((s) => s + 1);
+    }, xe);
     return () => {
-      window.clearTimeout(a);
+      window.clearTimeout(c);
     };
-  }, [i, $, r?.payment?.id]);
-  const z = K(() => {
-    const a = r?.stripePublishableKey?.trim() || _e;
-    return !a || !r?.stripeAccountId ? null : W(a, {
+  }, [o, A, r?.payment?.id, r?.providerType]);
+  const M = K(() => {
+    const c = r?.stripePublishableKey?.trim() || fe;
+    return !c || !r?.stripeAccountId ? null : W(c, {
       stripeAccount: r.stripeAccountId
     });
-  }, [r?.stripeAccountId, r?.stripePublishableKey]), F = K(() => {
+  }, [r?.stripeAccountId, r?.stripePublishableKey]), z = K(() => {
     if (r?.clientSecret)
       return {
         clientSecret: r.clientSecret
       };
   }, [r?.clientSecret]);
-  if (!m)
+  if (!p)
     return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
       /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(O, { className: "mt-0.5 h-5 w-5 text-destructive", "aria-hidden": "true" }),
         /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_missing_session") }) })
       ] }),
-      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(f, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
+      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
     ] }) }) });
-  if (h && !r)
-    return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ e(q, {}) }) });
-  if (A || !r)
+  if (q && !r)
+    return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ e(be, {}) }) });
+  if (I || !r)
     return /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(y, { className: "border-destructive/25 bg-white p-5 sm:p-6 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
       /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(O, { className: "mt-0.5 h-5 w-5 text-destructive", "aria-hidden": "true" }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: A ?? t("checkout_payment_return_status_error") }) })
+        /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: I ?? t("checkout_payment_return_status_error") }) })
       ] }),
-      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(f, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
+      /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { variant: "outline", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_back_to_checkout") }) }) })
     ] }) }) });
-  const B = typeof r.amountMinor == "number" && r.currency ? xe(r.amountMinor, r.currency, l.language) : null, b = i === "authorized" || i === "succeeded", L = i === "failed" || i === "cancelled", X = b ? re : L ? se : ne, Y = b ? "text-emerald-600" : L ? "text-destructive" : "text-amber-600";
+  const B = typeof r.amountMinor == "number" && r.currency ? ge(r.amountMinor, r.currency, u.language) : null, w = o === "authorized" || o === "succeeded", L = o === "failed" || o === "cancelled", Y = w ? re : L ? se : ne, H = w ? "text-emerald-600" : L ? "text-destructive" : "text-amber-600";
   return /* @__PURE__ */ e("div", { className: "mx-auto max-w-5xl px-4 py-10 sm:px-6", children: /* @__PURE__ */ n("div", { className: "grid gap-6 lg:grid-cols-[1fr_1fr]", children: [
     /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 shadow-sm", children: /* @__PURE__ */ n("div", { className: "space-y-5", children: [
       /* @__PURE__ */ n("div", { className: "inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700", children: [
@@ -168,76 +169,54 @@ function Me() {
           /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_provider") }) }),
           /* @__PURE__ */ e("dd", { className: "font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.providers.${r.providerType}`) }) })
         ] }) : null
-      ] }),
-      h ? /* @__PURE__ */ n("p", { className: "inline-flex items-center gap-2 text-sm text-slate-500", children: [
-        /* @__PURE__ */ e(T, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
-        /* @__PURE__ */ e("span", { children: t("checkout_payment_return_loading") })
-      ] }) : null
+      ] })
     ] }) }),
-    /* @__PURE__ */ n(y, { className: "border-slate-200 bg-white p-5 shadow-sm", children: [
-      b || L ? /* @__PURE__ */ n("div", { className: "space-y-6 text-center", children: [
-        /* @__PURE__ */ e("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: /* @__PURE__ */ e(X, { className: `h-6 w-6 ${Y}`, "aria-hidden": "true" }) }),
-        /* @__PURE__ */ n("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.success_titles.${i}`) }) }),
-          /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.statuses.${i}`) }) })
-        ] }),
-        b ? /* @__PURE__ */ e(N, { to: P, children: /* @__PURE__ */ n(f, { className: "gap-2", children: [
-          /* @__PURE__ */ e("span", { children: t("checkout_payment_return_go_to_success") }),
-          /* @__PURE__ */ e(ae, { className: "h-4 w-4", "aria-hidden": "true" })
-        ] }) }) : /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_retry_checkout") }) }) })
-      ] }) : r.providerType === "mollie_connect_oauth" ? /* @__PURE__ */ n("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.mollie.form_title") }) }),
-        /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_hold_form_description") }) }),
-        r.profileId ? /* @__PURE__ */ e(
-          de,
-          {
-            profileId: r.profileId,
-            testmode: r.testmode === !0,
-            submitLabel: t("checkout_payment_authorize_button"),
-            submittingLabel: t("checkout_payment_authorizing_button"),
-            onSubmit: async (a) => {
-              const s = await j(a);
-              if (!s.success)
-                throw new Error(s.message || t("secure_payment_link.errors.payment_failed"));
-              if (p(s), s.paymentStatus === "authorized" || s.paymentStatus === "succeeded") {
-                await C();
-                return;
-              }
-              if (!s.checkoutUrl)
-                throw new Error(s.message || t("secure_payment_link.errors.mollie_missing_url"));
-              const w = new URL(s.checkoutUrl, window.location.origin).toString();
-              window.location.assign(w);
-            }
-          }
-        ) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) })
-      ] }) : r.providerType === "stripe_connect_oauth" ? h ? /* @__PURE__ */ e(q, {}) : !r.clientSecret || !z || !F ? /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.missing_publishable_key") }) }) : /* @__PURE__ */ e(Z, { stripe: z, options: F, children: /* @__PURE__ */ e(
-        ge,
+    /* @__PURE__ */ e(y, { className: "border-slate-200 bg-white p-5 shadow-sm", children: w || L ? /* @__PURE__ */ n("div", { className: "space-y-6 text-center", children: [
+      /* @__PURE__ */ e("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: /* @__PURE__ */ e(Y, { className: `h-6 w-6 ${H}`, "aria-hidden": "true" }) }),
+      /* @__PURE__ */ n("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.success_titles.${o}`) }) }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t(`secure_payment_link.statuses.${o}`) }) })
+      ] }),
+      w ? /* @__PURE__ */ e(N, { to: P, children: /* @__PURE__ */ n(S, { className: "gap-2", children: [
+        /* @__PURE__ */ e("span", { children: t("checkout_payment_return_go_to_success") }),
+        /* @__PURE__ */ e(ae, { className: "h-4 w-4", "aria-hidden": "true" })
+      ] }) }) : /* @__PURE__ */ e(N, { to: v, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("span", { children: t("checkout_payment_return_retry_checkout") }) }) })
+    ] }) : r.providerType === "mollie_connect_oauth" ? /* @__PURE__ */ n("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.mollie.form_title") }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: t("checkout_payment_hold_form_description") }) }),
+      r.profileId ? /* @__PURE__ */ e(
+        de,
         {
-          clientSecret: r.clientSecret,
-          onSuccess: () => {
-            C();
+          profileId: r.profileId,
+          testmode: r.testmode === !0,
+          submitLabel: t("checkout_payment_authorize_button"),
+          submittingLabel: t("checkout_payment_authorizing_button"),
+          onSubmit: async (c) => {
+            const s = await R(c);
+            if (!s.success)
+              throw new Error(s.message || t("secure_payment_link.errors.payment_failed"));
+            if (l.current = s, d(s), s.paymentStatus === "authorized" || s.paymentStatus === "succeeded") {
+              await C();
+              return;
+            }
+            if (!s.checkoutUrl)
+              throw new Error(s.message || t("secure_payment_link.errors.mollie_missing_url"));
+            const i = new URL(s.checkoutUrl, window.location.origin).toString();
+            window.location.assign(i);
           }
         }
-      ) }, r.clientSecret) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) }),
-      i === "pending" && r.payment?.id ? /* @__PURE__ */ e("div", { className: "mt-5 flex flex-col justify-center gap-3 sm:flex-row", children: /* @__PURE__ */ n(
-        f,
-        {
-          type: "button",
-          variant: "outline",
-          onClick: () => {
-            U((a) => a + 1);
-          },
-          disabled: h,
-          className: "gap-2",
-          children: [
-            h ? /* @__PURE__ */ e(T, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : null,
-            /* @__PURE__ */ e("span", { children: t("checkout_payment_return_refresh_status") })
-          ]
+      ) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) })
+    ] }) : r.providerType === "stripe_connect_oauth" ? !r.clientSecret || !M || !z ? /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.missing_publishable_key") }) }) : /* @__PURE__ */ e(Z, { stripe: M, options: z, children: /* @__PURE__ */ e(
+      ke,
+      {
+        clientSecret: r.clientSecret,
+        onSuccess: () => {
+          C();
         }
-      ) }) : null
-    ] })
+      }
+    ) }, r.clientSecret) : /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: t("secure_payment_link.errors.session_failed") }) }) })
   ] }) });
 }
 export {
-  Me as default
+  Be as default
 };

package/dist/pages/HomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.d.ts","sourceRoot":"","sources":["../../src/pages/HomePage.tsx"],"names":[],"mappings":"AA6GA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CAgqB/B"}
+{"version":3,"file":"HomePage.d.ts","sourceRoot":"","sources":["../../src/pages/HomePage.tsx"],"names":[],"mappings":"AA6GA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CAyqB/B"}