#7770441 Checkout: add VAT fields to tax fields

Proposed Changes

This PR adds a VAT and an Organization field to the TaxFields component which is rendered as the first step of checkout if there is no domain product or GSuite product in the cart.

The fields are only made available if the country code selected in the tax form is one of a set of hard-coded countries that support VAT.

Currently this new field will not be visible in production as it is behind a feature flag.

Unlike the other fields in the contact form which pre-populate from and update the cached contact details endpoints, the VAT fields pre-populate from and send their updates to the existing VAT details endpoints used by the calypso VAT pages (see #53133). This means that the fields are subject to the same validation and restrictions of that form (eg: it’s not possible to edit the VAT ID once it’s been set for the user). In effect, these fields are just another interface to the existing VAT form under /me/purchases/vat-details. However, there are two differences:

First, the checkout version of the form does not include the “Address” field. I did this intentionally because I felt that it cluttered the form, added friction, and may not actually be required. I also did it because once we add this form to the domain form, which already includes address fields, it’s likely to feel redundant and awkward (we can’t use those address fields because they are separated into address1/address2/city/state/etc.).

Second, the /me/purchases/vat-details form uses the country code UK for the United Kingdom (which is incorrect; see Automattic/payments-shilling#1276) and this form uses GB. This won’t be as much of an issue after #72513.

The information collected by this form is sent to three endpoints: the VAT details endpoint, the shopping-cart endpoint (along with other tax data), and the transactions endpoint (as part of the shopping-cart data). It’s worth noting that if the checkbox that displays the form is not checked, the data will not be sent to the shopping-cart endpoint or the transactions endpoint even if it’s saved to the VAT details endpoint. This is by design so that users can chose to apply their VAT information on a per-transaction basis.

Part of Automattic/payments-shilling#1278

Screenshots

VAT checkbox unchecked:

VAT checkbox checked:

VAT checkbox checked for UK:

VAT checkbox pre-filled:

To do

• Show fields for applicable countries.
• Toggle fields with checkbox.
• When fields are hidden (due to checkbox or unsupported country), do not send their values to any endpoints (validate, cache, transactions, cart).
• Send fields for validation when completing contact details step. This may not be a blocker since the VAT endpoint does its own validation.
• Send fields to shopping cart. Requires D96395-code
• Send fields to cached contact details. This works for organization but VAT isn’t stored by the endpoint currently, which is fine because we’ll be using the VAT endpoint. This is no longer needed. We will use the vat details endpoint to handle caching.
• Send fields to VAT endpoint when completing (valid) contact details step.
• Display error if updating VAT endpoint fails.
• Prefill fields from VAT endpoint.
• Make fields non-editable if they have already been set for the user.
• Send fields to transactions endpoint as part of cart when checkout is submitted.
• Add tests for these fields.
• Use a special country code for Northern Ireland.

Testing Instructions

Testing normal behavior

• On this branch, add a non-domain, non-gsuite product to your cart and visit checkout.
• If the checkout contact/billing details step is automatically completed, click the “Edit” button to make it active.
• Select a non-VAT country like “United States” in the country field.
• Verify that you see only the country and (optionally) postal code fields. Neither the VAT fields nor the VAT checkbox should be visible.
• Click to continue past the step and verify that no VAT errors occur.

Testing that the fields work

• Click to edit the step again.
• Select a VAT country like “United Kingdom” in the country field and a valid postal code number like NW1 4NP.
• Verify that you see the VAT checkbox appear.
• Click the checkbox and verify that the VAT fields appear. Set the VAT Number to an invalid one like 1234 and the company name to Test company and click continue to complete the step.
• Verify that you see a validation error and that the step remains active.
• Change the VAT Number to a valid one like 553557881 and click continue to complete the step. (Note: this is a test number that will only work when the API is sandboxed).
• Verify that the validation is successful and that the step completes.
• Click to edit the step again.
• Verify that you can no longer edit the VAT Number.
• Visit /me/purchases/vat-details and verify that the form there has the same information entered in checkout.
• Return to checkout, edit the step again, and verify that the form is pre-populated with the VAT details you entered before.

Verifying the data is sent correctly

• Open your browser’s devtools panel to monitor network traffic and look for transactions to the /me/shopping-cart endpoint.
• Click to complete the step and verify that the shopping-cart endpoint request includes the VAT information in its tax property.
• Edit the step again and uncheck the VAT checkbox, hiding the new fields.
• Click to complete the step and verify that the shopping-cart endpoint request does not include the VAT information in its tax property.