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 }, } - /> - } - /> -

+ ) } +

+ + + ) }