Merge onboarding improvements branch into consolidated ad

.eslintrc.js

@@ -1,3 +1,4 @@
+const jsdocConfig = require( '@wordpress/eslint-plugin/configs/jsdoc' );
 const webpackConfig = require( './webpack.config' );
 
 const webpackResolver = {
@@ -39,19 +40,81 @@ module.exports = {
 		getComputedStyle: 'readonly',
 	},
 	rules: {
+		'@wordpress/i18n-text-domain': [
+			'error',
+			{ allowedTextDomain: 'google-listings-and-ads' },
+		],
 		'@wordpress/no-unsafe-wp-apis': 1,
+		'react/react-in-jsx-scope': 'off',
 		'react-hooks/exhaustive-deps': [
 			'warn',
 			{
 				additionalHooks: 'useSelect',
 			},
 		],
+		// compatibility-code "WC < 7.6"
+		//
+		// Turn it off because:
+		// - `import { CurrencyFactory } from '@woocommerce/currency';`
+		//   It's supported only since WC 7.6.0
+		// - `import { userEvent } from '@testing-library/user-event';`
+		//   It works but the official documentation also recommends using the default export
+		'import/no-named-as-default': 'off',
 		'jest/expect-expect': [
 			'warn',
 			{ assertFunctionNames: [ 'expect', 'expect[A-Z]\\w*' ] },
 		],
+		// Turn it off temporarily because it involves a lot of re-alignment. We can revisit it later.
+		'jsdoc/check-line-alignment': 'off',
+		// Originally, `@fires` tag indicates that when a method is called, it fires
+		// a specified type of event that can be listened to, e.g. a native `CustomEvent`.
+		// The JS package `tracking-jsdoc` changes the definition of the `@fires` tag to
+		// be able to indicate a tracking event will be sent. Therefore, here we list
+		// shared `@event` names to avoid false alarms.
+		'jsdoc/no-undefined-types': [
+			'error',
+			{
+				definedTypes: [
+					...jsdocConfig.rules[ 'jsdoc/no-undefined-types' ][ 1 ]
+						.definedTypes,
+					'gla_datepicker_update',
+					'gla_documentation_link_click',
+					'gla_faq',
+					'gla_filter',
+					'gla_google_account_connect_button_click',
+					'gla_google_mc_link_click',
+					'gla_launch_paid_campaign_button_click',
+					'gla_mc_account_switch_account_button_click',
+					'gla_modal_closed',
+					'gla_modal_open',
+					'gla_paid_campaign_step',
+					'gla_setup_ads',
+					'gla_setup_mc',
+					'gla_table_go_to_page',
+					'gla_table_page_click',
+				],
+			},
+		],
 	},
 	overrides: [
+		{
+			files: [ 'js/src/external-components/woocommerce/**' ],
+			rules: {
+				'@wordpress/i18n-text-domain': [
+					'error',
+					{ allowedTextDomain: 'woocommerce' },
+				],
+			},
+		},
+		{
+			files: [ 'js/src/external-components/wordpress/**' ],
+			rules: {
+				'@wordpress/i18n-text-domain': [
+					'error',
+					{ allowedTextDomain: '' },
+				],
+			},
+		},
 		{
 			files: [ 'tests/e2e/**/*.js' ],
 			rules: {

.npmrc

@@ -1 +1,6 @@
 engine-strict=true
+
+# The legacy-peer-deps option eliminates React versioning conflicts in npm peer
+# dependencies between @wordpress/* and @woocommerce/*. It should be removed
+# after they don't have versioning conflicts.
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-v16
+v20

README.md

@@ -63,7 +63,9 @@ Now you can build the files using one of these commands:
 
 Notice this repository has `engine-strict=true` directive set. That means you cannot install dependencies with other Node engines rather than the ones defined in the `engines` directive inside [package.json](./package.json). It's recommended to use [NVM](https://github.com/nvm-sh/nvm) and run `nvm use` before installing the dependencies to be sure you're using the recommended Node version.
 
-We added Node `^18` and npm `^9` to allow dependabot to update our dependencies. But these are not supported versions.
+The `engines` in package.json includes npm `^9` to allow dependabot to update our dependencies. However, it's not the version intended to be used in development.
+
+-   See https://github.com/dependabot/dependabot-core/issues/9277
 
 ## Working with DEWP
 

changelog.txt

@@ -1,5 +1,25 @@
 *** Google for WooCommerce Changelog ***
 
+= 2.8.5 - 2024-09-05 =
+* Break - Remove WooCommerce Navigation integration.
+* Fix - Issue with syncing shipping rates with more than two decimals.
+* Fix - Log exceptions triggered by assets being enqueued before being registered.
+* Tweak - Use remote-site-status to check the WPCOM Auth status.
+* Tweak - WC 9.3.0 compatibility.
+
+= 2.8.4 - 2024-08-28 =
+* Dev - Align namespaces for unit tests.
+* Dev - Avoid accidentally using the event object to reset the asset group values in the CampaignAssetsForm component.
+* Dev - Migrate jest tests to use Node.js 20.
+* Dev - Rewrite the replacer of JSON.stringify in getReportKey to ensure it returns the same key regardless of the query keys' order.
+* Dev - Upgrade to use Node.js 20 and bump npm dependencies.
+* Dev - Use a fixed SKU number when testing product adapter.
+* Fix - issue with comma separators for Shipping Rates.
+* Tweak - Connect Test Page errors when WPCOM token is not connected.
+* Tweak - Make the Tooltip use the new placement prop when WordPress >= 6.4.
+* Tweak - Replace deprecated event.keyCode with event.code for the verification code inputs in the contact information setting.
+* Tweak - Update the copy in the "Linked accounts" of the accounts connection setting to include Google Ads account.
+
 = 2.8.3 - 2024-08-20 =
 * Fix - Return empty array props as empty objects in WCOM Proxy responses.
 * Tweak - Display additional context in error message when Google Ads account limit reached.

google-listings-and-ads.php

@@ -3,7 +3,7 @@
  * Plugin Name: Google for WooCommerce
  * Plugin URL: https://wordpress.org/plugins/google-listings-and-ads/
  * Description: Native integration with Google that allows merchants to easily display their products across Google’s network.
- * Version: 2.8.3
+ * Version: 2.8.5
  * Author: WooCommerce
  * Author URI: https://woocommerce.com/
  * Text Domain: google-listings-and-ads
@@ -13,7 +13,7 @@
  * Requires PHP Architecture: 64 bits
  * Requires Plugins: woocommerce
  * WC requires at least: 6.9
- * WC tested up to: 9.2.0
+ * WC tested up to: 9.3.0
  * Woo:
  *
  * @package WooCommerce\Admin
@@ -30,7 +30,7 @@
 
 defined( 'ABSPATH' ) || exit;
 
-define( 'WC_GLA_VERSION', '2.8.3' ); // WRCS: DEFINED_VERSION.
+define( 'WC_GLA_VERSION', '2.8.5' ); // WRCS: DEFINED_VERSION.
 define( 'WC_GLA_MIN_PHP_VER', '7.4' );
 define( 'WC_GLA_MIN_WC_VER', '6.9' );
 

jest.config.js

@@ -8,7 +8,7 @@ module.exports = {
 	setupFiles: [ 'core-js', '<rootDir>/js/src/tests/jest-unit.setup.js' ],
 	transformIgnorePatterns: [
 		// Fix that `[email protected]` doesn't provide the CommonJS build, so it needs to be transformed.
-		'<rootDir>/node_modules/(?!is-plain-obj/)',
+		'<rootDir>/node_modules/(?!@woocommerce/components/node_modules/is-plain-obj/)',
 	],
 	moduleNameMapper: {
 		'\\.(png|jpg)$': '<rootDir>/tests/mocks/assets/imageMock.js',
@@ -20,6 +20,18 @@ module.exports = {
 			'<rootDir>/js/src/tests/dependencies/woocommerce/settings',
 		'@automattic/calypso-config':
 			'<rootDir>/js/src/tests/dependencies/automattic/calypso-config',
+		// Ignore that 'qrcode.react' module is incorrectly listed in dev dependencies of '@automattic/components'.
+		// Ref: https://github.com/Automattic/wp-calypso/blob/%40automattic/components%402.1.1/packages/components/package.json#L72
+		'@automattic/components':
+			'<rootDir>/js/src/tests/dependencies/automattic/components',
+		// Fix `@woocommerce/components` still using incompatible `@woocommerce/currency`.
+		'@woocommerce/currency': require.resolve( '@woocommerce/currency' ),
+		// Fix the React versioning conflicts between @wordpress/* and @woocommerce/*.
+		// It should be removed after they don't have versioning conflicts.
+		'^react$': require.resolve( 'react' ),
+		// Force 'uuid' to resolve with the CommonJS entry point, because jest doesn't
+		// support `package.json.exports`.
+		'^uuid$': require.resolve( 'uuid' ),
 	},
 	// Exclude e2e tests from unit testing.
 	testPathIgnorePatterns: [
@@ -38,9 +50,16 @@ module.exports = {
 		'<rootDir>/js/build-dev',
 	],
 	globals: {
-		wcAdminFeatures: {
-			navigation: false,
+		wcSettings: {
+			currency: {
+				code: 'USD',
+				precision: 2,
+				symbol: '$',
+				symbolPosition: 'left',
+				decimalSeparator: '.',
+				priceFormat: '%1$s%2$s',
+				thousandSeparator: ',',
+			},
 		},
 	},
-	timers: 'fake',
 };

js/src/attribute-mapping/attribute-mapping-delete-rule-modal.js

@@ -55,14 +55,16 @@
 	};
 
 	const handleClose = () => {
-		if ( deleting ) return;
+		if ( deleting ) {
+			return;
+		}
 		onRequestClose( 'dismiss' );
 	};
 
 	return (
 		<AppModal
 			onRequestClose={ handleClose }
-			title={ __( 'Delete attribute rule?', ' google-listings-and-ads' ) }
+			title={ __( 'Delete attribute rule?', 'google-listings-and-ads' ) }
 			buttons={ [
 				<AppButton
 					disabled={ deleting }

js/src/attribute-mapping/attribute-mapping-rule-modal.js

@@ -161,7 +161,9 @@
 	};
 
 	const handleClose = () => {
-		if ( saving ) return;
+		if ( saving ) {
+			return;
+		}
 		onRequestClose( 'dismiss' );
 	};
 
@@ -172,8 +174,8 @@
 			className="gla-attribute-mapping__rule-modal"
 			title={
 				rule
-					? __( 'Manage attribute rule', ' google-listings-and-ads' )
-					: __( 'Create attribute rule', ' google-listings-and-ads' )
+					? __( 'Manage attribute rule', 'google-listings-and-ads' )
+					: __( 'Create attribute rule', 'google-listings-and-ads' )
 			}
 			buttons={ [
 				<AppButton

js/src/attribute-mapping/index.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import Section from '.~/wcdl/section';
 import AttributeMappingDescription from './attribute-mapping-description';
 import AttributeMappingTable from './attribute-mapping-table';
-import NavigationClassic from '.~/components/navigation-classic';
+import MainTabNav from '.~/components/main-tab-nav';
 import RebrandingTour from '.~/components/tours/rebranding-tour';
 import './index.scss';
 
@@ -21,7 +21,7 @@ import './index.scss';
 const AttributeMapping = () => {
 	return (
 		<div className="gla-attribute-mapping">
-			<NavigationClassic />
+			<MainTabNav />
 			<RebrandingTour />
 			<Section
 				title={ __( 'Manage attributes', 'google-listings-and-ads' ) }

js/src/attribute-mapping/index.test.js

@@ -182,6 +182,7 @@ describe( 'Attribute Mapping', () => {
 	} );
 
 	test( 'Add new Attribute mapping - Enum', async () => {
+		const user = userEvent.setup();
 		const { queryByText, findByRole } = render( <AttributeMapping /> );
 
 		// Modal is open when clicking th button
@@ -198,11 +199,11 @@ describe( 'Attribute Mapping', () => {
 		expect( buttonSave ).toBeTruthy();
 		expect( buttonSave ).toBeDisabled();
 
-		userEvent.selectOptions( select, 'adult' );
+		await user.selectOptions( select, 'adult' );
 		const enumSelect = await findByRole( 'combobox', {
 			name: 'Select default value',
 		} );
-		userEvent.selectOptions( enumSelect, 'no' );
+		await user.selectOptions( enumSelect, 'no' );
 
 		expect( buttonSave ).toBeEnabled();
 		fireEvent.click( buttonSave );
@@ -216,6 +217,7 @@ describe( 'Attribute Mapping', () => {
 	} );
 
 	test( 'Add new Attribute mapping - Field / Fixed value', async () => {
+		const user = userEvent.setup();
 		const { queryByText, findByRole } = render( <AttributeMapping /> );
 
 		// Modal is open when clicking th button
@@ -226,26 +228,27 @@ describe( 'Attribute Mapping', () => {
 		const select = await findByRole( 'combobox', {
 			name: 'Select a Google attribute that you want to manage',
 		} );
-		userEvent.selectOptions( select, 'brands' );
+		await user.selectOptions( select, 'brands' );
 
 		// Show fixed value when we check "Set a fixed value" radio
 		const setFixedRadio = await findByRole( 'radio', {
 			name: 'Set a fixed value',
 		} );
-		userEvent.click( setFixedRadio );
+		await user.click( setFixedRadio );
 		await findByRole( 'textbox' );
 
 		// Show selector value when we check "Use value from existing product field" radio
 		const setFieldRadio = await findByRole( 'radio', {
 			name: 'Use value from existing product field',
 		} );
-		userEvent.click( setFieldRadio );
+		await user.click( setFieldRadio );
 		await findByRole( 'combobox', {
 			name: 'Use value from existing product field',
 		} );
 	} );
 
 	test( 'Update Attribute mapping Rule', async () => {
+		const user = userEvent.setup();
 		const { queryAllByText, queryByText, findByRole } = render(
 			<AttributeMapping />
 		);
@@ -260,7 +263,7 @@ describe( 'Attribute Mapping', () => {
 
 		const buttonSave = queryByText( 'Save rule' );
 		expect( buttonSave ).toBeDisabled();
-		userEvent.selectOptions( enumSelect, 'no' );
+		await user.selectOptions( enumSelect, 'no' );
 		expect( buttonSave ).toBeEnabled();
 		fireEvent.click( buttonSave );
 
@@ -304,6 +307,7 @@ describe( 'Attribute Mapping', () => {
 	} );
 
 	test( 'Renders categories helper', async () => {
+		const user = userEvent.setup();
 		const { queryByText, findByText } = render(
 			<AttributeMappingTableCategories
 				categories={ '1' }
@@ -313,11 +317,12 @@ describe( 'Attribute Mapping', () => {
 		expect( queryByText( 'All except' ) ).toBeTruthy();
 		const category = queryByText( '1 category' );
 		expect( category ).toBeTruthy();
-		userEvent.hover( category );
+		await user.hover( category );
 		await findByText( 'Category 1' );
 	} );
 
 	test( 'Renders categories helper with tons of categories', async () => {
+		const user = userEvent.setup();
 		const { queryByText, findByText } = render(
 			<AttributeMappingTableCategories
 				categories={ '1,2,3,1,2,3,1,2,3,1,2,3' }
@@ -328,14 +333,15 @@ describe( 'Attribute Mapping', () => {
 		expect( queryByText( 'Only in' ) ).toBeTruthy();
 		const categories = queryByText( '12 categories' );
 		expect( categories ).toBeTruthy();
-		userEvent.hover( categories );
+		await user.hover( categories );
 		await findByText(
 			'Category 1, Category 2, Category 3, Category 1, Category 2'
 		);
 		await findByText( '+ 7 more' );
 	} );
 
 	test( 'Shows deleted categories', async () => {
+		const user = userEvent.setup();
 		const { queryByText, findByText } = render(
 			<AttributeMappingTableCategories
 				categories={ '1,6' }
@@ -346,7 +352,7 @@ describe( 'Attribute Mapping', () => {
 		expect( queryByText( 'Only in' ) ).toBeTruthy();
 		const categories = queryByText( '2 categories' );
 		expect( categories ).toBeTruthy();
-		userEvent.hover( categories );
+		await user.hover( categories );
 		await findByText( 'Category 1, Category ID 6 (deleted)' );
 	} );