@startsimpli/billing 0.4.21 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "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/types/index.ts

@@ -76,6 +76,8 @@ export interface SubscriptionInfo {
   viewerIsOwner?: boolean;
   /** Email of the team owner so non-owners can be told who to ask. */
   ownerEmail?: string | null;
+  /** The server sends this subscription's GA4 conversion; the browser must not. */
+  conversionByServer?: boolean;
 }
 
 export interface PaymentMethod {

package/src/utils/api.test.ts

@@ -44,6 +44,19 @@ describe("BillingApiClient", () => {
     });
   });
 
+  describe("subscription conversion owner", () => {
+    it("keeps conversionByServer on both the rich and the flat cache shape", async () => {
+      const offer = { id: "o1", slug: "pro", name: "Pro" };
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ id: "s1", offer, status: "trialing", conversionByServer: true }) });
+      expect((await createClient().getSubscription("p"))?.conversionByServer).toBe(true);
+
+      mockFetch
+        .mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ subscriptionId: "s1", status: "trialing", productSlug: "p", offerId: "o1", conversionByServer: true }) })
+        .mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ slug: "p", name: "P", offers: [offer] }) });
+      expect((await createClient().getSubscription("p"))?.conversionByServer).toBe(true);
+    });
+  });
+
   describe("createCheckout", () => {
     it("sends POST without auth header (proxy handles auth server-side)", async () => {
       mockFetch.mockResolvedValue({
@@ -71,6 +84,19 @@ describe("BillingApiClient", () => {
       );
     });
 
+    it("sends the buyer's GA ids so the server can send the conversion", async () => {
+      document.cookie = "_ga=GA1.1.1234567890.1760000000; path=/";
+      document.cookie = "_ga_K1M560RH1W=GS2.1.s1760600000$o3$g1$t1760600500; path=/";
+      mockFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ sessionId: "cs_1", url: "https://pay.com" }) });
+
+      await createClient().createCheckout({ offerId: "offer-1", successUrl: "https://ok.com", cancelUrl: "https://nope.com" });
+
+      const body = JSON.parse(mockFetch.mock.calls[0][1].body);
+      expect(body.analytics).toEqual({ ga_client_id: "1234567890.1760000000", ga_session_id: "1760600000" });
+      document.cookie = "_ga=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      document.cookie = "_ga_K1M560RH1W=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+    });
+
     it("includes quantity in request body", async () => {
       mockFetch.mockResolvedValue({
         ok: true,

package/src/utils/api.ts

@@ -13,6 +13,7 @@ import type {
   UsageMap,
 } from "../types";
 import { billingErrorMessage } from "./error-message";
+import { currentGaIds } from "./ga-ids";
 
 export class BillingApiClient {
   private config: BillingConfig;
@@ -49,6 +50,7 @@ export class BillingApiClient {
     quantity?: number;
   }): Promise<CheckoutResult> {
     const url = `${this.config.apiBaseUrl}/billing/offer-checkout/`;
+    const ga = currentGaIds();
     const resp = await this.fetcher(url, {
       method: "POST",
       headers: this.headers,
@@ -57,6 +59,8 @@ export class BillingApiClient {
         success_url: params.successUrl,
         cancel_url: params.cancelUrl,
         quantity: params.quantity ?? 1,
+        // For the subscription's conversion, sent from the server.
+        ...(ga && { analytics: ga }),
       }),
     });
     if (!resp.ok) {
@@ -200,6 +204,7 @@ export class BillingApiClient {
         currentPeriodEnd: toIso(r.currentPeriodEnd),
         cancelAtPeriodEnd: Boolean(r.cancelAtPeriodEnd),
         trialEnd: toIso(r.trialEnd),
+        conversionByServer: Boolean(r.conversionByServer),
       };
     } catch {
       // Product fetch failed — degrade to "no subscription" instead of crashing.

package/src/utils/ga-ids.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { readGaIds } from "./ga-ids";
+
+describe("readGaIds", () => {
+  it("reads the client id from _ga and the session id from a GS2 _ga_<stream> cookie", () => {
+    expect(
+      readGaIds("foo=1; _ga=GA1.1.1234567890.1760000000; _ga_K1M560RH1W=GS2.1.s1760600000$o3$g1$t1760600500$j0$l0$h0"),
+    ).toEqual({ ga_client_id: "1234567890.1760000000", ga_session_id: "1760600000" });
+  });
+
+  it("reads the session id from the older GS1 format", () => {
+    expect(readGaIds("_ga=GA1.2.111.222; _ga_ABC=GS1.1.1760600001.4.1.1760600500.0.0.0")).toEqual({
+      ga_client_id: "111.222",
+      ga_session_id: "1760600001",
+    });
+  });
+
+  it("returns a client id without a session, and nothing without _ga", () => {
+    expect(readGaIds("_ga=GA1.1.111.222")).toEqual({ ga_client_id: "111.222", ga_session_id: "" });
+    expect(readGaIds("other=1")).toBeNull();
+    expect(readGaIds("")).toBeNull();
+  });
+});

package/src/utils/ga-ids.ts

@@ -0,0 +1,43 @@
+/**
+ * The buyer's GA4 client and session ids, read from gtag's cookies, so the
+ * server can send the subscription's conversion to the same GA user and
+ * session (and Google Ads can credit the ad click). Sent with checkout.
+ *
+ *   _ga=GA1.1.<client id: two numbers>
+ *   _ga_<stream>=GS1.1.<session id>.<...>        (before 2025)
+ *   _ga_<stream>=GS2.1.s<session id>$o<n>$...     (since 2025)
+ */
+export interface GaIds {
+  ga_client_id: string;
+  ga_session_id: string;
+}
+
+export function readGaIds(cookie: string): GaIds | null {
+  const jar = new Map<string, string>();
+  for (const part of cookie.split(";")) {
+    const i = part.indexOf("=");
+    if (i > 0) jar.set(part.slice(0, i).trim(), decodeURIComponent(part.slice(i + 1).trim()));
+  }
+  const ga = jar.get("_ga")?.split(".");
+  if (!ga || ga.length < 4) return null;
+  const clientId = ga.slice(-2).join(".");
+
+  let sessionId = "";
+  for (const [name, value] of jar) {
+    if (!name.startsWith("_ga_")) continue;
+    const gs2 = value.match(/^GS2\.\d+\.s(\d+)/);
+    const gs1 = value.match(/^GS1\.\d+\.(\d+)\./);
+    sessionId = gs2?.[1] ?? gs1?.[1] ?? "";
+    if (sessionId) break;
+  }
+  return { ga_client_id: clientId, ga_session_id: sessionId };
+}
+
+/** readGaIds over document.cookie; null outside a browser. */
+export function currentGaIds(): GaIds | null {
+  try {
+    return typeof document === "undefined" ? null : readGaIds(document.cookie);
+  } catch {
+    return null;
+  }
+}