From 6012025f79d8343dbba852e4fbc444011e72fbb0 Mon Sep 17 00:00:00 2001
From: Alefe Souza <contact@alefesouza.com>
Date: Fri, 29 Nov 2024 02:10:28 -0300
Subject: [PATCH] Fix WooPay component spacing (#9748)

---
 changelog/fix-woopay-component-spacing        |  4 ++
 client/checkout/blocks/style.scss             |  2 -
 client/checkout/woopay/index.js               |  2 -
 .../save-user/checkout-page-save-user.js      | 16 +------
 .../components/woopay/save-user/container.js  | 12 +----
 client/components/woopay/save-user/style.scss | 44 -------------------
 6 files changed, 7 insertions(+), 73 deletions(-)
 create mode 100644 changelog/fix-woopay-component-spacing

diff --git a/changelog/fix-woopay-component-spacing b/changelog/fix-woopay-component-spacing
new file mode 100644
index 00000000000..0939c834ad9
--- /dev/null
+++ b/changelog/fix-woopay-component-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay component spacing.
diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss
index a6aa37953b3..3e400b6bfff 100644
--- a/client/checkout/blocks/style.scss
+++ b/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;
diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js
index f6c8902a514..51217c7aa30 100644
--- a/client/checkout/woopay/index.js
+++ b/client/checkout/woopay/index.js
@@ -46,8 +46,6 @@ const renderSaveUserSection = () => {
 					checkoutPageSaveUserContainer,
 					paymentOptions.nextSibling
 				);
-
-				paymentOptions.classList.add( 'is-woopay' );
 			}
 		}
 
diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js
index f0563246552..45295c5c170 100644
--- a/client/components/woopay/save-user/checkout-page-save-user.js
+++ b/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'
 										: ''
diff --git a/client/components/woopay/save-user/container.js b/client/components/woopay/save-user/container.js
index 470103044ac..7a032fe795f 100644
--- a/client/components/woopay/save-user/container.js
+++ b/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>
diff --git a/client/components/woopay/save-user/style.scss b/client/components/woopay/save-user/style.scss
index 8561cd4e62b..0e07ed4d611 100644
--- a/client/components/woopay/save-user/style.scss
+++ b/client/components/woopay/save-user/style.scss
@@ -7,37 +7,6 @@
 	}
 }
 
-.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 {
@@ -45,15 +14,6 @@
 		}
 	}
 
-	&.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;