v4.0.0.1

src/lib/utils/pricing.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { decoratePlans } from './pricing';
+
+describe('decoratePlans', () => {
+  it('prefers an explicit popular plan over the cheapest plan', () => {
+    const plans = decoratePlans([
+      { title: 'Cheapest', price: '$39', period: 'Per Walk' },
+      { title: 'Recommended', price: '$49', period: 'Per Walk', popular: true },
+      { title: 'Longest', price: '$55', period: 'Per Walk' }
+    ]);
+
+    expect(plans.map((plan) => plan.isPopular)).toEqual([false, true, false]);
+  });
+
+  it('falls back to the cheapest plan when none is marked popular', () => {
+    const plans = decoratePlans([
+      { title: 'Weekly', price: '$58', period: 'Per Walk' },
+      { title: 'Regular', price: '$55', period: 'Per Walk' },
+      { title: 'Frequent', price: '$49.50', period: 'Per Walk' }
+    ]);
+
+    expect(plans.map((plan) => plan.isPopular)).toEqual([false, false, true]);
+  });
+});

src/lib/utils/pricing.ts

@@ -11,12 +11,15 @@ export function decoratePlans<T extends { price: string; period: string }>(plans
   }));
 
   const sorted = [...enriched].sort((a, b) => a.value - b.value || a.index - b.index);
-  const cheapestIndex = sorted[0]?.index ?? -1;
+  const explicitPopularIndex = plans.findIndex(
+    (plan) => 'popular' in plan && Boolean((plan as T & { popular?: boolean }).popular)
+  );
+  const featuredIndex = explicitPopularIndex >= 0 ? explicitPopularIndex : (sorted[0]?.index ?? -1);
   const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order]));
 
   return plans.map((plan, index) => ({
     ...plan,
-    isPopular: index === cheapestIndex,
+    isPopular: index === featuredIndex,
     mobileOrder: mobileOrder.get(index) ?? index
   }));
 }