Add missing Tracks events to attribute modals (#40517)

* Add tracks events

* Add remove icon recording

* Add tracking to new product modal

* Add changelog

* Remove not used `recordEvent`

packages/js/product-editor/changelog/fix-40502_record_events_for_variation_options_modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Add missing Tracks events to attribute modals #40517

packages/js/product-editor/src/blocks/variation-options/edit.tsx

@@ -14,6 +14,7 @@ import {
 	ProductAttribute,
 	useUserPreferences,
 } from '@woocommerce/data';
+import { recordEvent } from '@woocommerce/tracks';
 import { Link } from '@woocommerce/components';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore No types for this exist yet.
@@ -113,6 +114,9 @@ export function Edit( {
 					attributes,
 					entityDefaultAttributes,
 				] ) }
+				onAdd={ () => {
+					recordEvent( 'product_options_modal_add_button_click' );
+				} }
 				onChange={ handleChange }
 				createNewAttributesAsGlobal={ true }
 				useRemoveConfirmationModal={ true }
@@ -121,6 +125,32 @@ export function Edit( {
 						product_block_variable_options_notice_dismissed: 'yes',
 					} )
 				}
+				onAddAnother={ () => {
+					recordEvent(
+						'product_add_options_modal_add_another_option_button_click'
+					);
+				} }
+				onNewModalCancel={ () => {
+					recordEvent( 'product_options_modal_cancel_button_click' );
+				} }
+				onNewModalOpen={ () => {
+					recordEvent( 'product_options_add_option' );
+				} }
+				onRemoveItem={ () => {
+					recordEvent(
+						'product_add_options_modal_remove_option_button_click'
+					);
+				} }
+				onRemove={ () =>
+					recordEvent(
+						'product_remove_option_confirmation_confirm_click'
+					)
+				}
+				onRemoveCancel={ () =>
+					recordEvent(
+						'product_remove_option_confirmation_cancel_click'
+					)
+				}
 				disabledAttributeIds={ entityAttributes
 					.filter( ( attr ) => ! attr.variation )
 					.map( ( attr ) => attr.id ) }

packages/js/product-editor/src/blocks/variations/edit.tsx

