);
}
function Reviews({ data }) {
const [reviews, setReviews] = React.useState([]);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
if (!window.firebase || !window.firebase.firestore) {
setLoading(false);
return;
}
// Query reviews: prioritize rating >= 4 with images, show random 10
const fetchReviews = async () => {
try {
const products = (data && data.products) || [];
const allQualified = [];
// Fetch approved reviews from root collection. Only valid === true is
// shown anywhere on the storefront — blocked (false) and legacy docs
// without the field are filtered in the query, so they never load.
const snapshot = await window.firebase.firestore().collection("reviews").where("valid", "==", true).get();
snapshot.forEach((doc) => {
const reviewData = doc.data();
const hasImages = reviewData.images && Array.isArray(reviewData.images) && reviewData.images.length > 0;
// Only include reviews with at least one image (any rating)
if (hasImages) {
const product = products.find((p) => p.id === reviewData.productId);
const rev = { id: doc.id, ...reviewData, product: product || { id: reviewData.productId, title: "Product" } };
allQualified.push(rev);
}
});
// Randomize once here; the 10-card cap is applied at render, after
// reviews of products that aren't on sale have been dropped.
const shuffled = allQualified.sort(() => Math.random() - 0.5);
setReviews(shuffled);
} catch (err) {
console.warn("[TAHAANN] Reviews fetch failed:", err);
} finally {
setLoading(false);
}
};
fetchReviews();
}, [data]);
if (loading) {
return (
From the people who ordered
Reviews
{[0, 1, 2, 3].map((n) => (
))}
);
}
// A review only shows while its product is on sale: the catalogue holds just
// the products the storefront may show (status "live", not valid:false), so a
// review of a draft or blocked product — which would otherwise surface as a
// card titled "Product" linking to "not found" — is left out. Checked every
// render against the live catalogue, so it follows the admin in real time.
const catalog = (data && data.catalog) || [];
const shown = reviews.filter((r) => catalog.some((p) => p.id === r.productId)).slice(0, 10);
if (!shown.length) {
return null;
}
const products = (data && data.products) || [];
return ;
}
const RV_GAP = 20;
// Reviews slide a page at a time, in the same idiom as the hero and the
// advertisement band: autoplay, pause on hover, dots, and swipe on touch.
function ReviewsCarousel({ reviews, products }) {
const viewportRef = React.useRef(null);
const [perView, setPerView] = React.useState(4);
const [page, setPage] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const touchX = React.useRef(null);
// How many cards fit is measured from the carousel itself rather than the
// window, so it stays correct inside whatever column it's placed in.
React.useEffect(() => {
const calc = () => {
const w = viewportRef.current ? viewportRef.current.clientWidth : window.innerWidth;
setPerView(w < 620 ? 1 : w < 980 ? 2 : 4);
};
calc();
window.addEventListener("resize", calc);
return () => window.removeEventListener("resize", calc);
}, []);
const pages = Math.max(1, Math.ceil(reviews.length / perView));
// Rotating the device can leave the current page past the end.
React.useEffect(() => { if (page >= pages) setPage(0); }, [pages, page]);
React.useEffect(() => {
if (paused || pages < 2) return;
const t = setTimeout(() => setPage((p) => (p + 1) % pages), 6000);
return () => clearTimeout(t);
}, [page, paused, pages]);
const go = (n) => setPage((n + pages) % pages);
const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
const onTouchEnd = (e) => {
if (touchX.current == null) return;
const dx = e.changedTouches[0].clientX - touchX.current;
touchX.current = null;
if (pages > 1 && Math.abs(dx) > 40) go(page + (dx < 0 ? 1 : -1));
};
return (
From the people who ordered
Reviews
setPaused(true)}
onMouseLeave={() => setPaused(false)}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
style={{ overflow: "hidden" }}
>
{/* A page spans the viewport plus the gap that follows it, so stepping
by (100% + gap) lands each page flush instead of drifting by one
gap per page. */}