Extract pricing UI components into standalone, framework-agnostic module (#2433)

* Add pure pricing-ui subpath export

Extract the pricing table components (PricingTable, PricingCard,
PlanEntitlements, FeatureItem, QuotaItem) into a new src/pricing-ui
module, exposed as @zuplo/zudoku-plugin-monetization/pricing-ui.

The new module has no dependency on zudoku runtime (router, hooks,
components). It uses lucide-react + a local clsx/tailwind-merge cn
util and accepts the CTA button as a render prop, so consumers in
other projects can wire up their own Button/Link.

PricingPage now renders the pure PricingTable internally and injects
the zudoku Button/Link via renderAction.

* Document pricing-ui consumer requirements

Spell out the shadcn-style Tailwind tokens the module relies on so
consumers know which CSS variables / theme setup is required. Addresses
Copilot review feedback on PR #2433.

* Drop lucide-react peer and add renderCard slot

Two pieces of consumer feedback from integrating pricing-ui into the
portal monetization preview:

* The lucide-react peer (>=1.0.0) was too narrow — portal is still on
  0.546.x and had to fall back to --legacy-peer-deps. Since the module
  only uses a single icon, inline the Check SVG locally and drop the
  peer dep entirely. The module now has zero icon-library coupling.

* No per-card slot on <PricingTable> for overlay UI (drag handles,
  kebab menus, etc.). Add a renderCard(plan, { isPopular, defaultCard })
  render prop so consumers can wrap or replace individual cards while
  keeping the table's grid, empty state, and tax legend.

* Derive monthly/yearly fallback in getPriceFromPlan

Consumers that don't have server-computed monthlyPrice/yearlyPrice on
their Plan objects were having to mirror a price derivation step
locally (sum flat-fee rate cards on the last phase, multiply by a
months-per-cadence factor). Move that into pricing-ui so it's the same
logic on both sides:

* getPriceFromPlan keeps preferring plan.monthlyPrice / yearlyPrice
  when set (zudoku metering API path is unchanged), and now falls back
  to a derivation from plan.phases when both are nullish.
* Export derivePriceFromPlan(plan) from /pricing-ui for consumers that
  want to materialize the numbers upfront.
* Cadence -> months conversion uses tinyduration so any ISO 8601
  duration (P1Y, P3M, P1W, P30D, ...) is handled, with weeks/days
  using their average-month approximations (12/52, 1/30).
* Defensive against partial Plan shapes (subscription.plan stub used
  in /subscriptions code paths has no phases / rateCards).

* Enforce zudoku-free pricing-ui via biome rule

Use noRestrictedImports with gitignore-style patterns in an override
that targets pricing-ui plus the shared utils/types files it pulls in.
Direct OR transitive zudoku imports now fail the biome ci check (which
already runs in pnpm check), guaranteeing that the /pricing-ui subpath
stays consumable in projects without zudoku installed.

Replaces the ad-hoc dependency-graph trace test that was briefly added
in the previous commit.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: mosch

biome.jsonc

@@ -123,6 +123,34 @@
           }
         }
       }
