feat(vue-starter-template): api error handler util

templates/vue-starter-template/app/components/account/LoginForm.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-import { ApiClientError } from "@shopware/api-client";
-
 const { push } = useRouter();
 const localePath = useLocalePath();
 const { formatLink } = useInternationalization(localePath);
 const { mergeWishlistProducts } = useWishlist();
 const { login } = useUser();
-const { pushError, pushSuccess } = useNotifications();
+const { pushSuccess, pushError } = useNotifications();
 const { t } = useI18n();
+const { handleApiError } = useApiErrorsResolver("account_login_form");
 
 const emit = defineEmits<{
   close: [];
@@ -20,13 +19,7 @@ async function handleLogin(formData: { username: string; password: string }) {
     mergeWishlistProducts();
     emit("close");
   } catch (error) {
-    if (error instanceof ApiClientError) {
-      for (const errorItem of error.details.errors) {
-        if (errorItem?.detail) {
-          pushError(errorItem.detail);
-        }
-      }
-    }
+    handleApiError(error, pushError);
   }
 }
 

templates/vue-starter-template/app/components/account/RegistrationForm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ApiClientError } from "@shopware/api-client";
 import { useVuelidate } from "@vuelidate/core";
 import { useTemplateRef } from "vue";
 
@@ -9,6 +8,7 @@ const props = defineProps<{
 
 const { register, isLoggedIn } = useUser();
 const { pushError } = useNotifications();
+const { handleApiError } = useApiErrorsResolver("account_registration_form");
 
 const router = useRouter();
 const loading = ref<boolean>();
@@ -50,8 +50,6 @@ const $v = useVuelidate(
   registrationFormRules(state.accountType, state.billingAddress.countryId),
   state,
 );
-const { resolveApiErrors } = useApiErrorsResolver("account_login");
-
 const invokeSubmit = async () => {
   $v.value.$touch();
   const valid = await $v.value.$validate();
@@ -67,12 +65,7 @@ const invokeSubmit = async () => {
         $v.value.$reset();
       } else if (response?.active) router.push("/");
     } catch (error) {
-      if (error instanceof ApiClientError) {
-        const errors = resolveApiErrors(error.details.errors);
-        for (const error of errors) {
-          pushError(error);
-        }
-      }
+      handleApiError(error, pushError);
     } finally {
       loading.value = false;
     }

templates/vue-starter-template/app/components/layout/footer/NewsletterBox.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { ApiClientError } from "@shopware/api-client";
 import { useVuelidate } from "@vuelidate/core";
 
 const email = ref("");
 const newsletterDisabled = ref(false);
 
 const { newsletterSubscribe, SUBSRIBE_KEY } = useNewsletter();
 const { pushSuccess, pushError } = useNotifications();
-const { resolveApiErrors } = useApiErrorsResolver("newsletter_box");
 const { t } = useI18n();
+const { handleApiError } = useApiErrorsResolver("newsletter_box_form");
 
 const $v = useVuelidate(footerNewsletterBoxRules(), { email });
 
@@ -25,14 +24,7 @@ async function handleSubmit() {
 
       pushSuccess(t("layout.footer.newsletter.messages.subscribed"));
     } catch (error) {
-      if (error instanceof ApiClientError) {
-        const errors = resolveApiErrors(error.details.errors);
-        for (const error of errors) {
-          pushError(error);
-        }
-      }
-    } finally {
-      newsletterDisabled.value = false;
+      handleApiError(error, pushError);
     }
   }
 }

templates/vue-starter-template/app/composables/useApiErrorsResolver.ts

@@ -1,4 +1,5 @@
 import type { ApiError } from "@shopware/api-client";
