@startsimpli/billing 0.4.7 → 0.4.9

package/src/components/SubscriptionManager.test.tsx

@@ -31,67 +31,67 @@ const mockProduct: BillingProduct = {
       id: "offer-1",
       name: "Starter",
       slug: "starter-monthly",
-      unit_price: "0.00",
+      unitPrice: "0.00",
       currency: "USD",
-      pricing_model: "flat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: true,
+      pricingModel: "flat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: true,
       features: [
         { key: "seats", name: "Team seats", value: 1, limit: 1 },
         { key: "projects", name: "Projects", value: 3, limit: 3 },
       ],
-      is_active: true,
-      is_featured: false,
-      trial_days: 0,
-      sort_order: 0,
-      cta_text: "Start Free",
+      isActive: true,
+      isFeatured: false,
+      trialDays: 0,
+      sortOrder: 0,
+      ctaText: "Start Free",
     },
     {
       id: "offer-2",
       name: "Pro",
       slug: "pro-monthly",
-      unit_price: "49.00",
+      unitPrice: "49.00",
       currency: "USD",
-      pricing_model: "flat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: false,
+      pricingModel: "flat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: false,
       features: [
         { key: "seats", name: "Team seats", value: 5, limit: 5 },
         { key: "projects", name: "Projects", value: "Unlimited" },
       ],
-      is_active: true,
-      is_featured: true,
-      trial_days: 14,
-      sort_order: 1,
-      cta_text: "Start Trial",
+      isActive: true,
+      isFeatured: true,
+      trialDays: 14,
+      sortOrder: 1,
+      ctaText: "Start Trial",
     },
     {
       id: "offer-3",
       name: "Enterprise",
       slug: "enterprise-monthly",
-      unit_price: "199.00",
+      unitPrice: "199.00",
       currency: "USD",
-      pricing_model: "per_seat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: false,
+      pricingModel: "per_seat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: false,
       features: [
         { key: "seats", name: "Team seats", value: "Unlimited" },
         { key: "projects", name: "Projects", value: "Unlimited" },
       ],
-      is_active: true,
-      is_featured: false,
-      trial_days: 0,
-      sort_order: 2,
-      cta_text: "Contact Sales",
+      isActive: true,
+      isFeatured: false,
+      trialDays: 0,
+      sortOrder: 2,
+      ctaText: "Contact Sales",
     },
   ],
 };
