show unique features only

Author: mosch

packages/plugin-zuplo-monetization/src/pages/pricing/PricingCard.tsx

@@ -3,11 +3,53 @@ import { Button } from "zudoku/components";
 import { Link } from "zudoku/router";
 import { FeatureItem } from "../../components/FeatureItem";
 import { QuotaItem } from "../../components/QuotaItem";
-import type { Plan } from "../../types/PlanType";
+import type { Plan, PlanPhase } from "../../types/PlanType";
 import { categorizeRateCards } from "../../utils/categorizeRateCards";
+import { formatDuration } from "../../utils/formatDuration";
 import { formatPrice } from "../../utils/formatPrice";
 import { getPriceFromPlan } from "../../utils/getPriceFromPlan";
 
+const PhaseSection = ({
+  phase,
+  currency,
+  showName,
+  excludeKeys,
+}: {
+  phase: PlanPhase;
+  currency?: string;
+  showName: boolean;
+  excludeKeys: Set<string>;
+}) => {
+  const { quotas, features } = categorizeRateCards(phase.rateCards, currency);
+
+  const filteredQuotas = quotas.filter((q) => !excludeKeys.has(q.key));
+  const filteredFeatures = features.filter((f) => !excludeKeys.has(f.key));
+
+  if (filteredQuotas.length === 0 && filteredFeatures.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      {showName && (
+        <div className="text-sm font-medium text-card-foreground">
+          {phase.name}
+          {phase.duration && (
+            <span className="text-muted-foreground font-normal">
+              {" "}
+              &mdash; {formatDuration(phase.duration)}
+            </span>
+          )}
+        </div>
+      )}
+      {filteredQuotas.map((quota) => (
+        <QuotaItem key={quota.key} quota={quota} />
+      ))}
+      {filteredFeatures.map((feature) => (
+        <FeatureItem key={feature.key} feature={feature} />
+      ))}
+    </div>
+  );
+};
+
 export const PricingCard = ({
   plan,
   isPopular = false,
@@ -17,17 +59,13 @@ export const PricingCard = ({
   isPopular?: boolean;
   isSubscribed?: boolean;
 }) => {
-  const defaultPhase = plan.phases.at(-1);
-  if (!defaultPhase) return null;
+  if (plan.phases.length === 0) return null;
 
-  const { quotas, features } = categorizeRateCards(
-    defaultPhase.rateCards,
-    plan.currency,
-  );
   const price = getPriceFromPlan(plan);
   const isFree = price.monthly === 0;
 
   const isCustom = plan.metadata?.isCustom === true;
+  const hasMultiplePhases = plan.phases.length > 1;
 
   return (
     <div
@@ -81,22 +119,23 @@ export const PricingCard = ({
         )}
       </div>
 
-      <div className="space-y-4 mb-6  grow">
-        {quotas.length > 0 && (
-          <div className="space-y-2">
-            {quotas.map((quota) => (
-              <QuotaItem key={quota.key} quota={quota} />
-            ))}
-          </div>
-        )}
-
-        {features.length > 0 && (
-          <div className="space-y-2">
-            {features.map((feature) => (
-              <FeatureItem key={feature.key} feature={feature} />
-            ))}
-          </div>
-        )}
+      <div className="space-y-4 mb-6 grow">
+        {plan.phases.map((phase, index) => {
+          const laterKeys = new Set(
+            plan.phases
+              .slice(index + 1)
+              .flatMap((p) => p.rateCards.map((rc) => rc.featureKey ?? rc.key)),
+          );
+          return (
+            <PhaseSection
+              key={phase.key}
+              phase={phase}
+              currency={plan.currency}
+              showName={hasMultiplePhases}
+              excludeKeys={laterKeys}
+            />
+          );
+        })}
       </div>
 
       {isSubscribed ? (

packages/plugin-zuplo-monetization/src/utils/categorizeRateCards.ts

@@ -20,7 +20,9 @@ export const categorizeRateCards = (
         rc.price?.type === "tiered" &&
         rc.price.tiers
       ) {
-        const overageTier = rc.price.tiers.find((t) => t.unitPrice?.amount);
+        const overageTier = rc.price.tiers.find(
+          (t) => t.unitPrice?.amount && parseFloat(t.unitPrice.amount) > 0,
+        );
         if (overageTier?.unitPrice) {
           const amount = parseFloat(overageTier.unitPrice.amount);
           overagePrice = `${formatPrice(amount, currency)}/unit`;

packages/plugin-zuplo-monetization/src/utils/formatPrice.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { formatPrice } from "./formatPrice.js";
+
+describe("formatPrice", () => {
+  it("formats whole numbers without decimals", () => {
+    expect(formatPrice(10, "USD")).toBe("$10");
+  });
+
+  it("formats two decimal places for standard amounts", () => {
+    expect(formatPrice(0.01, "USD")).toBe("$0.01");
+    expect(formatPrice(9.99, "USD")).toBe("$9.99");
+  });
+
+  it("preserves extra decimal places beyond two", () => {
+    expect(formatPrice(0.005, "USD")).toBe("$0.005");
+    expect(formatPrice(0.001, "USD")).toBe("$0.001");
+  });
+
+  it("formats zero without decimals", () => {
+    expect(formatPrice(0, "USD")).toBe("$0");
+  });
+
+  it("defaults to USD when no currency is provided", () => {
+    expect(formatPrice(10)).toBe("$10");
+  });
+});

packages/plugin-zuplo-monetization/src/utils/formatPrice.ts

@@ -1,6 +1,12 @@
-export const formatPrice = (amount: number, currency?: string) =>
-  new Intl.NumberFormat(undefined, {
+export const formatPrice = (amount: number, currency?: string) => {
+  const decimalPlaces = Number.isInteger(amount)
+    ? 0
+    : Math.max(2, (amount.toString().split(".")[1] ?? "").length);
+
+  return new Intl.NumberFormat(undefined, {
     style: "currency",
     currency: currency || "USD",
-    minimumFractionDigits: 0,
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces,
   }).format(amount);
+};