diff --git a/packages/js/product-editor/changelog/add-single_variation_missing_tracks_events b/packages/js/product-editor/changelog/add-single_variation_missing_tracks_events new file mode 100644 index 00000000000..bee19e671c4 --- /dev/null +++ b/packages/js/product-editor/changelog/add-single_variation_missing_tracks_events @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +[Single Variation] Add missing tracks events #40996 diff --git a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx index e7d3c4e206a..4af48f29dcf 100644 --- a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx @@ -4,6 +4,11 @@ import { createElement } from '@wordpress/element'; import { ToggleControl } from '@wordpress/components'; import { useWooBlockProps } from '@woocommerce/block-templates'; +import { recordEvent } from '@woocommerce/tracks'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore No types for this exist yet. +// eslint-disable-next-line @woocommerce/dependency-group +import { useEntityProp, useEntityId } from '@wordpress/core-data'; /** * Internal dependencies @@ -12,6 +17,7 @@ import { ToggleBlockAttributes } from './types'; import { sanitizeHTML } from '../../../utils/sanitize-html'; import { ProductEditorBlockEditProps } from '../../../types'; import useProductEntityProp from '../../../hooks/use-product-entity-prop'; +import { TRACKS_SOURCE } from '../../../constants'; export function Edit( { attributes, @@ -19,6 +25,7 @@ export function Edit( { }: ProductEditorBlockEditProps< ToggleBlockAttributes > ) { const blockProps = useWooBlockProps( attributes ); const { + _templateBlockId, label, property, disabled, @@ -30,6 +37,12 @@ export function Edit( { postType, fallbackValue: false, } ); + const productId = useEntityId( 'postType', postType ); + const [ parentId ] = useEntityProp< number >( + 'postType', + postType, + 'parent_id' + ); function isChecked() { if ( checkedValue !== undefined ) { @@ -39,6 +52,11 @@ export function Edit( { } function handleChange( checked: boolean ) { + recordEvent( 'product_toggle_click', { + block_id: _templateBlockId, + source: TRACKS_SOURCE, + product_id: parentId > 0 ? parentId : productId, + } ); if ( checked ) { setValue( checkedValue !== undefined ? checkedValue : checked ); } else { diff --git a/packages/js/product-editor/src/utils/record-product-event.ts b/packages/js/product-editor/src/utils/record-product-event.ts index c2b9b6a3976..f85628a40ec 100644 --- a/packages/js/product-editor/src/utils/record-product-event.ts +++ b/packages/js/product-editor/src/utils/record-product-event.ts @@ -18,6 +18,7 @@ const potentialTrackableProductValueKeys = [ 'description', 'manage_stock', 'menu_order', + 'note', 'purchase_note', 'sale_price', 'short_description', @@ -43,6 +44,11 @@ export function recordProductEvent( product_type: type, }; + if ( product.parent_id > 0 ) { + product.note = product.description; + delete product.description; + } + for ( const productValueKey of Object.keys( product ) ) { if ( potentialTrackableProductValueKeys.includes( productValueKey ) ) { const eventPropKey =