Checkout: Add "Is this purchase for business" checkbox for certain US states

[sirbrillig]

Proposed Changes

This PR adds a new checkbox to the billing info we collect in checkout for tax purposes for certain US states (OH and CT). It reads "Is this purchase for business?" and will be used to help us collect taxes in those states.

Note

The tax calculation doesn't yet do anything with this information. That will come later.

Depends on D142843-code

Part of https://github.com/Automattic/payments-shilling/issues/1914

Testing Instructions

• Sandbox the API and apply D142843-code.
• Visit checkout with a product in your cart.
• In the billing info step, enter "United States" as the country and "23000" as the postal code.
• When you reach the submit button, verify that you do not see the new checkbox.
• Edit the billing info step, enter "United States" as the country and "43000" as the postal code.
• Verify that the new checkbox appears above the submit button.
• Check and uncheck the box and verify that the cart updates (you'll see a brief loading period).
• Repeat the above step with your browser's network tab open; verify that the /me/shopping-cart requests made by toggling the box include a tax.location.is_for_business property that matches what the checkbox shows.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-119211

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-119211&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-119211&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~3173 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
checkout                               +2009 B  (+0.1%)     +499 B  (+0.1%)
write-flow                             +1228 B  (+0.2%)     +243 B  (+0.1%)
videopress-tv-flow                     +1228 B  (+2.0%)     +243 B  (+1.2%)
videopress-flow                        +1228 B  (+0.1%)     +245 B  (+0.1%)
update-design-flow                     +1228 B  (+0.1%)     +243 B  (+0.1%)
themes                                 +1228 B  (+0.1%)     +233 B  (+0.1%)
theme                                  +1228 B  (+0.2%)     +233 B  (+0.1%)
staging-site                           +1228 B  (+0.1%)     +231 B  (+0.1%)
sites-dashboard                        +1228 B  (+0.1%)     +231 B  (+0.1%)
site-performance                       +1228 B  (+0.1%)     +231 B  (+0.1%)
site-monitoring                        +1228 B  (+0.1%)     +231 B  (+0.1%)
site-logs                              +1228 B  (+0.1%)     +231 B  (+0.1%)
site-blocks                            +1228 B  (+0.2%)     +243 B  (+0.1%)
signup                                 +1228 B  (+0.4%)     +243 B  (+0.4%)
settings                               +1228 B  (+0.1%)     +231 B  (+0.1%)
sensei-flow                            +1228 B  (+0.2%)     +243 B  (+0.1%)
security                               +1228 B  (+0.1%)     +264 B  (+0.1%)
purchases                              +1228 B  (+0.1%)     +235 B  (+0.0%)
privacy                                +1228 B  (+0.2%)     +243 B  (+0.1%)
plans                                  +1228 B  (+0.1%)     +247 B  (+0.1%)
notification-settings                  +1228 B  (+0.1%)     +243 B  (+0.1%)
me                                     +1228 B  (+0.2%)     +243 B  (+0.1%)
marketplace                            +1228 B  (+0.1%)     +251 B  (+0.1%)
link-in-bio-tld-flow                   +1228 B  (+0.1%)     +262 B  (+0.1%)
jetpack-connect                        +1228 B  (+0.1%)     +243 B  (+0.1%)
jetpack-cloud-pricing                  +1228 B  (+0.2%)     +243 B  (+0.1%)
jetpack-cloud-plugin-management        +1228 B  (+0.1%)     +218 B  (+0.0%)
jetpack-cloud-partner-portal           +1228 B  (+0.1%)     +243 B  (+0.1%)
jetpack-cloud-manage-pricing           +1228 B  (+0.3%)     +243 B  (+0.2%)
jetpack-cloud-features-comparison      +1228 B  (+0.2%)     +243 B  (+0.1%)
jetpack-cloud-agency-sites-v2          +1228 B  (+0.1%)     +243 B  (+0.0%)
import-hosted-site-flow                +1228 B  (+0.1%)     +243 B  (+0.1%)
hundred-year-plan                      +1228 B  (+3.4%)     +243 B  (+2.3%)
hosting-features                       +1228 B  (+0.1%)     +231 B  (+0.1%)
hosting                                +1228 B  (+0.1%)     +231 B  (+0.0%)
home                                   +1228 B  (+0.1%)     +233 B  (+0.1%)
help                                   +1228 B  (+0.2%)     +243 B  (+0.1%)
github-deployments                     +1228 B  (+0.1%)     +231 B  (+0.1%)
email                                  +1228 B  (+0.2%)     +243 B  (+0.1%)
domains                                +1228 B  (+0.1%)     +247 B  (+0.0%)
developer                              +1228 B  (+0.2%)     +243 B  (+0.1%)
copy-site-flow                         +1228 B  (+0.2%)     +243 B  (+0.1%)
build-flow                             +1228 B  (+0.2%)     +243 B  (+0.1%)
account-close                          +1228 B  (+0.2%)     +243 B  (+0.1%)
account                                +1228 B  (+0.1%)     +235 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~729 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal                                            +2009 B  (+0.2%)     +509 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal                                       +2009 B  (+0.2%)     +509 B  (+0.2%)
async-load-purchase-modal-wrapper                                                     +1264 B  (+0.3%)     +256 B  (+0.2%)
async-load-masterbar-cart-masterbar-cart-wrapper                                      +1228 B  (+1.2%)     +243 B  (+0.7%)
async-load-design-blocks                                                              +1228 B  (+0.1%)     +220 B  (+0.0%)
async-load-calypso-my-sites-sidebar                                                   +1228 B  (+4.1%)     +243 B  (+2.5%)
async-load-calypso-layout-masterbar-checkout-tsx                                      +1228 B  (+1.1%)     +243 B  (+0.6%)
async-load-calypso-layout-masterbar-checkout                                          +1228 B  (+1.9%)     +243 B  (+1.0%)
async-load-signup-steps-page-picker                                                     +36 B  (+0.0%)      +13 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +36 B  (+0.0%)      +13 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirbrillig]

Do we need to have the checkbox when adding new payment methods outside of checkout? Does it make sense to keep this info attached to a payment method like our other tax details?

I think that I'm going to have to take a different approach. This checkbox is not something that should be attached to a payment method and it doesn't make sense to have it outside of checkout. It should be a question asked anew for each checkout and not inside the billing info step (or inside any step) because that step may be collapsed. It's probably best to put this at the bottom of checkout above the submit button. That means that toggling the box will update the shopping cart (because it needs to be sent as part of the tax info) and may change the price but there's no reason that should not work.

[sirbrillig]

This approach should now work.

[jjchrisdiehl]

Do we need to have the checkbox when adding new payment methods outside of checkout? Does it make sense to keep this info attached to a payment method like our other tax details?

I agree that the method being used shouldn't matter as the tax is applied to the transaction and where it is being executed from - i.e. if I am in Pennsylvania then I would need to pay PA sales tax (assuming PA has an online sales tax etc etc). So bundling this tax data with the method isn't necessary - just bundling it with the specific cart/transaction when it's completed. But correct me if I am wrong here!

[jjchrisdiehl]

Works great!

I found no issues with the code 👍

[sirbrillig]

FWIW I'm waiting to merge this until we have a plan for the backend support. See https://github.com/Automattic/payments-shilling/issues/1914