@wise/dynamic-flow-client-internal 5.31.0-experimental-a2135d6 → 5.31.0

package/build/stories/DynamicFlowWithRef.story.js

@@ -0,0 +1,72 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { Button } from '@transferwise/components';
+import { useRef, useState } from 'react';
+import { DynamicFlowWithRef } from '..';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+const step = {
+    id: 'dynamic-form-story',
+    title: 'Dynamic Form',
+    schemas: [
+        {
+            $id: '#form',
+            type: 'object',
+            displayOrder: ['name', 'city'],
+            required: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name', minLength: 2 },
+                city: {
+                    title: 'City',
+                    oneOf: [
+                        { title: 'London', const: 'London', icon: { name: 'flag-gb' } },
+                        { title: 'Paris', const: 'Paris', icon: { name: 'flag-fr' } },
+                        { title: 'New York', const: 'New York', icon: { name: 'flag-us' } },
+                    ],
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+    ],
+};
+function DynamicFlowWithRefStory() {
+    const ref = useRef(null);
+    const props = {
+        flowId: 'storybook',
+        analyticsId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onValueChange: action('onValueChange'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    const [currentValue, setCurrentValue] = useState('');
+    const [isValid, setValid] = useState(null);
+    const backgroundColor = isValid === null ? '#eeeeee' : isValid ? '#eeffee' : '#ffeeee';
+    const validityText = isValid === null ? '' : isValid ? '✅ valid\n\n' : '❌ invalid\n\n';
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicFlowWithRef, Object.assign({ ref: ref }, props, { initialStep: step, onValueChange: async () => {
+                    var _a;
+                    var _b;
+                    const newValue = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : null;
+                    setCurrentValue(JSON.stringify(newValue, null, 2));
+                }, onCompletion: () => { } }), JSON.stringify(step)), _jsx(Button, { onClick: async () => {
+                    var _a;
+                    var _b;
+                    const ok = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false;
+                    setValid(ok);
+                }, children: "validate()" }), _jsx("hr", {}), _jsxs("pre", { style: { backgroundColor }, children: [validityText, currentValue] })] }));
+}
+const meta = {
+    title: 'Dynamic Form',
+    component: DynamicFlowWithRefStory,
+};
+export const AllFixtures = {
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/stories/Editable.story.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { layouts, schemas } from '@wise/dynamic-flow-fixtures';
+import { useMemo, useState } from 'react';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+const fixtures = Object.assign(Object.assign({}, schemas), layouts);
+export function Editable({ initialStepName = '' }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+function InteractiveDemo({ selectedInitialStep }) {
+    const [initialStatusCode, setInitialStatusCode] = useState(200);
+    const [initialStep, setInitialStep] = useState(selectedInitialStep);
+    const onTextAreaChange = (event) => {
+        setInitialStep(event.target.value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h3", { children: "Editable Demo" }), _jsx("p", { children: "You can specify a response status code and body, and DF will load your step below." }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "status-code", children: "Response Status code: " }), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "textarea", children: "Response Body:" }), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: '0.9em',
+                                    width: '100%',
+                                    maxHeight: '200px',
+                                }, value: initialStep, onChange: onTextAreaChange })] })] }), isValidJson(initialStep) ? (_jsx(DynamicFlow, { flowId: "storybook", customFetch: fetch, initialStep: JSON.parse(initialStep), onCompletion: action('onCompletion'), onError: (error) => {
+                    action('onError')(error);
+                    console.error(error);
+                } }, `${initialStep}-${initialStatusCode}`)) : null] }));
+}
+function InvalidJsonWarning({ initialStep }) {
+    const validJson = useMemo(() => isValidJson(initialStep), [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+const isValidJson = (value) => {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect({ id, state: [value, setValue], }) {
+    return (_jsxs("select", { id: id, value: value, onChange: (event) => setValue(Number.parseInt(event.target.value, 10)), children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] }));
+}
+export default {
+    component: Editable,
+    title: 'Multi-fixture',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+};

package/build/stories/Initialisation.story.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+export default {
+    title: 'Initialisation',
+    component: DynamicFlow,
+};
+const mockFetch = async (url, init) => {
+    action('mockFetch')(url, init);
+    switch (url) {
+        case '/first-step':
+            return new Response(JSON.stringify({
+                id: 'first-step',
+                title: 'First Step',
+                layout: [],
+                schemas: [],
+            }));
+        default:
+            return new Response(null, { status: 404 });
+    }
+};
+const onCompletion = action('onCompletion');
+const onError = action('onError');
+const onEvent = action('onEvent');
+const onLog = action('onLog');
+const initialActionValid = { method: 'GET', url: '/first-step' };
+export const InitialisationWithSuccessfulStep = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: mockFetch, initialAction: initialActionValid, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};
+const initialActionInvalid = { method: 'GET', url: '/invalid-step' };
+export const InitialisationWith404Step = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: mockFetch, initialAction: initialActionInvalid, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};

package/build/stories/PinnedButtons.story.js

@@ -0,0 +1,94 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { Modal, Button } from '@transferwise/components';
+import { useState } from 'react';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+const httpClient = async (input, init) => {
+    action('httpClient')(input, init);
+    return fetch(input, init);
+};
+export default {
+    component: DynamicFlow,
+    title: 'Revamp/Features/Pinned Buttons',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function Basic() {
+    return _jsx(DynamicFlow, Object.assign({}, defaultProps, { initialStep: getStep(20) }));
+}
+export function BasicMobileWeb() {
+    return _jsx(DynamicFlow, Object.assign({}, defaultProps, { initialStep: getStep(20) }));
+}
+BasicMobileWeb.globals = {
+    viewport: { value: 'mobile2' },
+};
+export function InAModal() {
+    const [open, setOpen] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal" }), _jsx(Modal, { title: "Modal Title", open: open, body: _jsx(DynamicFlow, Object.assign({}, defaultProps, { initialStep: getStep(10) })), onClose: () => setOpen(false) })] }));
+}
+export function InAModalMobileWeb() {
+    const [open, setOpen] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal (large phone)" }), _jsx(Modal, { title: "Modal Title", open: open, body: _jsx(DynamicFlow, Object.assign({}, defaultProps, { initialStep: getStep(10) })), onClose: () => setOpen(false) })] }));
+}
+InAModalMobileWeb.globals = {
+    viewport: { value: 'mobile2' },
+};
+export function InAModalInAModal() {
+    const [openFirst, setOpenFirst] = useState(true);
+    const [openSecond, setOpenSecond] = useState(true);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpenFirst(true), children: "Open First Modal" }), _jsx(Modal, { title: "First Modal", open: openFirst, body: _jsx(Button, { onClick: () => setOpenSecond(true), children: "Open Second Modal" }), scroll: "content", onClose: () => setOpenFirst(false) }), _jsx(Modal, { title: "Second Modal", open: openSecond, body: _jsx(DynamicFlow, Object.assign({}, defaultProps, { initialStep: getStep(10) })), scroll: "content", onClose: () => setOpenSecond(false) })] }));
+}
+const defaultProps = {
+    flowId: 'storybook',
+    httpClient,
+    loaderConfig: { size: 'xl', initial: true, submission: false },
+    features: {
+        pinnedButtons: true,
+    },
+    onCompletion: action('onCompletion'),
+    onError: action('onError'),
+    onEvent: action('onEvent'),
+    onLog: action('onLog'),
+};
+const getStep = (numberOfParagraphs) => ({
+    id: 'id',
+    title: 'Heading',
+    schemas: [],
+    layout: [
+        ...Array.from({ length: numberOfParagraphs }, () => ({
+            text: 'Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem. Lorem ipsum lorem ipsum amet, consectetur adipiscing elit. Toolbarum buttonis dynamicus flowus adaptare semper est laboriosum. Frustratio crescit cum mutationibus constantibus, et semper nova repositione buttonorum. Complexitas crescit, et usus seamless conservare fit arduum, quasi pugna contra interfaciem mutantem.',
+            type: 'paragraph',
+        })),
+        {
+            type: 'button',
+            title: 'I am the first pinned button',
+            control: 'primary',
+            action: {
+                url: '/v2/accounts',
+                method: 'POST',
+            },
+            pinOrder: 0,
+        },
+        {
+            type: 'button',
+            title: 'I am the second',
+            context: 'negative',
+            control: 'secondary',
+            action: {
+                url: '/v2/accounts',
+                method: 'POST',
+            },
+            pinOrder: 1,
+        },
+        {
+            type: 'button',
+            title: 'I am not pinned',
+            control: 'tertiary',
+            action: {
+                url: '/v2/accounts',
+                method: 'POST',
+            },
+        },
+    ],
+});

