From ecd2fb2719e3ee430a5e918a95e348d05e729d09 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Fri, 24 Apr 2026 13:52:56 +0530
Subject: [PATCH] add optional operators to prevent crashing when no cards for
 a city

---
 src/pages/PassesPage.tsx | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/PassesPage.tsx b/src/pages/PassesPage.tsx
index 171ca2e..17a978c 100644
--- a/src/pages/PassesPage.tsx
+++ b/src/pages/PassesPage.tsx
@@ -227,10 +227,10 @@ export function PassesPage({
 
                 <CardHeader className="text-center pb-4 pt-8 flex-shrink-0">
                   <CardTitle className="font-merchant text-2xl leading-tight mb-3 text-gray-900">
-                    {cards[0].title}
+                    {cards[0]?.title}
                   </CardTitle>
                   <CardDescription className="font-poppins text-sm text-gray-600 leading-relaxed font-normal min-h-[48px] flex items-center justify-center px-4">
-                    {cards[0].description}
+                    {cards[0]?.description}
                   </CardDescription>
                 </CardHeader>
 
@@ -238,23 +238,23 @@ export function PassesPage({
                 <div className="px-6 pb-6 flex-shrink-0">
                   <div className="flex items-baseline justify-center gap-2 mb-2">
                     <span className="text-5xl font-bold text-gray-900 font-poppins">
-                      ${cards[0].adultPrice}
+                      ${cards[0]?.adultPrice}
                     </span>
                     <span className="text-gray-500 font-poppins text-base">
                       / {passTypes[0].period}
                     </span>
                   </div>
                   <div className="h-5 flex items-center justify-center">
-                    {cards[0].adultPrice && (
+                    {cards[0]?.adultPrice && (
                       <div className="text-sm text-gray-500 font-poppins">
                         {/* Strikethrough price = originalPrice + $5 */}
                         <span className="line-through mr-2">
-                          ${parseFloat(cards[0].adultPrice) + 5}
+                          ${parseFloat(cards[0]?.adultPrice) + 5}
                         </span>
                         <span className="text-green-600 font-medium">
                           Save{" "}
                           {Math.round(
-                            ((5) / (parseFloat(cards[0].adultPrice) + 5)) * 100
+                            ((5) / (parseFloat(cards[0]?.adultPrice) + 5)) * 100
                           )}
                           %
                         </span>
@@ -299,14 +299,14 @@ export function PassesPage({
             {/* Unlimited Pass Card */}
             <div className="relative h-full">
               <Card
-                className={`relative h-full flex flex-col transition-all duration-300 cursor-pointer ${selectedPass === passTypes[1].id
+                className={`relative h-full flex flex-col transition-all duration-300 cursor-pointer ${selectedPass === passTypes[1]?.id
                   ? "ring-2 ring-red-500 shadow-lg"   // 🔴 red border when selected
                   : "border-gray-200 shadow-md hover:shadow-lg hover:border-primary/30"
                   }`}
-                onClick={() => setSelectedPass(passTypes[1].id)}
+                onClick={() => setSelectedPass(passTypes[1]?.id)}
 
               >
-                {passTypes[1].popular && (
+                {passTypes[1]?.popular && (
                   <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 z-10">
                     <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-6 py-1.5 font-semibold shadow-lg font-poppins">
                       Most Popular
@@ -320,30 +320,30 @@ export function PassesPage({
 
                 <CardHeader className="text-center pb-4 pt-8 flex-shrink-0">
                   <CardTitle className="font-merchant text-2xl leading-tight mb-3 text-gray-900">
-                    {cards[1].title}
+                    {cards[1]?.title}
                   </CardTitle>
                   <CardDescription className="font-poppins text-sm text-gray-600 leading-relaxed font-normal min-h-[48px] flex items-center justify-center px-4">
-                    {cards[1].description}
+                    {cards[1]?.description}
                   </CardDescription>
                 </CardHeader>
 
                 {/* Pricing */}
                 <div className="px-6 pb-6 flex-shrink-0">
                   <div className="flex items-baseline justify-center gap-2 mb-2">
-                    <span className="text-5xl font-bold text-gray-900 font-poppins">${cards[1].adultPrice}</span>
-                    <span className="text-gray-500 font-poppins text-base">/ {passTypes[1].period}</span>
+                    <span className="text-5xl font-bold text-gray-900 font-poppins">${cards[1]?.adultPrice}</span>
+                    <span className="text-gray-500 font-poppins text-base">/ {passTypes[1]?.period}</span>
                   </div>
                   <div className="h-5 flex items-center justify-center">
-                    {cards[1].adultPrice && (
+                    {cards[1]?.adultPrice && (
                       <div className="text-sm text-gray-500 font-poppins">
                         {/* Strikethrough price = originalPrice + $5 */}
                         <span className="line-through mr-2">
-                          ${parseFloat(cards[1].adultPrice) + 5}
+                          ${parseFloat(cards[1]?.adultPrice) + 5}
                         </span>
                         <span className="text-green-600 font-medium">
                           Save{" "}
                           {Math.round(
-                            ((5) / (parseFloat(cards[1].adultPrice) + 5)) * 100
+                            ((5) / (parseFloat(cards[1]?.adultPrice) + 5)) * 100
                           )}
                           %
                         </span>
@@ -355,7 +355,7 @@ export function PassesPage({
                 <CardContent className="pt-0 pb-6 px-6 flex-grow flex flex-col">
                   <div className="flex-grow mb-6">
                     <div className="space-y-3">
-                      {passTypes[1].features.map((feature, index) => (
+                      {passTypes[1]?.features.map((feature, index) => (
                         <div key={index} className="flex items-start gap-3">
                           <Check className="w-4 h-4 text-green-500 mt-1 flex-shrink-0" />
                           <span className="text-sm text-gray-700 font-poppins leading-relaxed font-normal">{feature}</span>