Add tracks event for "View product" and dismiss action after update (#35582)

* Record an event 'product_view_product_click' when the 'View Product' link is clicked after creating or updating a product

* Add product_view_product_dismiss tracks events (WIP, not currently working)

* Add changelog

* Fix whitespace in addEventListener and remove console.logs

* Change link tag id to be more specific and comply with CSS guidelines
Move HTML code out of translation function

* Run phpcs in class-wc-admin-post-types

* Add tinyMCE types to add global tinymce variable in typescript code

* Add additional data in getProductData

TODO: I'm not sure if it's possible, or if it makes sense, to include stock_quantity_update in the object

* Add code review suggestions, including:

* Create isElementVisible function to backfill jQuery implementation
* Fix wrong value for is_downloadable, is_virtual, manage_stock
* Fix wrong radix
* Update menu_order implementation
* Add missing ? to weight

* Add stock_quantity_update implementation which is not working as intended

Since the page reloads after product update, the initialStockValue is updated as well

* Remove stock_quantity_update property and adjust is_downloadable, is_virtual, and manage_stock for consistency

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/global.d.ts

@@ -1 +1,2 @@
 declare const productScreen: { name: string };
+declare const tinymce: import("tinymce").EditorManager;

plugins/woocommerce-admin/client/wp-admin-scripts/product-tracking/shared.ts

@@ -13,8 +13,40 @@ import { waitUntilElementIsPresent } from './utils';
  *
  * @return object
  */
+
+const isElementVisible = ( element: HTMLElement ) =>
+	! ( window.getComputedStyle( element ).display === 'none' );
+
 const getProductData = () => {
-	return {
+	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: (
@@ -22,14 +54,81 @@ const getProductData = () => {
 		 )?.value,
 		is_downloadable: (
 			document.querySelector( '#_downloadable' ) as HTMLInputElement
-		 )?.value,
+		 )?.checked
+			? 'Yes'
+			: 'No',
 		is_virtual: (
 			document.querySelector( '#_virtual' ) as HTMLInputElement
-		 )?.value,
+		 )?.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;
 };
 
 /**
@@ -102,6 +201,7 @@ const prefixObjectKeys = (
 /**
  * Initialize all product screen tracks.
  */
+
 export const initProductScreenTracks = () => {
 	const initialPublishingData = getPublishingWidgetData();
 
@@ -324,4 +424,23 @@ export const initProductScreenTracks = () => {
 				} );
 			}
 		} );
+
+	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() );
+			} );
+	} );
 };

plugins/woocommerce-admin/package.json

@@ -125,6 +125,7 @@
 		"@types/react-router-dom": "^5.3.3",
 		"@types/react-transition-group": "^4.4.4",
 		"@types/testing-library__jest-dom": "^5.14.3",
+		"@types/tinymce": "^4.6.5",
 		"@types/wordpress__components": "^19.10.1",
 		"@types/wordpress__compose": "^4.0.1",
 		"@types/wordpress__data": "^6.0.0",

plugins/woocommerce/changelog/add-tracks-product-action

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add tracks events for 'product_view_product_click' and 'product_view_product_dismiss'

plugins/woocommerce/includes/admin/class-wc-admin-post-types.php