package/build/stories/SCAIntegration.story.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../index';
+import { useCallback } from 'react';
+export default {
+    component: DynamicFlow,
+    title: 'Dev Tools/Features',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function SCAIntegration() {
+    // const [isModalOpen, setIsModalOpen] = useState(false);
+    const customFetch = useCallback(async (input, init) => {
+        action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+        await wait(250);
+        // simulate SCARequest rejecting when user closes the modal
+        throw new Error('SCA_MODAL_CLOSED');
+    }, []);
+    return (_jsx(DynamicFlow, { flowId: "new-df-flow-id", customFetch: customFetch, initialStep: initialStep, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+            action('onError');
+            console.error(error);
+        } }));
+}
+const wait = async (ms) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true);
+        }, ms);
+    });
+};
+const initialStep = {
+    id: 'step-id',
+    title: 'Enter your email',
+    description: "When you submit we'll simulate the SCARequest rejecting with 'SCA_MODAL_CLOSED'",
+    schemas: [
+        {
+            $id: '#schema',
+            type: 'object',
+            displayOrder: ['key'],
+            properties: {
+                key: {
+                    minLength: 4,
+                    title: 'Email',
+                    control: 'email',
+                    type: 'string',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'paragraph',
+            text: 'There should be no error message in this page after submission.',
+            align: 'center',
+        },
+        { schemaId: '#schema', type: 'form' },
+        {
+            type: 'button',
+            title: 'Continue',
+            action: { url: '/submit' },
+            control: 'primary',
+        },
+    ],
+    navigation: { back: { title: 'Back', action: { url: '/go-back', method: 'GET' } } },
+};

package/build/stories/utils/fixtureHttpClient.js

@@ -0,0 +1,59 @@
+import { action } from 'storybook/actions';
+import { layouts, schemas, responses } from '@wise/dynamic-flow-fixtures';
+export const getObjectKeys = Object.keys;
+const fixtures = Object.assign(Object.assign({}, schemas), layouts);
+const isObject = (val) => typeof val === 'object' && val !== null;
+export const fixtureHttpClient = async (input, init) => {
+    action('httpClient')(input, init);
+    const url = getURL(input);
+    if (url.pathname.startsWith('/steps/')) {
+        return respondWithFixture(fixtures, url, init);
+    }
+    if (url.pathname.startsWith('/responses/')) {
+        return respondWithFixture(responses, url, init);
+    }
+    if (url.pathname.startsWith('/validate')) {
+        return new Response(JSON.stringify({ message: 'Validation-async OK' }));
+    }
+    return new Response(null, { status: 404 });
+};
+const getURL = (input) => {
+    if (input instanceof URL) {
+        return input;
+    }
+    if (input instanceof Request) {
+        return new URL(input.url, 'http://foo');
+    }
+    return new URL(input, 'http://foo');
+};
+const respondWithFixture = async (fixtureList, url, init) => {
+    var _a;
+    const fixtureNames = getObjectKeys(fixtureList);
+    const name = url.pathname
+        .split('/')
+        .filter((part) => Boolean(part))
+        .pop();
+    if (fixtureNames.includes(name !== null && name !== void 0 ? name : '')) {
+        const fixture = fixtureList[name];
+        // by convention if the url contains a "delay" query parameter, we delay the response
+        if (url.searchParams.has('delay')) {
+            await new Promise((resolve) => {
+                setTimeout(resolve, Number(url.searchParams.get('delay')));
+            });
+        }
+        // by convention if the url contains a "refresh"query parameterm we use the payload as model
+        if (url.searchParams.has('refresh') &&
+            (init === null || init === void 0 ? void 0 : init.body) &&
+            typeof init.body === 'string' &&
+            isObject(fixture)) {
+            const body = JSON.parse(init.body);
+            return new Response(JSON.stringify(Object.assign(Object.assign({}, fixture), { model: Object.assign(Object.assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })));
+        }
+        if (url.pathname.includes('exit')) {
+            return new Response(JSON.stringify(fixture), { headers: { 'X-DF-Exit': 'true' } });
+        }
+        return new Response(JSON.stringify(fixture));
+    }
+    action('ERROR 404')(url);
+    return new Response(null, { status: 404 });
+};

package/build/test-utils/NeptuneProviders.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider as ComponentProvider, DEFAULT_LANG, DEFAULT_LOCALE, SnackbarProvider, translations as componentTranslations, getLangFromLocale, } from '@transferwise/components';
+import { ThemeProvider } from '@wise/components-theming';
+import { translations } from '@wise/dynamic-flow-client';
+const locale = DEFAULT_LOCALE;
+const lang = getLangFromLocale(locale) || DEFAULT_LANG;
+const messages = Object.assign(Object.assign({}, componentTranslations[lang]), translations[lang]);
+function NeptuneProviders({ children }) {
+    return (_jsx(ThemeProvider, { theme: "personal", screenMode: "light", children: _jsx(SnackbarProvider, { children: _jsx(ComponentProvider, { i18n: { locale, messages }, children: children }) }) }));
+}
+export default NeptuneProviders;

package/build/test-utils/index.js

@@ -0,0 +1,4 @@
+export { default as NeptuneProviders } from './NeptuneProviders';
+export { renderWithProviders } from './rtl-utils';
+export { respondWith } from './respond-with';
+export { wait } from './wait';

package/build/test-utils/respond-with.js

@@ -0,0 +1,6 @@
+export const respondWith = async (data, init) => new Response(data == null ? null : JSON.stringify(data), init);
+export const respondWithDelay = async (data, delayMs, init) => new Promise((resolve) => {
+    setTimeout(() => {
+        resolve(new Response(JSON.stringify(data), init));
+    }, delayMs);
+});

package/build/test-utils/rtl-utils.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import NeptuneProviders from './NeptuneProviders';
+export const renderWithProviders = (children, options) => {
+    const renderedResult = render(_jsx(NeptuneProviders, { children: children }), options);
+    return Object.assign(Object.assign({}, renderedResult), { rerender: (ui, renderOptions) => renderWithProviders(ui, Object.assign({ container: renderedResult.container }, renderOptions)) });
+};

package/build/test-utils/wait.js

@@ -0,0 +1,3 @@
+export const wait = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});

