WIP - Checkout i2 Feature Branch Tracking

assets/js/atomic/utils/index.js

@@ -1,5 +1,5 @@
 export * from './get-block-map';
 export * from './create-blocks-from-template';
 export * from './render-parent-block';
-export * from './block-styling.js';
+export * from './block-styling';
 export * from './render-standalone-blocks';

assets/js/base/components/block-error-boundary/style.scss

@@ -24,7 +24,7 @@
 	max-width: 60ch;
 }
 .wc-block-components-error__message {
-	margin: 1em 0 0;
+	margin: 1em auto 0;
 	font-style: italic;
 	color: $studio-gray-30;
 	max-width: 60ch;

assets/js/base/components/cart-checkout/form-step/style.scss

@@ -32,7 +32,11 @@
 	position: relative;
 }
 
-.wc-block-components-checkout-step__content {
+.wc-block-components-checkout-step__content > * {
+	margin-bottom: em($gap);
+}
+.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child {
+	margin-bottom: 0;
 	padding-bottom: em($gap-large);
 }
 

assets/js/base/components/cart-checkout/shipping-rates-control/index.tsx

@@ -10,7 +10,7 @@ import {
 	getShippingRatesPackageCount,
 	getShippingRatesRateCount,
 } from '@woocommerce/base-utils';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart, useEditorContext } from '@woocommerce/base-context';
 import { CartResponseShippingRate } from '@woocommerce/type-defs/cart-response';
 import { ReactElement } from 'react';
 
@@ -162,6 +162,7 @@ const ShippingRatesControl = ( {
 			ShippingRatesControlPackage,
 		},
 	};
+	const { isEditor } = useEditorContext();
 
 	return (
 		<LoadingMask
@@ -172,14 +173,26 @@ const ShippingRatesControl = ( {
 			) }
 			showSpinner={ true }
 		>
-			<ExperimentalOrderShippingPackages.Slot { ...slotFillProps } />
-			<ExperimentalOrderShippingPackages>
+			{ isEditor ? (
 				<Packages
 					packages={ shippingRates }
 					noResultsMessage={ noResultsMessage }
 					renderOption={ renderOption }
 				/>
-			</ExperimentalOrderShippingPackages>
+			) : (
+				<>
+					<ExperimentalOrderShippingPackages.Slot
+						{ ...slotFillProps }
+					/>
+					<ExperimentalOrderShippingPackages>
+						<Packages
+							packages={ shippingRates }
+							noResultsMessage={ noResultsMessage }
+							renderOption={ renderOption }
+						/>
+					</ExperimentalOrderShippingPackages>
+				</>
+			) }
 		</LoadingMask>
 	);
 };

assets/js/base/components/checkbox-control/index.js → assets/js/base/components/checkbox-control/index.tsx

