Add support for Japan to the tax details modal

changelog/fix-8926-localise-vat-details-modal

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Support adding tax details (corporate number) for Japan merchants (so can generate tax documents for consumption tax, aka VAT).

client/documents/list/test/index.tsx

@@ -238,20 +238,24 @@ describe( 'Document download button', () => {
 				expect( window.open ).not.toHaveBeenCalled();
 			} );
 
-			it( 'should open the VAT form modal', () => {
+			it( 'should open the tax details modal', () => {
 				// Make sure the modal is not opened before clicking on the button.
 				expect(
-					screen.queryByRole( 'dialog', { name: 'VAT details' } )
+					screen.queryByRole( 'dialog', {
+						name: 'Set your tax details',
+					} )
 				).toBeNull();
 
 				user.click( downloadButton );
 
 				expect(
-					screen.getByRole( 'dialog', { name: 'VAT details' } )
+					screen.getByRole( 'dialog', {
+						name: 'Set your tax details',
+					} )
 				).toBeVisible();
 			} );
 
-			describe( 'after the VAT details are submitted', () => {
+			describe( 'after the tax details are submitted', () => {
 				beforeEach( () => {
 					user.click( downloadButton );
 
@@ -260,7 +264,9 @@ describe( 'Document download button', () => {
 
 				it( 'should close the modal', () => {
 					expect(
-						screen.queryByRole( 'dialog', { name: 'VAT details' } )
+						screen.queryByRole( 'dialog', {
+							name: 'Set your tax details',
+						} )
 					).toBeNull();
 				} );
 

client/vat/form-modal/index.tsx

@@ -24,7 +24,7 @@ const VatFormModal = ( {
 } ): JSX.Element | null => {
 	return isModalOpen ? (
 		<Modal
-			title={ __( 'VAT details', 'woocommerce-payments' ) }
+			title={ __( 'Set your tax details', 'woocommerce-payments' ) }
 			onRequestClose={ () => setModalOpen( false ) }
 		>
 			<VatForm onCompleted={ onCompleted } />

client/vat/form/tasks/vat-number-task.tsx

@@ -9,7 +9,7 @@ import {
 	Notice,
 	TextControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import React, { useContext, useState } from 'react';
 import CollapsibleBody from 'wcpay/additional-methods-setup/wizard/collapsible-body';
 import WizardTaskItem from 'wcpay/additional-methods-setup/wizard/task-item';
@@ -22,8 +22,14 @@ import apiFetch from '@wordpress/api-fetch';
 import { VatError, VatFormOnCompleted, VatValidationResult } from '../../types';
 import '../style.scss';
 
+/**
+ * These country-specific getters may belong on server.
+ */
 const getVatPrefix = () => {
 	switch ( wcpaySettings.accountStatus.country ) {
+		case 'JP':
+			// Corporate numbers are not prefixed.
+			return '';
 		case 'GR':
 			return 'EL ';
 		case 'CH':
@@ -33,6 +39,54 @@ const getVatPrefix = () => {
 	}
 };
 
+const getVatTaxIDName = () => {
+	switch ( wcpaySettings.accountStatus.country ) {
+		case 'JP':
+			return __( 'Corporate Number', 'woocommerce-payments' );
+		default:
+			return __( 'VAT Number', 'woocommerce-payments' );
+	}
+};
+
+const getVatTaxIDRequirementHint = () => {
+	switch ( wcpaySettings.accountStatus.country ) {
+		case 'JP':
+			// TODO do we need a note/legal requirement hint for Japan?
+			return __( '', 'woocommerce-payments' );
+		default:
+			// TODO this message is a little alarming and doesn't provide guidance for confused merchants.
+			// What are the thresholds?
+			// How do I register for a VAT number?
+			// Idea: add a learn more link to our docs page, and link to relevant sources there.
+			// https://woocommerce.com/document/woopayments/taxes/documents/
+			// Alternative - maybe this can be removed.
+			return __(
+				"If your sales exceed the VAT threshold for your country, you're required to register for a VAT Number.",
+				'woocommerce-payments'
+			);
+	}
+};
+
+const getVatTaxIDValidationHint = () => {
+	switch ( wcpaySettings.accountStatus.country ) {
+		case 'JP':
+			return __(
+				'A 13 digit number, for example 1234567890123.',
+				'woocommerce-payments'
+			);
+		default:
+			return __(
+				'8 to 12 digits with your country code prefix, for example DE 123456789.',
+				'woocommerce-payments'
+			);
+	}
+};
+
+/**
+ * A two-step "task" for obtaining merchant's tax details.
+ *
+ * @param {VatFormOnCompleted} props.onCompleted - Callback to provide tax details on submit.
+ */
 export const VatNumberTask = ( {
 	onCompleted,
 }: {
@@ -95,17 +149,23 @@ export const VatNumberTask = ( {
 	};
 
 	return (
+		// Note: the VAT ID name is parameterised in strings below.
+		// Long term, it might be better to implement a dedicated WizardTaskItem component for each tax region.
 		<WizardTaskItem
 			index={ 1 }
-			title={ __(
-				'Update your VAT information',
-				'woocommerce-payments'
+			title={ sprintf(
+				__(
+					/* translators: %$1$s: tax ID name, e.g. VAT Number, GST Number, Corporate Number */
+					'Set your %1$s',
+					'woocommerce-payments'
+				),
+				getVatTaxIDName()
 			) }
 			className={ null }
 		>
 			<p className="wcpay-wizard-task__description-element">
 				{ __(
-					'VAT information saved on this page will be applied to all of your account’s receipts.',
+					"The information you provide here will be used for all of your account's tax documents.",
 					'woocommerce-payments'
 				) }
 			</p>
@@ -114,22 +174,22 @@ export const VatNumberTask = ( {
 				<CheckboxControl
 					checked={ isVatRegistered }
 					onChange={ setVatRegistered }
-					label={ __(
-						'I’m registered for a VAT number',
-						'woocommerce-payments'
-					) }
-					help={ __(
-						'If your sales exceed the VAT threshold for your country, you’re required to register for a VAT number.',
-						'woocommerce-payments'
+					label={ sprintf(
+						__(
+							/* translators: %$1$s: tax ID name, e.g. VAT Number, GST Number, Corporate Number */
+							"I'm registered for a %1$s",
+							'woocommerce-payments'
+						),
+						getVatTaxIDName()
 					) }
+					help={ getVatTaxIDRequirementHint() }
 				/>
 				{ isVatRegistered && (
+					// Note: this TextControl is heavily parameterised to support different regions (VAT vs GST vs Corporate Number).
+					// Long term, if we implement a dedicated WizardTaskItem component for each tax region, then this component will be simpler.
 					<TextControl
-						label={ __( 'VAT Number', 'woocommerce-payments' ) }
-						help={ __(
-							'This is 8 to 12 digits with your country code prefix, for example DE 123456789.',
-							'woocommerce-payments'
-						) }
+						label={ getVatTaxIDName() }
+						help={ getVatTaxIDValidationHint() }
 						value={ vatNumber }
 						onChange={ setVatNumber }
 					/>

client/vat/form/test/index.tsx

@@ -53,6 +53,7 @@ const countries = [
 	[ 'DE', 'DE' ],
 	[ 'GR', 'EL' ],
 	[ 'CH', 'CHE' ],
+	[ 'JP', '' ],
 ];
 
 describe( 'VAT form', () => {
@@ -66,7 +67,7 @@ describe( 'VAT form', () => {
 			render( <VatForm onCompleted={ mockOnCompleted } /> );
 
 			user.click(
-				screen.getByLabelText( 'I’m registered for a VAT number' )
+				screen.getByLabelText( "I'm registered for a VAT number" )
 			);
 
 			expect(
@@ -204,9 +205,7 @@ describe( 'VAT form', () => {
 
 	describe( 'when registered for VAT', () => {
 		beforeEach( () => {
-			user.click(
-				screen.getByLabelText( 'I’m registered for a VAT number' )
-			);
+			user.click( screen.getByLabelText( "I'm registered for a" ) );
 		} );
 
 		it( 'should disable the Continue button', () => {