+    },
+    {
+      // Anything reachable from the pure /pricing-ui subpath export of
+      // @zuplo/zudoku-plugin-monetization MUST stay zudoku-free so it can be
+      // consumed in projects that don't have zudoku installed. This applies
+      // to pricing-ui itself plus the shared utils/types it pulls in.
+      "includes": [
+        "packages/plugin-zuplo-monetization/src/pricing-ui/**",
+        "packages/plugin-zuplo-monetization/src/utils/**",
+        "packages/plugin-zuplo-monetization/src/types/**"
+      ],
+      "linter": {
+        "rules": {
+          "style": {
+            "noRestrictedImports": {
+              "level": "error",
+              "options": {
+                "patterns": [
+                  {
+                    "group": ["zudoku", "zudoku/**"],
+                    "message": "pricing-ui (and its transitive utils/types) must remain zudoku-free — it ships as a standalone subpath consumed by external projects."
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
     }
   ],
   "assist": { "enabled": false }

packages/plugin-zuplo-monetization/package.json

@@ -10,7 +10,8 @@
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./pricing-ui": "./src/pricing-ui/index.ts"
   },
   "files": [
     "dist"
@@ -26,12 +27,18 @@
     "types": "./dist/index.d.mts",
     "exports": {
       ".": {
-        "import": "./dist/index.mjs",
-        "types": "./dist/index.d.mts"
+        "types": "./dist/index.d.mts",
+        "import": "./dist/index.mjs"
+      },
+      "./pricing-ui": {
+        "types": "./dist/pricing-ui.d.mts",
+        "import": "./dist/pricing-ui.mjs"
       }
     }
   },
   "dependencies": {
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.5.0",
     "tinyduration": "3.4.1"
   },
   "devDependencies": {
@@ -50,5 +57,10 @@
     "react": ">=19.2.0",
     "react-dom": ">=19.2.0",
     "zudoku": "*"
+  },
+  "peerDependenciesMeta": {
+    "zudoku": {
+      "optional": true
+    }
   }
 }

packages/plugin-zuplo-monetization/src/pages/CheckoutConfirmPage.tsx

@@ -6,10 +6,10 @@ import { Link, useNavigate, useSearchParams } from "zudoku/router";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
-import { PlanEntitlements } from "../components/PlanEntitlements.js";
 import { useDeploymentName } from "../hooks/useDeploymentName";
 import { usePurchaseDetails } from "../hooks/usePurchaseDetails";
 import { useMonetizationConfig } from "../MonetizationContext";
+import { PlanEntitlements } from "../pricing-ui/PlanEntitlements.js";
 import type { Subscription } from "../types/SubscriptionType.js";
 import { formatBillingCycle } from "../utils/formatBillingCycle";
 import { formatDuration } from "../utils/formatDuration";

packages/plugin-zuplo-monetization/src/pages/PricingPage.tsx

@@ -1,15 +1,12 @@
-import { Head, Heading, Slot } from "zudoku/components";
+import { Button, Head, Heading, Slot } from "zudoku/components";
 import { useAuth, useZudoku } from "zudoku/hooks";
 import { useQuery } from "zudoku/react-query";
+import { Link } from "zudoku/router";
 import { useDeploymentName } from "../hooks/useDeploymentName";
 import { usePlans } from "../hooks/usePlans";
 import type { SubscriptionsResponse } from "../hooks/useSubscriptions";
 import { useMonetizationConfig } from "../MonetizationContext";
-import {
-  collectDefaultTaxBehaviors,
-  taxBehaviorLegendSentence,
-} from "../utils/pricingTaxLegend.js";
-import { PricingCard } from "./pricing/PricingCard";
+import { PricingTable } from "../pricing-ui/PricingTable.js";
 
 const PricingPage = () => {
   const { pricing } = useMonetizationConfig();
@@ -19,10 +16,6 @@ const PricingPage = () => {
   const auth = useAuth();
 
   const { data: pricingTable } = usePlans();
-  const firstPlan = pricingTable.items[0];
-  const taxLegendSentence = firstPlan
-    ? taxBehaviorLegendSentence(collectDefaultTaxBehaviors(firstPlan))
-    : undefined;
 
   const { data: subscriptions = { items: [] } } =
     useQuery<SubscriptionsResponse>({
@@ -33,6 +26,10 @@ const PricingPage = () => {
       enabled: auth.isAuthenticated,
     });
 
+  const isSubscribed = subscriptions.items.some((subscription) =>
+    ["active", "canceled"].includes(subscription.status),
+  );
+
   return (
     <div className="w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)">
       <Head>
@@ -54,42 +51,24 @@ const PricingPage = () => {
             "See our pricing options and choose the one that best suits your needs."}
         </p>
       </div>
-      {pricingTable.items.length === 0 ? (
-        <div className="text-center py-12 text-muted-foreground">
-          <p>No plans are currently available.</p>
-          <p className="text-sm mt-2">
-            Make sure your plans are set up and published.
-          </p>
-        </div>
-      ) : (
-        <>
-          <div className="w-full grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,minmax(300px,max-content))] justify-center gap-6">
-            {pricingTable.items.map((plan) => (
-              <PricingCard
-                key={plan.id}
-                plan={plan}
-                isPopular={plan.metadata?.zuplo_most_popular === "true"}
-                isSubscribed={subscriptions.items.some((subscription) =>
-                  ["active", "canceled"].includes(subscription.status),
-                )}
-              />
-            ))}
-          </div>
-          {taxLegendSentence && (
-            <div
-              role="note"
-              className="mt-10 pt-6 border-t border-border max-w-2xl mx-auto text-center space-y-2"
-            >
-              <p className="text-xs font-medium text-muted-foreground">
-                Tax & Pricing
-              </p>
-              <p className="text-xs text-muted-foreground">
-                {taxLegendSentence}
-              </p>
-            </div>
-          )}
-        </>
-      )}
+      <PricingTable
+        plans={pricingTable.items}
+        showYearlyPrice={pricing?.showYearlyPrice !== false}
+        units={pricing?.units}
+        renderAction={(plan, isPopular) =>
+          isSubscribed ? (
+            <Button variant={isPopular ? "default" : "outline"} asChild>
+              <Link to={`/subscriptions#manage`}>Manage Subscriptions</Link>
+            </Button>
+          ) : (
+            <Button variant={isPopular ? "default" : "outline"} asChild>
+              <Link to={`/checkout?planId=${encodeURIComponent(plan.id)}`}>
+                Subscribe
+              </Link>
+            </Button>
+          )
+        }
+      />
       <Slot.Target name="pricing-page-after" />
     </div>
   );

packages/plugin-zuplo-monetization/src/pages/SubscriptionChangeConfirmPage.tsx

@@ -6,10 +6,10 @@ import { Link, useNavigate, useSearchParams } from "zudoku/router";
 import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert";
 import { Card, CardContent, CardHeader, CardTitle } from "zudoku/ui/Card";
 import { Separator } from "zudoku/ui/Separator";
-import { PlanEntitlements } from "../components/PlanEntitlements.js";
 import { useDeploymentName } from "../hooks/useDeploymentName";
 import { usePurchaseDetails } from "../hooks/usePurchaseDetails";
 import { useMonetizationConfig } from "../MonetizationContext";
+import { PlanEntitlements } from "../pricing-ui/PlanEntitlements.js";
 import type { Subscription } from "../types/SubscriptionType.js";
 import { formatBillingCycle } from "../utils/formatBillingCycle";
 import { formatDuration } from "../utils/formatDuration";

packages/plugin-zuplo-monetization/src/pricing-ui/CheckIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+/**
+ * Inline `Check` icon, visually identical to `lucide-react`'s `CheckIcon`
+ * (path: `M20 6 9 17l-5-5`). Kept local so the module has no icon-library
+ * peer dep and consumers don't need a specific lucide-react version.
+ */
+export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);

…tion/src/components/FeatureItem.test.tsx …tion/src/pricing-ui/FeatureItem.test.tsxpackages/plugin-zuplo-monetization/src/components/FeatureItem.test.tsx renamed to packages/plugin-zuplo-monetization/src/pricing-ui/FeatureItem.test.tsx packages/plugin-zuplo-monetization/src/components/FeatureItem.test.tsx renamed to packages/plugin-zuplo-monetization/src/pricing-ui/FeatureItem.test.tsx

@@ -1,6 +1,6 @@
-import { cn } from "zudoku";
-import { CheckIcon } from "zudoku/icons";
-import type { Feature } from "../types/PlanType";
+import type { Feature } from "../types/PlanType.js";
+import { CheckIcon } from "./CheckIcon.js";
+import { cn } from "./cn.js";
 
 export const FeatureItem = ({
   feature,

…etization/src/components/FeatureItem.tsx …etization/src/pricing-ui/FeatureItem.tsxpackages/plugin-zuplo-monetization/src/components/FeatureItem.tsx renamed to packages/plugin-zuplo-monetization/src/pricing-ui/FeatureItem.tsx packages/plugin-zuplo-monetization/src/components/FeatureItem.tsx renamed to packages/plugin-zuplo-monetization/src/pricing-ui/FeatureItem.tsx

@@ -1,8 +1,8 @@
 import type { PlanPhase } from "../types/PlanType.js";
 import { categorizeRateCards } from "../utils/categorizeRateCards.js";
 import { formatDuration } from "../utils/formatDuration.js";
-import { FeatureItem } from "./FeatureItem";
-import { QuotaItem } from "./QuotaItem";
+import { FeatureItem } from "./FeatureItem.js";
+import { QuotaItem } from "./QuotaItem.js";
 
 const PhaseSection = ({
   phase,