Merge branch 'trunk' of github.com:woocommerce/woocommerce-blocks int…

…o fix/animation-dialog

.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/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/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,41 @@
+/**
+ * External dependencies
+ */
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export const AddressWrapper = ( {
+	isEditing = false,
+	addressCard,
+	addressForm,
+}: {
+	isEditing: boolean;
+	addressCard: () => JSX.Element;
+	addressForm: () => JSX.Element;
+} ): JSX.Element | null => {
+	return (
+		<TransitionGroup className="address-fade-transition-wrapper">
+			{ ! isEditing && (
+				<CSSTransition
+					timeout={ 300 }
+					classNames="address-fade-transition"
+				>
+					{ addressCard() }
+				</CSSTransition>
+			) }
+			{ isEditing && (
+				<CSSTransition
+					timeout={ 300 }
+					classNames="address-fade-transition"
+				>
+					{ addressForm() }
+				</CSSTransition>
+			) }
+		</TransitionGroup>
+	);
+};
+
+export default AddressWrapper;

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

@@ -0,0 +1,25 @@
+.address-fade-transition-wrapper {
+	position: relative;
+}
+.address-fade-transition-enter {
+	opacity: 0;
+}
+.address-fade-transition-enter-active {
+	opacity: 1;
+	transition: opacity 300ms ease-in;
+}
+.address-fade-transition-enter-done {
+	opacity: 1;
+}
+.address-fade-transition-exit {
+	opacity: 1;
+	position: absolute;
+	top: 0;
+}
+.address-fade-transition-exit-active {
+	opacity: 0;
+	transition: opacity 300ms ease-out;
+}
+.address-fade-transition-done {
+	opacity: 0;
+}

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;