From 420c1aa3fd7119720725ab928c56593f1295536b Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Fri, 25 Jun 2021 14:21:08 +0200
Subject: [PATCH 01/11] feat: error interceptor refactor

---
 .../commons/interfaces/errors/ApiError.ts     |  2 +-
 packages/composables/src/hooks/useUser.ts     | 14 +++++------
 .../src/components/SwErrorsList.vue           | 23 +++++++++++++++----
 .../src/components/SwRegister.vue             | 10 +++++---
 packages/helpers/src/error/index.ts           |  2 +-
 .../src/interceptors/errorInterceptor.ts      |  2 +-
 6 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/commons/interfaces/errors/ApiError.ts b/packages/commons/interfaces/errors/ApiError.ts
index 732e542b3..52413790f 100644
--- a/packages/commons/interfaces/errors/ApiError.ts
+++ b/packages/commons/interfaces/errors/ApiError.ts
@@ -25,6 +25,6 @@ export interface ShopwareApiError extends AxiosError {
  * @alpha
  */
 export interface ClientApiError {
-  message: string | ShopwareError[];
+  messages: ShopwareError[];
   statusCode: number;
 }
diff --git a/packages/composables/src/hooks/useUser.ts b/packages/composables/src/hooks/useUser.ts
index 439b1d5d8..9f6944758 100644
--- a/packages/composables/src/hooks/useUser.ts
+++ b/packages/composables/src/hooks/useUser.ts
@@ -63,8 +63,8 @@ export interface IUseUser {
   loading: Ref<boolean>;
   error: Ref<any>;
   errors: UnwrapRef<{
-    login: string;
-    register: string[];
+    login: ClientApiError;
+    register: ClientApiError;
   }>;
   isLoggedIn: ComputedRef<boolean>;
   isCustomerSession: ComputedRef<boolean>;
@@ -131,8 +131,8 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
   const loading: Ref<boolean> = ref(false);
   const error: Ref<any> = ref(null);
   const errors: UnwrapRef<{
-    login: string;
-    register: string[];
+    login: ShopwareError[];
+    register: ShopwareError[];
   }> = reactive({
     login: "",
     register: [],
@@ -158,7 +158,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       return true;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
       broadcast(INTERCEPTOR_KEYS.ERROR, {
         methodName: `[${contextName}][login]`,
         inputParams: {},
@@ -187,7 +187,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       const err: ClientApiError = e;
       // temporary workaround - get rid of such hacks in the future
       // TODO: https://github.com/vuestorefront/shopware-pwa/issues/1498
-      errors.register = [err.message as string];
+      errors.register = err.messages;
       broadcast(INTERCEPTOR_KEYS.ERROR, {
         methodName: `[${contextName}][register]`,
         inputParams: {},
@@ -205,7 +205,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       broadcast(INTERCEPTOR_KEYS.USER_LOGOUT);
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
       broadcast(INTERCEPTOR_KEYS.ERROR, {
         methodName: `[${contextName}][logout]`,
         inputParams: {},
diff --git a/packages/default-theme/src/components/SwErrorsList.vue b/packages/default-theme/src/components/SwErrorsList.vue
index 1765e8da7..f7b9e2926 100644
--- a/packages/default-theme/src/components/SwErrorsList.vue
+++ b/packages/default-theme/src/components/SwErrorsList.vue
@@ -1,9 +1,13 @@
 <template>
   <div v-if="Array.isArray(list) && list.length" class="errors-list-component">
     <SwAlert :message="`${$t('Encountered problems')}:`" type="danger" />
-
     <ul class="list">
-      <li v-for="message in list" :key="message" class="item">{{ message }}</li>
+      <li v-for="error in list" :key="error.code" class="item">
+        {{
+          isFieldRelatedError(error.code) ? `${error.source.pointer}: ` : ""
+        }}
+        {{ error.detail }}
+      </li>
     </ul>
   </div>
 </template>
@@ -11,6 +15,12 @@
 <script>
 import SwAlert from "@/components/atoms/SwAlert.vue"
 
+const FIELD_RELATED_ERRORS = [
+  "VIOLATION::IS_BLANK_ERROR",
+  "VIOLATION::TOO_LOW_ERROR",
+  "VIOLATION::STRICT_CHECK_FAILED_ERROR",
+]
+
 export default {
   name: "SwErrorsList",
   components: { SwAlert },
@@ -20,8 +30,13 @@ export default {
       default: [],
     },
   },
-  setup(props, { root }) {
-    return {}
+  setup(props, {}) {
+    // enables to check whether error should also contain the field name
+    const isFieldRelatedError = (errorCode) =>
+      FIELD_RELATED_ERRORS.includes(errorCode)
+    return {
+      isFieldRelatedError,
+    }
   },
 }
 </script>
diff --git a/packages/default-theme/src/components/SwRegister.vue b/packages/default-theme/src/components/SwRegister.vue
index b03d9910c..7f12059e1 100644
--- a/packages/default-theme/src/components/SwRegister.vue
+++ b/packages/default-theme/src/components/SwRegister.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="sw-register">
+    <SwErrorsList :list="apiErrors" />
     <SwRegistrationForm
       v-model="registrationFormData"
       @invokeRegister="invokeRegister"
@@ -18,19 +19,21 @@
 import SwRegistrationForm from "@/components/forms/SwRegistrationForm.vue"
 import { useUser } from "@shopware-pwa/composables"
 import useVuelidate from "@vuelidate/core"
-import { ref } from "@vue/composition-api"
+import { ref, computed } from "@vue/composition-api"
 import SwButton from "@/components/atoms/SwButton.vue"
+import SwErrorsList from "@/components/SwErrorsList.vue"
 
 export default {
   name: "SwRegister",
   components: {
     SwRegistrationForm,
     SwButton,
+    SwErrorsList,
   },
   setup(props, { root, emit }) {
     const $v = useVuelidate()
-    const { register } = useUser(root)
-
+    const { register, errors } = useUser(root)
+    const apiErrors = computed(() => errors.register)
     const registrationFormData = ref()
     async function invokeRegister() {
       $v.value.$reset()
@@ -44,6 +47,7 @@ export default {
     return {
       invokeRegister,
       registrationFormData,
+      apiErrors,
     }
   },
 }
diff --git a/packages/helpers/src/error/index.ts b/packages/helpers/src/error/index.ts
index 2ca774edb..545c35a07 100644
--- a/packages/helpers/src/error/index.ts
+++ b/packages/helpers/src/error/index.ts
@@ -2,7 +2,7 @@ import { ShopwareError } from "@shopware-pwa/commons/interfaces/errors/ApiError"
 
 /**
  * Get the messages from the API response (array of ShopwareErrors)
- *
+ * @deprecated there is no need to parse errors - it's better to open errors API that may have some crucial data included
  * @alpha
  */
 export function getMessagesFromErrorsArray(errors: ShopwareError[]): string[] {
diff --git a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
index cd4e10d68..1085874e5 100644
--- a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
+++ b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
@@ -83,7 +83,7 @@ export async function errorInterceptor(
   // Do something with response error
   const statusCode = extractApiErrorStatusCode(error);
   const clientApiError: ClientApiError = {
-    message: API_ERROR_CODES.includes(statusCode)
+    messages: API_ERROR_CODES.includes(statusCode)
       ? extractApiErrorMessage(error)
       : extractNotApiErrorMessage(error),
     statusCode: statusCode,

From ce060842a182924793aa9d287cdb89b11db79a20 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 28 Jun 2021 13:45:32 +0200
Subject: [PATCH 02/11] chore: errors unification

---
 api/composables.api.md                        |  5 ++--
 api/helpers.api.md                            |  2 +-
 .../api/composables.iuseuser.errors.md        |  4 +--
 .../resources/api/composables.iuseuser.md     |  2 +-
 .../commons/interfaces/errors/ApiError.ts     |  2 +-
 .../composables/src/hooks/useCart/index.ts    |  2 +-
 .../composables/src/hooks/useCms/index.ts     |  2 +-
 .../composables/src/hooks/useCountries.ts     |  2 +-
 .../composables/src/hooks/useNavigation.ts    |  2 +-
 .../composables/src/hooks/useProduct/index.ts |  2 +-
 .../composables/src/hooks/useSalutations.ts   |  2 +-
 packages/composables/src/hooks/useUser.ts     | 25 +++++++++--------
 .../elements/CmsElementCategoryNavigation.vue |  2 +-
 .../cms/elements/CmsElementContactForm.vue    | 13 ++++-----
 .../cms/elements/CmsElementNesletterForm.vue  |  3 +--
 .../src/components/SwBottomMenu.vue           |  2 +-
 .../default-theme/src/components/SwCart.vue   |  2 +-
 .../components/forms/SwAddProductReview.vue   |  3 +--
 .../src/components/forms/SwAddressForm.vue    | 11 ++------
 .../src/components/forms/SwPassword.vue       | 14 +++++-----
 .../src/components/forms/SwPersonalInfo.vue   |  5 +---
 packages/default-theme/src/layouts/error.vue  | 21 +++++----------
 packages/default-theme/src/pages/checkout.vue | 12 +--------
 .../src/pages/newsletter-subscribe.vue        |  2 +-
 .../src/pages/reset-password.vue              |  2 +-
 packages/default-theme/src/pages/search.vue   |  4 +--
 packages/default-theme/src/pages/wishlist.vue |  2 +-
 .../src/interceptors/errorInterceptor.ts      | 27 ++++++++-----------
 packages/theme-base/dist/pages/_.vue          | 11 +++++---
 29 files changed, 81 insertions(+), 107 deletions(-)

diff --git a/api/composables.api.md b/api/composables.api.md
index a6840a4f5..8e20b9f4c 100644
--- a/api/composables.api.md
+++ b/api/composables.api.md
@@ -42,6 +42,7 @@ import { SessionContext } from '@shopware-pwa/commons/interfaces/response/Sessio
 import { ShippingAddress } from '@shopware-pwa/commons/interfaces/models/checkout/customer/ShippingAddress';
 import { ShippingMethod } from '@shopware-pwa/commons/interfaces/models/checkout/shipping/ShippingMethod';
 import { ShopwareApiInstance } from '@shopware-pwa/shopware-6-client';
+import { ShopwareError } from '@shopware-pwa/commons/interfaces/errors/ApiError';
 import { ShopwareSearchParams } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { Sort } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { StoreNavigationElement } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
@@ -379,8 +380,8 @@ export interface IUseUser {
     error: Ref<any>;
     // (undocumented)
     errors: UnwrapRef<{
-        login: string;
-        register: string[];
+        login: ShopwareError[];
+        register: ShopwareError[];
     }>;
     // (undocumented)
     getOrderDetails: (orderId: string) => Promise<Order | undefined>;
diff --git a/api/helpers.api.md b/api/helpers.api.md
index e021fb54a..c0cd1163f 100644
--- a/api/helpers.api.md
+++ b/api/helpers.api.md
@@ -111,7 +111,7 @@ export function getListingAvailableFilters(aggregations: Aggregations | undefine
 // @beta (undocumented)
 export function getListingFilters(aggregations: Aggregations | undefined | null): ListingFilter[];
 
-// @alpha
+// @alpha @deprecated
 export function getMessagesFromErrorsArray(errors: ShopwareError[]): string[];
 
 // @alpha
diff --git a/docs/landing/resources/api/composables.iuseuser.errors.md b/docs/landing/resources/api/composables.iuseuser.errors.md
index 8429c6a27..6d425cd03 100644
--- a/docs/landing/resources/api/composables.iuseuser.errors.md
+++ b/docs/landing/resources/api/composables.iuseuser.errors.md
@@ -11,7 +11,7 @@
 
 ```typescript
 errors: UnwrapRef<{
-        login: string;
-        register: string[];
+        login: ShopwareError[];
+        register: ShopwareError[];
     }>;
 ```
diff --git a/docs/landing/resources/api/composables.iuseuser.md b/docs/landing/resources/api/composables.iuseuser.md
index bd146694f..0fa9233ea 100644
--- a/docs/landing/resources/api/composables.iuseuser.md
+++ b/docs/landing/resources/api/composables.iuseuser.md
@@ -24,7 +24,7 @@ export interface IUseUser
 |  [country](./composables.iuseuser.country.md) | Ref&lt;Country \| null&gt; | <b><i>(BETA)</i></b> |
 |  [deleteAddress](./composables.iuseuser.deleteaddress.md) | (addressId: string) =&gt; Promise&lt;boolean&gt; | <b><i>(BETA)</i></b> |
 |  [error](./composables.iuseuser.error.md) | Ref&lt;any&gt; | <b><i>(BETA)</i></b> |
-|  [errors](./composables.iuseuser.errors.md) | UnwrapRef&lt;{ login: string; register: string\[\]; }&gt; | <b><i>(BETA)</i></b> |
+|  [errors](./composables.iuseuser.errors.md) | UnwrapRef&lt;{ login: ShopwareError\[\]; register: ShopwareError\[\]; }&gt; | <b><i>(BETA)</i></b> |
 |  [getOrderDetails](./composables.iuseuser.getorderdetails.md) | (orderId: string) =&gt; Promise&lt;Order \| undefined&gt; | <b><i>(BETA)</i></b> |
 |  [isCustomerSession](./composables.iuseuser.iscustomersession.md) | ComputedRef&lt;boolean&gt; | <b><i>(BETA)</i></b> |
 |  [isGuestSession](./composables.iuseuser.isguestsession.md) | ComputedRef&lt;boolean&gt; | <b><i>(BETA)</i></b> |
diff --git a/packages/commons/interfaces/errors/ApiError.ts b/packages/commons/interfaces/errors/ApiError.ts
index 52413790f..4956a730a 100644
--- a/packages/commons/interfaces/errors/ApiError.ts
+++ b/packages/commons/interfaces/errors/ApiError.ts
@@ -1,7 +1,7 @@
 import { AxiosResponse, AxiosError } from "axios";
 
 /**
- * @alpha
+ * @beta
  */
 export interface ShopwareError {
   status: string;
diff --git a/packages/composables/src/hooks/useCart/index.ts b/packages/composables/src/hooks/useCart/index.ts
index 6af498727..15067e859 100644
--- a/packages/composables/src/hooks/useCart/index.ts
+++ b/packages/composables/src/hooks/useCart/index.ts
@@ -87,7 +87,7 @@ export const useCart = (rootContext: ApplicationVueContext): IUseCart => {
       _storeCart.value = result;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     } finally {
       loading.value = false;
     }
diff --git a/packages/composables/src/hooks/useCms/index.ts b/packages/composables/src/hooks/useCms/index.ts
index d2cd7a348..d9b033c81 100644
--- a/packages/composables/src/hooks/useCms/index.ts
+++ b/packages/composables/src/hooks/useCms/index.ts
@@ -78,7 +78,7 @@ export function useCms(rootContext: ApplicationVueContext): {
       _storePage.value = result;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err;
+      error.value = err.messages;
     } finally {
       loading.value = false;
     }
diff --git a/packages/composables/src/hooks/useCountries.ts b/packages/composables/src/hooks/useCountries.ts
index 4e721ff68..8fa3c8e0c 100644
--- a/packages/composables/src/hooks/useCountries.ts
+++ b/packages/composables/src/hooks/useCountries.ts
@@ -34,7 +34,7 @@ export const useCountries = (
       _sharedCountried.value = elements;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
diff --git a/packages/composables/src/hooks/useNavigation.ts b/packages/composables/src/hooks/useNavigation.ts
index 192a25141..ef1f1671b 100644
--- a/packages/composables/src/hooks/useNavigation.ts
+++ b/packages/composables/src/hooks/useNavigation.ts
@@ -85,7 +85,7 @@ export const useNavigation = (
       sharedElements.value = navigationResponse || [];
     } catch (e) {
       sharedElements.value = [];
-      console.error("[useNavigation][loadNavigationElements]", e);
+      console.error("[useNavigation][loadNavigationElements]", e.messages);
     }
   };
 
diff --git a/packages/composables/src/hooks/useProduct/index.ts b/packages/composables/src/hooks/useProduct/index.ts
index 4ac35e8f4..c0146f211 100644
--- a/packages/composables/src/hooks/useProduct/index.ts
+++ b/packages/composables/src/hooks/useProduct/index.ts
@@ -70,7 +70,7 @@ export const useProduct = (
       return result;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     } finally {
       loading.value = false;
     }
diff --git a/packages/composables/src/hooks/useSalutations.ts b/packages/composables/src/hooks/useSalutations.ts
index 4fec7a602..fb760a013 100644
--- a/packages/composables/src/hooks/useSalutations.ts
+++ b/packages/composables/src/hooks/useSalutations.ts
@@ -35,7 +35,7 @@ export const useSalutations = (
       _salutations.value = elements;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
diff --git a/packages/composables/src/hooks/useUser.ts b/packages/composables/src/hooks/useUser.ts
index 9f6944758..f5a1eed49 100644
--- a/packages/composables/src/hooks/useUser.ts
+++ b/packages/composables/src/hooks/useUser.ts
@@ -30,7 +30,10 @@ import {
   AddressType,
 } from "@shopware-pwa/commons/interfaces/models/checkout/customer/CustomerAddress";
 import { CustomerRegistrationParams } from "@shopware-pwa/commons/interfaces/request/CustomerRegistrationParams";
-import { ClientApiError } from "@shopware-pwa/commons/interfaces/errors/ApiError";
+import {
+  ClientApiError,
+  ShopwareError,
+} from "@shopware-pwa/commons/interfaces/errors/ApiError";
 import { Country } from "@shopware-pwa/commons/interfaces/models/system/country/Country";
 import { Salutation } from "@shopware-pwa/commons/interfaces/models/system/salutation/Salutation";
 import {
@@ -63,8 +66,8 @@ export interface IUseUser {
   loading: Ref<boolean>;
   error: Ref<any>;
   errors: UnwrapRef<{
-    login: ClientApiError;
-    register: ClientApiError;
+    login: ShopwareError[];
+    register: ShopwareError[];
   }>;
   isLoggedIn: ComputedRef<boolean>;
   isCustomerSession: ComputedRef<boolean>;
@@ -134,7 +137,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
     login: ShopwareError[];
     register: ShopwareError[];
   }> = reactive({
-    login: "",
+    login: [],
     register: [],
   });
   const orders: Ref<Order[] | null> = ref(null);
@@ -249,7 +252,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       storeAddresses.value = response?.elements;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
@@ -258,7 +261,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       country.value = await getUserCountry(userId, apiInstance);
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
@@ -267,7 +270,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       salutation.value = await getUserSalutation(salutationId, apiInstance);
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
@@ -296,7 +299,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       await refreshUser();
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
       return false;
     }
 
@@ -311,7 +314,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       return id;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
@@ -323,7 +326,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       return id;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
   };
 
@@ -333,7 +336,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       return true;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.message;
+      error.value = err.messages;
     }
 
     return false;
diff --git a/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue b/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue
index 100c2158d..4b211cc21 100644
--- a/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue
+++ b/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue
@@ -108,7 +108,7 @@ export default {
       } catch (error) {
         console.warn(
           "CmsElementCategoryNavigation:onMounted:getStoreNavigation",
-          error
+          error.messages
         )
       }
     })
diff --git a/packages/default-theme/src/cms/elements/CmsElementContactForm.vue b/packages/default-theme/src/cms/elements/CmsElementContactForm.vue
index c0922953e..9dcde3336 100644
--- a/packages/default-theme/src/cms/elements/CmsElementContactForm.vue
+++ b/packages/default-theme/src/cms/elements/CmsElementContactForm.vue
@@ -132,10 +132,7 @@
 import { SfSelect, SfInput, SfIcon, SfHeading } from "@storefront-ui/vue"
 import useVuelidate from "@vuelidate/core"
 import { required, email, minLength } from "@vuelidate/validators"
-import {
-  mapSalutations,
-  getMessagesFromErrorsArray,
-} from "@shopware-pwa/helpers"
+import { mapSalutations } from "@shopware-pwa/helpers"
 import {
   useSalutations,
   getApplicationContext,
@@ -202,7 +199,7 @@ export default {
         )
         formSent.value = true
       } catch (e) {
-        errorMessages.value = getMessagesFromErrorsArray(e.message)
+        errorMessages.value = e.messages
       }
     }
 
@@ -260,7 +257,11 @@ export default {
       this.$v.$touch()
       if (this.$v.$invalid) {
         this.errorMessages = [
-          this.$t("Please fill form data and check regulations acceptance."),
+          {
+            detail: this.$t(
+              "Please fill form data and check regulations acceptance."
+            ),
+          },
         ]
         return
       }
diff --git a/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue b/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue
index ea37a5cc4..44bacf728 100644
--- a/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue
+++ b/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue
@@ -75,7 +75,6 @@ import SwButton from "@/components/atoms/SwButton.vue"
 import { newsletterSubscribe } from "@shopware-pwa/shopware-6-client"
 import { ref } from "@vue/composition-api"
 import { getApplicationContext } from "@shopware-pwa/composables"
-import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import SwErrorsList from "@/components/SwErrorsList.vue"
 
 export default {
@@ -117,7 +116,7 @@ export default {
         )
         formSent.value = true
       } catch (e) {
-        errorMessages.value = getMessagesFromErrorsArray(e.message)
+        errorMessages.value = e.messages
       }
     }
 
diff --git a/packages/default-theme/src/components/SwBottomMenu.vue b/packages/default-theme/src/components/SwBottomMenu.vue
index d04c592b0..3525fc43a 100644
--- a/packages/default-theme/src/components/SwBottomMenu.vue
+++ b/packages/default-theme/src/components/SwBottomMenu.vue
@@ -81,7 +81,7 @@ export default {
       try {
         await loadNavigationElements({ depth: 3 })
       } catch (e) {
-        console.error("[SwBottomMenu]", e)
+        console.error("[SwBottomMenu]", e.messages)
       }
     })
     return {
diff --git a/packages/default-theme/src/components/SwCart.vue b/packages/default-theme/src/components/SwCart.vue
index f6c6660a3..98d963d61 100644
--- a/packages/default-theme/src/components/SwCart.vue
+++ b/packages/default-theme/src/components/SwCart.vue
@@ -147,7 +147,7 @@ export default {
         )
         additionalItemsData.value = result.elements
       } catch (error) {
-        console.error("[SwCart][setup][onMounted]", error)
+        console.error("[SwCart][setup][onMounted]", error.messages)
       }
     }
 
diff --git a/packages/default-theme/src/components/forms/SwAddProductReview.vue b/packages/default-theme/src/components/forms/SwAddProductReview.vue
index e669765f0..8f526529a 100644
--- a/packages/default-theme/src/components/forms/SwAddProductReview.vue
+++ b/packages/default-theme/src/components/forms/SwAddProductReview.vue
@@ -65,7 +65,6 @@
 <script>
 import { SfHeading, SfDivider } from "@storefront-ui/vue"
 import { addProductReview } from "@shopware-pwa/shopware-6-client"
-import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import { ref, computed } from "@vue/composition-api"
 import {
   useUser,
@@ -122,7 +121,7 @@ export default {
         wasReviewSent.value = true
       } catch (error) {
         console.error("[SwAddProductReview][submitForm]: ", error)
-        errorMessages.value = getMessagesFromErrorsArray(error.message)
+        errorMessages.value = error.messages
       }
       isSending.value = false
     }
diff --git a/packages/default-theme/src/components/forms/SwAddressForm.vue b/packages/default-theme/src/components/forms/SwAddressForm.vue
index 3b7854034..38b7936af 100644
--- a/packages/default-theme/src/components/forms/SwAddressForm.vue
+++ b/packages/default-theme/src/components/forms/SwAddressForm.vue
@@ -155,11 +155,7 @@ import {
   useSalutations,
   useNotifications,
 } from "@shopware-pwa/composables"
-import {
-  mapCountries,
-  mapSalutations,
-  getMessagesFromErrorsArray,
-} from "@shopware-pwa/helpers"
+import { mapCountries, mapSalutations } from "@shopware-pwa/helpers"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import SwErrorsList from "@/components/SwErrorsList.vue"
@@ -226,9 +222,6 @@ export default {
       selectedCountryId,
       getCountries
     )
-    const formErrors = getMessagesFromErrorsArray(
-      userError.value && this.userError.value.message
-    )
 
     // address model ready to be sent to API
     const getAddressModel = computed(() => ({
@@ -260,7 +253,7 @@ export default {
       saveAddress,
       pushError,
       pushSuccess,
-      formErrors,
+      formErrors: userError,
       existingAddress,
       $v: useVuelidate({ $scope: "addressForm", $stopPropagation: true }),
     }
diff --git a/packages/default-theme/src/components/forms/SwPassword.vue b/packages/default-theme/src/components/forms/SwPassword.vue
index 4bfe25311..d9ad3c613 100644
--- a/packages/default-theme/src/components/forms/SwPassword.vue
+++ b/packages/default-theme/src/components/forms/SwPassword.vue
@@ -71,7 +71,6 @@ import useVuelidate from "@vuelidate/core"
 import { required, minLength, sameAs } from "@vuelidate/validators"
 import { computed } from "@vue/composition-api"
 import { useUser } from "@shopware-pwa/composables"
-import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import SwErrorsList from "@/components/SwErrorsList.vue"
@@ -81,12 +80,13 @@ export default {
   components: { SwInput, SwButton, SwErrorsList },
   props: {},
   setup(props, { root }) {
-    const { user, error: userError, updatePassword, refreshUser } = useUser(
-      root
-    )
-    const userErrorMessages = computed(() =>
-      getMessagesFromErrorsArray(userError.value && userError.value.message)
-    )
+    const {
+      user,
+      error: userError,
+      updatePassword,
+      refreshUser,
+    } = useUser(root)
+    const userErrorMessages = computed(() => userError.value)
 
     return {
       refreshUser,
diff --git a/packages/default-theme/src/components/forms/SwPersonalInfo.vue b/packages/default-theme/src/components/forms/SwPersonalInfo.vue
index 9d1864315..4bf8ee300 100644
--- a/packages/default-theme/src/components/forms/SwPersonalInfo.vue
+++ b/packages/default-theme/src/components/forms/SwPersonalInfo.vue
@@ -100,7 +100,6 @@ import {
 } from "@vuelidate/validators"
 import { SfIcon } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
-import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import SwErrorsList from "@/components/SwErrorsList.vue"
@@ -151,9 +150,7 @@ export default {
   },
   computed: {
     getErrorMessage() {
-      return getMessagesFromErrorsArray(
-        this.userError && this.userError.message
-      )
+      return this.userError
     },
     isEmailChanging() {
       return this.email !== (this.user && this.user.email)
diff --git a/packages/default-theme/src/layouts/error.vue b/packages/default-theme/src/layouts/error.vue
index 771dbb081..115666b90 100644
--- a/packages/default-theme/src/layouts/error.vue
+++ b/packages/default-theme/src/layouts/error.vue
@@ -6,10 +6,12 @@
       alt="leaves"
     />
     <SfHeading
+      v-for="error in error.messages"
+      :key="error.code"
       class="error-page__heading"
       :level="1"
-      :title="`${code}`"
-      :description="$t(message)"
+      :title="`${error.title}`"
+      :description="$t(error.detail)"
     />
     <div class="error-page__actions">
       <SwButton
@@ -57,19 +59,8 @@ export default {
   },
   props: {
     error: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    code() {
-      return this.error.statusCode
-    },
-    message() {
-      return getMessageForCode(this.code) || this.error.message
+      type: Array,
+      default: () => [],
     },
   },
 }
diff --git a/packages/default-theme/src/pages/checkout.vue b/packages/default-theme/src/pages/checkout.vue
index b8a43b513..015196ceb 100644
--- a/packages/default-theme/src/pages/checkout.vue
+++ b/packages/default-theme/src/pages/checkout.vue
@@ -118,7 +118,6 @@ import {
   useCart,
   getApplicationContext,
 } from "@shopware-pwa/composables"
-import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers"
 import { computed, ref, watch } from "@vue/composition-api"
 import { handlePayment } from "@shopware-pwa/shopware-6-client"
 import SwRegistrationForm from "@/components/forms/SwRegistrationForm.vue"
@@ -161,16 +160,7 @@ export default {
       }
       await register(registrationFormData.value)
     }
-    // temporary fix for accessing the errors in right format
-    // TODO: https://github.com/vuestorefront/shopware-pwa/issues/1498
-    const registrationFormErrors = computed(() =>
-      getMessagesFromErrorsArray(
-        (Array.isArray(errors.register) &&
-          errors.register.length &&
-          errors.register[0]) ||
-          ([] as any)
-      )
-    )
+    const registrationFormErrors = computed(() => errors.register)
 
     const getRedirectUrl = (handlePaymentResponse: {
       apiAlias: string
diff --git a/packages/default-theme/src/pages/newsletter-subscribe.vue b/packages/default-theme/src/pages/newsletter-subscribe.vue
index 9cb20ce62..0f47210f0 100644
--- a/packages/default-theme/src/pages/newsletter-subscribe.vue
+++ b/packages/default-theme/src/pages/newsletter-subscribe.vue
@@ -76,7 +76,7 @@ export default {
         success.value = true
       } catch (error) {
         // to do sth with that error
-        console.error("[newsletter-subscribe][onMounted]", error)
+        console.error("[newsletter-subscribe][onMounted]", error.messages)
       } finally {
         isLoading.value = false
       }
diff --git a/packages/default-theme/src/pages/reset-password.vue b/packages/default-theme/src/pages/reset-password.vue
index 444c404bb..ccfd39e6d 100644
--- a/packages/default-theme/src/pages/reset-password.vue
+++ b/packages/default-theme/src/pages/reset-password.vue
@@ -69,7 +69,7 @@ export default {
         )
         success.value = true
       } catch (error) {
-        errors.value = [error.message]
+        errors.value = error.messages
       }
     }
 
diff --git a/packages/default-theme/src/pages/search.vue b/packages/default-theme/src/pages/search.vue
index a7001b6a9..168179d09 100644
--- a/packages/default-theme/src/pages/search.vue
+++ b/packages/default-theme/src/pages/search.vue
@@ -35,13 +35,13 @@ export default {
     SwProductListing,
     SwProductListingFilters,
   },
-  asyncData: async ({ params, app, error: errorView, query }) => {
+  asyncData: async ({ app, query }) => {
     const { initSearch } = useListing(app, "productSearchListing")
 
     try {
       await initSearch(query)
     } catch (e) {
-      console.error("[search] Problem with initial search", e)
+      console.error("[search] Problem with initial search", e.messages)
     }
 
     return {}
diff --git a/packages/default-theme/src/pages/wishlist.vue b/packages/default-theme/src/pages/wishlist.vue
index 37134d910..141f9a0a6 100644
--- a/packages/default-theme/src/pages/wishlist.vue
+++ b/packages/default-theme/src/pages/wishlist.vue
@@ -92,7 +92,7 @@ export default {
           products.value = result.elements
         }
       } catch (e) {
-        console.error(e)
+        console.error("[wishlist][loadProductsByItemIds]", e.messages)
       }
       isLoading.value = false
     }
diff --git a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
index 1085874e5..a090c61ec 100644
--- a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
+++ b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
@@ -42,21 +42,7 @@ const guessTheStatusCodeFromTheMessage = (message: string): number => {
  * @param {ShopwareApiError} error
  * @returns {(string|ShopwareError[])} single message if statusCode !== 400, array of native errors otherwise
  */
-const extractApiErrorMessage = (
-  error: ShopwareApiError
-): string | ShopwareError[] => {
-  const statusCode = extractApiErrorStatusCode(error);
-  if (statusCode !== 400) {
-    // Only Bad Request response has possibly more than one error object included.
-    // Hide callstack in case of 500
-
-    const apiError =
-      statusCode === 500
-        ? "Internal server error"
-        : error.response.data?.errors?.[0].detail;
-    return apiError;
-  }
-
+const extractApiErrorMessage = (error: ShopwareApiError): ShopwareError[] => {
   return error.response.data?.errors;
 };
 
@@ -65,7 +51,16 @@ const extractApiErrorMessage = (
  * @param {AxiosError} error
  * @returns {string}
  */
-const extractNotApiErrorMessage = (error: AxiosError): string => error.message;
+const extractNotApiErrorMessage = (error: AxiosError): ShopwareError[] => [
+  {
+    detail: error.message,
+    status: "",
+    code: "",
+    title: "",
+    meta: {},
+    source: {},
+  },
+];
 
 /**
  * Extracts and create the consistent error object
diff --git a/packages/theme-base/dist/pages/_.vue b/packages/theme-base/dist/pages/_.vue
index 0a2e4310e..bba34e264 100644
--- a/packages/theme-base/dist/pages/_.vue
+++ b/packages/theme-base/dist/pages/_.vue
@@ -4,7 +4,11 @@
   </div>
 </template>
 <script>
-import { useCms, useNotifications } from "@shopware-pwa/composables";
+import {
+  useCms,
+  useIntercept,
+  useNotifications,
+} from "@shopware-pwa/composables";
 
 export default {
   name: "DynamicRoute",
@@ -16,6 +20,7 @@ export default {
   asyncData: async ({ params, app, error: errorView, query, redirect }) => {
     const { search, page, error } = useCms(app);
     const { pushError } = useNotifications(app);
+    const { broadcast, INTERCEPTOR_KEYS } = useIntercept(app);
     const searchResult = await search(params.pathMatch, query);
 
     // direct user to the error page (keep http status code - so do not redirect)
@@ -23,8 +28,8 @@ export default {
       if (error.value.statusCode === 404) {
         errorView(error.value);
       } else {
-        // show the error other than 404 in SwNotifications
-        pushError(error.value.message);
+        // broadcast the error other than 404 in SwNotifications
+        broadcast(INTERCEPTOR_KEYS.error, error.value);
       }
     }
 

From 2858312e1c68a0a048d29a045ca6dbf1a9295977 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Tue, 29 Jun 2021 14:00:22 +0200
Subject: [PATCH 03/11] refactor: consistent error displaying

---
 .../composables/src/hooks/useCms/index.ts     |  2 +-
 packages/composables/src/hooks/useUser.ts     | 16 +++--
 .../src/components/SwErrorsList.vue           | 31 ++++++---
 .../default-theme/src/components/SwLogin.vue  | 19 ++----
 .../src/components/SwResetPassword.vue        | 11 ++--
 .../src/components/forms/SwPassword.vue       | 65 ++++++++++---------
 .../src/components/forms/SwPersonalInfo.vue   |  4 +-
 packages/default-theme/src/layouts/error.vue  |  4 +-
 .../src/services/customerService.ts           |  3 -
 packages/theme-base/dist/pages/_.vue          |  4 +-
 10 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/packages/composables/src/hooks/useCms/index.ts b/packages/composables/src/hooks/useCms/index.ts
index d9b033c81..d2cd7a348 100644
--- a/packages/composables/src/hooks/useCms/index.ts
+++ b/packages/composables/src/hooks/useCms/index.ts
@@ -78,7 +78,7 @@ export function useCms(rootContext: ApplicationVueContext): {
       _storePage.value = result;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.messages;
+      error.value = err;
     } finally {
       loading.value = false;
     }
diff --git a/packages/composables/src/hooks/useUser.ts b/packages/composables/src/hooks/useUser.ts
index f5a1eed49..bf697f70f 100644
--- a/packages/composables/src/hooks/useUser.ts
+++ b/packages/composables/src/hooks/useUser.ts
@@ -136,9 +136,15 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
   const errors: UnwrapRef<{
     login: ShopwareError[];
     register: ShopwareError[];
+    resetPassword: ShopwareError[];
+    updatePassword: ShopwareError[];
+    updateEmail: ShopwareError[];
   }> = reactive({
     login: [],
     register: [],
+    resetPassword: [],
+    updatePassword: [],
+    updateEmail: [],
   });
   const orders: Ref<Order[] | null> = ref(null);
   const addresses = computed(() => storeAddresses.value);
@@ -152,6 +158,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
   }: { username?: string; password?: string } = {}): Promise<boolean> => {
     loading.value = true;
     error.value = null;
+    errors.login = [] as any;
     try {
       await apiLogin({ username, password }, apiInstance);
       await refreshUser();
@@ -161,7 +168,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
       return true;
     } catch (e) {
       const err: ClientApiError = e;
-      error.value = err.messages;
+      errors.login = err.messages;
       broadcast(INTERCEPTOR_KEYS.ERROR, {
         methodName: `[${contextName}][login]`,
         inputParams: {},
@@ -358,9 +365,10 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
     updatePasswordData: CustomerUpdatePasswordParam
   ): Promise<boolean> => {
     try {
+      errors.updatePassword = [];
       await apiUpdatePassword(updatePasswordData, apiInstance);
     } catch (e) {
-      error.value = e;
+      errors.updatePassword = e.messages;
       return false;
     }
     return true;
@@ -372,7 +380,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
     try {
       await apiResetPassword(resetPasswordData, apiInstance);
     } catch (e) {
-      error.value = e;
+      errors.resetPassword = e.messages;
       return false;
     }
     return true;
@@ -384,7 +392,7 @@ export const useUser = (rootContext: ApplicationVueContext): IUseUser => {
     try {
       await apiUpdateEmail(updateEmailData, apiInstance);
     } catch (e) {
-      error.value = e;
+      errors.updateEmail = e.messages;
       return false;
     }
     return true;
diff --git a/packages/default-theme/src/components/SwErrorsList.vue b/packages/default-theme/src/components/SwErrorsList.vue
index f7b9e2926..e968ef483 100644
--- a/packages/default-theme/src/components/SwErrorsList.vue
+++ b/packages/default-theme/src/components/SwErrorsList.vue
@@ -1,14 +1,16 @@
 <template>
   <div v-if="Array.isArray(list) && list.length" class="errors-list-component">
-    <SwAlert :message="`${$t('Encountered problems')}:`" type="danger" />
-    <ul class="list">
-      <li v-for="error in list" :key="error.code" class="item">
-        {{
-          isFieldRelatedError(error.code) ? `${error.source.pointer}: ` : ""
-        }}
-        {{ error.detail }}
-      </li>
-    </ul>
+    <div v-if="list.length > 1">
+      <SwAlert :message="`${$t('Encountered problems')}:`" type="danger" />
+      <ul class="list">
+        <li v-for="error in list" :key="error.code" class="item">
+          {{ formatErrorMessage(error) }}
+        </li>
+      </ul>
+    </div>
+    <div class="errors-list-component__single" v-else>
+      <SwAlert :message="formatErrorMessage(list[0])" type="danger" />
+    </div>
   </div>
 </template>
 
@@ -34,8 +36,15 @@ export default {
     // enables to check whether error should also contain the field name
     const isFieldRelatedError = (errorCode) =>
       FIELD_RELATED_ERRORS.includes(errorCode)
+
+    const formatErrorMessage = (error) => `${
+      isFieldRelatedError(error.code) ? `${error.source.pointer}: ` : ""
+    }
+${error.detail}`
+
     return {
       isFieldRelatedError,
+      formatErrorMessage,
     }
   },
 }
@@ -46,6 +55,10 @@ export default {
   color: var(--_c-red-primary);
   font-size: var(--font-size--sm);
 
+  &__single {
+    margin-bottom: var(--spacer-sm);
+  }
+
   .list {
     margin-top: var(--spacer-xs);
     padding-left: var(--spacer-xs);
diff --git a/packages/default-theme/src/components/SwLogin.vue b/packages/default-theme/src/components/SwLogin.vue
index ed57ae79f..73f23f43b 100644
--- a/packages/default-theme/src/components/SwLogin.vue
+++ b/packages/default-theme/src/components/SwLogin.vue
@@ -2,13 +2,7 @@
   <div class="sw-login" @keyup.enter="invokeLogin">
     <SwPluginSlot name="login-form-before" />
     <div class="form sw-login__form">
-      <SfAlert
-        v-if="userError"
-        class="sw-login__alert"
-        type="danger"
-        :message="userError"
-        data-cy="login-alert"
-      />
+      <SwErrorsList :list="loginErrors" />
       <SwInput
         v-model="email"
         name="loginEmail"
@@ -55,15 +49,16 @@ import { useUser, useSessionContext } from "@shopware-pwa/composables"
 import SwPluginSlot from "sw-plugins/SwPluginSlot.vue"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
-import { reactive, toRefs } from "@vue/composition-api"
+import { computed, reactive, toRefs } from "@vue/composition-api"
+import SwErrorsList from "@/components/SwErrorsList.vue"
 
 export default {
   name: "SwLogin",
-  components: { SwButton, SwInput, SfAlert, SwPluginSlot },
+  components: { SwButton, SwInput, SfAlert, SwPluginSlot, SwErrorsList },
   setup(props, { root }) {
-    const { login, loading, error: userError } = useUser(root)
+    const { login, loading, errors } = useUser(root)
     const { refreshSessionContext } = useSessionContext(root)
-
+    const loginErrors = computed(() => errors.login || [])
     const state = reactive({
       email: "",
       password: "",
@@ -84,7 +79,7 @@ export default {
     return {
       clientLogin: login,
       isLoading: loading,
-      userError,
+      loginErrors,
       refreshSessionContext,
       $v,
       ...toRefs(state),
diff --git a/packages/default-theme/src/components/SwResetPassword.vue b/packages/default-theme/src/components/SwResetPassword.vue
index 8f5a6d4bb..416649d8b 100644
--- a/packages/default-theme/src/components/SwResetPassword.vue
+++ b/packages/default-theme/src/components/SwResetPassword.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sw-reset-password" @keyup.enter="invokeResetPassword">
+    <SwErrorsList :list="resetPasswordErrors" />
     <div v-if="!emailSent" class="form sw-reset-password__form">
-      <!-- <h2 class="sw-reset-password__header">Reset password</h2> -->
       <SfAlert
         v-if="userError"
         class="sw-reset-password__alert"
@@ -47,23 +47,24 @@ import { required, email } from "@vuelidate/validators"
 import { useUser } from "@shopware-pwa/composables"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
+import SwErrorsList from "@/components/SwErrorsList.vue"
+import { computed } from "@vue/composition-api"
 
 export default {
   name: "SwResetPassword",
-  components: { SwButton, SwInput, SfAlert, SfHeading },
+  components: { SwButton, SwInput, SfAlert, SfHeading, SwErrorsList },
   data() {
     return {
       email: "",
-      error: "",
       emailSent: false,
     }
   },
   setup(props, { root }) {
-    const { resetPassword, error: userError } = useUser(root)
+    const { resetPassword, errors } = useUser(root)
     return {
       resetPassword,
-      userError,
       $v: useVuelidate(),
+      resetPasswordErrors: computed(() => errors.resetPassword || []),
     }
   },
   validations: {
diff --git a/packages/default-theme/src/components/forms/SwPassword.vue b/packages/default-theme/src/components/forms/SwPassword.vue
index d9ad3c613..7f0ef3929 100644
--- a/packages/default-theme/src/components/forms/SwPassword.vue
+++ b/packages/default-theme/src/components/forms/SwPassword.vue
@@ -32,7 +32,9 @@
               <SwInput
                 v-model="newPassword"
                 :valid="!$v.newPassword.$error"
-                :error-message="$t('This field is required')"
+                :error-message="
+                  $t('This field is required and should be at leas 8 long')
+                "
                 type="password"
                 name="newPassword"
                 :label="$t('New Password')"
@@ -74,34 +76,49 @@ import { useUser } from "@shopware-pwa/composables"
 import SwButton from "@/components/atoms/SwButton.vue"
 import SwInput from "@/components/atoms/SwInput.vue"
 import SwErrorsList from "@/components/SwErrorsList.vue"
+import { toRefs, reactive } from "@vue/composition-api"
 
 export default {
   name: "SwPassword",
   components: { SwInput, SwButton, SwErrorsList },
   props: {},
   setup(props, { root }) {
-    const {
-      user,
-      error: userError,
-      updatePassword,
-      refreshUser,
-    } = useUser(root)
-    const userErrorMessages = computed(() => userError.value)
+    const { user, errors, updatePassword, refreshUser } = useUser(root)
+    const userErrorMessages = computed(() => errors.updatePassword || [])
+
+    const state = reactive({
+      password: "",
+      newPassword: "",
+      newPasswordConfirm: "",
+      email: user.value.email,
+    })
+
+    const refs = toRefs(state)
+
+    const rules = {
+      password: {
+        required,
+        minLenght: minLength(8),
+      },
+      newPassword: {
+        required,
+        minLength: minLength(8),
+      },
+      newPasswordConfirm: {
+        required,
+        sameAsNewPassword: sameAs(refs.newPassword),
+      },
+    }
+
+    const $v = useVuelidate(rules, state)
 
     return {
       refreshUser,
       updatePassword,
       user,
       userErrorMessages,
-      $v: useVuelidate(),
-    }
-  },
-  data() {
-    return {
-      password: "",
-      newPassword: "",
-      newPasswordConfirm: "",
-      email: this.user && this.user.email,
+      $v,
+      ...refs,
     }
   },
   methods: {
@@ -114,20 +131,6 @@ export default {
       await this.refreshUser()
     },
   },
-  validations: {
-    password: {
-      required,
-      minLenght: minLength(8),
-    },
-    newPassword: {
-      required,
-      minLength: minLength(8),
-    },
-    newPasswordConfirm: {
-      required,
-      sameAsNewPassword: sameAs("newPassword"),
-    },
-  },
 }
 </script>
 
diff --git a/packages/default-theme/src/components/forms/SwPersonalInfo.vue b/packages/default-theme/src/components/forms/SwPersonalInfo.vue
index 4bf8ee300..54809c02b 100644
--- a/packages/default-theme/src/components/forms/SwPersonalInfo.vue
+++ b/packages/default-theme/src/components/forms/SwPersonalInfo.vue
@@ -115,7 +115,7 @@ export default {
   setup(props, { root }) {
     const {
       user,
-      error: userError,
+      errors: userError,
       updatePersonalInfo,
       refreshUser,
       updateEmail,
@@ -150,7 +150,7 @@ export default {
   },
   computed: {
     getErrorMessage() {
-      return this.userError
+      return this.userError.updateEmail
     },
     isEmailChanging() {
       return this.email !== (this.user && this.user.email)
diff --git a/packages/default-theme/src/layouts/error.vue b/packages/default-theme/src/layouts/error.vue
index 115666b90..fb0df998f 100644
--- a/packages/default-theme/src/layouts/error.vue
+++ b/packages/default-theme/src/layouts/error.vue
@@ -59,8 +59,8 @@ export default {
   },
   props: {
     error: {
-      type: Array,
-      default: () => [],
+      type: Object,
+      default: () => ({}),
     },
   },
 }
diff --git a/packages/shopware-6-client/src/services/customerService.ts b/packages/shopware-6-client/src/services/customerService.ts
index d459c31cb..fa86e6003 100644
--- a/packages/shopware-6-client/src/services/customerService.ts
+++ b/packages/shopware-6-client/src/services/customerService.ts
@@ -56,9 +56,6 @@ export async function login(
   { username, password }: { username?: string; password?: string } = {},
   contextInstance: ShopwareApiInstance = defaultInstance
 ): Promise<ContextTokenResponse> {
-  if (!username || !password) {
-    throw new Error("Provide username and password for login");
-  }
   const resp = await contextInstance.invoke.post(getCustomerLoginEndpoint(), {
     username,
     password,
diff --git a/packages/theme-base/dist/pages/_.vue b/packages/theme-base/dist/pages/_.vue
index bba34e264..30657e4e9 100644
--- a/packages/theme-base/dist/pages/_.vue
+++ b/packages/theme-base/dist/pages/_.vue
@@ -8,6 +8,7 @@ import {
   useCms,
   useIntercept,
   useNotifications,
+  INTERCEPTOR_KEYS,
 } from "@shopware-pwa/composables";
 
 export default {
@@ -20,7 +21,8 @@ export default {
   asyncData: async ({ params, app, error: errorView, query, redirect }) => {
     const { search, page, error } = useCms(app);
     const { pushError } = useNotifications(app);
-    const { broadcast, INTERCEPTOR_KEYS } = useIntercept(app);
+    const { broadcast } = useIntercept(app);
+
     const searchResult = await search(params.pathMatch, query);
 
     // direct user to the error page (keep http status code - so do not redirect)

From 8cfa126c4d049920ddba92d592acc1954834aecd Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Wed, 30 Jun 2021 22:31:14 +0200
Subject: [PATCH 04/11] chore: tests

---
 api/composables.api.md                        |   3 +
 .../api/composables.iuseuser.errors.md        |   3 +
 .../resources/api/composables.iuseuser.md     |   2 +-
 .../composables/__tests__/useCart.spec.ts     |   4 +-
 .../__tests__/useCountries.spec.ts            |   2 +-
 .../__tests__/useNavigation.spec.ts           |   6 +-
 .../composables/__tests__/useProduct.spec.ts  |   4 +-
 .../__tests__/useSalutations.spec.ts          |   8 +-
 .../composables/__tests__/useUser.spec.ts     | 119 ++++++++++--------
 packages/composables/src/hooks/useUser.ts     |   3 +
 .../__tests__/apiInterceptors.spec.ts         |  44 +++++--
 .../services/CustomerService/login.spec.ts    |  20 +--
 .../src/interceptors/errorInterceptor.ts      |   2 +-
 13 files changed, 138 insertions(+), 82 deletions(-)

diff --git a/api/composables.api.md b/api/composables.api.md
index 8e20b9f4c..8fef6dba0 100644
--- a/api/composables.api.md
+++ b/api/composables.api.md
@@ -382,6 +382,9 @@ export interface IUseUser {
     errors: UnwrapRef<{
         login: ShopwareError[];
         register: ShopwareError[];
+        resetPassword: ShopwareError[];
+        updatePassword: ShopwareError[];
+        updateEmail: ShopwareError[];
     }>;
     // (undocumented)
     getOrderDetails: (orderId: string) => Promise<Order | undefined>;
diff --git a/docs/landing/resources/api/composables.iuseuser.errors.md b/docs/landing/resources/api/composables.iuseuser.errors.md
index 6d425cd03..aaf980278 100644
--- a/docs/landing/resources/api/composables.iuseuser.errors.md
+++ b/docs/landing/resources/api/composables.iuseuser.errors.md
@@ -13,5 +13,8 @@
 errors: UnwrapRef<{
         login: ShopwareError[];
         register: ShopwareError[];
+        resetPassword: ShopwareError[];
+        updatePassword: ShopwareError[];
+        updateEmail: ShopwareError[];
     }>;
 ```
diff --git a/docs/landing/resources/api/composables.iuseuser.md b/docs/landing/resources/api/composables.iuseuser.md
index 0fa9233ea..7e691bfb0 100644
--- a/docs/landing/resources/api/composables.iuseuser.md
+++ b/docs/landing/resources/api/composables.iuseuser.md
@@ -24,7 +24,7 @@ export interface IUseUser
 |  [country](./composables.iuseuser.country.md) | Ref&lt;Country \| null&gt; | <b><i>(BETA)</i></b> |
 |  [deleteAddress](./composables.iuseuser.deleteaddress.md) | (addressId: string) =&gt; Promise&lt;boolean&gt; | <b><i>(BETA)</i></b> |
 |  [error](./composables.iuseuser.error.md) | Ref&lt;any&gt; | <b><i>(BETA)</i></b> |
-|  [errors](./composables.iuseuser.errors.md) | UnwrapRef&lt;{ login: ShopwareError\[\]; register: ShopwareError\[\]; }&gt; | <b><i>(BETA)</i></b> |
+|  [errors](./composables.iuseuser.errors.md) | UnwrapRef&lt;{ login: ShopwareError\[\]; register: ShopwareError\[\]; resetPassword: ShopwareError\[\]; updatePassword: ShopwareError\[\]; updateEmail: ShopwareError\[\]; }&gt; | <b><i>(BETA)</i></b> |
 |  [getOrderDetails](./composables.iuseuser.getorderdetails.md) | (orderId: string) =&gt; Promise&lt;Order \| undefined&gt; | <b><i>(BETA)</i></b> |
 |  [isCustomerSession](./composables.iuseuser.iscustomersession.md) | ComputedRef&lt;boolean&gt; | <b><i>(BETA)</i></b> |
 |  [isGuestSession](./composables.iuseuser.isguestsession.md) | ComputedRef&lt;boolean&gt; | <b><i>(BETA)</i></b> |
diff --git a/packages/composables/__tests__/useCart.spec.ts b/packages/composables/__tests__/useCart.spec.ts
index cf59e6c56..e3a095414 100644
--- a/packages/composables/__tests__/useCart.spec.ts
+++ b/packages/composables/__tests__/useCart.spec.ts
@@ -259,11 +259,11 @@ describe("Composables - useCart", () => {
       it("should show an error when cart is not refreshed", async () => {
         const { count, refreshCart, error } = useCart(rootContextMock);
         mockedShopwareClient.getCart.mockRejectedValueOnce({
-          message: "Some problem",
+          messages: [{ detail: "Some problem" }],
         });
         await refreshCart();
         expect(count.value).toEqual(0);
-        expect(error.value).toEqual("Some problem");
+        expect(error.value).toEqual([{ detail: "Some problem" }]);
       });
     });
 
diff --git a/packages/composables/__tests__/useCountries.spec.ts b/packages/composables/__tests__/useCountries.spec.ts
index 4afa81742..035f2b69d 100644
--- a/packages/composables/__tests__/useCountries.spec.ts
+++ b/packages/composables/__tests__/useCountries.spec.ts
@@ -84,7 +84,7 @@ describe("Composables - useCountries", () => {
     describe("fetchCoutries", () => {
       it("should assing error to error message if getAvailableCountries throws one", async () => {
         mockedApiClient.getAvailableCountries.mockRejectedValueOnce({
-          message: "Couldn't fetch available countries.",
+          messages: "Couldn't fetch available countries.",
         });
         const { fetchCountries, error } = useCountries(rootContextMock);
         await fetchCountries();
diff --git a/packages/composables/__tests__/useNavigation.spec.ts b/packages/composables/__tests__/useNavigation.spec.ts
index b541f09e9..49bffe34e 100644
--- a/packages/composables/__tests__/useNavigation.spec.ts
+++ b/packages/composables/__tests__/useNavigation.spec.ts
@@ -104,14 +104,16 @@ describe("Composables - useNavigation", () => {
       });
 
       it("should assign empty array for navigation if the response throws an error", async () => {
-        mockedGetPage.getStoreNavigation.mockRejectedValueOnce("some error");
+        mockedGetPage.getStoreNavigation.mockRejectedValueOnce({
+          messages: [{ detail: "some error" }],
+        });
         const { navigationElements, loadNavigationElements } =
           useNavigation(rootContextMock);
         await loadNavigationElements({ depth: 2 });
         expect(navigationElements.value).toEqual([]);
         expect(consoleErrorSpy).toBeCalledWith(
           "[useNavigation][loadNavigationElements]",
-          "some error"
+          [{ detail: "some error" }]
         );
       });
     });
diff --git a/packages/composables/__tests__/useProduct.spec.ts b/packages/composables/__tests__/useProduct.spec.ts
index b8b820356..4f97d5cc5 100644
--- a/packages/composables/__tests__/useProduct.spec.ts
+++ b/packages/composables/__tests__/useProduct.spec.ts
@@ -128,12 +128,12 @@ describe("Composables - useProduct", () => {
     it("should have failed on bad url settings", async () => {
       const { search, product, error } = useProduct(rootContextMock);
       mockedAxios.getProduct.mockRejectedValueOnce({
-        message: "Something went wrong...",
+        messages: [{ detail: "Something went wrong..." }],
       } as ClientApiError);
       expect(product.value).toBeUndefined();
       await search("");
       expect(product.value).toBeUndefined();
-      expect(error.value).toEqual("Something went wrong...");
+      expect(error.value).toEqual([{ detail: "Something went wrong..." }]);
     });
   });
 });
diff --git a/packages/composables/__tests__/useSalutations.spec.ts b/packages/composables/__tests__/useSalutations.spec.ts
index 6afad26fb..b3d49717b 100644
--- a/packages/composables/__tests__/useSalutations.spec.ts
+++ b/packages/composables/__tests__/useSalutations.spec.ts
@@ -86,13 +86,13 @@ describe("Composables - useSalutations", () => {
     describe("fetchSalutations", () => {
       it("should assing error to error message if getAvailableSalutations throws one", async () => {
         mockedApiClient.getAvailableSalutations.mockRejectedValueOnce({
-          message: "Couldn't fetch available salutations.",
+          messages: [{ detail: "Couldn't fetch available salutations." }],
         });
         const { fetchSalutations, error } = useSalutations(rootContextMock);
         await fetchSalutations();
-        expect(error.value.toString()).toBe(
-          "Couldn't fetch available salutations."
-        );
+        expect(error.value).toStrictEqual([
+          { detail: "Couldn't fetch available salutations." },
+        ]);
       });
     });
     describe("onMounted", () => {
diff --git a/packages/composables/__tests__/useUser.spec.ts b/packages/composables/__tests__/useUser.spec.ts
index 2f6d07f64..ce5045e48 100644
--- a/packages/composables/__tests__/useUser.spec.ts
+++ b/packages/composables/__tests__/useUser.spec.ts
@@ -173,28 +173,30 @@ describe("Composables - useUser", () => {
     });
     describe("login", () => {
       it("should not login user without credentials", async () => {
-        mockedApiClient.login.mockRejectedValueOnce(
-          new Error("Provide username and password for login")
-        );
-        const { isLoggedIn, error, login } = useUser(rootContextMock);
+        mockedApiClient.login.mockRejectedValueOnce({
+          messages: [{ detail: "Provide username and password for login" }],
+        } as any);
+        const { isLoggedIn, errors, login } = useUser(rootContextMock);
         const result = await login(undefined as any);
         expect(result).toEqual(false);
         expect(isLoggedIn.value).toBeFalsy();
-        expect(error.value).toEqual("Provide username and password for login");
+        expect(errors.login).toEqual([
+          { detail: "Provide username and password for login" },
+        ]);
       });
 
       it("should not login user with bad credentials", async () => {
-        mockedApiClient.login.mockRejectedValueOnce(
-          new Error("Bad user credentials")
-        );
-        const { isLoggedIn, error, login } = useUser(rootContextMock);
+        mockedApiClient.login.mockRejectedValueOnce({
+          messages: [{ detail: "Bad user credentials" }],
+        } as any);
+        const { isLoggedIn, errors, login } = useUser(rootContextMock);
         const result = await login({
           username: "qwe@qwe.com",
           password: "fakePassword",
         });
         expect(result).toEqual(false);
         expect(isLoggedIn.value).toBeFalsy();
-        expect(error.value).toEqual("Bad user credentials");
+        expect(errors.login).toEqual([{ detail: "Bad user credentials" }]);
       });
 
       it("error message should be appriopriate to the 401 HTTP status code", async () => {
@@ -203,13 +205,13 @@ describe("Composables - useUser", () => {
             status: 401,
           },
         });
-        const { error, login } = useUser(rootContextMock);
+        const { errors, login } = useUser(rootContextMock);
         const result = await login({
           username: "qwe@qwe.com",
           password: "fakePassword",
         });
         expect(result).toEqual(false);
-        expect(error.value).toEqual(undefined);
+        expect(errors.login).toEqual(undefined);
       });
 
       it("should login user successfully", async () => {
@@ -247,15 +249,19 @@ describe("Composables - useUser", () => {
 
     describe("register", () => {
       it("should not invoke user register without any data", async () => {
-        mockedApiClient.register.mockRejectedValueOnce(
-          new Error("Provide requested information to create user account")
-        );
+        mockedApiClient.register.mockRejectedValueOnce({
+          messages: [
+            { detail: "Provide requested information to create user account" },
+          ],
+        } as any);
         const { isLoggedIn, errors, register } = useUser(rootContextMock);
         const result = await register(undefined as any);
         expect(result).toEqual(false);
         expect(isLoggedIn.value).toBeFalsy();
         expect(errors.register).toEqual([
-          "Provide requested information to create user account",
+          {
+            detail: "Provide requested information to create user account",
+          },
         ]);
       });
       it("should register user successfully", async () => {
@@ -321,9 +327,9 @@ describe("Composables - useUser", () => {
 
       it("should show an error when user is not logged out", async () => {
         stateUser.value = { id: "111" };
-        mockedApiClient.logout.mockRejectedValueOnce(
-          new Error("Something wrong with logout")
-        );
+        mockedApiClient.logout.mockRejectedValueOnce({
+          messages: [{ detail: "Something wrong with logout" }],
+        });
         mockedApiClient.getCustomer.mockResolvedValueOnce({
           id: "111",
         } as any);
@@ -331,7 +337,9 @@ describe("Composables - useUser", () => {
         expect(isLoggedIn.value).toBeTruthy();
         await logout();
         expect(isLoggedIn.value).toBeTruthy();
-        expect(error.value).toEqual("Something wrong with logout");
+        expect(error.value).toEqual([
+          { detail: "Something wrong with logout" },
+        ]);
       });
     });
 
@@ -405,13 +413,15 @@ describe("Composables - useUser", () => {
       });
       it("should not add empty address", async () => {
         mockedApiClient.createCustomerAddress.mockRejectedValueOnce({
-          message: "There is no address provided",
+          messages: [{ detail: "There is no address provided" }],
         } as ClientApiError);
         const { addAddress, error } = useUser(rootContextMock);
         const response = await addAddress(null as any);
         expect(mockedApiClient.createCustomerAddress).toBeCalledTimes(1);
         expect(response).toBeUndefined();
-        expect(error.value).toEqual("There is no address provided");
+        expect(error.value).toEqual([
+          { detail: "There is no address provided" },
+        ]);
       });
     });
 
@@ -467,12 +477,14 @@ describe("Composables - useUser", () => {
 
       it("should invoke client getCustomerAddresses method and assign error message if client request is rejected", async () => {
         mockedApiClient.getCustomerAddresses.mockRejectedValueOnce({
-          message: "Something went wrong...",
+          messages: [{ detail: "Something went wrong..." }],
         });
         const { loadAddresses, error } = useUser(rootContextMock);
         await loadAddresses();
         expect(mockedApiClient.getCustomerAddresses).toBeCalledTimes(1);
-        expect(error.value).toBe("Something went wrong...");
+        expect(error.value).toStrictEqual([
+          { detail: "Something went wrong..." },
+        ]);
       });
     });
 
@@ -499,13 +511,15 @@ describe("Composables - useUser", () => {
 
       it("should invoke client getUserCountry method and assign error message if client request is rejected", async () => {
         mockedApiClient.getUserCountry.mockRejectedValueOnce({
-          message: "Something went wrong...",
+          messages: [{ detail: "Something went wrong..." }],
         });
         const { loadCountry, error } = useUser(rootContextMock);
         const salutationId = "123qwe";
         await loadCountry(salutationId);
         expect(mockedApiClient.getUserCountry).toBeCalledTimes(1);
-        expect(error.value).toBe("Something went wrong...");
+        expect(error.value).toStrictEqual([
+          { detail: "Something went wrong..." },
+        ]);
       });
     });
 
@@ -532,13 +546,15 @@ describe("Composables - useUser", () => {
 
       it("should invoke client getUserSalutation method and assign error message if client request is rejected", async () => {
         mockedApiClient.getUserSalutation.mockRejectedValueOnce({
-          message: "Something went wrong...",
+          messages: [{ detail: "Something went wrong..." }],
         });
         const { loadSalutation, error } = useUser(rootContextMock);
         const userId = "123qwe";
         await loadSalutation(userId);
         expect(mockedApiClient.getUserSalutation).toBeCalledTimes(1);
-        expect(error.value).toBe("Something went wrong...");
+        expect(error.value).toStrictEqual([
+          { detail: "Something went wrong..." },
+        ]);
       });
     });
 
@@ -591,7 +607,7 @@ describe("Composables - useUser", () => {
       it("should return false and set the error.value on api-client rejection", async () => {
         mockedApiClient.setDefaultCustomerShippingAddress.mockRejectedValueOnce(
           {
-            message: "Error occurred",
+            messages: [{ detail: "Error occured" }],
           }
         );
         const { markAddressAsDefault, error } = useUser(rootContextMock);
@@ -604,7 +620,7 @@ describe("Composables - useUser", () => {
         ).toBeCalledTimes(1);
 
         expect(response).toBe(false);
-        expect(error.value).toBe("Error occurred");
+        expect(error.value).toStrictEqual([{ detail: "Error occured" }]);
       });
     });
     describe("updatePersonalInfo", () => {
@@ -654,10 +670,10 @@ describe("Composables - useUser", () => {
       expect(response).toBeTruthy();
     });
     it("should return false and set the error.value on api-client on updatePassword rejection", async () => {
-      mockedApiClient.updatePassword.mockImplementationOnce(async () =>
-        Promise.reject("Password must be at least 8 characters long")
-      );
-      const { updatePassword, error } = useUser(rootContextMock);
+      mockedApiClient.updatePassword.mockRejectedValueOnce({
+        messages: [{ detail: "Password must be at least 8 characters long" }],
+      });
+      const { updatePassword, errors } = useUser(rootContextMock);
       const response = await updatePassword({
         password: "qweqweqwe",
         newPassword: "qwe",
@@ -665,9 +681,9 @@ describe("Composables - useUser", () => {
       });
       expect(mockedApiClient.updatePassword).toBeCalledTimes(1);
       expect(response).toBeFalsy();
-      expect(error.value).toEqual(
-        "Password must be at least 8 characters long"
-      );
+      expect(errors.updatePassword).toEqual([
+        { detail: "Password must be at least 8 characters long" },
+      ]);
     });
   });
   describe("resetPassword", () => {
@@ -683,16 +699,18 @@ describe("Composables - useUser", () => {
       expect(response).toBeTruthy();
     });
     it("should return false and set the error.value on api-client on resetPassword rejection", async () => {
-      mockedApiClient.resetPassword.mockImplementationOnce(async () =>
-        Promise.reject("Email does not fit to any in Sales Channel")
-      );
-      const { resetPassword, error } = useUser(rootContextMock);
+      mockedApiClient.resetPassword.mockRejectedValueOnce({
+        messages: [{ detail: "Email does not fit to any in Sales Channel" }],
+      });
+      const { resetPassword, errors } = useUser(rootContextMock);
       const response = await resetPassword({
         email: "qweqwe@qwe.com",
       });
       expect(mockedApiClient.resetPassword).toBeCalledTimes(1);
       expect(response).toBeFalsy();
-      expect(error.value).toEqual("Email does not fit to any in Sales Channel");
+      expect(errors.resetPassword).toEqual([
+        { detail: "Email does not fit to any in Sales Channel" },
+      ]);
     });
   });
   describe("updateEmail", () => {
@@ -710,10 +728,13 @@ describe("Composables - useUser", () => {
       expect(response).toBeTruthy();
     });
     it("should return false and set the error.value on api-client on updatePassword rejection", async () => {
-      mockedApiClient.updateEmail.mockImplementationOnce(async () =>
-        Promise.reject("Email confirmation does not match to the first one")
-      );
-      const { updateEmail, error } = useUser(rootContextMock);
+      mockedApiClient.updateEmail.mockRejectedValueOnce({
+        messages: [
+          { detail: "Email confirmation does not match to the first one" },
+        ],
+      });
+
+      const { updateEmail, errors } = useUser(rootContextMock);
       const response = await updateEmail({
         password: "qweqweqwe",
         email: "qweqwe@qwe.com",
@@ -721,9 +742,9 @@ describe("Composables - useUser", () => {
       });
       expect(mockedApiClient.updateEmail).toBeCalledTimes(1);
       expect(response).toBeFalsy();
-      expect(error.value).toEqual(
-        "Email confirmation does not match to the first one"
-      );
+      expect(errors.updateEmail).toEqual([
+        { detail: "Email confirmation does not match to the first one" },
+      ]);
     });
   });
 });
diff --git a/packages/composables/src/hooks/useUser.ts b/packages/composables/src/hooks/useUser.ts
index bf697f70f..35fcce688 100644
--- a/packages/composables/src/hooks/useUser.ts
+++ b/packages/composables/src/hooks/useUser.ts
@@ -68,6 +68,9 @@ export interface IUseUser {
   errors: UnwrapRef<{
     login: ShopwareError[];
     register: ShopwareError[];
+    resetPassword: ShopwareError[];
+    updatePassword: ShopwareError[];
+    updateEmail: ShopwareError[];
   }>;
   isLoggedIn: ComputedRef<boolean>;
   isCustomerSession: ComputedRef<boolean>;
diff --git a/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts b/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
index 5d320b376..76fb3315c 100644
--- a/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
+++ b/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
@@ -51,7 +51,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(500);
-        expect(e.message).toEqual("Internal server error");
+        expect(e.messages).toEqual([]);
       }
     });
     it("should throw an error with no message if errors array is null", async () => {
@@ -63,7 +63,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(404);
-        expect(e.message).toBe(undefined);
+        expect(e.messages).toStrictEqual([]);
       }
     });
     it("should have error with no message when the error has no detail property", async () => {
@@ -75,7 +75,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(404);
-        expect(e.message).toBe(undefined);
+        expect(e.messages).toStrictEqual([]);
       }
     });
 
@@ -106,7 +106,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(404);
-        expect(e.message).toBe("Resource not found");
+        expect(e.messages).toStrictEqual([{ detail: "Resource not found" }]);
       }
     });
     it("should return object with error message taken from array's first element", async () => {
@@ -126,7 +126,10 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(403);
-        expect(e.message).toBe("Customer is not logged in.");
+        expect(e.messages).toStrictEqual([
+          { detail: "Customer is not logged in." },
+          { detail: "" },
+        ]);
       }
     });
     it("should return origin errors array in case of 400", async () => {
@@ -146,7 +149,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(400);
-        expect(e.message).toStrictEqual([
+        expect(e.messages).toStrictEqual([
           { detail: "Param X is required." },
           { detail: "Param Y should not be blank." },
         ]);
@@ -159,7 +162,7 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(400);
-        expect(e.message).toBe(undefined);
+        expect(e.messages).toStrictEqual([]);
       }
     });
     it("should return general message in case of 500", async () => {
@@ -179,7 +182,10 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(500);
-        expect(e.message).toBe("Internal server error");
+        expect(e.messages).toStrictEqual([
+          { detail: "Param X is required." },
+          { detail: "Param Y should not be blank." },
+        ]);
       }
     });
     it("should recognize the timeout rejection in axios specific case (timeout in config reached)", async () => {
@@ -189,7 +195,16 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(408);
-        expect(e.message).toBe("timeout of 5ms");
+        expect(e.messages).toStrictEqual([
+          {
+            code: "",
+            detail: "timeout of 5ms",
+            meta: {},
+            source: {},
+            status: "",
+            title: "",
+          },
+        ]);
       }
     });
     it("should recognize the Network error rejection in axios specific case (there is no internet connection - offline mode is on)", async () => {
@@ -199,7 +214,16 @@ describe("apiInterceptors", () => {
         expect("didn't throw an error").toEqual("should throw an error");
       } catch (e) {
         expect(e.statusCode).toEqual(0);
-        expect(e.message).toBe("Network Error");
+        expect(e.messages).toStrictEqual([
+          {
+            code: "",
+            detail: "Network Error",
+            meta: {},
+            source: {},
+            status: "",
+            title: "",
+          },
+        ]);
       }
     });
   });
diff --git a/packages/shopware-6-client/__tests__/services/CustomerService/login.spec.ts b/packages/shopware-6-client/__tests__/services/CustomerService/login.spec.ts
index f39f8eb23..60f13f8e9 100644
--- a/packages/shopware-6-client/__tests__/services/CustomerService/login.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CustomerService/login.spec.ts
@@ -21,6 +21,16 @@ describe("CustomerService - login", () => {
       post: mockedPost,
     } as any;
   });
+  it("should invoke a POST request with given parameters", async () => {
+    mockedPost.mockResolvedValueOnce({ data: {} } as any);
+
+    await login(undefined);
+    expect(mockedPost).toBeCalledTimes(1);
+    expect(mockedPost).toBeCalledWith(getCustomerLoginEndpoint(), {
+      username: undefined,
+      password: undefined,
+    });
+  });
   it("should return context token in new format if old does not exist", async () => {
     mockedPost.mockResolvedValueOnce({
       data: { contextToken: "RmzTExFStSBW5GhPmQNicSK6bhUQhqXi" },
@@ -71,14 +81,4 @@ describe("CustomerService - login", () => {
       password: "wrong-password-123456",
     });
   });
-
-  it("should throw error on no arguments", async () => {
-    mockedPost.mockRejectedValue(new Error());
-
-    await expect(login()).rejects.toThrowError(
-      "Provide username and password for login"
-    );
-
-    expect(mockedPost).not.toBeCalled();
-  });
 });
diff --git a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
index a090c61ec..c6c80061c 100644
--- a/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
+++ b/packages/shopware-6-client/src/interceptors/errorInterceptor.ts
@@ -43,7 +43,7 @@ const guessTheStatusCodeFromTheMessage = (message: string): number => {
  * @returns {(string|ShopwareError[])} single message if statusCode !== 400, array of native errors otherwise
  */
 const extractApiErrorMessage = (error: ShopwareApiError): ShopwareError[] => {
-  return error.response.data?.errors;
+  return error.response.data?.errors || [];
 };
 
 /**

From 9d229a40d61853aef08d404f9096d180005e2321 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Wed, 30 Jun 2021 22:37:36 +0200
Subject: [PATCH 05/11] chore: remove faker deprecated warnings

---
 .../__tests__/apiInterceptors.spec.ts              |  6 +++---
 .../services/CartService/addProductToCart.spec.ts  | 10 +++++-----
 .../services/CartService/addPromotionCode.spec.ts  |  6 +++---
 .../CartService/changeCartItemQuantity.spec.ts     |  8 ++++----
 .../services/CartService/clearCart.spec.ts         |  4 ++--
 .../__tests__/services/CartService/getCart.spec.ts | 14 +++++++-------
 .../services/CartService/removeCartItem.spec.ts    |  6 +++---
 .../CustomerService/createCustomerAddress.spec.ts  |  6 +++---
 .../services/CustomerService/register.spec.ts      |  8 ++++----
 .../CustomerService/updateCustomerAddress.spec.ts  |  6 +++---
 .../services/CustomerService/updateProfile.spec.ts |  4 ++--
 .../shopware-6-client/__tests__/settings.spec.ts   |  4 ++--
 12 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts b/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
index 76fb3315c..59556d571 100644
--- a/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
+++ b/packages/shopware-6-client/__tests__/apiInterceptors.spec.ts
@@ -2,7 +2,7 @@ import {
   createResponseInterceptor,
   errorInterceptor,
 } from "../src/interceptors";
-import { random } from "faker";
+import { datatype } from "faker";
 
 describe("apiInterceptors", () => {
   beforeEach(() => {
@@ -10,7 +10,7 @@ describe("apiInterceptors", () => {
   });
   describe("createResponseInterceptor", () => {
     it("should update contextToken after any request", async () => {
-      const contextToken = random.uuid();
+      const contextToken = datatype.uuid();
       const updateMethod = jest.fn();
       const responseInterceptor = createResponseInterceptor(updateMethod);
       responseInterceptor({
@@ -24,7 +24,7 @@ describe("apiInterceptors", () => {
     });
 
     it("should get contextToken from response, not header, if there is one", () => {
-      const contextToken = random.uuid();
+      const contextToken = datatype.uuid();
       const updateMethod = jest.fn();
       const responseInterceptor = createResponseInterceptor(updateMethod);
       responseInterceptor({
diff --git a/packages/shopware-6-client/__tests__/services/CartService/addProductToCart.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/addProductToCart.spec.ts
index b3b7eb1b5..b65fa8553 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/addProductToCart.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/addProductToCart.spec.ts
@@ -1,6 +1,6 @@
 import { addProductToCart } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
-import { random, commerce } from "faker";
+import { datatype, commerce } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -20,14 +20,14 @@ describe("CartService - addProductToCart", () => {
     mockedPost.mockResolvedValueOnce({
       data: {
         name: commerce.productName(),
-        token: random.uuid(),
+        token: datatype.uuid(),
         lineItems: [
           {
-            id: random.uuid(),
+            id: datatype.uuid(),
             label: commerce.productName(),
             quantity: 5,
             payload: {
-              productNumber: random.uuid(),
+              productNumber: datatype.uuid(),
             },
           },
           {
@@ -35,7 +35,7 @@ describe("CartService - addProductToCart", () => {
             label: commerce.productName(),
             quantity: 5,
             payload: {
-              productNumber: random.uuid(),
+              productNumber: datatype.uuid(),
             },
           },
         ],
diff --git a/packages/shopware-6-client/__tests__/services/CartService/addPromotionCode.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/addPromotionCode.spec.ts
index 3096863c5..92241d577 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/addPromotionCode.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/addPromotionCode.spec.ts
@@ -1,6 +1,6 @@
 import { addPromotionCode } from "../../../src";
 import { defaultInstance } from "../../../src/apiService";
-import { random } from "faker";
+import { datatype } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -19,8 +19,8 @@ describe("CartService - addPromotionCode", () => {
   it("should call valid endpoint and return a cart", async () => {
     mockedPost.mockResolvedValueOnce({
       data: {
-        name: random.uuid(),
-        token: random.uuid(),
+        name: datatype.uuid(),
+        token: datatype.uuid(),
         price: {
           netPrice: 150,
         },
diff --git a/packages/shopware-6-client/__tests__/services/CartService/changeCartItemQuantity.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/changeCartItemQuantity.spec.ts
index 20d826857..fe52d54eb 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/changeCartItemQuantity.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/changeCartItemQuantity.spec.ts
@@ -1,6 +1,6 @@
 import { changeCartItemQuantity } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
-import { random, commerce } from "faker";
+import { datatype, commerce } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -19,15 +19,15 @@ describe("CartService - changeCartItemQuantity", () => {
   it("should call valid endpoint and return cart with no items", async () => {
     mockedPatch.mockResolvedValueOnce({
       data: {
-        name: random.uuid(),
-        token: random.uuid(),
+        name: datatype.uuid(),
+        token: datatype.uuid(),
         lineItems: [
           {
             id: "geawq90a5dab4206843d0vc3sa8wefdf",
             label: commerce.productName(),
             quantity: 3,
             payload: {
-              productNumber: random.uuid,
+              productNumber: datatype.uuid,
             },
           },
         ],
diff --git a/packages/shopware-6-client/__tests__/services/CartService/clearCart.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/clearCart.spec.ts
index 58e37c5f2..838ed116d 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/clearCart.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/clearCart.spec.ts
@@ -1,6 +1,6 @@
 import { clearCart } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
-import { random } from "faker";
+import { datatype } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -8,7 +8,7 @@ const mockedApiInstance = defaultInstance as jest.Mocked<
 >;
 
 describe("CartService - clearCart", () => {
-  let contextToken = random.uuid();
+  let contextToken = datatype.uuid();
 
   const mockedPost = jest.fn();
   beforeEach(() => {
diff --git a/packages/shopware-6-client/__tests__/services/CartService/getCart.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/getCart.spec.ts
index c1d8f63ed..cd7d5497d 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/getCart.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/getCart.spec.ts
@@ -1,6 +1,6 @@
 import { getCart } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
-import { random, commerce } from "faker";
+import { datatype, commerce } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -19,23 +19,23 @@ describe("CartService - getCart", () => {
     mockedGet.mockResolvedValueOnce({
       data: {
         data: {
-          name: random.uuid(),
-          token: random.uuid(),
+          name: datatype.uuid(),
+          token: datatype.uuid(),
           lineItems: [
             {
-              id: random.uuid(),
+              id: datatype.uuid(),
               label: commerce.productName(),
               quantity: 5,
               payload: {
-                productNumber: random.uuid(),
+                productNumber: datatype.uuid(),
               },
             },
             {
-              id: random.uuid(),
+              id: datatype.uuid(),
               label: commerce.productName(),
               quantity: 3,
               payload: {
-                productNumber: random.uuid(),
+                productNumber: datatype.uuid(),
               },
             },
           ],
diff --git a/packages/shopware-6-client/__tests__/services/CartService/removeCartItem.spec.ts b/packages/shopware-6-client/__tests__/services/CartService/removeCartItem.spec.ts
index bd3344751..86d260770 100644
--- a/packages/shopware-6-client/__tests__/services/CartService/removeCartItem.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CartService/removeCartItem.spec.ts
@@ -1,6 +1,6 @@
 import { removeCartItem } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
-import { random } from "faker";
+import { datatype } from "faker";
 
 jest.mock("../../../src/apiService");
 const mockedApiInstance = defaultInstance as jest.Mocked<
@@ -20,8 +20,8 @@ describe("CartService - removeCartItem", () => {
     mockedDelete.mockResolvedValueOnce({
       data: {
         data: {
-          name: random.uuid(),
-          token: random.uuid(),
+          name: datatype.uuid(),
+          token: datatype.uuid(),
           lineItems: [],
         },
       },
diff --git a/packages/shopware-6-client/__tests__/services/CustomerService/createCustomerAddress.spec.ts b/packages/shopware-6-client/__tests__/services/CustomerService/createCustomerAddress.spec.ts
index 7e469f5e4..a39a08c31 100644
--- a/packages/shopware-6-client/__tests__/services/CustomerService/createCustomerAddress.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CustomerService/createCustomerAddress.spec.ts
@@ -1,4 +1,4 @@
-import { address, name, random } from "faker";
+import { address, name, datatype } from "faker";
 import { createCustomerAddress } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
 
@@ -9,8 +9,8 @@ const mockedApiInstance = defaultInstance as jest.Mocked<
 
 describe("CustomerService - createCustomerAddress", () => {
   const newAddressData = {
-    countryId: random.uuid(),
-    salutationId: random.uuid(),
+    countryId: datatype.uuid(),
+    salutationId: datatype.uuid(),
     firstName: name.firstName(),
     lastName: name.lastName(),
     zipcode: address.zipCode(),
diff --git a/packages/shopware-6-client/__tests__/services/CustomerService/register.spec.ts b/packages/shopware-6-client/__tests__/services/CustomerService/register.spec.ts
index cd3367a31..24ce60c8b 100644
--- a/packages/shopware-6-client/__tests__/services/CustomerService/register.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CustomerService/register.spec.ts
@@ -1,4 +1,4 @@
-import { name, address, random, phone, internet } from "faker";
+import { name, address, datatype, phone, internet } from "faker";
 import { register } from "@shopware-pwa/shopware-6-client";
 import { getCustomerRegisterEndpoint } from "../../../src/endpoints";
 import { defaultInstance } from "../../../src/apiService";
@@ -19,14 +19,14 @@ describe("CustomerService - register", () => {
       post: mockedPost,
     } as any;
     customerData = {
-      salutationId: random.uuid(),
+      salutationId: datatype.uuid(),
       firstName: name.firstName(),
       lastName: name.lastName(),
       password: internet.password(8),
       email: internet.email(),
       storefrontUrl: internet.domainName(),
       billingAddress: {
-        countryId: random.uuid(),
+        countryId: datatype.uuid(),
         street: address.streetName(),
         zipcode: address.zipCode(),
         city: address.city(),
@@ -36,7 +36,7 @@ describe("CustomerService - register", () => {
   });
 
   it("should register the new customer with basic data provided", async () => {
-    const customerId = random.uuid();
+    const customerId = datatype.uuid();
     mockedPost.mockResolvedValueOnce({ data: customerId });
     const result = await register(customerData);
     expect(mockedPost).toBeCalledTimes(1);
diff --git a/packages/shopware-6-client/__tests__/services/CustomerService/updateCustomerAddress.spec.ts b/packages/shopware-6-client/__tests__/services/CustomerService/updateCustomerAddress.spec.ts
index b2c7432dd..d55c0e530 100644
--- a/packages/shopware-6-client/__tests__/services/CustomerService/updateCustomerAddress.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CustomerService/updateCustomerAddress.spec.ts
@@ -1,4 +1,4 @@
-import { address, name, random } from "faker";
+import { address, name, datatype } from "faker";
 import { updateCustomerAddress } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance } from "../../../src/apiService";
 
@@ -10,8 +10,8 @@ const mockedApiInstance = defaultInstance as jest.Mocked<
 describe("CustomerService - updateCustomerAddress", () => {
   const newAddressData = {
     id: "some-address-id",
-    countryId: random.uuid(),
-    salutationId: random.uuid(),
+    countryId: datatype.uuid(),
+    salutationId: datatype.uuid(),
     firstName: name.firstName(),
     lastName: name.lastName(),
     zipcode: address.zipCode(),
diff --git a/packages/shopware-6-client/__tests__/services/CustomerService/updateProfile.spec.ts b/packages/shopware-6-client/__tests__/services/CustomerService/updateProfile.spec.ts
index a60f61a9b..21c9c3ea3 100644
--- a/packages/shopware-6-client/__tests__/services/CustomerService/updateProfile.spec.ts
+++ b/packages/shopware-6-client/__tests__/services/CustomerService/updateProfile.spec.ts
@@ -1,10 +1,10 @@
-import { name, random } from "faker";
+import { name, datatype } from "faker";
 import { defaultInstance } from "../../../src/apiService";
 import { updateProfile } from "@shopware-pwa/shopware-6-client";
 import { getCustomerDetailsUpdateEndpoint } from "../../../src/endpoints";
 
 const customerData = {
-  salutationId: random.uuid(),
+  salutationId: datatype.uuid(),
   firstName: name.firstName(),
   lastName: name.lastName(),
   title: "d",
diff --git a/packages/shopware-6-client/__tests__/settings.spec.ts b/packages/shopware-6-client/__tests__/settings.spec.ts
index 7937e0e4d..935b4557b 100644
--- a/packages/shopware-6-client/__tests__/settings.spec.ts
+++ b/packages/shopware-6-client/__tests__/settings.spec.ts
@@ -6,7 +6,7 @@ import {
 } from "@shopware-pwa/shopware-6-client";
 import { defaultInstance, _createInstance } from "../src/apiService";
 import { ConfigChangedArgs } from "../src";
-import { random } from "faker";
+import { datatype } from "faker";
 import { defaultPwaConfigFile } from "@shopware-pwa/commons";
 const consoleWarnSpy = jest.spyOn(console, "warn");
 
@@ -122,7 +122,7 @@ describe("Settings", () => {
 
   describe("onConfigChange", () => {
     it("should notify, when update method has been called", () => {
-      const contextToken = random.uuid();
+      const contextToken = datatype.uuid();
       onConfigChange((configChangedArgs: ConfigChangedArgs) => {
         expect(configChangedArgs.config.contextToken).toEqual(contextToken);
       });

From 67558c3cd42f26c481567e5f310710a28fc2a40f Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Wed, 30 Jun 2021 22:45:33 +0200
Subject: [PATCH 06/11] chore: linter

---
 .../project-template/_commitlint.config.js       |  2 +-
 .../templates/project-template/jest.config.js    | 16 ++++++++--------
 .../templates/project-template/nuxt.config.js    |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/cli/src/templates/project-template/_commitlint.config.js b/packages/cli/src/templates/project-template/_commitlint.config.js
index 98ee7dfc2..5717d2571 100644
--- a/packages/cli/src/templates/project-template/_commitlint.config.js
+++ b/packages/cli/src/templates/project-template/_commitlint.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
 }
diff --git a/packages/cli/src/templates/project-template/jest.config.js b/packages/cli/src/templates/project-template/jest.config.js
index 0c8736309..cef0b3094 100644
--- a/packages/cli/src/templates/project-template/jest.config.js
+++ b/packages/cli/src/templates/project-template/jest.config.js
@@ -1,17 +1,17 @@
 module.exports = {
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/$1',
-    '^~/(.*)$': '<rootDir>/$1',
-    '^vue$': 'vue/dist/vue.common.js',
+    "^@/(.*)$": "<rootDir>/$1",
+    "^~/(.*)$": "<rootDir>/$1",
+    "^vue$": "vue/dist/vue.common.js",
   },
-  moduleFileExtensions: ['js', 'vue', 'json'],
+  moduleFileExtensions: ["js", "vue", "json"],
   transform: {
-    '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest',
+    "^.+\\.js$": "babel-jest",
+    ".*\\.(vue)$": "vue-jest",
   },
   collectCoverage: true,
   collectCoverageFrom: [
-    '<rootDir>/components/**/*.vue',
-    '<rootDir>/pages/**/*.vue',
+    "<rootDir>/components/**/*.vue",
+    "<rootDir>/pages/**/*.vue",
   ],
 }
diff --git a/packages/cli/src/templates/project-template/nuxt.config.js b/packages/cli/src/templates/project-template/nuxt.config.js
index 342650bc0..8500c83d3 100644
--- a/packages/cli/src/templates/project-template/nuxt.config.js
+++ b/packages/cli/src/templates/project-template/nuxt.config.js
@@ -1,8 +1,8 @@
-import extendNuxtConfig from '@shopware-pwa/nuxt-module/config'
+import extendNuxtConfig from "@shopware-pwa/nuxt-module/config"
 
 export default extendNuxtConfig({
   head: {
-    title: 'Shopware PWA',
-    meta: [{ hid: 'description', name: 'description', content: '' }],
+    title: "Shopware PWA",
+    meta: [{ hid: "description", name: "description", content: "" }],
   },
 })

From 53121ac33d8aeaab039eb1f6b1c135699f47d916 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Fri, 9 Jul 2021 12:01:36 +0200
Subject: [PATCH 07/11] chore: docs

---
 docs/.vuepress/sidebar.js                  |   1 +
 docs/landing/concepts/README.md            |   6 ++
 docs/landing/concepts/api-client-errors.md | 100 +++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 docs/landing/concepts/api-client-errors.md

diff --git a/docs/.vuepress/sidebar.js b/docs/.vuepress/sidebar.js
index dfe044377..fae9107be 100644
--- a/docs/.vuepress/sidebar.js
+++ b/docs/.vuepress/sidebar.js
@@ -38,6 +38,7 @@ module.exports = {
         "/landing/concepts/payment",
         "/landing/concepts/snippets",
         "/landing/concepts/interceptor",
+        "/landing/concepts/api-client-errors",
       ],
     },
     {
diff --git a/docs/landing/concepts/README.md b/docs/landing/concepts/README.md
index bb0f5521c..e96cf4c6e 100644
--- a/docs/landing/concepts/README.md
+++ b/docs/landing/concepts/README.md
@@ -20,6 +20,12 @@ Checkout and payment are critical parts within every eCommerce application. Lear
 
 → [Payment Guide](./payment)
 
+## Client API Errors and handling
+
+Shopware-pwa provides an unified error's structure for all errors that may appear during working with Shopware 6 API.
+
+→ [API Errors Guide](./api-client-errors)
+
 ## User Management <Badge text="coming soon"/>
 
 How do you manage user data, newsletter sign-ins, address updates? We've got you covered. Follow our guide to show how customize the self-service experience within the PWA.
diff --git a/docs/landing/concepts/api-client-errors.md b/docs/landing/concepts/api-client-errors.md
new file mode 100644
index 000000000..f0add852a
--- /dev/null
+++ b/docs/landing/concepts/api-client-errors.md
@@ -0,0 +1,100 @@
+# API specific errors & handling
+
+Shopware-pwa provides an unified error's structure for all errors that may appear during working with Shopware 6 API.
+
+## Shopware 6 API error structure
+
+API throws an error in specific format. The API responds error details as an array of errors (always, even there is only one error in the response).
+
+Default response containing errors looks like this:
+```ts
+{
+  "errors": ShopwareError[]
+}
+
+```
+where, `ShopwareError` interface is:
+```ts
+interface ShopwareError {
+  status: string;   // HTTP Status code, like "403"
+  code: string;     // internal error code, like "CHECKOUT__CUSTOMER_NOT_LOGGED_IN", or "VIOLATION::IS_BLANK_ERROR"
+  title: string;    // title of an error, like "Forbidden" or "Not found"
+  detail: string;   // additional information, like "Customer is not logged in."
+  source?: any;      // only for HTTP 400 type errors, like `{"pointer": "/email"}`
+  meta: any;        // unknown data that can be passed on backend side, like stacktrace in API's development mode
+}
+```
+
+## Other API client's errors
+
+Besides errors that may be returned by API, shopware-pwa recognize another type of errors: the Client errors itself, independent from API response:
+- timeout (axios waits too long for the response, and timeout setting is reached)
+- network error (there are some connection issues)
+
+Each one is transformed into consistent format and gets appriopriate status code.
+
+## Consisten format
+
+`@shopware-pwa/shopware-6-client` package is responsible for connection layer between **shopware-pwa and API**. The error interceptor translates every (or almost every) type of an error into consistent one. Thanks to this, every error can be handled in the same way in the application in the next layers. 
+
+
+```ts
+interface ClientApiError {
+  messages: ShopwareError[]; // contains array of ShopwareError objects, even if it's an issue on axios side
+  statusCode: number;        // HTTP status code
+}
+```
+
+## Example from the code
+
+Here's a simple scenario of what may happen durin login and how to deal with such errors relying on `ClientApiError` & `SwErrorsList` vue component.
+
+1. Let's say we are trying to log in. The code below show what it can look like:
+
+    ```ts
+    // somewhere in the logic
+
+    const errors = ref([]); // errors reference that can be imported in the Vue component.
+
+    try {
+      await apiLogout();
+      broadcast(INTERCEPTOR_KEYS.USER_LOGOUT);
+    } catch (e) { // we expect the ClientApiError, always
+      const err: ClientApiError = e;
+      errors.value = err.messages; // (3) and need only array of messages to be displayed later on
+
+      broadcast(INTERCEPTOR_KEYS.ERROR, {
+        methodName: `[${contextName}][logout]`,
+        inputParams: {},
+        error: err,
+      });
+    } 
+
+    ```
+
+2. The customer provides the wrong data
+3. `errors` object is fullfilled with `ClientApiErrors`'s `messages` array.
+4. `SwErrorsList` component receives `loginErrors` (our `errors` reference from previous step).
+    ```js
+    import SwErrorsList from "@/components/SwErrorsList.vue"
+
+    <SwErrorsList :list="loginErrors" />
+    ```
+5. Component displays the errors.
+
+## SwErrorsList component
+
+The component is located at `@/components/SwErrorsList.vue` and accepts only one prop: `list` and in fact that's the `ShopwareError[]` interface.
+
+```ts
+props: {
+    list: {
+      type: Array,
+      default: [],
+    },
+  },
+```
+
+1. The component detects if there is only one message or more. If an amount of errors is more than 1 -> the errors are shown as a bullet list and prepended with `encountered problems` title. Otherwise the error message is only one string.
+
+2. The error can be "field" related as well, that means the error comes together with HTTP 400 error and should display additional details like `field` that causes validation errors.
\ No newline at end of file

From dc0b650c8b67aadba4456c371089466b3f3b8768 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Fri, 9 Jul 2021 12:03:27 +0200
Subject: [PATCH 08/11] chore: type

---
 packages/default-theme/src/components/forms/SwPassword.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/default-theme/src/components/forms/SwPassword.vue b/packages/default-theme/src/components/forms/SwPassword.vue
index 7f0ef3929..3b092328d 100644
--- a/packages/default-theme/src/components/forms/SwPassword.vue
+++ b/packages/default-theme/src/components/forms/SwPassword.vue
@@ -33,7 +33,9 @@
                 v-model="newPassword"
                 :valid="!$v.newPassword.$error"
                 :error-message="
-                  $t('This field is required and should be at leas 8 long')
+                  $t(
+                    'This field is required and should be at least 8 characters long'
+                  )
                 "
                 type="password"
                 name="newPassword"

From abc1a21f37ec1a4c99be02fb2f4380ba29184a02 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 19 Jul 2021 11:47:20 +0200
Subject: [PATCH 09/11] chore: docs

---
 docs/landing/concepts/api-client-errors.md | 51 +++++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/docs/landing/concepts/api-client-errors.md b/docs/landing/concepts/api-client-errors.md
index f0add852a..e3c99208d 100644
--- a/docs/landing/concepts/api-client-errors.md
+++ b/docs/landing/concepts/api-client-errors.md
@@ -63,7 +63,7 @@ Here's a simple scenario of what may happen durin login and how to deal with suc
       const err: ClientApiError = e;
       errors.value = err.messages; // (3) and need only array of messages to be displayed later on
 
-      broadcast(INTERCEPTOR_KEYS.ERROR, {
+      broadcast(INTERCEPTOR_KEYS.ERROR, { // (4) optionally, you can plug into broadcasted error using interceptors (useIntercept composable) to show notifications or do something with an error.
         methodName: `[${contextName}][logout]`,
         inputParams: {},
         error: err,
@@ -97,4 +97,51 @@ props: {
 
 1. The component detects if there is only one message or more. If an amount of errors is more than 1 -> the errors are shown as a bullet list and prepended with `encountered problems` title. Otherwise the error message is only one string.
 
-2. The error can be "field" related as well, that means the error comes together with HTTP 400 error and should display additional details like `field` that causes validation errors.
\ No newline at end of file
+2. The error can be "field" related as well, that means the error comes together with HTTP 400 error and should display additional details like `field` that causes validation errors.
+
+
+## Intercept the errors
+
+The errors that may occure in the logic layer (composables) can be broadcasted and intercepted in one place as well. There are many places the errors are broadcasted in order to be listened by some functions like additional logger or own way of error notification.
+
+Let's try to intercept the error from the `## Example from the code` above. 
+
+```js
+broadcast(INTERCEPTOR_KEYS.ERROR, {
+    methodName: `[${contextName}][logout]`,
+    inputParams: {},
+    error: err,
+  }
+);
+```
+
+Example of how to deal with broadcasted errors. The example below shows how to listen for ERROR type event withing `useIntercept` and do something about it.
+
+```js
+import { useIntercept, INTERCEPTOR_KEYS } from "@shopware-pwa/composables"
+import { configure, getLogger } from 'log4js'
+
+export default ({ app }) => {
+  configure({
+    appenders: {
+      logstash: {
+        type: '@log4js-node/logstashudp', // UDP "driver" works only on SSR
+        host: 'mylogstash.server', // for demo only; use value from env instead
+        port: 5000 // for demo only; use value from env instead
+      }
+    },
+    categories: {
+      default: { appenders: ['logstash'], level: 'info' }
+    }
+  })
+  const logger = getLogger() // get the logstash client instance
+
+  const { intercept } = useIntercept(app)
+  intercept(INTERCEPTOR_KEYS.ERROR, (payload, rootContext) => {
+    logger.error(payload) // send the error to the logstash server
+  })
+  
+}
+```
+
+Thanks to this, all the errors can be captured in one place. Of course there can be some conditions and filtering needed depending on the case.
\ No newline at end of file

From cc5ed5c250459eaad164af1b4b5def7b2147b7c0 Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 19 Jul 2021 11:48:29 +0200
Subject: [PATCH 10/11] chore: typo

---
 docs/landing/concepts/api-client-errors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/landing/concepts/api-client-errors.md b/docs/landing/concepts/api-client-errors.md
index e3c99208d..cffb3071a 100644
--- a/docs/landing/concepts/api-client-errors.md
+++ b/docs/landing/concepts/api-client-errors.md
@@ -115,7 +115,7 @@ broadcast(INTERCEPTOR_KEYS.ERROR, {
 );
 ```
 
-Example of how to deal with broadcasted errors. The example below shows how to listen for ERROR type event withing `useIntercept` and do something about it.
+Example of how to deal with broadcasted errors. The example below shows how to listen for ERROR type event within `useIntercept` functionality and do something about it.
 
 ```js
 import { useIntercept, INTERCEPTOR_KEYS } from "@shopware-pwa/composables"

From 7d7474d60cb3ec6500b7a1baa4562f11cf04affd Mon Sep 17 00:00:00 2001
From: mkucmus <maciejkucmus@gmail.com>
Date: Mon, 19 Jul 2021 11:52:42 +0200
Subject: [PATCH 11/11] chore: docs

---
 docs/landing/concepts/api-client-errors.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/landing/concepts/api-client-errors.md b/docs/landing/concepts/api-client-errors.md
index cffb3071a..bb06d9ad7 100644
--- a/docs/landing/concepts/api-client-errors.md
+++ b/docs/landing/concepts/api-client-errors.md
@@ -115,7 +115,7 @@ broadcast(INTERCEPTOR_KEYS.ERROR, {
 );
 ```
 
-Example of how to deal with broadcasted errors. The example below shows how to listen for ERROR type event within `useIntercept` functionality and do something about it.
+Example of how to deal with broadcasted errors. The example of a [nuxt plugin](https://nuxtjs.org/docs/2.x/directory-structure/plugins) below shows how to listen for ERROR type event within `useIntercept` functionality and do something about it. In this case, plugin subscribes the events for `INTERCEPTOR_KEYS.ERROR` key and pushes errors to the external logs server using UDP.
 
 ```js
 import { useIntercept, INTERCEPTOR_KEYS } from "@shopware-pwa/composables"