From e2c90b8fcc2f1f8f96d4cdfc2cf835547b25d5a1 Mon Sep 17 00:00:00 2001
From: msukkari <michael.sukkarieh@mail.mcgill.ca>
Date: Thu, 13 Feb 2025 11:07:04 -0800
Subject: [PATCH] handle trial case in billing info page

---
 packages/web/src/actions.ts                             | 1 +
 packages/web/src/app/[domain]/settings/billing/page.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/actions.ts b/packages/web/src/actions.ts
index 8c288aef..96c810ae 100644
--- a/packages/web/src/actions.ts
+++ b/packages/web/src/actions.ts
@@ -655,6 +655,7 @@ export const getSubscriptionData = async (domain: string) =>
                 seats: subscription.items.data[0].quantity!,
                 perSeatPrice: subscription.items.data[0].price.unit_amount! / 100,
                 nextBillingDate: subscription.current_period_end!,
+                status: subscription.status,
             }
         })
     );
diff --git a/packages/web/src/app/[domain]/settings/billing/page.tsx b/packages/web/src/app/[domain]/settings/billing/page.tsx
index 07534280..2b9fbc43 100644
--- a/packages/web/src/app/[domain]/settings/billing/page.tsx
+++ b/packages/web/src/app/[domain]/settings/billing/page.tsx
@@ -37,7 +37,11 @@ export default async function BillingPage({
         <Card>
           <CardHeader>
             <CardTitle>Subscription Plan</CardTitle>
-            <CardDescription>You are currently on the {subscription.plan} plan.</CardDescription>
+            <CardDescription>
+              {subscription.status === "trialing" 
+                ? "You are currently on a free trial"
+                : `You are currently on the ${subscription.plan} plan.`}
+            </CardDescription>
           </CardHeader>
           <CardContent className="grid gap-4">
             <div className="flex items-center justify-between">
@@ -53,7 +57,7 @@ export default async function BillingPage({
               <div className="flex items-center space-x-4">
                 <CalendarIcon className="h-5 w-5 text-muted-foreground" />
                 <div className="space-y-1">
-                  <p className="text-sm font-medium leading-none">Next Billing Date</p>
+                  <p className="text-sm font-medium leading-none">{subscription.status === "trialing" ? "Trial End Date" : "Next Billing Date"}</p>
                   <p className="text-sm text-muted-foreground">{new Date(subscription.nextBillingDate * 1000).toLocaleDateString()}</p>
                 </div>
               </div>