replace the citySelected condition from local to session storage
This commit is contained in:
@@ -45,6 +45,7 @@ export function CitySelectionDialog({
|
|||||||
navigate(`/${slugify(city.cityName)}`);
|
navigate(`/${slugify(city.cityName)}`);
|
||||||
localStorage.setItem("cityId", String(city.id))
|
localStorage.setItem("cityId", String(city.id))
|
||||||
localStorage.setItem("cityName", String(city.cityName))
|
localStorage.setItem("cityName", String(city.cityName))
|
||||||
|
sessionStorage.setItem("citySelected", String(city.cityName))
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -2,12 +2,10 @@ import { useState, useEffect, useRef, forwardRef } from 'react';
|
|||||||
import { Menu, X, ShoppingBag, ChevronDown, Globe, User, Settings, LogOut } from 'lucide-react';
|
import { Menu, X, ShoppingBag, ChevronDown, Globe, User, Settings, LogOut } from 'lucide-react';
|
||||||
import { motion, AnimatePresence } from 'motion/react';
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||||
import Frame1597884853 from '../imports/Frame1597884853';
|
|
||||||
import { Button } from './ui/button';
|
import { Button } from './ui/button';
|
||||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||||
import { CTAButton } from './CTAButton';
|
import { CTAButton } from './CTAButton';
|
||||||
import logoImage from '../assets/cit-logo.png';
|
import logoImage from '../assets/cit-logo.png';
|
||||||
import melbourneLogo from '../assets/melbourne-logo.png';
|
|
||||||
import { CitySelectionDialog, slugify } from './CitySelectionDialog';
|
import { CitySelectionDialog, slugify } from './CitySelectionDialog';
|
||||||
import { useAuth } from '../context/AuthContext';
|
import { useAuth } from '../context/AuthContext';
|
||||||
import { LoginModal } from './LoginModal';
|
import { LoginModal } from './LoginModal';
|
||||||
@@ -62,15 +60,12 @@ interface NavigationItem {
|
|||||||
export default function Navbar({
|
export default function Navbar({
|
||||||
activeCity,
|
activeCity,
|
||||||
onCityChange,
|
onCityChange,
|
||||||
onSignInClick,
|
|
||||||
onSignOutClick,
|
|
||||||
isUserSignedIn = false,
|
isUserSignedIn = false,
|
||||||
// user
|
// user
|
||||||
}: NavbarProps) {
|
}: NavbarProps) {
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const [isScrolled, setIsScrolled] = useState(false);
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
|
const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
|
||||||
const [activeCartDropdown, setActiveCartDropdown] = useState(false);
|
|
||||||
const [activeUserDropdown, setActiveUserDropdown] = useState(false);
|
const [activeUserDropdown, setActiveUserDropdown] = useState(false);
|
||||||
const [activeCityDropdown, setActiveCityDropdown] = useState(false);
|
const [activeCityDropdown, setActiveCityDropdown] = useState(false);
|
||||||
const [isCityDialogOpen, setIsCityDialogOpen] = useState(false);
|
const [isCityDialogOpen, setIsCityDialogOpen] = useState(false);
|
||||||
@@ -79,7 +74,6 @@ export default function Navbar({
|
|||||||
const [dialogSource, setDialogSource] = useState<'navbar' | 'cta'>('navbar');
|
const [dialogSource, setDialogSource] = useState<'navbar' | 'cta'>('navbar');
|
||||||
|
|
||||||
const languageRef = useRef<HTMLDivElement>(null);
|
const languageRef = useRef<HTMLDivElement>(null);
|
||||||
const cartRef = useRef<HTMLDivElement>(null);
|
|
||||||
const userRef = useRef<HTMLDivElement>(null);
|
const userRef = useRef<HTMLDivElement>(null);
|
||||||
const cityRef = useRef<HTMLDivElement>(null);
|
const cityRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
@@ -96,7 +90,7 @@ export default function Navbar({
|
|||||||
const cityName = localStorage.getItem("cityName")
|
const cityName = localStorage.getItem("cityName")
|
||||||
|
|
||||||
// const citySelected = location.pathname.includes(slugify(cityName) || "")
|
// const citySelected = location.pathname.includes(slugify(cityName) || "")
|
||||||
const citySelected = cityName
|
const citySelected = sessionStorage.getItem("citySelected")
|
||||||
|
|
||||||
const baseUrl = import.meta.env.VITE_BASE_URL;
|
const baseUrl = import.meta.env.VITE_BASE_URL;
|
||||||
|
|
||||||
@@ -137,15 +131,6 @@ export default function Navbar({
|
|||||||
path: '/whats-included',
|
path: '/whats-included',
|
||||||
isShared: false
|
isShared: false
|
||||||
},
|
},
|
||||||
// Position 4 - Shared item
|
|
||||||
// {
|
|
||||||
// label: 'Your Card',
|
|
||||||
// path: '/passes',
|
|
||||||
// isShared: true,
|
|
||||||
// landingLabel: 'Your Card',
|
|
||||||
// melbourneLabel: 'Your Card'
|
|
||||||
// },
|
|
||||||
// Position 5
|
|
||||||
{
|
{
|
||||||
label: 'FAQ',
|
label: 'FAQ',
|
||||||
path: '/faq',
|
path: '/faq',
|
||||||
@@ -159,7 +144,7 @@ export default function Navbar({
|
|||||||
melbourneLabel: 'Your Postcard'
|
melbourneLabel: 'Your Postcard'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
melbourne: [
|
citySelected: [
|
||||||
// Position 1
|
// Position 1
|
||||||
{
|
{
|
||||||
label: 'Attractions',
|
label: 'Attractions',
|
||||||
@@ -240,20 +225,20 @@ export default function Navbar({
|
|||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
// ✅ Determine which navbar to show
|
// ✅ Determine which navbar to show
|
||||||
const getAutoNavigationSource = (): 'landing' | 'melbourne' => {
|
const getAutoNavigationSource = () => {
|
||||||
const path = location.pathname;
|
const path = location.pathname;
|
||||||
|
|
||||||
// Explicit routes
|
// Explicit routes
|
||||||
if (path.startsWith('/melbourne')) return 'melbourne';
|
// if (path.startsWith('/melbourne')) return 'melbourne';
|
||||||
if (path === '/' || path.startsWith('/explore')) return 'landing';
|
if (path === '/' || path.startsWith('/explore')) return 'landing';
|
||||||
|
|
||||||
// Shared routes
|
// Shared routes
|
||||||
if (['/passes', '/how-it-works'].includes(path)) {
|
// if (['/passes', '/how-it-works'].includes(path)) {
|
||||||
return lastKnownCity; // ← remembers where user came from
|
// return lastKnownCity; // ← remembers where user came from
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Fallback
|
// Fallback
|
||||||
return lastKnownCity;
|
return citySelected;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -261,7 +246,7 @@ export default function Navbar({
|
|||||||
const getNavigationItems = (): NavigationItem[] => {
|
const getNavigationItems = (): NavigationItem[] => {
|
||||||
const currentSource = getAutoNavigationSource();
|
const currentSource = getAutoNavigationSource();
|
||||||
const items = currentSource === 'landing' ?
|
const items = currentSource === 'landing' ?
|
||||||
navigationConfig.landing : navigationConfig.melbourne;
|
navigationConfig.landing : navigationConfig.citySelected;
|
||||||
|
|
||||||
return items.map((item, index) => ({
|
return items.map((item, index) => ({
|
||||||
...item,
|
...item,
|
||||||
@@ -370,34 +355,6 @@ export default function Navbar({
|
|||||||
{ id: '2', name: 'Melbourne Premium Pass', price: '$129', quantity: 1 },
|
{ id: '2', name: 'Melbourne Premium Pass', price: '$129', quantity: 1 },
|
||||||
];
|
];
|
||||||
|
|
||||||
// Calculate cart total
|
|
||||||
const cartTotal = cartItems.reduce((total, item) => {
|
|
||||||
const price = parseFloat(item.price.replace('$', ''));
|
|
||||||
return total + (price * item.quantity);
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
// Cart dropdown items with proper navigation for checkout
|
|
||||||
const cartDropdownItems: DropdownItem[] = [
|
|
||||||
...cartItems.map(item => ({
|
|
||||||
id: item.id,
|
|
||||||
label: `${item.name} - ${item.price}`,
|
|
||||||
badge: `${item.quantity}x`
|
|
||||||
})),
|
|
||||||
{
|
|
||||||
id: 'total',
|
|
||||||
label: `Total: $${cartTotal.toFixed(2)}`,
|
|
||||||
icon: <ShoppingBag className="w-4 h-4" />
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'checkout',
|
|
||||||
label: 'Proceed to Checkout',
|
|
||||||
action: () => {
|
|
||||||
navigate('/checkout');
|
|
||||||
setActiveCartDropdown(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const closeMobileMenu = () => {
|
const closeMobileMenu = () => {
|
||||||
setIsMobileMenuOpen(false);
|
setIsMobileMenuOpen(false);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user