@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/Tags.test.js

@@ -0,0 +1,475 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable testing-library/render-result-naming-convention */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/no-array-index-key */
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const TagRenderer = ({ tags }) => _jsx("pre", { children: `tags:${JSON.stringify(tags)}` });
+const TagRendererWithItems = (props) => {
+    const { propName, tags } = props;
+    const items = props[propName];
+    return (_jsxs("div", { children: [_jsx(TagRenderer, { tags: tags }), items.map((item, i) => (_jsx(TagRenderer, { tags: item.tags }, `item-${i}`)))] }));
+};
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getStepForLayout = (layout) => ({
+    id: 'test-id',
+    title: 'Tags in Layout Test Step',
+    schemas: [{ $id: '#schema', const: 'value' }],
+    layout,
+});
+const getStepForSchema = (schema) => ({
+    id: 'test-id',
+    title: 'Tags in Schema Test Step',
+    schemas: [Object.assign(Object.assign({}, schema), { $id: '#schema' })],
+    layout: [{ type: 'form', schemaId: '#schema' }],
+});
+const getLayoutRenderers = () => [
+    { canRenderType: 'alert', render: TagRenderer },
+    { canRenderType: 'box', render: TagRenderer },
+    { canRenderType: 'button', render: TagRenderer },
+    { canRenderType: 'columns', render: TagRenderer },
+    { canRenderType: 'divider', render: TagRenderer },
+    { canRenderType: 'form', render: TagRenderer },
+    { canRenderType: 'heading', render: TagRenderer },
+    { canRenderType: 'image', render: TagRenderer },
+    { canRenderType: 'loading-indicator', render: TagRenderer },
+    { canRenderType: 'markdown', render: TagRenderer },
+    { canRenderType: 'modal-layout', render: TagRenderer },
+    { canRenderType: 'paragraph', render: TagRenderer },
+    { canRenderType: 'progress', render: TagRenderer },
+    { canRenderType: 'search', render: TagRenderer },
+];
+const getSchemaRenderers = () => [
+    { canRenderType: 'form-section', render: TagRenderer },
+    { canRenderType: 'repeatable', render: TagRenderer },
+    { canRenderType: 'input-upload', render: TagRenderer },
+    { canRenderType: 'input-upload-multi', render: TagRenderer },
+    { canRenderType: 'input-checkbox', render: TagRenderer },
+    { canRenderType: 'input-integer', render: TagRenderer },
+    { canRenderType: 'input-number', render: TagRenderer },
+    { canRenderType: 'input-select', render: TagRenderer },
+    { canRenderType: 'input-text', render: TagRenderer },
+];
+const getLayoutWithItemsRenderers = () => [
+    {
+        canRenderType: 'decision',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "options" })),
+    },
+    {
+        canRenderType: 'list',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "items" })),
+    },
+    {
+        canRenderType: 'status-list',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "items" })),
+    },
+    {
+        canRenderType: 'instructions',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "items" })),
+    },
+    {
+        canRenderType: 'review',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "fields" })),
+    },
+    {
+        canRenderType: 'tabs',
+        render: (props) => _jsx(TagRendererWithItems, Object.assign({}, props, { propName: "tabs" })),
+    },
+];
+describe('Tags', () => {
+    describe('Step and Toolbar', () => {
+        const renderers = [
+            {
+                canRenderType: 'step',
+                render: ({ tags, toolbar }) => {
+                    return (_jsxs("div", { children: [_jsx(TagRenderer, { tags: tags }), (toolbar === null || toolbar === void 0 ? void 0 : toolbar.tags) && _jsx(TagRenderer, { tags: toolbar.tags }), toolbar === null || toolbar === void 0 ? void 0 : toolbar.items.map((toolbarItem) => {
+                                var _a;
+                                return (_jsx(TagRenderer, { tags: toolbarItem.tags }, (_a = toolbarItem.tags) === null || _a === void 0 ? void 0 : _a.join()));
+                            })] }));
+                },
+            },
+        ];
+        const initialStep = {
+            id: 'test-id',
+            title: 'Tags in Step',
+            tags: ['step-tag-1', 'step-tag-2'],
+            toolbar: {
+                tags: ['toolbar-tag-1', 'toolbar-tag-2'],
+                items: [
+                    {
+                        type: 'toolbar-button',
+                        title: '',
+                        behavior: { type: 'refresh' },
+                        tags: ['toolbar-button-tag-1', 'toolbar-button-tag-2'],
+                    },
+                ],
+            },
+            schemas: [],
+            layout: [],
+        };
+        it('passes the step.tags array to the StepRendererProps object', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["step-tag-1","step-tag-2"\]/)).toBeInTheDocument();
+        });
+        it('passes the tags for the toolbar', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["toolbar-tag-1","toolbar-tag-2"\]/)).toBeInTheDocument();
+        });
+        it('passes the tags for the toolbar buttons', () => {
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["toolbar-button-tag-1","toolbar-button-tag-2"\]/)).toBeInTheDocument();
+        });
+    });
+    describe('Layout Components', () => {
+        const renderers = getLayoutRenderers();
+        const cases = [
+            ['AlertLayout', [{ type: 'alert', markdown: 'Hello', tags: ['tag1', 'tag2'] }]],
+            ['BoxLayout', [{ type: 'box', components: [], tags: ['tag1', 'tag2'] }]],
+            ['ButtonLayout', [{ type: 'button', title: 'Click Me', tags: ['tag1', 'tag2'], behavior: { type: 'action', action: { url: '/test' } } }]],
+            ['ColumnsLayout', [{ type: 'columns', left: [], right: [], tags: ['tag1', 'tag2'] }]],
+            ['DividerLayout', [{ type: 'divider', tags: ['tag1', 'tag2'] }]],
+            ['FormLayout', [{ type: 'form', schemaId: '#schema', tags: ['tag1', 'tag2'] }]],
+            ['HeadingLayout', [{ type: 'heading', text: 'Heading 1', tags: ['tag1', 'tag2'] }]],
+            ['ImageLayout', [{ type: 'image', tags: ['tag1', 'tag2'] }]],
+            ['InfoLayout', [{ type: 'info', markdown: 'markdown', tags: ['tag1', 'tag2'] }]],
+            ['LoadingIndicatorLayout', [{ type: 'loading-indicator', tags: ['tag1', 'tag2'] }]],
+            ['MarkdownLayout', [{ type: 'markdown', content: 'markdown', tags: ['tag1', 'tag2'] }]],
+            [
+                'ModalLayout',
+                [
+                    {
+                        type: 'modal',
+                        trigger: { title: '' },
+                        content: { components: [] },
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            ['ParagraphLayout', [{ type: 'paragraph', text: 'Paragraph 1', tags: ['tag1', 'tag2'] }]],
+            [
+                'ProgressLayout',
+                [{ type: 'progress', progressText: '50%', progress: 0.5, tags: ['tag1', 'tag2'] }],
+            ],
+            [
+                'SearchLayout',
+                [{ type: 'search', title: '', method: 'POST', url: '', param: '', tags: ['tag1', 'tag2'] }],
+            ],
+        ];
+        test.each(cases)('%s passes tags to its renderer', (n, layout) => {
+            const step = getStepForLayout(layout);
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep: step });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["tag1","tag2"\]/)).toBeInTheDocument();
+        });
+    });
+    describe('Layout Components with sub-items', () => {
+        const renderers = getLayoutWithItemsRenderers();
+        const cases = [
+            [
+                'DecisionLayout',
+                [
+                    {
+                        type: 'decision',
+                        options: [{ title: 'Option 1', tags: ['tag3', 'tag4'] }],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            [
+                'InstructionsLayout',
+                [
+                    {
+                        type: 'instructions',
+                        items: [{ text: '', context: 'info', tags: ['tag3', 'tag4'] }],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            [
+                'ListLayout',
+                [
+                    {
+                        type: 'list',
+                        items: [
+                            {
+                                title: 'Item 1',
+                                tags: ['tag3', 'tag4'],
+                            },
+                        ],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            [
+                'StatusListLayout',
+                [
+                    {
+                        type: 'status-list',
+                        items: [
+                            {
+                                icon: { name: 'bank' },
+                                title: 'Item 1',
+                                tags: ['tag3', 'tag4'],
+                            },
+                        ],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            [
+                'TabsLayout',
+                [
+                    {
+                        type: 'tabs',
+                        tabs: [
+                            {
+                                title: 'Tab 1',
+                                components: [],
+                                tags: ['tag3', 'tag4'],
+                            },
+                        ],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+            [
+                'ReviewLayout',
+                [
+                    {
+                        type: 'review',
+                        fields: [
+                            {
+                                label: '',
+                                value: '',
+                                tags: ['tag3', 'tag4'],
+                            },
+                        ],
+                        tags: ['tag1', 'tag2'],
+                    },
+                ],
+            ],
+        ];
+        test.each(cases)('%s passes tags to its renderer and its sub-items', (n, layout) => {
+            const step = getStepForLayout(layout);
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep: step });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["tag1","tag2"\]/)).toBeInTheDocument();
+            expect(screen.getByText(/tags:\["tag3","tag4"\]/)).toBeInTheDocument();
+        });
+    });
+    describe('Layout Components with sub-items (back-compat)', () => {
+        const renderers = getLayoutWithItemsRenderers();
+        const cases = [
+            [
+                'DecisionLayout',
+                [
+                    {
+                        type: 'decision',
+                        options: [{ title: 'Option 1', tag: 'the-tag' }],
+                    },
+                ],
+            ],
+            [
+                'InstructionsLayout',
+                [
+                    {
+                        type: 'instructions',
+                        items: [{ text: '', context: 'info', tag: 'the-tag' }],
+                    },
+                ],
+            ],
+            [
+                'ListLayout',
+                [
+                    {
+                        type: 'list',
+                        items: [
+                            {
+                                title: 'Item 1',
+                                tag: 'the-tag',
+                            },
+                        ],
+                    },
+                ],
+            ],
+            [
+                'StatusListLayout',
+                [
+                    {
+                        type: 'status-list',
+                        items: [
+                            {
+                                icon: { name: 'bank' },
+                                title: 'Item 1',
+                                tag: 'the-tag',
+                            },
+                        ],
+                    },
+                ],
+            ],
+            [
+                'TabsLayout',
+                [
+                    {
+                        type: 'tabs',
+                        tabs: [
+                            {
+                                title: 'Tab 1',
+                                components: [],
+                                tag: 'the-tag',
+                            },
+                        ],
+                    },
+                ],
+            ],
+        ];
+        test.each(cases)('%s passes tags to its renderer and its sub-items', (n, layout) => {
+            const step = getStepForLayout(layout);
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep: step });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["the-tag"\]/)).toBeInTheDocument();
+        });
+    });
+    describe('Schema Components', () => {
+        const renderers = getSchemaRenderers();
+        const cases = [
+            ['AllOfSchema', { allOf: [], tags: ['tag1', 'tag2'] }],
+            [
+                'ArraySchema (list)',
+                {
+                    type: 'array',
+                    tags: ['tag1', 'tag2'],
+                    items: { type: 'string' },
+                    addItemTitle: '',
+                    editItemTitle: '',
+                },
+            ],
+            [
+                'ArraySchema (tuple)',
+                {
+                    type: 'array',
+                    tags: ['tag1', 'tag2'],
+                    items: [{ type: 'string' }],
+                    addItemTitle: '',
+                    editItemTitle: '',
+                },
+            ],
+            [
+                'BlobSchema',
+                {
+                    type: 'string',
+                    persistAsync: Object.assign(Object.assign({}, persistAsyncConfig), { schema: { type: 'blob', tags: ['tag1', 'tag2'] } }),
+                },
+            ],
+            ['BooleanSchema', { type: 'boolean', tags: ['tag1', 'tag2'] }],
+            ['IntegerSchema', { type: 'integer', tags: ['tag1', 'tag2'] }],
+            ['NumberSchema', { type: 'number', tags: ['tag1', 'tag2'] }],
+            [
+                'ObjectSchema',
+                {
+                    type: 'object',
+                    tags: ['tag1', 'tag2'],
+                    displayOrder: ['a'],
+                    properties: {
+                        a: { type: 'string' },
+                    },
+                },
+            ],
+            ['OneOfSchema', { oneOf: [], tags: ['tag1', 'tag2'] }],
+            ['StringSchema', { type: 'string', tags: ['tag1', 'tag2'] }],
+        ];
+        test.each(cases)('%s passes tags to its renderer', (n, schema) => {
+            const step = getStepForSchema(schema);
+            const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers, initialStep: step });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText(/tags:\["tag1","tag2"\]/)).toBeInTheDocument();
+        });
+    });
+    describe('Suggestions', () => {
+        describe('tags', () => {
+            it('passes tags to suggestions renderer', () => {
+                const suggestionsRenderers = [
+                    {
+                        canRenderType: 'input-text',
+                        render: ({ suggestions }) => (_jsx(_Fragment, { children: suggestions === null || suggestions === void 0 ? void 0 : suggestions.values.map((sv) => {
+                                var _a, _b;
+                                return (_jsx(TagRenderer, { tags: (_a = sv.tags) !== null && _a !== void 0 ? _a : [] }, (_b = sv.value) === null || _b === void 0 ? void 0 : _b.toString()));
+                            }) })),
+                    },
+                ];
+                const schema = {
+                    type: 'string',
+                    suggestions: { values: [{ label: '', value: '', tags: ['tag1', 'tag2'] }] },
+                };
+                const step = getStepForSchema(schema);
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers: suggestionsRenderers, initialStep: step });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByText(/tags:\["tag1","tag2"\]/)).toBeInTheDocument();
+            });
+        });
+        describe('tag', () => {
+            const suggestionsRenderers = [
+                {
+                    canRenderType: 'input-text',
+                    render: ({ suggestions }) => (_jsx(_Fragment, { children: suggestions === null || suggestions === void 0 ? void 0 : suggestions.values.map((sv) => {
+                            var _a, _b;
+                            return (_jsx(TagRenderer, { tags: (_a = sv.tags) !== null && _a !== void 0 ? _a : [] }, (_b = sv.value) === null || _b === void 0 ? void 0 : _b.toString()));
+                        }) })),
+                },
+            ];
+            it('passes the tag property as tags to suggestions renderer', () => {
+                const schema = {
+                    type: 'string',
+                    suggestions: { values: [{ label: '', value: '', tag: 'the-tag' }] },
+                };
+                const step = getStepForSchema(schema);
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers: suggestionsRenderers, initialStep: step });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByText(/tags:\["the-tag"\]/)).toBeInTheDocument();
+            });
+            it('sets the `tag` property to the first element of the tags array even if tag was provided', () => {
+                const schema = {
+                    type: 'string',
+                    suggestions: {
+                        values: [{ label: '', value: '', tag: 'tag-must-be-ignored', tags: ['tag1', 'tag2'] }],
+                    },
+                };
+                const step = getStepForSchema(schema);
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers: suggestionsRenderers, initialStep: step });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByText(/tags:\["tag1","tag2"\]/)).toBeInTheDocument();
+            });
+            it('sets the `tag` property to the first element of the tags array even if tag was provided and even if the tags array is empty', () => {
+                const schema = {
+                    type: 'string',
+                    suggestions: {
+                        values: [{ label: '', value: '', tag: 'tag-must-be-ignored', tags: [] }],
+                    },
+                };
+                const step = getStepForSchema(schema);
+                const props = Object.assign(Object.assign({}, getDefaultProps()), { renderers: suggestionsRenderers, initialStep: step });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+                expect(screen.getByText(/tags:\[\]/)).toBeInTheDocument();
+            });
+        });
+    });
+});
+const persistAsyncConfig = {
+    url: '',
+    method: 'POST',
+    param: '',
+    idProperty: '',
+};

