diff --git a/src/__tests__/OeWizard.cy.ts b/src/__tests__/OeWizard.cy.ts index df889ce0..d4b6ebc0 100644 --- a/src/__tests__/OeWizard.cy.ts +++ b/src/__tests__/OeWizard.cy.ts @@ -9,10 +9,10 @@ describe('OeWizard', () => { components: { OeWizard }, setup() { const steps: IStep[] = [ - { name: 'Algemene gegevens', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -152,10 +152,10 @@ describe('OeWizard', () => { components: { OeWizard }, setup() { const steps: IStep[] = [ - { name: 'Algemene gegevens', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -178,10 +178,10 @@ describe('OeWizard', () => { components: { OeWizard }, setup() { const steps: IStep[] = [ - { name: 'Algemene gegevens', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(false) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -210,10 +210,17 @@ describe('OeWizard', () => { components: { OeWizard }, setup() { const steps: IStep[] = [ - { name: 'Algemene gegevens', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(false) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) }, + { + name: 'Mijn gegevens', + validate: () => + Promise.resolve({ + valid: false, + error: { id: '1', title: 'Error titel', content: 'Er heeft zich een error voorgedaan', type: 'error' }, + }), + }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -283,10 +290,10 @@ describe('OeWizard', () => { components: { OeWizard }, setup() { const steps: IStep[] = [ - { name: 'Algemene gegevens', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true), nextStepDisabled: true }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Algemene gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }), nextStepDisabled: true }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; diff --git a/src/models/index.ts b/src/models/index.ts index ab1e9471..f4af0ef7 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -15,4 +15,5 @@ export * from './oe-openlayers'; export * from './oe-zoneerder-config'; export * from './status'; export * from './system-fields'; +export * from './toast'; export * from './wizard'; diff --git a/src/models/toast.ts b/src/models/toast.ts new file mode 100644 index 00000000..1173bf96 --- /dev/null +++ b/src/models/toast.ts @@ -0,0 +1,8 @@ +export interface IToast { + id?: string; + type: ToastType; + title: string; + content: string | string[]; +} + +export type ToastType = 'default' | 'error' | 'success' | 'warning'; diff --git a/src/models/wizard.ts b/src/models/wizard.ts index 43302bee..8d25ecf8 100644 --- a/src/models/wizard.ts +++ b/src/models/wizard.ts @@ -1,3 +1,5 @@ +import type { IToast } from './toast'; + export interface IWizardProps { steps: IStep[]; allowBarNavigation?: boolean; @@ -6,6 +8,6 @@ export interface IWizardProps { export interface IStep { name: string; - validate: () => Promise; + validate: () => Promise<{ valid: boolean; error?: IToast }>; nextStepDisabled?: boolean; } diff --git a/src/stories/dumb-components/wizard.stories.ts b/src/stories/dumb-components/wizard.stories.ts index a742452a..ed6a32c2 100644 --- a/src/stories/dumb-components/wizard.stories.ts +++ b/src/stories/dumb-components/wizard.stories.ts @@ -54,10 +54,10 @@ export const Default: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -86,10 +86,10 @@ export const BarNavigationAllowed: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -119,10 +119,29 @@ export const BlockedWhenStepInvalid: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(false) }, - { name: 'Overzicht', validate: () => Promise.resolve(false) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { + name: 'Bijlagen', + validate: () => + Promise.resolve({ + valid: false, + error: { id: '1', type: 'error', title: 'Er is een fout opgetreden.', content: 'Fout bij de bijlagen.' }, + }), + }, + { + name: 'Overzicht', + validate: () => + Promise.resolve({ + valid: false, + error: { + id: '2', + type: 'error', + title: 'Er is een fout opgetreden.', + content: 'Fout bij het overzicht.', + }, + }), + }, ]; return { steps }; @@ -157,10 +176,10 @@ export const Mobile: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(true) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Overzicht', validate: () => Promise.resolve({ valid: true }) }, ]; return { steps }; @@ -182,10 +201,22 @@ export const SubmitDisabledLastStepInvalid: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true) }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(false) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { + name: 'Overzicht', + validate: () => + Promise.resolve({ + valid: false, + error: { + id: '2', + type: 'error', + title: 'Er is een fout opgetreden.', + content: 'Fout bij het overzicht.', + }, + }), + }, ]; return { steps }; @@ -207,10 +238,22 @@ export const DisableNextStepButton: Story = { }, setup() { const steps: IStep[] = [ - { name: 'Gegevens EPC', validate: () => Promise.resolve(true) }, - { name: 'Mijn gegevens', validate: () => Promise.resolve(true), nextStepDisabled: true }, - { name: 'Bijlagen', validate: () => Promise.resolve(true) }, - { name: 'Overzicht', validate: () => Promise.resolve(false) }, + { name: 'Gegevens EPC', validate: () => Promise.resolve({ valid: true }) }, + { name: 'Mijn gegevens', validate: () => Promise.resolve({ valid: true }), nextStepDisabled: true }, + { name: 'Bijlagen', validate: () => Promise.resolve({ valid: true }) }, + { + name: 'Overzicht', + validate: () => + Promise.resolve({ + valid: false, + error: { + id: '2', + type: 'error', + title: 'Er is een fout opgetreden.', + content: 'Fout bij het overzicht.', + }, + }), + }, ]; return { steps };