@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.1

package/build/tests/DateSchema.test.js

@@ -0,0 +1,171 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('DateSchema', () => {
+    it.each(['date-lookup', 'calendar'])('disables unavailable %s dates and shows the first matching reason', async (control) => {
+        const step = {
+            id: 'step',
+            title: 'Choose a date',
+            schemas: [
+                {
+                    $id: '#appointment',
+                    type: 'date',
+                    title: 'Appointment date',
+                    control,
+                    minimum: '2026-09-01',
+                    maximum: '2026-09-30',
+                    availability: {
+                        message: 'Some appointment dates are unavailable.',
+                        unavailable: [
+                            {
+                                type: 'dates',
+                                dates: ['2026-09-06'],
+                                reason: 'This date is a bank holiday.',
+                            },
+                            {
+                                type: 'weekdays',
+                                weekdays: ['sat', 'sun'],
+                                reason: 'Appointments are not available at weekends.',
+                            },
+                        ],
+                    },
+                },
+            ],
+            layout: [{ type: 'form', schemaId: '#appointment' }],
+            model: '2026-09-02',
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: vi.fn(), initialStep: step, onCompletion: vi.fn(), onError: vi.fn() }));
+        if (control === 'date-lookup') {
+            await user.click(screen.getByRole('button', { name: /2 September 2026/u }));
+        }
+        expect(screen.getByText('Some appointment dates are unavailable.')).toBeInTheDocument();
+        const sunday = screen.getByRole('button', { name: /^6 September 2026/u });
+        expect(sunday).toHaveAttribute('aria-disabled', 'true');
+        await user.click(sunday);
+        expect(screen.getByText('This date is a bank holiday.')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: /^5 September 2026/u }));
+        expect(screen.getByText('Appointments are not available at weekends.')).toBeInTheDocument();
+    });
+    it('shows the matching availability reason for an unavailable input date', async () => {
+        const httpClient = vi.fn();
+        const step = {
+            id: 'step',
+            title: 'Enter a date',
+            schemas: [
+                {
+                    $id: '#appointment',
+                    type: 'date',
+                    title: 'Appointment date',
+                    availability: {
+                        unavailable: [
+                            {
+                                type: 'dates',
+                                dates: ['2026-09-07'],
+                                reason: 'This date is a bank holiday.',
+                            },
+                        ],
+                    },
+                },
+            ],
+            layout: [
+                { type: 'form', schemaId: '#appointment' },
+                { type: 'button', action: { url: '/submit' }, title: 'Submit' },
+            ],
+            model: '2026-09-02',
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step, onCompletion: vi.fn(), onError: vi.fn() }));
+        await user.clear(screen.getByLabelText('Day'));
+        await user.type(screen.getByLabelText('Day'), '7');
+        await user.click(screen.getByRole('button', { name: 'Submit' }));
+        expect(screen.getByText('This date is a bank holiday.')).toBeInTheDocument();
+        expect(httpClient).not.toHaveBeenCalled();
+    });
+    describe.each(['date-input', 'date-lookup', 'calendar'])('%s integration', (control) => {
+        const renderDate = (model, constraints = {}) => {
+            const httpClient = vi.fn();
+            const step = {
+                id: 'date',
+                title: 'Choose a date',
+                schemas: [
+                    {
+                        $id: '#dates',
+                        type: 'object',
+                        displayOrder: ['date'],
+                        required: ['date'],
+                        properties: {
+                            date: Object.assign(Object.assign({ type: 'date', control, title: 'Appointment date', minimum: '2026-09-01', maximum: '2026-09-30' }, constraints), { validationMessages: {
+                                    minimum: 'Choose a later date.',
+                                    maximum: 'Choose an earlier date.',
+                                } }),
+                        },
+                    },
+                ],
+                model: model === undefined ? undefined : { date: model },
+                layout: [
+                    { type: 'form', schemaId: '#dates' },
+                    { type: 'button', title: 'Submit', action: { url: '/submit' } },
+                ],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: step, onCompletion: vi.fn(), onError: vi.fn() }));
+            return { httpClient };
+        };
+        it('submits an entered or selected date in ISO form', async () => {
+            const { httpClient } = renderDate('2026-09-02');
+            if (control === 'date-input') {
+                await user.clear(screen.getByLabelText('Day'));
+                await user.type(screen.getByLabelText('Day'), '8');
+            }
+            else {
+                if (control === 'date-lookup') {
+                    await user.click(screen.getByRole('button', { name: /2 September 2026/u }));
+                }
+                await user.click(screen.getByRole('button', { name: /^8 September 2026/u }));
+            }
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({ body: '{"date":"2026-09-08"}' }));
+        });
+        it('blocks submission and shows validation for an empty required date', async () => {
+            const { httpClient } = renderDate();
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+            expect(httpClient).not.toHaveBeenCalled();
+        });
+        it.each([
+            { model: '2026-08-31', message: 'Choose a later date.' },
+            { model: '2026-10-01', message: 'Choose an earlier date.' },
+            {
+                model: '2026-09-07',
+                message: 'This date is a bank holiday.',
+                availability: {
+                    unavailable: [
+                        {
+                            type: 'dates',
+                            dates: ['2026-09-07'],
+                            reason: 'This date is a bank holiday.',
+                        },
+                    ],
+                },
+            },
+        ])('blocks submission of invalid server date $model', async (_a) => {
+            var { model, message } = _a, constraints = __rest(_a, ["model", "message"]);
+            const { httpClient } = renderDate(model, constraints);
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(screen.getByText(message)).toBeInTheDocument();
+            expect(httpClient).not.toHaveBeenCalled();
+        });
+    });
+});

