Use new locale middleware and improved list filtering/sorting

lefthook.yml

@@ -0,0 +1,5 @@
+pre-commit:
+  commands:
+    biome:
+      glob: "*.{js,ts,jsx,tsx,json,css}"
+      run: npx biome check --write {staged_files} && git add {staged_files}

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@next/third-parties": "^16.1.6",
     "@sentry/nextjs": "^10.38.0",
-    "@spree/next": "^0.6.0",
+    "@spree/next": "^0.6.1",
     "@spree/sdk": "^0.6.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
@@ -40,6 +40,7 @@
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.4",
     "jsdom": "^28.0.0",
+    "lefthook": "^2.1.2",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.0.18"

src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ProductListParams } from "@spree/sdk";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { ProductListingLayout } from "@/components/products/ProductListingLayout";
@@ -18,10 +19,7 @@ export function ProductsContent({ basePath }: ProductsContentProps) {
   const query = searchParams.get("q") || "";
 
   const fetchFn = useCallback(
-    (
-      params: Record<string, unknown>,
-      options: { currency: string; locale: string },
-    ) => getProducts(params, options),
+    (params: ProductListParams) => getProducts(params),
     [],
   );
 

src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetailsWrapper.tsx

@@ -17,25 +17,20 @@ export function ProductDetailsWrapper({
   slug,
   basePath,
 }: ProductDetailsWrapperProps) {
-  const { currency, locale, loading: storeLoading } = useStore();
+  const { currency } = useStore();
   const [product, setProduct] = useState<StoreProduct | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
   useEffect(() => {
-    // Wait for store context to load (to get correct currency)
-    if (storeLoading) return;
-
     let cancelled = false;
 
     const fetchProduct = async () => {
       setLoading(true);
       try {
-        const data = await getProduct(
-          slug,
-          { includes: "variants,images,option_types" },
-          { currency, locale },
-        );
+        const data = await getProduct(slug, {
+          includes: "variants,images,option_types",
+        });
         if (!cancelled) {
           setProduct(data);
           setError(false);
@@ -58,9 +53,9 @@ export function ProductDetailsWrapper({
     return () => {
       cancelled = true;
     };
-  }, [slug, currency, locale, storeLoading]);
+  }, [slug, currency]);
 
-  if (loading || storeLoading) {
+  if (loading) {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">

src/app/[country]/[locale]/(storefront)/t/[...permalink]/CategoryProductsContent.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ProductListParams } from "@spree/sdk";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { ProductListingLayout } from "@/components/products/ProductListingLayout";
 import { useStore } from "@/contexts/StoreContext";
@@ -23,10 +24,7 @@ export function CategoryProductsContent({
   const { currency } = useStore();
 
   const fetchFn = useCallback(
-    (
-      params: Record<string, unknown>,
-      options: { currency: string; locale: string },
-    ) => getTaxonProducts(taxonPermalink, params, options),
+    (params: ProductListParams) => getTaxonProducts(taxonPermalink, params),
     [taxonPermalink],
   );
 

src/components/products/ProductFilters.tsx

@@ -9,6 +9,22 @@ import type {
 import { memo, useState } from "react";
 import { ChevronDownIcon } from "@/components/icons";
 
+const SORT_LABELS: Record<string, string> = {
+  manual: "Manual",
+  best_selling: "Best Selling",
+  "price asc": "Price (low-high)",
+  "price desc": "Price (high-low)",
+  "available_on desc": "Newest",
+  "available_on asc": "Oldest",
+  "name asc": "Name (A-Z)",
+  "name desc": "Name (Z-A)",
+};
+
+const AVAILABILITY_LABELS: Record<string, string> = {
+  in_stock: "In Stock",
+  out_of_stock: "Out of Stock",
+};
+
 interface ProductFiltersProps {
   taxonId?: string;
   filtersData: ProductFiltersResponse | null;
@@ -118,7 +134,7 @@ export const ProductFilters = memo(function ProductFilters({
         >
           {filtersData.sort_options.map((option) => (
             <option key={option.id} value={option.id}>
-              {option.label}
+              {SORT_LABELS[option.id] || option.id}
             </option>
           ))}
         </select>
@@ -141,7 +157,7 @@ export const ProductFilters = memo(function ProductFilters({
             return (
               <FilterSection
                 key={filter.id}
-                title={filter.label}
+                title="Price"
                 expanded={expandedSections.has(filter.id)}
                 onToggle={() => toggleSection(filter.id)}
               >
@@ -158,7 +174,7 @@ export const ProductFilters = memo(function ProductFilters({
             return (
               <FilterSection
                 key={filter.id}
-                title={filter.label}
+                title="Availability"
                 expanded={expandedSections.has(filter.id)}
                 onToggle={() => toggleSection(filter.id)}
               >
@@ -173,7 +189,7 @@ export const ProductFilters = memo(function ProductFilters({
             return (
               <FilterSection
                 key={filter.id}
-                title={filter.label}
+                title={(filter as OptionFilter).presentation}
                 expanded={expandedSections.has(filter.id)}
                 onToggle={() => toggleSection(filter.id)}
               >
@@ -304,7 +320,9 @@ function AvailabilityFilterSection({
             onChange={() => onChange(option.id as "in_stock" | "out_of_stock")}
             className="text-primary-500"
           />
-          <span className="text-sm text-gray-700">{option.label}</span>
+          <span className="text-sm text-gray-700">
+            {AVAILABILITY_LABELS[option.id] || option.id}
+          </span>
           <span className="text-xs text-gray-400">({option.count})</span>
         </label>
       ))}
@@ -343,7 +361,7 @@ function OptionFilterSection({
             onChange={() => onToggle(option.id)}
             className="rounded text-primary-500"
           />
-          <span className="text-sm text-gray-700">{option.label}</span>
+          <span className="text-sm text-gray-700">{option.presentation}</span>
           <span className="text-xs text-gray-400">({option.count})</span>
         </label>
       ))}

src/components/search/SearchBar.tsx

@@ -15,7 +15,7 @@ interface SearchBarProps {
 
 export function SearchBar({ basePath }: SearchBarProps) {
   const router = useRouter();
-  const { currency, locale } = useStore();
+  const { currency } = useStore();
   const [query, setQuery] = useState("");
   const [suggestions, setSuggestions] = useState<StoreProduct[]>([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -35,13 +35,10 @@ export function SearchBar({ basePath }: SearchBarProps) {
 
       setLoading(true);
       try {
-        const response = await getProducts(
-          {
-            "q[multi_search]": searchQuery,
-            per_page: 6,
-          },
-          { currency, locale },
-        );
+        const response = await getProducts({
+          multi_search: searchQuery,
+          per_page: 6,
+        });
         setSuggestions(response.data);
         if (response.data.length > 0) {
           trackQuickSearch(response.data, searchQuery, currency);
@@ -53,7 +50,7 @@ export function SearchBar({ basePath }: SearchBarProps) {
         setLoading(false);
       }
     },
-    [currency, locale],
+    [currency],
   );
 
   // Debounced search

src/hooks/useCarouselProducts.ts

@@ -1,6 +1,5 @@
 import type { StoreProduct } from "@spree/sdk";
 import { useEffect, useState } from "react";
-import { useStore } from "@/contexts/StoreContext";
 import { getProducts, getTaxonProducts } from "@/lib/data/products";
 
 interface UseCarouselProductsOptions {
@@ -18,48 +17,44 @@ export function useCarouselProducts({
   taxonId,
   limit = 8,
 }: UseCarouselProductsOptions = {}): UseCarouselProductsResult {
-  const { currency, locale, loading: storeLoading } = useStore();
   const [products, setProducts] = useState<StoreProduct[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     let cancelled = false;
 
-    if (!storeLoading) {
-      const fetchProducts = async () => {
-        setLoading(true);
-        setError(null);
-        try {
-          const options = { currency, locale };
-          const params = { per_page: limit };
+    const fetchProducts = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const params = { per_page: limit };
 
-          const response = taxonId
-            ? await getTaxonProducts(taxonId, params, options)
-            : await getProducts(params, options);
+        const response = taxonId
+          ? await getTaxonProducts(taxonId, params)
+          : await getProducts(params);
 
-          if (!cancelled) {
-            setProducts(response.data);
-          }
-        } catch (err) {
-          console.error("Failed to fetch carousel products:", err);
-          if (!cancelled) {
-            setError("Failed to load products. Please try again later.");
-          }
-        } finally {
-          if (!cancelled) {
-            setLoading(false);
-          }
+        if (!cancelled) {
+          setProducts(response.data);
         }
-      };
+      } catch (err) {
+        console.error("Failed to fetch carousel products:", err);
+        if (!cancelled) {
+          setError("Failed to load products. Please try again later.");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
 
-      fetchProducts();
-    }
+    fetchProducts();
 
     return () => {
       cancelled = true;
     };
-  }, [currency, locale, storeLoading, taxonId, limit]);
+  }, [taxonId, limit]);
 
-  return { products, loading: loading || storeLoading, error };
+  return { products, loading, error };
 }

src/hooks/useProductListing.ts

@@ -3,11 +3,11 @@
 import type {
   PaginatedResponse,
   ProductFiltersResponse,
+  ProductListParams,
   StoreProduct,
 } from "@spree/sdk";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ActiveFilters } from "@/components/products/ProductFilters";
-import { useStore } from "@/contexts/StoreContext";
 import { getProductFilters } from "@/lib/data/products";
 import { buildProductQueryParams } from "@/lib/utils/product-query";
 
@@ -26,13 +26,12 @@ function filtersEqual(a: ActiveFilters, b: ActiveFilters): boolean {
 }
 
 interface UseProductListingOptions {
-  /** Function that fetches a page of products given query params and store options. */
+  /** Function that fetches a page of products given query params. */
   fetchFn: (
-    params: Record<string, unknown>,
-    options: { currency: string; locale: string },
+    params: ProductListParams,
   ) => Promise<PaginatedResponse<StoreProduct>>;
   /** Optional params passed to getProductFilters (e.g. { taxon_id }). */
-  filterParams?: Record<string, unknown>;
+  filterParams?: ProductListParams;
   /** Optional search query string. */
   searchQuery?: string;
 }
@@ -42,8 +41,6 @@ export function useProductListing({
   filterParams = {},
   searchQuery = "",
 }: UseProductListingOptions) {
-  const { currency, locale, loading: storeLoading } = useStore();
-
   const [products, setProducts] = useState<StoreProduct[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -75,16 +72,13 @@ export function useProductListing({
     async (page: number, filters: ActiveFilters, query: string) => {
       try {
         const queryParams = buildProductQueryParams(filters, query);
-        return await fetchFn(
-          { page, per_page: 12, ...queryParams },
-          { currency, locale },
-        );
+        return await fetchFn({ page, per_page: 12, ...queryParams });
       } catch (error) {
         console.error("Failed to fetch products:", error);
         return null;
       }
     },
-    [fetchFn, currency, locale],
+    [fetchFn],
   );
 
   const loadProducts = useCallback(
@@ -112,7 +106,6 @@ export function useProductListing({
 
   // Fetch filters (scoped to search query when present)
   useEffect(() => {
-    if (storeLoading) return;
     // Track filterParams changes for re-fetching on soft-nav
     void filterParamsKey;
 
@@ -123,12 +116,9 @@ export function useProductListing({
       try {
         const params = { ...filterParamsRef.current };
         if (searchQuery) {
-          params["q[multi_search]"] = searchQuery;
+          params.multi_search = searchQuery;
         }
-        const response = await getProductFilters(params, {
-          currency,
-          locale,
-        });
+        const response = await getProductFilters(params);
         if (!cancelled) {
           setFiltersData(response);
         }
@@ -146,15 +136,14 @@ export function useProductListing({
     return () => {
       cancelled = true;
     };
-  }, [currency, locale, storeLoading, searchQuery, filterParamsKey]);
+  }, [searchQuery, filterParamsKey]);
 
-  // Load products when search query, store context, or filter params change
+  // Load products when search query or filter params change
   useEffect(() => {
-    if (storeLoading) return;
     // Track filterParams changes for re-fetching on soft-nav
     void filterParamsKey;
     loadProducts(filtersRef.current, searchQuery);
-  }, [storeLoading, searchQuery, loadProducts, filterParamsKey]);
+  }, [searchQuery, loadProducts, filterParamsKey]);
 
   const handleFilterChange = useCallback(
     (newFilters: ActiveFilters) => {