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)}`);
|
||||
localStorage.setItem("cityId", String(city.id))
|
||||
localStorage.setItem("cityName", String(city.cityName))
|
||||
sessionStorage.setItem("citySelected", String(city.cityName))
|
||||
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 { motion, AnimatePresence } from 'motion/react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import Frame1597884853 from '../imports/Frame1597884853';
|
||||
import { Button } from './ui/button';
|
||||
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, slugify } from './CitySelectionDialog';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { LoginModal } from './LoginModal';
|
||||
@@ -62,15 +60,12 @@ interface NavigationItem {
|
||||
export default function Navbar({
|
||||
activeCity,
|
||||
onCityChange,
|
||||
onSignInClick,
|
||||
onSignOutClick,
|
||||
isUserSignedIn = false,
|
||||
// user
|
||||
}: NavbarProps) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
|
||||
const [activeCartDropdown, setActiveCartDropdown] = useState(false);
|
||||
const [activeUserDropdown, setActiveUserDropdown] = useState(false);
|
||||
const [activeCityDropdown, setActiveCityDropdown] = useState(false);
|
||||
const [isCityDialogOpen, setIsCityDialogOpen] = useState(false);
|
||||
@@ -79,7 +74,6 @@ export default function Navbar({
|
||||
const [dialogSource, setDialogSource] = useState<'navbar' | 'cta'>('navbar');
|
||||
|
||||
const languageRef = useRef<HTMLDivElement>(null);
|
||||
const cartRef = useRef<HTMLDivElement>(null);
|
||||
const userRef = useRef<HTMLDivElement>(null);
|
||||
const cityRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -96,7 +90,7 @@ export default function Navbar({
|
||||
const cityName = localStorage.getItem("cityName")
|
||||
|
||||
// const citySelected = location.pathname.includes(slugify(cityName) || "")
|
||||
const citySelected = cityName
|
||||
const citySelected = sessionStorage.getItem("citySelected")
|
||||
|
||||
const baseUrl = import.meta.env.VITE_BASE_URL;
|
||||
|
||||
@@ -137,15 +131,6 @@ export default function Navbar({
|
||||
path: '/whats-included',
|
||||
isShared: false
|
||||
},
|
||||
// Position 4 - Shared item
|
||||
// {
|
||||
// label: 'Your Card',
|
||||
// path: '/passes',
|
||||
// isShared: true,
|
||||
// landingLabel: 'Your Card',
|
||||
// melbourneLabel: 'Your Card'
|
||||
// },
|
||||
// Position 5
|
||||
{
|
||||
label: 'FAQ',
|
||||
path: '/faq',
|
||||
@@ -159,7 +144,7 @@ export default function Navbar({
|
||||
melbourneLabel: 'Your Postcard'
|
||||
}
|
||||
],
|
||||
melbourne: [
|
||||
citySelected: [
|
||||
// Position 1
|
||||
{
|
||||
label: 'Attractions',
|
||||
@@ -240,20 +225,20 @@ export default function Navbar({
|
||||
}, [location.pathname]);
|
||||
|
||||
// ✅ Determine which navbar to show
|
||||
const getAutoNavigationSource = (): 'landing' | 'melbourne' => {
|
||||
const getAutoNavigationSource = () => {
|
||||
const path = location.pathname;
|
||||
|
||||
// Explicit routes
|
||||
if (path.startsWith('/melbourne')) return 'melbourne';
|
||||
// if (path.startsWith('/melbourne')) return 'melbourne';
|
||||
if (path === '/' || path.startsWith('/explore')) return 'landing';
|
||||
|
||||
// Shared routes
|
||||
if (['/passes', '/how-it-works'].includes(path)) {
|
||||
return lastKnownCity; // ← remembers where user came from
|
||||
}
|
||||
// if (['/passes', '/how-it-works'].includes(path)) {
|
||||
// return lastKnownCity; // ← remembers where user came from
|
||||
// }
|
||||
|
||||
// Fallback
|
||||
return lastKnownCity;
|
||||
return citySelected;
|
||||
};
|
||||
|
||||
|
||||
@@ -261,7 +246,7 @@ export default function Navbar({
|
||||
const getNavigationItems = (): NavigationItem[] => {
|
||||
const currentSource = getAutoNavigationSource();
|
||||
const items = currentSource === 'landing' ?
|
||||
navigationConfig.landing : navigationConfig.melbourne;
|
||||
navigationConfig.landing : navigationConfig.citySelected;
|
||||
|
||||
return items.map((item, index) => ({
|
||||
...item,
|
||||
@@ -370,34 +355,6 @@ export default function Navbar({
|
||||
{ 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 = () => {
|
||||
setIsMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user