@@ -79,6 +79,7 @@ export function Edit( {
 
 	const openNewModal = () => {
 		setIsNewModalVisible( true );
+		recordEvent( 'product_options_add_first_option' );
 	};
 
 	const closeNewModal = () => {
@@ -133,9 +134,22 @@ export function Edit( {
 					createNewAttributesAsGlobal={ true }
 					notice={ '' }
 					onCancel={ () => {
+						recordEvent(
+							'product_options_modal_cancel_button_click'
+						);
 						closeNewModal();
 					} }
 					onAdd={ handleAdd }
+					onAddAnother={ () => {
+						recordEvent(
+							'product_add_options_modal_add_another_option_button_click'
+						);
+					} }
+					onRemoveItem={ () => {
+						recordEvent(
+							'product_add_options_modal_remove_option_button_click'
+						);
+					} }
 					selectedAttributeIds={ variationOptions.map(
 						( attr ) => attr.id
 					) }

packages/js/product-editor/src/components/attribute-control/attribute-control.tsx

@@ -36,6 +36,8 @@ import { TRACKS_SOURCE } from '../../constants';
 type AttributeControlProps = {
 	value: EnhancedProductAttribute[];
 	onAdd?: ( attribute: EnhancedProductAttribute[] ) => void;
+	onAddAnother?: () => void;
+	onRemoveItem?: () => void;
 	onChange: ( value: ProductAttribute[] ) => void;
 	onEdit?: ( attribute: ProductAttribute ) => void;
 	onRemove?: ( attribute: ProductAttribute ) => void;
@@ -71,6 +73,8 @@ type AttributeControlProps = {
 export const AttributeControl: React.FC< AttributeControlProps > = ( {
 	value,
 	onAdd = () => {},
+	onAddAnother = () => {},
+	onRemoveItem = () => {},
 	onChange,
 	onEdit = () => {},
 	onNewModalCancel = () => {},
@@ -183,13 +187,6 @@ export const AttributeControl: React.FC< AttributeControlProps > = ( {
 						getAttributeId( newAttr ) === getAttributeId( current )
 				)
 		);
-		recordEvent( 'product_options_add', {
-			source: TRACKS_SOURCE,
-			options: addedAttributesOnly.map( ( attribute ) => ( {
-				attribute: attribute.name,
-				values: attribute.options,
-			} ) ),
-		} );
 		handleChange( [ ...value, ...addedAttributesOnly ] );
 		onAdd( newAttributes );
 		closeNewModal();
@@ -244,9 +241,6 @@ export const AttributeControl: React.FC< AttributeControlProps > = ( {
 				className="woocommerce-add-attribute-list-item__add-button"
 				onClick={ () => {
 					openNewModal();
-					recordEvent( 'product_options_add_button_click', {
-						source: TRACKS_SOURCE,
-					} );
 				} }
 			>
 				{ uiStrings.newAttributeListItemLabel }
@@ -305,6 +299,8 @@ export const AttributeControl: React.FC< AttributeControlProps > = ( {
 						onNewModalCancel();
 					} }
 					onAdd={ handleAdd }
+					onAddAnother={ onAddAnother }
+					onRemoveItem={ onRemoveItem }
 					selectedAttributeIds={ value.map( ( attr ) => attr.id ) }
 					createNewAttributesAsGlobal={ createNewAttributesAsGlobal }
 					disabledAttributeIds={ disabledAttributeIds }

packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx

@@ -14,7 +14,6 @@ import {
 	ProductAttribute,
 	ProductAttributeTerm,
 } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
 import { Button, Modal, Notice } from '@wordpress/components';
 
 /**
@@ -44,6 +43,8 @@ type NewAttributeModalProps = {
 	addLabel?: string;
 	onCancel: () => void;
 	onAdd: ( newCategories: EnhancedProductAttribute[] ) => void;
+	onAddAnother?: () => void;
+	onRemoveItem?: () => void;
 	selectedAttributeIds?: number[];
 	createNewAttributesAsGlobal?: boolean;
 	disabledAttributeIds?: number[];
@@ -75,6 +76,8 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 	addLabel = __( 'Add', 'woocommerce' ),
 	onCancel,
 	onAdd,
+	onAddAnother = () => {},
+	onRemoveItem = () => {},
 	selectedAttributeIds = [],
 	createNewAttributesAsGlobal = false,
 	disabledAttributeIds = [],
@@ -102,6 +105,7 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 	) => {
 		setValue( 'attributes', [ ...values.attributes, null ] );
 		scrollAttributeIntoView( values.attributes.length );
+		onAddAnother();
 	};
 
 	const hasTermsOrOptions = ( attribute: EnhancedProductAttribute ) => {
@@ -164,9 +168,7 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 			value: AttributeForm[ keyof AttributeForm ]
 		) => void
 	) => {
-		recordEvent(
+		onRemoveItem();
-			'product_add_attributes_modal_remove_attribute_button_click'
-		);
 		if ( values.attributes.length > 1 ) {
 			setValue(
 				'attributes',
@@ -465,9 +467,6 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 									variant="tertiary"
 									label={ addAnotherAccessibleLabel }
 									onClick={ () => {
-										recordEvent(
-											'product_add_attributes_modal_add_another_attribute_button_click'
-										);
 										addAnother( values, setValue );
 									} }
 								>

packages/js/product-editor/src/components/attributes/attributes.tsx

@@ -57,6 +57,16 @@ export const Attributes: React.FC< AttributesProps > = ( {
 				}
 				recordEvent( 'product_add_attribute_button' );
 			} }
+			onAddAnother={ () => {
+				recordEvent(
+					'product_add_attributes_modal_add_another_attribute_button_click'
+				);
+			} }
+			onRemoveItem={ () => {
+				recordEvent(
+					'product_add_attributes_modal_remove_attribute_button_click'
+				);
+			} }
 			onRemove={ () =>
 				recordEvent(
 					'product_remove_attribute_confirmation_confirm_click'