@olwiba/ui 0.2.7 → 0.2.9

package/dist/index.d.ts

@@ -703,10 +703,36 @@ interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, ctaDisabled, badge, footer, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * One billing period a plan can be bought at.
+ *
+ * Products are not all sold monthly-or-annually: weekly, quarterly, and
+ * one-off all exist. Pass `cadences` to describe whatever this product
+ * actually sells and the section renders a tab per entry, rather than the
+ * fixed Monthly/Annual pair it assumes otherwise.
+ */
+interface PricingCadence {
+    /** Matches the keys of `PricingPlan.prices`. */
+    key: string;
+    label: string;
+    /**
+     * Billing periods in a year — 52 weekly, 12 monthly, 1 annual. Used only to
+     * compare cadences for the savings badge; omit it and no badge is computed
+     * for this cadence.
+     */
+    periodsPerYear?: number;
+    /** Price suffix, e.g. "/ week". Falls back to `PricingPlan.periodDisplay`. */
+    suffix?: string;
+}
 interface PricingPlan {
     name: string;
     monthly: number;
     annual: number;
+    /**
+     * Price per cadence key, for products using `cadences`. The `monthly` and
+     * `annual` fields above stay as the fallback for callers that don't.
+     */
+    prices?: Record<string, number>;
     description: string;
     cta: string;
     highlighted?: boolean;
@@ -736,8 +762,25 @@ interface PricingSectionProps {
     highlightedBadgeLabel?: string;
     /** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
     renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
+    /**
+     * Billing periods this product sells at. One entry renders no toggle at all;
+     * two or more render a tab each, with savings badges computed from
+     * `periodsPerYear`. Omit to keep the built-in Monthly/Annual pair.
+     */
+    cadences?: PricingCadence[];
+    /** Which cadence opens selected. Defaults to the first in `cadences`. */
+    defaultCadence?: string;
+    /**
+     * Called when a plan's CTA is pressed, with the cadence currently selected —
+     * which is the half the caller can't otherwise know, since the toggle's state
+     * lives in here. Without it the CTA is inert: `PricingCard` takes an
+     * `onSelect` and this section had never passed one.
+     */
+    onSelectPlan?: (plan: PricingPlan, cadence?: string) => void;
+    /** Marks one plan as busy (e.g. its checkout is being created). */
+    pendingPlanName?: string;
 }
-declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
+declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, currency, highlightedBadgeLabel, renderPlanFooter, cadences, defaultCadence, onSelectPlan, pendingPlanName, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
 
 interface TestimonialsSectionProps {
     title?: string;

package/dist/index.js

@@ -2282,6 +2282,32 @@ function CountdownTimer({
     ] }, unit)) })
   ] });
 }
