Fix spinner misaligned in Proceed to Checkout button (#10960)

Author: mgascam

changelog/fix-woopmnt-5198-spinner-in-the-proceed-to-checkout-button-is-misaligned

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix: Spinner alignment issues in cart checkout button and checkout address form email field.

client/cart/blocks/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { renderBNPLCartMessaging } from './product-details';
+import './style.scss';
 
 const { registerPlugin } = window.wp.plugins;
 

client/cart/blocks/style.scss

@@ -0,0 +1,19 @@
+/**
+ * Cart Blocks Styles
+ *
+ * This file contains styles specific to WooCommerce cart blocks
+ * and WCPay integrations within the cart context.
+ */
+
+/**
+ * Fix for cart submit button spinner alignment
+ */
+.wc-block-cart__submit-button .wc-block-components-button__text {
+	position: relative;
+
+	.wc-block-components-spinner {
+		/* Override the base style's top/left: initial */
+		top: 0;
+		left: 0;
+	}
+}

client/checkout/woopay/style.scss

@@ -24,6 +24,21 @@
 	}
 }
 
+/* Fix for address form email field spinner alignment */
+.wc-block-components-address-form__email {
+	position: relative;
+
+	.wc-block-components-spinner {
+		/* Override the base style's top/left: initial */
+		top: 50%;
+		left: auto;
+		right: 10px;
+		width: 24px;
+		height: 24px;
+		transform: translateY( -50% );
+	}
+}
+
 .woopay-login-session-iframe {
 	width: 100%;
 	height: 100vh;

includes/class-wc-payments.php

@@ -1885,6 +1885,15 @@ public static function enqueue_cart_scripts() {
 		if ( WC_Payments_Utils::is_cart_block() ) {
 			self::register_script_with_dependencies( 'WCPAY_CART_BLOCK', 'dist/cart-block', [ 'wc-cart-block-frontend' ] );
 			wp_enqueue_script( 'WCPAY_CART_BLOCK' );
+
+			// Enqueue cart block styles.
+			WC_Payments_Utils::enqueue_style(
+				'WCPAY_CART_BLOCK',
+				plugins_url( 'dist/cart-block.css', WCPAY_PLUGIN_FILE ),
+				[],
+				self::get_file_version( 'dist/cart-block.css' ),
+				'all'
+			);
 		}
 	}