@startsimpli/billing 0.4.23 → 0.4.24

package/src/utils/tiers.interval.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Pairing monthly and annual offers into one card per tier
+ * (crochet_patterns-34n7).
+ */
+import { describe, it, expect } from "vitest";
+import { groupOffersByTier, offersForInterval, annualSavings } from "./tiers";
+import {
+  crochetProduct,
+  crochetProductWithTiers,
+  crochetLite,
+  crochetLiteAnnual,
+  crochetPro,
+} from "../components/__fixtures__/crochetProduct";
+
+const slugs = (offers: { slug: string }[]) => offers.map((o) => o.slug);
+
+describe("groupOffersByTier", () => {
+  it("pairs Lite with Lite Annual without a tier field (same features)", () => {
+    const tiers = groupOffersByTier(crochetProduct.offers);
+    expect(tiers.map((t) => t.name)).toEqual(["Free", "Lite", "Pro"]);
+    const lite = tiers[1];
+    expect(lite.monthly?.slug).toBe("crochet-lite");
+    expect(lite.annual?.slug).toBe("crochet-lite-annual");
+    expect(tiers[2].annual).toBeNull();
+  });
+
+  it("pairs by tier when the API sends it", () => {
+    const tiers = groupOffersByTier(crochetProductWithTiers.offers);
+    expect(tiers.map((t) => [t.monthly?.slug ?? null, t.annual?.slug ?? null])).toEqual([
+      ["crochet-free", null],
+      ["crochet-lite", "crochet-lite-annual"],
+      ["crochet-pro", "crochet-pro-annual"],
+    ]);
+  });
+
+  it("falls back to the name prefix when features differ", () => {
+    const annual = { ...crochetLiteAnnual, features: [] };
+    const tiers = groupOffersByTier([crochetLite, annual, crochetPro]);
+    expect(tiers.map((t) => t.name)).toEqual(["Lite", "Pro"]);
+    expect(tiers[0].annual?.slug).toBe("crochet-lite-annual");
+  });
+
+  it("never pairs two monthly offers", () => {
+    const tiers = groupOffersByTier([crochetLite, crochetPro]);
+    expect(tiers).toHaveLength(2);
+  });
+});
+
+describe("offersForInterval", () => {
+  it("monthly shows Free, Lite, Pro", () => {
+    expect(slugs(offersForInterval(crochetProduct.offers, "monthly")))
+      .toEqual(["crochet-free", "crochet-lite", "crochet-pro"]);
+  });
+
+  it("annual shows Free in both modes and keeps a tier with no annual price", () => {
+    expect(slugs(offersForInterval(crochetProduct.offers, "annual")))
+      .toEqual(["crochet-free", "crochet-lite-annual", "crochet-pro"]);
+    expect(slugs(offersForInterval(crochetProductWithTiers.offers, "annual")))
+      .toEqual(["crochet-free", "crochet-lite-annual", "crochet-pro-annual"]);
+  });
+});
+
+describe("annualSavings", () => {
+  it("gives the per-month equivalent and the saving against 12x monthly", () => {
+    const lite = groupOffersByTier(crochetProduct.offers)[1];
+    const s = annualSavings(lite);
+    expect(s).not.toBeNull();
+    expect(s!.perMonth).toBeCloseTo(29 / 12, 5);
+    expect(s!.percent).toBe(19); // 29 vs 35.88
+  });
+
+  it("is null without a monthly sibling to compare against", () => {
+    const pro = groupOffersByTier(crochetProduct.offers)[2];
+    expect(annualSavings(pro)).toBeNull();
+  });
+});

package/src/utils/tiers.ts

@@ -53,3 +53,108 @@ export function tierBelow(offers: ProductOffer[], offer: ProductOffer): ProductO
   const below = index > 0 ? cheapestFirst[index - 1] : null;
   return below && below.features.length > 0 ? below : null;
 }
