diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 28f26f5..52bf4f0 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -88,11 +88,11 @@ export function AppRouter({ } /> {/* Home Route */} - - } /> + } /> {/* Passes Route */} {/* Attractions Routes */} - diff --git a/src/components/CitySelectionDialog.tsx b/src/components/CitySelectionDialog.tsx index 3ede930..e4d6503 100644 --- a/src/components/CitySelectionDialog.tsx +++ b/src/components/CitySelectionDialog.tsx @@ -20,6 +20,9 @@ interface CitySelectionDialogProps { onCitySelect?: (cityId: string) => void; // ✅ Updated to pass cityId } +export const slugify = (name: string | null) => + name?.toLowerCase().replace(/\s+/g, '-'); + export function CitySelectionDialog({ isOpen, onClose, @@ -41,13 +44,17 @@ export function CitySelectionDialog({ ); } - const handleCityClick = (city: City) => { console.log('Selected city:', city.cityName); // ✅ Call the onCitySelect callback if provided (passing cityId) if (onCitySelect) { - onCitySelect(String(city.cityName)); + // onCitySelect(String(city.cityName)); + // navigate(`/${city.cityName}/${city.id}`) + + navigate(`/${slugify(city.cityName)}/${city.id}`); + localStorage.setItem("cityId", String(city.id)) + localStorage.setItem("cityName", String(city.cityName)) } else { // ✅ Default behavior: navigate to passes page navigate(`/passes?city=${encodeURIComponent(city.cityName)}`); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ca6e863..36980ca 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -8,7 +8,7 @@ import { ImageWithFallback } from './figma/ImageWithFallback'; import { CTAButton } from './CTAButton'; import logoImage from '../assets/cit-logo.png'; import melbourneLogo from '../assets/melbourne-logo.png'; -import { CitySelectionDialog } from './CitySelectionDialog'; +import { CitySelectionDialog, slugify } from './CitySelectionDialog'; import { useAuth } from '../context/AuthContext'; import { LoginModal } from './LoginModal'; @@ -104,6 +104,8 @@ export default function Navbar({ } }; + const cityId = localStorage.getItem("cityId") + const cityName = localStorage.getItem("cityName") // More flexible navigation configuration const navigationConfig = { @@ -129,20 +131,20 @@ export default function Navbar({ isShared: false }, // Position 4 - Shared item - { - label: 'Your Card', - path: '/passes', - isShared: true, - landingLabel: 'Your Card', - melbourneLabel: 'Your Card' - }, + // { + // label: 'Your Card', + // path: '/passes', + // isShared: true, + // landingLabel: 'Your Card', + // melbourneLabel: 'Your Card' + // }, // Position 5 { label: 'FAQ', path: '/faq', isShared: false }, - { + { label: 'Your Postcard', path: '/postcards', isShared: true, @@ -154,7 +156,7 @@ export default function Navbar({ // Position 1 { label: 'Attractions', - path: '/attractions', + path: `/${slugify(cityName)}/${cityId}/attractions`, isShared: false }, // Position 2 @@ -185,7 +187,7 @@ export default function Navbar({ landingLabel: 'Your Card', melbourneLabel: 'Your Card' }, - { + { label: 'Your Postcard', path: '/postcards', isShared: true, @@ -559,7 +561,7 @@ export default function Navbar({ whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > - + void; onSignOutClick?: () => void; @@ -229,7 +48,10 @@ export function AttractionsPage({ const [selectedCategory, setSelectedCategory] = useState(null); const [selectedPassType, setSelectedPassType] = useState(null); - const cityId = 1 + const { cityId } = useParams() + const cityName = localStorage.getItem("cityName") + + console.log(cityName) const { data: filterData, isLoading } = useGetAttractionFiltersQuery(cityId) const { data: attractions } = useGetCustomerAttractionsQuery({ @@ -308,12 +130,12 @@ export function AttractionsPage({

Discover{' '} - Melbourne's{' '} + {cityName}'s{' '} Best{' '} Attractions

- Skip the lines and explore Melbourne's most iconic destinations with your CityCard pass + Skip the lines and explore {cityName}'s most iconic destinations with your CityCard pass

{/* City Card Promotional Banner */} @@ -423,7 +245,7 @@ export function AttractionsPage({
{/* Header */}
-

Attractions in Melbourne

+

Attractions in {cityName}

{/* Results count */}

Showing {showingFrom}-{showingTo} of {totalItems} Item(s)