611 lines
15 KiB
TypeScript
611 lines
15 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { addCustomerEffortScoreExitPageListener } from '@woocommerce/customer-effort-score';
|
|
import { recordEvent } from '@woocommerce/tracks';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { waitUntilElementIsPresent } from './utils';
|
|
|
|
/**
|
|
* Get the product data.
|
|
*
|
|
* @return object
|
|
*/
|
|
|
|
const isElementVisible = ( element: HTMLElement ) =>
|
|
! ( window.getComputedStyle( element ).display === 'none' );
|
|
|
|
const getProductType = () => {
|
|
return ( document.querySelector( '#product-type' ) as HTMLInputElement )
|
|
?.value;
|
|
};
|
|
|
|
const getProductData = () => {
|
|
const isBlockEditor =
|
|
document.querySelectorAll( '.block-editor' ).length > 0;
|
|
|
|
let description_value = '';
|
|
let tagsText = '';
|
|
|
|
if ( ! isBlockEditor ) {
|
|
tagsText = (
|
|
document.querySelector(
|
|
'[name="tax_input[product_tag]"]'
|
|
) as HTMLInputElement
|
|
).value;
|
|
const content = document.querySelector(
|
|
'#content'
|
|
) as HTMLInputElement;
|
|
if ( content && isElementVisible( content ) ) {
|
|
description_value = content.value;
|
|
} else if ( typeof tinymce === 'object' && tinymce.get( 'content' ) ) {
|
|
description_value = tinymce.get( 'content' ).getContent();
|
|
}
|
|
} else {
|
|
description_value = (
|
|
document.querySelector(
|
|
'.block-editor-rich-text__editable'
|
|
) as HTMLInputElement
|
|
)?.value;
|
|
}
|
|
|
|
const productData = {
|
|
product_id: ( document.querySelector( '#post_ID' ) as HTMLInputElement )
|
|
?.value,
|
|
product_type: getProductType(),
|
|
is_downloadable: (
|
|
document.querySelector( '#_downloadable' ) as HTMLInputElement
|
|
)?.checked
|
|
? 'Yes'
|
|
: 'No',
|
|
is_virtual: (
|
|
document.querySelector( '#_virtual' ) as HTMLInputElement
|
|
)?.checked
|
|
? 'Yes'
|
|
: 'No',
|
|
manage_stock: (
|
|
document.querySelector( '#_manage_stock' ) as HTMLInputElement
|
|
)?.checked
|
|
? 'Yes'
|
|
: 'No',
|
|
attributes: document.querySelectorAll( '.woocommerce_attribute' )
|
|
.length,
|
|
categories: document.querySelectorAll(
|
|
'[name="tax_input[product_cat][]"]:checked'
|
|
).length,
|
|
cross_sells: document.querySelectorAll( '#crosssell_ids option' ).length
|
|
? 'Yes'
|
|
: 'No',
|
|
description: description_value.trim() !== '' ? 'Yes' : 'No',
|
|
enable_reviews: (
|
|
document.querySelector( '#comment_status' ) as HTMLInputElement
|
|
)?.checked
|
|
? 'Yes'
|
|
: 'No',
|
|
is_block_editor: isBlockEditor,
|
|
menu_order:
|
|
parseInt(
|
|
( document.querySelector( '#menu_order' ) as HTMLInputElement )
|
|
?.value ?? 0,
|
|
10
|
|
) !== 0
|
|
? 'Yes'
|
|
: 'No',
|
|
product_gallery: document.querySelectorAll(
|
|
'#product_images_container .product_images > li'
|
|
).length,
|
|
product_image:
|
|
parseInt(
|
|
(
|
|
document.querySelector(
|
|
'#_thumbnail_id'
|
|
) as HTMLInputElement
|
|
)?.value,
|
|
10
|
|
) > 0
|
|
? 'Yes'
|
|
: 'No',
|
|
purchase_note: (
|
|
document.querySelector( '#_purchase_note' ) as HTMLInputElement
|
|
)?.value.length
|
|
? 'Yes'
|
|
: 'No',
|
|
sale_price: (
|
|
document.querySelector( '#_sale_price' ) as HTMLInputElement
|
|
)?.value
|
|
? 'Yes'
|
|
: 'No',
|
|
short_description: (
|
|
document.querySelector( '#excerpt' ) as HTMLInputElement
|
|
)?.value.length
|
|
? 'Yes'
|
|
: 'No',
|
|
tags: tagsText.length > 0 ? tagsText.split( ',' ).length : 0,
|
|
upsells: document.querySelectorAll( '#upsell_ids option' ).length
|
|
? 'Yes'
|
|
: 'No',
|
|
weight: ( document.querySelector( '#_weight' ) as HTMLInputElement )
|
|
?.value
|
|
? 'Yes'
|
|
: 'No',
|
|
};
|
|
return productData;
|
|
};
|
|
|
|
/**
|
|
* Get the publish date as a string.
|
|
*
|
|
* @param prefix Prefix for date element selectors.
|
|
* @return string
|
|
*/
|
|
const getPublishDate = ( prefix = '' ) => {
|
|
const month = (
|
|
document.querySelector( `#${ prefix }mm` ) as HTMLInputElement
|
|
)?.value;
|
|
const day = (
|
|
document.querySelector( `#${ prefix }jj` ) as HTMLInputElement
|
|
)?.value;
|
|
const year = (
|
|
document.querySelector( `#${ prefix }aa` ) as HTMLInputElement
|
|
)?.value;
|
|
const hours = (
|
|
document.querySelector( `#${ prefix }hh` ) as HTMLInputElement
|
|
)?.value;
|
|
const seconds = (
|
|
document.querySelector( `#${ prefix }mn` ) as HTMLInputElement
|
|
)?.value;
|
|
|
|
return `${ month }-${ day }-${ year } ${ hours }:${ seconds }`;
|
|
};
|
|
|
|
/**
|
|
* Get the data from the publishing widget.
|
|
*
|
|
* @return object
|
|
*/
|
|
const getPublishingWidgetData = () => {
|
|
return {
|
|
status: ( document.querySelector( '#post_status' ) as HTMLInputElement )
|
|
?.value,
|
|
visibility: (
|
|
document.querySelector(
|
|
'input[name="visibility"]:checked'
|
|
) as HTMLInputElement
|
|
)?.value,
|
|
date: getPublishDate() !== getPublishDate( 'hidden_' ) ? 'yes' : 'no',
|
|
catalog_visibility: (
|
|
document.querySelector(
|
|
'input[name="_visibility"]:checked'
|
|
) as HTMLInputElement
|
|
)?.value,
|
|
featured: ( document.querySelector( '#_featured' ) as HTMLInputElement )
|
|
?.checked,
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Prefix all object keys with a string.
|
|
*
|
|
* @param obj Object to create keys from.
|
|
* @param prefix Prefix used before all keys.
|
|
* @return object
|
|
*/
|
|
const prefixObjectKeys = (
|
|
obj: { [ key: string ]: unknown },
|
|
prefix: string
|
|
) => {
|
|
return Object.fromEntries(
|
|
Object.entries( obj ).map( ( [ k, v ] ) => [ `${ prefix }${ k }`, v ] )
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Gets the tab name for a tab element.
|
|
*
|
|
* @param tab Tab element to get slug for.
|
|
* @return string
|
|
*/
|
|
const getTabName = ( tab: Element ) => {
|
|
const optionsSuffix = '_options';
|
|
|
|
const optionsClassNames = Array.from( tab.classList ).filter(
|
|
( className ) => className.endsWith( optionsSuffix )
|
|
);
|
|
|
|
if ( optionsClassNames.length > 0 ) {
|
|
const className = optionsClassNames[ 0 ];
|
|
|
|
return className.slice( 0, -optionsSuffix.length );
|
|
}
|
|
|
|
return '';
|
|
};
|
|
|
|
/**
|
|
* Gets additional data associated with a product tab click.
|
|
*
|
|
* @param tabName The name of the tab to get data for.
|
|
* @return object
|
|
*/
|
|
const getDataForProductTabClickEvent = ( tabName: string ) => {
|
|
const data: Record< string, boolean | string > = {};
|
|
|
|
data.product_type = getProductType();
|
|
|
|
if ( tabName === 'inventory' ) {
|
|
data.is_store_stock_management_enabled =
|
|
document.querySelector( '#_manage_stock' ) !== null;
|
|
}
|
|
|
|
return data;
|
|
};
|
|
|
|
/**
|
|
* Initializes the product tabs Tracks events.
|
|
*/
|
|
const initProductTabsTracks = () => {
|
|
const tabs = document.querySelectorAll( '.product_data_tabs > li' );
|
|
|
|
tabs.forEach( ( tab ) => {
|
|
const tabName = getTabName( tab );
|
|
|
|
tab.querySelector( 'a' )?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_tab_click', {
|
|
product_tab: tabName,
|
|
...getDataForProductTabClickEvent( tabName ),
|
|
} );
|
|
} );
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Initializes the inventory tab Tracks events.
|
|
*/
|
|
const initInventoryTabTracks = () => {
|
|
document
|
|
.querySelector( '#_manage_stock' )
|
|
?.addEventListener( 'click', ( event ) => {
|
|
recordEvent( 'product_manage_stock_click', {
|
|
is_enabled: ( event.target as HTMLInputElement )?.checked,
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelector( '#_manage_stock_disabled' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent(
|
|
'product_manage_stock_disabled_store_settings_link_click'
|
|
);
|
|
} );
|
|
|
|
document
|
|
.querySelector( '#inventory_product_data .notice a' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent(
|
|
'product_inventory_variations_notice_learn_more_click'
|
|
);
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Initialize all product screen tracks.
|
|
*/
|
|
|
|
export const initProductScreenTracks = () => {
|
|
const initialPublishingData = getPublishingWidgetData();
|
|
|
|
document
|
|
.querySelector( '#post-preview' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_preview_changes' );
|
|
} );
|
|
|
|
document
|
|
.querySelector( '.submitduplicate' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_copy', getProductData() );
|
|
} );
|
|
|
|
document
|
|
.querySelector( '.submitdelete' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_delete', getProductData() );
|
|
} );
|
|
|
|
document
|
|
.querySelectorAll(
|
|
'.edit-post-status, .edit-visibility, .edit-timestamp, .edit-catalog-visibility'
|
|
)
|
|
.forEach( ( button ) => {
|
|
button.addEventListener( 'click', () => {
|
|
recordEvent( 'product_publish_widget_edit', {
|
|
...getPublishingWidgetData(),
|
|
...getProductData(),
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelectorAll(
|
|
'.save-post-status, .save-post-visibility, .save-timestamp, .save-post-visibility'
|
|
)
|
|
.forEach( ( button ) => {
|
|
button.addEventListener( 'click', () => {
|
|
recordEvent( 'product_publish_widget_save', {
|
|
...prefixObjectKeys( getPublishingWidgetData(), 'new_' ),
|
|
...prefixObjectKeys( initialPublishingData, 'current_' ),
|
|
...getProductData(),
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelectorAll( '.handle-order-lower, .handle-order-higher' )
|
|
.forEach( ( button ) => {
|
|
button.addEventListener( 'click', ( event ) => {
|
|
const postBox = ( event.target as HTMLElement ).closest(
|
|
'.postbox'
|
|
);
|
|
|
|
if ( ! postBox ) {
|
|
return;
|
|
}
|
|
|
|
recordEvent( 'product_widget_order_change', {
|
|
widget: postBox.id,
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelector( '#show-settings-link' )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_screen_options_open' );
|
|
} );
|
|
|
|
document
|
|
.querySelectorAll( '#adv-settings .metabox-prefs input[type=checkbox]' )
|
|
.forEach( ( input ) => {
|
|
input.addEventListener( 'change', () => {
|
|
recordEvent( 'product_screen_elements', {
|
|
selected_element: ( input as HTMLInputElement ).value,
|
|
checkbox: ( input as HTMLInputElement ).checked,
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelectorAll( 'input[name="screen_columns"]' )
|
|
.forEach( ( input ) => {
|
|
input.addEventListener( 'change', () => {
|
|
recordEvent( 'product_layout', {
|
|
selected_layout: ( input as HTMLInputElement ).value,
|
|
} );
|
|
} );
|
|
} );
|
|
|
|
document
|
|
.querySelector( '#editor-expand-toggle' )
|
|
?.addEventListener( 'change', ( event ) => {
|
|
recordEvent( 'product_additional_settings', {
|
|
checkbox: ( event.target as HTMLInputElement ).checked,
|
|
} );
|
|
} );
|
|
|
|
// Product tags
|
|
|
|
function deleteTagEventListener(/* event: Event */) {
|
|
recordEvent( 'product_tags_delete', {
|
|
page: 'product',
|
|
tag_list_size:
|
|
document.querySelector( '.tagchecklist' )?.children.length || 0,
|
|
} );
|
|
}
|
|
|
|
function addTagsDeleteTracks() {
|
|
const tagsDeleteButtons = document.querySelectorAll(
|
|
'#product_tag .ntdelbutton'
|
|
);
|
|
tagsDeleteButtons.forEach( ( button ) => {
|
|
button.removeEventListener( 'click', deleteTagEventListener );
|
|
button.addEventListener( 'click', deleteTagEventListener );
|
|
} );
|
|
}
|
|
waitUntilElementIsPresent(
|
|
'#product_tag .tagchecklist',
|
|
addTagsDeleteTracks
|
|
);
|
|
|
|
document
|
|
.querySelector( '.tagadd' )
|
|
?.addEventListener( 'click', (/* event: Event */) => {
|
|
const tagInput = document.querySelector< HTMLInputElement >(
|
|
'#new-tag-product_tag'
|
|
);
|
|
if ( tagInput && tagInput.value && tagInput.value.length > 0 ) {
|
|
recordEvent( 'product_tags_add', {
|
|
page: 'product',
|
|
tag_string_length: tagInput.value.length,
|
|
tag_list_size:
|
|
( document.querySelector( '.tagchecklist' )?.children
|
|
.length || 0 ) + 1,
|
|
most_used: false,
|
|
} );
|
|
setTimeout( () => {
|
|
addTagsDeleteTracks();
|
|
}, 500 );
|
|
}
|
|
} );
|
|
|
|
function addMostUsedTagEventListener( event: Event ) {
|
|
recordEvent( 'product_tags_add', {
|
|
page: 'product',
|
|
tag_string_length: ( event.target as HTMLAnchorElement ).textContent
|
|
?.length,
|
|
tag_list_size:
|
|
document.querySelector( '.tagchecklist' )?.children.length || 0,
|
|
most_used: true,
|
|
} );
|
|
addTagsDeleteTracks();
|
|
}
|
|
|
|
function addMostUsedTagsTracks() {
|
|
const tagCloudLinks = document.querySelectorAll(
|
|
'#tagcloud-product_tag .tag-cloud-link'
|
|
);
|
|
tagCloudLinks.forEach( ( button ) => {
|
|
button.removeEventListener( 'click', addMostUsedTagEventListener );
|
|
button.addEventListener( 'click', addMostUsedTagEventListener );
|
|
} );
|
|
}
|
|
|
|
document
|
|
.querySelector( '.tagcloud-link' )
|
|
?.addEventListener( 'click', () => {
|
|
waitUntilElementIsPresent(
|
|
'#tagcloud-product_tag',
|
|
addMostUsedTagsTracks
|
|
);
|
|
} );
|
|
|
|
// Attribute tracks.
|
|
|
|
function addNewTermEventHandler() {
|
|
recordEvent( 'product_attributes_add_term', {
|
|
page: 'product',
|
|
} );
|
|
}
|
|
|
|
function addNewAttributeTermTracks() {
|
|
const addNewTermButtons = document.querySelectorAll(
|
|
'.woocommerce_attribute .add_new_attribute'
|
|
);
|
|
addNewTermButtons.forEach( ( button ) => {
|
|
button.removeEventListener( 'click', addNewTermEventHandler );
|
|
button.addEventListener( 'click', addNewTermEventHandler );
|
|
} );
|
|
}
|
|
addNewAttributeTermTracks();
|
|
|
|
document
|
|
.querySelector( '.add_attribute' )
|
|
?.addEventListener( 'click', () => {
|
|
setTimeout( () => {
|
|
addNewAttributeTermTracks();
|
|
}, 1000 );
|
|
} );
|
|
|
|
const attributesCount = document.querySelectorAll(
|
|
'.woocommerce_attribute'
|
|
).length;
|
|
|
|
document
|
|
.querySelector( '.save_attributes' )
|
|
?.addEventListener( 'click', () => {
|
|
const newAttributesCount = document.querySelectorAll(
|
|
'.woocommerce_attribute'
|
|
).length;
|
|
if ( newAttributesCount > attributesCount ) {
|
|
const local_attributes = [
|
|
...document.querySelectorAll(
|
|
'.woocommerce_attribute:not(.pa_glbattr)'
|
|
),
|
|
].map( ( attr ) => {
|
|
const terms =
|
|
(
|
|
attr.querySelector(
|
|
"[name^='attribute_values']"
|
|
) as HTMLTextAreaElement
|
|
)?.value.split( '|' ).length ?? 0;
|
|
return {
|
|
name: (
|
|
attr.querySelector(
|
|
'[name^="attribute_names"]'
|
|
) as HTMLInputElement
|
|
)?.value,
|
|
terms,
|
|
};
|
|
} );
|
|
recordEvent( 'product_attributes_add', {
|
|
page: 'product',
|
|
enable_archive: '',
|
|
default_sort_order: '',
|
|
local_attributes,
|
|
} );
|
|
}
|
|
} );
|
|
|
|
document
|
|
.querySelector(
|
|
'#woocommerce-product-updated-message-view-product__link'
|
|
)
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_view_product_click', getProductData() );
|
|
} );
|
|
|
|
const dismissProductUpdatedButtonSelector =
|
|
'.notice-success.is-dismissible > button';
|
|
|
|
waitUntilElementIsPresent( dismissProductUpdatedButtonSelector, () => {
|
|
document
|
|
.querySelector( dismissProductUpdatedButtonSelector )
|
|
?.addEventListener( 'click', () => {
|
|
recordEvent( 'product_view_product_dismiss', getProductData() );
|
|
} );
|
|
} );
|
|
|
|
initProductTabsTracks();
|
|
initInventoryTabTracks();
|
|
};
|
|
|
|
export function addExitPageListener( pageId: string ) {
|
|
let productChanged = false;
|
|
let triggeredDelete = false;
|
|
|
|
const deleteButton = document.querySelector( '#submitpost a.submitdelete' );
|
|
|
|
if ( deleteButton ) {
|
|
deleteButton.addEventListener( 'click', function () {
|
|
triggeredDelete = true;
|
|
} );
|
|
}
|
|
|
|
function checkIfSubmitButtonsDisabled() {
|
|
const submitButtonSelectors = [
|
|
'#submitpost [type="submit"]',
|
|
'#submitpost #post-preview',
|
|
];
|
|
let isDisabled = false;
|
|
for ( const sel of submitButtonSelectors ) {
|
|
document.querySelectorAll( sel ).forEach( ( element ) => {
|
|
if ( element.classList.contains( 'disabled' ) ) {
|
|
isDisabled = true;
|
|
}
|
|
} );
|
|
}
|
|
return isDisabled;
|
|
}
|
|
window.addEventListener( 'beforeunload', function (/* event */) {
|
|
// Check if button disabled or triggered delete to see if user saved or deleted the product instead.
|
|
if ( checkIfSubmitButtonsDisabled() || triggeredDelete ) {
|
|
productChanged = false;
|
|
triggeredDelete = false;
|
|
return;
|
|
}
|
|
const editor = window.tinymce && window.tinymce.get( 'content' );
|
|
|
|
if ( window.wp.autosave ) {
|
|
productChanged = window.wp.autosave.server.postChanged();
|
|
} else if ( editor ) {
|
|
productChanged = ! editor.isHidden() && editor.isDirty();
|
|
}
|
|
} );
|
|
|
|
addCustomerEffortScoreExitPageListener( pageId, () => {
|
|
return productChanged;
|
|
} );
|
|
}
|