From 8b8d19327dae7a7d9a9d8f2508e5bcdee1e4099d Mon Sep 17 00:00:00 2001
From: Maikel Perez <maikel.perez@automattic.com>
Date: Thu, 12 Sep 2024 12:47:23 -0300
Subject: [PATCH] CYS: Fix Looker dashboard data (#51206)

* Track data for font and color pairings including 'Create your own' option in CYS

* Add changelog file

* Track data for logo flow

* Send the open param as part of the tracking event customize_your_store_assembler_hub_color_palette_create_toggle
---
 .../global-styles/variation-container.jsx     | 23 +++++++++++++
 ...idebar-navigation-screen-color-palette.tsx | 10 ++++++
 .../sidebar-navigation-screen-logo.tsx        | 34 ++++++++++++++++---
 plugins/woocommerce/changelog/add-50832       |  4 +++
 4 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/add-50832

diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
index ab05865014a..60313651ee7 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
@@ -14,6 +14,11 @@ import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/compo
 import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { isEqual, noop } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import { trackEvent } from '~/customize-store/tracking';
+
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 // Removes the typography settings from the styles when the user is changing
@@ -100,6 +105,24 @@ export const VariationContainer = ( { variation, children } ) => {
 				),
 			};
 		} );
+
+		if ( variation.settings.color?.palette ) {
+			trackEvent(
+				'customize_your_store_assembler_hub_color_palette_item_click',
+				{
+					item: variation.title,
+				}
+			);
+		}
+
+		if ( variation.settings.typography ) {
+			trackEvent(
+				'customize_your_store_assembler_hub_typography_item_click',
+				{
+					item: variation.title,
+				}
+			);
+		}
 	};
 
 	const selectOnEnter = ( event ) => {
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
index b1b10bab2e6..c851175894a 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-color-palette.tsx
@@ -17,6 +17,7 @@ import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { CustomizeStoreContext } from '../';
 import { SidebarNavigationScreen } from './sidebar-navigation-screen';
 import { ColorPalette, ColorPanel } from './global-styles';
+import { trackEvent } from '~/customize-store/tracking';
 import { FlowType } from '~/customize-store/types';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -27,6 +28,14 @@ const SidebarNavigationScreenColorPaletteContent = () => {
 	const hasCreatedOwnColors = !! (
 		user.settings.color && user.settings.color.palette.hasCreatedOwnColors
 	);
+
+	function handlePanelBodyToggle( open?: boolean ) {
+		trackEvent(
+			'customize_your_store_assembler_hub_color_palette_create_toggle',
+			{ open }
+		);
+	}
+
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
 	// the block editor store's `__internalIsInitialized` is true before
@@ -45,6 +54,7 @@ const SidebarNavigationScreenColorPaletteContent = () => {
 				className="woocommerce-customize-store__color-panel-container"
 				title={ __( 'or create your own', 'woocommerce' ) }
 				initialOpen={ hasCreatedOwnColors }
+				onToggle={ handlePanelBodyToggle }
 			>
 				<ColorPanel />
 			</PanelBody>
diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
index 0a55417170d..10f4c6a5f02 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-logo.tsx
@@ -297,16 +297,26 @@ const LogoEdit = ( {
 		);
 	}
 
+	function handleMediaUploadSelect( media: { id: string; url: string } ) {
+		onInitialSelectLogo( media );
+		trackEvent( 'customize_your_store_assembler_hub_logo_select' );
+	}
+
 	if ( ! logoUrl ) {
 		return (
 			<MediaUploadCheck>
 				<MediaUpload
-					onSelect={ onInitialSelectLogo }
+					onSelect={ handleMediaUploadSelect }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					render={ ( { open }: { open: () => void } ) => (
 						<Button
 							variant="link"
-							onClick={ open }
+							onClick={ () => {
+								open();
+								trackEvent(
+									'customize_your_store_assembler_hub_logo_add_click'
+								);
+							} }
 							className="block-library-site-logo__inspector-upload-container"
 						>
 							<span>
@@ -351,10 +361,17 @@ const LogoEdit = ( {
 		<>
 			<MediaUploadCheck>
 				<MediaUpload
-					onSelect={ onInitialSelectLogo }
+					onSelect={ handleMediaUploadSelect }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					render={ ( { open }: { open: () => void } ) =>
-						cloneElement( logoImg, { onClick: open } )
+						cloneElement( logoImg, {
+							onClick() {
+								open();
+								trackEvent(
+									'customize_your_store_assembler_hub_logo_edit_click'
+								);
+							},
+						} )
 					}
 				/>
 			</MediaUploadCheck>
@@ -478,6 +495,9 @@ export const SidebarNavigationScreenLogo = ( {
 															media
 														);
 														onClose();
+														trackEvent(
+															'customize_your_store_assembler_hub_logo_select'
+														);
 													} }
 													allowedTypes={
 														ALLOWED_MEDIA_TYPES
@@ -490,6 +510,9 @@ export const SidebarNavigationScreenLogo = ( {
 														<MenuItem
 															onClick={ () => {
 																open();
+																trackEvent(
+																	'customize_your_store_assembler_hub_logo_replace_click'
+																);
 															} }
 														>
 															{ __(
@@ -508,6 +531,9 @@ export const SidebarNavigationScreenLogo = ( {
 												onClick={ () => {
 													onClose();
 													onRemoveLogo();
+													trackEvent(
+														'customize_your_store_assembler_hub_logo_remove_click'
+													);
 												} }
 											>
 												{ __(
diff --git a/plugins/woocommerce/changelog/add-50832 b/plugins/woocommerce/changelog/add-50832
new file mode 100644
index 00000000000..e50768a52a4
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-50832
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Track data for font and color pairings including 'Create your own' option in CYS