From d567c6c6984ad6c03a06de21fb9cd27c1a2f33be Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Thu, 19 Sep 2024 15:03:27 +0100 Subject: [PATCH] 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 --- .../create-account/edit.tsx | 4 +- .../create-account/form.tsx | 169 +++++++++++------- .../create-account/style.scss | 14 +- ...layed-account-creation-send-password-51193 | 4 + .../class-wc-shortcode-my-account.php | 5 + .../OrderConfirmation/CreateAccount.php | 28 ++- 6 files changed, 149 insertions(+), 75 deletions(-) create mode 100644 plugins/woocommerce/changelog/51227-add-delayed-account-creation-send-password-51193 diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx index 5b061b89ea6..e13b6093e8c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx +++ b/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', diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx index 4d7446443f5..a728c5d72d5 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx +++ b/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 ? ( @@ -26,6 +27,67 @@ const privacyPageLink = PRIVACY_URL ? ( { __( 'Privacy Policy', 'woocommerce' ) } ); +const PasswordField = ( { + isLoading, + password, + setPassword, +}: { + isLoading: boolean; + password: string; + setPassword: ( password: string ) => void; +} ) => { + const [ passwordStrength, setPasswordStrength ] = useState( 0 ); + + return ( +
+ { + if ( + validity.valueMissing || + validity.badInput || + validity.typeMismatch + ) { + return __( + 'Please enter a valid password', + 'woocommerce' + ); + } + } } + customValidation={ ( inputObject ) => { + if ( passwordStrength < 2 ) { + inputObject.setCustomValidity( + __( + 'Please create a stronger password', + 'woocommerce' + ) + ); + return false; + } + return true; + } } + onChange={ ( value: string ) => setPassword( value ) } + feedback={ + + setPasswordStrength( strength ) + } + /> + } + /> +
+ ); +}; + const Form = ( { attributes: blockAttributes, isEditor, @@ -35,7 +97,6 @@ const Form = ( { } ) => { 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' ) ); @@ -44,6 +105,13 @@ const Form = ( { ( 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 (
-

- { createInterpolateElement( - __( 'Set a password for ', 'woocommerce' ), - { - email: { customerEmail }, - } - ) } -

-
- { - if ( - validity.valueMissing || - validity.badInput || - validity.typeMismatch - ) { - return __( - 'Please enter a valid password', - 'woocommerce' - ); - } - } } - customValidation={ ( inputObject ) => { - if ( passwordStrength < 2 ) { - inputObject.setCustomValidity( - __( - 'Please create a stronger password', - 'woocommerce' - ) - ); - return false; - } - return true; - } } - onChange={ ( value: string ) => setPassword( value ) } - feedback={ - - setPasswordStrength( strength ) + { ! registrationGeneratePassword && ( + <> +

+ { createInterpolateElement( + __( 'Set a password for ', 'woocommerce' ), + { + email: { customerEmail }, } - /> - } - /> -

+ ) } +

+ + + ) }