"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { FaMoon, FaRegUser, FaSun } from "react-icons/fa"; import * as api from "@/api/apiRoutes"; import { IoCartOutline, IoLocationOutline, IoHomeOutline, IoHome, IoSearchOutline, IoLanguage, IoHeartOutline, IoHeart, IoPersonOutline, IoPerson, } from "react-icons/io5"; import { LuUser } from "react-icons/lu"; import { FaPhoneVolume, FaXTwitter } from "react-icons/fa6"; import { RxHamburgerMenu } from "react-icons/rx"; import { MdCategory, MdOutlineCategory } from "react-icons/md"; import dynamic from "next/dynamic"; // Lazy: pulls in Firebase via its own static Login import; only needed after a click. const CartDrawer = dynamic(() => import("../cart/CartDrawer"), { ssr: false }); // Lazy, ssr:false: pulls in Firebase auth (Register/ForgetPasswordModal too), only needed after a click. const Login = dynamic(() => import("../login/Login"), { ssr: false }); import { t } from "@/utils/translation"; import { useDispatch, useSelector } from "react-redux"; import { setShowLocation as setShowLocationAction } from "@/redux/slices/locationModalSlice"; // Lottie ships ~250KB — load lazily, not in the main bundle. const Lottie = dynamic(() => import('lottie-react'), { ssr: false }); const Location = dynamic(() => import("../locationmodal/Location"), { ssr: false, }); import { BiBell, BiBookmarkHeart, BiCartAlt, BiUserCircle, BiWallet, BiCaretRight, } from "react-icons/bi"; import Link from "next/link"; import { usePathname, useParams, useRouter } from "next/navigation"; import { setCity } from "@/redux/slices/citySlice"; import { nextZoneRequestSeq, currentZoneRequestSeq } from "@/utils/zoneRequestSeq"; // Lazy + render-gated: interaction-only overlays, no reason to be in the initial bundle. const LogoutModal = dynamic(() => import("../logoutmodal/LogoutModal"), { ssr: false, }); const ProfileDrawer = dynamic( () => import("../profiledashboard/ProfileDrawer"), { ssr: false }, ); import { clearCheckout } from "@/redux/slices/checkoutSlice"; import { setProductBySearch, setCategoryBreadcrumb, } from "@/redux/slices/productFilterSlice"; import useUrlProductFilters from "@/hooks/useUrlProductFilters"; import { setShopMode, setDefaultApplied } from "@/redux/slices/shopModeSlice"; import { getPolygonCenter, pickDeviceImage } from "@/utils/helperFunction"; import useGeocode from "@/hooks/useGeocode"; import { setCartProducts, setCartSubTotal, setCartCurrency, setGuestChannel, } from "@/redux/slices/cartSlice"; import SearchComponent from "../search/SearchComponent"; import useHydratedMediaQuery from "@/hooks/useHydratedMediaQuery"; import { RiCloseFill, RiLogoutCircleRLine } from "react-icons/ri"; import { setSelectedLanguage } from "@/redux/slices/languageSlice"; import Image from "next/image"; // Mobile-only, opened from the hamburger — no reason to be in the initial bundle. const MobileNavSidebar = dynamic( () => import("../mobile-nav-sidebar/MobileNavSidebar"), { ssr: false }, ); import useLanguageSwitch from "@/hooks/useLanguageSwitch"; import useZoneHref from "@/hooks/useZoneHref"; import useIsHydrated from "@/hooks/useIsHydrated"; import useCurrency from "@/hooks/useCurrency"; import { socialIconUrl } from "@/utils/socialIcon"; /** * Cart icon. Shows a static flat icon while idle. Plays a Lottie animation * ONCE on cart change, then reverts to the static icon: * - count INCREASES (product added) -> shopping-cart.json * - count DECREASES (product removed) -> empty-cart.json * `icon`/`dropKey` are accepted but ignored for back-compat. */ // Shifts a hex color's lightness by `delta` points (hue/saturation unchanged), matching the mobile app's gradient — not a black/white mix, which would shift hue. const shiftLightness = (hex: string, delta: number): string => { const h = String(hex || "") .trim() .replace("#", ""); const full = h.length === 3 ? h .split("") .map((c) => c + c) .join("") : h; if (full.length !== 6) return hex; const r = Number.parseInt(full.slice(0, 2), 16) / 255; const g = Number.parseInt(full.slice(2, 4), 16) / 255; const b = Number.parseInt(full.slice(4, 6), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const l = (max + min) / 2; let hue = 0; let sat = 0; if (max !== min) { const d = max - min; sat = l > 0.5 ? d / (2 - max - min) : d / (max + min); if (max === r) hue = ((g - b) / d + (g < b ? 6 : 0)) / 6; else if (max === g) hue = ((b - r) / d + 2) / 6; else hue = ((r - g) / d + 4) / 6; } const nextL = Math.min(100, Math.max(0, l * 100 + delta)); return `hsl(${(hue * 360).toFixed(1)} ${(sat * 100).toFixed(1)}% ${nextL.toFixed(1)}%)`; }; // Parse "#fff" / "#ffffff" / "rgb(...)" into normalized [r,g,b] 0..1 for Lottie. const toLottieRgb = (css?: string | null): [number, number, number] => { if (!css) return [1, 1, 1]; const c = css.trim(); if (c.startsWith("#")) { let h = c.slice(1); if (h.length === 3) h = h .split("") .map((x) => x + x) .join(""); const n = Number.parseInt(h, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } const m = c.match(/(\d+(\.\d+)?)/g); if (m && m.length >= 3) return m.slice(0, 3).map((v) => Number(v) / 255) as [number, number, number]; return [1, 1, 1]; }; // Deep-clone Lottie data and overwrite every solid color (shape `c.k`) with rgb. // Lottie JSON is a deeply-nested, loosely-typed shape — `any` walks it generically. const tintLottie = (data: any, rgb: [number, number, number]) => { const clone = structuredClone(data); const walk = (node: any) => { if (Array.isArray(node)) return node.forEach(walk); if (node && typeof node === "object") { // fill (fl) / stroke (st) shapes hold color at node.c.k = [r,g,b,a] if ( (node.ty === "fl" || node.ty === "st") && node.c && Array.isArray(node.c.k) ) { node.c.k = [rgb[0], rgb[1], rgb[2], node.c.k[3] ?? 1]; } Object.values(node).forEach(walk); } }; walk(clone); return clone; }; interface CartIconAnimationProps { count: number; badgeClass: string; size?: number; } const CartIconAnimation = ({ count, badgeClass, size = 26 }: CartIconAnimationProps) => { // count is persisted (0 on server) — gate the badge on hydration to avoid a mismatch. const isHydrated = useIsHydrated(); const showBadge = isHydrated && count > 0; const lottieRef = useRef(null); const prevCount = useRef(count); // null = static icon; otherwise the animation to play once const [anim, setAnim] = useState(null); // Tint animations to the header text color (CSS var --layout-header-text). const tinted = useMemo(() => { if (!anim || typeof window === "undefined") return anim; const css = getComputedStyle(document.documentElement) .getPropertyValue("--layout-header-text") .trim(); return tintLottie(anim, toLottieRgb(css)); }, [anim]); useEffect(() => { // Lazy: these JSON payloads (~18KB combined) only matter the moment the // cart count actually changes, same reasoning as the Lottie player itself // being dynamically imported above — no reason either ships in the // initial bundle for a page where the cart may never change. if (count > prevCount.current) { import("@/assets/shopping-cart.json").then((mod) => setAnim(mod.default)); // added } else if (count < prevCount.current) { import("@/assets/empty-cart.json").then((mod) => setAnim(mod.default)); // removed } prevCount.current = count; }, [count]); return ( {anim ? ( setAnim(null)} style={{ width: size, height: size }} /> ) : ( )} {showBadge && {count}} ); }; const Header = () => { const switchLanguageUrl = useLanguageSwitch(); const zoneHref = useZoneHref(); const { reverseGeocode } = useGeocode(); // const { theme, setTheme } = useTheme(); const router = useRouter(); const pathname = usePathname(); const dispatch = useDispatch(); const routeParams = useParams<{ zone?: string }>(); // Zone slug from a shared URL (e.g. /bhuj-quick) — Next's own resolved // [zone] route param. Real path segments mean this is exact (the router // already confirmed the route matched the zoned branch), no more // string-shape guessing against the raw pathname. const zoneSlugFromUrl = routeParams?.zone ?? null; // Gates branches that depend on redux-persist (client-only) so first client render matches SSR. const isHydrated = useIsHydrated(); // const themes = useSelector((state) => state.Theme); const cart = useSelector((state: any) => state.Cart); const setting = useSelector((state: any) => state.Setting); // Scoped primitives for fetchCity's effect below — avoids re-running it on unrelated Setting object changes. const defaultCityLat = useSelector( (state: any) => state.Setting?.setting?.default_city?.latitude, ); const defaultCityLng = useSelector( (state: any) => state.Setting?.setting?.default_city?.longitude, ); const user = useSelector((state: any) => state.User); // Header cart badge is a live display — countrySetting (zone-aware) wins over // the stale per-response cart.currency (mirrors the rest of the cart-area migration). const { currency: cartCurrency } = useCurrency(); // Total units across lines, not line count — so bumping a qty moves the badge. const sumQty = (list: any[]) => Array.isArray(list) ? list.reduce((n, p) => n + (Number(p?.qty) || 0), 0) : 0; const cartItemCount = cart?.isGuest === true ? sumQty(cart?.guestCart) : sumQty(cart?.cartProducts); const cartTotal = Number( cart?.isGuest === true ? cart?.guestCartTotal : cart?.cartSubTotal || cart?.cart?.data?.sub_total, ) || 0; // City as primitives, not the whole slice — avoids re-running Header/cart effects on unrelated City changes. const cityLat = useSelector((state: any) => state.City.city?.latitude); const cityLng = useSelector((state: any) => state.City.city?.longitude); const cityStatus = useSelector((state: any) => state.City.status); const cityAddress = useSelector( (state: any) => state.City.city?.formatted_address, ); const cityDistance = useSelector((state: any) => state.City.city?.distance); const hasCity = useSelector((state: any) => state.City.city != null); const citySlug = useSelector((state: any) => state.City.city?.slug ?? null); // Zone identity (see useZoneAdopt.ts / useZoneHref.ts / useZoneUrlSync.ts) // — drives the URL's zone slug and zone-based data ONLY. It must NOT be // the Header label: the Header shows the user's selected delivery // address (cityAddress), which is a different concept from the zone that // address belongs to. selectedZoneName is used here only as a brief // fallback while cityAddress hasn't resolved yet. const selectedZoneName = useSelector( (state: any) => state?.LocationModal?.selectedZone?.name, ); // The canonical zone the user actually picked (Location.tsx) or that was // adopted from a real external URL (useZoneAdopt). fetchCity uses it to tell // a genuine "URL names a different zone" case apart from a transient window // where the URL simply hasn't caught up with a just-confirmed pick yet. const selectedZoneSlug = useSelector( (state: any) => state?.LocationModal?.selectedZone?.slug, ); useEffect(() => { if (process.env.NODE_ENV !== "production") { console.log("[ZONE TRACE] zone/location changed", { selectedZoneName, selectedZoneSlug, cityAddress, citySlug, paramsZone: zoneSlugFromUrl, }); } }, [selectedZoneName, selectedZoneSlug, cityAddress, citySlug, zoneSlugFromUrl]); const filter = useSelector((state: any) => state.ProductFilter); // Search text is URL-owned (?q=) only on /products; local state elsewhere, pushed to the URL on commit. const { setSearch: setUrlSearch } = useUrlProductFilters(); const [searchText, setSearchText] = useState(""); const language = useSelector((state: any) => state.Language); const fcmToken = useSelector((state: any) => state.User?.fcm_token); const shopMode = useSelector((state: any) => state.ShopMode.mode); const deliveryTime = useSelector((state: any) => state.ShopMode.deliveryTime); const deliveryDistance = useSelector( (state: any) => state.ShopMode.deliveryDistance, ); const fetchCartForMode = async () => { if (!user?.jwtToken) return; // Snapshot which channel this request is for, so a late response doesn't write the wrong bucket. const channel = shopMode === "quick" ? "quick" : "ecommerce"; try { const cartData = await api.getCart({ latitude: cityLat, longitude: cityLng, }); // Update currency even on an empty cart, or the previous channel's symbol stays cached. if (cartData?.data?.currency) { dispatch(setCartCurrency({ data: cartData.data.currency, channel })); } if (cartData?.status == 1) { const productsData = cartData?.data?.cart?.map((item: any) => ({ product_id: item?.id, product_variant_id: item?.variant_id, qty: item?.variants?.[0]?.quantity ?? item?.quantity, })); dispatch(setCartProducts({ data: productsData })); dispatch(setCartSubTotal({ data: cartData?.data?.sub_total })); } else { dispatch(setCartProducts({ data: [] })); dispatch(setCartSubTotal({ data: 0 })); } } catch (error) { console.log("fetchCartForMode error", error); } }; // Just sets the mode — the shopMode effect below drives the cart refetch, avoiding a race on the channel header. const handleModeToggle = (mode: string) => { dispatch(setShopMode({ mode })); }; // Currency is per-channel, only returned by the cart APIs — refetch on channel change. const fetchGuestCartCurrency = async () => { if (!(cart?.isGuest === true && cart?.guestCart?.length > 0)) return; const channel = shopMode === "quick" ? "quick" : "ecommerce"; try { const response = await api.getGuestCart({ latitude: cityLat, longitude: cityLng, variant_ids: cart.guestCart.map((p: any) => p.product_variant_id).join(","), quantities: cart.guestCart.map((p: any) => p.qty).join(","), }); if (response?.status == 1 && response?.data?.currency) { dispatch(setCartCurrency({ data: response.data.currency, channel })); } } catch (error) { console.log("guest cart currency error", error); } }; // Points the cart slice at the active channel's guest-cart bucket on channel switch. useEffect(() => { if (!shopMode) return; const channel = shopMode === "quick" ? "quick" : "ecommerce"; dispatch(setGuestChannel({ channel })); }, [shopMode, cart?.guestCartByChannel, dispatch]); useEffect(() => { if (!shopMode) return; if (user?.jwtToken) { // getCart needs latitude server-side — wait for coords or it 0-returns "latitude required". if (cityLat == null) return; fetchCartForMode(); } else { fetchGuestCartCurrency(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ shopMode, user?.jwtToken, cart?.isGuest, cart?.guestCart?.length, cityLat, cityLng, ]); // Channel config from the home_layout API (stored in the ShopMode slice): // layout_mode: "both" -> show Quick / All Shop toggle // else -> single channel, hide toggle, force that mode (quick UI) // requested: default shop mode when both are available (defaults to "quick") const layoutMode = useSelector((state: any) => state.ShopMode.layoutMode); const requestedMode = useSelector((state: any) => state.ShopMode.requested); const defaultApplied = useSelector((state: any) => state.ShopMode.defaultApplied); const layoutTheme = useSelector((state: any) => state.ShopMode.layoutTheme); // Channel toggle labels from the home_layout API, falling back to t() strings. const quickLabel = useSelector((state: any) => state.ShopMode.quickLabel) || ""; const ecommerceLabel = useSelector((state: any) => state.ShopMode.ecommerceLabel) || ""; const availableModes = useSelector((state: any) => state.ShopMode.availableModes); // Gated on hydration — availableModes is persisted, so reading it raw would flip the toggle's presence and cause a #418 mismatch. const showShopModeToggle = isHydrated && availableModes === "both"; // Device bucket for picking the right background_image_url variant below // (home_layout theme rows carry {app,tablet,web}, same breakpoints as HomeLayout.tsx). const [device, setDevice] = useState("web"); useEffect(() => { const compute = () => { const w = window.innerWidth; let next = "web"; if (w < 768) next = "app"; else if (w <= 1024) next = "tablet"; setDevice(next); }; compute(); window.addEventListener("resize", compute); return () => window.removeEventListener("resize", compute); }, []); useEffect(() => { const root = document.documentElement; if (!layoutTheme) return; if ( layoutTheme.background_theme === "image" && layoutTheme.background_image_url ) { // background_image_url may be a plain URL (legacy rows) or a per-device // object ({app,tablet,web}, current backend shape) — pick accordingly. const bgUrl = typeof layoutTheme.background_image_url === "object" ? pickDeviceImage(layoutTheme.background_image_url, device) : layoutTheme.background_image_url; if (!bgUrl) return; // Paints the header wrapper; shop-mode pills stay flat since they don't read this var. const img = `url(${bgUrl})`; root.style.setProperty("--layout-header-gradient", img); root.style.setProperty("--layout-header-gradient-continue", img); root.style.setProperty("--layout-header-bg-pos", "left top"); root.style.setProperty( "--layout-strip-bg-pos", "left calc(-1 * var(--layout-header-h))", ); root.style.setProperty("--layout-header-bg-image", "none"); root.style.removeProperty("--layout-header-bg"); // One continuous image spans header + category strip (separate DOM // subtrees), height pinned to their combined height so the strip picks // up exactly where the header's slice left off. Width fixed at 100% // would STRETCH the image to that height regardless of its own aspect // ratio (visible warping on non-matching images) — instead, size width // from the image's real aspect ratio so it covers/crops horizontally, // the way background-size:cover would on a single element. const headerEl = document.getElementById("site-header"); const combinedHeightPx = (headerEl?.getBoundingClientRect().height || 0) + (Number.parseFloat( getComputedStyle(root).getPropertyValue("--layout-strip-h"), ) || 0); const applySize = (widthPercent: number) => { const total = "max(100%, calc(var(--layout-header-h) + var(--layout-strip-h)))"; const size = `max(100%, ${widthPercent}%) ${total}`; root.style.setProperty("--layout-header-bg-size", size); root.style.setProperty("--layout-strip-bg-size", size); }; if (typeof window !== "undefined" && combinedHeightPx > 0) { const probe = new window.Image(); probe.onload = () => { if (!probe.naturalWidth || !probe.naturalHeight) return; const aspect = probe.naturalWidth / probe.naturalHeight; const viewportWidth = window.innerWidth || 1; const widthPercent = ((combinedHeightPx * aspect) / viewportWidth) * 100; applySize(widthPercent); }; probe.src = bgUrl; } // Sane default (cover-equivalent stretch) until the probe above resolves. applySize(100); } else if (layoutTheme.background_color) { // Single brand color -> vertical gradient, split as ONE continuous ramp across header + strip (no seam at the join). // Stops via lightness shift (not black/white mix, which shifts hue) to match the mobile app's gradient exactly. const base = layoutTheme.background_color; const headerDark = shiftLightness(base, -14); const headerLight = shiftLightness(base, 6); const stripEnd = shiftLightness(base, 12); const gradient = `linear-gradient(180deg, ${headerDark} 0%, ${headerLight} 100%)`; const gradientContinue = `linear-gradient(180deg, ${headerLight} 0%, ${stripEnd} 100%)`; root.style.setProperty("--layout-header-bg", base); // flat-color fallback root.style.setProperty("--layout-header-gradient", gradient); root.style.setProperty( "--layout-header-gradient-continue", gradientContinue, ); root.style.setProperty("--layout-header-bg-size", "cover"); root.style.setProperty("--layout-header-bg-pos", "center"); root.style.setProperty("--layout-strip-bg-size", "cover"); root.style.setProperty("--layout-strip-bg-pos", "center"); root.style.setProperty("--layout-header-bg-image", "none"); } if (layoutTheme.text_color) { root.style.setProperty("--layout-header-text", layoutTheme.text_color); } }, [layoutTheme, device]); useEffect(() => { if (!layoutMode && !availableModes) return; // When both channels are available, seed the default ONCE (never force again, or the toggle would snap back). if (availableModes === "both") { if (!defaultApplied) { const def = layoutMode === "allShop" || requestedMode === "allShop" ? "allShop" : "quick"; dispatch(setShopMode({ mode: def })); dispatch(setDefaultApplied()); } } else { dispatch( setShopMode({ mode: layoutMode === "allShop" ? "allShop" : "quick" }), ); } }, [layoutMode, availableModes, requestedMode, defaultApplied, dispatch]); const hasLocation = cityStatus === "fulfill"; // The URL names a zone slug (`mumbai`, a typo, a dead shared link) but // City.city was never updated to match it — fetchCity refuses to dispatch // default_city as a substitute once a URL zone has failed to resolve (see // fetchCity above), so citySlug here is either null or still whatever the // PREVIOUS valid page left behind. Either way, showing cityAddress/ // default_city.name for the label would misleadingly claim a location the // current (invalid) URL doesn't actually have — the page body is // rendering its own 404 for this exact URL at the same time. // A channel toggle (Quick <-> Shop all) swaps the URL to that channel's zone // record for the SAME city (bhuj-quick <-> bhuj-ecommerce) without re-seeding // City — so citySlug legitimately keeps naming the other channel's zone and // would look "invalid" here, blanking a perfectly good address to "Loading...". // selectedZone is the canonical pick (Location.tsx on confirm, useZoneAdopt // for external URLs): if the URL matches it, the URL resolved fine and this // is a channel difference, not a dead link. const hasInvalidUrlZone = isHydrated && !!zoneSlugFromUrl && zoneSlugFromUrl !== citySlug && zoneSlugFromUrl !== selectedZoneSlug; const settingsDeliveryTime = setting?.setting?.web_settings?.delivery_time || setting?.setting?.delivery_time || 10; // deliveryTime (home_layout) is a ready-made string with its own unit(s) — render as-is, don't strip to "first number". const quickDeliveryTime = deliveryTime || settingsDeliveryTime; const quickDeliveryHasUnit = !!deliveryTime; const showQuickDelivery = shopMode === "quick" && hasLocation; // Backend sends distance pre-formatted with unit (e.g. "7.1 km") — hide when missing or zero. const rawDistance = deliveryDistance || cityDistance; const distanceKm = rawDistance && !/^0(\.0+)?\s*km/i.test(String(rawDistance).trim()) ? String(rawDistance).trim() : null; // Hydration-safe: react-responsive has no matchMedia on the server, avoids a #418 mismatch on first client render. const isMobile = useHydratedMediaQuery("(max-width: 765px)"); const [showCart, setShowCart] = useState(false); const [showLogin, setShowLogin] = useState(false); const [showLogout, setShowLogout] = useState(false); const [mobileActiveKey, setMobileActiveKey] = useState(1); const [selectedTab, setSelectedTab] = useState("profile"); const [showProfile, setShowProfile] = useState(false); const [profileOpen, setProfileOpen] = useState(false); // In Redux so the footer's country selector can open it too. const showLocation = useSelector( (state: any) => state?.LocationModal?.showLocation, ); const setShowLocation = useCallback( (value: boolean) => dispatch(setShowLocationAction(!!value)), [dispatch], ); const [mobileSearch, setMobileSearch] = useState(false); const typingTimeoutRef = useRef | null>(null); const [isSuggLoading, setIsSuggLoading] = useState(false); const [isSuggError, setIsSuggError] = useState(false); const [mobileNav, setMobileNav] = useState(false); // Gates presence-only blocks (social links, support number) that depend on client-filled redux, to avoid a hydration mismatch. const [mounted, setMounted] = useState(false); useEffect(() => { // intentional: flips mounted flag exactly once after mount, see doc // comment above (gates hydration-sensitive blocks). // eslint-disable-next-line react-hooks/set-state-in-effect setMounted(true); }, []); // Seeds the search box from ?q= when landing on /products directly. Reads // window.location.search directly (not useSearchParams()) — this is the // ONLY place Header needed search params, and only inside an effect, so // it never needed to be a render-time value. useSearchParams() would force // Next to require a Suspense boundary around all of Header for static // prerendering, and a CSR bailout on that boundary blanks out real page // content nested alongside it (see Providers.tsx/Layout.tsx history). useEffect(() => { if (pathname === "/products") { const q = new URLSearchParams(window.location.search).get("q"); // eslint-disable-next-line react-hooks/set-state-in-effect -- seeds local input state from the URL on navigation to /products setSearchText(typeof q === "string" ? q : ""); } }, [pathname]); useEffect(() => { if (pathname != "/checkout") { dispatch(clearCheckout()); } }, [pathname, dispatch]); useEffect(() => { // if mobile screen is dragged to desktop screen close the mobile search if (isMobile === false && mobileSearch === true) { // intentional: closes the mobile search overlay when the viewport // crosses to desktop — a response to an external resize, not derivable // during render. // eslint-disable-next-line react-hooks/set-state-in-effect setMobileSearch(false); } // mobileSearch is read only to guard the setState call; including it would re-fire this effect on every search toggle instead of only on isMobile changes. // eslint-disable-next-line react-hooks/exhaustive-deps }, [isMobile]); // Seeds City from a shared zone URL slug (mirrors server resolveZoneBySlug). Returns true if it dispatched setCity. // `mySeq` is the request stamp this call started with — checked immediately // before the dispatch so a call superseded by a newer zone pick (Location.tsx) // or a newer fetchCity run drops its write instead of reverting the zone. const seedCityFromZoneSlug = async (slug: string, mySeq: number) => { const zonesRes = await api.getZones(); const zones = zonesRes?.data || []; const zone = zones.find((z: any) => z?.slug === slug); if (!zone) return false; const center = getPolygonCenter(zone.polygon_boundary); if (!center) return false; const response = await api.getZone({ latitude: center.lat, longitude: center.lng, skipChannel: true, }); if (response?.status !== 1) return false; // getZone has no formatted_address — reverse-geocode the zone center for // a real address string (same as Location.tsx's zone-chip flow), so the // Header shows an actual location instead of the zone name standing in // for one. zone.name is the last-resort fallback only if geocoding fails. let resolvedAddress = response.data?.formatted_address; if (!resolvedAddress) { try { const geo = await reverseGeocode(center.lat, center.lng); resolvedAddress = geo?.formatted_address || zone.name; } catch (err) { resolvedAddress = zone.name; } } if (mySeq !== currentZoneRequestSeq()) return true; // superseded — a newer zone request already committed dispatch( setCity({ data: { ...response.data, formatted_address: resolvedAddress, latitude: center.lat, longitude: center.lng, }, }), ); return true; }; const fetchingCityRef = useRef(false); const fetchCity = async () => { // A persisted city from an earlier session/zone must not block re-seeding // when the URL names a DIFFERENT zone — otherwise a stale city with no // matching zone (or malformed lat/lng) leaves latitude-gated queries // (product listing, home layout) stuck loading forever, since hasCity // being true skips this whole function. // Re-seeding from the URL is only correct when the URL is the authority on // which zone we're in — a shared/typed link, a refresh, browser back. Right // after a manual pick (Location.tsx) the URL briefly still names the OLD // zone while City/selectedZone already hold the new one; seeding from it // then overwrites the user's fresh choice with the zone they just left, // which flips City back, re-fires home_layout, and makes useZoneUrlSync // push the URL back too — a self-sustaining Bhuj<->Ahmedabad oscillation. // selectedZone is the canonical pick (set synchronously on confirm, and by // useZoneAdopt for genuinely external URLs), so a URL that disagrees with // it is a URL that hasn't caught up — not a zone change to follow. const urlIsAuthoritative = !selectedZoneSlug || zoneSlugFromUrl === selectedZoneSlug; const zoneMismatch = !!zoneSlugFromUrl && zoneSlugFromUrl !== citySlug && urlIsAuthoritative; if ((hasCity && !zoneMismatch) || fetchingCityRef.current) return; fetchingCityRef.current = true; const mySeq = nextZoneRequestSeq(); try { // A shared zone URL wins over default_city, so the link opens in the zone it points at. if (zoneSlugFromUrl) { const seeded = await seedCityFromZoneSlug(zoneSlugFromUrl, mySeq); if (seeded) return; // The URL names a zone slug that does NOT resolve — a genuinely // invalid/dead zone URL, not "no zone specified". Falling through to // default_city here would silently show a valid-looking location // (e.g. the admin's default city) in the Header while the page body // is rendering its own 404 for this exact URL — the two would // visibly disagree about whether this is a real, servable location. // No city dispatched, and — since there's no automatic recovery path // from here — prompt the user to pick a location instead of leaving // the Header stuck on "Loading..." forever. setShowLocation(true); return; } if (setting?.setting?.default_city) { const latitude = Number.parseFloat( setting.setting.default_city?.latitude, ); const longitude = Number.parseFloat( setting.setting.default_city?.longitude, ); const response = await api.getZone({ latitude: latitude, longitude: longitude, }); if (mySeq !== currentZoneRequestSeq()) return; // superseded — a newer zone request already committed if (response.status === 1) { dispatch( setCity({ data: { ...response.data, latitude, longitude } }), ); } else { // default_city isn't a serviceable zone — prompt for a location instead of stalling on "Loading...". setShowLocation(true); } } else if (setting?.setting && !hasCity) { // No default_city and no saved city — same dead end, same fix. setShowLocation(true); } } catch (error) { console.log("error", error); } finally { fetchingCityRef.current = false; } }; useEffect(() => { fetchCity(); // Depends on the specific fields fetchCity reads, not the whole setting object (which changes reference on every rehydrate/refetch). // eslint-disable-next-line react-hooks/exhaustive-deps }, [!!setting?.setting, defaultCityLat, defaultCityLng, zoneSlugFromUrl, citySlug, selectedZoneSlug]); useEffect(() => { // Syncs bottom-nav highlight with the current route. const path = pathname || ""; if (path.includes("/wishlist")) { // intentional: derives the active bottom-nav key from the route on // every navigation — an external signal (pathname), not render state. // eslint-disable-next-line react-hooks/set-state-in-effect setMobileActiveKey(3); // Favourites } else if (path.includes("/profile")) { setMobileActiveKey(4); // Profile } else if (path.startsWith("/categories")) { setMobileActiveKey(2); // Categories } else if (path === "/") { setMobileActiveKey(1); // Home } }, [pathname]); const handleLanguageChange = async (language: any) => { try { const response = await api.getSystemLanguages({ id: language?.id, isDefault: 0, systemType: 3, }); if (response.status == 1) { dispatch(setSelectedLanguage({ data: response?.data })); // False positive: this writes a DOM element's `dir` property from inside // an event handler (onSelect below), not during render — the same pattern // used unflagged in AppContent.tsx and Layout.tsx from inside effects. // eslint-disable-next-line react-hooks/immutability document.documentElement.dir = response?.data?.type; // Same user action as the URL move, so the language segment and Redux stay in step. switchLanguageUrl(response?.data?.code); // Auth-gated (401 without a JWT); isolated try so a token failure doesn't break the language switch. if (user?.jwtToken && fcmToken) { try { await api.updateFcmToken({ langaugeId: response?.data?.admin_lang_id_for_fcm, fcmToken, }); } catch (fcmErr: any) { console.log("FCM token update failed:", fcmErr?.message); } } } } catch (error) { console.log("error", error); } }; const handleCartOpen = () => { if (pathname == "/checkout") { router.push(zoneHref("/cart")); } else { setShowCart(true); } }; const handleLoginOpen = () => { setShowLogin(true); }; const handleOpenLocation = () => { setShowLocation(true); }; const handleHomeClick = () => { setMobileActiveKey(1); // Home is a zone route (/{zone} is the zone home) — keep the zone and // language rather than dropping to the bare, location-less home. router.push(zoneHref("/")); }; const handleCategoriesClick = () => { setMobileActiveKey(2); dispatch(setCategoryBreadcrumb({ data: [] })); router.push(zoneHref("/categories")); }; const handleFavouritesClick = () => { setMobileActiveKey(3); if (user?.jwtToken) { router.push(zoneHref("/profile/wishlist")); } else { setShowLogin(true); } }; const handleProfileClick = () => { setMobileActiveKey(4); if (user?.jwtToken) { setShowProfile(true); } else { setShowLogin(true); } }; const handleSearchData = async (searchValue: string) => { setIsSuggLoading(true); setIsSuggError(false); try { const response = await api.getProductByFilter({ latitude: cityLat, longitude: cityLng, filters: { search: searchValue, category_id: filter?.searchedCategory, }, }); dispatch(setProductBySearch({ data: response?.data })); setIsSuggLoading(false); } catch (error: any) { setIsSuggLoading(false); setIsSuggError(true); console.log("Error", error?.message); } }; const handleSearch = (e: React.ChangeEvent) => { const value = e.target.value; setSearchText(value); if (typingTimeoutRef.current) { clearTimeout(typingTimeoutRef.current); } if (value.trim() === "") { dispatch(setProductBySearch({ data: [] })); if (pathname === "/products") setUrlSearch(null); setIsSuggError(false); return; } setIsSuggLoading(true); typingTimeoutRef.current = setTimeout(() => { handleSearchData(value); // Same 400ms settle as the suggestion fetch — avoids a replace on every keystroke. if (pathname === "/products") setUrlSearch(value); }, 400); }; const handleSearchRetry = () => { if (searchText?.trim()) { handleSearchData(searchText); } }; const handleMobileSearch = () => { setMobileSearch(!mobileSearch); }; const handleMobileNav = () => { setMobileNav(!mobileNav); }; const renderShopModeToggle = () => { // No track background (header gradient shows through) — each half carries its own pill. return (
); }; return ( <> {/* ═══════════ Modals & Drawers ═══════════ */} {t("search")} { setSearchText(""); setMobileSearch(false); }} mobileSearch={mobileSearch} setMobileSearch={setMobileSearch} handleSearch={handleSearch} /> {/* Each overlay below is render-gated on its own "is open" flag, not just lazily imported. next/dynamic starts fetching the chunk as soon as the component is RENDERED, so mounting them unconditionally would pull every chunk on first paint and defeat the split — the gate is what keeps them off the critical path until the user opens one. They hold no state across close (it all lives in Redux/props), so unmounting is behaviour-preserving. */} {mobileNav && ( )} {showCart && ( )} {showLogin && ( )} {showLocation && ( )} {showLogout && ( )} {/* ═══════════ Mobile Bottom Navigation ═══════════ */} {/* `user.jwtToken` is persisted auth — absent on the server, present on the first client paint for a logged-in user. It drives the column count, the Favourites tab's PRESENCE, and the last tab's label, so reading it raw flips the whole nav structure and discards the tree (#418). Gate on `mounted` so the first client render matches the server (logged-out layout); the logged-in nav appears on the next render. */} {showProfile && ( )} ); }; export default Header;