From 6a43c2f986bab67596d90da6ce7894c7e7e7d95c Mon Sep 17 00:00:00 2001
From: Thalyta Fabrine <thalyta.trindade@vtex.com.br>
Date: Tue, 24 Nov 2020 15:30:59 -0300
Subject: [PATCH] Add action on product click

---
 CHANGELOG.md                            |  3 +++
 react/ProductSummaryList.js             |  2 ++
 react/ProductSummaryListWithoutQuery.js | 25 +++++++++++++++++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index feabe229..59016549 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/react/ProductSummaryList.js b/react/ProductSummaryList.js
index 24dcb2b5..c1f82a32 100644
--- a/react/ProductSummaryList.js
+++ b/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}
diff --git a/react/ProductSummaryListWithoutQuery.js b/react/ProductSummaryListWithoutQuery.js
index 1edff2d0..745ac62c 100644
--- a/react/ProductSummaryListWithoutQuery.js
+++ b/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 />