)}
);
}
function FilterChip({ label, on, onClick }) {
return (
);
}
const fmtDate = (s) => {
const d = new Date(s);
return isNaN(d.getTime()) ? s : d.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
};
function CouponCard({ c }) {
const [copied, setCopied] = React.useState(false);
const copy = () => {
try {
navigator.clipboard.writeText(c.code);
setCopied(true);
setTimeout(() => setCopied(false), 1600);
} catch (e) { /* clipboard unavailable — the code stays visible to type */ }
};
const save = c.type === "percent" ? `Save ${c.value}%` : `Save ₹${Number(c.value).toLocaleString("en-IN")}`;
const terms = [c.min ? `on orders above ₹${c.min.toLocaleString("en-IN")}` : "on any order", c.freeShip ? "+ free shipping" : ""].filter(Boolean).join(" ");
return (
{save}{terms}
{c.expires &&
Valid till {fmtDate(c.expires)}
}
{c.code}
);
}
// Offers band — renders whatever live coupons the catalogue carries. Renders
// nothing at all when there are none, so the homepage never shows an empty promo.
function OffersBand({ data }) {
const today = new Date().setHours(0, 0, 0, 0);
const coupons = ((data && data.coupons) || []).filter((c) => {
// Only the home page is gated on this flag — checkout still resolves and
// lists every live code, so an unadvertised coupon stays redeemable.
if (c.showOnHomepage !== true) return false;
if (!c.code || c.status === "expired" || c.status === "disabled") return false;
// Never advertise a code the checkout would turn away.
const ends = c.expires ? new Date(c.expires).setHours(0, 0, 0, 0) : NaN;
return isNaN(ends) || ends >= today;
});
if (!coupons.length) return null;
return (
Offers
Save on Your Order
Copy a code and enter it at checkout — the discount is applied to your bag before you pay.
);
}
// Full-width banner carousel that sits below the Books shelf.
function CollectionBanner({ data }) {
// Slides are the Advertisements collection (db.js -> TAHAN_DATA.ads). The
// frame, ratio, autoplay, hover-pause and dots are unchanged from the
// collection carousel this replaced; only the source of the slides moved.
const items = (data && data.ads) || [];
const [i, setI] = React.useState(0);
const [paused, setPaused] = React.useState(false);
React.useEffect(() => {
if (paused || items.length < 2) return;
const t = setTimeout(() => setI((n) => (n + 1) % items.length), 6500);
return () => clearTimeout(t);
}, [i, paused, items.length]);
// An out-of-range index would blank the carousel if an ad is removed while
// the page is open, so clamp instead of trusting the previous position.
React.useEffect(() => { if (i >= items.length) setI(0); }, [items.length, i]);
if (!items.length) return null;
const c = items[i % items.length];
return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{items.length > 1 && (
{items.map((s, n) => (
))}
)}
);
}
function App() {
const data = window.useTahanData ? window.useTahanData() : window.TAHAN_DATA;
const [saved, setSaved] = useWishlist();
const [cart, setCart] = useCart();
const [drawer, setDrawer] = React.useState(false);
const [genre, setGenre] = React.useState(null);
const [toast, setToast] = React.useState("");
const toastTimer = React.useRef();
const flash = (msg) => { setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(""), 2200); };
const find = (id) => data.catalog.find((x) => x.id === id);
const toggleSave = (id) => setSaved((s) => { const n = { ...s }; if (n[id]) { delete n[id]; flash("Removed from wishlist"); } else { n[id] = true; flash("Saved to your wishlist"); } return n; });
const addToCart = (id) => { setCart((c) => ({ ...c, [id]: (c[id] || 0) + 1 })); flash(`Added "${find(id).title}" to your bag`); };
const inc = (id) => setCart((c) => ({ ...c, [id]: (c[id] || 0) + 1 }));
const dec = (id) => setCart((c) => { const n = { ...c }; n[id] = (n[id] || 1) - 1; if (n[id] <= 0) delete n[id]; return n; });
const remove = (id) => setCart((c) => { const n = { ...c }; delete n[id]; return n; });
const cartCount = Object.values(cart).reduce((s, q) => s + q, 0);
const wishCount = Object.keys(saved).length;
const rowProps = { saved, toggleSave, addToCart };
// Shelves follow the database categories — one section per category that has stock.
const shelves = (data.groups || []).filter((g) => g.key !== "books" || !data.books.length).map((g) => ({
key: g.key, label: g.label, items: data.products.filter((p) => p.cat === g.key),
})).filter((g) => g.items.length);
// The offers band sits after the Darjeeling Tea shelf. Live category keys are
// slugified ("darjeeling-tea") while the seed uses "tea", so match on either;
// with no tea shelf at all it falls in after the last one.
const teaIdx = shelves.findIndex((g) => /tea/i.test(g.key) || /tea/i.test(g.label || ""));
const bandAfter = teaIdx >= 0 ? teaIdx : shelves.length - 1;
// The collection banner follows the Books shelf, matched the same tolerant way.
const booksIdx = shelves.findIndex((g) => /book/i.test(g.key) || /book/i.test(g.label || ""));
return (
);
}
function HomeFaq({ data }) {
// Questions and answers come only from Firestore, via the existing realtime layer
// in tahan/db.js (which already listens to both `faq` and `faqs` and writes the
// merged, visibility-filtered, order-sorted list to TAHAN_DATA.faqs). There is no
// hardcoded fallback: showing invented questions when the real ones are missing
// would put words in the shop's mouth.
const faqs = (data && data.faqs) || [];
const loading = !window.TAHAN_DATA_SOURCE;
const [open, setOpen] = React.useState(0);
// The footer's FAQ link points here (Home.html#sec-faq). Firestore lands after
// first paint, so the browser's own jump to the anchor happens while this
// section is still a skeleton — scroll once the questions are actually in.
const faqRef = React.useRef(null);
const jumped = React.useRef(false);
React.useEffect(() => {
if (jumped.current || !faqs.length) return;
if (window.location.hash !== "#sec-faq") return;
jumped.current = true;
if (faqRef.current) faqRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
}, [faqs.length]);
if (loading) {
return (
Good to know
Frequently Asked
Shipping, returns and the things people ask before their first order.
{[0, 1, 2, 3].map((n) => (
))}
);
}
// Nothing published \u2014 drop the section rather than show an empty shell.
if (!faqs.length) return null;
return (
Good to know
Frequently Asked
Shipping, returns and the things people ask before their first order.
{faqs.map(({ id, q, a }, i) => {
const isOpen = open === i;
return (
{/* pre-wrap keeps the admin's line breaks and blank lines — answers are
written as lists often enough that collapsing them loses meaning. */}
{isOpen ?