throw custom ValidationError

contains an message formatter, displaying all messages concatinated.

components/wizard/context/validationError.ts

@@ -0,0 +1,25 @@
+interface ValidationErrors {
+  [key: string]: { properties: { message: string } }
+}
+
+export class ValidationError extends Error {
+  private errors: ValidationErrors
+
+  constructor(errors: ValidationErrors) {
+    super()
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ValidationError)
+    }
+    this.name = this.constructor.name
+    this.errors = errors
+  }
+
+  get message() {
+    return Object.entries<{ properties: { message: string } }>(this.errors)
+      .map(([_key, value]) => {
+        return `${value?.properties?.message}`
+      })
+      .join(',')
+  }
+}

components/wizard/context/wizardStore.tsx

@@ -4,6 +4,7 @@ import {
   loadBookingData,
   storeBookingData,
 } from '../../../helpers/storage'
+import { ValidationError } from './validationError'
 
 interface WizardFormData {
   startDate: string
@@ -163,7 +164,7 @@ async function createBooking(formData: WizardFormData) {
 
   if (response.status === 400) {
     const error = await response.json()
-    throw Error(error.message)
+    throw new ValidationError(error.errors)
   }
 
   if (!response.ok) {