feat(helpers): extract messages from API error in case of 400

api/helpers.api.md

@@ -12,6 +12,7 @@ import { Product } from '@shopware-pwa/commons/interfaces/models/content/product
 import { PropertyGroupOption } from '@shopware-pwa/commons/interfaces/models/content/property/PropertyGroupOption';
 import { Salutation } from '@shopware-pwa/commons/interfaces/models/system/salutation/Salutation';
 import { SearchCriteria } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
+import { ShopwareError } from '@shopware-pwa/commons/interfaces/errors/ApiError';
 import { Sort } from '@shopware-pwa/commons/interfaces/search/SearchCriteria';
 import { UiMediaGalleryItem as UiMediaGalleryItem_2 } from '@shopware-pwa/helpers';
 import { UiProductOption as UiProductOption_2 } from '@shopware-pwa/helpers';
@@ -71,6 +72,9 @@ export function getCmsSections(content: CmsPage): CmsSection[];
 // @alpha (undocumented)
 export const getFilterSearchCriteria: (selectedFilters: any) => any[];
 
+// @public
+export function getMessagesFromErrorsArray(errors: ShopwareError[]): string[];
+
 // Warning: (ae-forgotten-export) The symbol "NavigationRoute" needs to be exported by the entry point index.d.ts
 //
 // @alpha (undocumented)

packages/helpers/__tests__/error/getMessagesFromErrorsArray.spec.ts

@@ -0,0 +1,51 @@
+import { getMessagesFromErrorsArray } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getMessagesFromErrorsArray", () => {
+  it("should return an undefined (falsy) if no errors provided", () => {
+    const result = getMessagesFromErrorsArray(undefined as any);
+    expect(result).toEqual([]);
+  });
+  it("should return an undefined (falsy) if no errors provided - empty array", () => {
+    const result = getMessagesFromErrorsArray([] as any);
+    expect(result).toEqual([]);
+  });
+  it("should return the array of strings based on ShopawreError detail property.", () => {
+    const result = getMessagesFromErrorsArray([
+      {
+        detail: 'The email address "user@divante.com" is already in use.',
+        source: {
+          pointer: "/email"
+        }
+      },
+      {
+        detail: "This value is too short. It should have 8 character or more.",
+        source: {
+          pointer: "/password"
+        }
+      }
+    ] as any);
+    expect(result).toEqual([
+      'email: The email address "user@divante.com" is already in use.',
+      "password: This value is too short. It should have 8 character or more."
+    ]);
+  });
+  it("should return the array of converted messages if object has all necessary data", () => {
+    const result = getMessagesFromErrorsArray([
+      {
+        detail: 'The email address "user@divante.com" is already in use.',
+        source: {
+          // lack of pointer
+        }
+      },
+      {
+        detail: "This value is too short. It should have 8 character or more.",
+        source: {
+          pointer: "/password"
+        }
+      }
+    ] as any);
+    expect(result).toEqual([
+      "password: This value is too short. It should have 8 character or more."
+    ]);
+  });
+});

packages/helpers/src/error/index.ts

@@ -0,0 +1,22 @@
+import { ShopwareError } from "@shopware-pwa/commons/interfaces/errors/ApiError";
+
+/**
+ * Get the messages from the API response (array of ShopwareErrors)
+ */
+export function getMessagesFromErrorsArray(
+  errors: ShopwareError[]
+): string[] {
+  if (!errors?.length || !Array.isArray(errors)) {
+    return [];
+  }
+  // return a message only if detail and pointer propery is provided in upcoming ShopwareError
+  return errors
+    .map(
+      ({ detail, source }) =>
+        detail &&
+        source &&
+        source.pointer &&
+        `${source.pointer.substring(1)}: ${detail}`
+    )
+    .filter(message => message);
+}

packages/helpers/src/index.ts

@@ -7,3 +7,4 @@ export * from "./urlHelpers";
 export * from "./listing";
 export * from "./navigation";
 export * from "./salutation";
+export * from "./error";