From 3d123dba1f629c9e7567686fb953217a43083146 Mon Sep 17 00:00:00 2001
From: KM Koushik <koushikmohan1996@gmail.com>
Date: Tue, 9 Sep 2025 21:05:46 +1000
Subject: [PATCH] fix: avoid crash on billing page when payment method missing
 (#221)

---
 .../app/(dashboard)/settings/billing/page.tsx  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index db25c8a..4ad0189 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -19,7 +19,7 @@ export default function SettingsPage() {
   const { data: subscription } = api.billing.getSubscriptionDetails.useQuery();
   const [isEditingEmail, setIsEditingEmail] = useState(false);
   const [billingEmail, setBillingEmail] = useState(
-    currentTeam?.billingEmail || ""
+    currentTeam?.billingEmail || "",
   );
 
   const apiUtils = api.useUtils();
@@ -46,7 +46,10 @@ export default function SettingsPage() {
     }
   };
 
-  const paymentMethod = JSON.parse(subscription?.paymentMethod || "{}");
+  const paymentMethod =
+    subscription?.paymentMethod && subscription.paymentMethod !== "null"
+      ? JSON.parse(subscription.paymentMethod)
+      : {};
 
   if (!currentIsAdmin) {
     return null;
@@ -89,14 +92,15 @@ export default function SettingsPage() {
             {subscription ? (
               <div className="mt-2">
                 <div className="text-lg font-mono uppercase flex items-center gap-2">
-                  {subscription.paymentMethod ? (
+                  {subscription.paymentMethod &&
+                  subscription.paymentMethod !== "null" ? (
                     <>
                       <span>💳</span>
                       <span className="capitalize">
-                        {paymentMethod.card?.brand || ""} ••••{" "}
-                        {paymentMethod.card?.last4 || ""}
+                        {paymentMethod?.card?.brand || ""} ••••{" "}
+                        {paymentMethod?.card?.last4 || ""}
                       </span>
-                      {paymentMethod.card && (
+                      {paymentMethod?.card && (
                         <span className="text-sm text-muted-foreground lowercase">
                           (Expires: {paymentMethod.card.exp_month}/
                           {paymentMethod.card.exp_year})
@@ -112,7 +116,7 @@ export default function SettingsPage() {
                   {subscription.currentPeriodEnd
                     ? format(
                         new Date(subscription.currentPeriodEnd),
-                        "MMM dd, yyyy"
+                        "MMM dd, yyyy",
                       )
                     : "N/A"}
                 </div>