package/build/tests/DynamicFlow.test.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { DynamicFlowWithRef } from '../dynamicFlow/DynamicFlowWithRef';
+import { renderWithProviders, wait } from '../test-utils';
+import { DynamicFlowModal } from '../dynamicFlow/DynamicFlowModal';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const cases = [
+    { name: 'DynamicFlow', DFComponent: DynamicFlow },
+    { name: 'DynamicFlowWithRef', DFComponent: DynamicFlowWithRef },
+    { name: 'DynamicFlowModal', DFComponent: DynamicFlowModal },
+];
+describe.each(cases)('Wise-Specific Headers', ({ name, DFComponent }) => {
+    it(`${name} - makes an initial request with additional RequestInit parameters, as specified in the wise-specific fetcher`, async () => {
+        const props = {
+            flowId: 'test',
+            initialAction: { url: '/initial' },
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        const customFetch = vi.fn();
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props, { customFetch: customFetch })));
+        await waitFor(() => {
+            expect(customFetch).toHaveBeenCalledWith('/initial', expect.anything());
+        });
+        const requestInit = customFetch.mock.calls[0][1];
+        const credentials = requestInit === null || requestInit === void 0 ? void 0 : requestInit.credentials;
+        expect(credentials).toBe('include');
+        const headers = Array.from(new Headers(requestInit === null || requestInit === void 0 ? void 0 : requestInit.headers).entries());
+        expect(headers).toContainEqual(['accept-language', 'en-GB']);
+        expect(headers).toContainEqual(['content-type', 'application/json']);
+    });
+});
+describe.each(cases)('Usage of customFetch function', ({ name, DFComponent }) => {
+    it(`${name} - uses provided customFetch for image-fetching`, async () => {
+        const props = {
+            flowId: 'test',
+            initialStep: {
+                id: 'step-id',
+                title: 'Image Step',
+                layout: [
+                    {
+                        type: 'image',
+                        url: '/image',
+                    },
+                ],
+                schemas: [],
+            },
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        const customFetch = vi.fn();
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props, { customFetch: customFetch })));
+        await waitFor(() => {
+            expect(customFetch).toHaveBeenCalledWith('/image', expect.anything());
+        });
+    });
+});
+describe.each(cases)('onEvent is triggered', ({ name, DFComponent }) => {
+    it(`${name} - triggers provided onEvent when an event is emitted`, async () => {
+        const props = {
+            flowId: 'test',
+            initialAction: { url: '/initial' },
+            customFetch: vi.fn(),
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        const onEvent = vi.fn();
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props, { onEvent: onEvent })));
+        await waitFor(() => {
+            expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Initiated', expect.objectContaining({ flowId: 'test', integrationId: 'test' }));
+        });
+    });
+});
+describe.each(cases)('Renderer Context', ({ name, DFComponent }) => {
+    it(`${name} - sets buttons to loading while submitting, and then re-enables them `, async () => {
+        const initialStep = {
+            id: 'initial-step',
+            title: 'Initial step',
+            layout: [{ type: 'button', title: 'Submit', action: { id: 'action-id', url: '/submit' } }],
+            schemas: [],
+            model: { name: 'Name', number: '12345' },
+        };
+        const customFetch = vi.fn().mockImplementation(async () => {
+            await wait(100);
+            return new Response(JSON.stringify({
+                id: 'next-step',
+                title: 'Next step',
+                layout: [
+                    { type: 'button', title: 'Finish', action: { id: 'action-id', url: '/submit' } },
+                ],
+                schemas: [],
+            }));
+        });
+        const props = {
+            flowId: 'test',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+            initialStep: initialStep,
+            customFetch,
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props)));
+        const submitButton = screen.getByRole('button', { name: 'Submit' });
+        await user.click(submitButton);
+        expect(submitButton).toHaveAttribute('aria-disabled', 'true');
+        await waitFor(() => {
+            const submitButton2 = screen.getByRole('button', { name: 'Finish' });
+            expect(submitButton2).toBeEnabled();
+        });
+    });
+    it(`${name} - re-enables button if validation fails`, async () => {
+        const initialStep = {
+            id: 'initial-step',
+            title: 'Initial step',
+            layout: [
+                { type: 'form', schemaId: '#schema' },
+                { type: 'button', title: 'Submit', action: { id: 'action-id', url: '/submit' } },
+            ],
+            schemas: [{ type: 'string', $id: '#schema', title: 'Name' }],
+        };
+        const customFetch = vi.fn();
+        const props = {
+            flowId: 'test',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+            initialStep: initialStep,
+            customFetch,
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props)));
+        const submitButton = screen.getByText('Submit');
+        await user.click(submitButton);
+        await waitFor(() => {
+            expect(submitButton).toBeEnabled();
+            expect(submitButton).not.toHaveAttribute('aria-busy', 'true');
+        });
+    });
+    it(`${name} - only shows loader on the button that was clicked`, async () => {
+        const initialStep = {
+            id: 'initial-step',
+            title: 'Initial step',
+            layout: [
+                { type: 'button', title: 'Submit', action: { id: 'action-id', url: '/submit' } },
+                { type: 'button', title: 'Continue', action: { id: 'action-id', url: '/submit' } },
+            ],
+            schemas: [],
+            model: { name: 'Name', number: '12345' },
+        };
+        const customFetch = vi.fn().mockImplementation(async () => {
+            return new Response(JSON.stringify({
+                id: 'next-step',
+                title: 'Next step',
+                layout: [
+                    { type: 'button', title: 'Finish', action: { id: 'action-id', url: '/submit' } },
+                ],
+                schemas: [],
+            }));
+        });
+        const props = {
+            flowId: 'test',
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+            initialStep: initialStep,
+            customFetch,
+            onCompletion: vi.fn(),
+            onError: vi.fn(),
+        };
+        renderWithProviders(_jsx(DFComponent, Object.assign({}, props)));
+        const submitButton = screen.getByRole('button', { name: 'Submit' });
+        const continueButton = screen.getByRole('button', { name: 'Continue' });
+        await user.click(submitButton);
+        expect(submitButton).toHaveAttribute('aria-disabled', 'true');
+        expect(continueButton).not.toHaveAttribute('aria-disabled', 'true');
+    });
+});

