@solvapay/react 1.0.8-preview.9 → 1.0.9

package/dist/chunk-ZAV7CQ4G.js

@@ -0,0 +1,361 @@
+import {
+  AmountPicker,
+  PaymentForm,
+  PlanSelector,
+  Slot,
+  TopupForm,
+  interpolate,
+  useCopy,
+  usePaywallResolver,
+  usePlanSelector
+} from "./chunk-37R5NZGF.js";
+
+// src/primitives/PaywallNotice.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/utils/isPayg.ts
+function isPaygPlan(plan) {
+  if (!plan) return false;
+  const type = plan.planType ?? plan.type;
+  return type === "usage-based" || type === "hybrid";
+}
+
+// src/primitives/PaywallNotice.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PaywallNoticeContext = createContext(null);
+function usePaywallNoticeCtx(part) {
+  const ctx = useContext(PaywallNoticeContext);
+  if (!ctx) {
+    throw new Error(`PaywallNotice.${part} must be rendered inside <PaywallNotice.Root>.`);
+  }
+  return ctx;
+}
+var Root = forwardRef(function PaywallNoticeRoot({ content, onResolved, classNames, asChild, children, ...rest }, forwardedRef) {
+  const { resolved, refetch } = usePaywallResolver(content);
+  const classNamesResolved = useMemo(() => classNames ?? {}, [classNames]);
+  useEffect(() => {
+    if (resolved) onResolved?.();
+  }, [resolved, onResolved]);
+  const ctx = useMemo(
+    () => ({
+      content,
+      resolved,
+      refetch,
+      onResolved,
+      classNames: classNamesResolved
+    }),
+    [content, resolved, refetch, onResolved, classNamesResolved]
+  );
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(PaywallNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-notice": "",
+      "data-kind": content.kind,
+      "data-state": resolved ? "resolved" : "pending",
+      className: classNamesResolved.root,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Heading = forwardRef(function PaywallNoticeHeading({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Heading");
+  const copy = useCopy();
+  const defaultText = ctx.resolved ? copy.paywall.resolvedHeading : ctx.content.kind === "payment_required" ? copy.paywall.paymentRequiredHeading : copy.paywall.activationRequiredHeading;
+  const Comp = asChild ? Slot : "h2";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-heading": "",
+      className: className ?? ctx.classNames.heading,
+      ...rest,
+      children: children ?? defaultText
+    }
+  );
+});
+var Message = forwardRef(function PaywallNoticeMessage({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Message");
+  const copy = useCopy();
+  const Comp = asChild ? Slot : "p";
+  const defaultText = resolvePaywallMessage(ctx.content, copy.paywall);
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-message": "",
+      className: className ?? ctx.classNames.message,
+      ...rest,
+      children: children ?? defaultText
+    }
+  );
+});
+function resolvePaywallMessage(content, paywallCopy) {
+  if (content.kind !== "payment_required") {
+    return content.message;
+  }
+  const balance = content.balance;
+  if (!balance) return content.message;
+  const productName = content.productDetails?.name;
+  const forProduct = productName ? interpolate(paywallCopy.paymentRequiredProductSuffix, { product: productName }) : "";
+  const remaining = balance.remainingUnits ?? 0;
+  if (remaining <= 0) {
+    return interpolate(paywallCopy.paymentRequiredMessage, { forProduct });
+  }
+  return interpolate(paywallCopy.paymentRequiredMessageRemaining, {
+    remaining: String(remaining),
+    pluralSuffix: remaining === 1 ? "" : "s",
+    forProduct
+  });
+}
+var ProductContext = forwardRef(function PaywallNoticeProductContext({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("ProductContext");
+  const copy = useCopy();
+  const product = ctx.content.kind === "activation_required" ? ctx.content.productDetails : void 0;
+  if (!product?.name) return null;
+  const label = interpolate(copy.paywall.productContext, { product: product.name });
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-product-context": "",
+      className: className ?? ctx.classNames.productContext,
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+var Balance = forwardRef(function PaywallNoticeBalance({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("Balance");
+  const copy = useCopy();
+  const balance = ctx.content.balance;
+  if (ctx.content.kind !== "activation_required" || !balance) return null;
+  const label = interpolate(copy.paywall.balanceLine, {
+    available: String(balance.remainingUnits ?? 0),
+    required: String(balance.creditsPerUnit ?? 1)
+  });
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      "data-solvapay-paywall-balance": "",
+      className: className ?? ctx.classNames.balance,
+      ...rest,
+      children: children ?? label
+    }
+  );
+});
+function Plans({ className, children }) {
+  const ctx = usePaywallNoticeCtx("Plans");
+  if (ctx.content.kind !== "activation_required") return null;
+  if (!ctx.content.product) return null;
+  const defaultClass = className ?? ctx.classNames.plans ?? "solvapay-paywall-plans";
+  return /* @__PURE__ */ jsx("div", { "data-solvapay-paywall-plans": "", className: defaultClass, children: /* @__PURE__ */ jsx(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PlanSelector.Grid, { children: /* @__PURE__ */ jsxs(PlanSelector.Card, { children: [
+      /* @__PURE__ */ jsx(PlanSelector.CardBadge, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardName, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardPrice, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardInterval, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(PlanSelector.Loading, {}),
+    /* @__PURE__ */ jsx(PlanSelector.Error, {})
+  ] }) }) });
+}
+function hidesFreePlan(plan) {
+  return plan.requiresPayment !== false;
+}
+var HostedCheckoutLink = forwardRef(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, ...rest }, forwardedRef) {
+  const ctx = usePaywallNoticeCtx("HostedCheckoutLink");
+  const copy = useCopy();
+  const href = ctx.content.checkoutUrl;
+  if (!href) return null;
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "data-solvapay-paywall-hosted-link": "",
+      className: className ?? ctx.classNames.hostedLink,
+      ...rest,
+      children: children ?? copy.paywall.hostedCheckoutButton
+    }
+  );
+});
+function EmbeddedCheckout({
+  returnUrl,
+  className,
+  children
+}) {
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  if (!ctx.content.product) return null;
+  const defaultClass = className ?? ctx.classNames.embeddedCheckout ?? "solvapay-paywall-embedded-checkout";
+  return /* @__PURE__ */ jsx("div", { "data-solvapay-paywall-embedded-checkout": "", className: defaultClass, children: /* @__PURE__ */ jsxs(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: [
+    /* @__PURE__ */ jsx(PlanSelector.Grid, { children: /* @__PURE__ */ jsxs(PlanSelector.Card, { children: [
+      /* @__PURE__ */ jsx(PlanSelector.CardBadge, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardName, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardPrice, {}),
+      /* @__PURE__ */ jsx(PlanSelector.CardInterval, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(PlanSelector.Loading, {}),
+    /* @__PURE__ */ jsx(PlanSelector.Error, {}),
+    /* @__PURE__ */ jsx(PaywallSelectedPlanGate, { productRef: ctx.content.product, returnUrl, children })
+  ] }) });
+}
+function PaywallSelectedPlanGate({
+  productRef,
+  returnUrl,
+  children
+}) {
+  const { selectedPlan, selectedPlanRef } = usePlanSelector();
+  if (!selectedPlanRef || !selectedPlan) return null;
+  if (isPaygPlan(selectedPlan)) {
+    return /* @__PURE__ */ jsx(
+      PaywallPaygGate,
+      {
+        plan: selectedPlan,
+        returnUrl
+      },
+      selectedPlanRef
+    );
+  }
+  return /* @__PURE__ */ jsx(PaywallPaymentFormGate, { productRef, returnUrl, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PaymentForm.Summary, {}),
+    /* @__PURE__ */ jsx(PaymentForm.Loading, {}),
+    /* @__PURE__ */ jsx(PaymentForm.PaymentElement, {}),
+    /* @__PURE__ */ jsx(PaymentForm.Error, {}),
+    /* @__PURE__ */ jsx(PaymentForm.MandateText, {}),
+    /* @__PURE__ */ jsx(PaymentForm.SubmitButton, {})
+  ] }) });
+}
+function PaywallPaygGate({
+  plan,
+  returnUrl
+}) {
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  const currency = (plan.currency ?? "USD").toUpperCase();
+  const [amountMinor, setAmountMinor] = useState(null);
+  if (amountMinor == null) {
+    return /* @__PURE__ */ jsx("div", { "data-solvapay-paywall-payg-amount": "", children: /* @__PURE__ */ jsxs(AmountPicker.Root, { currency, emit: "minor", children: [
+      /* @__PURE__ */ jsx(AmountPicker.Custom, {}),
+      /* @__PURE__ */ jsx(AmountPicker.Confirm, { onConfirm: (minor) => setAmountMinor(minor), children: "Continue" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-solvapay-paywall-payg-topup": "", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-solvapay-paywall-payg-change-amount": "",
+        onClick: () => setAmountMinor(null),
+        children: "Change amount"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      TopupForm.Root,
+      {
+        amount: amountMinor,
+        currency,
+        returnUrl,
+        onSuccess: () => {
+          void ctx.refetch();
+        },
+        children: [
+          /* @__PURE__ */ jsx(TopupForm.Loading, {}),
+          /* @__PURE__ */ jsx(TopupForm.PaymentElement, {}),
+          /* @__PURE__ */ jsx(TopupForm.Error, {}),
+          /* @__PURE__ */ jsx(TopupForm.SubmitButton, {})
+        ]
+      }
+    )
+  ] });
+}
+function PaywallPaymentFormGate({
+  productRef,
+  returnUrl,
+  children
+}) {
+  const { selectedPlanRef } = usePlanSelector();
+  const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
+  if (!selectedPlanRef) return null;
+  return /* @__PURE__ */ jsx(
+    PaymentForm.Root,
+    {
+      planRef: selectedPlanRef,
+      productRef,
+      returnUrl,
+      requireTermsAcceptance: false,
+      onSuccess: () => {
+        void ctx.refetch();
+      },
+      children
+    },
+    selectedPlanRef
+  );
+}
+var Retry = forwardRef(
+  function PaywallNoticeRetry({ asChild, children, className, onClick, ...rest }, forwardedRef) {
+    const ctx = usePaywallNoticeCtx("Retry");
+    const copy = useCopy();
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref: forwardedRef,
+        type: "button",
+        disabled: !ctx.resolved,
+        "data-solvapay-paywall-retry": "",
+        "data-state": ctx.resolved ? "ready" : "waiting",
+        className: className ?? ctx.classNames.retryButton,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented && ctx.resolved) ctx.onResolved?.();
+        },
+        ...rest,
+        children: children ?? copy.paywall.retryButton
+      }
+    );
+  }
+);
+var PaywallNotice = Object.assign(Root, {
+  Root,
+  Heading,
+  Message,
+  ProductContext,
+  Plans,
+  Balance,
+  HostedCheckoutLink,
+  EmbeddedCheckout,
+  Retry
+});
+function usePaywallNotice() {
+  return usePaywallNoticeCtx("usePaywallNotice");
+}
+
+export {
+  isPaygPlan,
+  Root,
+  Heading,
+  Message,
+  ProductContext,
+  Balance,
+  Plans,
+  HostedCheckoutLink,
+  EmbeddedCheckout,
+  Retry,
+  PaywallNotice,
+  usePaywallNotice
+};