// TAHAANN storefront chrome — light header, cart drawer, toast, footer const { IconButton, Input, Button } = window.TAHANDesignSystem_a07997; // Icon-only brand mark, now used solely by the mobile slide-out drawer — the // header and footer carry the full lockup. The full-colour glyph replaces the // red/navy duotone; at 36px in a narrow panel the letterform reads better than // the wide lockup would. const Mark = ({ h = 66, onDark = false }) => ( TAHAANN ); const Ico = ({ d, size = 20, stroke = "currentColor", fill = "none", sw = 1.75 }) => ( {d} ); const IHeart = ; const IBag = <>; const IUser = <>; const ISearch = <>; const ITruck = <>; const IPhone = ; const IFacebook = ; const IInstagram = <>; const IYouTube = <>; // Accepted payment rails shown in the sub-footer. Third entry is the artwork: // each logo is trimmed to its ink and centred on one common transparent canvas // (192x64), so a single CSS height gives the whole row even sizing and spacing. // A rail with no artwork is simply left out of the row. const PAY_MARKS = [["Visa", "visa", "tahan/assets/pay-visa.png"], ["Mastercard", "mastercard", "tahan/assets/pay-mastercard.png"], ["PhonePe", "phonepe", "tahan/assets/pay-phonepe.png"], ["Google Pay", "gpay", "tahan/assets/pay-gpay.png"]]; const CART_KEY = "tahan-cart-v1"; function loadCart() { try { return JSON.parse(localStorage.getItem(CART_KEY)) || {}; } catch (e) { return {}; } } function saveCart(c) { try { localStorage.setItem(CART_KEY, JSON.stringify(c)); } catch (e) {} } function useCart() { const [cart, setCart] = React.useState(loadCart); React.useEffect(() => { saveCart(cart); }, [cart]); return [cart, setCart]; } const WISH_KEY = "tahan-wishlist-v1"; function loadWish() { try { return JSON.parse(localStorage.getItem(WISH_KEY)) || {}; } catch (e) { return {}; } } function saveWish(w) { try { localStorage.setItem(WISH_KEY, JSON.stringify(w)); } catch (e) {} } function useWishlist() { const [wish, setWish] = React.useState(loadWish); React.useEffect(() => { saveWish(wish); }, [wish]); return [wish, setWish]; } function Badgeable({ count, children }) { return ( {children} {count > 0 && ( {count} )} ); } function ActionBtn({ icon, label, count, onClick }) { return ( ); } const IMenu = <>; const IClose = <>; const IHome = <>; const IMail = <>; const IPin = <>; const IGrid = <>; // Fixed bottom tab bar for phones. Sits below Bootstrap's md alongside the // collapsed header, and reuses the cart drawer and category drawer already // wired into Header, so no page needs new props. function MobileTabBar({ page, cartCount, onCart, onCategory }) { const tab = (active) => ({ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "4px", padding: "9px 0 7px", background: "none", border: "none", cursor: "pointer", textDecoration: "none", fontFamily: "var(--font-ui)", fontSize: "10.5px", fontWeight: 600, color: active ? "var(--coral-deep)" : "var(--text-muted)", }); return ( ); } function MobileDrawer({ open, onClose, nav, page, addToHome, addToHomeStyle }) { // Store details for the drawer's foot, from the admin's Contact page. The // nav list above takes the free space, so this block sits at the bottom of // the panel. Each line is omitted when the admin has not filled it in. const contact = (window.TAHAN_DATA && window.TAHAN_DATA.contact) || null; const emails = contact ? [contact.email1, contact.email2].filter(Boolean) : []; const hasContact = !!contact && !!(contact.address.length || contact.phone || contact.whatsapp || emails.length); const line = { display: "flex", alignItems: "flex-start", gap: "9px", color: "var(--navy)", textDecoration: "none", lineHeight: 1.5 }; const icon = { flexShrink: 0, marginTop: "1px", color: "var(--text-muted)", display: "flex" }; return ( <>
); } const ANNOUNCEMENTS = [ "Free Shipping on orders above ₹499", "Easy Returns — Hassle Free", "Secure Packaging — Safe Delivery", "Support Bengali Makers — Read, Taste & Wear", ]; // The marquee needs @keyframes, which inline styles can't express, and this // chrome is shared by every page — injecting the rule once here beats editing // eleven HTML files. Paused under prefers-reduced-motion, where an endlessly // moving strip is exactly what the setting asks us not to do. function ensureChromeStyles() { if (document.getElementById("tahan-chrome-style")) return; const el = document.createElement("style"); el.id = "tahan-chrome-style"; el.textContent = "@keyframes tahanMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}" + ".tahan-marquee-track{animation:tahanMarquee var(--tahan-marquee-dur,26s) linear infinite}" + "@media(prefers-reduced-motion:reduce){.tahan-marquee-track{animation:none}}" + // Payment marks: even spacing, one common height, no boxes or rules. The // width cap stops a long mark (PhonePe) dwarfing a stacked one (GPay), and // object-fit keeps every logo in proportion inside that cap. ".tahan-payrow{display:flex;align-items:center;flex-wrap:wrap;gap:14px}" + ".tahan-pay-mark{height:26px;width:auto;object-fit:contain;display:block;flex-shrink:0}" + "@media(max-width:575.98px){.tahan-payrow{gap:10px}.tahan-pay-mark{height:22px}}"; document.head.appendChild(el); } // Mobile gets a continuous horizontal scroll instead of the vertical rotator, // whose fixed-height lines truncated every message with an ellipsis on a narrow // strip. The list is rendered twice and shifted by exactly -50%, so the second // copy is in place the moment the first scrolls out and the loop is seamless. function AnnouncementMarquee({ messages }) { React.useEffect(() => { ensureChromeStyles(); }, []); // Roughly constant reading speed regardless of how many messages there are. const seconds = Math.max(18, Math.round(messages.join("").length / 3.2)); const run = messages.concat(messages); return ( {run.map((msg, i) => ( {msg} • ))} ); } function AnnouncementTicker({ messages, interval = 3200 }) { const LINE_H = 20; const loop = React.useMemo(() => [...messages, messages[0]], [messages]); const [index, setIndex] = React.useState(0); const [instant, setInstant] = React.useState(false); React.useEffect(() => { const t = setInterval(() => setIndex((i) => i + 1), interval); return () => clearInterval(t); }, [interval]); React.useEffect(() => { if (index !== loop.length - 1) return; const t = setTimeout(() => { setInstant(true); setIndex(0); requestAnimationFrame(() => requestAnimationFrame(() => setInstant(false))); }, 520); return () => clearTimeout(t); }, [index, loop.length]); return ( {loop.map((msg, i) => ( {msg} ))} ); } // `inPanel` is the phone version, opened by the header's search button. It is // the same box with the same suggestions — only the class differs, because // .tahan-header-search is display:none below 767.98px for the inline pill. function SearchBox({ inPanel }) { const data = window.useTahanData ? window.useTahanData() : window.TAHAN_DATA; const [query, setQuery] = React.useState(""); const [suggestions, setSuggestions] = React.useState([]); const [showSuggestions, setShowSuggestions] = React.useState(false); const inputRef = React.useRef(null); React.useEffect(() => { if (inPanel && inputRef.current) inputRef.current.focus(); }, [inPanel]); const handleSearch = (e) => { const value = e.target.value; setQuery(value); if (value.trim().length === 0) { setSuggestions([]); setShowSuggestions(false); return; } const catalog = (data && data.catalog) || []; const filtered = catalog .filter((item) => item.title && item.title.toLowerCase().includes(value.toLowerCase())) .slice(0, 5); setSuggestions(filtered); setShowSuggestions(true); }; const handleSuggestionClick = (itemId) => { window.location.href = `Product?id=${itemId}`; }; return (
{showSuggestions && suggestions.length > 0 && (
{suggestions.map((item) => ( ))}
)}
); } // The announcement strip swaps behaviour by viewport, and an inline style // cannot hold a media query — so the breakpoint is read here instead. 767.98px // is the same phone breakpoint the stylesheets already use. function useIsMobileBar() { const q = "(max-width: 767.98px)"; const [is, setIs] = React.useState(() => window.matchMedia(q).matches); React.useEffect(() => { const m = window.matchMedia(q); const on = (e) => setIs(e.matches); if (m.addEventListener) m.addEventListener("change", on); else m.addListener(on); return () => { if (m.removeEventListener) m.removeEventListener("change", on); else m.removeListener(on); }; }, []); return is; } // "Add TAHAANN to Home Screen": each page's keeps the browser's // add-to-home-screen event (window.__tahanInstallEvent) and announces it with // "tahan-installable". The header button appears only while that event is // available and TAHAANN isn't already opened from the home screen; tapping it // hands over to the browser's own native flow. function useHomeScreenPrompt() { const onHomeScreen = () => { try { return window.matchMedia("(display-mode: standalone)").matches || window.matchMedia("(display-mode: fullscreen)").matches || window.matchMedia("(display-mode: minimal-ui)").matches || window.navigator.standalone === true; } catch (e) { return false; } }; const [available, setAvailable] = React.useState(() => !!window.__tahanInstallEvent && !onHomeScreen()); React.useEffect(() => { const onReady = () => setAvailable(!!window.__tahanInstallEvent && !onHomeScreen()); const onAdded = () => { window.__tahanInstallEvent = null; setAvailable(false); }; window.addEventListener("tahan-installable", onReady); window.addEventListener("appinstalled", onAdded); onReady(); return () => { window.removeEventListener("tahan-installable", onReady); window.removeEventListener("appinstalled", onAdded); }; }, []); const add = () => { const ev = window.__tahanInstallEvent; window.__tahanInstallEvent = null; // the native prompt can be used once setAvailable(false); if (ev && typeof ev.prompt === "function") ev.prompt(); }; return [available, add]; } function Header({ cartCount, wishCount, onCart, onWish }) { const isMobileBar = useIsMobileBar(); const [canAddToHome, addToHome] = useHomeScreenPrompt(); const addToHomeStyle = { background: "transparent", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-pill)", padding: "9px 16px", cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: "13px", fontWeight: 700, color: "var(--navy)", whiteSpace: "nowrap" }; const page = window.TAHAN_PAGE || "Home"; const catData = window.useTahanData ? window.useTahanData() : window.TAHAN_DATA; const cats = (catData && catData.groups) || []; // Top-bar socials come from the admin's Contact details, same as the footer's. const topSocial = (catData && catData.contact) || {}; const nav = [["Home", false, null, "Home.html"], ...cats.map((c) => [c.label, false, null, `Shop?cat=${c.key}`])]; const [drawerOpen, setDrawerOpen] = React.useState(false); const [searchOpen, setSearchOpen] = React.useState(false); const [isAuth, setIsAuth] = React.useState(false); const [authLoading, setAuthLoading] = React.useState(true); React.useEffect(() => { if (!window.TAHAN_AUTH_SUBSCRIBE) return; const unsub = window.TAHAN_AUTH_SUBSCRIBE(function (user, loading) { setIsAuth(user != null); setAuthLoading(loading); }); return unsub; }, []); const logout = async (e) => { e.preventDefault(); if (window.TAHAN_SIGN_OUT) { await window.TAHAN_SIGN_OUT(); } else { try { if (window.TAHAN_AUTH) { await window.TAHAN_AUTH.signOut(); } } catch (err) { console.error("Firebase sign out failed:", err); } try { localStorage.removeItem("tahan_session"); localStorage.removeItem("tahan-profile-v1"); localStorage.removeItem("tahan-addresses-v1"); } catch (e) {} } window.location.href = "Login.html"; }; return ( <>
{isMobileBar ? : } {topSocial.phone ? {isMobileBar ? null : topSocial.phone} : null} {topSocial.facebook ? : null} {topSocial.instagram ? : null} {topSocial.youtube ? : null}
{/* Full lockup: the mark, wordmark and tagline are all in the artwork, so the typeset "TAHAANN / Tales of Bengal" that used to sit beside the icon would now be a duplicate. */} TAHAANN — Tales of Bengal
{/* Desktop: beside the header actions. Phones get it in the menu drawer instead (MobileDrawer), as it won't fit here. */} {!isMobileBar && canAddToHome && } {/* Phones only: the inline pill above is hidden by CSS below 767.98px, so this opens the same search in a strip under the header. Desktop keeps the pill itself and needs no button. */} {isMobileBar && setSearchOpen((v) => !v)} />} { window.location.href = "Wishlist.html"; })} /> {/* Desktop only: phones reach the same places from the bottom tab bar's Profile tab, so the account menu is dropped there rather than duplicating it. Same breakpoint as the tab bar (767.98px). */} {!isMobileBar && (
{!authLoading && isAuth ? ( [["Profile", "Profile.html", false], ["Orders", "Orders.html", false], ["Log out", "Login.html", true]].map(([m, href, isLogout]) => ( isLogout ? ( ) : ( {m} ) )) ) : ( Log in )}
)}
{/* Phones only — the strip exists solely because the inline pill is hidden below 767.98px. The × closes it again, for people who opened it by accident or are done searching. */} {isMobileBar && searchOpen && (
)}
setDrawerOpen(false)} nav={nav} page={page} addToHome={isMobileBar && canAddToHome ? addToHome : null} addToHomeStyle={addToHomeStyle} /> setDrawerOpen(true)} /> ); } function CartDrawer({ open, onClose, items, data, inc, dec, remove }) { const list = Object.entries(items).map(([id, qty]) => ({ book: (data.catalog || data.books).find((b) => b.id === id), qty })).filter((x) => x.book); const subtotal = list.reduce((s, x) => s + x.book.price * x.qty, 0); const toFree = Math.max(0, 499 - subtotal); const totalQty = list.reduce((s, x) => s + x.qty, 0); return ( <>
); } const qtyBtn = { background: "none", border: "none", cursor: "pointer", width: "30px", height: "30px", fontSize: "16px", color: "var(--text-body)", lineHeight: 1 }; function Toast({ msg }) { return (
✓{msg}
); } function NewsletterBand() { const [email, setEmail] = React.useState(""); const [done, setDone] = React.useState(false); return (

Stay Updated with Our Stories & New Releases

{done ? (
✓ Thank you — a welcome note is on its way.
) : (
{ e.preventDefault(); if (email) setDone(true); }} style={{ display: "flex", gap: "0", borderRadius: "var(--radius-pill)", overflow: "hidden" }}> setEmail(e.target.value)} type="email" required placeholder="Enter your email address" style={{ width: "260px", maxWidth: "56vw", border: "none", outline: "none", padding: "14px 20px", fontFamily: "var(--font-ui)", fontSize: "14px", background: "#FFFFFF", color: "var(--text-body)" }} />
)}
); } // WhatsApp glyph — filled, so it is drawn with fill and no stroke. const IWhatsApp = ; // Floating WhatsApp button, pinned bottom-right on every page that has the // footer. The number is the admin's WhatsApp field (the `contact` doc), so no // button shows until one is saved. On phones it lifts clear of the 64px bottom // tab bar and shrinks a little; the breakpoint is the tab bar's own (767.98px). function WhatsAppFab() { const isMobileBar = useIsMobileBar(); const contact = (window.TAHAN_DATA && window.TAHAN_DATA.contact) || null; const digits = contact && contact.whatsapp ? contact.whatsapp.replace(/\D/g, "") : ""; if (!digits) return null; const size = isMobileBar ? 52 : 58; return ( { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 10px 24px rgba(11,31,58,0.28)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 6px 18px rgba(11,31,58,0.22)"; }} > ); } function Footer() { // Footer categories come from the live Firestore taxonomy, so they can never drift // from the catalogue, and each links into the Shop filter it actually maps to. // Firestore lands after first paint and mutates TAHAN_DATA in place, so re-render // on the data event rather than relying on a changed object reference. const [, bumpFooter] = React.useReducer((n) => n + 1, 0); // The shared stylesheet also carries the payment-row rules, and the marquee // that used to inject it renders on phones only — so the footer asks for it // too, or the marks would be unstyled on desktop. React.useEffect(function () { ensureChromeStyles(); }, []); React.useEffect(function () { var h = function () { bumpFooter(); }; window.addEventListener("tahan-data", h); return function () { window.removeEventListener("tahan-data", h); }; }, []); const catList = ((window.TAHAN_DATA && window.TAHAN_DATA.categories) || []).map(function (c) { return { href: "Shop?cat=" + c.id, label: c.label, bn: c.bn }; }); // FAQ and Track Your Order point at the pages that actually hold them: the // questions live in the Home page's "Frequently Asked" section (there is no // separate FAQ page), and order tracking is the Orders page. The rest have no // page yet, so linkCol leaves them inert as before. const support = [{ label: "FAQ", href: "Home.html#sec-faq" }, "Shipping & Delivery", { label: "Refund & Cancellation Policy", href: "Refund.html" }, { label: "Terms & Conditions", href: "Terms.html" }, { label: "Privacy Policy", href: "Privacy.html" }, { label: "Track Your Order", href: "Orders.html" }]; const about = ["About Tahaann", "Blog", "Contact Us"]; const linkCol = (title, items) => (
{title}
{items.map((i) => { const obj = i && typeof i === "object"; const label = obj ? i.label : i; const href = obj ? i.href : i === "Contact Us" ? "Contact" : i === "About Tahaann" ? "About" : i === "Blog" ? "Blog.html" : "#"; const inert = href === "#"; return ( e.preventDefault() : undefined} style={{ color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontSize: "13px", textDecoration: "none" }}> {obj && i.bn ? <>{i.bn} ({label}) : label} ); })}
); // Facebook, Instagram and YouTube only. Paired with a name so each link gets // a real accessible label instead of four identical "Social link" entries. // The addresses come from the admin's Contact details (the `contact` doc), // so an icon shows only once that profile has a link saved. const contact = (window.TAHAN_DATA && window.TAHAN_DATA.contact) || null; const social = [ ["Facebook", <>, contact && contact.facebook], ["Instagram", <>, contact && contact.instagram], ["YouTube", <>, contact && contact.youtube], ].filter(function (s) { return s[2]; }); return ( ); } Object.assign(window, { Header, Footer, CartDrawer, Toast, Badgeable, NewsletterBand, Mark, Ico, useCart, loadCart, saveCart, useWishlist, loadWish, saveWish });