@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/stories/spec/layouts/Modal.story.js

@@ -0,0 +1,81 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Modal',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function Modal() {
+    return renderWithStep(initialStep);
+}
+const initialStep = {
+    id: 'Features/Modal',
+    title: 'Modal Layout',
+    schemas: [
+        {
+            $id: '#main-schema',
+            type: 'object',
+            required: ['country'],
+            displayOrder: ['country'],
+            properties: {
+                country: {
+                    title: 'Some very important question',
+                    type: 'string',
+                },
+            },
+        },
+        {
+            $id: '#modal-schema',
+            type: 'object',
+            displayOrder: ['name'],
+            properties: {
+                name: {
+                    title: 'Name',
+                    type: 'string',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'box',
+            width: 'lg',
+            components: [
+                {
+                    type: 'modal',
+                    trigger: { title: 'Open the modal' },
+                    content: {
+                        components: [
+                            {
+                                type: 'form',
+                                schemaId: '#main-schema',
+                            },
+                            {
+                                type: 'paragraph',
+                                text: 'Welcome to our application. If you continue to browse and use this application, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern our relationship with you in relation to this application.',
+                            },
+                            {
+                                type: 'button',
+                                title: 'Submit in Modal',
+                                action: {
+                                    url: '/submit',
+                                    method: 'POST',
+                                },
+                            },
+                        ],
+                    },
+                },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'Submit out of Modal',
+            action: {
+                url: '/submit',
+                method: 'POST',
+            },
+        },
+    ],
+};

package/build/stories/spec/layouts/Search.story.js

@@ -0,0 +1,325 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { abortableDelay } from '../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { expect, userEvent, waitFor } from 'storybook/test';
+import { renderWithStep } from '../../utils/render-utils';
+const user = userEvent.setup();
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Search',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    decorators: [
+        (Story) => (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." }), _jsx("li", { children: "If your search term contains the word \"layout\", then the response will take 1 second and be a layout response" })] }) }), _jsx(Story, {})] })),
+    ],
+};
+const getSearchLayout = (overrides) => (Object.assign({ type: 'search', title: 'Search for something', hint: 'Try searching by star sign', url: '/search', method: 'GET', param: 'query', emptyMessage: 'No results found' }, overrides));
+const step = (searchLayout) => ({
+    id: 'search',
+    title: 'Search Layout',
+    schemas: [],
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            margin: 'md',
+            components: [
+                {
+                    type: 'heading',
+                    text: 'Search',
+                },
+                searchLayout,
+            ],
+        },
+    ],
+});
+export const Search = {
+    render: () => renderWithStep(step(getSearchLayout()), httpClient),
+};
+export const SearchInline = {
+    render: () => renderWithStep(step(getSearchLayout({ control: 'inline' })), httpClient),
+};
+export const SearchInteraction = {
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    render: () => renderWithStep(step(getSearchLayout()), httpClient),
+    play: async ({ canvas }) => {
+        await waitFor(async () => {
+            await expect(canvas.getByLabelText('Search for something')).toBeInTheDocument();
+        });
+        await user.type(canvas.getByLabelText('Search for something'), 'Baker');
+    },
+};
+export const SearchInlineInteraction = {
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    render: () => renderWithStep(step(getSearchLayout({ control: 'inline' })), httpClient),
+    play: async ({ canvas }) => {
+        await waitFor(async () => {
+            await expect(canvas.getByRole('combobox')).toBeInTheDocument();
+        });
+        await user.click(canvas.getByRole('combobox'));
+        await user.keyboard('Baker');
+        await waitFor(async () => {
+            await expect(canvas.getAllByText(/Street/)[0]).toBeInTheDocument();
+        }, { timeout: 2000 });
+    },
+};
+export const SearchWithInitialLayout = {
+    render: () => renderWithStep(step(getSearchLayout({
+        emptyMessage: 'No results found (this should only show if there is a search query)',
+        initialState: {
+            type: 'layout',
+            content: [
+                { type: 'alert', markdown: 'This is the initial state', context: 'info' },
+                {
+                    type: 'image',
+                    content: {
+                        uri: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
+                    },
+                },
+            ],
+        },
+    })), httpClient),
+};
+export const SearchWithInitialResults = {
+    render: () => renderWithStep(step(getSearchLayout({
+        emptyMessage: 'No results found (this should only show if there is a search query)',
+        initialState: {
+            type: 'results',
+            results: [
+                {
+                    type: 'action',
+                    title: 'Initial Result 1',
+                    description: 'This is the first initial result',
+                    icon: { name: 'building' },
+                    value: {
+                        url: '/next-step?result=initial-1',
+                        method: 'GET',
+                    },
+                },
+                {
+                    type: 'action',
+                    title: 'Initial Result 2',
+                    description: 'This is the second initial result',
+                    icon: { name: 'building' },
+                    value: {
+                        url: '/next-step?result=initial-2',
+                        method: 'GET',
+                    },
+                },
+            ],
+        },
+    })), httpClient),
+};
+const httpClient = async (input, init) => {
+    var _a;
+    action('httpClient')(input, init);
+    if (typeof input !== 'string') {
+        return fetch(input, init);
+    }
+    const query = (init === null || init === void 0 ? void 0 : init.method) === 'POST'
+        ? Object.values(JSON.parse(init.body))[0]
+        : input.split('=')[1];
+    const signal = (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null;
+    if (query === 'nothing') {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(JSON.stringify({ results: [] })));
+    }
+    if (query === 'error') {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(null, { status: 500 }));
+    }
+    if (query.includes('layout')) {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(JSON.stringify({ type: 'layout', content: getLayoutResponse(query) })));
+    }
+    if (input.startsWith('/search')) {
+        const delay = query.length <= 3 ? 2000 : 1000;
+        await abortableDelay(delay, signal);
+        return Promise.resolve(new Response(JSON.stringify({ results: getFakeSearchResults(query) })));
+    }
+    if (input.startsWith('/more-search')) {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(JSON.stringify({ results: getMoreFakeSearchResults(query) })));
+    }
+    if (input.startsWith('/next-step')) {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(JSON.stringify(filledStep(decodeURIComponent(query)))));
+    }
+    if (input.startsWith('/initial')) {
+        await abortableDelay(1000, signal);
+        return Promise.resolve(new Response(JSON.stringify(step)));
+    }
+    return fetch(input, init);
+};
+const filledStep = (address) => ({
+    id: 'result-step',
+    title: 'Search Layout',
+    layout: [
+        {
+            type: 'box',
+            width: 'md',
+            margin: 'md',
+            components: [
+                {
+                    type: 'heading',
+                    text: 'Search',
+                },
+                {
+                    type: 'search',
+                    control: 'inline',
+                    title: 'Search for something',
+                    url: '/search',
+                    method: 'GET',
+                    param: 'query',
+                    emptyMessage: 'No results found',
+                },
+                {
+                    type: 'form',
+                    schemaId: '#address',
+                },
+                {
+                    type: 'button',
+                    action: {},
+                    title: 'Submit',
+                },
+            ],
+        },
+    ],
+    schemas: [
+        {
+            $id: '#address',
+            type: 'object',
+            displayOrder: ['line1'],
+            properties: {
+                line1: {
+                    type: 'string',
+                    title: 'Adress Line 1',
+                },
+                city: {
+                    type: 'string',
+                    title: 'City',
+                },
+                state: {
+                    type: 'string',
+                    title: 'State',
+                },
+            },
+        },
+    ],
+    model: {
+        line1: address,
+        city: 'London',
+    },
+});
+const getFakeSearchResults = (query) => {
+    const street = decodeURIComponent(query).split(' ')[0];
+    return [
+        ...Array(3)
+            .fill(null)
+            .map((_, index) => ({
+            type: 'action',
+            title: `${index + 1} ${street} Street`,
+            description: `This is a search result for ${street} Street, London. The type is "action".`,
+            icon: { name: 'building' },
+            value: {
+                url: `/next-step?result=${index + 1} ${street} Street`,
+                method: 'GET',
+            },
+        })),
+        {
+            type: 'search',
+            title: `${street} Road`,
+            description: `Search for "${street} Road, London". This is a search result using GET method.`,
+            icon: { name: 'search' },
+            value: {
+                url: '/more-search',
+                method: 'GET',
+                param: 'query',
+                query: `${street} Road`,
+            },
+        },
+        {
+            type: 'search',
+            title: `${street} Avenue`,
+            description: `Search for "${street} Avenue, London". This is a search result using POST method.`,
+            icon: { name: 'search' },
+            value: {
+                url: '/more-search',
+                method: 'POST',
+                param: 'query',
+                query: `${street} Avenue`,
+            },
+        },
+        {
+            type: 'search',
+            title: `${street} Boulevard`,
+            description: `Search for "${street} Avenue, London". This has no media.`,
+            value: {
+                url: '/more-search',
+                method: 'POST',
+                param: 'query',
+                query: `${street} Boulevard`,
+            },
+        },
+    ];
+};
+const getMoreFakeSearchResults = (query) => Array(3)
+    .fill(null)
+    .map((_, index) => ({
+    type: 'action',
+    title: `${index + 1} ${decodeURIComponent(query).replace('+', ' ')}`,
+    description: `Description for this thing.`,
+    icon: { name: 'cog' },
+    value: {
+        url: `/next-step?result=${index + 1} ${decodeURIComponent(query).replace('+', ' ')}`,
+        method: 'GET',
+    },
+}));
+const getLayoutResponse = (query) => [
+    {
+        type: 'markdown',
+        content: `You searched for ${query}, but we couldn't find anything, so here's some layouts`,
+    },
+    {
+        type: 'image',
+        content: {
+            uri: 'https://images.unsplash.com/photo-1542736705-53f0131d1e98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80',
+        },
+    },
+    {
+        type: 'decision',
+        title: 'Here is some other ideas',
+        options: [
+            {
+                title: 'Go outside',
+                media: {
+                    content: [
+                        {
+                            uri: 'urn:wise:icons:beach',
+                            type: 'uri',
+                        },
+                    ],
+                    type: 'avatar',
+                },
+            },
+            {
+                title: 'Read a book',
+                media: {
+                    content: [
+                        {
+                            uri: 'urn:wise:icons:book',
+                            type: 'uri',
+                        },
+                    ],
+                    type: 'avatar',
+                },
+            },
+        ],
+    },
+];

