Merge pull request #2779 from woocommerce/tweak/supplement-api-pull

Supplement the implementation of API Pull for the Settings page

js/src/components/enable-new-product-sync-button.js

@@ -14,13 +14,23 @@ import { API_NAMESPACE } from '~/data/constants';
 import useApiFetchCallback from '~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '~/hooks/useDispatchCoreNotices';
 
+/**
+ * Clicking on the button to start enabling the new product sync (API Pull).
+ *
+ * @event gla_enable_product_sync_click
+ * @property {string} [page] Indicates which page this event happened
+ * @property {string} [context] Indicates where or which the button triggered this event
+ */
+
 /**
  * Button to initiate auth process for WP Rest API
  *
- * @param {Object} params The component params
+ * @param {Object} props The component props to be forwarded to AppButton.
  * @return {JSX.Element} The button.
+ *
+ * @fires gla_enable_product_sync_click with `{ page: 'settings', context: 'banner' | 'mc_card' }`
  */
-const EnableNewProductSyncButton = ( params ) => {
+const EnableNewProductSyncButton = ( props ) => {
 	const { createNotice } = useDispatchCoreNotices();
 	const [ loading, setLoading ] = useState( false );
 	const nextPageName = glaData.mcSetupComplete ? 'settings' : 'setup-mc';
@@ -31,7 +41,6 @@ const EnableNewProductSyncButton = ( params ) => {
 		try {
 			setLoading( true );
 			const d = await fetchRestAPIAuthorize();
-			setLoading( false );
 			window.location.href = d.auth_url;
 		} catch ( error ) {
 			setLoading( false );
@@ -50,7 +59,8 @@ const EnableNewProductSyncButton = ( params ) => {
 			isSecondary
 			loading={ loading }
 			onClick={ handleEnableClick }
-			{ ...params }
+			eventName="gla_enable_product_sync_click"
+			{ ...props }
 		/>
 	);
 };

js/src/components/enable-new-product-sync-notice.js

@@ -42,8 +42,10 @@ const EnableNewProductSyncNotice = () => {
 				{
 					enableButton: (
 						<EnableNewProductSyncButton
-							eventName="gla_enable_product_sync_click"
-							eventProps={ { context: 'banner' } }
+							eventProps={ {
+								page: 'settings',
+								context: 'banner',
+							} }
 						/>
 					),
 					p: <p />,

js/src/components/google-mc-account-card/merchant-center-account-info-card.js

@@ -25,18 +25,27 @@ import DisconnectModal, {
 	API_DATA_FETCH_FEATURE,
 } from '~/pages/settings/disconnect-modal';
 import { getSettingsUrl } from '~/utils/urls';
+import { recordGlaEvent } from '~/utils/tracks';
+
+/**
+ * @typedef {import('~/data/types.js').GoogleMCAccount} GoogleMCAccount
+ */
+
+/**
+ * Clicking on the button to disable the new product sync (API Pull).
+ *
+ * @event gla_disable_product_sync_click
+ */
 
 /**
  * Renders a Google Merchant Center account card UI with connected account information.
  *
  * @param {Object} props React props.
- * @param {{ id: number }} props.googleMCAccount A data payload object containing the user's Google Merchant Center account ID.
- * @param {boolean} [props.hideNotificationService=true] Indicate whether hide the enable Notification service block at the card footer.
+ * @param {GoogleMCAccount} props.googleMCAccount A data payload object of Google Merchant Center account.
+ *
+ * @fires gla_disable_product_sync_click
  */
-const MerchantCenterAccountInfoCard = ( {
-	googleMCAccount,
-	hideNotificationService = false,
-} ) => {
+const MerchantCenterAccountInfoCard = ( { googleMCAccount } ) => {
 	const { createNotice, removeNotice } = useDispatchCoreNotices();
 	const { invalidateResolution } = useAppDispatch();
 
@@ -59,6 +68,8 @@ const MerchantCenterAccountInfoCard = ( {
 	const domain = new URL( getSetting( 'homeUrl' ) ).host;
 
 	const disableNotifications = async () => {
+		recordGlaEvent( 'gla_disable_product_sync_click' );
+
 		const { notice } = await createNotice(
 			'info',
 			__(
@@ -83,15 +94,13 @@ const MerchantCenterAccountInfoCard = ( {
 		removeNotice( notice.id );
 	};
 
-	// Show the button if the status is "approved" and the Notification Service is not hidden.
+	// Show the button if the status is "approved".
 	const showDisconnectNotificationsButton =
-		! hideNotificationService &&
 		googleMCAccount.wpcom_rest_api_status ===
-			GOOGLE_WPCOM_APP_CONNECTED_STATUS.APPROVED;
+		GOOGLE_WPCOM_APP_CONNECTED_STATUS.APPROVED;
 
-	// Show the error if the status is set but is not "approved" and the Notification Service is not hidden.
+	// Show the error if the status is set but is not "approved".
 	const showErrorNotificationsNotice =
-		! hideNotificationService &&
 		googleMCAccount.wpcom_rest_api_status &&
 		googleMCAccount.notification_service_enabled &&
 		googleMCAccount.wpcom_rest_api_status !==
@@ -110,8 +119,7 @@ const MerchantCenterAccountInfoCard = ( {
 				showErrorNotificationsNotice ? (
 					<EnableNewProductSyncButton
 						text={ __( 'Grant access', 'google-listings-and-ads' ) }
-						eventName="gla_enable_product_sync_click"
-						eventProps={ { context: 'mc_card' } }
+						eventProps={ { page: 'settings', context: 'mc_card' } }
 					/>
 				) : (
 					<ConnectedIconLabel />
@@ -157,7 +165,6 @@ const MerchantCenterAccountInfoCard = ( {
 							'Disable product data fetch',
 							'google-listings-and-ads'
 						) }
-						eventName="gla_disable_product_sync_click"
 						onClick={ openDisableDataFetchModal }
 					/>
 				</Section.Card.Footer>

js/src/data/selectors.js

@@ -51,12 +51,6 @@ export const getSettings = ( state ) => {
  * @property {string|''} displayName Owner name. Available for jetpack owner.
  */
 
-/**
- * @typedef {Object} GoogleMCAccount
- * @property {number} id Account ID. It's 0 if not yet connected.
- * @property {string} status Connection status.
- */
-
 /**
  * @typedef {Object} Tour
  * @property {string} id The tour ID

js/src/data/types.js

@@ -5,6 +5,14 @@
  * @property {number | null} adsId The ID of the connected Google Ads account. Null if not yet connected.
  */
 
+/**
+ * @typedef {Object} GoogleMCAccount
+ * @property {number} id Account ID. It's 0 if not yet connected.
+ * @property {string} status Connection status.
+ * @property {null|'approved'|'disapproved'|'error'|'disabled'} wpcom_rest_api_status The status of Google WPCOM app's access to WooCommerce products, coupons, shipping and settings.
+ * @property {boolean} notification_service_enabled Whether the service of notifying a partner of the shop data updates is enabled.
+ */
+
 /**
  * @typedef {Object} SuggestedAssets
  * @property {string} business_name The name of merchant's business or brand.

js/src/hooks/useGoogleMCAccount.js

@@ -11,7 +11,7 @@ import useGoogleAccount from './useGoogleAccount';
 import { GOOGLE_MC_ACCOUNT_STATUS } from '~/constants';
 
 /**
- * @typedef {import('~/data/selectors').GoogleMCAccount} GoogleMCAccount
+ * @typedef {import('~/data/types.js').GoogleMCAccount} GoogleMCAccount
  *
  * @typedef {Object} GoogleMCAccountPayload
  * @property {GoogleMCAccount|undefined} googleMCAccount The connection data of Google Merchant Center account associated with GLA.

src/Tracking/README.md

@@ -305,6 +305,11 @@ Triggered when datepicker (date ranger picker) is updated,
 - [`ProductsReportFilters`](../../js/src/pages/reports/products/products-report-filters.js#L41)
 - [`ProgramsReportFilters`](../../js/src/pages/reports/programs/programs-report-filters.js#L43)
 
+### [`gla_disable_product_sync_click`](../../js/src/components/google-mc-account-card/merchant-center-account-info-card.js#L34)
+Clicking on the button to disable the new product sync (API Pull).
+#### Emitters
+- [`MerchantCenterAccountInfoCard`](../../js/src/components/google-mc-account-card/merchant-center-account-info-card.js#L48)
+
 ### [`gla_disconnected_accounts`](../../js/src/pages/settings/linked-accounts.js#L31)
 Accounts are disconnected from the Setting page
 #### Properties
@@ -408,6 +413,16 @@ Triggered when store address "Edit in WooCommerce Settings" button is clicked.
 #### Emitters
 - [`StoreAddressCard`](../../js/src/components/contact-information/store-address-card.js#L49) Whenever "Edit in WooCommerce Settings" button is clicked.
 
+### [`gla_enable_product_sync_click`](../../js/src/components/enable-new-product-sync-button.js#L17)
+Clicking on the button to start enabling the new product sync (API Pull).
+#### Properties
+| name | type | description |
+| ---- | ---- | ----------- |
+`page` | `string` | Indicates which page this event happened
+`context` | `string` | Indicates where or which the button triggered this event
+#### Emitters
+- [`EnableNewProductSyncButton`](../../js/src/components/enable-new-product-sync-button.js#L33) with `{ page: 'settings', context: 'banner' | 'mc_card' }`
+
 ### [`gla_faq`](../../js/src/components/faqs-panel/index.js#L22)
 Clicking on faq item to collapse or expand it.
 #### Properties
@@ -468,10 +483,10 @@ Clicking on the link to view free ad credit value by country.
 #### Emitters
 - [`FreeAdCredit`](../../js/src/components/free-ad-credit/index.js#L27) with `{ context: 'setup-ads' }`.
 
-### [`gla_free_campaign_edited`](../../js/src/pages/shipping/index.js#L28)
+### [`gla_free_campaign_edited`](../../js/src/pages/shipping/index.js#L29)
 Saving changes of audience and/or shipping settings to the free listings.
 #### Emitters
-- [`exports`](../../js/src/pages/shipping/index.js#L44)
+- [`exports`](../../js/src/pages/shipping/index.js#L45)
 
 ### [`gla_google_account_connect_button_click`](../../js/src/utils/tracks.js#L175)
 Clicking on the button to connect Google account.