package/build/tests/Upsell.test.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = (initialStep) => ({
+    flowId: 'flow-id',
+    initialStep,
+    httpClient: vi.fn(),
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const getCloseButton = () => screen.queryByRole('button', { name: /close/i });
+describe('Upsell component', () => {
+    describe('when upsell does not contain onDismiss', () => {
+        const props = getProps({
+            id: 'step-1',
+            title: 'Step 1',
+            schemas: [],
+            layout: [
+                {
+                    type: 'upsell',
+                    text: 'Try our premium features!',
+                    callToAction: {
+                        title: 'Upgrade now',
+                        behavior: {
+                            type: 'link',
+                            url: '/upgrade',
+                        },
+                    },
+                },
+            ],
+        });
+        it('renders upsell without a close button', () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            expect(screen.getByText('Try our premium features!')).toBeInTheDocument();
+            expect(screen.getByText('Upgrade now')).toBeInTheDocument();
+            expect(getCloseButton()).not.toBeInTheDocument();
+        });
+        describe('when the call to action is clicked', () => {
+            it('triggers the specified behavior', async () => {
+                const onLink = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { onLink: onLink })));
+                const upgradeButton = screen.getByText('Upgrade now');
+                await user.click(upgradeButton);
+                expect(onLink).toHaveBeenCalledWith('/upgrade');
+            });
+        });
+    });
+    describe('when the upsell has onDismiss', () => {
+        const props = getProps({
+            id: 'step-1',
+            title: 'Step 1',
+            schemas: [],
+            layout: [
+                {
+                    type: 'upsell',
+                    text: 'Try our premium features!',
+                    callToAction: {
+                        title: 'Upgrade now',
+                        behavior: {
+                            type: 'link',
+                            url: '/upgrade',
+                        },
+                    },
+                    onDismiss: {
+                        url: '/dismiss-upsell',
+                        method: 'POST',
+                        body: { upsellId: 'upsell-123' },
+                    },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    control: 'primary',
+                    behavior: {
+                        type: 'action',
+                        action: { url: '/submit-step', method: 'POST' },
+                    },
+                },
+            ],
+        });
+        it('can be dismissed using the close button, and it becomes hidden', async () => {
+            const httpClient = vi.fn().mockResolvedValue({ status: 200 });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
+            await user.click(getCloseButton());
+            await waitFor(() => {
+                expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledWith('/dismiss-upsell', {
+                method: 'POST',
+                body: JSON.stringify({ upsellId: 'upsell-123' }),
+            });
+            expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+        });
+        describe('when displaying errors after upsell dismissal', () => {
+            it('does not show the upsell again after it has been dismissed', async () => {
+                const httpClient = async (url) => {
+                    if (url === '/dismiss-upsell') {
+                        return respondWith(null, { status: 200 });
+                    }
+                    if (url === '/submit-step') {
+                        return respondWith({ error: 'There was an error' }, { status: 422 });
+                    }
+                    return respondWith(null, { status: 404 });
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { httpClient: httpClient })));
+                await user.click(getCloseButton());
+                await waitFor(() => {
+                    expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+                });
+                await user.click(screen.getByRole('button', { name: /submit/i }));
+                await waitFor(() => {
+                    expect(screen.getByText('There was an error')).toBeInTheDocument();
+                });
+                // Ensure the upsell does not re-appear when displaying errors
+                expect(screen.queryByText('Try our premium features!')).not.toBeInTheDocument();
+            });
+        });
+    });
+});