Address duplicate activity calls

SalesforceCommerceCloud · Sep 13, 2022 · df01004 · df01004
1 parent 58d7b91
commit df01004
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/packages/template-retail-react-app/app/pages/checkout/util/checkout-context.js b/packages/template-retail-react-app/app/pages/checkout/util/checkout-context.js
@@ -88,11 +88,10 @@ export const CheckoutProvider = ({children}) => {
     }, [customer, basket])
 
     /**************** Einstein ****************/
-    // Run this when checkout begins and when a user logs in during checkout
-    // TODO: This fires twice when an already logged in customer goes to checkout
+    // Run this once when checkout begins
     useEffect(() => {
-        if (basket) {
-            const products = basket.productItems?.map((product) => {
+        if (basket && basket.productItems) {
+            const products = basket.productItems.map((product) => {
                 const {productId, sku = '', price = '', quantity = ''} = product
                 return {
                     id: productId,
@@ -103,7 +102,7 @@ export const CheckoutProvider = ({children}) => {
             })
             einstein.sendBeginCheckout(products, basket.productSubTotal)
         }
-    }, [customer]) 
+    }, []) 
 
     // We combine our state and actions into a single context object. This is much more
     // convenient than having to import and bind actions seprately. State updates will

diff --git a/packages/template-retail-react-app/app/pages/product-list/index.jsx b/packages/template-retail-react-app/app/pages/product-list/index.jsx
@@ -103,6 +103,7 @@ const ProductList = (props) => {
     const {categories} = useCategories()
     const toast = useToast()
     const einstein = useEinstein()
+    const previousCategoryProducts = useRef()
 
     // Get the current category from global state.
     let category = undefined
@@ -194,17 +195,23 @@ const ProductList = (props) => {
             })
             einstein.sendViewSearch(searchQuery, products)
         } else if (category && productSearchResult && productSearchResult.hits) {
-            // TODO: When navigating between categories, this runs twice! Once when category changes and again when the search results update
-            const products = productSearchResult.hits.map((productSearchItem) => {
-                const {productId, sku = '', altId = '', altIdType = ''} = productSearchItem
-                return {
-                    id: productId,
-                    sku,
-                    altId,
-                    altIdType
-                }
-            })
-            einstein.sendViewCategory(category, products)
+
+            // Categories update asynchronously from category search results. To ensure we are
+            // sending a viewCategory only after both category and search results update, we track
+            // the previous category's search results in a useRef.
+            if (previousCategoryProducts.current != productSearchResult.hits) {
+                const products = productSearchResult.hits.map((productSearchItem) => {
+                    const {productId, sku = '', altId = '', altIdType = ''} = productSearchItem
+                    return {
+                        id: productId,
+                        sku,
+                        altId,
+                        altIdType
+                    }
+                })
+                einstein.sendViewCategory(category, products)
+                previousCategoryProducts.current = productSearchResult.hits
+            }
         }
     }, [searchQuery, category, productSearchResult])