Pre check save my info for certain countries (#8608)

Automattic · Apr 23, 2024 · 8732356 · 8732356
1 parent 9893900
commit 8732356
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 219 deletions.
diff --git a/changelog/add-pre-check-save-my-info b/changelog/add-pre-check-save-my-info
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Pre check save my info for eligible contries
diff --git a/client/checkout/blocks/style.scss b/client/checkout/blocks/style.scss
@@ -44,37 +44,48 @@ button.wcpay-stripelink-modal-trigger:hover {
 	border-color: transparent;
 }
 
-.wc-block-checkout__payment-method
-	.wc-block-components-radio-control__label
-	span {
-	width: 95%;
-
-	&:has( .StripeElement ) {
-		display: grid;
-		grid-template-columns: 1fr auto;
-	}
+.wc-block-checkout__payment-method {
+	.wc-block-components-radio-control__label span {
+		width: 95%;
 
-	img {
-		float: right;
-		border: 0;
-		padding: 0;
-		height: 24px;
-		max-height: 24px;
-	}
+		&:has( .StripeElement ) {
+			display: grid;
+			grid-template-columns: 1fr auto;
+		}
 
-	.StripeElement {
-		width: 100%;
-		grid-column: 1 / span 2;
-		grid-row-start: 2;
-		pointer-events: none;
+		img {
+			float: right;
+			border: 0;
+			padding: 0;
+			height: 24px;
+			max-height: 24px;
+		}
 
-		+ img {
-			grid-row: 1 / span 2;
-			grid-column: 2;
+		.StripeElement {
+			width: 100%;
+			grid-column: 1 / span 2;
+			grid-row-start: 2;
+			pointer-events: none;
+
+			+ img {
+				grid-row: 1 / span 2;
+				grid-column: 2;
+			}
 		}
 	}
 }
 
+#remember-me {
+	margin-top: 36px;
+
+	h2 {
+		font-size: 18px;
+		font-weight: 600;
+		line-height: 21.6px;
+		letter-spacing: -0.01em;
+	}
+}
+
 #payment-method {
 	label.wc-block-components-radio-control__option-checked {
 		.StripeElement {

diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
@@ -421,6 +421,12 @@ export const handleWooPayEmailInput = async (
 					openIframe( email );
 				} else if ( data.code !== 'rest_invalid_param' ) {
 					recordUserEvent( 'checkout_woopay_save_my_info_offered' );
+
+					if ( window.woopayCheckout?.PRE_CHECK_SAVE_MY_INFO ) {
+						recordUserEvent( 'checkout_save_my_info_click', {
+							status: 'checked',
+						} );
+					}
 				}
 			} )
 			.catch( ( err ) => {

diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js
@@ -23,21 +23,13 @@ const renderSaveUserSection = () => {
 	);
 
 	if ( blocksCheckout.length ) {
-		const checkoutPageSaveUserContainer = document.createElement(
-			'fieldset'
-		);
+		const checkoutPageSaveUserContainer = document.createElement( 'div' );
 		const paymentOptions = document.getElementsByClassName(
 			'wp-block-woocommerce-checkout-payment-block'
 		)?.[ 0 ];
-		const isPaymentOptionsNumbered = paymentOptions?.classList?.contains(
-			'wc-block-components-checkout-step--with-step-number'
-		);
 
 		checkoutPageSaveUserContainer.className =
-			'wc-block-checkout__payment-method wp-block-woocommerce-checkout-remember-block ' +
-			`wc-block-components-checkout-step wc-block-components-checkout-step${
-				isPaymentOptionsNumbered ? '--with-step-number' : ''
-			}`;
+			'wc-block-checkout__payment-method wp-block-woocommerce-checkout-remember-block ';
 		checkoutPageSaveUserContainer.id = 'remember-me';
 
 		if ( paymentOptions ) {

diff --git a/client/components/woopay/save-user/additional-information.js b/client/components/woopay/save-user/additional-information.js
@@ -7,8 +7,7 @@ const AdditionalInformation = () => {
 	return (
 		<div className="additional-information">
 			{ __(
-				'Next time you checkout here or on other WooPay enabled stores, you’ll receive ' +
-					'a code by text message to checkout quicker. We never share your full financial information with sellers.',
+				"Next time you buy here and on other Woo-powered stores, we'll send you a code to securely purchase with WooPay.",
 				'woocommerce-payments'
 			) }
 		</div>

diff --git a/client/components/woopay/save-user/agreement.js b/client/components/woopay/save-user/agreement.js
@@ -11,7 +11,7 @@ const Agreement = () => {
 		<div className="tos">
 			{ interpolateComponents( {
 				mixedString: __(
-					"By placing an order, you agree to WooPay's {{termsOfService/}} and {{privacyPolicy/}}, and to receive text messages at the mobile number provided.",
+					"By continuing, you agree to WooPay's {{termsOfService/}} and {{privacyPolicy/}}.",
 					'woocommerce-payments'
 				),
 				components: {

diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js
@@ -6,9 +6,6 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
 // eslint-disable-next-line import/no-unresolved
 import { extensionCartUpdate } from '@woocommerce/blocks-checkout';
-import { Icon, info } from '@wordpress/icons';
-import interpolateComponents from '@automattic/interpolate-components';
-import LockIconG from 'gridicons/dist/lock';
 
 /**
  * Internal dependencies
@@ -20,21 +17,17 @@ import Agreement from './agreement';
 import Container from './container';
 import useWooPayUser from '../hooks/use-woopay-user';
 import useSelectedPaymentMethod from '../hooks/use-selected-payment-method';
-import WooPayIcon from 'assets/images/woopay.svg?asset';
 import { recordUserEvent } from 'tracks';
 import './style.scss';
 
 const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
-	const [ isSaveDetailsChecked, setIsSaveDetailsChecked ] = useState( false );
+	const [ isSaveDetailsChecked, setIsSaveDetailsChecked ] = useState(
+		window.woopayCheckout?.PRE_CHECK_SAVE_MY_INFO || false
+	);
 	const [ phoneNumber, setPhoneNumber ] = useState( '' );
 	const [ isPhoneValid, onPhoneValidationChange ] = useState( null );
 	const [ userDataSent, setUserDataSent ] = useState( false );
-	const [ isInfoFlyoutVisible, setIsInfoFlyoutVisible ] = useState( false );
-	const [ hasShownInfoFlyout, setHasShownInfoFlyout ] = useState( false );
 
-	const toggleTooltip = () => {
-		setIsInfoFlyoutVisible( ! isInfoFlyoutVisible );
-	};
 	const isRegisteredUser = useWooPayUser();
 	const { isWCPayChosen, isNewPaymentTokenChosen } = useSelectedPaymentMethod(
 		isBlocksCheckout
@@ -120,16 +113,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		}
 	}, [ isPhoneValid ] );
 
-	useEffect( () => {
-		// Record Tracks event when user clicks on the info icon for the first time.
-		if ( isInfoFlyoutVisible && ! hasShownInfoFlyout ) {
-			setHasShownInfoFlyout( true );
-			recordUserEvent( 'checkout_save_my_info_tooltip_click' );
-		} else if ( ! isInfoFlyoutVisible && ! hasShownInfoFlyout ) {
-			setHasShownInfoFlyout( false );
-		}
-	}, [ isInfoFlyoutVisible, hasShownInfoFlyout ] );
-
 	useEffect( () => {
 		const formSubmitButton = isBlocksCheckout
 			? document.querySelector(
@@ -227,67 +210,13 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 								</svg>
 							) }
 							<span>
-								{ isBlocksCheckout
-									? __(
-											'Save my information for a faster and secure checkout',
-											'woocommerce-payments'
-									  )
-									: __(
-											'Save my information for a faster checkout',
-											'woocommerce-payments'
-									  ) }
+								{ __(
+									'Securely save my information for 1-click checkout',
+									'woocommerce-payments'
+								) }
 							</span>
 						</label>
 					</div>
-					<img
-						src={ WooPayIcon }
-						className="woopay-logo"
-						alt="WooPay"
-					/>
-					<button
-						className={ `info-button ${
-							isInfoFlyoutVisible ? 'flyout-visible' : ''
-						}` }
-						type="button"
-						onClick={ toggleTooltip }
-						onBlur={ toggleTooltip }
-					>
-						<Icon icon={ info } size={ 20 } className="info-icon" />
-					</button>
-					<div className="save-details-flyout">
-						<div>
-							<LockIconG size={ 16 } />
-						</div>
-						<span>
-							{ interpolateComponents( {
-								mixedString: __(
-									'We use {{woopayBold/}} to securely store your information in this WooCommerce store and others. ' +
-										"Next time at checkout, we'll send you a code by SMS to authenticate your purchase. {{learnMore/}}",
-									'woocommerce-payments'
-								),
-								components: {
-									woopayBold: <b>WooPay</b>,
-									learnMore: (
-										<a
-											target="_blank"
-											href="https://woocommerce.com/document/woopay-customer-documentation/"
-											rel="noopener noreferrer"
-											onClick={ () => {
-												recordUserEvent(
-													'checkout_save_my_info_tooltip_learn_more_click'
-												);
-											} }
-										>
-											{ __(
-												'Learn more',
-												'woocommerce-payments'
-											) }
-										</a>
-									),
-								},
-							} ) }
-						</span>
-					</div>
 				</div>
 				{ isSaveDetailsChecked && (
 					<div

diff --git a/client/components/woopay/save-user/container.js b/client/components/woopay/save-user/container.js
@@ -7,23 +7,9 @@ const Container = ( { children, isBlocksCheckout } ) => {
 	if ( ! isBlocksCheckout ) return children;
 	return (
 		<>
-			<legend className="screen-reader-text">
-				{ __( 'Remember me', 'woocommerce-payments' ) }
-			</legend>
-			<div className="wc-block-components-checkout-step__heading">
-				<h2
-					className="wc-block-components-title wc-block-components-checkout-step__title"
-					aria-hidden={ true }
-				>
-					{ __( 'Remember me', 'woocommerce-payments' ) }
-				</h2>
-			</div>
-			<div className="wc-block-components-checkout-step__container">
-				<div className="wc-block-components-checkout-step__content">
-					<div className="woopay-save-new-user-container">
-						{ children }
-					</div>
-				</div>
+			<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
@@ -1,12 +1,13 @@
 @import '../../../stylesheets/abstracts/colors';
 @import '../../../stylesheets/abstracts/variables';
 
-.woopay-save-new-user-container {
-	.save-details {
-		padding: $gap-small;
-		border: 1px solid rgba( 109, 109, 109, 0.3 );
+.woocommerce-checkout-payment {
+	.woopay-save-new-user-container {
+		padding: 1.41575em;
 	}
+}
 
+.woopay-save-new-user-container {
 	.save-details-header {
 		display: flex;
 		align-items: flex-start;
@@ -50,74 +51,5 @@
 				}
 			}
 		}
-
-		.woopay-logo {
-			height: 1.0625rem;
-			margin-top: 0.375rem;
-		}
-
-		.info-button {
-			border: none;
-			background: transparent;
-			padding: 0;
-
-			&:focus {
-				outline: none;
-			}
-
-			&:focus + .save-details-flyout {
-				display: none;
-			}
-		}
-
-		.info-button.flyout-visible:focus + .save-details-flyout {
-			display: flex;
-		}
-
-		.info-icon {
-			fill: $gray-600;
-			margin-top: 0.1875rem;
-			object-fit: none;
-
-			&:hover,
-			&:focus {
-				fill: #3d9cd2;
-			}
-		}
-
-		.save-details-flyout {
-			display: none;
-			flex-direction: row;
-			gap: $gap-smaller;
-			background-color: #fff;
-			border: 1px solid rgba( 109, 109, 109, 0.3 );
-			border-radius: 3px;
-			padding: $gap-small;
-			position: absolute;
-			width: 16.875rem;
-			font-size: 0.8125rem;
-			line-height: 1.25rem;
-			top: -7.75rem;
-			left: calc( 100% - 8.4375rem );
-
-			&:hover {
-				display: flex;
-			}
-
-			span {
-				color: $gray-900;
-			}
-
-			svg {
-				fill: currentColor;
-				color: $alert-green;
-			}
-
-			@include breakpoint( '<800px' ) {
-				left: initial;
-				right: 0;
-				top: -8.125rem;
-			}
-		}
 	}
 }