@loczer/storefront-sdk 0.147.0 → 0.149.0

package/dist/pages/PaymentLinkPage.js

@@ -0,0 +1,258 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useState as p, useEffect as T, useMemo as M } from "react";
+import { useNavigate as Y, useLoaderData as G, Link as q, replace as D } from "@rpcbase/router";
+import { loadStripe as H } from "@stripe/stripe-js";
+import { Elements as z, useStripe as J } from "@stripe/react-stripe-js";
+import { AlertTriangle as Q, ShieldCheck as V, Loader2 as W } from "lucide-react";
+import { useTranslation as k } from "react-i18next";
+import { apiPost as g, apiGet as X } from "../lib/apiCall.js";
+import { GET_MOLLIE_SECURE_PAYMENT_SESSION_ROUTE as R, getMollieSecurePaymentSessionResponseSchema as U, GET_STRIPE_SECURE_PAYMENT_SESSION_ROUTE as Z, getStripeSecurePaymentSessionResponseSchema as ee, GET_SECURE_PAYMENT_LINK_ROUTE as re, getSecurePaymentLinkResponseSchema as se } from "../lib/securePaymentLink.js";
+import { MollieCardFieldsForm as te } from "../components/payment/MollieCardFieldsForm.js";
+import { StripeCardFieldsForm as ne } from "../components/payment/StripeCardFieldsForm.js";
+import { Button as ie } from "../ui/button.js";
+import { Card as x } from "../ui/card.js";
+const le = {}, ae = () => {
+  const r = le, o = r?.RB_PUBLIC_STRIPE_PUBLISHABLE_KEY?.trim();
+  return o || (r?.RB_PUBLIC_STRIPE_PUBLISHABLE_API_KEY?.trim() ?? "");
+}, C = ae(), oe = (r, o, l) => {
+  try {
+    return new Intl.NumberFormat(l, {
+      style: "currency",
+      currency: o.toUpperCase()
+    }).format(r / 100);
+  } catch {
+    return `${(r / 100).toFixed(2)} ${o.toUpperCase()}`;
+  }
+};
+function A() {
+  const { t: r } = k();
+  return /* @__PURE__ */ c("div", { className: "flex min-h-48 items-center justify-center gap-2 text-sm text-slate-600", children: [
+    /* @__PURE__ */ e(W, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+    /* @__PURE__ */ e("span", { children: r("secure_payment_link.form.loading_session") })
+  ] });
+}
+const Ee = (async ({ ctx: r, params: o }) => {
+  const l = typeof o.storeSlug == "string" ? o.storeSlug.trim().toLowerCase() : "", a = typeof o.token == "string" ? o.token.trim() : "";
+  if (!l || !a)
+    return {
+      storeSlug: l,
+      token: a,
+      session: null,
+      errorMessage: null,
+      errorKey: "invalid_link"
+    };
+  try {
+    const n = await X(
+      re,
+      {
+        storeSlug: l,
+        token: a
+      },
+      r
+    ), t = se.parse(n);
+    if (!t.success || !t.paymentLinkSession)
+      return {
+        storeSlug: l,
+        token: a,
+        session: null,
+        errorMessage: t.message || null,
+        errorKey: null
+      };
+    if (t.paymentLinkSession.status !== "pending")
+      throw D(`/${encodeURIComponent(l)}/secure-payment-link/${encodeURIComponent(a)}/success`);
+    return {
+      storeSlug: l,
+      token: a,
+      session: t.paymentLinkSession,
+      errorMessage: null,
+      errorKey: null
+    };
+  } catch (n) {
+    if (n instanceof Response)
+      throw n;
+    return console.error("Failed to load secure payment link", n), {
+      storeSlug: l,
+      token: a,
+      session: null,
+      errorMessage: null,
+      errorKey: "load_failed"
+    };
+  }
+});
+function ce({
+  clientSecret: r,
+  onSuccess: o
+}) {
+  const { t: l } = k(), a = J();
+  return /* @__PURE__ */ e(
+    ne,
+    {
+      requireEmail: !1,
+      onSubmit: async ({ paymentMethodId: n }) => {
+        if (!a)
+          throw new Error(l("secure_payment_link.errors.stripe_not_ready"));
+        const t = await a.confirmCardPayment(
+          r,
+          {
+            payment_method: n
+          }
+        );
+        if (t.error)
+          throw new Error(t.error.message ?? l("secure_payment_link.errors.payment_failed"));
+        const s = t.paymentIntent?.status;
+        if (s !== "succeeded" && s !== "processing" && s !== "requires_capture")
+          throw new Error(l("secure_payment_link.errors.payment_failed"));
+        o();
+      }
+    }
+  );
+}
+function we() {
+  const { t: r, i18n: o } = k(), l = Y(), a = G(), { storeSlug: n, token: t } = a, s = a.session, N = a.errorMessage ?? (a.errorKey ? r(`secure_payment_link.errors.${a.errorKey}`) : null), B = s?.providerType === "mollie_connect_oauth" && s.status === "pending" && !!(n && t), K = s?.providerType === "stripe_connect_oauth" && s.status === "pending" && !!(n && t), [y, h] = p(null), [F, f] = p(B), [E, _] = p(null), [m, w] = p(null), [$, b] = p(K), [v, S] = p(null), L = `/${n ?? ""}/secure-payment-link/${t ?? ""}/success`;
+  T(() => {
+    if (!s || !n || !t) {
+      h(null), _(null), f(!1);
+      return;
+    }
+    if (s.providerType !== "mollie_connect_oauth" || s.status !== "pending") {
+      h(null), _(null), f(!1);
+      return;
+    }
+    let d = !1;
+    return f(!0), _(null), h(null), (async () => {
+      try {
+        const u = await g(
+          R,
+          {
+            storeSlug: n,
+            token: t
+          }
+        ), i = U.parse(u);
+        if (d) return;
+        if (!i.success || !i.profileId) {
+          _(i.message || r("secure_payment_link.errors.session_failed"));
+          return;
+        }
+        h(i);
+      } catch (u) {
+        if (d) return;
+        console.error("Failed to create mollie secure session", u), _(r("secure_payment_link.errors.session_failed"));
+      } finally {
+        d || f(!1);
+      }
+    })(), () => {
+      d = !0;
+    };
+  }, [s, n, r, t]), T(() => {
+    if (!s || s.providerType !== "stripe_connect_oauth" || s.status !== "pending" || !n || !t) return;
+    let d = !1;
+    return b(!0), S(null), w(null), (async () => {
+      try {
+        const u = await g(
+          Z,
+          {
+            storeSlug: n,
+            token: t
+          }
+        ), i = ee.parse(u);
+        if (d) return;
+        if (!i.success || !i.clientSecret || !i.payment) {
+          S(i.message || r("secure_payment_link.errors.session_failed"));
+          return;
+        }
+        w(i);
+      } catch (u) {
+        if (d) return;
+        console.error("Failed to create stripe secure session", u), S(r("secure_payment_link.errors.session_failed"));
+      } finally {
+        d || b(!1);
+      }
+    })(), () => {
+      d = !0;
+    };
+  }, [s, n, r, t]);
+  const P = M(() => !C.trim() || !m?.stripeAccountId ? null : H(C, {
+    stripeAccount: m.stripeAccountId
+  }), [m?.stripeAccountId]), I = M(() => {
+    if (m?.clientSecret)
+      return {
+        clientSecret: m.clientSecret
+      };
+  }, [m?.clientSecret]), O = s ? oe(s.amountMinor, s.currency, o.language) : "—";
+  return N || !s ? /* @__PURE__ */ e("div", { className: "mx-auto max-w-4xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(x, { className: "border-red-200 bg-white p-8 shadow-sm", children: /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ e(Q, { className: "mt-0.5 h-5 w-5 text-red-600", "aria-hidden": "true" }),
+    /* @__PURE__ */ c("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ e("h1", { className: "text-xl font-semibold tracking-tight text-slate-950", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.errors.title") }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-700", children: /* @__PURE__ */ e("span", { children: N ?? r("secure_payment_link.errors.invalid_link") }) }),
+      /* @__PURE__ */ e(q, { to: `/${n ?? ""}`, children: /* @__PURE__ */ e(ie, { variant: "outline", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.back_to_store") }) }) })
+    ] })
+  ] }) }) }) : /* @__PURE__ */ e("div", { className: "mx-auto max-w-5xl px-4 py-10 sm:px-6", children: /* @__PURE__ */ c("div", { className: "grid gap-6 lg:grid-cols-[1fr_1fr]", children: [
+    /* @__PURE__ */ e(x, { className: "border-slate-200 bg-white p-6 shadow-sm", children: /* @__PURE__ */ c("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ c("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: [
+        /* @__PURE__ */ e(V, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+        /* @__PURE__ */ e("span", { children: r("secure_payment_link.secured_badge") })
+      ] }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold tracking-tight text-slate-950", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.title") }) }),
+        /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.subtitle") }) })
+      ] }),
+      /* @__PURE__ */ c("dl", { className: "grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.amount_label") }) }),
+          /* @__PURE__ */ e("dd", { className: "font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: O }) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.reference_label") }) }),
+          /* @__PURE__ */ e("dd", { className: "font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: s.reference }) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.provider_label") }) }),
+          /* @__PURE__ */ e("dd", { className: "font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: r(`secure_payment_link.providers.${s.providerType}`) }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(x, { className: "border-slate-200 bg-white p-6 shadow-sm", children: s.providerType === "mollie_connect_oauth" ? /* @__PURE__ */ c("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.mollie.form_title") }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.mollie.form_description") }) }),
+      F ? /* @__PURE__ */ e(A, {}) : E ? /* @__PURE__ */ e("p", { className: "text-sm text-red-600", children: /* @__PURE__ */ e("span", { children: E }) }) : y?.profileId ? /* @__PURE__ */ e(
+        te,
+        {
+          profileId: y.profileId,
+          testmode: y.testmode === !0,
+          onSubmit: async (d) => {
+            const u = await g(
+              R,
+              {
+                storeSlug: n,
+                token: t,
+                cardToken: d
+              }
+            ), i = U.parse(u);
+            if (!i.success)
+              throw new Error(i.message || r("secure_payment_link.errors.payment_failed"));
+            if (i.paymentStatus === "succeeded" || i.paymentStatus === "authorized") {
+              l(L, { replace: !0 });
+              return;
+            }
+            if (!i.checkoutUrl)
+              throw new Error(i.message || r("secure_payment_link.errors.mollie_missing_url"));
+            const j = new URL(i.checkoutUrl, window.location.origin).toString();
+            window.location.assign(j);
+          }
+        }
+      ) : /* @__PURE__ */ e("p", { className: "text-sm text-red-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.errors.session_failed") }) })
+    ] }) : $ ? /* @__PURE__ */ e(A, {}) : v ? /* @__PURE__ */ e("p", { className: "text-sm text-red-600", children: /* @__PURE__ */ e("span", { children: v }) }) : !m?.clientSecret || !P || !I ? /* @__PURE__ */ e("p", { className: "text-sm text-red-600", children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.errors.missing_publishable_key") }) }) : /* @__PURE__ */ e(z, { stripe: P, options: I, children: /* @__PURE__ */ e(
+      ce,
+      {
+        clientSecret: m.clientSecret,
+        onSuccess: () => {
+          l(L, { replace: !0 });
+        }
+      }
+    ) }, m.clientSecret) })
+  ] }) });
+}
+export {
+  we as default,
+  Ee as loader
+};

