Merge branch 'trunk' into add/10822-new-flow-for-product-collection

.github/workflows/php-js-e2e-tests.yml

@@ -66,7 +66,6 @@ jobs:
       - name: E2E Tests (WP latest with Gutenberg plugin)
         env:
           WOOCOMMERCE_BLOCKS_PHASE: 3
-          GUTENBERG_EDITOR_CONTEXT: 'gutenberg'
         run: |
           node ./bin/wp-env-with-gutenberg.js
           npm run wp-env start

assets/css/abstracts/_colors.scss

@@ -17,4 +17,5 @@ $select-item-dark: rgba(0, 0, 0, 0.4);
 $image-placeholder-border-color: #f2f2f2;
 
 // Universal colors for use on the frontend, currently being applied to checkout blocks.
-$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white
+$universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders.
+$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white.

assets/js/atomic/blocks/product-elements/image/attributes.ts

@@ -47,6 +47,9 @@ export const blockAttributes: BlockAttributes = {
 		type: 'string',
 		default: 'cover',
 	},
+	aspectRatio: {
+		type: 'string',
+	},
 };
 
 export default blockAttributes;

assets/js/atomic/blocks/product-elements/image/block.tsx

@@ -49,6 +49,7 @@ interface ImageProps {
 	scale: string;
 	width?: string | undefined;
 	height?: string | undefined;
+	aspectRatio: string | undefined;
 }
 
 const Image = ( {
@@ -59,6 +60,7 @@ const Image = ( {
 	width,
 	scale,
 	height,
+	aspectRatio,
 }: ImageProps ): JSX.Element => {
 	const { thumbnail, src, srcset, sizes, alt } = image || {};
 	const imageProps = {
@@ -72,6 +74,7 @@ const Image = ( {
 		height,
 		width,
 		objectFit: scale,
+		aspectRatio,
 	};
 
 	return (
@@ -101,6 +104,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		height,
 		width,
 		scale,
+		aspectRatio,
 		...restProps
 	} = props;
 	const styleProps = useStyleProps( props );
@@ -171,6 +175,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 					width={ width }
 					height={ height }
 					scale={ scale }
+					aspectRatio={ aspectRatio }
 				/>
 			</ParentComponent>
 		</div>

assets/js/atomic/blocks/product-elements/image/types.ts

@@ -24,4 +24,6 @@ export interface BlockAttributes {
 	width?: string;
 	// Image scaling method.
 	scale: 'cover' | 'contain' | 'fill';
+	// Aspect ratio of the image.
+	aspectRatio: string;
 }

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

@@ -96,8 +96,7 @@
 	.wc-block-components-checkout-step__container::after {
 		content: "";
 		height: 100%;
-		border-left: 1px solid;
-		opacity: 0.3;
+		border-left: 1px solid $universal-border;
 		position: absolute;
 		left: -$gap-large;
 		top: 0;

assets/js/base/components/country-input/style.scss

@@ -4,4 +4,9 @@
 
 .wc-block-components-country-input {
 	margin-top: em($gap-large);
+
+	// Fixes width in the editor.
+	.components-flex {
+		width: 100%;
+	}
 }

assets/js/base/components/state-input/style.scss

@@ -1,3 +1,8 @@
 .wc-block-components-state-input {
 	margin-top: em($gap-large);
+
+	// Fixes width in the editor.
+	.components-flex {
+		width: 100%;
+	}
 }

assets/js/base/context/providers/cart-checkout/checkout-processor.ts

@@ -58,6 +58,7 @@ const CheckoutProcessor = () => {
 		orderNotes,
 		shouldCreateAccount,
 		extensionData,
+		customerId,
 	} = useSelect( ( select ) => {
 		const store = select( CHECKOUT_STORE_KEY );
 		return {
@@ -69,6 +70,7 @@ const CheckoutProcessor = () => {
 			orderNotes: store.getOrderNotes(),
 			shouldCreateAccount: store.getShouldCreateAccount(),
 			extensionData: store.getExtensionData(),
+			customerId: store.getCustomerId(),
 		};
 	} );
 
@@ -293,12 +295,20 @@ const CheckoutProcessor = () => {
 							__internalProcessCheckoutResponse( response );
 						} );
 				} catch {
+					let errorMessage = __(
+						'Something went wrong when placing the order. Check your email for order updates before retrying.',
+						'woo-gutenberg-products-block'
+					);
+
+					if ( customerId !== 0 ) {
+						errorMessage = __(
+							"Something went wrong when placing the order. Check your account's order history or your email for order updates before retrying.",
+							'woo-gutenberg-products-block'
+						);
+					}
 					processErrorResponse( {
 						code: 'unknown_error',
-						message: __(
-							'Something went wrong. Please try placing your order again.',
-							'woo-gutenberg-products-block'
-						),
+						message: errorMessage,
 						data: null,
 					} );
 				}

assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx

@@ -65,7 +65,7 @@ const defaultTemplate = [
 	[
 		'woocommerce/product-new',
 		{
-			columns: 3,
+			columns: 4,
 			rows: 1,
 		},
 	],

assets/js/blocks/checkout/address-card/index.tsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ALLOWED_COUNTRIES } from '@woocommerce/block-settings';
+import type {
+	CartShippingAddress,
+	CartBillingAddress,
+} from '@woocommerce/types';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const AddressCard = ( {
+	address,
+	onEdit,
+	target,
+}: {
+	address: CartShippingAddress | CartBillingAddress;
+	onEdit: () => void;
+	target: string;
+} ): JSX.Element | null => {
+	return (
+		<div className="wc-block-components-address-card">
+			<address>
+				<span className="wc-block-components-address-card__address-section">
+					{ address.first_name + ' ' + address.last_name }
+				</span>
+				<div className="wc-block-components-address-card__address-section">
+					{ [
+						address.address_1,
+						address.address_2,
+						address.city,
+						address.state,
+						address.postcode,
+						ALLOWED_COUNTRIES[ address.country ]
+							? ALLOWED_COUNTRIES[ address.country ]
+							: address.country,
+					]
+						.filter( ( field ) => !! field )
+						.map( ( field, index ) => (
+							<span key={ `address-` + index }>{ field }</span>
+						) ) }
+				</div>
+				{ address.phone ? (
+					<div
+						key={ `address-phone` }
+						className="wc-block-components-address-card__address-section"
+					>
+						{ address.phone }
+					</div>
+				) : (
+					''
+				) }
+			</address>
+			{ onEdit && (
+				<a
+					role="button"
+					href={ '#' + target }
+					className="wc-block-components-address-card__edit"
+					aria-label={ __(
+						'Edit address',
+						'woo-gutenberg-products-block'
+					) }
+					onClick={ ( e ) => {
+						onEdit();
+						e.preventDefault();
+					} }
+				>
+					{ __( 'Edit', 'woo-gutenberg-products-block' ) }
+				</a>
+			) }
+		</div>
+	);
+};
+
+export default AddressCard;

assets/js/blocks/checkout/address-card/style.scss

@@ -0,0 +1,41 @@
+.wc-block-components-address-card {
+	border: 1px solid $universal-border;
+	@include font-size(regular);
+	padding: $gap;
+	margin: 0;
+	border-radius: 4px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: flex-start;
+
+	address {
+		margin: 0;
+		font-style: normal;
+
+		.wc-block-components-address-card__address-section {
+			display: block;
+			margin: 0 0 2px 0;
+			span {
+				display: inline-block;
+				padding: 0 4px 0 0;
+				&::after {
+					content: ", ";
+				}
+				&:last-child::after {
+					content: "";
+				}
+			}
+			&:last-child {
+				margin-bottom: 0;
+			}
+			&:first-child {
+				font-weight: bold;
+			}
+		}
+	}
+}
+.wc-block-components-address-card__edit {
+	margin: 0 0 0 auto;
+	text-decoration: none;
+	@include font-size(small);
+}

assets/js/blocks/checkout/address-wrapper/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Wrapper for address fields which handles the edit/preview transition. Form fields are always rendered so that
+ * validation can occur.
+ */
+export const AddressWrapper = ( {
+	isEditing = false,
+	addressCard,
+	addressForm,
+}: {
+	isEditing: boolean;
+	addressCard: () => JSX.Element;
+	addressForm: () => JSX.Element;
+} ): JSX.Element | null => {
+	const wrapperClasses = classnames(
+		'wc-block-components-address-address-wrapper',
+		{
+			'is-editing': isEditing,
+		}
+	);
+
+	return (
+		<div className={ wrapperClasses }>
+			<div className="wc-block-components-address-card-wrapper">
+				{ addressCard() }
+			</div>
+			<div className="wc-block-components-address-form-wrapper">
+				{ addressForm() }
+			</div>
+		</div>
+	);
+};
+
+export default AddressWrapper;

assets/js/blocks/checkout/address-wrapper/style.scss

@@ -0,0 +1,32 @@
+.wc-block-components-address-address-wrapper {
+	position: relative;
+
+	.wc-block-components-address-card-wrapper,
+	.wc-block-components-address-form-wrapper {
+		transition: all 300ms ease-in-out;
+		width: 100%;
+	}
+
+	&.is-editing {
+		.wc-block-components-address-form-wrapper {
+			opacity: 1;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	&:not(.is-editing) {
+		.wc-block-components-address-form-wrapper {
+			opacity: 0;
+			visibility: hidden;
+			height: 0;
+		}
+		.wc-block-components-address-card-wrapper {
+			opacity: 1;
+		}
+	}
+}

assets/js/blocks/checkout/checkout-order-error/style.scss

@@ -8,6 +8,7 @@
 		margin: 0 auto 1em;
 		display: block;
 		color: inherit;
+		fill: currentColor;
 	}
 	.wc-block-checkout-error__title {
 		display: block;