Fix WooPay component spacing (#9748)

changelog/fix-woopay-component-spacing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay component spacing.

client/checkout/blocks/style.scss

@@ -118,8 +118,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 #remember-me {
-	margin: 36px 0 0 0;
-
 	h2 {
 		font-size: 18px;
 		font-weight: 600;

client/checkout/woopay/index.js

@@ -46,8 +46,6 @@ const renderSaveUserSection = () => {
 					checkoutPageSaveUserContainer,
 					paymentOptions.nextSibling
 				);
-
-				paymentOptions.classList.add( 'is-woopay' );
 			}
 		}
 

client/components/woopay/save-user/checkout-page-save-user.js

@@ -26,7 +26,6 @@ import request from '../../../checkout/utils/request';
 import useSelectedPaymentMethod from '../hooks/use-selected-payment-method';
 import { recordUserEvent } from 'tracks';
 import './style.scss';
-import { compare } from 'compare-versions';
 
 const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	const errorId = 'invalid-woopay-phone-number';
@@ -57,12 +56,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	);
 	const viewportWidth = window.document.documentElement.clientWidth;
 	const viewportHeight = window.document.documentElement.clientHeight;
-	const wooCommerceVersionString = window.wcSettings?.wcVersion;
-	const wcVersionGreaterThan91 = compare(
-		wooCommerceVersionString,
-		'9.1',
-		'>='
-	);
 
 	useEffect( () => {
 		if ( ! isBlocksCheckout ) {
@@ -291,10 +284,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	}
 
 	return (
-		<Container
-			isBlocksCheckout={ isBlocksCheckout }
-			wcVersionGreaterThan91={ wcVersionGreaterThan91 }
-		>
+		<Container isBlocksCheckout={ isBlocksCheckout }>
 			<div className="save-details">
 				<div className="save-details-header">
 					<div
@@ -313,10 +303,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 								id="save_user_in_woopay"
 								value="true"
 								className={ `save-details-checkbox ${
-									wcVersionGreaterThan91
-										? 'without-margin-right'
-										: ''
-								} ${
 									isBlocksCheckout
 										? 'wc-block-components-checkbox__input'
 										: ''

client/components/woopay/save-user/container.js

@@ -3,19 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
-const Container = ( {
-	children,
-	isBlocksCheckout,
-	wcVersionGreaterThan91,
-} ) => {
+const Container = ( { children, isBlocksCheckout } ) => {
 	if ( ! isBlocksCheckout ) return children;
 	return (
 		<>
-			<div
-				className={ `woopay-save-new-user-container ${
-					wcVersionGreaterThan91 ? 'wc-version-greater-than-91' : ''
-				}` }
-			>
+			<div className="woopay-save-new-user-container">
 				<h2>{ __( 'Save my info' ) }</h2>
 				{ children }
 			</div>

client/components/woopay/save-user/style.scss

@@ -7,53 +7,13 @@
 	}
 }
 
-.is-mobile,
-.is-small {
-	.woopay-save-new-user-container.wc-version-greater-than-91::after {
-		background: currentColor;
-		box-shadow: -50vw 0 0 0 currentColor, 50vw 0 0 0 currentColor;
-		content: '';
-		height: 1px;
-		opacity: 0.11;
-		width: 100%;
-		margin-top: 22px;
-	}
-}
-
-.is-medium,
-.is-large {
-	.woopay-save-new-user-container.wc-version-greater-than-91 {
-		border-bottom: 1px solid hsla( 0, 0%, 7%, 0.11 );
-		margin-bottom: 48px;
-	}
-}
-
-@media ( max-width: 600px ) {
-	.is-mobile,
-	.is-small {
-		.wc-block-components-form
-			.wc-block-components-checkout-step.is-woopay::after {
-			height: 0;
-		}
-	}
-}
-
 .woopay-save-new-user-container {
 	.save-details {
 		.wc-block-components-text-input input:-webkit-autofill {
 			padding: 1.5em 0.5em 1.5em 0.5em;
 		}
 	}
 
-	&.wc-version-greater-than-91 {
-		@media ( min-width: 601px ),
-			( min-width: 566px ) and ( max-width: 568px ) {
-			.save-details {
-				margin-bottom: 48px;
-			}
-		}
-	}
-
 	.save-details-header {
 		display: flex;
 		align-items: flex-start;
@@ -87,10 +47,6 @@
 				text-indent: 0;
 			}
 
-			input:not( .without-margin-right ) {
-				margin-right: $gap-small;
-			}
-
 			span {
 				@include breakpoint( '>960px' ) {
 					margin-right: 1.25rem;