+import { ApiClientError } from "@shopware/api-client";
 
 type ContextErrors = {
   [key: string]: {
@@ -8,6 +9,7 @@ type ContextErrors = {
 
 export type UseApiErrorsResolver = {
   resolveApiErrors(errors: ApiError[]): string[];
+  handleApiError(error: unknown, errorResolver: (error: string) => void): void;
 };
 
 /**
@@ -58,7 +60,24 @@ export function useApiErrorsResolver(context?: string): UseApiErrorsResolver {
     return errorsTable;
   };
 
+  function handleApiError(
+    error: unknown,
+    errorResolver: (error: string) => void,
+  ) {
+    if (error instanceof ApiClientError) {
+      const { resolveApiErrors } = useApiErrorsResolver(context);
+      const errors = resolveApiErrors(error.details.errors);
+
+      for (const errorMessage of errors) {
+        errorResolver(errorMessage);
+      }
+    } else {
+      errorResolver(t("errors.message-default") as string);
+    }
+  }
+
   return {
     resolveApiErrors,
+    handleApiError,
   };
 }

templates/vue-starter-template/app/pages/account/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ApiClientError } from "@shopware/api-client";
-
-const { resolveApiErrors } = useApiErrorsResolver("account_newsletter");
 const { user } = useUser();
 const { pushSuccess, pushError } = useNotifications();
 const { t } = useI18n();
@@ -13,6 +10,7 @@ const {
   SUBSRIBE_KEY,
   confirmationNeeded,
 } = useNewsletter();
+const { handleApiError } = useApiErrorsResolver("account_newsletter_form");
 
 const newsletter = ref(false);
 const newsletterDisabled = ref(false);
@@ -34,12 +32,7 @@ async function handleNewsletterChange() {
       pushSuccess(t("account.overview.newsletter.messages.unsubscribed"));
     }
   } catch (error) {
-    if (error instanceof ApiClientError) {
-      const errors = resolveApiErrors(error.details.errors);
-      for (const error of errors) {
-        pushError(error);
-      }
-    }
+    handleApiError(error, pushError);
   } finally {
     newsletterDisabled.value = false;
   }

templates/vue-starter-template/app/pages/account/profile/change-email.vue

@@ -8,6 +8,7 @@ const { pushError, pushSuccess } = useNotifications();
 const router = useRouter();
 const localePath = useLocalePath();
 const { formatLink } = useInternationalization(localePath);
+const { handleApiError } = useApiErrorsResolver("account_change_email_form");
 
 const state = ref<operations["changeEmail post /account/change-email"]["body"]>(
   {
@@ -37,15 +38,7 @@ async function handleSubmit() {
     pushSuccess($t("account.changeEmail.form.successUpdate"));
     await router.push(formatLink("/account/profile"));
   } catch (error) {
-    if (error instanceof ApiClientError) {
-      for (const errorItem of error.details.errors) {
-        if (errorItem?.detail) {
-          pushError(errorItem.detail);
-        }
-      }
-    } else {
-      pushError($t("account.changeEmail.form.errorUpdate"));
-    }
+    handleApiError(error, pushError);
   }
 }
 </script>

templates/vue-starter-template/app/pages/account/profile/change-password.vue

@@ -8,6 +8,7 @@ const { pushError, pushSuccess } = useNotifications();
 const router = useRouter();
 const localePath = useLocalePath();
 const { formatLink } = useInternationalization(localePath);
+const { handleApiError } = useApiErrorsResolver("account_change_password_form");
 
 const state = ref<
   operations["changePassword post /account/change-password"]["body"]
@@ -37,15 +38,7 @@ async function handleSubmit() {
     pushSuccess($t("account.changePassword.form.successUpdate"));
     await router.push(formatLink("/account/profile"));
   } catch (error) {
-    if (error instanceof ApiClientError) {
-      for (const errorItem of error.details.errors) {
-        if (errorItem?.detail) {
-          pushError(errorItem.detail);
-        }
-      }
-    } else {
-      pushError($t("account.changePassword.form.errorUpdate"));
-    }
+    handleApiError(error, pushError);
   }
 }
 </script>

templates/vue-starter-template/app/pages/account/profile/index.vue

@@ -5,6 +5,7 @@ import { onBeforeMount } from "vue";
 
 const { user, updatePersonalInfo } = useUser();
 const { pushError, pushSuccess } = useNotifications();
+const { handleApiError } = useApiErrorsResolver("account_profile_form");
 
 type AccountType = "private" | "business";
 
@@ -66,13 +67,7 @@ async function handleSubmit() {
     );
     pushSuccess($t("account.profile.form.successUpdate"));
   } catch (error) {
-    if (error instanceof ApiClientError) {
-      for (const errorItem of error.details.errors) {
-        if (errorItem?.detail) {
-          pushError(errorItem.detail);
-        }
-      }
-    }
+    handleApiError(error, pushError);
   }
 }
 </script>