From d29bf7884d01cc46c98500b8823877706b1902b8 Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Mon, 24 Nov 2025 11:45:43 +0100
Subject: [PATCH] fix: update billing period to match backend validation

Backend only accepts: 'monthly', 'annual', or null
Frontend was offering: daily, weekly, monthly, quarterly, yearly, lifetime

Changes:
- Update BillingPeriod type to 'monthly' | 'annual' | null
- Update PlanFormModal dropdown to only show valid options
- Update PlanCard formatBillingPeriod to handle new values
- Display 'Annual (Yearly)' in UI but send 'annual' to API

Fixes validation error: 'Must be monthly, annual, or null'
---
 src/components/plans/PlanCard.tsx      |  9 +++------
 src/components/plans/PlanFormModal.tsx | 11 ++++-------
 src/types/facility-admin.ts            |  3 ++-
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/plans/PlanCard.tsx b/src/components/plans/PlanCard.tsx
index b60f8ed..0091fbc 100644
--- a/src/components/plans/PlanCard.tsx
+++ b/src/components/plans/PlanCard.tsx
@@ -13,14 +13,11 @@ export default function PlanCard({ plan, onEdit, onDelete }: PlanCardProps) {
     return (cents / 100).toFixed(2);
   }
 
-  function formatBillingPeriod(period: string): string {
+  function formatBillingPeriod(period: string | null): string {
+    if (!period) return 'one-time payment';
     const periodMap: Record<string, string> = {
-      daily: 'per day',
-      weekly: 'per week',
       monthly: 'per month',
-      quarterly: 'per quarter',
-      yearly: 'per year',
-      lifetime: 'one-time'
+      annual: 'per year'
     };
     return periodMap[period] || period;
   }
diff --git a/src/components/plans/PlanFormModal.tsx b/src/components/plans/PlanFormModal.tsx
index 83b8ffd..c2f1467 100644
--- a/src/components/plans/PlanFormModal.tsx
+++ b/src/components/plans/PlanFormModal.tsx
@@ -100,17 +100,14 @@ export default function PlanFormModal({
               </label>
               <select
                 id="billing_period"
-                value={formData.billing_period}
-                onChange={e => setFormData({ ...formData, billing_period: e.target.value as BillingPeriod })}
+                value={formData.billing_period || ''}
+                onChange={e => setFormData({ ...formData, billing_period: (e.target.value || null) as BillingPeriod })}
                 className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                 required
               >
-                <option value="daily">Daily</option>
-                <option value="weekly">Weekly</option>
                 <option value="monthly">Monthly</option>
-                <option value="quarterly">Quarterly</option>
-                <option value="yearly">Yearly</option>
-                <option value="lifetime">Lifetime</option>
+                <option value="annual">Annual (Yearly)</option>
+                <option value="">One-time (No recurring billing)</option>
               </select>
             </div>
 
diff --git a/src/types/facility-admin.ts b/src/types/facility-admin.ts
index acda7b3..75a46c1 100644
--- a/src/types/facility-admin.ts
+++ b/src/types/facility-admin.ts
@@ -23,7 +23,8 @@ export interface MembershipPlan {
   updated_at?: string; // ISO8601
 }
 
-export type BillingPeriod = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly' | 'lifetime';
+// Backend only accepts: 'monthly', 'annual', or null (one-time payment)
+export type BillingPeriod = 'monthly' | 'annual' | null;
 
 export interface CreatePlanRequest {
   name: string;