From 065db4d06b637ccb839cc46548f53ce70b5f4ccc Mon Sep 17 00:00:00 2001
From: aratidgr8 <aratidgr8@gmail.com>
Date: Tue, 6 Aug 2024 19:19:32 +0530
Subject: [PATCH] Added Store page button & links tracking

---
 build/index.asset.php          |  2 +-
 src/components/Store.js        | 32 ++++++++++++++++++++++++++++----
 src/sdk/hiiveEventsTracking.js |  5 +++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/build/index.asset.php b/build/index.asset.php
index 3da15ed2..0e532265 100644
--- a/build/index.asset.php
+++ b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '88c3965074fd64b0e3b4');
+<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '8aa092b05dbe537af35e');
diff --git a/src/components/Store.js b/src/components/Store.js
index c71836a7..ebeb6553 100644
--- a/src/components/Store.js
+++ b/src/components/Store.js
@@ -1,10 +1,11 @@
+import { useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import { NewfoldRuntime } from "../sdk/NewfoldRuntime";
+import { onAnchorNavigate, onButtonNavigate } from "../sdk/hiiveEventsTracking";
 import { QuickLook } from "./QuickLook";
 import { Section } from "./Section";
-import { WooCommerceUnavailable } from "./WooCommerceUnavailable";
-import { useEffect } from "@wordpress/element";
 import { SiteStatus } from "./SiteStatus";
-import { NewfoldRuntime } from "../sdk/NewfoldRuntime";
+import { WooCommerceUnavailable } from "./WooCommerceUnavailable";
 
 export function Store(props) {
 
@@ -13,9 +14,32 @@ export function Store(props) {
       const child = document.querySelector(".nfd-feature-upsell > div");  
       child.classList.remove("nfd-grayscale") 
       document.querySelector(".nfd-feature-upsell .nfd-absolute.nfd-justify-center").style.backgroundColor = "rgba(255, 255, 255, .5)"
-    }    
+    }  
+
+    const storeContainer = document.querySelector('#ecommerce-features-wrapper');
+
+    const storeButtons = Array.from(
+      storeContainer.querySelectorAll( 'button' )
+    );
+    const storeAnchors = Array.from( storeContainer.querySelectorAll( 'a' ) );
+
+    if ( storeButtons.length ) {
+      storeButtons.forEach( ( button ) => {
+        button.addEventListener( 'click', onButtonNavigate );
+        button.addEventListener( 'onkeydown', onButtonNavigate );      
+      } );
+    }
+
+    if ( storeAnchors.length ) {
+      storeAnchors.forEach( ( link ) => {
+          link.addEventListener( 'click', onAnchorNavigate );
+          link.addEventListener( 'onkeydown', onAnchorNavigate );      
+      } );
+    }
+  
   }, []);
 
+
   return (
     <>
       <Section.Container>
diff --git a/src/sdk/hiiveEventsTracking.js b/src/sdk/hiiveEventsTracking.js
index d21e7027..c35d1fce 100644
--- a/src/sdk/hiiveEventsTracking.js
+++ b/src/sdk/hiiveEventsTracking.js
@@ -1,3 +1,4 @@
+import apiFetch from "@wordpress/api-fetch";
 import { NewfoldRuntime } from "./NewfoldRuntime";
 
 /**
@@ -5,10 +6,10 @@ import { NewfoldRuntime } from "./NewfoldRuntime";
  *
  * @param {Object} event The event data to be tracked.
  */
-export const sendEvent = ( event ) => {
+const sendEvent = ( event ) => {
     event.data = event.data || {};
     event.data.page = window.location.href;
-    methods.apiFetch( {
+    apiFetch( {
         url: NewfoldRuntime.createApiUrl( '/newfold-data/v1/events/' ),
         method: 'POST',
         data: event,