From ea6ad5527863b00d73d47e57c5de877cb743231e Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Tue, 5 Mar 2024 18:26:43 +0200
Subject: [PATCH] feat: improve header/footer builder tracking

---
 .../src/builder/components/BuilderItem.tsx    | 15 ++++++++-----
 .../builder/components/ComponentsPopover.tsx  | 21 +++++++++++++-----
 .../src/builder/components/Slot.tsx           | 22 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx b/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx
index b72e95657e..0792c06055 100644
--- a/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx
+++ b/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx
@@ -17,7 +17,8 @@ type Props = {
 
 const BuilderItem: React.FC<Props> = (props) => {
 	const { componentId, currentSection, slot, row, index } = props;
-	const { actions, builder, sidebarItems } = useContext(BuilderContext);
+	const { actions, builder, sidebarItems, device } =
+		useContext(BuilderContext);
 
 	const itemDetails =
 		window.NeveReactCustomize.HFG[builder].items[componentId];
@@ -52,11 +53,13 @@ const BuilderItem: React.FC<Props> = (props) => {
 			})
 		);
 
-		window.tiTrk?.with('neve').set(`${componentId}_removed`, {
-			feature: builder + '_builder',
-			featureComponent: 'component-removed',
-			featureValue: { row, slot, item: componentId },
-		});
+		window.tiTrk
+			?.with('neve')
+			.set(`${componentId}__${device}_${builder}_removed`, {
+				feature: builder + '_builder',
+				featureComponent: 'component-removed',
+				featureValue: { row, slot, item: componentId, device },
+			});
 	};
 
 	const iconSize = 18;
diff --git a/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx b/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx
index 5d4ef6ee5a..e64e400c2d 100644
--- a/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx
+++ b/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx
@@ -25,7 +25,8 @@ const ComponentsPopover: React.FC<Props> = ({
 
 	const url = window.NeveReactCustomize.upsellComponentsLink;
 
-	const { builder, actions, sidebarItems } = useContext(BuilderContext);
+	const { builder, actions, sidebarItems, device } =
+		useContext(BuilderContext);
 	const { updateLayout, setSidebarItems } = actions;
 
 	const addItemToSlot = (itemId: string) => {
@@ -37,11 +38,19 @@ const ComponentsPopover: React.FC<Props> = ({
 		updateLayout(rowId, slotId, nextItems);
 		setSidebarItems(sidebarItems.filter((i) => i.id !== itemId));
 
-		window.tiTrk?.with('neve').set(`${itemId}_added`, {
-			feature: builder + '_builder',
-			featureComponent: 'component-added',
-			featureValue: { row: rowId, slot: slotId, item: itemId },
-		});
+		window.tiTrk
+			?.with('neve')
+			.set(`${itemId}__${device}_${builder}_added`, {
+				feature: builder + '_builder',
+				featureComponent: 'component-added',
+				featureValue: {
+					row: rowId,
+					slot: slotId,
+					item: itemId,
+					device,
+					trigger: 'popover',
+				},
+			});
 		closePopup();
 	};
 
diff --git a/assets/apps/customizer-controls/src/builder/components/Slot.tsx b/assets/apps/customizer-controls/src/builder/components/Slot.tsx
index 5b39f1ee06..5a4beb2a6e 100644
--- a/assets/apps/customizer-controls/src/builder/components/Slot.tsx
+++ b/assets/apps/customizer-controls/src/builder/components/Slot.tsx
@@ -19,7 +19,7 @@ type Props = {
 };
 
 const Slot: React.FC<Props> = ({ items, slotId, rowId, className }) => {
-	const { currentSection, builder, actions, dragging } =
+	const { currentSection, builder, actions, dragging, device } =
 		useContext(BuilderContext);
 	const { updateLayout, onDragStart } = actions;
 
@@ -44,6 +44,26 @@ const Slot: React.FC<Props> = ({ items, slotId, rowId, className }) => {
 					const nextState = newState.map((item) => {
 						return { id: item.id };
 					});
+
+					// Track the added components.
+					nextState
+						?.filter((item) => !items.some((i) => i.id === item.id))
+						?.forEach((item) => {
+							window.tiTrk
+								?.with('neve')
+								.set(`${item.id}__${device}_${builder}_added`, {
+									feature: builder + '_builder',
+									featureComponent: 'component-added',
+									featureValue: {
+										row: rowId,
+										slot: slotId,
+										item: item.id,
+										device,
+										trigger: 'drag-and-drop',
+									},
+								});
+						});
+
 					updateLayout(rowId, slotId, nextState);
 				}}
 			>