Delayed Account Creation: Support option to send password setup link to customer via email (#51227)

* Update form handling to work with automatically generated passwords

* Keep user logged in after password reset.

* Ignore comments for hooks in changed method

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Checkmark list style

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx

@@ -32,7 +32,9 @@ const defaultTemplate = [
 	],
 	[
 		'core/list',
-		{},
+		{
+			className: 'is-style-checkmark-list',
+		},
 		[
 			[
 				'core/list-item',

plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx

@@ -9,6 +9,7 @@ import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
 import { ValidatedTextInput } from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { getSetting } from '@woocommerce/settings';
 
 const termsPageLink = TERMS_URL ? (
 	<a href={ TERMS_URL } target="_blank" rel="noreferrer">
@@ -26,46 +27,18 @@ const privacyPageLink = PRIVACY_URL ? (
 	<span>{ __( 'Privacy Policy', 'woocommerce' ) }</span>
 );
 
-const Form = ( {
+const PasswordField = ( {
-	attributes: blockAttributes,
+	isLoading,
-	isEditor,
+	password,
+	setPassword,
 }: {
-	attributes?: { customerEmail?: string; nonceToken?: string };
+	isLoading: boolean;
-	isEditor: boolean;
+	password: string;
+	setPassword: ( password: string ) => void;
 } ) => {
-	const [ isLoading, setIsLoading ] = useState( false );
-	const [ password, setPassword ] = useState( '' );
 	const [ passwordStrength, setPasswordStrength ] = useState( 0 );
-	const hasValidationError = useSelect( ( select ) =>
-		select( VALIDATION_STORE_KEY ).getValidationError( 'account-password' )
-	);
-	const customerEmail =
-		blockAttributes?.customerEmail ||
-		( isEditor ? 'customer@email.com' : '' );
-	const nonceToken = blockAttributes?.nonceToken || '';
 
 	return (
-		<form
-			className={ 'wc-block-order-confirmation-create-account-form' }
-			id="create-account"
-			method="POST"
-			action="#create-account"
-			onSubmit={ ( event ) => {
-				if ( hasValidationError ) {
-					event.preventDefault();
-					return;
-				}
-				setIsLoading( true );
-			} }
-		>
-			<p>
-				{ createInterpolateElement(
-					__( 'Set a password for <email/>', 'woocommerce' ),
-					{
-						email: <strong>{ customerEmail }</strong>,
-					}
-				) }
-			</p>
 		<div>
 			<ValidatedTextInput
 				disabled={ isLoading }
@@ -112,12 +85,70 @@ const Form = ( {
 				}
 			/>
 		</div>
+	);
+};
+
+const Form = ( {
+	attributes: blockAttributes,
+	isEditor,
+}: {
+	attributes?: { customerEmail?: string; nonceToken?: string };
+	isEditor: boolean;
+} ) => {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const [ password, setPassword ] = useState( '' );
+	const hasValidationError = useSelect( ( select ) =>
+		select( VALIDATION_STORE_KEY ).getValidationError( 'account-password' )
+	);
+	const customerEmail =
+		blockAttributes?.customerEmail ||
+		( isEditor ? 'customer@email.com' : '' );
+	const nonceToken = blockAttributes?.nonceToken || '';
+
+	// Passwords might not be required based on settings.
+	const registrationGeneratePassword = getSetting(
+		'registrationGeneratePassword',
+		false
+	);
+	const needsPassword = ! registrationGeneratePassword && ! password;
+
+	return (
+		<form
+			className={ 'wc-block-order-confirmation-create-account-form' }
+			id="create-account"
+			method="POST"
+			action="#create-account"
+			onSubmit={ ( event ) => {
+				if ( hasValidationError ) {
+					event.preventDefault();
+					return;
+				}
+				setIsLoading( true );
+			} }
+		>
+			{ ! registrationGeneratePassword && (
+				<>
+					<p>
+						{ createInterpolateElement(
+							__( 'Set a password for <email/>', 'woocommerce' ),
+							{
+								email: <strong>{ customerEmail }</strong>,
+							}
+						) }
+					</p>
+					<PasswordField
+						isLoading={ isLoading }
+						password={ password }
+						setPassword={ setPassword }
+					/>
+				</>
+			) }
 			<Button
 				className={
 					'wc-block-order-confirmation-create-account-button'
 				}
 				type="submit"
-				disabled={ !! hasValidationError || ! password || isLoading }
+				disabled={ !! hasValidationError || needsPassword || isLoading }
 				showSpinner={ isLoading }
 			>
 				{ __( 'Create account', 'woocommerce' ) }
@@ -126,7 +157,16 @@ const Form = ( {
 			<input type="hidden" name="password" value={ password } />
 			<input type="hidden" name="create-account" value="1" />
 			<input type="hidden" name="_wpnonce" value={ nonceToken } />
-			<p className={ 'wc-block-order-confirmation-create-account-terms' }>
+			<div className="wc-block-order-confirmation-create-account-description">
+				{ registrationGeneratePassword && (
+					<p>
+						{ __(
+							"We'll email you a link to set up an account password.",
+							'woocommerce'
+						) }
+					</p>
+				) }
+				<p>
 					{ createInterpolateElement(
 						/* translators: %1$s terms page link, %2$s privacy page link. */
 						__(
@@ -136,6 +176,7 @@ const Form = ( {
 						{ terms: termsPageLink, privacy: privacyPageLink }
 					) }
 				</p>
+			</div>
 		</form>
 	);
 };

plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/style.scss

@@ -53,7 +53,8 @@
 			padding: 1em;
 		}
 
-		.wc-block-order-confirmation-create-account-terms {
+		.wc-block-order-confirmation-create-account-description {
+			p {
 				@include font-size(small);
 				text-align: center;
 
@@ -62,6 +63,7 @@
 					white-space: nowrap;
 				}
 			}
+		}
 
 		.wc-block-components-password-strength.hidden {
 			display: none;

plugins/woocommerce/changelog/51227-add-delayed-account-creation-send-password-51193

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Delayed account creation: Support option to send password setup link to customer via email.
+

plugins/woocommerce/includes/shortcodes/class-wc-shortcode-my-account.php

@@ -358,16 +358,21 @@ class WC_Shortcode_My_Account {
 	/**
 	 * Handles resetting the user's password.
 	 *
+	 * @since 9.4.0 This will log the user in after resetting the password/session.
+	 *
 	 * @param object $user     The user.
 	 * @param string $new_pass New password for the user in plaintext.
 	 */
 	public static function reset_password( $user, $new_pass ) {
+		// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
 		do_action( 'password_reset', $user, $new_pass );
 
 		wp_set_password( $new_pass, $user->ID );
 		update_user_meta( $user->ID, 'default_password_nag', false );
 		self::set_reset_password_cookie();
+		wc_set_customer_auth_cookie( $user->ID );
 
+		// phpcs:ignore WooCommerce.Commenting.CommentHooks.MissingHookComment
 		if ( ! apply_filters( 'woocommerce_disable_password_change_notification', false ) ) {
 			wp_password_change_notification( $user );
 		}

plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/CreateAccount.php

@@ -40,7 +40,7 @@ class CreateAccount extends AbstractOrderConfirmationBlock {
 	 * @return \WP_Error|int
 	 */
 	protected function process_form_post( $order ) {
-		if ( ! isset( $_POST['create-account'], $_POST['email'], $_POST['password'], $_POST['_wpnonce'] ) ) {
+		if ( ! isset( $_POST['create-account'], $_POST['email'], $_POST['_wpnonce'] ) ) {
 			return 0;
 		}
 
@@ -49,7 +49,6 @@ class CreateAccount extends AbstractOrderConfirmationBlock {
 		}
 
 		$user_email = sanitize_email( wp_unslash( $_POST['email'] ) );
-		$password   = wp_unslash( $_POST['password'] ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
 
 		// Does order already have user?
 		if ( $order->get_customer_id() ) {
@@ -61,9 +60,17 @@ class CreateAccount extends AbstractOrderConfirmationBlock {
 			return new \WP_Error( 'email_mismatch', __( 'The email address provided does not match the email address on this order.', 'woocommerce' ) );
 		}
 
+		$generate_password = get_option( 'woocommerce_registration_generate_password', false );
+
+		if ( $generate_password ) {
+			$password = ''; // Will be generated by wc_create_new_customer.
+		} else {
+			$password = wp_unslash( $_POST['password'] ?? '' ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+
 			if ( empty( $password ) || strlen( $password ) < 8 ) {
 				return new \WP_Error( 'password_too_short', __( 'Password must be at least 8 characters.', 'woocommerce' ) );
 			}
+		}
 
 		$customer_id = wc_create_new_customer(
 			$user_email,
@@ -171,4 +178,17 @@ class CreateAccount extends AbstractOrderConfirmationBlock {
 
 		return $content;
 	}
+
+	/**
+	 * Extra data passed through from server to client for block.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 *                           Note, this will be empty in the editor context when the block is
+	 *                           not in the post content on editor load.
+	 */
+	protected function enqueue_data( array $attributes = [] ) {
+		parent::enqueue_data( $attributes );
+
+		$this->asset_data_registry->add( 'registrationGeneratePassword', filter_var( get_option( 'woocommerce_registration_generate_password' ), FILTER_VALIDATE_BOOLEAN ) );
+	}
 }