package/build/stories/spec/layouts/Upsell.story.js

@@ -0,0 +1,55 @@
+import { supportedMediaNames } from '@wise/dynamic-flow-renderers/src/UpsellRenderer';
+import { getMockHttpClient, respondWith } from '../../../test-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Upsell',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWith({ error: 'Server-side global error', validation: 'Server-side error' }, { status: 400 }),
+    '/upsell-dismissed': async () => respondWith(null, { status: 200 }),
+});
+export function Interactive() {
+    return renderWithStep(getStep(['urn:wise:illustrations:globe', 'urn:wise:illustrations:backpack'], true), httpClient);
+}
+export function SupportedMediaNames() {
+    return renderWithStep(getStep(supportedMediaNames.map((name) => `urn:wise:illustrations:${name}`), false), httpClient);
+}
+const getStep = (urns, dismissable) => ({
+    id: 'step',
+    title: 'Upsell',
+    description: 'This step contains multiple upsells, but we should not have more than one on each step.',
+    layout: [
+        ...urns.map((urn) => ({
+            type: 'upsell',
+            text: `This is an upsell with a CTA with media uri:"${urn}".`,
+            media: {
+                type: 'image',
+                uri: urn,
+            },
+            callToAction: {
+                title: 'Do the thing!',
+                behavior: { type: 'action', action: { url: '/submit' } },
+            },
+            onDismiss: dismissable ? { url: '/upsell-dismissed', method: 'POST' } : undefined,
+            margin: 'lg',
+        })),
+        {
+            type: 'paragraph',
+            text: 'When submitting and receiving a global error (or validation errors) we should NOT see dismissed upsells again.',
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'button',
+            title: 'Submit (causes global error)',
+            control: 'primary',
+            behavior: { type: 'action', action: { url: '/submit' } },
+        },
+    ],
+    schemas: [],
+});

