Add event tracking to log how many times and what fields the store ad…

…dress is having validation errors.

js/src/components/contact-information/store-address-card.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
+import { useRef, createInterpolateElement } from '@wordpress/element';
 import { CardDivider } from '@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { update as updateIcon } from '@wordpress/icons';
 import { getPath, getQuery } from '@woocommerce/navigation';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
@@ -31,10 +32,21 @@ import './store-address-card.scss';
  * @property {string|undefined} [subpath] The subpath used in the page, e.g. `"/edit-store-address"` or `undefined` when there is no subpath.
  */
 
+/**
+ * Track how many times and what fields the store address is having validation errors.
+ *
+ * @event gla_wc_store_address_validation
+ * @property {string} path The path used in the page from which the event tracking was sent, e.g. `"/google/setup-mc"` or `"/google/settings"`.
+ * @property {string|undefined} [subpath] The subpath used in the page, e.g. `"/edit-store-address"` or `undefined` when there is no subpath.
+ * @property {string} country_code The country code of store address, e.g. `"US"`.
+ * @property {string} missing_fields The string of the missing required fields of store address separated by comma, e.g. `"city,postcode"`.
+ */
+
 /**
  * Renders a component with a given store address.
  *
  * @fires gla_edit_wc_store_address Whenever "Edit in WooCommerce Settings" button is clicked.
+ * @fires gla_wc_store_address_validation Whenever the new store address data is fetched after clicking "Refresh to sync" button.
  *
  * @param {Object} props React props.
  * @param {boolean} [props.showValidation=false] Whether to show validation error messages.
@@ -43,15 +55,39 @@ import './store-address-card.scss';
  */
 const StoreAddressCard = ( { showValidation = false } ) => {
 	const { loaded, data, refetch } = useStoreAddress();
+	const path = getPath();
 	const { subpath } = getQuery();
-	const editButton = (
+
+	const refetchedCallbackRef = useRef( null );
+
+	if ( loaded && refetchedCallbackRef.current ) {
+		refetchedCallbackRef.current( data );
+		refetchedCallbackRef.current = null;
+	}
+
+	const handleRefreshClick = () => {
+		refetch();
+
+		refetchedCallbackRef.current = ( storeAddress ) => {
+			const eventProps = {
+				path,
+				subpath,
+				country_code: storeAddress.countryCode,
+				missing_fields: storeAddress.missingRequiredFields.join( ',' ),
+			};
+
+			recordEvent( 'gla_wc_store_address_validation', eventProps );
+		};
+	};
+
+	const refreshButton = (
 		<AppButton
 			isSecondary
 			icon={ updateIcon }
 			iconSize={ 20 }
 			iconPosition="right"
 			text={ __( 'Refresh to sync', 'google-listings-and-ads' ) }
-			onClick={ refetch }
+			onClick={ handleRefreshClick }
 			disabled={ ! loaded }
 		/>
 	);
@@ -72,7 +108,7 @@ const StoreAddressCard = ( { showValidation = false } ) => {
 								type="external"
 								href="admin.php?page=wc-settings"
 								eventName="gla_edit_wc_store_address"
-								eventProps={ { path: getPath(), subpath } }
+								eventProps={ { path, subpath } }
 							/>
 						),
 					}
@@ -113,7 +149,7 @@ const StoreAddressCard = ( { showValidation = false } ) => {
 			alignIcon="top"
 			alignIndicator="top"
 			description={ description }
-			indicator={ editButton }
+			indicator={ refreshButton }
 		>
 			<CardDivider />
 			<Section.Card.Body>

js/src/hooks/useStoreAddress.js

@@ -62,10 +62,12 @@ export default function useStoreAddress( source = 'wc' ) {
 		const postcode = storeAddress?.postal_code || '';
 
 		const [ address, address2 = '' ] = streetAddress.split( '\n' );
-		const country = countryNameDict[ storeAddress?.country ];
+		const country = countryNameDict[ storeAddress?.country ] || '';
+		const countryCode = storeAddress?.country || '';
 		const isAddressFilled = ! missingRequiredFields.length;
 
 		data = {
+			countryCode,
 			address,
 			address2,
 			city,