@startsimpli/billing 0.4.21 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.21",
+  "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>
                       ))}