fix(modal-checkout): prevent session reload after new customer account (#4310)

* fix(modal-checkout): prevent session reload after new customer account

* style: apply newspack-ui notice styles to all nested woo notices

* fix: no border on notices nested in notices

Author: dkoo

includes/data-events/class-woo-user-registration.php

@@ -37,6 +37,9 @@ public static function init() {
 
 		// created a user?
 		add_action( 'woocommerce_created_customer', [ __CLASS__, 'created_customer' ], 1 );
+
+		// checkout order processed?
+		add_action( 'woocommerce_checkout_order_processed', [ __CLASS__, 'checkout_order_processed' ] );
 	}
 
 	/**
@@ -99,6 +102,19 @@ public static function created_customer( $user_id ) {
 		 */
 		\do_action( 'newspack_registered_reader_via_woo', $user->user_email, $user_id, self::$metadata );
 	}
+
+	/**
+	 * After a checkout order is processed, prevent the modal checkout from reloading.
+	 *
+	 * @param int $order_id The ID of the processed order.
+	 * @return void
+	 */
+	public static function checkout_order_processed( $order_id ) {
+		// Prevent the modal checkout from reloading after the user is created.
+		if ( method_exists( 'Newspack_Blocks\Modal_Checkout', 'is_modal_checkout' ) && \Newspack_Blocks\Modal_Checkout::is_modal_checkout() ) {
+			\WC()->session->set( 'reload_checkout', null );
+		}
+	}
 }
 
 Woo_User_Registration::init();

src/newspack-ui/scss/elements/woocommerce/_my-account.scss

@@ -3,48 +3,10 @@
  */
 
 @use "../forms";
-@use "../notices";
 @use "../typography";
 @use "../../variables/breakpoints";
 
 .woocommerce-account.newspack-my-account.newspack-ui {
-	.woocommerce-notices-wrapper:not(:empty) {
-		margin-bottom: var(--newspack-ui-spacer-6);
-
-		> *:first-child {
-			margin-top: 0;
-		}
-	}
-	.newspack-wc-message,
-	.woocommerce-message,
-	.woocommerce-info,
-	.woocommerce-error {
-		@extend .newspack-ui__notice;
-		display: block;
-		list-style: none;
-		margin: var(--newspack-ui-spacer-3) 0;
-
-		> p:first-child {
-			margin-top: 0;
-			padding-top: 0;
-		}
-
-		> p:last-child {
-			margin-bottom: 0;
-			padding-bottom: 0;
-		}
-	}
-	.newspack-wc-message,
-	.woocommerce-message {
-		@extend .newspack-ui__notice--success;
-	}
-	.woocommerce-info {
-		@extend .newspack-ui__notice--warning;
-	}
-	.newspack-wc-message--error,
-	.woocommerce-error {
-		@extend .newspack-ui__notice--error;
-	}
 	p.woocommerce-form-row {
 		margin: var(--newspack-ui-spacer-3) 0;
 	}
@@ -190,7 +152,8 @@
 	address {
 		font-style: normal;
 	}
-	#registration-link_field .regenerate-link { // stylelint-disable-line selector-id-pattern
+	/* stylelint-disable-next-line selector-id-pattern */
+	#registration-link_field .regenerate-link {
 		margin-left: var(--newspack-ui-spacer-3);
 	}
 }

src/newspack-ui/scss/elements/woocommerce/_overrides.scss

@@ -1,4 +1,7 @@
 /** Some general overrides for WooCommerce styles. */
+
+@use "../notices";
+
 .newspack-ui {
 	label .optional {
 		color: var(--newspack-ui-color-neutral-60);
@@ -26,6 +29,51 @@
 			font-weight: normal;
 		}
 	}
+	.woocommerce-notices-wrapper:not(:empty) {
+		margin-bottom: var(--newspack-ui-spacer-6);
+
+		> *:first-child {
+			margin-top: 0;
+		}
+	}
+	.newspack-wc-message,
+	.woocommerce-message,
+	.woocommerce-info,
+	.woocommerce-error {
+		@extend .newspack-ui__notice;
+		display: block;
+		list-style: none;
+		margin: var(--newspack-ui-spacer-3) 0;
+
+		> p:first-child {
+			margin-top: 0;
+			padding-top: 0;
+		}
+
+		> p:last-child {
+			margin-bottom: 0;
+			padding-bottom: 0;
+		}
+	}
+	.newspack-wc-message,
+	.woocommerce-message {
+		@extend .newspack-ui__notice--success;
+	}
+	.woocommerce-info {
+		@extend .newspack-ui__notice--warning;
+	}
+	.newspack-wc-message--error,
+	.woocommerce-error {
+		@extend .newspack-ui__notice--error;
+	}
+	.woocommerce-NoticeGroup {
+		.newspack-wc-message,
+		.woocommerce-message,
+		.woocommerce-info,
+		.woocommerce-error {
+			border: none !important;
+		}
+	}
 }
 
 /** See #3292. */