@startsimpli/billing 0.4.23 → 0.4.25

package/src/components/PricingPage.tsx

@@ -12,6 +12,9 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
+import { formatFeatureLabel } from "../utils/format";
+import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -19,10 +22,18 @@ export interface PricingPageProps {
 
   /** Called when user clicks an offer's CTA button */
   onSelectOffer?: (offer: ProductOffer) => void;
+
+  /** The viewer's plan, so their card reads "Current plan" and is disabled.
+   * Omit on signed-out pages. crochet_patterns-34n7. */
+  currentPlan?: CurrentPlanState | null;
 }
 
-export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
+export function PricingPage({ productId, onSelectOffer, currentPlan }: PricingPageProps) {
   const { product, loading, error } = useProduct(productId);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
 
   if (loading) {
     return (
@@ -48,6 +59,8 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
     );
   }
 
+  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+
   return (
     <div data-testid="pricing-page" className="max-w-5xl mx-auto px-6 py-12">
       <div className="text-center mb-12">
@@ -59,12 +72,19 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
         </p>
       </div>
 
+      {hasChoice && (
+        <div className="mb-10">
+          <IntervalToggle interval={interval} onChange={setInterval} />
+        </div>
+      )}
+
       <div data-testid="pricing-cards" className="flex flex-wrap justify-center gap-6 items-stretch">
-        {product.offers.map((offer) => (
+        {entries.map((entry) => (
           <PricingCard
-            key={offer.id}
-            offer={offer}
+            key={entry.offer.id}
+            entry={entry}
             onSelect={onSelectOffer}
+            isCurrent={entry.offer.id === currentOfferId}
           />
         ))}
       </div>
@@ -73,11 +93,13 @@ export function PricingPage({ productId, onSelectOffer }: PricingPageProps) {
 }
 
 interface PricingCardProps {
-  offer: ProductOffer;
+  entry: IntervalEntry;
   onSelect?: (offer: ProductOffer) => void;
+  isCurrent?: boolean;
 }
 
-function PricingCard({ offer, onSelect }: PricingCardProps) {
+function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
+  const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
 
   return (
@@ -98,19 +120,15 @@ function PricingCard({ offer, onSelect }: PricingCardProps) {
         </span>
       )}
 
-      <h2 className="text-xl font-bold text-gray-900 mb-4">{offer.name}</h2>
+      <h2 className="text-xl font-bold text-gray-900 mb-4">{tier.name}</h2>
 
       <div className="mb-2">
-        {offer.isFree ? (
-          <span className="text-4xl font-extrabold text-gray-900">Free</span>
-        ) : (
-          <span>
-            <span className="text-4xl font-extrabold text-gray-900">
-              ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-            </span>
-            <span className="text-base text-gray-500 ml-1"> {offer.intervalDisplay}</span>
-          </span>
-        )}
+        <OfferPrice
+          offer={offer}
+          amountClassName="text-4xl font-extrabold text-gray-900"
+          intervalClassName="text-base text-gray-500"
+        />
+        <AnnualNote entry={entry} className="mt-1" />
       </div>
 
       {offer.trialDays > 0 && (
@@ -129,23 +147,27 @@ function PricingCard({ offer, onSelect }: PricingCardProps) {
             className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
             <FeatureIcon value={feature.value} />
-            <span>{feature.name}</span>
+            <span>{formatFeatureLabel(feature)}</span>
           </li>
         ))}
       </ul>
 
       <button
-        onClick={() => onSelect?.(offer)}
+        onClick={() => !isCurrent && onSelect?.(offer)}
         data-testid={`cta-${offer.slug}`}
+        disabled={isCurrent}
+        aria-disabled={isCurrent || undefined}
         className={`
-          w-full py-3.5 px-6 text-base font-bold rounded-xl cursor-pointer transition-colors
-          ${isFeatured
-            ? "bg-blue-600 text-white hover:bg-blue-700"
-            : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+          w-full py-3.5 px-6 text-base font-bold rounded-xl transition-colors
+          ${isCurrent
+            ? "bg-gray-100 text-gray-500 cursor-not-allowed"
+            : isFeatured
+              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
+              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
           }
         `}
       >
-        {offer.ctaText}
+        {isCurrent ? "Current plan" : offer.ctaText}
       </button>
     </div>
   );

package/src/components/PricingSection.test.tsx

@@ -217,10 +217,11 @@ describe("PricingSection", () => {
       expect(screen.getByText("Starter")).toBeDefined();
     });
 
-    // Starter has 5 features, but should only show 2
+    // Starter has 5 features, but should only show 2. Numeric allowances read
+    // "Up to 1 team seats" since crochet_patterns-34n7, so match the noun.
     // We should see "Team seats" and "Projects" (first 2), but not "Storage"
-    expect(screen.getAllByText("Team seats").length).toBe(3); // All 3 cards
-    expect(screen.getAllByText("Projects").length).toBe(3); // All 3 cards
+    expect(screen.getAllByText(/team seats$/i).length).toBe(3); // All 3 cards
+    expect(screen.getAllByText(/projects$/i).length).toBe(3); // All 3 cards
     // Storage should appear fewer times or not at all since we're limiting to 2 features per card
     const storageElements = screen.queryAllByText("Storage");
     expect(storageElements.length).toBeLessThan(3); // Should not appear in all cards
@@ -240,8 +241,8 @@ describe("PricingSection", () => {
     });
 
     // With default maxFeatures=4, should show first 4 features
-    expect(screen.getAllByText("Team seats").length).toBe(3);
-    expect(screen.getAllByText("Projects").length).toBe(3);
+    expect(screen.getAllByText(/team seats$/i).length).toBe(3);
+    expect(screen.getAllByText(/projects$/i).length).toBe(3);
     expect(screen.getAllByText("Storage").length).toBe(3);
     expect(screen.getAllByText("Support").length).toBe(3);
   });

package/src/components/PricingSection.tsx

@@ -12,6 +12,10 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { tierBelow } from "../utils/tiers";
+import { FeatureIcon } from "./FeatureIcon";
+import { formatFeatureLabel } from "../utils/format";
+import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingSectionProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -22,14 +26,23 @@ export interface PricingSectionProps {
 
   /** Maximum number of features to display per card (default 4) */
   maxFeatures?: number;
+
+  /** The viewer's plan, so their card reads "Current plan" and is disabled.
+   * Omit on signed-out pages. crochet_patterns-34n7. */
+  currentPlan?: CurrentPlanState | null;
 }
 
 export function PricingSection({
   productId,
   onSelectOffer,
   maxFeatures = 4,
+  currentPlan,
 }: PricingSectionProps) {
   const { product, loading, error } = useProduct(productId);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    resolveCurrentOfferId(product?.offers ?? [], currentPlan),
+  );
 
   if (loading) {
     return (
@@ -55,32 +68,47 @@ export function PricingSection({
     );
   }
 
+  // One offer per tier for the chosen interval (crochet_patterns-34n7).
+  const visibleOffers = entries.map((e) => e.offer);
+  const currentOfferId = resolveCurrentOfferId(product.offers, currentPlan);
+
   return (
     <div data-testid="pricing-section" className="w-full px-4 py-8">
+      {hasChoice && (
+        <div className="mb-6">
+          <IntervalToggle interval={interval} onChange={setInterval} />
+        </div>
+      )}
       <div className="flex flex-row flex-wrap justify-center gap-4 items-stretch">
-        {product.offers.map((offer) => (
-          <SectionCard
-            key={offer.id}
-            offer={offer}
-            onSelect={onSelectOffer}
-            maxFeatures={maxFeatures}
-            buildsOn={tierBelow(product.offers, offer)?.name ?? null}
-          />
-        ))}
+        {entries.map((entry) => {
+          const below = tierBelow(visibleOffers, entry.offer);
+          return (
+            <SectionCard
+              key={entry.offer.id}
+              entry={entry}
+              onSelect={onSelectOffer}
+              maxFeatures={maxFeatures}
+              buildsOn={below ? entries.find((e) => e.offer.id === below.id)?.tier.name ?? below.name : null}
+              isCurrent={entry.offer.id === currentOfferId}
+            />
+          );
+        })}
       </div>
     </div>
   );
 }
 
 interface SectionCardProps {
-  offer: ProductOffer;
+  entry: IntervalEntry;
+  isCurrent?: boolean;
   onSelect?: (offer: ProductOffer) => void;
   maxFeatures: number;
   /** Name of the tier just below this one, when there is one. */
   buildsOn?: string | null;
 }
 
-function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProps) {
+function SectionCard({ entry, onSelect, maxFeatures, buildsOn, isCurrent = false }: SectionCardProps) {
+  const { offer, tier } = entry;
   const isFeatured = offer.isFeatured;
   const visibleFeatures = offer.features.slice(0, maxFeatures);
 
@@ -96,19 +124,15 @@ function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProp
         }
       `}
     >
-      <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
+      <h3 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h3>
 
       <div className="mb-2">
-        {offer.isFree ? (
-          <span className="text-2xl font-extrabold text-gray-900">Free</span>
-        ) : (
-          <span>
-            <span className="text-2xl font-extrabold text-gray-900">
-              ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-            </span>
-            <span className="text-sm text-gray-500 ml-1"> {offer.intervalDisplay}</span>
-          </span>
-        )}
+        <OfferPrice
+          offer={offer}
+          amountClassName="text-2xl font-extrabold text-gray-900"
+          intervalClassName="text-sm text-gray-500"
+        />
+        <AnnualNote entry={entry} className="mt-1" />
       </div>
 
       {offer.trialDays > 0 && (
@@ -132,32 +156,28 @@ function SectionCard({ offer, onSelect, maxFeatures, buildsOn }: SectionCardProp
             key={feature.key}
             className="flex items-center gap-2 py-1.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
-            <svg
-              className="w-3.5 h-3.5 text-green-500 shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={3}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-            </svg>
-            <span>{feature.name}</span>
+            <FeatureIcon value={feature.value} size="w-3.5 h-3.5" />
+            <span>{formatFeatureLabel(feature)}</span>
           </li>
         ))}
       </ul>
 
       <button
-        onClick={() => onSelect?.(offer)}
+        onClick={() => !isCurrent && onSelect?.(offer)}
         data-testid={`section-cta-${offer.slug}`}
+        disabled={isCurrent}
+        aria-disabled={isCurrent || undefined}
         className={`
-          w-full py-2.5 px-4 text-sm font-bold rounded-lg cursor-pointer transition-colors
-          ${isFeatured
-            ? "bg-blue-600 text-white hover:bg-blue-700"
-            : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+          w-full py-2.5 px-4 text-sm font-bold rounded-lg transition-colors
+          ${isCurrent
+            ? "bg-gray-100 text-gray-500 cursor-not-allowed"
+            : isFeatured
+              ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
+              : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
           }
         `}
       >
-        {offer.ctaText}
+        {isCurrent ? "Current plan" : offer.ctaText}
       </button>
     </div>
   );

package/src/components/SubscriptionManager.test.tsx

@@ -376,12 +376,15 @@ describe("SubscriptionManager", () => {
       expect(screen.getByTestId("available-plans")).toBeDefined();
     });
 
-    // Click Enterprise upgrade option
+    // Click Enterprise upgrade option: already paying, so it asks first.
     const enterpriseButton = screen.getByTestId("upgrade-cta-enterprise-monthly");
     await userEvent.click(enterpriseButton);
+    expect(onPlanChange).not.toHaveBeenCalled();
+    await userEvent.click(await screen.findByTestId("plan-change-confirm-button"));
 
     expect(onPlanChange).toHaveBeenCalledWith(
-      expect.objectContaining({ slug: "enterprise-monthly" })
+      expect.objectContaining({ slug: "enterprise-monthly" }),
+      null,
     );
   });
 
@@ -408,7 +411,9 @@ describe("SubscriptionManager", () => {
     expect(screen.getByText(/manage billing/i)).toBeDefined();
   });
 
-  it("shows No active subscription when no subscription exists", async () => {
+  // A signed-in user with no subscription row is on the free plan — the 404
+  // path only happens once the session is accepted (crochet_patterns-34n7).
+  it("shows the free plan as theirs when no subscription exists", async () => {
     const fetcher = mockFetchRouter({
       "/billing/subscription/current/": null, // 404 - no subscription
       "/billing/products/": mockProduct,
@@ -425,8 +430,9 @@ describe("SubscriptionManager", () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText(/no active subscription/i)).toBeDefined();
+      expect(screen.getByText(/you're on the starter plan/i)).toBeDefined();
     });
+    expect(screen.queryByText(/no active subscription/i)).toBeNull();
   });
 
   it("shows subscribe options when no subscription", async () => {
@@ -591,7 +597,8 @@ describe("SubscriptionManager", () => {
     const trialNodes = screen.getAllByTestId("trial-copy");
     expect(trialNodes.length).toBe(1);
     expect(trialNodes[0].textContent).toMatch(/14-day free trial/i);
-    expect(trialNodes[0].textContent).toMatch(/no card required/i);
+    // Checkout takes a card up front, so never promise otherwise (crochet_patterns-34n7).
+    expect(trialNodes[0].textContent).not.toMatch(/no card/i);
   });
 
   it("renders 'Unlimited X' for features with limit === -1 (o7u)", async () => {
@@ -631,8 +638,10 @@ describe("SubscriptionManager", () => {
 
   it("free-offer CTA calls subscribe-free, not Stripe checkout (6vk)", async () => {
     const onPlanChange = vi.fn();
+    // On Pro, so the Free card is a downgrade and clickable (with no
+    // subscription Free is the current plan and its CTA is disabled).
     const fetcher = mockFetchRouter({
-      "/billing/subscription/current/": null,
+      "/billing/subscription/current/": mockSubscriptionActive,
       "/billing/products/": mockProduct,
     });
     const Wrapper = createWrapper(fetcher);
@@ -649,8 +658,10 @@ describe("SubscriptionManager", () => {
 
     await waitFor(() => expect(screen.getByTestId("available-plans")).toBeDefined());
 
-    // Click the Free card's CTA (slug "starter-monthly", isFree=true)
-    (await screen.findByTestId("upgrade-cta-starter-monthly")).click();
+    // Click the Free card's CTA (slug "starter-monthly", isFree=true), then
+    // confirm: leaving a paid plan is never one click (crochet_patterns-lr7mj).
+    await userEvent.click(await screen.findByTestId("upgrade-cta-starter-monthly"));
+    await userEvent.click(await screen.findByTestId("plan-change-confirm-button"));
 
     // subscribe-free is hit (server fetcher saw the POST)
     await waitFor(() => {
@@ -785,11 +796,12 @@ describe("SubscriptionManager", () => {
     };
 
     const cases: Case[] = [
-      // No subscription (legacy / pre-auto-enrol): every card is an "upgrade"
-      { label: "no-sub · Starter card → 'Start Free' (upgrade)",
+      // No subscription row (signed in, never enrolled): they are on the free
+      // plan, so it reads Current plan and is disabled (crochet_patterns-34n7).
+      { label: "no-sub · Starter card → 'Current plan' disabled badge",
         subscription: null, cardSlug: "starter-monthly",
-        expectedCta: /start free/i, shouldBeDisabled: false,
-        shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
+        expectedCta: /current plan/i, shouldBeDisabled: true,
+        shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
       { label: "no-sub · Pro card → 'Start Trial' (upgrade)",
         subscription: null, cardSlug: "pro-monthly",
         expectedCta: /start trial/i, shouldBeDisabled: false,
@@ -823,10 +835,12 @@ describe("SubscriptionManager", () => {
         cardSlug: "pro-monthly",
         expectedCta: /current plan/i, shouldBeDisabled: true,
         shouldShowCurrentBadge: true, shouldShowTrialCopy: false },
-      { label: "pro · Enterprise card → upgrade CTA, trial copy if applicable",
+      // Already paying: an upgrade changes the plan in place, so it says so
+      // instead of the new-buyer pitch (crochet_patterns-anw61).
+      { label: "pro · Enterprise card → 'Upgrade to Enterprise', no trial copy",
         subscription: mockSubscriptionActive,
         cardSlug: "enterprise-monthly",
-        expectedCta: /contact sales/i, shouldBeDisabled: false,
+        expectedCta: /upgrade to enterprise/i, shouldBeDisabled: false,
         shouldShowCurrentBadge: false, shouldShowTrialCopy: false },
 
       // TRIALING Pro current sub
@@ -958,8 +972,10 @@ describe("SubscriptionManager", () => {
       </Wrapper>
     );
 
-    // Banner renders
-    await waitFor(() => expect(screen.getByTestId("status-banner-success")).toBeDefined());
+    // No subscription found yet: "Activating…", never "activated" beside
+    // Free (crochet_patterns-nag60).
+    await waitFor(() => expect(screen.getByTestId("status-banner-activating")).toBeDefined());
+    expect(screen.queryByTestId("status-banner-success")).toBeNull();
 
     // success-sync was hit
     await waitFor(() => {
@@ -986,7 +1002,10 @@ describe("SubscriptionManager", () => {
       </Wrapper>
     );
 
-    await waitFor(() => expect(screen.getByTestId("status-banner-success")).toBeDefined());
+    await waitFor(() => {
+      const calls = (fetcher as ReturnType<typeof vi.fn>).mock.calls.map((c) => c[0] as string);
+      expect(calls.some((u) => u.includes("/billing/success-sync/"))).toBe(true);
+    });
     rerender(
       <Wrapper>
         <SubscriptionManager productId="raise-simpli" returnUrl="https://t/s" statusMessage="success" />
@@ -1274,9 +1293,9 @@ describe("SubscriptionManager", () => {
       </Wrapper>
     );
 
-    // No crash; falls through to the empty-state copy.
+    // No crash; falls through to the free-plan copy.
     await waitFor(() =>
-      expect(screen.getByText("No active subscription")).toBeDefined()
+      expect(screen.getByText(/you're on the starter plan/i)).toBeDefined()
     );
   });