@@ -124,14 +124,14 @@ class WC_Admin_Post_Types {
 
 		$messages['product'] = array(
 			0  => '', // Unused. Messages start at index 1.
-			/* translators: %s: Product view URL. */
+			/* translators: %1$s: Product link opening tag. %2$s: Product link closing tag.*/
-			1  => sprintf( __( 'Product updated. <a href="%s">View Product</a>', 'woocommerce' ), esc_url( get_permalink( $post->ID ) ) ),
+			1  => sprintf( __( 'Product updated. %1$sView Product%2$s', 'woocommerce' ), '<a id="woocommerce-product-updated-message-view-product__link" href="' . esc_url( get_permalink( $post->ID ) ) . '">', '</a>' ),
 			2  => __( 'Custom field updated.', 'woocommerce' ),
 			3  => __( 'Custom field deleted.', 'woocommerce' ),
 			4  => __( 'Product updated.', 'woocommerce' ),
 			5  => __( 'Revision restored.', 'woocommerce' ),
-			/* translators: %s: product url */
+			/* translators: %1$s: Product link opening tag. %2$s: Product link closing tag.*/
-			6  => sprintf( __( 'Product published. <a href="%s">View Product</a>', 'woocommerce' ), esc_url( get_permalink( $post->ID ) ) ),
+			6  => sprintf( __( 'Product published. %1$sView Product%2$s', 'woocommerce' ), '<a id="woocommerce-product-updated-message-view-product__link" href="' . esc_url( get_permalink( $post->ID ) ) . '">', '</a>' ),
 			7  => __( 'Product saved.', 'woocommerce' ),
 			/* translators: %s: product url */
 			8  => sprintf( __( 'Product submitted. <a target="_blank" href="%s">Preview product</a>', 'woocommerce' ), esc_url( add_query_arg( 'preview', 'true', get_permalink( $post->ID ) ) ) ),

pnpm-lock.yaml

@@ -1427,6 +1427,7 @@ importers:
       '@types/react-router-dom': ^5.3.3
       '@types/react-transition-group': ^4.4.4
       '@types/testing-library__jest-dom': ^5.14.3
+      '@types/tinymce': ^4.6.5
       '@types/wordpress__blocks': ^11.0.7
       '@types/wordpress__components': ^19.10.1
       '@types/wordpress__compose': ^4.0.1
@@ -1645,6 +1646,7 @@ importers:
       '@types/react-router-dom': 5.3.3
       '@types/react-transition-group': 4.4.4
       '@types/testing-library__jest-dom': 5.14.3
+      '@types/tinymce': 4.6.5
       '@types/wordpress__components': 19.10.1_sfoxds7t5ydpegc3knd667wn6m
       '@types/wordpress__compose': 4.0.1
       '@types/wordpress__data': 6.0.0
@@ -2592,32 +2594,6 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /@babel/helper-compilation-targets/7.17.7_@babel+core@7.12.9:
-    resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.19.3
-      '@babel/core': 7.12.9
-      '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.20.4
-      semver: 6.3.0
-    dev: true
-
-  /@babel/helper-compilation-targets/7.17.7_@babel+core@7.16.12:
-    resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.19.3
-      '@babel/core': 7.16.12
-      '@babel/helper-validator-option': 7.18.6
-      browserslist: 4.20.4
-      semver: 6.3.0
-    dev: false
-
   /@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.8:
     resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==}
     engines: {node: '>=6.9.0'}
@@ -3418,9 +3394,9 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-skip-transparent-expression-wrappers': 7.16.0
-      '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.12.9
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.12.9
     dev: true
 
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.16.12:
@@ -3430,9 +3406,9 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-skip-transparent-expression-wrappers': 7.16.0
-      '@babel/plugin-proposal-optional-chaining': 7.16.7_@babel+core@7.16.12
+      '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.16.12
     dev: false
 
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.16.7_@babel+core@7.17.8:
@@ -3479,7 +3455,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-remap-async-to-generator': 7.16.8
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.12.9
     transitivePeerDependencies:
@@ -3493,7 +3469,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-remap-async-to-generator': 7.16.8
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.16.12
     transitivePeerDependencies:
@@ -4174,6 +4150,30 @@ packages:
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
       '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.17.8
 
+  /@babel/plugin-proposal-optional-chaining/7.18.9_@babel+core@7.12.9:
+    resolution: {integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.12.9
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.12.9
+    dev: true
+
+  /@babel/plugin-proposal-optional-chaining/7.18.9_@babel+core@7.16.12:
+    resolution: {integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.16.12
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
+      '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.16.12
+    dev: false
+
   /@babel/plugin-proposal-optional-chaining/7.18.9_@babel+core@7.17.8:
     resolution: {integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==}
     engines: {node: '>=6.9.0'}
@@ -4327,7 +4327,7 @@ packages:
     dependencies:
       '@babel/core': 7.12.9
       '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.12.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.18.9
     dev: true
 
   /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.16.12:
@@ -4338,7 +4338,7 @@ packages:
     dependencies:
       '@babel/core': 7.16.12
       '@babel/helper-create-regexp-features-plugin': 7.17.0_@babel+core@7.16.12
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.18.9
     dev: false
 
   /@babel/plugin-proposal-unicode-property-regex/7.16.7_@babel+core@7.17.8:
@@ -5139,7 +5139,7 @@ packages:
       '@babel/helper-environment-visitor': 7.16.7
       '@babel/helper-function-name': 7.16.7
       '@babel/helper-optimise-call-expression': 7.16.7
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-replace-supers': 7.16.7
       '@babel/helper-split-export-declaration': 7.16.7
       globals: 11.12.0
@@ -5158,7 +5158,7 @@ packages:
       '@babel/helper-environment-visitor': 7.16.7
       '@babel/helper-function-name': 7.16.7
       '@babel/helper-optimise-call-expression': 7.16.7
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-replace-supers': 7.16.7
       '@babel/helper-split-export-declaration': 7.16.7
       globals: 11.12.0
@@ -5863,7 +5863,7 @@ packages:
       '@babel/core': 7.12.9
       '@babel/helper-hoist-variables': 7.16.7
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-validator-identifier': 7.16.7
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -5879,7 +5879,7 @@ packages:
       '@babel/core': 7.16.12
       '@babel/helper-hoist-variables': 7.16.7
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
       '@babel/helper-validator-identifier': 7.16.7
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -7026,7 +7026,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.17.7
       '@babel/core': 7.12.9
-      '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.12.9
+      '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.12.9
       '@babel/helper-plugin-utils': 7.18.9
       '@babel/helper-validator-option': 7.16.7
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.7_@babel+core@7.12.9
@@ -7093,7 +7093,7 @@ packages:
       '@babel/plugin-transform-unicode-escapes': 7.16.7_@babel+core@7.12.9
       '@babel/plugin-transform-unicode-regex': 7.16.7_@babel+core@7.12.9
       '@babel/preset-modules': 0.1.5_@babel+core@7.12.9
-      '@babel/types': 7.17.0
+      '@babel/types': 7.19.3
       babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.12.9
       babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.12.9
       babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.12.9
@@ -7111,7 +7111,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.17.7
       '@babel/core': 7.16.12
-      '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.16.12
+      '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.16.12
       '@babel/helper-plugin-utils': 7.18.9
       '@babel/helper-validator-option': 7.16.7
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.16.7_@babel+core@7.16.12
@@ -7178,7 +7178,7 @@ packages:
       '@babel/plugin-transform-unicode-escapes': 7.16.7_@babel+core@7.16.12
       '@babel/plugin-transform-unicode-regex': 7.16.7_@babel+core@7.16.12
       '@babel/preset-modules': 0.1.5_@babel+core@7.16.12
-      '@babel/types': 7.17.0
+      '@babel/types': 7.19.3
       babel-plugin-polyfill-corejs2: 0.3.0_@babel+core@7.16.12
       babel-plugin-polyfill-corejs3: 0.5.2_@babel+core@7.16.12
       babel-plugin-polyfill-regenerator: 0.3.0_@babel+core@7.16.12
@@ -7429,8 +7429,8 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.16.12
-      '@babel/helper-plugin-utils': 7.18.9
+      '@babel/helper-plugin-utils': 7.19.0
-      '@babel/helper-validator-option': 7.16.7
+      '@babel/helper-validator-option': 7.18.6
       '@babel/plugin-transform-typescript': 7.16.8_@babel+core@7.16.12
     transitivePeerDependencies:
       - supports-color
@@ -7959,7 +7959,7 @@ packages:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 7.3.1
-      globals: 13.17.0
+      globals: 13.18.0
       ignore: 4.0.6
       import-fresh: 3.3.0
       js-yaml: 3.14.1
@@ -13519,6 +13519,12 @@ packages:
       jest-matcher-utils: 27.5.1
       pretty-format: 27.5.1
 
+  /@types/jquery/3.5.14:
+    resolution: {integrity: sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==}
+    dependencies:
+      '@types/sizzle': 2.3.3
+    dev: true
+
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
 
@@ -13748,6 +13754,10 @@ packages:
       '@types/node': 17.0.21
     dev: true
 
+  /@types/sizzle/2.3.3:
+    resolution: {integrity: sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==}
+    dev: true
+
   /@types/source-list-map/0.1.2:
     resolution: {integrity: sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==}
     dev: true
@@ -13774,6 +13784,12 @@ packages:
   /@types/tinycolor2/1.4.3:
     resolution: {integrity: sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==}
 
+  /@types/tinymce/4.6.5:
+    resolution: {integrity: sha512-C5gdEi85rUeYEXzXlwAm9MzvfMI8SooVbBMLLN/BQTeDnHWNtRWAkB6ON9s0lhWZYrmjSgLPrWSe86rjciACEQ==}
+    dependencies:
+      '@types/jquery': 3.5.14
+    dev: true
+
   /@types/trusted-types/2.0.2:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
     dev: true
@@ -19290,7 +19306,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.17.8
-      '@babel/helper-define-polyfill-provider': 0.3.1_@babel+core@7.17.8
+      '@babel/helper-define-polyfill-provider': 0.3.3_@babel+core@7.17.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -21526,7 +21542,7 @@ packages:
       postcss-value-parser: 4.2.0
       schema-utils: 2.7.1
       semver: 6.3.0
-      webpack: 5.70.0
+      webpack: 5.70.0_webpack-cli@3.3.12
 
   /css-loader/5.2.7_webpack@5.70.0:
     resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
@@ -23222,11 +23238,11 @@ packages:
       eslint-import-resolver-node: 0.3.6
       eslint-module-utils: 2.7.3_fmuy6wfytpxcy4lufnxcokvnry
       has: 1.0.3
-      is-core-module: 2.10.0
+      is-core-module: 2.8.0
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.0.4
       object.values: 1.1.5
-      resolve: 1.22.1
+      resolve: 1.20.0
       tsconfig-paths: 3.14.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -23253,11 +23269,11 @@ packages:
       eslint-import-resolver-node: 0.3.6
       eslint-module-utils: 2.7.3_lkzaig2qiyp6elizstfbgvzhie
       has: 1.0.3
-      is-core-module: 2.10.0
+      is-core-module: 2.8.0
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.0.4
       object.values: 1.1.5
-      resolve: 1.22.1
+      resolve: 1.20.0
       tsconfig-paths: 3.14.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -23284,11 +23300,11 @@ packages:
       eslint-import-resolver-node: 0.3.6
       eslint-module-utils: 2.7.3_fmuy6wfytpxcy4lufnxcokvnry
       has: 1.0.3
-      is-core-module: 2.10.0
+      is-core-module: 2.8.0
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.0.4
       object.values: 1.1.5
-      resolve: 1.22.1
+      resolve: 1.20.0
       tsconfig-paths: 3.14.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
@@ -30562,7 +30578,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.5
-      acorn: 8.8.0
+      acorn: 8.8.1
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -32326,7 +32342,6 @@ packages:
     resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==}
     dependencies:
       brace-expansion: 1.1.11
-    dev: true
 
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -36356,24 +36371,6 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
-  /react-with-direction/1.4.0_prpqlkd37azqwypxturxi7uyci:
-    resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
-    peerDependencies:
-      react: ^0.14 || ^15 || ^16
-      react-dom: ^0.14 || ^15 || ^16
-    dependencies:
-      airbnb-prop-types: 2.16.0_react@17.0.2
-      brcast: 2.0.2
-      deepmerge: 1.5.2
-      direction: 1.0.4
-      hoist-non-react-statics: 3.3.2
-      object.assign: 4.1.4
-      object.values: 1.1.5
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 16.14.0_react@17.0.2
-    dev: false
-
   /react-with-direction/1.4.0_sfoxds7t5ydpegc3knd667wn6m:
     resolution: {integrity: sha512-ybHNPiAmaJpoWwugwqry9Hd1Irl2hnNXlo/2SXQBwbLn/jGMauMS2y9jw+ydyX5V9ICryCqObNSthNt5R94xpg==}
     peerDependencies:
@@ -36454,7 +36451,7 @@ packages:
       object.assign: 4.1.4
       prop-types: 15.8.1
       react: 17.0.2
-      react-with-direction: 1.4.0_prpqlkd37azqwypxturxi7uyci
+      react-with-direction: 1.4.0_sfoxds7t5ydpegc3knd667wn6m
     dev: false
 
   /react-with-styles/3.2.3_wunono5fri6mu4ojuug6cyhj7m:
@@ -37615,7 +37612,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.1.1
       semver: 7.3.5
-      webpack: 5.70.0
+      webpack: 5.70.0_webpack-cli@3.3.12
 
   /sass-loader/12.6.0_sass@1.49.9+webpack@5.70.0:
     resolution: {integrity: sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==}
@@ -39563,7 +39560,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.1
       commander: 2.20.3
       source-map: 0.6.1
       source-map-support: 0.5.20