Added code to display error message from grapqhl response in form (#4346

)

* Added code to display error message from grapqhl response in form

* Prettier check changes

* Changed PWA flow as per the pwa backend repo code

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

packages/peregrine/lib/talons/FormError/useFormError.js

@@ -14,7 +14,23 @@ 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) {
+            graphqlErrorMessage = formatMessage({
+                id: 'formError.responseError',
+                defaultMessage: firstError.message
+            });
+        }
+
+        return graphqlErrorMessage
+            ? deriveErrorMessage(errors, graphqlErrorMessage)
+            : deriveErrorMessage(errors, defaultErrorMessage);
     }, [errors, formatMessage, allowErrorMessages]);
 
     return {