588 lines
20 KiB
TypeScript
588 lines
20 KiB
TypeScript
import { useState, useCallback } from 'react';
|
||
import { useParams } from 'react-router';
|
||
import { ChevronDown, SlidersHorizontal, X } from 'lucide-react';
|
||
import type { ShopifyCollection } from '@reacteditor/field-shopify';
|
||
import {
|
||
useCollectionProducts,
|
||
type CollectionSortKey,
|
||
type ProductFilter,
|
||
} from '@/hooks/use-shopify-collections';
|
||
import { ProductCard } from './product-card';
|
||
import { Typography } from '@/components/Typography';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
type FilterOption = { label: string };
|
||
type ColorOption = { label: string; color: string };
|
||
|
||
export type CollectionProps = {
|
||
collection: ShopifyCollection | null;
|
||
showDescription: 'yes' | 'no';
|
||
showCoverImage: 'yes' | 'no';
|
||
customCoverImage: string;
|
||
columns: '2' | '3' | '4';
|
||
limit: number;
|
||
defaultSort: CollectionSortKey;
|
||
showAvailability: 'yes' | 'no';
|
||
showPriceRange: 'yes' | 'no';
|
||
showProductType: 'yes' | 'no';
|
||
productTypeOptions: FilterOption[];
|
||
showVendor: 'yes' | 'no';
|
||
vendorOptions: FilterOption[];
|
||
showTags: 'yes' | 'no';
|
||
tagOptions: FilterOption[];
|
||
showColor: 'yes' | 'no';
|
||
colorOptions: ColorOption[];
|
||
showStyle: 'yes' | 'no';
|
||
styleOptions: FilterOption[];
|
||
showSize: 'yes' | 'no';
|
||
sizeOptions: FilterOption[];
|
||
showMaterial: 'yes' | 'no';
|
||
materialOptions: FilterOption[];
|
||
metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
|
||
};
|
||
|
||
const SORT_OPTIONS: { label: string; value: CollectionSortKey }[] = [
|
||
{ label: 'Best Selling', value: 'BEST_SELLING' },
|
||
{ label: 'Newest', value: 'CREATED' },
|
||
{ label: 'Price: Low to High', value: 'PRICE' },
|
||
{ label: 'Alphabetical', value: 'TITLE' },
|
||
];
|
||
|
||
const colClass: Record<CollectionProps['columns'], string> = {
|
||
'2': 'grid-cols-2',
|
||
'3': 'grid-cols-2 md:grid-cols-3',
|
||
'4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
|
||
};
|
||
|
||
// ─── Filter group (collapsible) ────────────────────────────────────────────────
|
||
|
||
function FilterGroup({ label, children, defaultOpen = true }: {
|
||
label: string;
|
||
children: React.ReactNode;
|
||
defaultOpen?: boolean;
|
||
}) {
|
||
const [open, setOpen] = useState(defaultOpen);
|
||
return (
|
||
<div className="border-b border-border py-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setOpen((o) => !o)}
|
||
className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
|
||
>
|
||
{label}
|
||
<ChevronDown
|
||
size={14}
|
||
className={cn('transition-transform', open ? 'rotate-180' : '')}
|
||
/>
|
||
</button>
|
||
{open && <div className="mt-3 space-y-2">{children}</div>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Checkbox({ checked, onChange, label }: {
|
||
checked: boolean;
|
||
onChange: (v: boolean) => void;
|
||
label: string;
|
||
}) {
|
||
return (
|
||
<label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
|
||
<input
|
||
type="checkbox"
|
||
checked={checked}
|
||
onChange={(e) => onChange(e.target.checked)}
|
||
className="sr-only"
|
||
/>
|
||
<span
|
||
className={cn(
|
||
'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
|
||
checked ? 'border-foreground bg-foreground' : 'border-border',
|
||
)}
|
||
>
|
||
{checked && (
|
||
<svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
|
||
<path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
)}
|
||
</span>
|
||
{label}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
// ─── Sidebar ────────────────────────────────────────────────────────────────────
|
||
|
||
type ActiveFilters = {
|
||
availability: boolean;
|
||
productTypes: string[];
|
||
vendors: string[];
|
||
tags: string[];
|
||
colors: string[];
|
||
styles: string[];
|
||
sizes: string[];
|
||
materials: string[];
|
||
minPrice: string;
|
||
maxPrice: string;
|
||
metafieldValues: Record<string, string[]>;
|
||
};
|
||
|
||
function Sidebar({
|
||
props,
|
||
active,
|
||
onChange,
|
||
}: {
|
||
props: CollectionProps;
|
||
active: ActiveFilters;
|
||
onChange: (patch: Partial<ActiveFilters>) => void;
|
||
}) {
|
||
const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const colors = (props.colorOptions ?? []) as ColorOption[];
|
||
const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
|
||
const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
|
||
|
||
function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
|
||
const arr = active[key];
|
||
onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
|
||
}
|
||
|
||
const hasActiveFilters =
|
||
active.availability ||
|
||
active.productTypes.length > 0 ||
|
||
active.vendors.length > 0 ||
|
||
active.tags.length > 0 ||
|
||
active.colors.length > 0 ||
|
||
active.styles.length > 0 ||
|
||
active.sizes.length > 0 ||
|
||
active.materials.length > 0 ||
|
||
active.minPrice !== '' ||
|
||
active.maxPrice !== '' ||
|
||
Object.values(active.metafieldValues).some((arr) => arr.length > 0);
|
||
|
||
return (
|
||
<aside className="w-full shrink-0 md:w-52 lg:w-56">
|
||
<div className="flex items-center justify-between border-b border-border pb-4">
|
||
<span className="text-xs font-semibold uppercase tracking-[0.15em]">Filters</span>
|
||
{hasActiveFilters && (
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
onChange({
|
||
availability: false,
|
||
productTypes: [],
|
||
vendors: [],
|
||
tags: [],
|
||
colors: [],
|
||
styles: [],
|
||
sizes: [],
|
||
materials: [],
|
||
minPrice: '',
|
||
maxPrice: '',
|
||
metafieldValues: {},
|
||
})
|
||
}
|
||
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||
>
|
||
<X size={12} /> Clear all
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{props.showAvailability === 'yes' && (
|
||
<FilterGroup label="Availability">
|
||
<Checkbox
|
||
checked={active.availability}
|
||
onChange={(v) => onChange({ availability: v })}
|
||
label="In stock"
|
||
/>
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showPriceRange === 'yes' && (
|
||
<FilterGroup label="Price">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
placeholder="Min"
|
||
value={active.minPrice}
|
||
onChange={(e) => onChange({ minPrice: e.target.value })}
|
||
className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||
/>
|
||
<span className="text-muted-foreground">–</span>
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
placeholder="Max"
|
||
value={active.maxPrice}
|
||
onChange={(e) => onChange({ maxPrice: e.target.value })}
|
||
className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
|
||
/>
|
||
</div>
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showVendor === 'yes' && vendors.length > 0 && (
|
||
<FilterGroup label="Brand">
|
||
{vendors.map((v) => (
|
||
<Checkbox
|
||
key={v}
|
||
checked={active.vendors.includes(v)}
|
||
onChange={() => toggle('vendors', v)}
|
||
label={v}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showColor === 'yes' && colors.length > 0 && (
|
||
<FilterGroup label="Color">
|
||
{colors.filter((c) => c.label).map((c) => (
|
||
<label
|
||
key={c.label}
|
||
className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={active.colors.includes(c.label)}
|
||
onChange={() => toggle('colors', c.label)}
|
||
className="sr-only"
|
||
/>
|
||
<span
|
||
className={cn(
|
||
'flex h-5 w-5 shrink-0 rounded-full border-2',
|
||
active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
|
||
)}
|
||
style={{ backgroundColor: c.color || undefined }}
|
||
/>
|
||
{c.label}
|
||
</label>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showStyle === 'yes' && styles.length > 0 && (
|
||
<FilterGroup label="Style">
|
||
{styles.map((s) => (
|
||
<Checkbox
|
||
key={s}
|
||
checked={active.styles.includes(s)}
|
||
onChange={() => toggle('styles', s)}
|
||
label={s}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showSize === 'yes' && sizes.length > 0 && (
|
||
<FilterGroup label="Size">
|
||
{sizes.map((s) => (
|
||
<Checkbox
|
||
key={s}
|
||
checked={active.sizes.includes(s)}
|
||
onChange={() => toggle('sizes', s)}
|
||
label={s}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showMaterial === 'yes' && materials.length > 0 && (
|
||
<FilterGroup label="Material">
|
||
{materials.map((m) => (
|
||
<Checkbox
|
||
key={m}
|
||
checked={active.materials.includes(m)}
|
||
onChange={() => toggle('materials', m)}
|
||
label={m}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showProductType === 'yes' && productTypes.length > 0 && (
|
||
<FilterGroup label="Product type">
|
||
{productTypes.map((pt) => (
|
||
<Checkbox
|
||
key={pt}
|
||
checked={active.productTypes.includes(pt)}
|
||
onChange={() => toggle('productTypes', pt)}
|
||
label={pt}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{props.showTags === 'yes' && tags.length > 0 && (
|
||
<FilterGroup label="Tags">
|
||
{tags.map((t) => (
|
||
<Checkbox
|
||
key={t}
|
||
checked={active.tags.includes(t)}
|
||
onChange={() => toggle('tags', t)}
|
||
label={t}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
)}
|
||
|
||
{metafieldFilters.map((mf, i) => {
|
||
const mfKey = `${mf.namespace}.${mf.key}`;
|
||
const selected = active.metafieldValues[mfKey] ?? [];
|
||
return (
|
||
<FilterGroup key={mfKey + i} label={mf.label || mfKey}>
|
||
{mf.values.map((v) => v.label).filter(Boolean).map((val) => (
|
||
<Checkbox
|
||
key={val}
|
||
checked={selected.includes(val)}
|
||
onChange={(checked) => {
|
||
const next = checked
|
||
? [...selected, val]
|
||
: selected.filter((v) => v !== val);
|
||
onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
|
||
}}
|
||
label={val}
|
||
/>
|
||
))}
|
||
</FilterGroup>
|
||
);
|
||
})}
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
// ─── Build Shopify ProductFilter array ──────────────────────────────────────────
|
||
|
||
function buildProductFilters(active: ActiveFilters): ProductFilter[] {
|
||
const filters: ProductFilter[] = [];
|
||
|
||
if (active.availability) filters.push({ available: true });
|
||
|
||
if (active.minPrice !== '' || active.maxPrice !== '') {
|
||
filters.push({
|
||
price: {
|
||
min: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
|
||
max: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
|
||
},
|
||
});
|
||
}
|
||
|
||
for (const pt of active.productTypes) filters.push({ productType: pt });
|
||
for (const v of active.vendors) filters.push({ productVendor: v });
|
||
for (const t of active.tags) filters.push({ tag: t });
|
||
|
||
for (const c of active.colors) filters.push({ variantOption: { name: 'Color', value: c } });
|
||
for (const s of active.styles) filters.push({ variantOption: { name: 'Style', value: s } });
|
||
for (const s of active.sizes) filters.push({ variantOption: { name: 'Size', value: s } });
|
||
for (const m of active.materials) filters.push({ variantOption: { name: 'Material', value: m } });
|
||
|
||
for (const [mfKey, vals] of Object.entries(active.metafieldValues)) {
|
||
const [namespace, key] = mfKey.split('.');
|
||
for (const value of vals) {
|
||
filters.push({ productMetafield: { namespace, key, value } });
|
||
}
|
||
}
|
||
|
||
return filters;
|
||
}
|
||
|
||
// ─── Main component ──────────────────────────────────────────────────────────
|
||
|
||
export function CollectionView(props: CollectionProps) {
|
||
const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
|
||
const { handle: paramHandle } = useParams<{ handle?: string }>();
|
||
const handle = selected?.handle ?? paramHandle ?? '';
|
||
|
||
const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
|
||
const [reverse, setReverse] = useState(false);
|
||
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
|
||
const [active, setActive] = useState<ActiveFilters>({
|
||
availability: false,
|
||
productTypes: [],
|
||
vendors: [],
|
||
tags: [],
|
||
colors: [],
|
||
styles: [],
|
||
sizes: [],
|
||
materials: [],
|
||
minPrice: '',
|
||
maxPrice: '',
|
||
metafieldValues: {},
|
||
});
|
||
|
||
const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
|
||
setActive((prev) => ({ ...prev, ...patch }));
|
||
}, []);
|
||
|
||
const productFilters = buildProductFilters(active);
|
||
|
||
const handleSortChange = (value: string) => {
|
||
if (value === 'PRICE_DESC') {
|
||
setSort('PRICE');
|
||
setReverse(true);
|
||
} else {
|
||
setSort(value as CollectionSortKey);
|
||
setReverse(false);
|
||
}
|
||
};
|
||
|
||
const sortValue = sort === 'PRICE' && reverse ? 'PRICE_DESC' : sort;
|
||
|
||
const { collection, loading, hasNextPage, fetchMore } = useCollectionProducts(handle, {
|
||
first: limit,
|
||
sortKey: sort,
|
||
reverse,
|
||
filters: productFilters.length ? productFilters : undefined,
|
||
});
|
||
|
||
const products = collection?.products ?? [];
|
||
const description = collection?.description ?? (selected as any)?.description;
|
||
const collectionImage = customCoverImage || collection?.image?.url;
|
||
|
||
if (!selected && !paramHandle) {
|
||
return (
|
||
<section className="bg-background pb-24 pt-12 md:pt-20">
|
||
<div className="container mx-auto max-w-7xl px-6">
|
||
<header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
|
||
<Skeleton className="h-3 w-24" />
|
||
<Skeleton className="h-10 w-3/4" />
|
||
</header>
|
||
<div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<Skeleton key={i} className="aspect-[4/5] w-full" />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<section className="bg-background pb-24 pt-12 md:pt-20">
|
||
<div className="container mx-auto max-w-7xl px-6">
|
||
{/* Cover image */}
|
||
{showCoverImage === 'yes' && collectionImage && (
|
||
<div className="mb-10 overflow-hidden rounded-lg">
|
||
<img
|
||
src={collectionImage}
|
||
alt={collection?.title ?? ''}
|
||
className="h-48 w-full object-cover md:h-72 lg:h-80"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Header */}
|
||
<header className="mb-10">
|
||
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||
Collection
|
||
</p>
|
||
<Typography variant="h1">
|
||
{collection?.title ?? (selected as any)?.title ?? paramHandle}
|
||
</Typography>
|
||
{showDescription === 'yes' && description ? (
|
||
<Typography variant="subtitle1" className="mt-4 max-w-2xl">
|
||
{description}
|
||
</Typography>
|
||
) : null}
|
||
</header>
|
||
|
||
{/* Mobile filter toggle */}
|
||
<div className="mb-4 flex items-center justify-between md:hidden">
|
||
<button
|
||
type="button"
|
||
onClick={() => setMobileFiltersOpen((o) => !o)}
|
||
className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium"
|
||
>
|
||
<SlidersHorizontal size={14} />
|
||
Filters
|
||
</button>
|
||
<Select value={sortValue} onValueChange={handleSortChange}>
|
||
<SelectTrigger className="h-auto px-3 py-2 text-sm">
|
||
<SelectValue>
|
||
{[...SORT_OPTIONS, { label: 'Price: High to Low', value: 'PRICE_DESC' }].find((o) => o.value === sortValue)?.label}
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{SORT_OPTIONS.map((o) => (
|
||
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
||
))}
|
||
<SelectItem value="PRICE_DESC">Price: High to Low</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Mobile filter panel */}
|
||
{mobileFiltersOpen && (
|
||
<div className="mb-6 rounded-lg border border-border p-4 md:hidden">
|
||
<Sidebar props={props} active={active} onChange={patchActive} />
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-10">
|
||
{/* Desktop sidebar */}
|
||
<div className="hidden md:block">
|
||
<Sidebar props={props} active={active} onChange={patchActive} />
|
||
</div>
|
||
|
||
{/* Product area */}
|
||
<div className="min-w-0 flex-1">
|
||
{/* Sort + count bar */}
|
||
<div className="mb-6 flex items-center justify-between">
|
||
<p className="text-sm text-muted-foreground">
|
||
{loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
|
||
</p>
|
||
<div className="hidden md:block">
|
||
<Select value={sortValue} onValueChange={handleSortChange}>
|
||
<SelectTrigger className="h-auto px-3 py-1.5 text-sm">
|
||
<SelectValue>
|
||
{[...SORT_OPTIONS, { label: 'Price: High to Low', value: 'PRICE_DESC' }].find((o) => o.value === sortValue)?.label}
|
||
</SelectValue>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{SORT_OPTIONS.map((o) => (
|
||
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
||
))}
|
||
<SelectItem value="PRICE_DESC">Price: High to Low</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Grid */}
|
||
<div className={cn('grid gap-x-6 gap-y-10', colClass[columns])}>
|
||
{loading
|
||
? Array.from({ length: limit }).map((_, i) => (
|
||
<Skeleton key={i} className="aspect-[4/5] w-full" />
|
||
))
|
||
: products.map((p: any) => <ProductCard key={p.id} product={p} />)}
|
||
</div>
|
||
|
||
{!loading && products.length === 0 && (
|
||
<div className="mt-16 text-center text-sm text-muted-foreground">
|
||
No products found in this collection.
|
||
</div>
|
||
)}
|
||
|
||
{hasNextPage && !loading && (
|
||
<div className="mt-12 flex justify-center">
|
||
<button
|
||
type="button"
|
||
onClick={fetchMore}
|
||
className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
|
||
>
|
||
Load more
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|