@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/domain/components/collectionComponent/CollectionComponent.test.js

@@ -0,0 +1,286 @@
+import { vi } from 'vitest';
+import { wait } from '../../../test-utils';
+import { createCollectionComponent } from './CollectionComponent';
+const DEBOUNCE_TIME = 800;
+const defaultState = {
+    sections: [
+        {
+            id: 'section-1',
+            title: 'Results',
+            items: [
+                { id: 'item-one', title: 'Item 1', description: 'Description 1' },
+                { id: 'item-two', title: 'Item 2', description: 'Description 2' },
+            ],
+        },
+    ],
+    filters: [
+        {
+            type: 'select',
+            param: 'category',
+            options: [
+                { value: 'opt-1', title: 'Option 1', selected: false, onSelect: vi.fn() },
+                { value: 'opt-2', title: 'Option 2', selected: false, onSelect: vi.fn() },
+            ],
+        },
+    ],
+    search: {
+        param: 'q',
+        query: '',
+        onChange: vi.fn(),
+        hint: 'Search...',
+    },
+    analytics: {},
+};
+const createDefaultComponent = (overrides = {}, searchFunction = vi.fn()) => {
+    const onComponentUpdate = vi.fn();
+    const component = createCollectionComponent(Object.assign({ uid: 'collection-1', analyticsId: 'collection-aid', control: undefined, margin: 'md', tags: [], state: defaultState, search: { param: 'q', hint: 'Search...' } }, overrides), onComponentUpdate, searchFunction, vi.fn());
+    return { component, onComponentUpdate, searchFunction };
+};
+describe('CollectionComponent', () => {
+    describe('initial state', () => {
+        it('creates a component with idle status and sections', () => {
+            const { component } = createDefaultComponent();
+            expect(component.type).toBe('collection');
+            expect(component.kind).toBe('layout');
+            expect(component.status.type).toBe('idle');
+            expect(component.state.sections).toHaveLength(1);
+            expect(component.state.sections[0].items).toHaveLength(2);
+        });
+        it('provides a loadMore function when nextCursor is present', () => {
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'cursor-1' }),
+            });
+            expect(component.status.type).toBe('idle');
+            expect(component.status.loadMore).toBeDefined();
+        });
+        it('does not provide loadMore when there is no nextCursor', () => {
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { nextCursor: undefined }),
+            });
+            expect(component.status.type).toBe('idle');
+            expect(component.status.loadMore).toBeUndefined();
+        });
+    });
+    describe('search', () => {
+        it('updates the query state immediately on onChange', () => {
+            var _a, _b;
+            const { component } = createDefaultComponent();
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('hello');
+            expect((_b = component.state.search) === null || _b === void 0 ? void 0 : _b.query).toBe('hello');
+        });
+        it('sets status to loading when search begins', () => {
+            var _a;
+            const { component } = createDefaultComponent();
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('hello');
+            expect(component.status).toEqual({ type: 'loading', reason: 'search' });
+        });
+        it('debounces the search query call', () => {
+            var _a;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('hello');
+            expect(searchFunction).not.toHaveBeenCalled();
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(searchFunction).toHaveBeenCalledTimes(1);
+        });
+        it('passes the search query to the search function', () => {
+            var _a;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('test query');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(searchFunction).toHaveBeenCalledWith(expect.objectContaining({
+                searchParam: 'q',
+                query: 'test query',
+            }));
+        });
+        it('updates state with search results on success', async () => {
+            var _a;
+            const response = {
+                sections: [
+                    {
+                        id: 'section-1',
+                        title: 'Search Results',
+                        items: [{ id: 'found', title: 'Found Item' }],
+                    },
+                ],
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.status.type).toBe('idle');
+            expect(component.state.sections[0].items[0].title).toBe('Found Item');
+        });
+        it('sets error status with reason "search" on failure', async () => {
+            var _a;
+            const searchFunction = vi.fn().mockRejectedValue(new Error('network error'));
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.status.type).toBe('error');
+            expect(component.status.reason).toBe('search');
+        });
+        it('provides a retry function on error', async () => {
+            var _a;
+            const searchFunction = vi.fn().mockRejectedValueOnce(new Error('fail'));
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('query');
+            await vi.advanceTimersByTimeAsync(DEBOUNCE_TIME);
+            expect(component.status.type).toBe('error');
+            const errorStatus = component.status;
+            expect(errorStatus.retry).toBeDefined();
+        });
+    });
+    describe('filters', () => {
+        it('maps filters with onSelect callbacks', () => {
+            var _a, _b;
+            const { component } = createDefaultComponent();
+            expect(component.state.filters).toHaveLength(1);
+            expect((_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[0].options[0].onSelect).toBeDefined();
+            expect((_b = component.state.filters) === null || _b === void 0 ? void 0 : _b[0].options[1].onSelect).toBeDefined();
+        });
+        it('sets status to loading and triggers query when a filter is selected', () => {
+            var _a;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[0].options[0].onSelect();
+            expect(component.status).toEqual({ type: 'loading', reason: 'search' });
+            expect(searchFunction).toHaveBeenCalledTimes(1);
+        });
+        it('toggles the selected state for single-selection filters', () => {
+            var _a, _b, _c;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[0].options[0].onSelect();
+            expect((_b = component.state.filters) === null || _b === void 0 ? void 0 : _b[0].options[0].selected).toBe(true);
+            expect((_c = component.state.filters) === null || _c === void 0 ? void 0 : _c[0].options[1].selected).toBe(false);
+        });
+        it('deselects other options in a single-selection filter', () => {
+            var _a, _b, _c, _d;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[0].options[0].onSelect();
+            (_b = component.state.filters) === null || _b === void 0 ? void 0 : _b[0].options[1].onSelect();
+            expect((_c = component.state.filters) === null || _c === void 0 ? void 0 : _c[0].options[0].selected).toBe(false);
+            expect((_d = component.state.filters) === null || _d === void 0 ? void 0 : _d[0].options[1].selected).toBe(true);
+        });
+        it('allows multiple selections for multi-selection filters', () => {
+            var _a, _b, _c, _d;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({
+                state: Object.assign(Object.assign({}, defaultState), { filters: [
+                        {
+                            type: 'select',
+                            param: 'tags',
+                            multiSelect: true,
+                            options: [
+                                { value: 'a', title: 'A', selected: false, onSelect: vi.fn() },
+                                { value: 'b', title: 'B', selected: false, onSelect: vi.fn() },
+                            ],
+                        },
+                    ] }),
+            }, searchFunction);
+            (_a = component.state.filters) === null || _a === void 0 ? void 0 : _a[0].options[0].onSelect();
+            (_b = component.state.filters) === null || _b === void 0 ? void 0 : _b[0].options[1].onSelect();
+            expect((_c = component.state.filters) === null || _c === void 0 ? void 0 : _c[0].options[0].selected).toBe(true);
+            expect((_d = component.state.filters) === null || _d === void 0 ? void 0 : _d[0].options[1].selected).toBe(true);
+        });
+    });
+    describe('pagination', () => {
+        it('calls search function with cursor when loadMore is triggered', () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockResolvedValue(null);
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            assert(component.status.type === 'idle');
+            (_b = (_a = component.status).loadMore) === null || _b === void 0 ? void 0 : _b.call(_a);
+            expect(searchFunction).toHaveBeenCalledWith(expect.objectContaining({ cursor: 'page-2' }));
+        });
+        it('sets error with reason "pagination" when loadMore fails', async () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockRejectedValue(new Error('fail'));
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            (_b = (_a = component.status).loadMore) === null || _b === void 0 ? void 0 : _b.call(_a);
+            await vi.advanceTimersByTimeAsync(0);
+            expect(component.status.type).toBe('error');
+            expect(component.status.reason).toBe('pagination');
+        });
+        it('provides a new loadMore when response has a nextCursor', async () => {
+            var _a, _b;
+            const response = {
+                sections: [{ id: 'section-1', items: [{ id: 'page-2-item', title: 'Page 2 Item' }] }],
+                nextCursor: 'page-3',
+                analytics: {},
+            };
+            const searchFunction = vi.fn().mockResolvedValue(response);
+            const { component } = createDefaultComponent({ state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2' }) }, searchFunction);
+            (_b = (_a = component.status).loadMore) === null || _b === void 0 ? void 0 : _b.call(_a);
+            await vi.advanceTimersByTimeAsync(0);
+            expect(component.status.type).toBe('idle');
+            expect(component.status.loadMore).toBeDefined();
+        });
+    });
+    it('uses the incoming section callToAction when a paginated response contains an existing section id', async () => {
+        var _a, _b, _c;
+        const oldSectionCallToAction = {
+            type: 'link',
+            title: 'Old Section Link',
+            href: 'https://old-section-link.com',
+            hrefWithTracking: vi.fn(() => ({
+                href: 'https://old-section-link.com',
+                target: '_blank',
+                onClick: undefined,
+            })),
+            onClick: vi.fn(),
+        };
+        const newSectionCallToAction = {
+            type: 'link',
+            title: 'New Section Link',
+            href: 'https://new-section-link.com',
+            hrefWithTracking: vi.fn(() => ({
+                href: 'https://new-section-link.com',
+                target: '_blank',
+                onClick: undefined,
+            })),
+            onClick: vi.fn(),
+        };
+        const response = {
+            sections: [
+                {
+                    id: 'section-1',
+                    callToAction: newSectionCallToAction,
+                    items: [{ id: 'page-2-item', title: 'Page 2 Item' }],
+                },
+            ],
+            analytics: {},
+        };
+        const searchFunction = vi.fn().mockResolvedValue(response);
+        const { component } = createDefaultComponent({
+            state: Object.assign(Object.assign({}, defaultState), { nextCursor: 'page-2', sections: [
+                    Object.assign(Object.assign({}, defaultState.sections[0]), { callToAction: oldSectionCallToAction }),
+                ] }),
+        }, searchFunction);
+        (_b = (_a = component.status).loadMore) === null || _b === void 0 ? void 0 : _b.call(_a);
+        await vi.advanceTimersByTimeAsync(0);
+        expect((_c = component.state.sections[0].callToAction) === null || _c === void 0 ? void 0 : _c.title).toBe('New Section Link');
+        expect(component.state.sections[0].callToAction).toBe(newSectionCallToAction);
+    });
+    describe('abort behavior', () => {
+        it('aborts previous request when a new search is triggered', () => {
+            var _a, _b;
+            const searchFunction = vi.fn().mockImplementation(async () => {
+                await wait(1000);
+                return null;
+            });
+            const { component } = createDefaultComponent({}, searchFunction);
+            (_a = component.state.search) === null || _a === void 0 ? void 0 : _a.onChange('first');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            const firstSignal = searchFunction.mock.calls[0][0].signal;
+            (_b = component.state.search) === null || _b === void 0 ? void 0 : _b.onChange('second');
+            vi.advanceTimersByTime(DEBOUNCE_TIME);
+            expect(firstSignal.aborted).toBe(true);
+        });
+    });
+});

