Merge pull request #286 from vtex-apps/feature/on-product-click

Add action on product click

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- `actionOnProductClick` prop to `ProductSummaryList`.
+
 ## [2.64.0] - 2020-11-30
 ### Added
 - `ProductSummaryImage` can now receive a custom placeholder image by using the `placeholder` prop.

react/ProductSummaryList.js

@@ -60,6 +60,7 @@ function ProductSummaryList(props) {
     installmentCriteria,
     children,
     ProductSummary,
+    actionOnProductClick,
   } = props
 
   const { data, loading, error } = useQuery(productsQuery, {
@@ -90,6 +91,7 @@ function ProductSummaryList(props) {
     <ProductSummaryListWithoutQuery
       products={products}
       ProductSummary={ProductSummary}
+      actionOnProductClick={actionOnProductClick}
     >
       <ProductListStructuredData products={products} />
       {children}

react/ProductSummaryListWithoutQuery.js

@@ -8,7 +8,7 @@ import ProductListEventCaller from './components/ProductListEventCaller'
 
 const { ProductListProvider } = ProductListContext
 
-function List({ children, products, ProductSummary }) {
+function List({ children, products, ProductSummary, actionOnProductClick }) {
   const { list } = useListContext()
   const { treePath } = useTreePath()
 
@@ -18,8 +18,19 @@ function List({ children, products, ProductSummary }) {
       products.map((product) => {
         const normalizedProduct = mapCatalogProductToProductSummary(product)
 
+        const handleOnClick = () => {
+          if (typeof actionOnProductClick === 'function') {
+            actionOnProductClick(normalizedProduct)
+          }
+        }
+
         if (typeof ProductSummary === 'function') {
-          return <ProductSummary product={normalizedProduct} />
+          return (
+            <ProductSummary
+              product={normalizedProduct}
+              actionOnClick={handleOnClick}
+            />
+          )
         }
 
         return (
@@ -28,12 +39,13 @@ function List({ children, products, ProductSummary }) {
             key={product.id}
             treePath={treePath}
             product={normalizedProduct}
+            actionOnClick={handleOnClick}
           />
         )
       })
 
     return list.concat(componentList)
-  }, [products, treePath, list, ProductSummary])
+  }, [products, treePath, list, ProductSummary, actionOnProductClick])
 
   return (
     <ListContextProvider list={newListContextValue}>
@@ -46,10 +58,15 @@ const ProductSummaryListWithoutQuery = ({
   children,
   products,
   ProductSummary,
+  actionOnProductClick,
 }) => {
   return (
     <ProductListProvider>
-      <List products={products} ProductSummary={ProductSummary}>
+      <List
+        products={products}
+        ProductSummary={ProductSummary}
+        actionOnProductClick={actionOnProductClick}
+      >
         {children}
       </List>
       <ProductListEventCaller />