Merge branch 'main' into fix/GH-279

.changeset/eighty-spiders-divide.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Add errorMessageBuilder to the useAddress composable

.changeset/purple-dodos-talk.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Add error notification for add new address form

packages/composables/src/useAddress.ts

@@ -14,6 +14,7 @@ import {
   ClientApiError,
   CustomerAddress,
   ShopwareSearchParams,
+  Error,
 } from "@shopware-pwa/types";
 import { useUser } from "./useUser";
 
@@ -50,6 +51,12 @@ export type UseAddressReturn = {
    * Sets the address for given ID as default shipping address
    */
   setDefaultCustomerShippingAddress(addressId: string): Promise<string>;
+  /**
+   * Returns formatted error message
+   *
+   * @param {Error} error
+   */
+  errorMessageBuilder(error: Error): string | null;
 };
 
 /**
@@ -135,6 +142,21 @@ export function useAddress(): UseAddressReturn {
     return await apiSetDefaultCustomerShippingAddress(addressId, apiInstance);
   }
 
+  /**
+   * Returns formatted error message
+   *
+   * @param {error} error
+   * @returns {string | null}
+   */
+  function errorMessageBuilder(error: Error): string | null {
+    switch (error.code) {
+      case "VIOLATION::IS_BLANK_ERROR":
+        return `${error?.source?.pointer.slice(1)} - ${error.detail}`;
+      default:
+        return null;
+    }
+  }
+
   return {
     customerAddresses: computed(() => _storeCustomerAddresses.value || []),
     loadCustomerAddresses,
@@ -143,5 +165,6 @@ export function useAddress(): UseAddressReturn {
     deleteCustomerAddress,
     setDefaultCustomerBillingAddress,
     setDefaultCustomerShippingAddress,
+    errorMessageBuilder,
   };
 }

packages/types/shopware-6-client/response/Error.d.ts

@@ -14,6 +14,9 @@ type Error = {
   detail: string;
   meta: unknown;
   trace?: ErrorTrace[];
+  source?: {
+    pointer: string;
+  };
 };
 
 /**

templates/vue-demo-store/components/account/AccountAddressForm.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { CustomerAddress } from "@shopware-pwa/types";
+import { CustomerAddress, Error } from "@shopware-pwa/types";
 
-const { createCustomerAddress, updateCustomerAddress } = useAddress();
+const { createCustomerAddress, updateCustomerAddress, errorMessageBuilder } =
+  useAddress();
 
 const emits = defineEmits<{
   (e: "success"): void;
@@ -21,6 +22,8 @@ const props = withDefaults(
 
 const { getCountries } = useCountries();
 const { getSalutations } = useSalutations();
+const { t } = useI18n();
+const { pushError } = useNotifications();
 
 const formData = reactive<CustomerAddress>({
   countryId: props.address?.countryId ?? "",
@@ -40,8 +43,10 @@ const invokeSave = async (): Promise<void> => {
       : createCustomerAddress;
     await saveAddress(formData);
     emits("success");
-  } catch (error) {
-    console.error("error save address", error);
+  } catch (errors: Error[]) {
+    errors.messages.forEach((element: Error) => {
+      pushError(errorMessageBuilder(element) || t("messages.error"));
+    });
   }
 };
 

templates/vue-demo-store/pages/account/address.vue

@@ -72,7 +72,7 @@ onBeforeMount(async () => {
       {{ $t("account.addressAddNew") }}
     </button>
     <SharedModal :controller="addAddressModalController">
-      <AccountAddressForm />
+      <AccountAddressForm @success="addAddressModalController.close" />
     </SharedModal>
   </div>
 </template>