package/build/domain/components/collectionComponent/types.js

@@ -0,0 +1 @@
+export {};

package/build/domain/components/searchComponent/SearchComponent.js

@@ -0,0 +1,91 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+import { debounce } from '../utils/debounce';
+const DEBOUNCE_TIME = 400;
+export const createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate) => {
+    const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = props;
+    const update = getInputUpdateFunction(onComponentUpdate);
+    let abortController = new AbortController();
+    const search = (component, query, searchConfig) => {
+        abortController.abort();
+        abortController = new AbortController();
+        const { signal } = abortController;
+        performSearch({
+            signal,
+            query,
+            config: searchConfig,
+        })
+            .then((state) => {
+            if (!signal.aborted) {
+                update(component, (draft) => {
+                    draft.state = state !== null && state !== void 0 ? state : initialState;
+                    draft.isLoading = false;
+                    draft.error = undefined;
+                });
+            }
+        })
+            .catch(() => {
+            if (!signal.aborted) {
+                update(component, (draft) => {
+                    draft.error = 'No response';
+                    draft.isLoading = false;
+                });
+            }
+        });
+    };
+    const debouncedSearch = debounce(search, DEBOUNCE_TIME);
+    const component = {
+        type: 'search',
+        kind: 'layout',
+        uid,
+        analyticsId,
+        control,
+        emptyMessage,
+        initialState,
+        hint,
+        margin,
+        state: initialState,
+        tags,
+        title,
+        isLoading: false,
+        query: '',
+        setQuery(query) {
+            if (query.trim()) {
+                update(component, (draft) => {
+                    draft.query = query;
+                    draft.isLoading = true;
+                });
+                debouncedSearch(component, query.trim());
+            }
+            else {
+                // if the query is empty, we want to reset to the initial state immediately
+                abortController.abort();
+                debouncedSearch.cancel();
+                update(component, (draft) => {
+                    draft.query = query;
+                    draft.state = initialState;
+                    draft.isLoading = false;
+                    draft.error = undefined;
+                });
+            }
+        },
+        selectResult({ type, value }) {
+            if (type === 'action') {
+                void onBehavior({ type: 'action', action: value, track: false });
+            }
+            else {
+                update(component, (draft) => {
+                    draft.query = value.query;
+                    draft.isLoading = true;
+                });
+                search(component, value.query, {
+                    method: value.method,
+                    param: value.param,
+                    url: value.url,
+                });
+            }
+        },
+        start() { },
+        stop() { },
+    };
+    return component;
+};