@@ -2,33 +2,34 @@
  * External dependencies
  */
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+type CheckboxControlProps = {
+	className?: string;
+	label?: string;
+	id?: string;
+	instanceId: string;
+	onChange: ( value: boolean ) => void;
+	children: React.ReactChildren;
+};
+
 /**
  * Component used to show a checkbox control with styles.
- *
- * @param {Object} props Incoming props for the component.
- * @param {string} props.className CSS class used.
- * @param {string} props.label Label for component.
- * @param {string} props.id Id for component.
- * @param {string} props.instanceId Unique id for instance of component.
- * @param {function():any} props.onChange Function called when input changes.
- * @param {Object} props.rest Rest of properties spread.
  */
 const CheckboxControl = ( {
 	className,
 	label,
 	id,
 	instanceId,
 	onChange,
+	children,
 	...rest
-} ) => {
+}: CheckboxControlProps ): JSX.Element => {
 	const checkboxId = id || `checkbox-control-${ instanceId }`;
 
 	return (
@@ -54,19 +55,14 @@ const CheckboxControl = ( {
 			>
 				<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
 			</svg>
-
-			<span className="wc-block-components-checkbox__label">
-				{ label }
-			</span>
+			{ label && (
+				<span className="wc-block-components-checkbox__label">
+					{ label }
+				</span>
+			) }
+			{ children }
 		</label>
 	);
 };
 
-CheckboxControl.propTypes = {
-	className: PropTypes.string,
-	label: PropTypes.string,
-	id: PropTypes.string,
-	onChange: PropTypes.func,
-};
-
 export default withInstanceId( CheckboxControl );

assets/js/base/components/checkbox-control/style.scss

@@ -1,15 +1,15 @@
 .wc-block-components-checkbox {
 	@include reset-typography();
-	align-items: center;
+	align-items: flex-start;
 	display: flex;
-	height: 1em;
 	position: relative;
 
 	.wc-block-components-checkbox__input[type="checkbox"] {
 		font-size: 1em;
 		appearance: none;
 		border: 2px solid $input-border-gray;
 		border-radius: 2px;
+		box-sizing: border-box;
 		height: em(24px);
 		width: em(24px);
 		margin: 0;
@@ -48,8 +48,8 @@
 	.wc-block-components-checkbox__mark {
 		fill: #000;
 		position: absolute;
-		left: em(3px);
-		top: em(-2px);
+		margin-left: em(3px);
+		margin-top: em(1px);
 		width: em(18px);
 		height: em(18px);
 
@@ -58,9 +58,11 @@
 		}
 	}
 
+	> span,
 	.wc-block-components-checkbox__label {
 		padding-left: $gap;
 		vertical-align: middle;
+		line-height: em(24px);
 	}
 }
 

assets/js/base/context/hooks/cart/test/use-store-cart.js

@@ -61,6 +61,7 @@ describe( 'useStoreCart', () => {
 			state: '',
 			postcode: '',
 			country: '',
+			phone: '',
 		},
 		shippingRates: previewCart.shipping_rates,
 		extensions: {},

assets/js/base/context/hooks/cart/use-store-cart.ts

@@ -41,12 +41,12 @@ const defaultShippingAddress: CartResponseShippingAddress = {
 	state: '',
 	postcode: '',
 	country: '',
+	phone: '',
 };
 
 const defaultBillingAddress: CartResponseBillingAddress = {
 	...defaultShippingAddress,
 	email: '',
-	phone: '',
 };
 
 const defaultCartTotals: CartResponseTotals = {

assets/js/base/context/hooks/use-checkout-address.js

@@ -2,51 +2,30 @@
  * External dependencies
  */
 import { defaultAddressFields } from '@woocommerce/settings';
-import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
+import { useEffect, useCallback, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import {
 	useShippingDataContext,
 	useCustomerDataContext,
-	useCheckoutContext,
 } from '../providers/cart-checkout';
 
-/**
- * Compare two addresses and see if they are the same.
- *
- * @param {Object} address1 First address.
- * @param {Object} address2 Second address.
- */
-const isSameAddress = ( address1, address2 ) => {
-	return Object.keys( defaultAddressFields ).every(
-		( field ) => address1[ field ] === address2[ field ]
-	);
-};
-
 /**
  * Custom hook for exposing address related functionality for the checkout address form.
  */
 export const useCheckoutAddress = () => {
-	const { customerId } = useCheckoutContext();
 	const { needsShipping } = useShippingDataContext();
 	const {
 		billingData,
 		setBillingData,
 		shippingAddress,
 		setShippingAddress,
+		shippingAsBilling,
+		setShippingAsBilling,
 	} = useCustomerDataContext();
 
-	// This tracks the state of the "shipping as billing" address checkbox. It's
-	// initial value is true (if shipping is needed), however, if the user is
-	// logged in and they have a different billing address, we can toggle this off.
-	const [ shippingAsBilling, setShippingAsBilling ] = useState(
-		() =>
-			needsShipping &&
-			( ! customerId || isSameAddress( shippingAddress, billingData ) )
-	);
-
 	const currentShippingAsBilling = useRef( shippingAsBilling );
 	const previousBillingData = useRef( billingData );
 
@@ -78,23 +57,22 @@ export const useCheckoutAddress = () => {
 		[ needsShipping, setShippingAddress, setBillingData ]
 	);
 
-	// When the "Use same address" checkbox is toggled we need to update the current billing address to reflect this;
-	// that is either setting the billing address to the shipping address, or restoring the billing address to it's
-	// previous state.
+	// When the "Use same address" checkbox is toggled we need to update the current billing address to reflect this.
+	// This either sets the billing address to the shipping address, or restores the billing address to it's previous state.
 	useEffect( () => {
 		if ( currentShippingAsBilling.current !== shippingAsBilling ) {
 			if ( shippingAsBilling ) {
 				previousBillingData.current = billingData;
 				setBillingData( shippingAddress );
 			} else {
 				const {
-					// We need to pluck out email and phone from previous billing data because they can be empty, causing the current email and phone to get emptied. See issue #4155
+					// We need to pluck out email from previous billing data because they can be empty, causing the current email to get emptied. See issue #4155
 					/* eslint-disable no-unused-vars */
 					email,
-					phone,
 					/* eslint-enable no-unused-vars */
 					...billingAddress
 				} = previousBillingData.current;
+
 				setBillingData( {
 					...billingAddress,
 				} );
@@ -103,14 +81,29 @@ export const useCheckoutAddress = () => {
 		}
 	}, [ shippingAsBilling, setBillingData, shippingAddress, billingData ] );
 
-	const setEmail = ( value ) =>
-		void setBillingData( {
-			email: value,
-		} );
-	const setPhone = ( value ) =>
-		void setBillingData( {
-			phone: value,
-		} );
+	const setEmail = useCallback(
+		( value ) =>
+			void setBillingData( {
+				email: value,
+			} ),
+		[ setBillingData ]
+	);
+
+	const setPhone = useCallback(
+		( value ) =>
+			void setBillingData( {
+				phone: value,
+			} ),
+		[ setBillingData ]
+	);
+
+	const setShippingPhone = useCallback(
+		( value ) =>
+			void setShippingFields( {
+				phone: value,
+			} ),
+		[ setShippingFields ]
+	);
 
 	// Note that currentShippingAsBilling is returned rather than the current state of shippingAsBilling--this is so that
 	// the billing fields are not rendered before sync (billing field values are debounced and would be outdated)
@@ -122,8 +115,10 @@ export const useCheckoutAddress = () => {
 		setBillingFields,
 		setEmail,
 		setPhone,
+		setShippingPhone,
 		shippingAsBilling,
 		setShippingAsBilling,
+		showShippingFields: needsShipping,
 		showBillingFields:
 			! needsShipping || ! currentShippingAsBilling.current,
 	};

assets/js/base/context/hooks/use-customer-data.ts

@@ -112,7 +112,7 @@ export const useCustomerData = (): {
 	/**
 	 * Set billing data.
 	 *
-	 * Contains special handling for email and phone so those fields are not overwritten if simply updating address.
+	 * Contains special handling for email so those fields are not overwritten if simply updating address.
 	 */
 	const setBillingData = useCallback( ( newData ) => {
 		setCustomerData( ( prevState ) => {
@@ -130,10 +130,15 @@ export const useCustomerData = (): {
 	 * Set shipping data.
 	 */
 	const setShippingAddress = useCallback( ( newData ) => {
-		setCustomerData( ( prevState ) => ( {
-			...prevState,
-			shippingAddress: newData,
-		} ) );
+		setCustomerData( ( prevState ) => {
+			return {
+				...prevState,
+				shippingAddress: {
+					...prevState.shippingAddress,
+					...newData,
+				},
+			};
+		} );
 	}, [] );
 
 	/**

assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx

@@ -55,8 +55,7 @@ export const useCheckoutContext = (): CheckoutStateContextType => {
 
 /**
  * Checkout state provider
- * This provides provides an api interface exposing checkout state for use with
- * cart or checkout blocks.
+ * This provides an API interface exposing checkout state for use with cart or checkout blocks.
  *
  * @param {Object}  props                     Incoming props for the provider.
  * @param {Object}  props.children            The children being wrapped.