@@ -100,40 +100,40 @@ const mockSubscriptionActive: SubscriptionInfo = {
   id: "sub-123",
   offer: mockProduct.offers[1], // Pro plan
   status: "active",
-  current_period_start: "2026-01-01T00:00:00Z",
-  current_period_end: "2026-02-01T00:00:00Z",
-  cancel_at_period_end: false,
-  trial_end: null,
+  currentPeriodStart: "2026-01-01T00:00:00Z",
+  currentPeriodEnd: "2026-02-01T00:00:00Z",
+  cancelAtPeriodEnd: false,
+  trialEnd: null,
 };
 
 const mockSubscriptionTrialing: SubscriptionInfo = {
   id: "sub-456",
   offer: mockProduct.offers[1], // Pro plan
   status: "trialing",
-  current_period_start: "2026-01-01T00:00:00Z",
-  current_period_end: "2026-02-01T00:00:00Z",
-  cancel_at_period_end: false,
-  trial_end: "2026-01-15T00:00:00Z",
+  currentPeriodStart: "2026-01-01T00:00:00Z",
+  currentPeriodEnd: "2026-02-01T00:00:00Z",
+  cancelAtPeriodEnd: false,
+  trialEnd: "2026-01-15T00:00:00Z",
 };
 
 const mockSubscriptionPastDue: SubscriptionInfo = {
   id: "sub-789",
   offer: mockProduct.offers[1], // Pro plan
   status: "past_due",
-  current_period_start: "2026-01-01T00:00:00Z",
-  current_period_end: "2026-02-01T00:00:00Z",
-  cancel_at_period_end: false,
-  trial_end: null,
+  currentPeriodStart: "2026-01-01T00:00:00Z",
+  currentPeriodEnd: "2026-02-01T00:00:00Z",
+  cancelAtPeriodEnd: false,
+  trialEnd: null,
 };
 
 const mockSubscriptionCancelled: SubscriptionInfo = {
   id: "sub-999",
   offer: mockProduct.offers[1], // Pro plan
   status: "cancelled",
-  current_period_start: "2026-01-01T00:00:00Z",
-  current_period_end: "2026-02-01T00:00:00Z",
-  cancel_at_period_end: true,
-  trial_end: null,
+  currentPeriodStart: "2026-01-01T00:00:00Z",
+  currentPeriodEnd: "2026-02-01T00:00:00Z",
+  cancelAtPeriodEnd: true,
+  trialEnd: null,
 };
 
 function createWrapper(fetcher: typeof fetch) {
@@ -495,15 +495,15 @@ describe("SubscriptionManager", () => {
     expect(statusBadge.className).toMatch(/warning|error|danger|alert/i);
   });
 
-  it("does not crash when current_period_end is null (free plan)", async () => {
+  it("does not crash when currentPeriodEnd is null (free plan)", async () => {
     const freeSubscription: SubscriptionInfo = {
       id: "sub-free",
-      offer: { ...mockProduct.offers[0], is_free: true },
+      offer: { ...mockProduct.offers[0], isFree: true },
       status: "active",
-      current_period_start: null,
-      current_period_end: null,
-      cancel_at_period_end: false,
-      trial_end: null,
+      currentPeriodStart: null,
+      currentPeriodEnd: null,
+      cancelAtPeriodEnd: false,
+      trialEnd: null,
     };
     const fetcher = mockFetchRouter({
       "/billing/subscription/current/": freeSubscription,

package/src/components/SubscriptionManager.tsx

@@ -167,30 +167,30 @@ export function SubscriptionManager({
         <div data-testid="current-plan" className="rounded-2xl border border-gray-200 bg-white shadow-sm p-8">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-xl font-bold text-gray-900">{subscription.offer.name}</h2>
-            <StatusBadge status={subscription.status} trialEnd={subscription.trial_end} />
+            <StatusBadge status={subscription.status} trialEnd={subscription.trialEnd} />
           </div>
 
           <div className="mb-4">
-            {subscription.offer.is_free ? (
+            {subscription.offer.isFree ? (
               <span aria-label="Free">
                 <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">Free</span>
               </span>
             ) : (
-              <span aria-label={`${Math.floor(parseFloat(subscription.offer.unit_price) || 0)} dollars ${subscription.offer.interval_display}`}>
+              <span aria-label={`${Math.floor(parseFloat(subscription.offer.unitPrice) || 0)} dollars ${subscription.offer.intervalDisplay}`}>
                 <span aria-hidden="true" className="text-3xl font-extrabold text-gray-900">
-                  ${Math.floor(parseFloat(subscription.offer.unit_price) || 0)}
+                  ${Math.floor(parseFloat(subscription.offer.unitPrice) || 0)}
                 </span>
                 <span aria-hidden="true" className="text-base text-gray-500 ml-1">
-                  {subscription.offer.interval_display}
+                  {subscription.offer.intervalDisplay}
                 </span>
               </span>
             )}
           </div>
 
-          {subscription.current_period_start && subscription.current_period_end && (
+          {subscription.currentPeriodStart && subscription.currentPeriodEnd && (
             <p className="text-sm text-gray-500">
-              Billing period: {formatDate(subscription.current_period_start)} to{" "}
-              {formatDate(subscription.current_period_end)}
+              Billing period: {formatDate(subscription.currentPeriodStart)} to{" "}
+              {formatDate(subscription.currentPeriodEnd)}
             </p>
           )}
         </div>
@@ -211,24 +211,24 @@ export function SubscriptionManager({
               <div
                 key={offer.id}
                 className={`rounded-xl border p-6 ${
-                  offer.is_featured
+                  offer.isFeatured
                     ? "border-blue-600 shadow-md"
                     : "border-gray-200 bg-white shadow-sm"
                 }`}
               >
                 <h4 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h4>
                 <div className="mb-3">
-                  {offer.is_free ? (
+                  {offer.isFree ? (
                     <span aria-label="Free">
                       <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">Free</span>
                     </span>
                   ) : (
-                    <span aria-label={`${Math.floor(parseFloat(offer.unit_price) || 0)} dollars ${offer.interval_display}`}>
+                    <span aria-label={`${Math.floor(parseFloat(offer.unitPrice) || 0)} dollars ${offer.intervalDisplay}`}>
                       <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">
-                        ${Math.floor(parseFloat(offer.unit_price) || 0)}
+                        ${Math.floor(parseFloat(offer.unitPrice) || 0)}
                       </span>
                       <span aria-hidden="true" className="text-sm text-gray-500 ml-1">
-                        {offer.interval_display}
+                        {offer.intervalDisplay}
                       </span>
                     </span>
                   )}
@@ -237,12 +237,12 @@ export function SubscriptionManager({
                   data-testid={`upgrade-cta-${offer.slug}`}
                   onClick={() => onPlanChange?.(offer)}
                   className={`w-full py-2.5 px-4 text-sm font-bold rounded-xl cursor-pointer transition-colors ${
-                    offer.is_featured
+                    offer.isFeatured
                       ? "bg-blue-600 text-white hover:bg-blue-700"
                       : "bg-gray-100 text-gray-800 hover:bg-gray-200"
                   }`}
                 >
-                  {offer.cta_text}
+                  {offer.ctaText}
                 </button>
               </div>
             ))}

package/src/components/UpgradeModal.test.tsx

@@ -30,20 +30,20 @@ const mockProduct: BillingProduct = {
       id: "offer-1",
       name: "Pro",
       slug: "pro-monthly",
-      unit_price: "49.00",
+      unitPrice: "49.00",
       currency: "USD",
-      pricing_model: "flat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: false,
+      pricingModel: "flat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: false,
       features: [{ key: "seats", name: "Team seats", value: 5, limit: 5 }],
-      is_active: true,
-      is_featured: true,
-      trial_days: 14,
-      sort_order: 0,
-      cta_text: "Upgrade to Pro",
+      isActive: true,
+      isFeatured: true,
+      trialDays: 14,
+      sortOrder: 0,
+      ctaText: "Upgrade to Pro",
     },
   ],
 };

package/src/components/UpgradeModal.tsx

@@ -122,7 +122,7 @@ export function UpgradeModal({
         {product && (
           <div data-testid="upgrade-offers" className="flex flex-wrap justify-center gap-5">
             {product.offers.map((offer) => {
-              const isFeatured = offer.is_featured;
+              const isFeatured = offer.isFeatured;
               return (
                 <div
                   key={offer.id}
@@ -138,23 +138,23 @@ export function UpgradeModal({
                   <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
 
                   <div className="mb-2">
-                    {offer.is_free ? (
+                    {offer.isFree ? (
                       <span aria-label="Free">
                         <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">Free</span>
                       </span>
                     ) : (
-                      <span aria-label={`${Math.floor(parseFloat(offer.unit_price) || 0)} dollars ${offer.interval_display}`}>
+                      <span aria-label={`${Math.floor(parseFloat(offer.unitPrice) || 0)} dollars ${offer.intervalDisplay}`}>
                         <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">
-                          ${Math.floor(parseFloat(offer.unit_price) || 0)}
+                          ${Math.floor(parseFloat(offer.unitPrice) || 0)}
                         </span>
-                        <span aria-hidden="true" className="text-sm text-gray-500"> {offer.interval_display}</span>
+                        <span aria-hidden="true" className="text-sm text-gray-500"> {offer.intervalDisplay}</span>
                       </span>
                     )}
                   </div>
 
-                  {offer.trial_days > 0 && (
+                  {offer.trialDays > 0 && (
                     <span 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.trial_days}-day free trial
+                      {offer.trialDays}-day free trial
                     </span>
                   )}
 
@@ -182,7 +182,7 @@ export function UpgradeModal({
                       }
                     `}
                   >
-                    {offer.cta_text}
+                    {offer.ctaText}
                   </button>
                 </div>
               );

package/src/hooks/useCheckout.test.tsx

@@ -23,7 +23,7 @@ describe("useCheckout", () => {
       ok: true,
       json: () =>
         Promise.resolve({
-          session_id: "cs_test_123",
+          sessionId: "cs_test_123",
           url: "https://checkout.stripe.com/test",
         }),
     });
@@ -41,7 +41,7 @@ describe("useCheckout", () => {
     });
 
     expect(checkoutResult).toEqual({
-      session_id: "cs_test_123",
+      sessionId: "cs_test_123",
       url: "https://checkout.stripe.com/test",
     });
     expect(result.current.loading).toBe(false);
@@ -63,7 +63,7 @@ describe("useCheckout", () => {
     const mockFetch = vi.fn().mockResolvedValue({
       ok: true,
       json: () =>
-        Promise.resolve({ session_id: "cs_1", url: "https://test.com" }),
+        Promise.resolve({ sessionId: "cs_1", url: "https://test.com" }),
     });
     const wrapper = createWrapper(mockFetch as unknown as typeof fetch);
 
@@ -120,7 +120,7 @@ describe("useCheckout", () => {
       ok: true,
       json: () =>
         Promise.resolve({
-          session_id: "cs_redirect_1",
+          sessionId: "cs_redirect_1",
           url: "https://checkout.stripe.com/pay/cs_redirect_1",
         }),
     });
@@ -148,7 +148,7 @@ describe("useCheckout", () => {
         ok: true,
         json: () =>
           Promise.resolve({
-            subscription_id: "sub_free_123",
+            subscriptionId: "sub_free_123",
             status: "active",
           }),
       });
@@ -162,7 +162,7 @@ describe("useCheckout", () => {
       });
 
       expect(freeResult).toEqual({
-        subscription_id: "sub_free_123",
+        subscriptionId: "sub_free_123",
         status: "active",
       });
       expect(result.current.loading).toBe(false);

package/src/hooks/useProduct.test.tsx

@@ -15,39 +15,39 @@ const mockProduct: BillingProduct = {
       id: "offer-1",
       name: "Starter",
       slug: "starter-monthly",
-      unit_price: "0.00",
+      unitPrice: "0.00",
       currency: "USD",
-      pricing_model: "flat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: true,
+      pricingModel: "flat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: true,
       features: [],
-      is_active: true,
-      is_featured: false,
-      trial_days: 0,
-      sort_order: 0,
-      cta_text: "Start Free",
+      isActive: true,
+      isFeatured: false,
+      trialDays: 0,
+      sortOrder: 0,
+      ctaText: "Start Free",
     },
     {
       id: "offer-2",
       name: "Pro",
       slug: "pro-monthly",
-      unit_price: "49.00",
+      unitPrice: "49.00",
       currency: "USD",
-      pricing_model: "flat",
-      interval_unit: "month",
-      interval_count: 1,
-      interval_display: "per month",
-      is_recurring: true,
-      is_free: false,
+      pricingModel: "flat",
+      intervalUnit: "month",
+      intervalCount: 1,
+      intervalDisplay: "per month",
+      isRecurring: true,
+      isFree: false,
       features: [{ key: "seats", name: "Team seats", value: 5, limit: 5 }],
-      is_active: true,
-      is_featured: true,
-      trial_days: 14,
-      sort_order: 1,
-      cta_text: "Start Trial",
+      isActive: true,
+      isFeatured: true,
+      trialDays: 14,
+      sortOrder: 1,
+      ctaText: "Start Trial",
     },
   ],
 };

package/src/hooks/useSubscription.test.tsx

@@ -9,30 +9,30 @@ const mockOffer: ProductOffer = {
   id: "offer-2",
   name: "Pro",
   slug: "pro-monthly",
-  unit_price: "49.00",
+  unitPrice: "49.00",
   currency: "USD",
-  pricing_model: "flat",
-  interval_unit: "month",
-  interval_count: 1,
-  interval_display: "per month",
-  is_recurring: true,
-  is_free: false,
+  pricingModel: "flat",
+  intervalUnit: "month",
+  intervalCount: 1,
+  intervalDisplay: "per month",
+  isRecurring: true,
+  isFree: false,
   features: [{ key: "seats", name: "Team seats", value: 5, limit: 5 }],
-  is_active: true,
-  is_featured: true,
-  trial_days: 14,
-  sort_order: 1,
-  cta_text: "Start Trial",
+  isActive: true,
+  isFeatured: true,
+  trialDays: 14,
+  sortOrder: 1,
+  ctaText: "Start Trial",
 };
 
 const mockSubscription: SubscriptionInfo = {
   id: "sub-123",
   offer: mockOffer,
   status: "active",
-  current_period_start: "2026-01-01T00:00:00Z",
-  current_period_end: "2026-02-01T00:00:00Z",
-  cancel_at_period_end: false,
-  trial_end: null,
+  currentPeriodStart: "2026-01-01T00:00:00Z",
+  currentPeriodEnd: "2026-02-01T00:00:00Z",
+  cancelAtPeriodEnd: false,
+  trialEnd: null,
 };
 
 function createWrapper(fetcher: typeof fetch) {

package/src/server/index.ts

@@ -1,2 +1,2 @@
-export { camelToSnake, proxyBillingRequest, fetchDjangoServiceToken } from './proxy';
+export { camelToSnake, snakeToCamel, proxyBillingRequest, fetchDjangoServiceToken } from './proxy';
 export type { BillingProxyOptions, DjangoServiceTokenOptions } from './proxy';

package/src/server/proxy.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { snakeToCamel, camelToSnake, proxyBillingRequest } from './proxy';
+
+describe('snakeToCamel', () => {
+  it('converts snake_case keys to camelCase recursively', () => {
+    const input = {
+      unit_price: '9.00',
+      is_free: false,
+      nested_obj: { interval_display: 'per month', is_recurring: true },
+      list_of_things: [{ cta_text: 'Get Started' }],
+    };
+    expect(snakeToCamel(input)).toEqual({
+      unitPrice: '9.00',
+      isFree: false,
+      nestedObj: { intervalDisplay: 'per month', isRecurring: true },
+      listOfThings: [{ ctaText: 'Get Started' }],
+    });
+  });
+
+  it('leaves string values untouched even when they contain underscores', () => {
+    expect(snakeToCamel({ feature_key: 'patterns_per_month' })).toEqual({
+      featureKey: 'patterns_per_month',
+    });
+  });
+
+  it('is idempotent for camelCase keys', () => {
+    const input = { alreadyCamel: true, nested: { stillCamel: 1 } };
+    expect(snakeToCamel(input)).toEqual(input);
+  });
+
+  it('is the inverse of camelToSnake', () => {
+    const camel = { unitPrice: '9.00', isFree: true, nested: { ctaText: 'Go' } };
+    expect(snakeToCamel(camelToSnake(camel))).toEqual(camel);
+  });
+});
+
+describe('proxyBillingRequest with fromSnake option', () => {
+  const originalFetch = globalThis.fetch;
+
+  beforeEach(() => {
+    globalThis.fetch = vi.fn();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it('transforms snake_case response to camelCase when fromSnake is true', async () => {
+    (globalThis.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce(
+      new Response(
+        JSON.stringify({ unit_price: '9.00', is_free: false, offers: [{ cta_text: 'Go' }] }),
+        { status: 200, headers: { 'Content-Type': 'application/json' } }
+      )
+    );
+
+    const response = await proxyBillingRequest(
+      'http://django',
+      '/api/v1/billing/products/x/',
+      undefined,
+      { public: true, fromSnake: true }
+    );
+    const body = await response.json();
+    expect(body).toEqual({
+      unitPrice: '9.00',
+      isFree: false,
+      offers: [{ ctaText: 'Go' }],
+    });
+  });
+
+  it('leaves response untouched when no transform option is set', async () => {
+    (globalThis.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce(
+      new Response(JSON.stringify({ alreadyCamel: true }), { status: 200 })
+    );
+
+    const response = await proxyBillingRequest('http://django', '/path/', 'token');
+    const body = await response.json();
+    expect(body).toEqual({ alreadyCamel: true });
+  });
+
+  it('preserves non-OK status and error shape', async () => {
+    (globalThis.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce(
+      new Response('Not found', { status: 404 })
+    );
+
+    const response = await proxyBillingRequest(
+      'http://django',
+      '/x/',
+      undefined,
+      { public: true, fromSnake: true }
+    );
+    expect(response.status).toBe(404);
+  });
+});

package/src/server/proxy.ts

@@ -87,11 +87,31 @@ export function camelToSnake(obj: unknown): unknown {
   return obj;
 }
 
+/**
+ * Recursively converts snake_case object keys to camelCase.
+ * Used for Django endpoints that bypass the camel-case middleware
+ * (e.g. public product endpoints) so consumers always receive camelCase.
+ */
+export function snakeToCamel(obj: unknown): unknown {
+  if (Array.isArray(obj)) return obj.map(snakeToCamel);
+  if (obj !== null && typeof obj === 'object') {
+    return Object.fromEntries(
+      Object.entries(obj as Record<string, unknown>).map(([k, v]) => [
+        k.replace(/_([a-z0-9])/g, (_, c) => c.toUpperCase()),
+        snakeToCamel(v),
+      ])
+    );
+  }
+  return obj;
+}
+
 export interface BillingProxyOptions {
   method?: string;
   body?: unknown;
   /** If true, apply camelToSnake transform to the response body */
   normalize?: boolean;
+  /** If true, apply snakeToCamel transform to the response body */
+  fromSnake?: boolean;
   /** If true, skip Authorization header even when accessToken is provided */
   public?: boolean;
 }
@@ -110,7 +130,7 @@ export async function proxyBillingRequest(
   accessToken: string | undefined,
   options: BillingProxyOptions = {}
 ): Promise<NextResponse> {
-  const { method = 'GET', body, normalize = false } = options;
+  const { method = 'GET', body, normalize = false, fromSnake = false } = options;
   const url = `${apiBaseUrl}${path}`;
 
   const headers: Record<string, string> = { 'Content-Type': 'application/json' };
@@ -135,7 +155,8 @@ export async function proxyBillingRequest(
     }
 
     const data = await response.json();
-    return NextResponse.json(normalize ? camelToSnake(data) : data);
+    const transformed = normalize ? camelToSnake(data) : fromSnake ? snakeToCamel(data) : data;
+    return NextResponse.json(transformed);
   } catch (error) {
     return NextResponse.json(
       {