@startsimpli/billing 0.4.20 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/FeatureIcon.tsx

@@ -0,0 +1,18 @@
+/**
+ * The tick or cross beside an offer feature. A feature an offer declares as
+ * `false` is one that plan does not include, so it gets a cross, never a tick.
+ */
+export function FeatureIcon({ value, size = "w-4 h-4" }: { value: unknown; size?: string }) {
+  if (value === false) {
+    return (
+      <svg role="img" aria-label="Not included" className={`${size} text-gray-300 shrink-0`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    );
+  }
+  return (
+    <svg role="img" aria-label="Included" className={`${size} 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>
+  );
+}

package/src/components/PricingDetailPage.tsx

@@ -12,6 +12,7 @@ import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer, OfferFeature } from "../types";
 import { cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
+import { FeatureIcon } from "./FeatureIcon";
 
 export interface PricingDetailPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -190,21 +191,6 @@ function DetailCard({ offer, onSelect, buildsOn }: DetailCardProps) {
   );
 }
 
-function FeatureIcon({ value }: { value: unknown }) {
-  if (value === false) {
-    return (
-      <svg role="img" aria-label="Not included" className="w-4 h-4 text-gray-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
-    );
-  }
-  return (
-    <svg role="img" aria-label="Included" className="w-4 h-4 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>
-  );
-}
-
 interface ComparisonTableProps {
   offers: ProductOffer[];
   featureKeys: string[];

package/src/components/PricingPage.features.test.tsx

@@ -0,0 +1,54 @@
+/**
+ * A feature an offer declares as `false` is a feature that plan does NOT have.
+ * The pricing cards ticked every feature, so crochet's Free plan read as including
+ * "AI pattern designs" (crochet_patterns-utk6).
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { PricingPage } from "./PricingPage";
+import type { BillingProduct } from "../types";
+
+const product: BillingProduct = {
+  id: "prod-1",
+  slug: "crochet-patterns",
+  name: "Crochet",
+  description: "",
+  offers: [
+    {
+      id: "free", name: "Free", slug: "crochet-free", unitPrice: "0.00", currency: "USD",
+      pricingModel: "flat", intervalUnit: "month", intervalCount: 1, intervalDisplay: "per month",
+      isRecurring: true, isFree: true,
+      features: [
+        { key: "ai_designs", name: "AI pattern designs", value: false, limit: null },
+        { key: "save_patterns", name: "Save patterns", value: true, limit: null },
+      ],
+      isActive: true, isFeatured: false, trialDays: 0, sortOrder: 0, ctaText: "Start free",
+    },
+  ],
+};
+
+function renderModal() {
+  const fetcher = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(product) }) as unknown as typeof fetch;
+  render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <PricingPage productId="crochet-patterns" />
+    </BillingProvider>
+  );
+}
+
+describe("PricingPage feature list", () => {
+  it("marks a false-valued feature as not included", async () => {
+    renderModal();
+    const row = (await screen.findByText("AI pattern designs")).closest("li")!;
+    expect(within(row).getByRole("img", { name: "Not included" })).toBeDefined();
+    expect(within(row).queryByRole("img", { name: "Included" })).toBeNull();
+  });
+
+  it("still ticks an included feature", async () => {
+    renderModal();
+    const row = (await screen.findByText("Save patterns")).closest("li")!;
+    await waitFor(() => expect(within(row).getByRole("img", { name: "Included" })).toBeDefined());
+  });
+});

package/src/components/PricingPage.tsx

@@ -11,6 +11,7 @@
 import React from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
+import { FeatureIcon } from "./FeatureIcon";
 
 export interface PricingPageProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -127,9 +128,7 @@ function PricingCard({ offer, onSelect }: PricingCardProps) {
             key={feature.key}
             className="flex items-center gap-2.5 py-2.5 text-sm text-gray-600 border-b border-gray-100 last:border-0"
           >
-            <svg className="w-4 h-4 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>
+            <FeatureIcon value={feature.value} />
             <span>{feature.name}</span>
           </li>
         ))}

package/src/components/UpgradeModal.features.test.tsx

@@ -0,0 +1,54 @@
+/**
+ * A feature an offer declares as `false` is a feature that plan does NOT have.
+ * The modal ticked every feature, so crochet's Free plan read as including
+ * "AI pattern designs" (crochet_patterns-utk6).
+ */
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import React from "react";
+import { BillingProvider } from "../hooks/BillingProvider";
+import { UpgradeModal } from "./UpgradeModal";
+import type { BillingProduct } from "../types";
+
+const product: BillingProduct = {
+  id: "prod-1",
+  slug: "crochet-patterns",
+  name: "Crochet",
+  description: "",
+  offers: [
+    {
+      id: "free", name: "Free", slug: "crochet-free", unitPrice: "0.00", currency: "USD",
+      pricingModel: "flat", intervalUnit: "month", intervalCount: 1, intervalDisplay: "per month",
+      isRecurring: true, isFree: true,
+      features: [
+        { key: "ai_designs", name: "AI pattern designs", value: false, limit: null },
+        { key: "save_patterns", name: "Save patterns", value: true, limit: null },
+      ],
+      isActive: true, isFeatured: false, trialDays: 0, sortOrder: 0, ctaText: "Start free",
+    },
+  ],
+};
+
+function renderModal() {
+  const fetcher = vi.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(product) }) as unknown as typeof fetch;
+  render(
+    <BillingProvider apiBaseUrl="https://api.test.com/api/v1" fetcher={fetcher}>
+      <UpgradeModal productId="crochet-patterns" open={true} onClose={() => {}} />
+    </BillingProvider>
+  );
+}
+
+describe("UpgradeModal feature list", () => {
+  it("marks a false-valued feature as not included", async () => {
+    renderModal();
+    const row = (await screen.findByText("AI pattern designs")).closest("li")!;
+    expect(within(row).getByRole("img", { name: "Not included" })).toBeDefined();
+    expect(within(row).queryByRole("img", { name: "Included" })).toBeNull();
+  });
+
+  it("still ticks an included feature", async () => {
+    renderModal();
+    const row = (await screen.findByText("Save patterns")).closest("li")!;
+    await waitFor(() => expect(within(row).getByRole("img", { name: "Included" })).toBeDefined());
+  });
+});

package/src/components/UpgradeModal.tsx

@@ -12,6 +12,7 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
+import { FeatureIcon } from "./FeatureIcon";
 
 export interface UpgradeModalProps {
   productId: string;
@@ -162,9 +163,7 @@ export function UpgradeModal({
                     <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
                       {offer.features.map((f) => (
                         <li key={f.key} className="flex items-center gap-1.5 py-1 text-sm text-gray-600">
-                          <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>
+                          <FeatureIcon value={f.value} size="w-3.5 h-3.5" />
                           {f.name}
                         </li>
                       ))}

package/src/hooks/useSubscription.test.tsx

@@ -181,4 +181,24 @@ describe("useSubscription", () => {
       expect(result.current.subscription?.id).toBe("sub-2")
     );
   });
+
+  it("fetches again when refetchKey changes (the signed-in user arrives after the first fetch)", async () => {
+    // First call: the session isn't ready yet, so the API says 401. Second: signed in.
+    const mockFetch = vi.fn()
+      .mockResolvedValueOnce({ ok: false, status: 401, json: async () => ({ error: "Not authenticated" }) })
+      .mockResolvedValue({ ok: true, status: 200, json: async () => mockSubscription }) as unknown as typeof fetch;
+    const wrapper = createWrapper(mockFetch);
+
+    const { result, rerender } = renderHook(({ user }) => useSubscription(undefined, { refetchKey: user }), {
+      wrapper,
+      initialProps: { user: undefined as string | undefined },
+    });
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.subscription).toBeNull();
+
+    rerender({ user: "user-1" });
+    await waitFor(() => expect(result.current.subscription?.id).toBe("sub-123"));
+    expect(result.current.error).toBeNull();
+  });
 });
+

package/src/hooks/useSubscription.ts

@@ -3,6 +3,10 @@
  *
  * Pass the app's product slug so another app's plan is never returned
  * (startsim-oyr3a.2).
+ *
+ * Pass the signed-in user's id as `refetchKey`. The first fetch can run before
+ * the session is ready (straight back from sign-in it answers 401), and a plan
+ * read once and never again showed paying users as Free until they reloaded.
  */
 
 import { useCallback, useEffect, useState } from "react";
@@ -16,7 +20,13 @@ interface UseSubscriptionResult {
   refetch: () => void;
 }
 
-export function useSubscription(productId?: string): UseSubscriptionResult {
+export interface UseSubscriptionOptions {
+  /** Fetch again whenever this changes, e.g. the signed-in user's id. */
+  refetchKey?: unknown;
+}
+
+export function useSubscription(productId?: string, options: UseSubscriptionOptions = {}): UseSubscriptionResult {
+  const { refetchKey } = options;
   const { client } = useBillingContext();
   const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null);
   const [loading, setLoading] = useState(true);
@@ -37,7 +47,7 @@ export function useSubscription(productId?: string): UseSubscriptionResult {
 
   useEffect(() => {
     fetchSubscription();
-  }, [fetchSubscription]);
+  }, [fetchSubscription, refetchKey]);
 
   return { subscription, loading, error, refetch: fetchSubscription };
 }