package/build/tests/DecisionLayout.test.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('DecisionLayout component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const initialStep = {
+        id: 'step-id',
+        title: 'Step with decision',
+        layout: [
+            {
+                type: 'decision',
+                analyticsId: 'decision-layout-aid',
+                options: [
+                    {
+                        analyticsId: 'action-option-1-aid',
+                        title: 'Action Option',
+                        action: { url: '/action-option' },
+                        tag: 'action-option',
+                        additionalText: 'Additional text',
+                        inlineAlert: {
+                            context: 'warning',
+                            content: 'This is an inline alert',
+                        },
+                    },
+                    {
+                        analyticsId: 'action-option-2-aid',
+                        title: 'Behavior Action Option',
+                        behavior: {
+                            type: 'action',
+                            action: { url: '/behavior-action' },
+                        },
+                        tag: 'behavior-action-option',
+                    },
+                    {
+                        analyticsId: 'action-option-3-aid',
+                        title: 'Behavior Link Option',
+                        behavior: {
+                            type: 'link',
+                            url: '/behavior-link',
+                        },
+                        tag: 'behavior-link-option',
+                    },
+                ],
+            },
+        ],
+        schemas: [],
+    };
+    describe('Legacy action', () => {
+        describe('Given a decision layout component with an action', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            it('should render a button that triggers the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Action Option' })).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: 'Action Option' }));
+                expect(props.httpClient).toHaveBeenCalledWith('/action-option', expect.any(Object));
+            });
+        });
+    });
+    describe('New "union type" behavior type', () => {
+        describe('Given a decision layout component with a link behavior', () => {
+            const onLink = vi.fn();
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { onLink,
+                initialStep });
+            it('should render a link that opens the url on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('link', { name: 'Behavior Link Option' })).toBeInTheDocument();
+                });
+                expect(screen.getByRole('link', { name: 'Behavior Link Option' })).toHaveAttribute('href', '/behavior-link');
+            });
+        });
+        describe('Given a decision layout component with an action behavior', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            it('should trigger the action on click', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: 'Behavior Action Option' })).toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: 'Behavior Action Option' }));
+                expect(props.httpClient).toHaveBeenCalledWith('/behavior-action', expect.any(Object));
+            });
+        });
+    });
+    describe('Extra props', () => {
+        const customRenderer = {
+            canRenderType: 'decision',
+            render: vi.fn(),
+        };
+        it('should pass the tag in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({ tag: 'action-option' }),
+                    expect.objectContaining({ tag: 'behavior-action-option' }),
+                    expect.objectContaining({ tag: 'behavior-link-option' }),
+                ]),
+            }));
+        });
+        it('should pass the additional text, supporting values, and inline alert in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({ additionalText: 'Additional text' }),
+                ]),
+            }));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                options: expect.arrayContaining([
+                    expect.objectContaining({
+                        inlineAlert: {
+                            context: 'warning',
+                            content: 'This is an inline alert',
+                        },
+                    }),
+                ]),
+            }));
+        });
+        it('should pass the analyticsId in each option to the renderer', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { renderers: [customRenderer] })));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                analyticsId: 'decision-layout-aid',
+                options: expect.arrayContaining([
+                    expect.objectContaining({ analyticsId: 'action-option-1-aid' }),
+                    expect.objectContaining({ analyticsId: 'action-option-2-aid' }),
+                    expect.objectContaining({ analyticsId: 'action-option-3-aid' }),
+                ]),
+            }));
+        });
+    });
+});

