Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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`
This commit is contained in:
Fernando Marichal 2023-10-03 08:26:39 -03:00 committed by GitHub
parent 07a178760f
commit e224445bf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-40502_record_events_for_variation_options_modal Normal file
View File

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

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

@ -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 ) }

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

@ -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
) }

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

@ -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 }

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

@ -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(
'product_add_attributes_modal_remove_attribute_button_click'
);
onRemoveItem();
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 );
} }
>

10
packages/js/product-editor/src/components/attributes/attributes.tsx
View File

@ -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'