fix(myaccount): fix error handling for customer data and email update action (#777)

Author: bartoszherba

packages/theme/components/MyAccount/ProfileUpdateForm.vue

@@ -67,11 +67,9 @@
           required
           class="form__element"
           style="margin-top: 10px"
-          @keypress.enter="handleSubmit(submitForm(reset))"
         />
         <SfButton
           class="form__button"
-          @click="handleSubmit(submitForm(reset))"
         >
           {{ $t('Update personal data') }}
         </SfButton>
@@ -91,11 +89,9 @@
           required
           class="form__element"
           style="margin-top: 10px"
-          @keypress.enter="handleSubmit(submitForm(reset))"
         />
         <SfButton
           class="form__button"
-          @click="handleSubmit(submitForm(reset))"
         >
           {{ $t('Update personal data') }}
         </SfButton>
@@ -114,8 +110,8 @@
 import { defineComponent, ref } from '@nuxtjs/composition-api';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email } from 'vee-validate/dist/rules';
-import { userGetters } from '~/getters';
 import { SfInput, SfButton, SfModal } from '@storefront-ui/vue';
+import { userGetters } from '~/getters';
 import { useUiNotification, useUser } from '~/composables';
 
 extend('email', {
@@ -169,10 +165,15 @@ export default defineComponent({
         resetValidationFn();
       };
 
-      const onError = () => {
-        form.value = resetForm();
-        requirePassword.value = false;
-        currentPassword.value = '';
+      const onError = (msg) => {
+        sendNotification({
+          id: Symbol('user_updated'),
+          message: msg,
+          type: 'danger',
+          icon: 'cross',
+          persist: false,
+          title: 'User Account',
+        });
       };
 
       if (

packages/theme/composables/useUser/index.ts

@@ -32,6 +32,14 @@ export const useUser = (): UseUser => {
     error.value = errorsFactory();
   };
 
+  const updateCustomerEmail = async (credentials: { email: string, password: string }): Promise<void> => {
+    const { errors } = await app.context.$vsf.$magento.api.updateCustomerEmail(credentials);
+
+    if (errors) {
+      throw errors.map((e) => e.message).join(',');
+    }
+  };
+
   // eslint-disable-next-line consistent-return
   const updateUser = async ({ user: providedUser, customQuery }) => {
     Logger.debug('[Magento] Update user information', { providedUser, customQuery });
@@ -45,7 +53,7 @@ export const useUser = (): UseUser => {
       const userData = generateUserData(updateData);
 
       if (email && email !== oldEmail) {
-        await app.context.$vsf.$magento.api.updateCustomerEmail({
+        await updateCustomerEmail({
           email,
           password,
         });
@@ -57,6 +65,7 @@ export const useUser = (): UseUser => {
       if (errors) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         Logger.error(errors.map((e) => e.message).join(','));
+        error.value.updateUser = errors.map((e) => e.message).join(',');
       }
 
       customerStore.user = data?.updateCustomerV2?.customer || {};

packages/theme/pages/MyAccount/MyProfile.vue

@@ -36,8 +36,7 @@ import {
   confirmed,
 } from 'vee-validate/dist/rules';
 import { SfTabs } from '@storefront-ui/vue';
-import { onSSR } from '@vue-storefront/core';
-import { defineComponent } from '@nuxtjs/composition-api';
+import { defineComponent, useFetch } from '@nuxtjs/composition-api';
 import { useUser } from '~/composables';
 import ProfileUpdateForm from '~/components/MyAccount/ProfileUpdateForm.vue';
 import PasswordResetForm from '~/components/MyAccount/PasswordResetForm.vue';
@@ -112,7 +111,7 @@ export default defineComponent({
       new: form.value.newPassword,
     }), onComplete, onError);
 
-    onSSR(async () => {
+    useFetch(async () => {
       await load();
     });