package/build/tests/DelayBehavior.test.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders, respondWith, respondWithEmptyOk } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('DelayBehavior', () => {
+    describe('given an action behavior', () => {
+        it('executes the action after the delay', async () => {
+            const httpClient = vi
+                .fn()
+                .mockImplementation(() => respondWith({ title: 'New step', layout: [], schemas: [], id: 'newStepId' }));
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [{ type: 'button', title: 'Blocked' }],
+                onLoad: {
+                    type: 'delay',
+                    duration: 2,
+                    behavior: { type: 'action', action: { url: '/submit', method: 'POST' } },
+                },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByRole('button', { name: 'Blocked' })).toBeDisabled();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(httpClient).not.toHaveBeenCalled();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.anything());
+            expect(screen.getByText('New step')).toBeInTheDocument();
+        });
+        it('executes the action, triggering validation if the form is invalid', async () => {
+            const httpClient = vi.fn();
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [
+                    {
+                        $id: '#form',
+                        type: 'string',
+                        title: 'Name',
+                    },
+                ],
+                layout: [{ type: 'form', schemaId: '#form' }],
+                onLoad: {
+                    type: 'delay',
+                    duration: 2,
+                    behavior: { type: 'action', action: { url: '/submit', method: 'POST' } },
+                },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(screen.getByText('Please fill out this field.')).toBeInTheDocument();
+        });
+    });
+    describe('given a link behavior', () => {
+        it('executes the wrapped behavior after the duration in seconds', async () => {
+            const onLink = vi.fn();
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [{ type: 'button', title: 'Blocked' }],
+                onLoad: {
+                    type: 'delay',
+                    duration: 2,
+                    behavior: { type: 'link', url: 'https://wise.com' },
+                },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onLink: onLink }));
+            expect(screen.getByRole('button', { name: 'Blocked' })).toBeDisabled();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(onLink).not.toHaveBeenCalled();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(onLink).toHaveBeenCalledWith('https://wise.com');
+            expect(screen.getByRole('button', { name: 'Blocked' })).toBeEnabled();
+        });
+        it('allows the wrapped action to execute while the delay is blocking the step', async () => {
+            const httpClient = vi.fn(respondWithEmptyOk);
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [
+                    {
+                        type: 'button',
+                        title: 'Continue',
+                        behavior: {
+                            type: 'delay',
+                            duration: 1,
+                            behavior: { type: 'action', action: { url: '/continue' } },
+                        },
+                    },
+                ],
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+            await user.click(screen.getByRole('button', { name: 'Continue' }));
+            expect(httpClient).not.toHaveBeenCalled();
+            await act(async () => vi.advanceTimersByTimeAsync(1000));
+            expect(httpClient).toHaveBeenCalledWith('/continue', expect.anything());
+        });
+        it('cancels a pending delay when the flow is unmounted', async () => {
+            const onLink = vi.fn();
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [],
+                onLoad: {
+                    type: 'delay',
+                    duration: 1,
+                    behavior: { type: 'link', url: 'https://wise.com' },
+                },
+            };
+            const { unmount } = renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onLink: onLink }));
+            unmount();
+            await act(async () => vi.runAllTimersAsync());
+            expect(onLink).not.toHaveBeenCalled();
+        });
+        it('shows a confirmation modal when link opening fails, and the button is re-enabled', async () => {
+            const onLink = vi.fn().mockReturnValueOnce(false);
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [
+                    {
+                        type: 'button',
+                        title: 'Continue',
+                        behavior: {
+                            type: 'action',
+                            action: {},
+                        },
+                    },
+                ],
+                onLoad: {
+                    type: 'delay',
+                    duration: 1,
+                    behavior: { type: 'link', url: 'https://wise.com' },
+                },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onLink: onLink }));
+            await act(async () => vi.runAllTimersAsync());
+            expect(onLink).toHaveBeenCalled();
+            await waitFor(() => {
+                expect(screen.getByText(/Please confirm you want to open/)).toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', { name: 'Continue' })).toBeEnabled();
+        });
+        it('overrides the confirmation dialog from external', async () => {
+            const onLink = vi.fn().mockReturnValue(false);
+            const step = {
+                id: 'step',
+                title: 'Step',
+                schemas: [],
+                layout: [
+                    {
+                        type: 'button',
+                        title: 'Continue',
+                        behavior: {
+                            type: 'delay',
+                            duration: 5,
+                            behavior: { type: 'link', url: 'https://wise2.com' },
+                        },
+                    },
+                ],
+                external: {
+                    url: 'https://wise.com',
+                },
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn(), onLink: onLink }));
+            expect(onLink).toHaveBeenCalledOnce();
+            expect(onLink).toHaveBeenCalledWith('https://wise.com');
+            expect(screen.getByText(/Please confirm you want to open/)).toBeInTheDocument();
+            expect(screen.getByText('https://wise.com')).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Continue' }));
+            await act(async () => vi.advanceTimersByTimeAsync(5000));
+            expect(onLink).toHaveBeenCalledTimes(2);
+            expect(onLink).toHaveBeenCalledWith('https://wise2.com');
+            expect(screen.getByText(/Please confirm you want to open/)).toBeInTheDocument();
+            expect(screen.getByText('https://wise2.com')).toBeInTheDocument();
+        });
+    });
+});