@startsimpli/billing 0.4.12 → 0.4.14

package/src/components/CurrentPlanCard.test.tsx

@@ -0,0 +1,289 @@
+/**
+ * Tests for <CurrentPlanCard /> — startsim-brx.
+ *
+ * Presentational component, so tests don't need a BillingProvider — they pass
+ * subscription + usage as props directly.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { CurrentPlanCard } from "./CurrentPlanCard";
+import type { SubscriptionInfo, UsageMap } from "../types";
+
+const freeSub: SubscriptionInfo = {
+  id: "sub-free",
+  offer: {
+    id: "o-free",
+    name: "Free",
+    slug: "vault-free",
+    unitPrice: "0.00",
+    currency: "USD",
+    pricingModel: "flat",
+    intervalUnit: "month",
+    intervalCount: 1,
+    intervalDisplay: "per month",
+    isRecurring: true,
+    isFree: true,
+    features: [
+      { key: "environments",    name: "Environments",          value: 3,    limit: 3 },
+      { key: "secrets_per_env", name: "Secrets per environment", value: 25, limit: 25 },
+      { key: "cli_exchange",    name: "simpli CLI exchange",   value: true },
+      { key: "audit_log",       name: "Audit log",             value: true },
+    ],
+    isActive: true,
+    isFeatured: false,
+    trialDays: 0,
+    sortOrder: 0,
+    ctaText: "Get Started",
+  },
+  status: "active",
+  currentPeriodStart: null,
+  currentPeriodEnd: null,
+  cancelAtPeriodEnd: false,
+  trialEnd: null,
+};
+
+const proSub: SubscriptionInfo = {
+  ...freeSub,
+  id: "sub-pro",
+  offer: {
+    ...freeSub.offer,
+    id: "o-pro",
+    name: "Pro",
+    slug: "vault-pro",
+    unitPrice: "12.00",
+    isFree: false,
+    isFeatured: true,
+    trialDays: 14,
+    features: [
+      { key: "environments",    name: "Environments",          value: -1, limit: -1 },
+      { key: "secrets_per_env", name: "Secrets per environment", value: -1, limit: -1 },
+    ],
+  },
+};
+
+describe("<CurrentPlanCard />", () => {
+  it("renders the offer name and status badge", () => {
+    render(<CurrentPlanCard subscription={freeSub} usage={{}} />);
+    // "Free" appears twice (name in h2 + price block) — both expected.
+    expect(screen.getAllByText("Free").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByTestId("plan-status").textContent).toMatch(/active/i);
+  });
+
+  it("renders 'Free' (not '$0') when offer.isFree", () => {
+    render(<CurrentPlanCard subscription={freeSub} usage={{}} />);
+    // Heading shows the offer name. The price block also shows "Free".
+    const freeNodes = screen.getAllByText(/^Free$/i);
+    expect(freeNodes.length).toBeGreaterThanOrEqual(1);
+    expect(screen.queryByText(/\$0/)).toBeNull();
+  });
+
+  it("renders dollar price + interval for paid plans", () => {
+    render(<CurrentPlanCard subscription={proSub} usage={{}} />);
+    expect(screen.getByText("$12")).toBeDefined();
+    expect(screen.getByText(/per month/i)).toBeDefined();
+  });
+
+  it("renders the offer feature list", () => {
+    render(<CurrentPlanCard subscription={freeSub} usage={{}} />);
+    expect(screen.getByText(/up to 3 environments/i)).toBeDefined();
+    expect(screen.getByText(/up to 25 secrets per environment/i)).toBeDefined();
+    expect(screen.getByText(/simpli cli exchange/i)).toBeDefined();
+    expect(screen.getByText(/audit log/i)).toBeDefined();
+  });
+
+  it("renders 'Unlimited X' for limit -1 (Pro features)", () => {
+    render(<CurrentPlanCard subscription={proSub} usage={{}} />);
+    expect(screen.getByText(/unlimited environments/i)).toBeDefined();
+    expect(screen.getByText(/unlimited secrets per environment/i)).toBeDefined();
+  });
+
+  it("shows usage progress bar + 'used / limit' text when usage data exists for a feature", () => {
+    const usage: UsageMap = {
+      environments:    { used: 2, limit: 3 },
+      secrets_per_env: { used: 12, limit: 25 },
+    };
+    render(<CurrentPlanCard subscription={freeSub} usage={usage} />);
+    expect(screen.getByTestId("usage-count-environments").textContent).toMatch(/2\s*\/\s*3/);
+    expect(screen.getByTestId("usage-count-secrets_per_env").textContent).toMatch(/12\s*\/\s*25/);
+  });
+
+  it("hides the progress bar for features without a numeric limit (cli_exchange = boolean)", () => {
+    const usage: UsageMap = { environments: { used: 1, limit: 3 } };
+    render(<CurrentPlanCard subscription={freeSub} usage={usage} />);
+    expect(screen.queryByTestId("usage-count-cli_exchange")).toBeNull();
+    expect(screen.queryByTestId("usage-count-audit_log")).toBeNull();
+  });
+
+  it("hides the progress bar for unlimited (limit -1) features", () => {
+    const usage: UsageMap = { environments: { used: 99, limit: -1 } };
+    render(<CurrentPlanCard subscription={proSub} usage={usage} />);
+    expect(screen.queryByTestId("usage-count-environments")).toBeNull();
+  });
+
+  it("renders the upgradeCta slot when provided", () => {
+    render(
+      <CurrentPlanCard
+        subscription={freeSub}
+        usage={{}}
+        upgradeCta={<button data-testid="custom-upgrade">Upgrade Now</button>}
+      />,
+    );
+    expect(screen.getByTestId("custom-upgrade")).toBeDefined();
+  });
+
+  // ───────────────────────────────────────────────────────────────
+  // State-driven banners — startsim-br2, -xe5, -dyg
+  // ───────────────────────────────────────────────────────────────
+
+  function withStatus(s: Partial<SubscriptionInfo>): SubscriptionInfo {
+    return { ...proSub, ...s };
+  }
+
+  it("trialing: shows countdown banner with days-remaining + 'Cancel trial' (br2)", () => {
+    // +7d 5min to avoid Math.floor drift on the exact-7-days boundary.
+    const trialEnd = new Date(Date.now() + 7 * 86_400_000 + 5 * 60_000).toISOString();
+    const onPortalClick = vi.fn();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "trialing", trialEnd })}
+        usage={{}}
+        onPortalClick={onPortalClick}
+      />,
+    );
+    const banner = screen.getByTestId("banner-trialing");
+    expect(banner.textContent).toMatch(/trial ends in 7 days/i);
+    expect(banner.textContent).toMatch(/cancel trial/i);
+    (banner.querySelector("button") as HTMLButtonElement).click();
+    expect(onPortalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("trialing-ends-tomorrow: 'ends tomorrow' phrasing (br2)", () => {
+    const trialEnd = new Date(Date.now() + 1 * 86_400_000 + 5 * 60_000).toISOString();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "trialing", trialEnd })}
+        usage={{}}
+        onPortalClick={() => {}}
+      />,
+    );
+    expect(screen.getByTestId("banner-trialing").textContent).toMatch(/ends tomorrow/i);
+  });
+
+  it("trialing-ends-today: 'ends today' phrasing (br2)", () => {
+    const trialEnd = new Date(Date.now() + 1 * 60_000).toISOString(); // just under 1 day
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "trialing", trialEnd })}
+        usage={{}}
+        onPortalClick={() => {}}
+      />,
+    );
+    expect(screen.getByTestId("banner-trialing").textContent).toMatch(/ends today/i);
+  });
+
+  it("past_due: red 'Payment failed' banner with portal CTA (xe5)", () => {
+    const onPortalClick = vi.fn();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "past_due", currentPeriodEnd: "2026-06-27T00:00:00Z" })}
+        usage={{}}
+        onPortalClick={onPortalClick}
+      />,
+    );
+    const banner = screen.getByTestId("banner-past-due");
+    expect(banner.textContent).toMatch(/payment failed/i);
+    expect(banner.textContent).toMatch(/update.*card/i);
+    expect(banner.getAttribute("role")).toBe("alert");
+    (banner.querySelector("button") as HTMLButtonElement).click();
+    expect(onPortalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("cancelled-in-period: shows period-end + 'Reactivate' CTA (dyg)", () => {
+    const onPortalClick = vi.fn();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({
+          status: "active",
+          cancelAtPeriodEnd: true,
+          currentPeriodEnd: "2026-06-27T00:00:00Z",
+        })}
+        usage={{}}
+        onPortalClick={onPortalClick}
+      />,
+    );
+    const banner = screen.getByTestId("banner-cancelled-in-period");
+    expect(banner.textContent).toMatch(/cancelled/i);
+    expect(banner.textContent).toMatch(/Jun 27, 2026/);
+    expect(banner.textContent).toMatch(/reactivate/i);
+    (banner.querySelector("button") as HTMLButtonElement).click();
+    expect(onPortalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("cancelled-status: same banner as cancel-at-period-end (dyg)", () => {
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "cancelled", currentPeriodEnd: "2026-06-27T00:00:00Z" })}
+        usage={{}}
+        onPortalClick={() => {}}
+      />,
+    );
+    expect(screen.getByTestId("banner-cancelled-in-period")).toBeDefined();
+  });
+
+  it("incomplete: 'Finish checkout' banner (bis)", () => {
+    const onPortalClick = vi.fn();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "incomplete" })}
+        usage={{}}
+        onPortalClick={onPortalClick}
+      />,
+    );
+    const banner = screen.getByTestId("banner-incomplete");
+    expect(banner.textContent).toMatch(/incomplete/i);
+    expect(banner.textContent).toMatch(/finish checkout/i);
+    (banner.querySelector("button") as HTMLButtonElement).click();
+    expect(onPortalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("incomplete_expired: 'Start over' banner (bis)", () => {
+    const onPortalClick = vi.fn();
+    render(
+      <CurrentPlanCard
+        subscription={withStatus({ status: "incomplete_expired" })}
+        usage={{}}
+        onPortalClick={onPortalClick}
+      />,
+    );
+    const banner = screen.getByTestId("banner-incomplete-expired");
+    expect(banner.textContent).toMatch(/expired/i);
+    expect(banner.textContent).toMatch(/start over/i);
+    (banner.querySelector("button") as HTMLButtonElement).click();
+    expect(onPortalClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("active paid: NO banner rendered", () => {
+    render(<CurrentPlanCard subscription={proSub} usage={{}} onPortalClick={() => {}} />);
+    expect(screen.queryByTestId("banner-trialing")).toBeNull();
+    expect(screen.queryByTestId("banner-past-due")).toBeNull();
+    expect(screen.queryByTestId("banner-cancelled-in-period")).toBeNull();
+  });
+
+  it("renders nothing for boolean-false features (no bragging about what you don't have)", () => {
+    const subWithFalse: SubscriptionInfo = {
+      ...freeSub,
+      offer: {
+        ...freeSub.offer,
+        features: [
+          { key: "sso", name: "SSO", value: false },
+          { key: "audit_log", name: "Audit log", value: true },
+        ],
+      },
+    };
+    render(<CurrentPlanCard subscription={subWithFalse} usage={{}} />);
+    expect(screen.queryByText(/^SSO$/i)).toBeNull();
+    expect(screen.getByText(/audit log/i)).toBeDefined();
+  });
+});

package/src/components/CurrentPlanCard.tsx

@@ -0,0 +1,317 @@
+/**
+ * <CurrentPlanCard /> — startsim-brx.
+ *
+ * The "you are here" widget on every app's billing page. Replaces the inline
+ * price-only block SubscriptionManager used to render and adds:
+ *   - the offer's features as bullets,
+ *   - usage progress bars for each numeric-limit feature
+ *     (used via the `usage` prop, typically wired by useUsage),
+ *   - a trial-ending banner when the sub is in `trialing` state.
+ *
+ * Stays presentational: takes the subscription + usage as props so it can be
+ * unit-tested without a BillingProvider context. Apps consume this through
+ * SubscriptionManager — no app-local copy of this card.
+ */
+"use client";
+
+import React from "react";
+import type { OfferFeature, SubscriptionInfo, UsageMap } from "../types";
+
+export interface CurrentPlanCardProps {
+  subscription: SubscriptionInfo;
+  usage: UsageMap;
+  /** Optional Upgrade CTA slot — SubscriptionManager wires this when the
+   * subscription is on a free offer and there's a featured paid offer. */
+  upgradeCta?: React.ReactNode;
+  /** Called when the user clicks a state-banner CTA that should route
+   * through Stripe customer portal — past-due "Update card", cancelled
+   * "Reactivate", trial "Cancel trial". SubscriptionManager wires this to
+   * usePortal so apps don't reinvent it. startsim-br2 + startsim-xe5 + startsim-dyg. */
+  onPortalClick?: () => void;
+}
+
+function priceLabel(offer: SubscriptionInfo["offer"]): string {
+  if (offer.isFree) return "Free";
+  const n = Math.floor(parseFloat(offer.unitPrice) || 0);
+  return `$${n}`;
+}
+
+function isProgressBarFeature(f: OfferFeature): boolean {
+  return typeof f.limit === "number" && f.limit > 0;
+}
+
+function featureLabel(f: OfferFeature): string | null {
+  if (f.value === false) return null;
+  if (typeof f.value === "number" || typeof f.limit === "number") {
+    const limit = typeof f.limit === "number" ? f.limit
+                : typeof f.value === "number" ? (f.value as number) : null;
+    if (limit === -1) return `Unlimited ${f.name.toLowerCase()}`;
+    if (limit !== null && limit > 0) return `Up to ${limit} ${f.name.toLowerCase()}`;
+  }
+  return f.name;
+}
+
+function StatusBadge({ status, trialEnd }: { status: string; trialEnd: string | null }) {
+  let cls = "inline-block text-xs font-semibold px-3 py-1 rounded-full ";
+  switch (status) {
+    case "active":            cls += "bg-green-50 text-green-700"; break;
+    case "trialing":          cls += "bg-blue-50 text-blue-700"; break;
+    case "past_due":          cls += "bg-yellow-50 text-yellow-700 warning"; break;
+    case "cancelled":         cls += "bg-gray-100 text-gray-600"; break;
+    case "incomplete":        cls += "bg-yellow-50 text-yellow-700"; break;
+    case "incomplete_expired":cls += "bg-red-50 text-red-700"; break;
+    case "unpaid":            cls += "bg-red-50 text-red-700"; break;
+    default:                  cls += "bg-gray-100 text-gray-600";
+  }
+  const labels: Record<string, string> = {
+    active: "Active",
+    trialing: "Trialing",
+    past_due: "Past due",
+    cancelled: "Cancelled",
+    incomplete: "Incomplete",
+    incomplete_expired: "Expired",
+    unpaid: "Unpaid",
+  };
+  const readable = labels[status] ?? status;
+  return (
+    <span
+      data-testid="plan-status"
+      role="status"
+      aria-label={`Subscription status: ${readable}`}
+      className={cls}
+    >
+      {readable}
+      {status === "trialing" && trialEnd && (
+        <span className="ml-1">until {formatDate(trialEnd)}</span>
+      )}
+    </span>
+  );
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toISOString().slice(0, 10);
+}
+
+function ProgressBar({ used, limit }: { used: number; limit: number }) {
+  // Cap at 100% so a hard-overage display can't blow out the layout.
+  const pct = Math.max(0, Math.min(100, Math.round((used / limit) * 100)));
+  const isFull = pct >= 100;
+  return (
+    <div className="w-full bg-gray-100 rounded-full h-1.5" aria-hidden="true">
+      <div
+        className={`h-1.5 rounded-full transition-all ${isFull ? "bg-red-500" : "bg-blue-600"}`}
+        style={{ width: `${pct}%` }}
+      />
+    </div>
+  );
+}
+
+function FeatureRow({ feature, used }: { feature: OfferFeature; used: number | null }) {
+  const label = featureLabel(feature);
+  if (label === null) return null;
+
+  const showBar = isProgressBarFeature(feature) && used !== null;
+  const limit = feature.limit as number;
+
+  return (
+    <li data-testid={`current-plan-feature-${feature.key}`} className="flex flex-col gap-1">
+      <div className="flex items-start gap-2 text-sm text-gray-700">
+        <svg className="w-4 h-4 text-green-600 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24"
+             stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+        <span className="flex-1">{label}</span>
+        {showBar && (
+          <span data-testid={`usage-count-${feature.key}`} className="text-xs text-gray-500 tabular-nums">
+            {used} / {limit}
+          </span>
+        )}
+      </div>
+      {showBar && <ProgressBar used={used as number} limit={limit} />}
+    </li>
+  );
+}
+
+/** Days until ISO date, rounded down; negative if past. */
+function daysUntil(iso: string): number {
+  const ms = new Date(iso).getTime() - Date.now();
+  return Math.floor(ms / 86_400_000);
+}
+
+/** Pretty "Jun 27, 2026" style — easier to scan than ISO yyyy-mm-dd in banners. */
+function prettyDate(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric", month: "short", day: "numeric", timeZone: "UTC",
+  });
+}
+
+interface BannerProps {
+  testId: string;
+  variant: "info" | "warning" | "danger" | "neutral";
+  message: React.ReactNode;
+  action?: { label: string; onClick: () => void; variant?: "primary" | "secondary" };
+}
+
+function StateBanner({ testId, variant, message, action }: BannerProps) {
+  const wrap =
+    variant === "danger"  ? "bg-red-50 border-red-200 text-red-800"
+    : variant === "warning" ? "bg-yellow-50 border-yellow-200 text-yellow-900"
+    : variant === "info"    ? "bg-blue-50 border-blue-200 text-blue-900"
+    : "bg-gray-50 border-gray-200 text-gray-800";
+  const btn =
+    variant === "danger"  ? "bg-red-600 text-white hover:bg-red-700"
+    : variant === "warning" ? "bg-yellow-600 text-white hover:bg-yellow-700"
+    : variant === "info"    ? "bg-blue-600 text-white hover:bg-blue-700"
+    : "bg-gray-900 text-white hover:bg-gray-800";
+  return (
+    <div
+      data-testid={testId}
+      className={`mb-4 rounded-lg border px-4 py-3 flex items-center justify-between gap-3 ${wrap}`}
+      role={variant === "danger" ? "alert" : "status"}
+    >
+      <p className="text-sm font-medium">{message}</p>
+      {action && (
+        <button
+          onClick={action.onClick}
+          className={`shrink-0 text-sm font-semibold px-3 py-1.5 rounded-lg cursor-pointer transition-colors ${btn}`}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function CurrentPlanCard({ subscription, usage, upgradeCta, onPortalClick }: CurrentPlanCardProps) {
+  const offer = subscription.offer;
+  const features = offer.features ?? [];
+
+  // State-driven banner choice — at most one banner at the top of the card.
+  // Precedence: past_due > cancelled-in-period > trialing > none.
+  let stateBanner: React.ReactNode = null;
+  if (subscription.status === "past_due" && onPortalClick) {
+    // startsim-xe5: red banner with portal CTA so users fix the card fast.
+    stateBanner = (
+      <StateBanner
+        testId="banner-past-due"
+        variant="danger"
+        message={
+          <>
+            Payment failed{subscription.currentPeriodEnd ? ` on ${prettyDate(subscription.currentPeriodEnd)}` : ""}.
+            {" "}Update your card to keep your subscription active.
+          </>
+        }
+        action={{ label: "Update card", onClick: onPortalClick }}
+      />
+    );
+  } else if (subscription.status === "cancelled" || subscription.cancelAtPeriodEnd) {
+    // startsim-dyg: cancelled-in-period — user keeps access until the end of
+    // the period, can reactivate via portal.
+    const endDate = subscription.currentPeriodEnd ? prettyDate(subscription.currentPeriodEnd) : "the end of your period";
+    stateBanner = (
+      <StateBanner
+        testId="banner-cancelled-in-period"
+        variant="neutral"
+        message={
+          <>
+            Your {offer.name} plan is cancelled. You'll keep access until {endDate}.
+          </>
+        }
+        action={onPortalClick ? { label: "Reactivate", onClick: onPortalClick } : undefined}
+      />
+    );
+  } else if ((subscription.status === "incomplete" || subscription.status === "incomplete_expired") && onPortalClick) {
+    // startsim-bis — checkout was abandoned mid-flow (incomplete) or expired
+    // after 24h. Both states are unrecoverable without going back through
+    // Stripe; nudge the user toward picking up where they left off. Re-uses
+    // the portal CTA so apps don't reimplement the redirect.
+    const expired = subscription.status === "incomplete_expired";
+    stateBanner = (
+      <StateBanner
+        testId={`banner-${subscription.status.replace("_", "-")}`}
+        variant="warning"
+        message={
+          expired
+            ? `Your ${offer.name} checkout expired. Start over to activate the plan.`
+            : `Your ${offer.name} plan setup is incomplete. Finish checkout to activate.`
+        }
+        action={{
+          label: expired ? "Start over" : "Finish checkout",
+          onClick: onPortalClick,
+        }}
+      />
+    );
+  } else if (subscription.status === "trialing" && subscription.trialEnd) {
+    // startsim-br2: trial countdown — gentle info banner until ≤3 days, then
+    // upgrade to warning so users notice.
+    const days = daysUntil(subscription.trialEnd);
+    const variant: "info" | "warning" = days <= 3 ? "warning" : "info";
+    const label = days <= 0
+      ? `Your trial ends today (${prettyDate(subscription.trialEnd)}).`
+      : days === 1
+        ? `Your trial ends tomorrow (${prettyDate(subscription.trialEnd)}).`
+        : `Your trial ends in ${days} days (${prettyDate(subscription.trialEnd)}).`;
+    stateBanner = (
+      <StateBanner
+        testId="banner-trialing"
+        variant={variant}
+        message={label}
+        action={onPortalClick ? { label: "Cancel trial", onClick: onPortalClick } : undefined}
+      />
+    );
+  }
+
+  return (
+    <div data-testid="current-plan" className="rounded-2xl border border-gray-200 bg-white shadow-sm p-8">
+      {stateBanner}
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold text-gray-900">{offer.name}</h2>
+        <StatusBadge status={subscription.status} trialEnd={subscription.trialEnd} />
+      </div>
+
+      <div className="mb-4">
+        {offer.isFree ? (
+          <span aria-label="Free">
+            <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">Free</span>
+          </span>
+        ) : (
+          <span aria-label={`${priceLabel(offer)} ${offer.intervalDisplay}`}>
+            <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">{priceLabel(offer)}</span>
+            <span aria-hidden="true" className="text-base text-gray-500 ml-1">{offer.intervalDisplay}</span>
+          </span>
+        )}
+      </div>
+
+      {/* Active paid subs surface "Next billing date" prominently — that's
+          what users actually want to know. Free + cancelled + no-period subs
+          fall back to the period range / nothing. startsim-7j4. */}
+      {subscription.currentPeriodEnd && !offer.isFree && subscription.status === "active" && !subscription.cancelAtPeriodEnd ? (
+        <p data-testid="next-billing-date" className="text-sm text-gray-600 mb-6">
+          Next billing date: {formatDate(subscription.currentPeriodEnd)}
+        </p>
+      ) : subscription.currentPeriodStart && subscription.currentPeriodEnd ? (
+        <p className="text-sm text-gray-500 mb-6">
+          Billing period: {formatDate(subscription.currentPeriodStart)} to{" "}
+          {formatDate(subscription.currentPeriodEnd)}
+        </p>
+      ) : null}
+
+      {features.length > 0 && (
+        <ul data-testid="current-plan-features" className="space-y-3 mb-6">
+          {features.map((f) => {
+            const u = usage[f.key];
+            return (
+              <FeatureRow
+                key={f.key}
+                feature={f}
+                used={u && typeof u.used === "number" ? u.used : null}
+              />
+            );
+          })}
+        </ul>
+      )}
+
+      {upgradeCta && <div className="pt-2">{upgradeCta}</div>}
+    </div>
+  );
+}