package/build/domain/components/searchComponent/SearchComponent.test.js

@@ -0,0 +1,190 @@
+import { vi } from 'vitest';
+import { wait } from '../../../test-utils';
+import { getUpdateFunctionMock } from '../../mappers/schema/tests/test-utils';
+import { createMarkdownComponent } from '../MarkdownComponent';
+import { createSearchComponent } from './SearchComponent';
+const defaultSearchProps = {
+    uid: '0',
+    emptyMessage: '',
+    initialState: { type: 'layout', content: [] },
+    margin: 'md',
+    title: 'title',
+};
+describe('SearchComponent', () => {
+    describe('when setQuery is called', () => {
+        it('searching is debounced', () => {
+            const performSearch = vi.fn().mockImplementation(async () => Promise.resolve([]));
+            const onAction = vi.fn();
+            const mockUpdateFunction = getUpdateFunctionMock(() => component);
+            const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+            component.setQuery('query');
+            expect(performSearch).toHaveBeenCalledTimes(0);
+            vi.advanceTimersByTime(500);
+            expect(performSearch).toHaveBeenCalledTimes(1);
+        });
+        it('updates the query state immediately', () => {
+            const performSearch = vi
+                .fn()
+                .mockImplementation(async () => Promise.resolve({ type: 'noResults' }));
+            const onAction = vi.fn();
+            const mockUpdateFunction = getUpdateFunctionMock(() => component);
+            const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+            component.setQuery('query');
+            expect(performSearch).toHaveBeenCalledTimes(0);
+            expect(component.query).toBe('query');
+        });
+        describe('after debouncing', () => {
+            it('performs a search', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    return Promise.resolve({ type: 'noResults' });
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.setQuery('query');
+                await vi.advanceTimersByTimeAsync(1000); // debounce time
+                expect(performSearch).toHaveBeenCalled();
+            });
+            it('sets isLoading when search begins, and when search ends sets isLoading to false', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    await wait(1000);
+                    return Promise.resolve({ type: 'noResults' });
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.setQuery('query');
+                await vi.advanceTimersByTimeAsync(500);
+                expect(performSearch).toHaveBeenCalled();
+                expect(component.isLoading).toBe(true);
+                await vi.advanceTimersByTimeAsync(1000);
+                expect(component.isLoading).toBe(false);
+            });
+        });
+        describe('when a valid response is received', () => {
+            describe('and the response is the results type', () => {
+                describe('and results is non-empty', () => {
+                    it('updates results', async () => {
+                        const performSearch = vi.fn().mockImplementation(async () => Promise.resolve({
+                            type: 'results',
+                            results: [{ type: 'action', title: '', action: {} }],
+                        }));
+                        const onAction = vi.fn();
+                        const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                        const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                        component.setQuery('query');
+                        await vi.advanceTimersByTimeAsync(500);
+                        expect(performSearch).toHaveBeenCalled();
+                        expect(component.isLoading).toBe(false);
+                        expect(component.state).toStrictEqual(expect.objectContaining({
+                            type: 'results',
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                            results: expect.arrayContaining([expect.objectContaining({ type: 'action' })]),
+                        }));
+                    });
+                });
+                describe('and results is empty', () => {
+                    it('updates results', async () => {
+                        const performSearch = vi
+                            .fn()
+                            .mockImplementation(async () => Promise.resolve({ type: 'results', results: [] }));
+                        const onAction = vi.fn();
+                        const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                        const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                        component.setQuery('query');
+                        await vi.advanceTimersByTimeAsync(500);
+                        expect(performSearch).toHaveBeenCalled();
+                        expect(component.isLoading).toBe(false);
+                        expect(component.state).toStrictEqual(expect.objectContaining({
+                            type: 'results',
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                            results: expect.arrayContaining([]),
+                        }));
+                    });
+                });
+            });
+            describe('and the response is the modern layout type', () => {
+                it('updates the state to contain the new layout', async () => {
+                    const performSearch = vi.fn().mockImplementation(async () => Promise.resolve({
+                        type: 'layout',
+                        content: [
+                            createMarkdownComponent({
+                                uid: 'markdown',
+                                margin: 'md',
+                                align: 'start',
+                                content: 'Here is some markdown',
+                                size: 'md',
+                            }),
+                        ],
+                    }));
+                    const onAction = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                    component.setQuery('query');
+                    await vi.advanceTimersByTimeAsync(500);
+                    expect(performSearch).toHaveBeenCalled();
+                    expect(component.isLoading).toBe(false);
+                    expect(component.state).toStrictEqual(expect.objectContaining({
+                        type: 'layout',
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                        content: expect.arrayContaining([
+                            expect.objectContaining({ type: 'markdown', content: 'Here is some markdown' }),
+                        ]),
+                    }));
+                });
+            });
+        });
+        describe('when an invalid response is received', () => {
+            it('sets error string', async () => {
+                const performSearch = vi.fn().mockImplementation(async () => {
+                    throw Error('cannot parse response');
+                });
+                const onAction = vi.fn();
+                const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                component.setQuery('query');
+                await vi.advanceTimersByTimeAsync(500);
+                expect(performSearch).toHaveBeenCalled();
+                expect(component.isLoading).toBe(false);
+                expect(component.error).toBeDefined();
+            });
+        });
+        describe('when onClick is called', () => {
+            describe('on an `action` result', () => {
+                it('calls onAction with the result', async () => {
+                    const performSearch = vi.fn();
+                    const onBehavior = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onBehavior, mockUpdateFunction);
+                    component.selectResult({
+                        type: 'action',
+                        title: 'title',
+                        value: { id: 'selected-action-id' },
+                    });
+                    expect(onBehavior).toHaveBeenCalledWith(expect.objectContaining({ type: 'action', action: { id: 'selected-action-id' } }));
+                });
+            });
+            describe('on a `search` result', () => {
+                it('performs a search with the new config', async () => {
+                    const performSearch = vi.fn().mockImplementation(async () => Promise.resolve([]));
+                    const onAction = vi.fn();
+                    const mockUpdateFunction = getUpdateFunctionMock(() => component);
+                    const component = createSearchComponent(defaultSearchProps, performSearch, onAction, mockUpdateFunction);
+                    component.selectResult({
+                        type: 'search',
+                        title: 'title',
+                        value: { url: '/new-search', param: 'query', method: 'GET', query: 'new' },
+                    });
+                    expect(performSearch).toHaveBeenCalledWith(expect.objectContaining({
+                        query: 'new',
+                        config: expect.objectContaining({
+                            url: '/new-search',
+                            method: 'GET',
+                            param: 'query',
+                        }),
+                    }));
+                });
+            });
+        });
+    });
+});

package/build/domain/components/step/ExternalConfirmationComponent.js

@@ -0,0 +1,27 @@
+import { getInputUpdateFunction } from '../utils/component-utils';
+export const createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
+    const update = getInputUpdateFunction(onComponentUpdate);
+    const component = {
+        type: 'external-confirmation',
+        kind: 'layout',
+        uid,
+        url,
+        status: 'initial',
+        open() {
+            if (component.status === 'initial' || component.status === 'failure') {
+                const success = onLink(component.url);
+                update(component, (draft) => {
+                    draft.status = success ? 'success' : 'failure';
+                });
+            }
+        },
+        onCancel() {
+            update(component, (draft) => {
+                draft.status = 'dismissed';
+            });
+        },
+        start() { },
+        stop() { },
+    };
+    return component;
+};