package/build/stories/spec/layouts/button/Button.story.js

@@ -0,0 +1,100 @@
+import { action } from 'storybook/actions';
+import { respondWithDelay } from '../../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Button',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const step = {
+    id: 'Buttons',
+    title: 'Buttons with Loader',
+    schemas: [],
+    layout: [
+        {
+            type: 'paragraph',
+            text: 'If we click a button, and it takes a while for the server to respond, we should see a spinner on to indicate the loading state on the button that was clicked. All buttons should be disabled anyway.',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+        {
+            type: 'button',
+            control: 'address-validation',
+            title: 'Other',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+    ],
+};
+const stepWithValidation = {
+    id: 'Buttons',
+    title: 'Buttons with Loader',
+    schemas: [
+        {
+            $id: '#form',
+            type: 'string',
+            title: 'Enter text here to continue',
+            minLength: 1,
+        },
+    ],
+    layout: [
+        {
+            type: 'paragraph',
+            text: 'If we click a button, and it takes a while for the server to respond, we should see a spinner on to indicate the loading state on the button that was clicked. All buttons should be disabled anyway.',
+        },
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Other',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+        {
+            type: 'button',
+            title: 'Modal 1',
+            behavior: {
+                type: 'modal',
+                title: 'Modal Title',
+                content: [{ type: 'paragraph', text: 'This is the modal content.' }],
+            },
+        },
+    ],
+};
+export const Buttons = () => renderWithStep(step, httpClient);
+export const ButtonsWithLoader = () => renderWithStep(stepWithValidation, httpClient);
+const httpClient = async (input, init) => {
+    action('httpClient')(input, init);
+    return respondWithDelay({ error: 'Generic error message' }, 5000, { status: 500 });
+};

package/build/stories/spec/layouts/button/PinnedButton.story.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { Modal, Button } from '@transferwise/components';
+import { useState } from 'react';
+import { renderWithStepAndOverrides } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Layouts/Button',
+    parameters: {
+        chromatic: {
+            delay: 2000,
+        },
+    },
+};
+const features = {
+    pinnedButtons: true,
+};
+export function PinnedButtons() {
+    return renderWithStepAndOverrides(getStep(20), { features });
+}
+export const PinnedButtonsMobileWeb = {
+    globals: { viewport: { value: 'mobile2' } },
+    render: () => renderWithStepAndOverrides(getStep(20), { features }),
+};
+export function PinnedButtonsInAModal() {
+    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: renderWithStepAndOverrides(getStep(10), { features }), onClose: () => setOpen(false) })] }));
+}
+export const PinnedButtonsInAModalMobileWeb = {
+    globals: { viewport: { value: 'mobile2' } },
+    render: () => {
+        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: renderWithStepAndOverrides(getStep(10), { features }), onClose: () => setOpen(false) })] }));
+    },
+};
+export function PinnedButtonsInAModalInAModal() {
+    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: renderWithStepAndOverrides(getStep(10), { features }), scroll: "content", onClose: () => setOpenSecond(false) })] }));
+}
+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',
+            },
+        },
+    ],
+});