+
+/** Which price a plan picker is showing. */
+export type BillingInterval = "monthly" | "annual";
+
+/**
+ * One plan tier as the picker shows it: the same plan billed monthly and/or
+ * yearly. Free has only a monthly offer and shows in both modes.
+ */
+export interface OfferTier {
+  key: string;
+  /** The tier's name without the interval: "Lite", never "Lite Annual". */
+  name: string;
+  monthly: ProductOffer | null;
+  annual: ProductOffer | null;
+}
+
+const isAnnual = (o: ProductOffer) => o.intervalUnit === "year";
+
+const featureSignature = (o: ProductOffer) =>
+  JSON.stringify(o.features.map((f) => [f.key, f.value, f.limit ?? null]));
+
+const stripInterval = (name: string) =>
+  name.replace(/\s*[-·(]?\s*(annual|annually|yearly|year)\)?\s*$/i, "").trim() || name;
+
+/**
+ * Pair each annual offer with the monthly offer of the same plan
+ * (crochet_patterns-34n7). Evidence, strongest first: the API's `tier`, an
+ * identical feature list, then the annual name starting with the monthly
+ * name ("Lite Annual" → "Lite"). Two monthly offers are never paired, and an
+ * annual offer with no match becomes a tier of its own.
+ */
+export function groupOffersByTier(offers: ProductOffer[]): OfferTier[] {
+  const tiers: Array<OfferTier & { position: number }> = [];
+
+  offers.forEach((offer, position) => {
+    if (isAnnual(offer)) return;
+    tiers.push({
+      key: offer.tier ? `tier:${offer.tier}` : `offer:${offer.slug}`,
+      name: offer.name,
+      monthly: offer,
+      annual: null,
+      position,
+    });
+  });
+
+  offers.forEach((offer, position) => {
+    if (!isAnnual(offer)) return;
+    const open = tiers.filter((t) => t.annual === null && t.monthly && !t.monthly.isFree);
+    const signature = featureSignature(offer);
+    const lowerName = offer.name.toLowerCase();
+    const match =
+      (offer.tier ? open.find((t) => t.monthly?.tier === offer.tier) : undefined) ??
+      open.find((t) => offer.features.length > 0 && featureSignature(t.monthly!) === signature) ??
+      open
+        .filter((t) => lowerName.startsWith(`${t.monthly!.name.toLowerCase()} `))
+        .sort((a, b) => b.monthly!.name.length - a.monthly!.name.length)[0];
+
+    if (match) {
+      match.annual = offer;
+    } else {
+      tiers.push({
+        key: offer.tier ? `tier:${offer.tier}` : `offer:${offer.slug}`,
+        name: stripInterval(offer.name),
+        monthly: null,
+        annual: offer,
+        position,
+      });
+    }
+  });
+
+  return tiers
+    .sort((a, b) => a.position - b.position)
+    .map(({ position: _position, ...tier }) => tier);
+}
+
+/** The offer a tier shows for `interval`, falling back to the other one so a
+ * plan with no annual price stays on the page. */
+export function tierOffer(tier: OfferTier, interval: BillingInterval): ProductOffer {
+  return (interval === "annual" ? tier.annual ?? tier.monthly : tier.monthly ?? tier.annual)!;
+}
+
+/** One offer per tier for the chosen interval, in catalogue order. */
+export function offersForInterval(offers: ProductOffer[], interval: BillingInterval): ProductOffer[] {
+  return groupOffersByTier(offers).map((tier) => tierOffer(tier, interval));
+}
+
+/** True when at least one plan can be bought both monthly and yearly. */
+export function hasIntervalChoice(offers: ProductOffer[]): boolean {
+  return groupOffersByTier(offers).some((t) => t.monthly !== null && t.annual !== null);
+}
+
+/**
+ * What yearly billing works out to per month, and the whole-percent saving
+ * against paying monthly for twelve months. Null when the tier has no
+ * monthly price to compare against.
+ */
+export function annualSavings(tier: OfferTier): { perMonth: number; percent: number } | null {
+  if (!tier.monthly || !tier.annual) return null;
+  const yearly = parseFloat(tier.annual.unitPrice);
+  const monthly = parseFloat(tier.monthly.unitPrice);
+  if (!Number.isFinite(yearly) || !Number.isFinite(monthly) || monthly <= 0) return null;
+  const twelve = monthly * 12;
+  const percent = yearly < twelve ? Math.floor(((twelve - yearly) / twelve) * 100) : 0;
+  return { perMonth: yearly / 12, percent };
+}