[CFT Custom fields] Fix copy and link (#46640)

* Fix the link in the custom field helper test

* Fix tooltip copy

* Add tracking events

* Add changelog files

packages/js/product-editor/changelog/fix-46540

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add custom fields tracking events

packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx

@@ -5,12 +5,14 @@ import { Button, Modal } from '@wordpress/components';
 import { createElement, useState, useRef, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
+import { recordEvent } from '@woocommerce/tracks';
 import classNames from 'classnames';
 import type { FocusEvent } from 'react';
 
 /**
  * Internal dependencies
  */
+import { TRACKS_SOURCE } from '../../../constants';
 import { TextControl } from '../../text-control';
 import { validate, type ValidationErrors } from '../utils/validations';
 import type { Metadata } from '../../../types';
@@ -122,6 +124,10 @@ export function CreateModal( {
 				{ ...DEFAULT_CUSTOM_FIELD, id: ( lastField.id ?? 0 ) + 1 },
 			];
 		} );
+
+		recordEvent( 'product_custom_fields_add_another_button_click', {
+			source: TRACKS_SOURCE,
+		} );
 	}
 
 	function handleAddButtonClick() {
@@ -161,6 +167,14 @@ export function CreateModal( {
 		onCreate(
 			customFields.map( ( { id, ...customField } ) => customField )
 		);
+
+		recordEvent( 'product_custom_fields_add_new_button_click', {
+			source: TRACKS_SOURCE,
+			custom_field_names: customFields.map(
+				( customField ) => customField.key
+			),
+			total: customFields.length,
+		} );
 	}
 
 	return (

packages/js/product-editor/src/components/custom-fields/custom-fields.tsx

@@ -5,11 +5,13 @@ import { Button } from '@wordpress/components';
 import { createElement, Fragment, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
+import { recordEvent } from '@woocommerce/tracks';
 import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
+import { TRACKS_SOURCE } from '../../constants';
 import { useCustomFields } from '../../hooks/use-custom-fields';
 import { CreateModal } from './create-modal';
 import { EditModal } from './edit-modal';
@@ -35,6 +37,10 @@ export function CustomFields( {
 
 	function handleAddNewButtonClick() {
 		setShowCreateModal( true );
+
+		recordEvent( 'product_custom_fields_show_add_modal', {
+			source: TRACKS_SOURCE,
+		} );
 	}
 
 	function customFieldEditButtonClickHandler(
@@ -42,6 +48,12 @@ export function CustomFields( {
 	) {
 		return function handleCustomFieldEditButtonClick() {
 			setSelectedCustomField( customField );
+
+			recordEvent( 'product_custom_fields_show_edit_modal', {
+				source: TRACKS_SOURCE,
+				custom_field_id: customField.id,
+				custom_field_name: customField.key,
+			} );
 		};
 	}
 
@@ -50,6 +62,12 @@ export function CustomFields( {
 	) {
 		return function handleCustomFieldRemoveButtonClick() {
 			removeCustomField( customField );
+
+			recordEvent( 'product_custom_fields_remove_button_click', {
+				source: TRACKS_SOURCE,
+				custom_field_id: customField.id,
+				custom_field_name: customField.key,
+			} );
 		};
 	}
 
@@ -60,6 +78,10 @@ export function CustomFields( {
 
 	function handleCreateModalCancel() {
 		setShowCreateModal( false );
+
+		recordEvent( 'product_custom_fields_cancel_add_modal', {
+			source: TRACKS_SOURCE,
+		} );
 	}
 
 	function handleEditModalUpdate( customField: Metadata< string > ) {
@@ -69,6 +91,10 @@ export function CustomFields( {
 
 	function handleEditModalCancel() {
 		setSelectedCustomField( undefined );
+
+		recordEvent( 'product_custom_fields_cancel_edit_modal', {
+			source: TRACKS_SOURCE,
+		} );
 	}
 
 	return (

packages/js/product-editor/src/components/custom-fields/edit-modal/edit-modal.tsx

@@ -4,12 +4,14 @@
 import { Button, Modal } from '@wordpress/components';
 import { createElement, useState, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
 import classNames from 'classnames';
 import type { FocusEvent } from 'react';
 
 /**
  * Internal dependencies
  */
+import { TRACKS_SOURCE } from '../../../constants';
 import { TextControl } from '../../text-control';
 import type { Metadata } from '../../../types';
 import { type ValidationError, validate } from '../utils/validations';
@@ -71,6 +73,13 @@ export function EditModal( {
 		}
 
 		onUpdate( customField );
+
+		recordEvent( 'product_custom_fields_update_button_click', {
+			source: TRACKS_SOURCE,
+			custom_field_id: customField.id,
+			custom_field_name: customField.key,
+			prev_custom_field_name: initialValue.key,
+		} );
 	}
 
 	return (

plugins/woocommerce/changelog/fix-46540

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix the link in the custom field helper test

plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php

@@ -539,8 +539,8 @@ class SimpleProductTemplate extends AbstractProductFormTemplate implements Produ
 						'title'       => __( 'Custom fields', 'woocommerce' ),
 						'description' => sprintf(
 							/* translators: %1$s: Custom fields guide link opening tag. %2$s: Custom fields guide link closing tag. */
-							__( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or internal inventory organization. %1$sRead more about custom fields%2$s', 'woocommerce' ),
-							'<a href="https://wordpress.org/documentation/article/assign-custom-fields/" target="_blank" rel="noreferrer">',
+							__( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or for internal inventory organization. %1$sRead more about custom fields%2$s', 'woocommerce' ),
+							'<a href="https://woocommerce.com/document/custom-product-fields/" target="_blank" rel="noreferrer">',
 							'</a>'
 						),
 					),