From 6d696f3c5063e9cc6b1c1c122883c9cabf9ef649 Mon Sep 17 00:00:00 2001 From: Bharathidasan Elangovan Date: Thu, 17 Oct 2024 10:44:18 +0530 Subject: [PATCH 1/3] Added code to display error message from grapqhl response in form --- .../lib/talons/FormError/useFormError.js | 22 ++++++++++++++++++- packages/venia-ui/i18n/en_US.json | 1 + 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/peregrine/lib/talons/FormError/useFormError.js b/packages/peregrine/lib/talons/FormError/useFormError.js index ae267552e4..a4e81f1ba8 100644 --- a/packages/peregrine/lib/talons/FormError/useFormError.js +++ b/packages/peregrine/lib/talons/FormError/useFormError.js @@ -14,7 +14,27 @@ export const useFormError = props => { defaultMessage: 'An error has occurred. Please check the input and try again.' }); - return deriveErrorMessage(errors, defaultErrorMessage); + + const firstError = errors + .filter(error => error !== null||undefined) + .map(error => Array.isArray(error) ? error[0] : error) + .find(message => message); + var graphqlErrorMessage; + + if (firstError) { + var category = firstError.graphQLErrors?.find(extensions => extensions).extensions?.category; + category = category ? category + .split('-') + .map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)) + .join('') : null; + const errorId = category ? 'formError.'+category : 'formError.responseError'; + graphqlErrorMessage = formatMessage({ + id: errorId, + defaultMessage: firstError.message + }); + } + + return (graphqlErrorMessage) ? deriveErrorMessage(errors, graphqlErrorMessage) : deriveErrorMessage(errors, defaultErrorMessage); }, [errors, formatMessage, allowErrorMessages]); return { diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json index a11aff2969..eeac5adb0a 100644 --- a/packages/venia-ui/i18n/en_US.json +++ b/packages/venia-ui/i18n/en_US.json @@ -199,6 +199,7 @@ "forgotPasswordPage.header": "Forgot Your Password?", "forgotPasswordPage.title": "Forgot Your Password?", "formError.errorMessage": "An error has occurred. Please check the input and try again.", + "formError.graphqlAuthenticationEmailNotConfirmed": "Your account is created, You must confirm your account. Please check your email for the confirmation link.", "formSubmissionSuccessful.recoverPasswordText": "Recover Password", "formSubmissionSuccessful.textMessage": "If there is an account associated with {email} you will receive an email with a link to change your password.", "galleryItem.unavailableProduct": "Currently unavailable for purchase.", From 47bdeea937605326e9c4e1cf563c31bb1cd89cbf Mon Sep 17 00:00:00 2001 From: Bharathidasan Elangovan Date: Thu, 17 Oct 2024 11:17:52 +0530 Subject: [PATCH 2/3] Prettier check changes --- .../lib/talons/FormError/useFormError.js | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/peregrine/lib/talons/FormError/useFormError.js b/packages/peregrine/lib/talons/FormError/useFormError.js index a4e81f1ba8..854f11c798 100644 --- a/packages/peregrine/lib/talons/FormError/useFormError.js +++ b/packages/peregrine/lib/talons/FormError/useFormError.js @@ -16,25 +16,37 @@ export const useFormError = props => { }); const firstError = errors - .filter(error => error !== null||undefined) - .map(error => Array.isArray(error) ? error[0] : error) - .find(message => message); + .filter(error => error !== null || undefined) + .map(error => (Array.isArray(error) ? error[0] : error)) + .find(message => message); var graphqlErrorMessage; if (firstError) { - var category = firstError.graphQLErrors?.find(extensions => extensions).extensions?.category; - category = category ? category - .split('-') - .map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)) - .join('') : null; - const errorId = category ? 'formError.'+category : 'formError.responseError'; + var category = firstError.graphQLErrors?.find( + extensions => extensions + ).extensions?.category; + category = category + ? category + .split('-') + .map((word, index) => + index === 0 + ? word + : word.charAt(0).toUpperCase() + word.slice(1) + ) + .join('') + : null; + const errorId = category + ? 'formError.' + category + : 'formError.responseError'; graphqlErrorMessage = formatMessage({ id: errorId, defaultMessage: firstError.message }); } - return (graphqlErrorMessage) ? deriveErrorMessage(errors, graphqlErrorMessage) : deriveErrorMessage(errors, defaultErrorMessage); + return graphqlErrorMessage + ? deriveErrorMessage(errors, graphqlErrorMessage) + : deriveErrorMessage(errors, defaultErrorMessage); }, [errors, formatMessage, allowErrorMessages]); return { From 5963e111df5c76f3970fcef8a6159ba838af3b55 Mon Sep 17 00:00:00 2001 From: Bharathidasan Elangovan Date: Fri, 18 Oct 2024 17:33:58 +0530 Subject: [PATCH 3/3] Changed PWA flow as per the pwa backend repo code --- .../talons/CreateAccount/createAccount.gql.js | 1 + .../lib/talons/FormError/useFormError.js | 18 +----------------- packages/venia-ui/i18n/en_US.json | 1 - 3 files changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js b/packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js index 0400d0e0e4..50a68fa4d1 100644 --- a/packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js +++ b/packages/peregrine/lib/talons/CreateAccount/createAccount.gql.js @@ -24,6 +24,7 @@ export const CREATE_ACCOUNT = gql` # eslint-disable-next-line @graphql-eslint/require-id-when-available customer { email + is_confirmed } } } diff --git a/packages/peregrine/lib/talons/FormError/useFormError.js b/packages/peregrine/lib/talons/FormError/useFormError.js index 854f11c798..42bb89f854 100644 --- a/packages/peregrine/lib/talons/FormError/useFormError.js +++ b/packages/peregrine/lib/talons/FormError/useFormError.js @@ -22,24 +22,8 @@ export const useFormError = props => { var graphqlErrorMessage; if (firstError) { - var category = firstError.graphQLErrors?.find( - extensions => extensions - ).extensions?.category; - category = category - ? category - .split('-') - .map((word, index) => - index === 0 - ? word - : word.charAt(0).toUpperCase() + word.slice(1) - ) - .join('') - : null; - const errorId = category - ? 'formError.' + category - : 'formError.responseError'; graphqlErrorMessage = formatMessage({ - id: errorId, + id: 'formError.responseError', defaultMessage: firstError.message }); } diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json index eeac5adb0a..a11aff2969 100644 --- a/packages/venia-ui/i18n/en_US.json +++ b/packages/venia-ui/i18n/en_US.json @@ -199,7 +199,6 @@ "forgotPasswordPage.header": "Forgot Your Password?", "forgotPasswordPage.title": "Forgot Your Password?", "formError.errorMessage": "An error has occurred. Please check the input and try again.", - "formError.graphqlAuthenticationEmailNotConfirmed": "Your account is created, You must confirm your account. Please check your email for the confirmation link.", "formSubmissionSuccessful.recoverPasswordText": "Recover Password", "formSubmissionSuccessful.textMessage": "If there is an account associated with {email} you will receive an email with a link to change your password.", "galleryItem.unavailableProduct": "Currently unavailable for purchase.",