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

client/my-sites/checkout/src/components/checkout-main-content.tsx

@@ -78,6 +78,7 @@ import CheckoutNextSteps from './checkout-next-steps';
 import { CheckoutSidebarPlanUpsell } from './checkout-sidebar-plan-upsell';
 import { EmptyCart, shouldShowEmptyCartPage } from './empty-cart';
 import { GoogleDomainsCopy } from './google-transfers-copy';
+import { IsForBusinessCheckbox } from './is-for-business-checkbox';
 import JetpackAkismetCheckoutSidebarPlanUpsell from './jetpack-akismet-checkout-sidebar-plan-upsell';
 import BeforeSubmitCheckoutHeader from './payment-method-step';
 import SecondaryCartPromotions from './secondary-cart-promotions';
@@ -936,6 +937,7 @@ function CheckoutTermsAndCheckboxes( {
 	return (
 		<CheckoutTermsAndCheckboxesWrapper>
 			<BeforeSubmitCheckoutHeader />
+			<IsForBusinessCheckbox />
 			{ hasMarketplaceProduct && (
 				<AcceptTermsOfServiceCheckbox
 					isAccepted={ is3PDAccountConsentAccepted }

client/my-sites/checkout/src/components/is-for-business-checkbox.tsx

@@ -0,0 +1,54 @@
+import { FormStatus, useFormStatus } from '@automattic/composite-checkout';
+import { useShoppingCart, convertTaxLocationToLocationUpdate } from '@automattic/shopping-cart';
+import { CheckboxControl } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import useCartKey from '../../use-cart-key';
+
+export function IsForBusinessCheckbox() {
+	const translate = useTranslate();
+	const { formStatus } = useFormStatus();
+
+	const cartKey = useCartKey();
+	const { responseCart, updateLocation, isLoading, isPendingUpdate } = useShoppingCart( cartKey );
+
+	const isUnitedStateWithBusinessOption = ( () => {
+		if ( responseCart.tax.location.country_code !== 'US' ) {
+			return false;
+		}
+		const zipCode = parseInt( responseCart.tax.location.postal_code ?? '0', 10 );
+		if ( zipCode >= 43000 && zipCode <= 45999 ) {
+			// Ohio; OH
+			return true;
+		}
+		if ( ( zipCode >= 6000 && zipCode <= 6389 ) || ( zipCode >= 6391 && zipCode <= 6999 ) ) {
+			// Connecticut; CT
+			return true;
+		}
+		return false;
+	} )();
+
+	const isChecked = responseCart.tax.location.is_for_business ?? false;
+	const isDisabled = formStatus !== FormStatus.READY || isLoading || isPendingUpdate;
+
+	if ( ! isUnitedStateWithBusinessOption ) {
+		return null;
+	}
+
+	return (
+		<CheckboxControl
+			id="checkout-is-business-checkbox"
+			label={ translate( 'Is this purchase for business?', { textOnly: true } ) }
+			checked={ isChecked }
+			disabled={ isDisabled }
+			onChange={ ( newValue ) => {
+				if ( isDisabled ) {
+					return;
+				}
+				updateLocation( {
+					...convertTaxLocationToLocationUpdate( responseCart.tax.location ),
+					isForBusiness: newValue,
+				} );
+			} }
+		/>
+	);
+}

client/my-sites/checkout/src/lib/translate-cart.ts

@@ -95,8 +95,16 @@ export function createTransactionEndpointCartFromResponseCart( {
 function createTransactionEndpointTaxFromResponseCartTax(
 	tax: ResponseCartTaxData
 ): RequestCartTaxData {
-	const { country_code, postal_code, subdivision_code, vat_id, organization, address, city } =
-		tax.location;
+	const {
+		country_code,
+		postal_code,
+		subdivision_code,
+		vat_id,
+		organization,
+		address,
+		city,
+		is_for_business,
+	} = tax.location;
 	return {
 		location: {
 			country_code,
@@ -106,6 +114,7 @@ function createTransactionEndpointTaxFromResponseCartTax(
 			organization,
 			address,
 			city,
+			is_for_business,
 		},
 	};
 }

packages/shopping-cart/README.md

@@ -44,7 +44,7 @@ Regardless, it's a good idea to always check `responseCart.messages.errors` and
 - `removeProductFromCart: ( uuidToRemove: string ) => Promise<ResponseCart>`. A function that requests removing a product from the cart.
 - `applyCoupon: ( couponId: string ) => Promise<ResponseCart>`. A function that requests applying a coupon to the cart (only one coupon can be applied at a time).
 - `removeCoupon: () => Promise<ResponseCart>`. A function that requests removing a coupon to the cart.
-- `updateLocation: ( location: CartLocation ) => Promise<ResponseCart>`. A function that can be used to change the tax location of the cart.
+- `updateLocation: ( location: LocationUpdate ) => Promise<ResponseCart>`. A function that can be used to change the tax location of the cart. Note that this completely replaces the current location. The [convertTaxLocationToLocationUpdate](#convertTaxLocationToLocationUpdate) function can be used to convert the current `responseCart.tax.location` value into the properties required by this function if you need to only update one value.
 - `replaceProductInCart: ( uuidToReplace: string, productPropertiesToChange: Partial< RequestCartProduct > ) => Promise<ResponseCart>`. A function that can replace one product in the cart with another, retaining the same UUID; useful for changing product variants.
 - `replaceProductsInCart: ( products: RequestCartProduct[] ) => Promise<ResponseCart>`. A function that replaces all the products in the cart with a new set of products. Can also be used to clear the cart.
 - `reloadFromServer: () => Promise<ResponseCart>`. A function to throw away the current cart cache and fetch it fresh from the shopping cart API.
@@ -102,3 +102,7 @@ A `ShoppingCartManager` has the following properties:
 - `actions: ShoppingCartManagerActions`. An object whose properties are the various actions that can be taken on the cart. They are the same as the actions returned by [useShoppingCart](#useShoppingCart).
 - `subscribe: ( callback: () => void ) => () => void`. A function to subscribe to updates to a `ShoppingCartManager` for a given cart key. The `callback` will be called any time the `ShoppingCartManager` changes for that key. The return value of the function is an unsubscribe function.
 - `fetchInitialCart: () => Promise<ResponseCart>`. A function that should be called after the cart manager is created in order to perform the initial fetch. If another action is called first, this will be called automatically before that action is dispatched.
+
+## convertTaxLocationToLocationUpdate
+
+Converts the `responseCart.tax.location` data in a `ResponseCart` to the data required by the `updateLocation()` cart action.

packages/shopping-cart/src/cart-functions.ts

@@ -2,13 +2,14 @@ import debugFactory from 'debug';
 import { getEmptyResponseCart } from './empty-carts';
 import type {
 	TempResponseCart,
-	CartLocation,
+	TaxLocationUpdate,
 	RequestCart,
 	RequestCartProduct,
 	ResponseCart,
 	ResponseCartProduct,
 	GetCart,
 	CartKey,
+	ResponseCartTaxLocation,
 } from './types';
 
 const debug = debugFactory( 'shopping-cart:cart-functions' );
@@ -43,7 +44,8 @@ export function convertResponseCartToRequestCart( {
 		tax.location.vat_id ||
 		tax.location.organization ||
 		tax.location.address ||
-		tax.location.city
+		tax.location.city ||
+		tax.location.is_for_business
 	) {
 		requestCartTax = {
 			location: {
@@ -54,6 +56,7 @@ export function convertResponseCartToRequestCart( {
 				organization: tax.location.organization,
 				address: tax.location.address,
 				city: tax.location.city,
+				is_for_business: tax.location.is_for_business,
 			},
 		};
 	}
@@ -110,30 +113,60 @@ export function removeCouponFromResponseCart( cart: TempResponseCart ): TempResp
 	};
 }
 
+/**
+ * Convert the `tax.location` data in a response cart to the data required by
+ * the `updateLocation()` cart action.
+ */
+export function convertTaxLocationToLocationUpdate(
+	location: ResponseCartTaxLocation
+): TaxLocationUpdate {
+	return {
+		countryCode: location.country_code || undefined,
+		postalCode: location.postal_code || undefined,
+		subdivisionCode: location.subdivision_code || undefined,
+		vatId: location.vat_id || undefined,
+		organization: location.organization || undefined,
+		address: location.address || undefined,
+		city: location.city || undefined,
+		isForBusiness: location.is_for_business || undefined,
+	};
+}
+
+/**
+ * Convert the tax location data used by the `updateLocation()` cart action to
+ * the `tax.location` data in the response cart.
+ */
+export function convertLocationUpdateToTaxLocation(
+	location: TaxLocationUpdate
+): ResponseCartTaxLocation {
+	return {
+		country_code: location.countryCode || undefined,
+		postal_code: location.postalCode || undefined,
+		subdivision_code: location.subdivisionCode || undefined,
+		vat_id: location.vatId || undefined,
+		organization: location.organization || undefined,
+		address: location.address || undefined,
+		city: location.city || undefined,
+		is_for_business: location.isForBusiness || undefined,
+	};
+}
+
 export function addLocationToResponseCart(
 	cart: TempResponseCart,
-	location: CartLocation
+	location: TaxLocationUpdate
 ): TempResponseCart {
 	return {
 		...cart,
 		tax: {
 			...cart.tax,
-			location: {
-				country_code: location.countryCode || undefined,
-				postal_code: location.postalCode || undefined,
-				subdivision_code: location.subdivisionCode || undefined,
-				vat_id: location.vatId || undefined,
-				organization: location.organization || undefined,
-				address: location.address || undefined,
-				city: location.city || undefined,
-			},
+			location: convertLocationUpdateToTaxLocation( location ),
 		},
 	};
 }
 
 export function doesCartLocationDifferFromResponseCartLocation(
 	cart: TempResponseCart,
-	location: CartLocation
+	location: TaxLocationUpdate
 ): boolean {
 	const {
 		countryCode: newCountryCode = '',
@@ -143,6 +176,7 @@ export function doesCartLocationDifferFromResponseCartLocation(
 		organization: newOrganization = '',
 		address: newAddress = '',
 		city: newCity = '',
+		isForBusiness: newIsForBusiness = false,
 	} = location;
 	const {
 		country_code: oldCountryCode = '',
@@ -152,6 +186,7 @@ export function doesCartLocationDifferFromResponseCartLocation(
 		organization: oldOrganization = '',
 		address: oldAddress = '',
 		city: oldCity = '',
+		is_for_business: oldIsForBusiness = false,
 	} = cart.tax?.location ?? {};
 
 	if ( location.countryCode !== undefined && newCountryCode !== oldCountryCode ) {
@@ -175,6 +210,9 @@ export function doesCartLocationDifferFromResponseCartLocation(
 	if ( location.city !== undefined && newCity !== oldCity ) {
 		return true;
 	}
+	if ( location.isForBusiness !== undefined && newIsForBusiness !== oldIsForBusiness ) {
+		return true;
+	}
 	return false;
 }
 

packages/shopping-cart/src/index.ts

@@ -6,4 +6,7 @@ export * from './shopping-cart-manager';
 export * from './empty-carts';
 export * from './types';
 export * from './errors';
-export { convertResponseCartToRequestCart } from './cart-functions';
+export {
+	convertResponseCartToRequestCart,
+	convertTaxLocationToLocationUpdate,
+} from './cart-functions';

packages/shopping-cart/src/types.ts

@@ -82,7 +82,7 @@ export type ApplyCouponToCart = ( couponId: string ) => Promise< ResponseCart >;
 
 export type RemoveProductFromCart = ( uuidToRemove: string ) => Promise< ResponseCart >;
 
-export type UpdateTaxLocationInCart = ( location: CartLocation ) => Promise< ResponseCart >;
+export type UpdateTaxLocationInCart = ( location: TaxLocationUpdate ) => Promise< ResponseCart >;
 
 export type SetCouponFieldVisible = ( couponFieldVisible: boolean ) => void;
 
@@ -118,7 +118,7 @@ export type ShoppingCartAction =
 	| { type: 'REMOVE_CART_ITEM'; uuidToRemove: string }
 	| { type: 'CART_PRODUCTS_ADD'; products: RequestCartProduct[] }
 	| { type: 'CART_PRODUCTS_REPLACE_ALL'; products: RequestCartProduct[] }
-	| { type: 'SET_LOCATION'; location: CartLocation }
+	| { type: 'SET_LOCATION'; location: TaxLocationUpdate }
 	| {
 			type: 'CART_PRODUCT_REPLACE';
 			uuidToReplace: string;
@@ -211,6 +211,7 @@ export type RequestCartTaxData = null | {
 		organization?: string;
 		address?: string;
 		city?: string;
+		is_for_business?: boolean;
 	};
 };
 
@@ -315,16 +316,19 @@ export interface ResponseCart< P = ResponseCartProduct > {
 	has_pending_payment?: boolean;
 }
 
+export interface ResponseCartTaxLocation {
+	country_code?: string;
+	postal_code?: string;
+	subdivision_code?: string;
+	vat_id?: string;
+	organization?: string;
+	address?: string;
+	city?: string;
+	is_for_business?: boolean;
+}
+
 export interface ResponseCartTaxData {
-	location: {
-		country_code?: string;
-		postal_code?: string;
-		subdivision_code?: string;
-		vat_id?: string;
-		organization?: string;
-		address?: string;
-		city?: string;
-	};
+	location: ResponseCartTaxLocation;
 	display_taxes: boolean;
 }
 
@@ -584,16 +588,29 @@ export interface IntroductoryOfferTerms {
 	should_prorate_when_offer_ends: boolean;
 }
 
-export interface CartLocation {
+/**
+ * The data passed to the `updateLocation()` cart manager action.
+ *
+ * To convert this to the data used by the cart's `tax.location` property, use
+ * `convertLocationUpdateToTaxLocation()`.
+ */
+export interface TaxLocationUpdate {
 	countryCode?: string;
 	postalCode?: string;
 	subdivisionCode?: string;
 	vatId?: string;
 	organization?: string;
 	address?: string;
 	city?: string;
+	isForBusiness?: boolean;
 }
 
+/**
+ * Legacy alias for `TaxLocationUpdate`.
+ * @deprecated Use `TaxLocationUpdate`
+ */
+export type CartLocation = TaxLocationUpdate;
+
 export type DomainLegalAgreementUrl = string;
 export type DomainLegalAgreementTitle = string;
 export type DomainLegalAgreements = Record< DomainLegalAgreementUrl, DomainLegalAgreementTitle >;

packages/wpcom-checkout/src/types.ts

@@ -182,6 +182,7 @@ export type WPCOMTransactionEndpointPaymentDetails = {
 	streetNumber?: string;
 	phoneNumber?: string;
 	document?: string;
+	isForBusiness?: boolean;
 	deviceId?: string;
 	successUrl?: string;
 	cancelUrl?: string;
@@ -562,6 +563,7 @@ export type DomainContactValidationRequestExtraFields = {
 		trademark_number?: string;
 		siren_siret?: string;
 	};
+	is_for_business?: boolean;
 };
 
 export type ContactValidationResponseMessagesExtra = {
@@ -580,6 +582,7 @@ export type ContactValidationResponseMessagesExtra = {
 		trademark_number?: string[];
 		siren_siret?: string[];
 	};
+	is_for_business?: boolean;
 };
 
 /**