Showing {count} fragrances
{/* Column toggle */}
{[2, 3, 4].map((n) => (
))}
{/* Sort dropdown */}
{open && (
<>
setOpen(false)} />
{SORT_OPTIONS.map((o) => (
))}
)}
);
}
// ─── Mobile Filter Drawer ─────────────────────────────────────────────────────
function FragranceMobileFilterDrawer({
open,
onClose,
filters,
brands,
onChange,
onClear,
resultCount,
}: {
open: boolean;
onClose: () => void;
filters: FragranceFilterState;
brands: Brand[];
onChange: (updates: Partial
) => void;
onClear: () => void;
resultCount: number;
}) {
if (!open) return null;
return (
);
}
// ─── Product Card ─────────────────────────────────────────────────────────────
function FragranceCard({ product }: { product: Product }) {
const [adding, setAdding] = useState(false);
const [added, setAdded] = useState(false);
const primaryImage = product.images?.find((i) => i.is_primary) ?? product.images?.[0];
const inStock = product.stock_qty > 0;
const hasDiscount = product.is_discount_active && product.compare_price;
const addToCart = async () => {
if (!inStock || adding) { return; }
setAdding(true);
try {
await fetch('/cart/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-XSRF-TOKEN': xsrfToken(),
Accept: 'application/json',
},
body: JSON.stringify({ product_id: product.id, qty: 1 }),
});
setAdded(true);
router.reload({ only: ['cartCount'] });
setTimeout(() => setAdded(false), 2000);
} finally {
setAdding(false);
}
};
return (
{/* Image */}
{primaryImage ? (
) : (
)}
{/* Badges */}
{!inStock && (
SOLD OUT
)}
{hasDiscount && (
-{product.discount_percent}%
)}
{product.is_new_arrival && inStock && (
NEW
)}
{/* Hover overlay */}
View Details
{product.brand && (
{product.brand.name}
)}
{product.name}
{product.short_description && (
{product.short_description}
)}
{/* Price */}
৳{Number(product.price).toLocaleString()}
{hasDiscount && (
৳{Number(product.compare_price).toLocaleString()}
)}
{/* Stock indicator */}
{inStock ? `In Stock (${product.stock_qty} available)` : 'Out of Stock'}
{/* Add to Cart */}
{hasFilters ? 'No Results Found' : 'No Fragrances Yet'}
{hasFilters ? 'Try adjusting your filters.' : 'New arrivals coming soon. Stay tuned.'}
{hasFilters && (
)}
);
}
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function FragrancePage({
products,
brands,
filters: serverFilters,
}: {
products: PaginatedData;
brands: Brand[];
filters: FragranceFilters;
}) {
const [localFilters, setLocalFilters] = useState({
search: serverFilters.search ?? '',
brand: serverFilters.brand ?? '',
min_price: serverFilters.min_price ?? '',
max_price: serverFilters.max_price ?? '',
sort: serverFilters.sort ?? '',
availability: serverFilters.availability ?? '',
});
const [cols, setCols] = useState(() => {
try { return Number(localStorage.getItem('fragrance-cols')) || 3; } catch { return 3; }
});
const [mobileFilters, setMobileFilters] = useState(false);
const priceTimer = useRef>();
const hasFilters = !!(
localFilters.search || localFilters.brand || localFilters.min_price ||
localFilters.max_price || localFilters.availability
);
const navigate = (updates: Partial) => {
const next = { ...localFilters, ...updates };
setLocalFilters(next);
router.visit('/fragrance', { data: next, preserveState: true, preserveScroll: false });
};
const navigateDebounced = (updates: Partial) => {
const next = { ...localFilters, ...updates };
setLocalFilters(next);
clearTimeout(priceTimer.current);
priceTimer.current = setTimeout(() => {
router.visit('/fragrance', { data: next, preserveState: true });
}, 500);
};
const handleFilterChange = (updates: Partial) => {
const hasPriceChange = 'min_price' in updates || 'max_price' in updates;
if (hasPriceChange) {
navigateDebounced(updates);
} else {
navigate(updates);
}
};
const clearAll = () => {
const empty: FragranceFilterState = { search: '', brand: '', min_price: '', max_price: '', sort: '', availability: '' };
setLocalFilters(empty);
router.visit('/fragrance');
};
const removeFilter = (key: keyof FragranceFilterState) => {
if (key === 'min_price' || key === 'max_price') {
navigate({ min_price: '', max_price: '' });
} else {
navigate({ [key]: '' });
}
};
const gridCols =
cols === 2 ? 'grid-cols-2'
: cols === 4 ? 'grid-cols-2 lg:grid-cols-4'
: 'grid-cols-2 lg:grid-cols-3';
return (
{/* Filter + Grid */}
{/* Desktop Sidebar */}
{/* Product Grid */}
navigate({ sort: v })}
cols={cols}
onCols={(n) => {
setCols(n);
try { localStorage.setItem('fragrance-cols', String(n)); } catch {}
}}
onMobileFilters={() => setMobileFilters(true)}
/>
{products.data.length === 0 ? (
) : (
<>
{products.data.map((product) => (
))}
{/* Pagination */}
{products.last_page > 1 && (
Page {products.current_page} of {products.last_page} · {products.from}–{products.to} of {products.total}
{products.links.map((link, i) => (
)}
)}
setMobileFilters(false)}
filters={localFilters}
brands={brands}
onChange={handleFilterChange}
onClear={clearAll}
resultCount={products.total}
/>
);
}