From cd124e548b7f3738ab7fd7365aaf17a9b54b87e9 Mon Sep 17 00:00:00 2001 From: glo82145 Date: Wed, 12 Oct 2022 17:31:32 +0530 Subject: [PATCH 1/3] AC-6675::When the button create an account is pressed by the keyboard, nothing happens --- .../lib/talons/SignIn/__tests__/useSignIn.spec.js | 1 + packages/peregrine/lib/talons/SignIn/useSignIn.js | 10 ++++++++++ packages/venia-ui/lib/components/SignIn/signIn.js | 2 ++ 3 files changed, 13 insertions(+) diff --git a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js b/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js index a3fca2c93f..f509261608 100644 --- a/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js +++ b/packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js @@ -122,6 +122,7 @@ test('returns correct shape', () => { "signInMutation" => undefined, }, "handleCreateAccount": [Function], + "handleEnterKeyPress": [Function], "handleForgotPassword": [Function], "handleSubmit": [Function], "isBusy": true, diff --git a/packages/peregrine/lib/talons/SignIn/useSignIn.js b/packages/peregrine/lib/talons/SignIn/useSignIn.js index e812ba5bc3..1ab971385b 100644 --- a/packages/peregrine/lib/talons/SignIn/useSignIn.js +++ b/packages/peregrine/lib/talons/SignIn/useSignIn.js @@ -165,6 +165,15 @@ export const useSignIn = props => { showCreateAccount(); }, [setDefaultUsername, showCreateAccount]); + const handleEnterKeyPress = useCallback(() => { + event => { + if (event.key === 'Enter') { + handleCreateAccount(); + } + }; + }, [handleCreateAccount]); + + const errors = useMemo( () => new Map([ @@ -177,6 +186,7 @@ export const useSignIn = props => { return { errors, handleCreateAccount, + handleEnterKeyPress, handleForgotPassword, handleSubmit, isBusy: isGettingDetails || isSigningIn || recaptchaLoading, diff --git a/packages/venia-ui/lib/components/SignIn/signIn.js b/packages/venia-ui/lib/components/SignIn/signIn.js index 9d4dc91995..ebd7c5ce0d 100644 --- a/packages/venia-ui/lib/components/SignIn/signIn.js +++ b/packages/venia-ui/lib/components/SignIn/signIn.js @@ -36,6 +36,7 @@ const SignIn = props => { const { errors, handleCreateAccount, + handleEnterKeyPress, handleForgotPassword, handleSubmit, isBusy, @@ -123,6 +124,7 @@ const SignIn = props => { type="button" onClick={handleCreateAccount} data-cy="CreateAccount-initiateButton" + onKeyDown={handleEnterKeyPress} > Date: Wed, 12 Oct 2022 17:56:29 +0530 Subject: [PATCH 2/3] AC-6675::run prettier command useSignIn.js --- packages/peregrine/lib/talons/SignIn/useSignIn.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/peregrine/lib/talons/SignIn/useSignIn.js b/packages/peregrine/lib/talons/SignIn/useSignIn.js index 1ab971385b..4957083b32 100644 --- a/packages/peregrine/lib/talons/SignIn/useSignIn.js +++ b/packages/peregrine/lib/talons/SignIn/useSignIn.js @@ -173,7 +173,6 @@ export const useSignIn = props => { }; }, [handleCreateAccount]); - const errors = useMemo( () => new Map([ From 82fc21727328bbc1b3174c2e078ebada42ea0bc1 Mon Sep 17 00:00:00 2001 From: glo82145 Date: Mon, 17 Oct 2022 14:58:52 +0530 Subject: [PATCH 3/3] AC-6675::worked on adding changes for create button keyboard press --- .../__snapshots__/useCreateAccount.spec.js.snap | 2 ++ .../OrderConfirmationPage/useCreateAccount.js | 10 ++++++++++ .../__tests__/__snapshots__/createAccount.spec.js.snap | 2 -- .../lib/components/CreateAccount/createAccount.js | 2 ++ 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap index 78cfcd0c74..59d4c64a3f 100644 --- a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap +++ b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap @@ -18,6 +18,7 @@ Object { "createAccountQuery" => undefined, "signInMutation" => undefined, }, + "handleEnterKeyPress": [Function], "handleSubmit": [Function], "initialValues": Object { "customer": Object { @@ -37,6 +38,7 @@ Object { "createAccountQuery" => undefined, "signInMutation" => undefined, }, + "handleEnterKeyPress": [Function], "handleSubmit": [Function], "initialValues": Object { "customer": Object { diff --git a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js index c96d2de2d4..e1b45e9297 100644 --- a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js +++ b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js @@ -24,6 +24,7 @@ import { useEventingContext } from '../../../context/eventing'; * @returns {{ * errors: Map, * handleSubmit: function, + * handleEnterKeyPress: function, * isDisabled: boolean, * initialValues: object, * recaptchaWidgetProps: { containerElement: function, shouldRender: boolean } @@ -161,6 +162,14 @@ export const useCreateAccount = props => { ] ); + const handleEnterKeyPress = useCallback(() => { + event => { + if (event.key === 'Enter') { + handleSubmit(); + } + }; + }, [handleSubmit]); + const sanitizedInitialValues = useMemo(() => { const { email, firstName, lastName, ...rest } = initialValues; @@ -182,6 +191,7 @@ export const useCreateAccount = props => { return { errors, handleSubmit, + handleEnterKeyPress, isDisabled: isSubmitting || isGettingDetails || recaptchaLoading, initialValues: sanitizedInitialValues, recaptchaWidgetProps diff --git a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap index 48bf2e0d9b..c4c7b139d4 100644 --- a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap +++ b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap @@ -215,7 +215,6 @@ exports[`renders the correct tree 1`] = ` disabled={false} onClick={[Function]} onDragStart={[Function]} - onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseEnter={[Function]} @@ -453,7 +452,6 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = ` disabled={false} onClick={[Function]} onDragStart={[Function]} - onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseEnter={[Function]} diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.js b/packages/venia-ui/lib/components/CreateAccount/createAccount.js index e109c299d4..20532958da 100644 --- a/packages/venia-ui/lib/components/CreateAccount/createAccount.js +++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.js @@ -31,6 +31,7 @@ const CreateAccount = props => { errors, handleCancel, handleSubmit, + handleEnterKeyPress, isDisabled, initialValues, recaptchaWidgetProps @@ -60,6 +61,7 @@ const CreateAccount = props => { disabled={isDisabled} type="submit" priority="high" + onKeyDown={handleEnterKeyPress} data-cy="CreateAccount-submitButton" >