package/dist/pages/PaymentLinkSuccessPage.d.ts

@@ -0,0 +1,34 @@
+export declare const loader: ({ ctx, params }: import('@rpcbase/client').LoaderArgs) => Promise<{
+    storeSlug: string;
+    token: string;
+    session: null;
+    errorMessage: null;
+    errorKey: string;
+} | {
+    storeSlug: string;
+    token: string;
+    session: null;
+    errorMessage: string | null;
+    errorKey: null;
+} | {
+    storeSlug: string;
+    token: string;
+    session: {
+        token: string;
+        storeSlug: string;
+        saleId: string;
+        paymentId: string;
+        providerType: "stripe_connect_oauth" | "mollie_connect_oauth";
+        status: "pending" | "authorized" | "succeeded" | "failed" | "cancelled" | "refunded";
+        amountMinor: number;
+        currency: string;
+        reference: string;
+        expiresAt: string;
+        providerPaymentId?: string | undefined;
+        checkoutUrl?: string | undefined;
+    };
+    errorMessage: null;
+    errorKey: null;
+}>;
+export default function PaymentLinkSuccessPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaymentLinkSuccessPage.d.ts.map

package/dist/pages/PaymentLinkSuccessPage.js

@@ -0,0 +1,140 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useState as h, useRef as E, useEffect as y } from "react";
+import { useLoaderData as C, Link as M } from "@rpcbase/router";
+import { Loader2 as w, CheckCircle2 as K, XCircle as R, CircleDashed as T } from "lucide-react";
+import { useTranslation as D } from "react-i18next";
+import { apiGet as S } from "../lib/apiCall.js";
+import { GET_SECURE_PAYMENT_LINK_ROUTE as b, getSecurePaymentLinkResponseSchema as v } from "../lib/securePaymentLink.js";
+import { Button as $ } from "../ui/button.js";
+import { Card as j } from "../ui/card.js";
+const I = (s, l, r) => {
+  try {
+    return new Intl.NumberFormat(r, {
+      style: "currency",
+      currency: l.toUpperCase()
+    }).format(s / 100);
+  } catch {
+    return `${(s / 100).toFixed(2)} ${l.toUpperCase()}`;
+  }
+}, L = 2500, P = L * 3, q = (async ({ ctx: s, params: l }) => {
+  const r = typeof l.storeSlug == "string" ? l.storeSlug.trim().toLowerCase() : "", a = typeof l.token == "string" ? l.token.trim() : "";
+  if (!r || !a)
+    return {
+      storeSlug: r,
+      token: a,
+      session: null,
+      errorMessage: null,
+      errorKey: "invalid_link"
+    };
+  try {
+    const c = await S(
+      b,
+      {
+        storeSlug: r,
+        token: a
+      },
+      s
+    ), t = v.parse(c);
+    return !t.success || !t.paymentLinkSession ? {
+      storeSlug: r,
+      token: a,
+      session: null,
+      errorMessage: t.message || null,
+      errorKey: null
+    } : {
+      storeSlug: r,
+      token: a,
+      session: t.paymentLinkSession,
+      errorMessage: null,
+      errorKey: null
+    };
+  } catch (c) {
+    return console.error("Failed to load secure payment link success state", c), {
+      storeSlug: r,
+      token: a,
+      session: null,
+      errorMessage: null,
+      errorKey: "load_failed"
+    };
+  }
+});
+function J() {
+  const { t: s, i18n: l } = D(), r = C(), { storeSlug: a, token: c } = r, [t, x] = h(r.session), [_, u] = h(!1), [p, d] = h(
+    r.errorMessage ?? (r.errorKey ? s(`secure_payment_link.errors.${r.errorKey}`) : null)
+  ), [g, N] = h(0), k = E(Date.now());
+  y(() => {
+    x(r.session), u(!1), d(
+      r.errorMessage ?? (r.errorKey ? s(`secure_payment_link.errors.${r.errorKey}`) : null)
+    ), N(0), k.current = Date.now();
+  }, [r.errorKey, r.errorMessage, r.session, s]), y(() => {
+    if (g <= 0) return;
+    if (!a || !c) {
+      d(s("secure_payment_link.errors.invalid_link")), u(!1);
+      return;
+    }
+    let o = !1;
+    return (async () => {
+      u(!0), d(null);
+      try {
+        const m = await S(b, {
+          storeSlug: a,
+          token: c,
+          reconcileStripeStatus: Date.now() - k.current >= P ? "true" : void 0
+        }), f = v.parse(m);
+        if (o) return;
+        if (!f.success || !f.paymentLinkSession) {
+          d(f.message || s("secure_payment_link.errors.load_failed"));
+          return;
+        }
+        x(f.paymentLinkSession);
+      } catch (m) {
+        if (o) return;
+        console.error("Failed to load secure payment link success state", m), d(s("secure_payment_link.errors.load_failed"));
+      } finally {
+        o || u(!1);
+      }
+    })(), () => {
+      o = !0;
+    };
+  }, [g, a, s, c]);
+  const n = t?.status ?? "pending";
+  return y(() => {
+    if (!t || p || _ || n !== "pending") return;
+    const o = window.setTimeout(() => {
+      N((m) => m + 1);
+    }, L);
+    return () => {
+      window.clearTimeout(o);
+    };
+  }, [p, _, t, n]), /* @__PURE__ */ e("div", { className: "mx-auto max-w-3xl px-4 py-14 sm:px-6", children: /* @__PURE__ */ e(j, { className: "border-slate-200 bg-white p-8 shadow-sm", children: _ && !t ? /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-sm text-slate-600", children: [
+    /* @__PURE__ */ e(w, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+    /* @__PURE__ */ e("span", { children: s("secure_payment_link.loading") })
+  ] }) : p || !t ? /* @__PURE__ */ e("p", { className: "text-sm text-red-600", children: /* @__PURE__ */ e("span", { children: p ?? s("secure_payment_link.errors.invalid_link") }) }) : n === "pending" ? /* @__PURE__ */ i("div", { className: "space-y-4 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(w, { className: "h-6 w-6 animate-spin text-slate-600", "aria-hidden": "true" }) }),
+    /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: s("secure_payment_link.confirmation_loading_title") }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: s("secure_payment_link.confirmation_loading_description") }) })
+    ] })
+  ] }) : /* @__PURE__ */ i("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(n === "succeeded" || n === "authorized" ? K : n === "failed" || n === "cancelled" ? R : T, { className: `h-6 w-6 ${n === "succeeded" || n === "authorized" ? "text-emerald-600" : n === "failed" || n === "cancelled" ? "text-red-600" : "text-amber-600"}`, "aria-hidden": "true" }) }),
+    /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ e("h1", { className: "text-2xl font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: s(`secure_payment_link.success_titles.${n}`) }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: /* @__PURE__ */ e("span", { children: s(`secure_payment_link.statuses.${n}`) }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "mx-auto max-w-md rounded-lg border border-slate-200 bg-slate-50 p-4 text-left", children: /* @__PURE__ */ i("dl", { className: "grid gap-2 text-sm", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: s("secure_payment_link.amount_label") }) }),
+        /* @__PURE__ */ e("dd", { className: "font-semibold text-slate-950", children: /* @__PURE__ */ e("span", { children: I(t.amountMinor, t.currency, l.language) }) })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ e("dt", { className: "text-slate-600", children: /* @__PURE__ */ e("span", { children: s("secure_payment_link.reference_label") }) }),
+        /* @__PURE__ */ e("dd", { className: "font-medium text-slate-950", children: /* @__PURE__ */ e("span", { children: t.reference }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(M, { to: `/${a ?? ""}`, children: /* @__PURE__ */ e($, { children: /* @__PURE__ */ e("span", { children: s("secure_payment_link.back_to_store") }) }) }) })
+  ] }) }) });
+}
+export {
+  J as default,
+  q as loader
+};

package/dist/pages/ProductPage.d.ts

@@ -0,0 +1,2 @@
+export default function ProductPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProductPage.d.ts.map