Merge branch 'master' of github.com:vercel/commerce into outgrow-reaction-commerce-provider

Signed-off-by: Loan Laux <loan@outgrow.io>

framework/shopify/product/use-search.tsx

@@ -1,7 +1,14 @@
 import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 
-import { ProductEdge } from '../schema'
+import {
+  CollectionEdge,
+  GetAllProductsQuery,
+  GetProductsFromCollectionQueryVariables,
+  Product as ShopifyProduct,
+  ProductEdge,
+} from '../schema'
+
 import {
   getAllProductsQuery,
   getCollectionProductsQuery,
@@ -9,70 +16,76 @@ import {
   normalizeProduct,
 } from '../utils'
 
-import { Product } from '@commerce/types'
-
-export default useSearch as UseSearch<typeof handler>
+import type { SearchProductsHook } from '../types/product'
 
 export type SearchProductsInput = {
   search?: string
-  categoryId?: string
-  brandId?: string
+  categoryId?: number
+  brandId?: number
   sort?: string
+  locale?: string
 }
 
-export type SearchProductsData = {
-  products: Product[]
-  found: boolean
-}
+export default useSearch as UseSearch<typeof handler>
 
-export const handler: SWRHook<
-  SearchProductsData,
-  SearchProductsInput,
-  SearchProductsInput
-> = {
+export const handler: SWRHook<SearchProductsHook> = {
   fetchOptions: {
     query: getAllProductsQuery,
   },
   async fetcher({ input, options, fetch }) {
     const { categoryId, brandId } = input
+    const method = options?.method
+    const variables = getSearchVariables(input)
+    let products
 
-    const data = await fetch({
-      query: categoryId ? getCollectionProductsQuery : options.query,
-      method: options?.method,
-      variables: getSearchVariables(input),
-    })
-
-    let edges
-
+    // change the query to getCollectionProductsQuery when categoryId is set
     if (categoryId) {
-      edges = data.node?.products?.edges ?? []
-      if (brandId) {
-        edges = edges.filter(
-          ({ node: { vendor } }: ProductEdge) =>
-            vendor.replace(/\s+/g, '-').toLowerCase() === brandId
-        )
-      }
+      const data = await fetch<
+        CollectionEdge,
+        GetProductsFromCollectionQueryVariables
+      >({
+        query: getCollectionProductsQuery,
+        method,
+        variables,
+      })
+      // filter on client when brandId & categoryId are set since is not available on collection product query
+      products = brandId
+        ? data.node.products.edges.filter(
+            ({ node: { vendor } }: ProductEdge) =>
+              vendor.replace(/\s+/g, '-').toLowerCase() === brandId
+          )
+        : data.node.products.edges
     } else {
-      edges = data.products?.edges ?? []
+      const data = await fetch<GetAllProductsQuery>({
+        query: options.query,
+        method,
+        variables,
+      })
+      products = data.products.edges
     }
 
     return {
-      products: edges.map(({ node }: ProductEdge) => normalizeProduct(node)),
-      found: !!edges.length,
+      products: products?.map(({ node }) =>
+        normalizeProduct(node as ShopifyProduct)
+      ),
+      found: !!products?.length,
     }
   },
-  useHook: ({ useData }) => (input = {}) => {
-    return useData({
-      input: [
-        ['search', input.search],
-        ['categoryId', input.categoryId],
-        ['brandId', input.brandId],
-        ['sort', input.sort],
-      ],
-      swrOptions: {
-        revalidateOnFocus: false,
-        ...input.swrOptions,
-      },
-    })
-  },
+  useHook:
+    ({ useData }) =>
+    (input = {}) => {
+      return useData({
+        input: [
+          ['search', input.search],
+          ['categoryId', input.categoryId],
+          ['brandId', input.brandId],
+          ['sort', input.sort],
+          ['locale', input.locale],
+        ],
+        swrOptions: {
+          revalidateOnFocus: false,
+          ...input.swrOptions,
+        },
+      })
+    },
 }