Merge pull request #2542 from woocommerce/update/2490-hide-tax-rate-s…

…election-ui-onboarding

Hide Tax UI during onboarding & keep in edit campaign

js/src/components/free-listings/configure-product-listings/checkErrors.js

@@ -17,7 +17,8 @@ const checkErrors = (
 	values,
 	shippingTimes,
 	finalCountryCodes,
-	storeCountryCode
+	storeCountryCode,
+	hideTaxRates = false
 ) => {
 	const errors = {};
 
@@ -110,6 +111,7 @@ const checkErrors = (
 	 * Check tax rate (required for U.S. only).
 	 */
 	if (
+		! hideTaxRates &&
 		( storeCountryCode === 'US' || finalCountryCodes.includes( 'US' ) ) &&
 		! validTaxRateSet.has( values.tax_rate )
 	) {

js/src/components/free-listings/setup-free-listings/form-content.js

@@ -23,13 +23,16 @@ import ConditionalSection from '.~/components/conditional-section';
  *
  * @param {Object} props React props.
  * @param {string} [props.submitLabel="Complete setup"] Submit button label.
+ * @param {boolean} [props.hideTaxRates] Whether to hide tax rate section.
  */
 const FormContent = ( {
 	submitLabel = __( 'Complete setup', 'google-listings-and-ads' ),
+	hideTaxRates,
 } ) => {
 	const { values, isValidForm, handleSubmit, adapter } =
 		useAdaptiveFormContext();
-	const shouldDisplayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const displayTaxRate = useDisplayTaxRate( adapter.audienceCountries );
+	const shouldDisplayTaxRate = ! hideTaxRates && displayTaxRate;
 	const shouldDisplayShippingTime = values.shipping_time === 'flat';
 
 	const handleSubmitClick = ( event ) => {

js/src/components/free-listings/setup-free-listings/index.js

@@ -69,6 +69,7 @@ const getSettings = ( values ) => {
  * @param {() => void} [props.onContinue] Callback called once continue button is clicked. Could be async. While it's being resolved the form would turn into a saving state.
  * @param {string} [props.submitLabel] Submit button label, to be forwarded to `FormContent`.
  * @param {JSX.Element} props.headerTitle Title in the header block of this setup.
+ * @param {boolean} [props.hideTaxRates=false] Whether to hide tax rate section, to be forwarded to `FormContent`.
  */
 const SetupFreeListings = ( {
 	targetAudience,
@@ -83,6 +84,7 @@ const SetupFreeListings = ( {
 	onContinue = noop,
 	submitLabel,
 	headerTitle,
+	hideTaxRates = false,
 } ) => {
 	const formRef = useRef();
 	const { code: storeCountryCode } = useStoreCountry();
@@ -99,7 +101,8 @@ const SetupFreeListings = ( {
 			values,
 			shippingTimesData,
 			countries,
-			storeCountryCode
+			storeCountryCode,
+			hideTaxRates
 		);
 	};
 
@@ -218,7 +221,10 @@ const SetupFreeListings = ( {
 				validate={ handleValidate }
 				onSubmit={ onContinue }
 			>
-				<FormContent submitLabel={ submitLabel } />
+				<FormContent
+					submitLabel={ submitLabel }
+					hideTaxRates={ hideTaxRates }
+				/>
 			</AdaptiveForm>
 		</div>
 	);

js/src/setup-mc/setup-stepper/saved-setup-stepper.js

@@ -170,6 +170,7 @@ const SavedSetupStepper = ( { savedStep } ) => {
 							targetAudience={ initTargetAudience }
 							settings={ initSettings }
 							shippingRates={ initShippingRates }
+							hideTaxRates={ true }
 							shippingTimes={ initShippingTimes }
 							resolveFinalCountries={ getFinalCountries }
 							onTargetAudienceChange={ handleFormChange.bind(

tests/e2e/specs/setup-mc/step-2-product-listings.test.js

@@ -5,7 +5,6 @@ import ProductListingsPage from '../../utils/pages/setup-mc/step-2-product-listi
 import {
 	getCountryInputSearchBoxContainer,
 	getCountryInputSearchBox,
-	removeCountryFromSearchBox,
 	selectCountryFromSearchBox,
 } from '../../utils/page';
 
@@ -65,6 +64,12 @@ test.describe( 'Configure product listings', () => {
 			productListingsPage.fulfillSettings(
 				{
 					shipping_rate: 'automatic',
+					website_live: false,
+					checkout_process_secure: false,
+					payment_methods_visible: false,
+					refund_tos_visible: false,
+					contact_info_visible: false,
+					tax_rate: 'destination',
 				},
 				200,
 				[ 'GET' ]
@@ -150,31 +155,6 @@ test.describe( 'Configure product listings', () => {
 		await productListingsPage.checkSelectedCountriesOnlyRadioButton();
 	} );
 
-	test( 'should still see "Tax rate (required for U.S. only)" even if deselect US when the default country is US', async () => {
-		const taxRateSection = productListingsPage.getTaxRateSection();
-		await expect( taxRateSection ).toBeVisible();
-		await removeCountryFromSearchBox( page, 'United States (US)' );
-		await expect( taxRateSection ).toBeVisible();
-	} );
-
-	test( 'should hide "Tax rate (required for U.S. only)" if deselect US when the default country is not US', async () => {
-		// Mock WC default country as TW, because Tax rate will always be shown if the default country is US.
-		await productListingsPage.fulfillWCDefaultCountry( {
-			woocommerce_default_country: 'TW',
-		} );
-		await page.reload();
-
-		// Check the radio button of "Selected countries only" first in order to ensure the country search box is visible.
-		await productListingsPage.checkSelectedCountriesOnlyRadioButton();
-
-		const taxRateSection = productListingsPage.getTaxRateSection();
-		await expect( taxRateSection ).toBeVisible();
-
-		await removeCountryFromSearchBox( page, 'United States (US)' );
-
-		await expect( taxRateSection ).not.toBeVisible();
-	} );
-
 	test.describe( 'Shipping rate is simple', () => {
 		test.beforeAll( async () => {
 			await page.reload();
@@ -347,12 +327,6 @@ test.describe( 'Configure product listings', () => {
 				'Successfully added time for country: "US".'
 			);
 		} );
-
-		test( 'should show error message if clicking "Continue" button when tax rate is not chosen', async () => {
-			await productListingsPage.clickContinueButton();
-			const taxRateError = productListingsPage.getTaxRateError();
-			await expect( taxRateError ).toBeVisible();
-		} );
 	} );
 
 	test.describe( 'Links', () => {
@@ -378,15 +352,6 @@ test.describe( 'Configure product listings', () => {
 				'https://support.google.com/merchants/answer/7050921'
 			);
 		} );
-
-		test( 'should contain the correct URL for "Read more for Tax Rate" link', async () => {
-			const link = productListingsPage.getReadMoreTaxRateLink();
-			await expect( link ).toBeVisible();
-			await expect( link ).toHaveAttribute(
-				'href',
-				'https://support.google.com/merchants/answer/160162'
-			);
-		} );
 	} );
 
 	test.describe( 'Click "Continue" button', () => {
@@ -395,7 +360,6 @@ test.describe( 'Configure product listings', () => {
 			productListingsPage.mockContactInformation();
 			productListingsPage.checkRecommendedShippingRateRadioButton();
 			await productListingsPage.fillEstimatedShippingTimes( '14' );
-			await productListingsPage.checkNonDestinationBasedTaxRateRadioButton();
 		} );
 
 		test( 'should see the heading of next step and request for the contact information after clicking "Continue"', async () => {

tests/e2e/utils/pages/setup-mc/step-2-product-listings.js

@@ -123,18 +123,6 @@ export default class ProductListingsPage extends MockRequests {
 		} );
 	}
 
-	/**
-	 * Get non-destination-based tax rate radio row.
-	 *
-	 * @return {import('@playwright/test').Locator} Get non-destination-based tax rate radio row.
-	 */
-	getNonDestinationBasedTaxRateRadioRow() {
-		return this.page.getByRole( 'radio', {
-			name: 'My store does not use destination-based tax rates.',
-			exact: true,
-		} );
-	}
-
 	/**
 	 * Get shipping rates section.
 	 *
@@ -157,17 +145,6 @@ export default class ProductListingsPage extends MockRequests {
 			.filter( { hasText: 'Shipping times' } );
 	}
 
-	/**
-	 * Get tax rate section.
-	 *
-	 * @return {import('@playwright/test').Locator} Get tax rate section.
-	 */
-	getTaxRateSection() {
-		return this.page
-			.locator( 'section' )
-			.filter( { hasText: 'Tax rate (required for U.S. only)' } );
-	}
-
 	/**
 	 * Get audience card.
 	 *
@@ -234,17 +211,6 @@ export default class ProductListingsPage extends MockRequests {
 		);
 	}
 
-	/**
-	 * Get tax rate error.
-	 *
-	 * @return {import('@playwright/test').Locator} Get tax rate error.
-	 */
-	getTaxRateError() {
-		return this.getTaxRateSection().getByText(
-			'Please specify tax rate option.'
-		);
-	}
-
 	/**
 	 * Get "Free shipping for all orders" tag.
 	 *
@@ -314,18 +280,6 @@ export default class ProductListingsPage extends MockRequests {
 		} );
 	}
 
-	/**
-	 * Get "Read more" for Tax rate link.
-	 *
-	 * @return {import('@playwright/test').Locator} Get "Read more" for Tax rate link.
-	 */
-	getReadMoreTaxRateLink() {
-		return this.getTaxRateSection().getByRole( 'link', {
-			name: 'Read more',
-			exact: true,
-		} );
-	}
-
 	/**
 	 * Register the requests when the continue button is clicked.
 	 *
@@ -448,17 +402,6 @@ export default class ProductListingsPage extends MockRequests {
 		await this.page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
 	}
 
-	/**
-	 * Check non-destination-based tax rate radio button.
-	 *
-	 * @return {Promise<void>}
-	 */
-	async checkNonDestinationBasedTaxRateRadioButton() {
-		const radio = this.getNonDestinationBasedTaxRateRadioRow();
-		await radio.check();
-		await this.page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
-	}
-
 	/**
 	 * Fill estimated shipping rates.
 	 *