Fix WooPay opt-in blocks field (#9131)

changelog/fix-woopay-opt-in-blocks-field

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay opt-in blocks field on WooCommerce 9.1+.

client/checkout/woopay/index.js

@@ -39,6 +39,8 @@ const renderSaveUserSection = () => {
 				paymentOptions.nextSibling
 			);
 
+			paymentOptions.classList.add( 'is-woopay' );
+
 			ReactDOM.render(
 				<CheckoutPageSaveUser isBlocksCheckout={ true } />,
 				checkoutPageSaveUserContainer

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

@@ -19,6 +19,7 @@ import useWooPayUser from '../hooks/use-woopay-user';
 import useSelectedPaymentMethod from '../hooks/use-selected-payment-method';
 import { recordUserEvent } from 'tracks';
 import './style.scss';
+import { compare } from 'compare-versions';
 
 const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	const [ isSaveDetailsChecked, setIsSaveDetailsChecked ] = useState(
@@ -34,6 +35,12 @@ 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',
+		'>='
+	);
 
 	const getPhoneFieldValue = () => {
 		let phoneFieldValue = '';
@@ -174,7 +181,10 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	}
 
 	return (
-		<Container isBlocksCheckout={ isBlocksCheckout }>
+		<Container
+			isBlocksCheckout={ isBlocksCheckout }
+			wcVersionGreaterThan91={ wcVersionGreaterThan91 }
+		>
 			<div className="save-details">
 				<div className="save-details-header">
 					<div
@@ -193,6 +203,10 @@ 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,11 +3,19 @@
  */
 import { __ } from '@wordpress/i18n';
 
-const Container = ( { children, isBlocksCheckout } ) => {
+const Container = ( {
+	children,
+	isBlocksCheckout,
+	wcVersionGreaterThan91,
+} ) => {
 	if ( ! isBlocksCheckout ) return children;
 	return (
 		<>
-			<div className="woopay-save-new-user-container">
+			<div
+				className={ `woopay-save-new-user-container ${
+					wcVersionGreaterThan91 ? 'wc-version-greater-than-91' : ''
+				}` }
+			>
 				<h2>{ __( 'Save my info' ) }</h2>
 				{ children }
 			</div>

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

@@ -7,7 +7,53 @@
 	}
 }
 
+.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;
@@ -41,7 +87,7 @@
 				text-indent: 0;
 			}
 
-			input {
+			input:not( .without-margin-right ) {
 				margin-right: $gap-small;
 			}
 

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

@@ -83,6 +83,15 @@ describe( 'CheckoutPageSaveUser', () => {
 			( setting ) => setting === 'forceNetworkSavedCards'
 		);
 
+		window.wcSettings = {
+			wcVersion: '9.1.2',
+			storePages: {
+				checkout: {
+					permalink: 'http://localhost/',
+				},
+			},
+		};
+
 		window.wcpaySettings = {
 			accountStatus: {
 				country: 'US',

package.json

@@ -82,6 +82,7 @@
     "@woocommerce/explat": "2.3.0",
     "@woocommerce/number": "2.4.0",
     "canvas-confetti": "1.9.2",
+    "compare-versions": "6.1.1",
     "debug": "4.1.1",
     "intl-tel-input": "17.0.15",
     "lodash": "4.17.21"