package/build/tests/HideStepTitle.test.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { renderWithProviders } from '../test-utils/rtl-utils';
+const props = {
+    flowId: 'test',
+    initialStep: {
+        id: 'step-id',
+        title: 'Step Title',
+        description: 'Step description.',
+        schemas: [],
+        layout: [],
+    },
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    customFetch: vi.fn(),
+};
+describe('When the "displayStepTitle" flag is set to "false"', () => {
+    it('hides the step title in the StepRenderer', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { displayStepTitle: false })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).not.toBeInTheDocument();
+    });
+});
+describe('When the "displayStepTitle" flag is set to "true"', () => {
+    it('shows the step title in the StepRenderer', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { displayStepTitle: true })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).toBeInTheDocument();
+    });
+});
+describe('When the "hideStepTitle" feature is provided', () => {
+    it('hides the step title in the StepRenderer', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { features: { hideStepTitle: true } })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).not.toBeInTheDocument();
+    });
+});
+describe('When the "hideStepTitle" feature is provided as "false"', () => {
+    it('shows the step title in the StepRenderer', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { features: { hideStepTitle: false } })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).toBeInTheDocument();
+    });
+});
+describe('When both "displayStepTitle" flag and "hideStepTitle" feature are provided', () => {
+    it('gives precedence to the "hideStepTitle" feature to hide the step title', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { displayStepTitle: true, features: { hideStepTitle: true } })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).not.toBeInTheDocument();
+    });
+    it('gives precedence to the "hideStepTitle" feature (even when false) to show the step title', () => {
+        renderWithProviders(_jsx(DynamicFlow, Object.assign({}, props, { displayStepTitle: true, features: { hideStepTitle: false } })));
+        expect(screen.queryByText('Step description.')).toBeInTheDocument();
+        expect(screen.queryByText('Step Title')).toBeInTheDocument();
+    });
+});