+function computeSaveBadges(plans, cadences, defaultKey) {
+  const annualised = (key) => {
+    const cadence = cadences.find((c) => c.key === key);
+    if (!cadence?.periodsPerYear) return null;
+    const totals = plans.filter((plan) => plan.priceDisplay === void 0 && plan.prices?.[key] !== void 0).map((plan) => plan.prices[key] * cadence.periodsPerYear);
+    return totals.length > 0 ? totals.reduce((sum, n) => sum + n, 0) : null;
+  };
+  const baseline = annualised(defaultKey);
+  if (!baseline) return {};
+  const badges = {};
+  for (const cadence of cadences) {
+    if (cadence.key === defaultKey) continue;
+    const total = annualised(cadence.key);
+    if (!total || total >= baseline) continue;
+    const percent = Math.round((baseline - total) / baseline * 100);
+    if (percent > 0) badges[cadence.key] = `Save ${percent}%`;
+  }
+  return badges;
+}
+function gridClassesFor(count) {
+  if (count <= 1) return "mx-auto max-w-sm";
+  if (count === 2) return "mx-auto max-w-3xl sm:grid-cols-2";
+  if (count === 3) return "mx-auto max-w-5xl lg:grid-cols-3";
+  if (count === 4) return "mx-auto max-w-6xl sm:grid-cols-2 lg:grid-cols-4";
+  return "mx-auto max-w-5xl sm:grid-cols-2 lg:grid-cols-3";
+}
 var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PricingSection({
   title = "Simple, transparent pricing",
@@ -2296,10 +2322,23 @@ function PricingSection({
   foundingDeadline,
   currency = "$",
   highlightedBadgeLabel = "Founding member",
-  renderPlanFooter
+  renderPlanFooter,
+  cadences,
+  defaultCadence,
+  onSelectPlan,
+  pendingPlanName
 }) {
   const [annual, setAnnual] = React35.useState(false);
   const isOneTime = mode === "one-time";
+  const useCadences = !!cadences?.length;
+  const initialCadence = (defaultCadence && cadences?.some((c) => c.key === defaultCadence) ? defaultCadence : null) ?? cadences?.[0]?.key ?? "";
+  const [activeCadence, setActiveCadence] = React35.useState(initialCadence);
+  const cadence = cadences?.find((c) => c.key === activeCadence);
+  const saveBadges = React35.useMemo(
+    () => useCadences ? computeSaveBadges(plans, cadences, initialCadence) : {},
+    [useCadences, plans, cadences, initialCadence]
+  );
+  const showToggle = useCadences ? cadences.length > 1 : !isOneTime;
   const uiMode = useUIVariant();
   const sectionClasses = cn$1(
     "overflow-hidden bg-card",
@@ -2312,7 +2351,23 @@ function PricingSection({
       badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-4", children: badge }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: badge })),
       /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
       description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-xl text-pretty text-muted-foreground", children: description }),
-      !isOneTime && /* @__PURE__ */ jsxs("div", { className: "mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1", children: [
+      showToggle && /* @__PURE__ */ jsx("div", { className: "mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1", children: useCadences ? cadences.map((entry) => /* @__PURE__ */ jsxs(
+        Button$1,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => setActiveCadence(entry.key),
+          className: cn$1(
+            "flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
+            entry.key === activeCadence ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: [
+            entry.label,
+            saveBadges[entry.key] && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: saveBadges[entry.key] })
+          ]
+        },
+        entry.key
+      )) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           Button$1,
           {
@@ -2342,12 +2397,12 @@ function PricingSection({
             ]
           }
         )
-      ] })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsx(StaggerChildren, { className: "mt-10 grid gap-4 lg:grid-cols-3", children: plans.map((plan) => {
-      const rawPrice = isOneTime ? plan.monthly : annual ? plan.annual : plan.monthly;
+    /* @__PURE__ */ jsx(StaggerChildren, { className: cn$1("mt-10 grid gap-4", gridClassesFor(plans.length)), children: plans.map((plan) => {
+      const rawPrice = useCadences ? plan.prices?.[activeCadence] ?? plan.monthly : isOneTime ? plan.monthly : annual ? plan.annual : plan.monthly;
       const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
-      const period = plan.periodDisplay ?? (isOneTime ? "one-time" : rawPrice > 0 ? "/mo" : "");
+      const period = useCadences ? cadence?.suffix ?? plan.periodDisplay ?? "" : plan.periodDisplay ?? (isOneTime ? "one-time" : rawPrice > 0 ? "/mo" : "");
       const badge2 = plan.highlighted && foundingDeadline ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground", children: /* @__PURE__ */ jsx(CountdownTimer, { deadline: foundingDeadline, compact: true }) }) : plan.highlighted && highlightedBadgeLabel ? highlightedBadgeLabel : void 0;
       return /* @__PURE__ */ jsx(
         PricingCard,
@@ -2357,12 +2412,13 @@ function PricingSection({
           period,
           description: plan.description,
           features: plan.features,
-          cta: plan.cta,
+          cta: pendingPlanName === plan.name ? "Redirecting\u2026" : plan.cta,
           highlighted: plan.highlighted,
           disabled: plan.disabled,
-          ctaDisabled: plan.ctaDisabled,
+          ctaDisabled: plan.ctaDisabled || pendingPlanName === plan.name,
           badge: badge2,
-          footer: renderPlanFooter?.(plan)
+          footer: renderPlanFooter?.(plan),
+          onSelect: onSelectPlan ? () => onSelectPlan(plan, useCadences ? activeCadence : void 0) : void 0
         },
         plan.name
       );