@startsimpli/billing 0.4.32 → 0.4.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "license": "MIT",
   "homepage": "https://startsimpli.com",

package/src/components/PricingDetailPage.tsx

@@ -20,6 +20,7 @@ import {
   planDirection,
   resolveCurrentOffer,
   trialApplies,
+  trialLabel,
   type CurrentPlanState,
 } from "../utils/plan";
 import { usePlanChange } from "../hooks/usePlanChange";
@@ -330,7 +331,7 @@ function DetailCard({
       <div className="mb-5 min-h-8">
         {trial ? (
           <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-sm font-semibold px-3 py-1 rounded-lg w-fit">
-            {offer.trialDays}-day free trial
+            {trialLabel(offer)}
           </span>
         ) : yourPlanNote ? (
           <span data-testid={`your-plan-note-${offer.slug}`} className="inline-block bg-gray-100 text-gray-700 text-sm font-semibold px-3 py-1 rounded-lg w-fit">

package/src/components/PricingPage.tsx

@@ -13,7 +13,7 @@ import { useProduct } from "../hooks/useProduct";
 import type { ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
 import { formatFeatureLabel } from "../utils/format";
-import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { resolveCurrentOfferId, trialLabel, type CurrentPlanState } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingPageProps {
@@ -136,7 +136,7 @@ function PricingCard({ entry, onSelect, isCurrent = false }: PricingCardProps) {
           data-testid="trial-badge"
           className="inline-block bg-blue-50 text-blue-700 text-sm font-semibold px-3 py-1 rounded-lg mb-5 w-fit"
         >
-          {offer.trialDays}-day free trial
+          {trialLabel(offer)}
         </span>
       )}
 

package/src/components/PricingSection.tsx

@@ -14,7 +14,7 @@ import type { OfferFeature, ProductOffer } from "../types";
 import { cardFeatures, cumulativeFeatureLookup, tierBelow } from "../utils/tiers";
 import { FeatureIcon } from "./FeatureIcon";
 import { formatFeatureLabel } from "../utils/format";
-import { resolveCurrentOfferId, type CurrentPlanState } from "../utils/plan";
+import { resolveCurrentOfferId, trialLabel, type CurrentPlanState } from "../utils/plan";
 import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers, type IntervalEntry } from "./IntervalToggle";
 
 export interface PricingSectionProps {
@@ -152,7 +152,7 @@ function SectionCard({ entry, onSelect, maxFeatures, buildsOn, inherited, isCurr
             data-testid="trial-badge"
             className="inline-block bg-[var(--billing-accent-soft,#eff6ff)] text-[color:var(--billing-accent-text,#1d4ed8)] text-xs font-semibold px-2 py-0.5 rounded-md w-fit"
           >
-            {offer.trialDays}-day free trial
+            {trialLabel(offer)}
           </span>
         )}
       </div>

package/src/components/SubscriptionManager.tsx

@@ -29,6 +29,7 @@ import {
   planCtaLabel,
   planDirection,
   trialApplies,
+  trialLabel,
   TRIAL_NOTE_FEATURE_KEY,
   type PlanDirection,
 } from "../utils/plan";
@@ -95,11 +96,11 @@ function PlanFeatureList({ features, showTrialNote = true }: { features: OfferFe
  * startsim-pih — so users know "Start Free Trial" actually IS a free trial.
  * No "no card required": checkout collects a card up front and the offer
  * carries nothing that says otherwise (crochet_patterns-34n7). */
-function TrialCopy({ trialDays }: { trialDays: number }) {
-  if (!trialDays || trialDays <= 0) return null;
+function TrialCopy({ offer }: { offer: ProductOffer }) {
+  if (!offer.trialDays || offer.trialDays <= 0) return null;
   return (
     <p data-testid="trial-copy" className="-mt-1 mb-3 text-xs text-gray-500">
-      {trialDays}-day free trial
+      {trialLabel(offer)}
     </p>
   );
 }
@@ -566,7 +567,7 @@ export function SubscriptionManager({
                   {/* Trial copy is for prospective trialers only — once the
                       user is on this offer or moving downward, drop the
                       "14-day free trial" sales pitch. */}
-                  {showTrial && <TrialCopy trialDays={offer.trialDays} />}
+                  {showTrial && <TrialCopy offer={offer} />}
                   <PlanFeatureList features={offer.features} showTrialNote={showTrial || !(offer.trialDays > 0)} />
                   <button
                     data-testid={`upgrade-cta-${offer.slug}`}

package/src/components/UpgradeModal.tsx

@@ -21,6 +21,7 @@ import {
   planDirection,
   resolveCurrentOffer,
   trialApplies,
+  trialLabel,
   TRIAL_NOTE_FEATURE_KEY,
   type CurrentPlanState,
 } from "../utils/plan";
@@ -201,7 +202,7 @@ export function UpgradeModal({
 
                   {trial && (
                     <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-md mb-3 w-fit">
-                      {offer.trialDays}-day free trial
+                      {trialLabel(offer)}
                     </span>
                   )}
 

package/src/index.ts

@@ -63,6 +63,7 @@ export { BillingApiClient } from "./utils/api";
 export {
   isPaidSubscription,
   isPayingSubscription,
+  trialLabel,
   isUnlistedOffer,
   getFeatureLimit,
   resolvePlanEntitlement,

package/src/types/index.ts

@@ -21,6 +21,8 @@ export interface ProductOffer {
   isActive: boolean;
   isFeatured: boolean;
   trialDays: number;
+  /** Charged at checkout to start the trial (cents); 0/absent = a free trial. */
+  trialFeeCents?: number;
   sortOrder: number;
   ctaText: string;
   /** Plan tier shared by an offer's monthly and annual prices ("lite",

package/src/utils/plan.test.ts

@@ -99,7 +99,7 @@ describe('isPaidSubscription', () => {
 //      current_period_start is frozen at signup and never rolls.
 // ---------------------------------------------------------------------------
 
-import { getFeatureLimit, resolvePlanEntitlement, resolveUsageWindow } from './plan'
+import { getFeatureLimit, resolvePlanEntitlement, resolveUsageWindow, trialLabel } from './plan'
 
 const freeOffer = makeOffer({
   slug: 'crochet-free',
@@ -312,3 +312,15 @@ describe('resolveUsageWindow', () => {
     expect(w.end.toISOString()).toBe('2027-01-01T00:00:00.000Z')
   })
 })
+
+describe("trialLabel", () => {
+  const base = { trialDays: 7, currency: "USD" } as const;
+  it("says free when nothing is charged", () => {
+    expect(trialLabel({ ...base })).toBe("7-day free trial");
+    expect(trialLabel({ ...base, trialFeeCents: 0 })).toBe("7-day free trial");
+  });
+  it("does not say free when a card-check fee is charged", () => {
+    expect(trialLabel({ ...base, trialFeeCents: 100 })).toBe("7-day trial · $1 today");
+    expect(trialLabel({ ...base, trialFeeCents: 150 })).toBe("7-day trial · $1.50 today");
+  });
+});

package/src/utils/plan.ts

@@ -307,6 +307,28 @@ export function trialApplies(card: ProductOffer, direction: PlanDirection, payin
   return direction === "upgrade" && !paying && (card.trialDays ?? 0) > 0;
 }
 
+/**
+ * "7-day free trial", or "7-day trial · $1 today" when starting it charges a
+ * card-check fee (then it is not free, so it must not say so).
+ */
+export function trialLabel(offer: Pick<ProductOffer, "trialDays" | "trialFeeCents" | "currency">): string {
+  const days = offer.trialDays ?? 0;
+  const cents = offer.trialFeeCents ?? 0;
+  if (cents <= 0) return `${days}-day free trial`;
+  const amount = cents / 100;
+  let fee: string;
+  try {
+    fee = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: (offer.currency || "USD").toUpperCase(),
+      minimumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+    }).format(amount);
+  } catch {
+    fee = `$${amount}`;
+  }
+  return `${days}-day trial · ${fee} today`;
+}
+
 /**
  * The CTA for a card. `offer.ctaText` ("Start Free Trial") is the pitch to a
  * new buyer; someone already paying is upgraded in place, so they get