@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/shop/SearchFilter.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { SearchIcon } from "@/app/utils/svgs/searchIcon";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { gtmSearch } from "../../utils/googleTagManager";
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+export default function SearchFilter() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { getGoogleTagManagerConfig } = useAppConfiguration();
+  const gtmConfig = getGoogleTagManagerConfig();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const navigationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const currentSearchIdRef = useRef<number>(0);
+
+  // Track if user is actively typing to avoid URL interference
+  const isTypingRef = useRef(false);
+
+  useEffect(() => {
+    const q = searchParams?.get("q") || "";
+    
+    // Only update search term from URL if user is not actively typing
+    if (!isTypingRef.current) {
+      setSearchTerm(q);
+    }
+    
+    // Reset loading state when search params change (page loaded with new results)
+    setIsSearching(false);
+    
+    // Clear any pending navigation timeout
+    if (navigationTimeoutRef.current) {
+      clearTimeout(navigationTimeoutRef.current);
+    }
+  }, [searchParams]);
+
+  const performSearch = useCallback((term: string, searchId: number) => {
+    // Check if this search is still the current one
+    if (searchId !== currentSearchIdRef.current) {
+      return; // This search has been cancelled by a newer one
+    }
+
+    const params = new URLSearchParams(searchParams?.toString() || "");
+    
+    if (term.trim()) {
+      params.set("q", term.trim());
+    } else {
+      params.delete("q");
+    }
+    
+    // Reset pagination when searching
+    params.delete("after");
+    
+    const href = `${pathname}?${params.toString()}`;
+    
+    // Show loading state only if this is still the current search
+    if (searchId === currentSearchIdRef.current) {
+      setIsSearching(true);
+      
+      // Track search in GTM
+      if (term.trim()) {
+        gtmSearch(term.trim(), undefined, gtmConfig?.container_id);
+      }
+      
+      // Navigate
+      router.push(href, { scroll: false });
+      
+      // Clear any existing timeout
+      if (navigationTimeoutRef.current) {
+        clearTimeout(navigationTimeoutRef.current);
+      }
+      
+      // Reset loading state after a reasonable time
+      navigationTimeoutRef.current = setTimeout(() => {
+        // Only reset if this is still the current search
+        if (searchId === currentSearchIdRef.current) {
+          setIsSearching(false);
+        }
+      }, 3000);
+    }
+  }, [router, searchParams, pathname, gtmConfig?.container_id]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    
+    // Mark that user is actively typing
+    isTypingRef.current = true;
+    
+    // Immediately update the search term for responsive UI
+    setSearchTerm(value);
+
+    // Immediately reset loading state when user starts typing again
+    setIsSearching(false);
+
+    // Cancel any previous search by incrementing the search ID
+    currentSearchIdRef.current += 1;
+    const currentSearchId = currentSearchIdRef.current;
+
+    // Clear existing timeouts (cancels previous debounced search and navigation timeout)
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    if (navigationTimeoutRef.current) {
+      clearTimeout(navigationTimeoutRef.current);
+    }
+
+    // Auto-search with debounce for any meaningful input
+    if (value.trim().length >= 2 || value.trim().length === 0) {
+      debounceTimeoutRef.current = setTimeout(() => {
+        // Mark that user is no longer actively typing
+        isTypingRef.current = false;
+        
+        // Only show loading if this is still the current search
+        if (currentSearchId === currentSearchIdRef.current) {
+          setIsSearching(true);
+        }
+        performSearch(value, currentSearchId);
+      }, 800); // 800ms debounce - gives user time to finish typing
+    } else {
+      // For short inputs, still mark as not typing after a brief delay
+      setTimeout(() => {
+        isTypingRef.current = false;
+      }, 100);
+    }
+  };
+
+
+  const clearSearch = () => {
+    // Mark as not typing since this is a programmatic action
+    isTypingRef.current = false;
+    
+    setSearchTerm("");
+    
+    // Cancel any previous search
+    currentSearchIdRef.current += 1;
+    const currentSearchId = currentSearchIdRef.current;
+    
+    // Clear debounce timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    
+    setIsSearching(true);
+    performSearch("", currentSearchId);
+  };
+
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      if (navigationTimeoutRef.current) {
+        clearTimeout(navigationTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="w-full md:max-w-md relative">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search products..."
+          value={searchTerm}
+          onChange={handleInputChange}
+          className="w-full h-10 pl-10 pr-10 text-sm border border-[var(--color-secondary-300)] bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-600)] text-[var(--color-secondary-900)] placeholder-[var(--color-secondary-500)]"
+        />
+        
+        {/* Search icon or loading spinner */}
+        <div className="absolute left-3 top-1/2 -translate-y-1/2">
+          {isSearching ? (
+            <div className="w-4 h-4 border-2 border-[var(--color-secondary-300)] border-t-[var(--color-primary-500)] rounded-full animate-spin" />
+          ) : (
+            <span className="w-4 h-4 block text-[var(--color-secondary-600)]">
+              {SearchIcon}
+            </span>
+          )}
+        </div>
+        
+        {/* Clear button or loading text */}
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {isSearching ? (
+            <span className="text-xs text-[var(--color-secondary-500)] font-medium">
+              Searching...
+            </span>
+          ) : searchTerm ? (
+            <button
+              type="button"
+              onClick={clearSearch}
+              className="text-[var(--color-secondary-400)] hover:text-[var(--color-secondary-600)] transition-colors"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+                fill="none"
+              >
+                <path
+                  d="M12 4L4 12M4 4L12 12"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/components/shop/SearchFilterClient.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { SearchIcon } from "@/app/utils/svgs/searchIcon";
+import { useState, useEffect, useRef } from "react";
+
+interface SearchFilterClientProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSearch?: (value: string) => void;
+}
+
+export default function SearchFilterClient({ value, onChange, onSearch }: SearchFilterClientProps) {
+  const [searchTerm, setSearchTerm] = useState(value);
+  const [isSearching, setIsSearching] = useState(false);
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Sync with external value changes
+  useEffect(() => {
+    setSearchTerm(value);
+  }, [value]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setSearchTerm(newValue);
+    setIsSearching(true);
+
+    // Clear existing timeout
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    // Debounce the search
+    debounceTimeoutRef.current = setTimeout(() => {
+      setIsSearching(false);
+      if (onSearch) {
+        onSearch(newValue);
+      } else {
+        onChange(newValue);
+      }
+    }, 800);
+  };
+
+  const clearSearch = () => {
+    setSearchTerm("");
+    setIsSearching(false);
+
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    if (onSearch) {
+      onSearch("");
+    } else {
+      onChange("");
+    }
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="w-full md:max-w-md relative">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Search products..."
+          value={searchTerm}
+          onChange={handleInputChange}
+          className="w-full h-10 pl-10 pr-10 text-sm border border-[var(--color-secondary-300)] bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-600)] text-[var(--color-secondary-900)] placeholder-[var(--color-secondary-500)]"
+        />
+
+        {/* Search icon or loading spinner */}
+        <div className="absolute left-3 top-1/2 -translate-y-1/2">
+          {isSearching ? (
+            <div className="w-4 h-4 border-2 border-[var(--color-secondary-300)] border-t-[var(--color-primary-500)] rounded-full animate-spin" />
+          ) : (
+            <span className="w-4 h-4 block text-[var(--color-secondary-600)]">
+              {SearchIcon}
+            </span>
+          )}
+        </div>
+
+        {/* Clear button or loading text */}
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {isSearching ? (
+            <span className="text-xs text-[var(--color-secondary-500)] font-medium">
+              Searching...
+            </span>
+          ) : searchTerm ? (
+            <button
+              type="button"
+              onClick={clearSearch}
+              className="text-[var(--color-secondary-400)] hover:text-[var(--color-secondary-600)] transition-colors"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                width="16"
+                height="16"
+                fill="none"
+              >
+                <path
+                  d="M12 4L4 12M4 4L12 12"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.5"
+                />
+              </svg>
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/components/shop/SearchLoadingOverlay.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+interface SearchLoadingOverlayProps {
+  isVisible: boolean;
+  searchTerm: string;
+}
+
+export default function SearchLoadingOverlay({ isVisible, searchTerm }: SearchLoadingOverlayProps) {
+  if (!isVisible) return null;
+
+  return (
+    <div className="absolute inset-0 bg-white/90 backdrop-blur-sm flex items-center justify-center z-20">
+      <div className="flex flex-col items-center gap-4 p-8 bg-white rounded-xl shadow-lg border border-[var(--color-secondary-200)] max-w-sm text-center">
+        <div className="relative">
+          <div className="w-12 h-12 border-4 border-[var(--color-primary-200)] border-t-[var(--color-primary-600)] rounded-full animate-spin"></div>
+          <div className="absolute inset-0 w-12 h-12 border-4 border-transparent border-b-[var(--color-primary-400)] rounded-full animate-spin" style={{ animationDirection: 'reverse', animationDuration: '1.5s' }}></div>
+        </div>
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold text-[var(--color-secondary-800)]">
+            Searching Products
+          </h3>
+          <p className="text-sm text-[var(--color-secondary-600)]">
+            Looking for &ldquo;{searchTerm}&rdquo;...
+          </p>
+          <p className="text-xs text-[var(--color-secondary-500)]">
+            This may take a few moments
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/components/shop/ShopMobileFilters.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useState } from "react";
+import ModalLayout from "@/app/components/reuseableUI/modalLayout";
+import { FiltersCollapsible } from "@/app/components/filtersCollapsible";
+import { FilterIcon } from "@/app/utils/svgs/filterIcon";
+import type { GraphQLCategory, GraphQLProductType } from "@/lib/api/shop";
+
+type HierarchicalCategory = {
+  id: string;
+  name: string;
+  level: number;
+  count: number;
+  children: HierarchicalCategory[];
+};
+
+type CategoryNode = {
+  id: string;
+  name: string;
+  product_count: number;
+  children?: CategoryNode[];
+};
+
+// Helper function to build hierarchical category structure
+function buildCategoryHierarchy(categories: GraphQLCategory[]) {
+  const categoryMap = new Map();
+  const rootCategories: HierarchicalCategory[] = [];
+  // First pass: create all categories
+  categories.forEach(cat => {
+    categoryMap.set(cat.id, {
+      id: cat.id,
+      name: cat.name,
+      level: cat.level,
+      count: cat.products.totalCount,
+      children: []
+    });
+  });
+
+  // Second pass: build hierarchy
+  categories.forEach(cat => {
+    const hierarchicalCat = categoryMap.get(cat.id)!;
+    
+    if (cat.parent) {
+      const parentCat = categoryMap.get(cat.parent.id);
+      if (parentCat) {
+        parentCat.children.push(hierarchicalCat);
+      } else {
+        // If parent not found, treat as root
+        rootCategories.push(hierarchicalCat);
+      }
+    } else {
+      // No parent, it's a root category
+      rootCategories.push(hierarchicalCat);
+    }
+  });
+
+  // Sort categories by name at each level
+  // const sortCategories = (cats: HierarchicalCategory[]) => {
+  //   cats.sort((a, b) => a.name.localeCompare(b.name));
+  //   cats.forEach(cat => sortCategories(cat.children));
+  // };
+  
+  // sortCategories(rootCategories);
+  return rootCategories;
+}
+
+// Helper function to convert to CategoryNode format for FiltersCollapsible
+function convertToCategoryNodes(categories: HierarchicalCategory[]): CategoryNode[] {
+  return categories.map(cat => ({
+    id: cat.id,
+    name: cat.name,
+    product_count: cat.count,
+    children: cat.children.length > 0 ? convertToCategoryNodes(cat.children) : undefined
+  }));
+}
+
+interface ShopMobileFiltersProps {
+  categories: GraphQLCategory[];
+  productTypes: GraphQLProductType[];
+  selectedCategoryIds: string[];
+  selectedProductTypeIds: string[];
+  onCategoryChange: (ids: string[]) => void;
+  onProductTypeChange: (ids: string[]) => void;
+  filtersLoading: boolean;
+}
+
+export default function ShopMobileFilters({
+  categories,
+  productTypes,
+  selectedCategoryIds,
+  selectedProductTypeIds,
+  onCategoryChange,
+  onProductTypeChange,
+  filtersLoading
+}: ShopMobileFiltersProps) {
+  const [open, setOpen] = useState(false);
+  const [tempSelectedCategories, setTempSelectedCategories] = useState<string[]>(selectedCategoryIds);
+  const [tempSelectedProductTypes, setTempSelectedProductTypes] = useState<string[]>(selectedProductTypeIds);
+
+  const activeCount = selectedCategoryIds.length + selectedProductTypeIds.length;
+
+  const hierarchicalCategories = buildCategoryHierarchy(categories);
+
+  const openModal = () => {
+    setTempSelectedCategories(selectedCategoryIds);
+    setTempSelectedProductTypes(selectedProductTypeIds);
+    setOpen(true);
+  };
+
+  const applyFilters = () => {
+    onCategoryChange(tempSelectedCategories);
+    onProductTypeChange(tempSelectedProductTypes);
+    setOpen(false);
+  };
+
+  const clearFilters = () => {
+    setTempSelectedCategories([]);
+    setTempSelectedProductTypes([]);
+  };
+
+  return (
+    <>
+      {/* Filter Button */}
+      <button
+        type="button"
+        aria-label={
+          activeCount > 0
+            ? `Open filters, ${activeCount} active`
+            : "Open filters"
+        }
+        className="lg:hidden px-4 h-12 cursor-pointer relative border border-[var(--color-secondary-300)] bg-[var(--color-secondary-110)] transition-colors hover:opacity-80"
+        onClick={openModal}
+      >
+        {FilterIcon}
+        {activeCount > 0 && (
+          <span
+            aria-hidden
+            className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--color-primary-600)] text-white text-[10px] leading-[18px] text-center font-semibold"
+          >
+            {activeCount}
+          </span>
+        )}
+      </button>
+
+      {/* Modal */}
+      <ModalLayout
+        isModalOpen={open}
+        onClose={() => setOpen(false)}
+        heading="Filters"
+        className="lg:max-w-lg overflow-hidden"
+      >
+        <div className="flex h-full flex-col">
+          {/* Scrollable content */}
+          <div className="flex-1 overflow-y-auto mt-4 md:mt-6 pt-1 md:pt-2 space-y-6 px-1">
+            <FiltersCollapsible
+              title="Categories"
+              categoryTree={{
+                data: convertToCategoryNodes(hierarchicalCategories),
+                selected: tempSelectedCategories,
+                onChange: setTempSelectedCategories,
+                loading: filtersLoading,
+              }}
+            />
+
+            <FiltersCollapsible
+              title="Product Types"
+              list={{
+                items: productTypes.map(productType => ({
+                  id: productType.id,
+                  label: productType.name,
+                  count: productType.products.totalCount,
+                })),
+                selected: tempSelectedProductTypes,
+                onChange: setTempSelectedProductTypes,
+                loading: filtersLoading,
+              }}
+              defaultOpen={true}
+            />
+          </div>
+
+          {/* Fixed footer inside modal panel (non-scrolling) */}
+          <div className="shrink-0 border-t border-[var(--color-secondary-200)] bg-[var(--color-secondary-50)] px-4 py-3">
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={applyFilters}
+                className="w-full h-11 rounded bg-[var(--color-primary-600)] text-white font-secondary font-semibold transition-colors hover:opacity-90"
+              >
+                Apply Filters
+              </button>
+              <button
+                type="button"
+                onClick={clearFilters}
+                className="w-full h-11 rounded border border-[var(--color-secondary-300)] text-[var(--color-secondary-800)] bg-white font-secondary transition-colors hover:opacity-80"
+              >
+                Clear All
+              </button>
+            </div>
+            <div className="pt-[env(safe-area-inset-bottom)]" />
+          </div>
+        </div>
+      </ModalLayout>
+    </>
+  );
+}