@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/search/HierarchicalCategoryFilter.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { FiltersCollapsible } from "@/app/components/filtersCollapsible";
+import { useState } from "react";
+
+interface CategoryNode {
+  id: string;
+  value: string;
+  slug: string;
+  count: number;
+  media?: string;
+  level?: number;
+  parent_id?: string;
+  children?: CategoryNode[];
+}
+
+interface HierarchicalCategoryFilterProps {
+  categories: CategoryNode[];
+  selectedCategories: string[];
+  onCategoriesChange: (categories: string[]) => void;
+  showCounts?: boolean;
+}
+
+function CategoryItem({
+  category,
+  selectedCategories,
+  onToggle,
+  level = 0,
+  showCounts = true,
+}: {
+  category: CategoryNode;
+  selectedCategories: string[];
+  onToggle: (id: string) => void;
+  level?: number;
+  showCounts?: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = category.children && category.children.length > 0;
+  const isSelected = selectedCategories.includes(category.slug);
+
+  return (
+    <div className="space-y-2">
+      <div
+        className="flex items-center gap-2"
+        style={{ paddingLeft: `${level * 16}px` }}
+      >
+        {hasChildren && (
+          <button
+            type="button"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-0.5 hover:bg-[var(--color-secondary-100)] rounded transition-colors"
+          >
+            <svg
+              className={`w-4 h-4 transition-transform ${
+                isExpanded ? "rotate-90" : ""
+              }`}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        )}
+        {!hasChildren && <div className="w-5" />}
+        <label className="flex items-center gap-2 font-secondary text-[var(--color-secondary-800)] cursor-pointer flex-1">
+          <input
+            type="checkbox"
+            className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+            checked={isSelected}
+            onChange={() => onToggle(category.slug)}
+          />
+          <div className="flex justify-between w-full items-center">
+            <span className="truncate">{category.value}</span>
+            {showCounts && (
+              <span className="text-xs font-secondary bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] px-2 py-0.5 rounded">
+                {category.count}
+              </span>
+            )}
+          </div>
+        </label>
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div className="space-y-2">
+          {category.children!.map((child) => (
+            <CategoryItem
+              key={child.id}
+              category={child}
+              selectedCategories={selectedCategories}
+              onToggle={onToggle}
+              level={level + 1}
+              showCounts={showCounts}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function HierarchicalCategoryFilter({
+  categories,
+  selectedCategories,
+  onCategoriesChange,
+  showCounts = true,
+}: HierarchicalCategoryFilterProps) {
+  const toggleCategory = (categorySlug: string) => {
+    if (selectedCategories.includes(categorySlug)) {
+      onCategoriesChange(
+        selectedCategories.filter((slug) => slug !== categorySlug)
+      );
+    } else {
+      onCategoriesChange([...selectedCategories, categorySlug]);
+    }
+  };
+
+  const clearAllCategories = () => {
+    onCategoriesChange([]);
+  };
+
+  if (!categories || categories.length === 0) {
+    return null;
+  }
+
+  return (
+    <FiltersCollapsible title="Categories" defaultOpen={true}>
+      <div className="space-y-3 px-1 overflow-y-auto max-h-96">
+        {selectedCategories.length > 0 && (
+          <button
+            type="button"
+            onClick={clearAllCategories}
+            className="text-sm text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] font-secondary"
+          >
+            Clear all
+          </button>
+        )}
+        {categories.map((category) => (
+          <CategoryItem
+            key={category.id}
+            category={category}
+            selectedCategories={selectedCategories}
+            onToggle={toggleCategory}
+            showCounts={showCounts}
+          />
+        ))}
+      </div>
+    </FiltersCollapsible>
+  );
+}

package/src/app/components/search/SearchFilters.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import { FiltersCollapsible } from "@/app/components/filtersCollapsible";
+
+interface Category {
+  id: string;
+  value: string;
+  slug: string;
+  productCount: number;
+}
+
+interface ProductType {
+  id: string;
+  value: string;
+  slug: string;
+  productCount: number;
+}
+
+interface SearchFiltersProps {
+  categories?: Category[];
+  productTypes: ProductType[];
+  selectedCategories: string[];
+  selectedBrands: string[];
+  onCategoriesChange: (categories: string[]) => void;
+  onBrandsChange: (brands: string[]) => void;
+}
+
+export default function SearchFilters({
+  categories,
+  productTypes,
+  selectedCategories,
+  selectedBrands,
+  onCategoriesChange,
+  onBrandsChange,
+}: SearchFiltersProps) {
+  const [categoriesExpanded, setCategoriesExpanded] = useState(true);
+  const [brandsExpanded, setBrandsExpanded] = useState(true);
+
+  const toggleCategory = (categoryId: string) => {
+    if (selectedCategories.includes(categoryId)) {
+      onCategoriesChange(selectedCategories.filter((id) => id !== categoryId));
+    } else {
+      onCategoriesChange([...selectedCategories, categoryId]);
+    }
+  };
+
+  const toggleBrand = (brandId: string) => {
+    if (selectedBrands.includes(brandId)) {
+      onBrandsChange(selectedBrands.filter((id) => id !== brandId));
+    } else {
+      onBrandsChange([...selectedBrands, brandId]);
+    }
+  };
+
+  const clearAllCategories = () => {
+    onCategoriesChange([]);
+  };
+
+  const clearAllBrands = () => {
+    onBrandsChange([]);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Brands Filter */}
+      {productTypes.length > 0 && (
+        <FiltersCollapsible title="Brands" defaultOpen={brandsExpanded}>
+          <div className="space-y-3 px-1">
+            {selectedBrands.length > 0 && (
+              <button
+                type="button"
+                onClick={clearAllBrands}
+                className="text-sm text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] font-secondary"
+              >
+                Clear all
+              </button>
+            )}
+            {productTypes.map((brand) => (
+              <label
+                key={brand.id}
+                className="flex items-center gap-2 font-secondary text-[var(--color-secondary-800)] cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+                  checked={selectedBrands.includes(brand.id)}
+                  onChange={() => toggleBrand(brand.id)}
+                />
+                <div className="flex justify-between w-full items-center">
+                  <span className="truncate">{brand.value}</span>
+                  <span className="text-xs font-secondary bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] px-2 py-0.5 rounded">
+                    {brand.productCount}
+                  </span>
+                </div>
+              </label>
+            ))}
+          </div>
+        </FiltersCollapsible>
+      )}
+
+      {/* Categories Filter */}
+      {categories && categories.length > 0 && (
+        <FiltersCollapsible title="Categories" defaultOpen={categoriesExpanded}>
+          <div className="space-y-3 px-1">
+            {selectedCategories.length > 0 && (
+              <button
+                type="button"
+                onClick={clearAllCategories}
+                className="text-sm text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] font-secondary"
+              >
+                Clear all
+              </button>
+            )}
+            {categories.map((category) => (
+              <label
+                key={category.id}
+                className="flex items-center gap-2 font-secondary text-[var(--color-secondary-800)] cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+                  checked={selectedCategories.includes(category.id)}
+                  onChange={() => toggleCategory(category.id)}
+                />
+                <div className="flex justify-between w-full items-center">
+                  <span className="truncate">{category.value}</span>
+                  <span className="text-xs font-secondary bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] px-2 py-0.5 rounded">
+                    {category.productCount}
+                  </span>
+                </div>
+              </label>
+            ))}
+          </div>
+        </FiltersCollapsible>
+      )}
+
+      {/* Active Filters Summary */}
+      {(selectedCategories.length > 0 || selectedBrands.length > 0) && (
+        <div className="pt-4 border-t border-[var(--color-secondary-200)]">
+          <button
+            type="button"
+            onClick={() => {
+              clearAllCategories();
+              clearAllBrands();
+            }}
+            className="w-full h-10 bg-[var(--color-secondary-100)] text-[var(--color-secondary-800)] font-semibold rounded-md hover:bg-[var(--color-secondary-200)] transition-colors"
+          >
+            Clear All Filters
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/search/YMMSearchSidebar.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { shopApi } from "@/lib/api/shop";
+import { useGlobalStore } from "@/store/useGlobalStore";
+import Select from "@/app/components/reuseableUI/select";
+
+interface YMMSearchSidebarProps {
+  initialYear?: number | string;
+  initialMake?: number | string;
+  initialModel?: number | string;
+}
+
+export default function YMMSearchSidebar({
+  initialYear = "",
+  initialMake = "",
+  initialModel = "",
+}: YMMSearchSidebarProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [year, setYear] = useState(initialYear);
+  const [make, setMake] = useState(initialMake);
+  const [model, setModel] = useState(initialModel);
+  const [makes, setMakes] = useState<Array<{ id: number; value: string }>>([]);
+  const [models, setModels] = useState<Array<{ id: number; value: string }>>(
+    []
+  );
+  const [loadingMakes, setLoadingMakes] = useState(false);
+  const [loadingModels, setLoadingModels] = useState(false);
+
+  // Get years from global store (same as main search component)
+  const ymmYears = useGlobalStore((state) => state.ymmYears);
+  const ymmYearsLoaded = useGlobalStore((state) => state.ymmYearsLoaded);
+  const loadingYears = !ymmYearsLoaded;
+
+  const selectedYearData = ymmYears.find((y) => String(y.id) === String(year));
+  const selectedMakeData = makes.find((m) => String(m.id) === String(make));
+
+  useEffect(() => {
+    if (!year) {
+      setMakes([]);
+      setMake("");
+      setModel("");
+      return;
+    }
+    const fetchMakes = async () => {
+      setLoadingMakes(true);
+      try {
+        if (!selectedYearData) {
+          return;
+        }
+        const response = await shopApi.getMakes(selectedYearData.id);
+        if (response) {
+          setMakes(response.data.map((m) => ({ id: m.id, value: m.value })));
+        }
+      } catch (error) {
+        console.error("Error fetching makes:", error);
+        setMakes([]);
+      } finally {
+        setLoadingMakes(false);
+      }
+    };
+
+    fetchMakes();
+  }, [year, selectedYearData]);
+
+  // Fetch models when make changes
+  useEffect(() => {
+    if (!year || !make) {
+      setModels([]);
+      setModel("");
+      return;
+    }
+
+    if (makes.length === 0) return;
+
+    const fetchModels = async () => {
+      setLoadingModels(true);
+      try {
+        if (!selectedMakeData) {
+          console.warn("Make not found yet, retrying later...");
+          return;
+        }
+
+        if (!selectedYearData) return;
+
+        const response = await shopApi.getModels(
+          selectedYearData.id,
+          selectedMakeData.id
+        );
+
+        if (response) {
+          setModels(response.data.map((m) => ({ id: m.id, value: m.value })));
+        }
+      } catch (error) {
+        console.error("Error fetching models:", error);
+        setModels([]);
+      } finally {
+        setLoadingModels(false);
+      }
+    };
+
+    fetchModels();
+  }, [year, make, selectedYearData, selectedMakeData]);
+
+  const handleSearch = () => {
+    if (year && make && model) {
+      // year, make, and model are already IDs, use them directly
+      router.push(`/search?year=${year}&make=${make}&model=${model}`);
+    }
+  };
+  const handleClear = () => {
+    setYear("");
+    setMake("");
+    setModel("");
+    // Clear filters and show all products
+    router.push("/search");
+  };
+
+  return (
+    <div className="bg-white border border-[var(--color-secondary-200)] rounded-lg p-4">
+      <h3 className="text-lg font-semibold text-[var(--color-secondary-800)] mb-4">
+        Shop By Vehicle
+      </h3>
+
+      <div className="space-y-4">
+        {/* Year Dropdown */}
+        {/* <Select
+          label="Year"
+          value={year}
+          onChange={(e) => {
+            setYear(e.target.value);
+            setMake("");
+            setModel("");
+          }}
+          options={ymmYears.map((y) => ({
+            value: String(y.id),
+            label: y.value,
+          }))}
+          placeholder={loadingYears ? "Loading..." : "Select Year"}
+          disabled={loadingYears}
+        /> */}
+
+        {/* Make Dropdown */}
+        <Select
+          label="Make"
+          value={make}
+          onChange={(e) => {
+            setMake(e.target.value);
+            setModel("");
+          }}
+          options={makes.map((m) => ({ value: String(m.id), label: m.value }))}
+          placeholder={loadingMakes ? "Loading..." : "Select Make"}
+          disabled={!year || loadingMakes}
+        />
+
+        {/* Model Dropdown */}
+        <Select
+          label="Model"
+          value={model}
+          onChange={(e) => setModel(e.target.value)}
+          options={models.map((m) => ({ value: String(m.id), label: m.value }))}
+          placeholder={loadingModels ? "Loading..." : "Select Model"}
+          disabled={!make || loadingModels}
+        />
+
+        {/* Search Button */}
+        <button
+          onClick={handleSearch}
+          disabled={!year || !make || !model}
+          className="w-full h-11 cursor-pointer bg-[var(--color-primary)] text-white font-semibold rounded-md hover:bg-[var(--color-primary-600)] transition-colors disabled:bg-[var(--color-secondary-300)] disabled:cursor-not-allowed"
+        >
+          SEARCH
+        </button>
+
+        {/* Clear Button */}
+        <button
+          onClick={handleClear}
+          className="w-full h-11 bg-white border border-[var(--color-secondary-300)] text-[var(--color-secondary-800)] font-semibold rounded-md hover:bg-[var(--color-secondary-50)] transition-colors"
+        >
+          CLEAR
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/app/components/seo/ServerProductCard.tsx

@@ -0,0 +1,91 @@
+import Image from "next/image";
+import Link from "next/link";
+import { getFullImageUrl } from "@/app/utils/functions";
+
+export type ServerProductCardProps = {
+  id: string;
+  name: string;
+  href: string;
+  image?: string | null;
+  category?: string | null;
+  price?: number | null;
+  currency?: string | null;
+  inStock?: boolean | null;
+};
+
+export default function ServerProductCard(props: ServerProductCardProps) {
+  const {
+    id,
+    name,
+    href,
+    image,
+    category,
+    price,
+    currency,
+    inStock,
+  } = props;
+
+  const fallbackImage = "/no-image-avail-large.png";
+  const fullImageUrl = getFullImageUrl(image || "") || fallbackImage;
+
+  const formattedPrice =
+    typeof price === "number" && price > 0
+      ? new Intl.NumberFormat(undefined, {
+          style: "currency",
+          currency: currency || "USD",
+        }).format(price)
+      : null;
+
+  return (
+    <Link
+      href={href}
+      key={id}
+      className="group block h-full overflow-hidden hover:shadow-lg transition-all duration-200 relative bg-white font-secondary p-4 rounded-sm"
+    >
+      <div className="relative w-full flex flex-col gap-3 justify-between h-full">
+        <div className="relative w-full aspect-square overflow-hidden bg-gray-50">
+          <Image
+            src={fullImageUrl}
+            alt={name}
+            width={296}
+            height={296}
+            className="w-full h-full object-contain transition-all ease-in-out duration-300 group-hover:scale-105"
+            loading="lazy"
+            sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 296px"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1 flex-grow">
+          {category ? (
+            <p className="font-normal text-[10px] uppercase font-secondary text-gray-500 tracking-wider">
+              {category}
+            </p>
+          ) : null}
+
+          <p
+            title={name}
+            className="tracking-tight font-bold text-sm md:text-base text-black line-clamp-2 leading-tight"
+          >
+            {name}
+          </p>
+
+          <div className="flex gap-2 items-center mt-auto pt-2">
+            {formattedPrice ? (
+              <p className="font-black text-lg md:text-xl text-black">
+                {formattedPrice}
+              </p>
+            ) : (
+              <p
+                style={{ color: "var(--color-primary-700)" }}
+                className="text-sm font-bold"
+              >
+                {inStock === false ? "Out of stock" : "Call for Availability"}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+

package/src/app/components/seo/ServerProductGrid.tsx

@@ -0,0 +1,45 @@
+import ServerProductCard from "./ServerProductCard";
+
+export type ServerGridProduct = {
+  id: string;
+  name: string;
+  slug: string;
+  primary_image?: string | null;
+  category_name?: string | null;
+  price_min?: number | null;
+  currency?: string | null;
+  in_stock?: boolean | null;
+};
+
+export default function ServerProductGrid(props: {
+  products: ServerGridProduct[];
+}) {
+  const { products } = props;
+
+  if (!products.length) {
+    return (
+      <p className="text-sm text-[var(--color-secondary-600)]">
+        No products found.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+      {products.map((p) => (
+        <ServerProductCard
+          key={p.id}
+          id={p.id}
+          name={p.name}
+          href={`/product/${encodeURIComponent(p.slug)}`}
+          image={p.primary_image || null}
+          category={p.category_name || null}
+          price={typeof p.price_min === "number" ? p.price_min : null}
+          currency={p.currency || "USD"}
+          inStock={p.in_stock ?? null}
+        />
+      ))}
+    </div>
+  );
+}
+