@wise/dynamic-flow-client 3.11.3 → 3.11.4-experiment-node20-aa45bc2

package/build/legacy/step/layoutStep/utils/layout-utils.spec.js

@@ -0,0 +1,558 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { convertStepToLayout } from '.';
+describe('convertStepToLayout tests', function () {
+    describe('given decision step', function () {
+        it('should convert it into a layout', function () {
+            var option1 = {
+                title: 'Thing one',
+                description: 'The first type of thing',
+                url: 'https://...',
+            };
+            var option2 = {
+                title: 'Thing two',
+                url: 'https://...',
+                disabled: true,
+            };
+            var decisionStep = {
+                type: 'decision',
+                id: 'decide-thing-type',
+                title: 'Thing type',
+                description: 'Please choose between types of things',
+                options: [option1, option2],
+            };
+            var decisionLayout = [
+                {
+                    type: 'heading',
+                    text: decisionStep.title,
+                    size: 'lg',
+                    margin: 'lg',
+                    align: 'center',
+                },
+                {
+                    type: 'paragraph',
+                    text: decisionStep.description,
+                    align: 'center',
+                },
+                {
+                    type: 'decision',
+                    options: [
+                        {
+                            title: option1.title,
+                            description: option1.description,
+                            action: {
+                                disabled: undefined,
+                                title: option1.title,
+                                method: 'GET',
+                                url: option1.url,
+                            },
+                        },
+                        {
+                            title: option2.title,
+                            description: undefined,
+                            action: {
+                                title: option2.title,
+                                method: 'GET',
+                                url: option2.url,
+                                disabled: true,
+                            },
+                        },
+                    ],
+                },
+            ];
+            expect(convertStepToLayout(decisionStep, { displayStepTitle: true })).toStrictEqual(decisionLayout);
+        });
+    });
+    describe('given final step', function () {
+        it('should convert it into a layout', function () {
+            var exitAction = {
+                title: 'Exit',
+                type: 'positive',
+                exit: true,
+                result: { someKey: 'some value' },
+            };
+            var finalStep = {
+                type: 'final',
+                id: 'thing-final',
+                details: {
+                    title: 'We create the thing!',
+                    description: 'You now do stuff with the thing',
+                    image: '/images/1234.png',
+                },
+                actions: [exitAction],
+                success: true,
+            };
+            var finalLayout = [
+                {
+                    type: 'image',
+                    url: '/images/1234.png',
+                    size: 'md',
+                    margin: 'lg',
+                    text: undefined,
+                },
+                {
+                    type: 'heading',
+                    text: 'We create the thing!',
+                    size: 'lg',
+                    margin: 'lg',
+                    align: 'center',
+                },
+                {
+                    type: 'paragraph',
+                    text: 'You now do stuff with the thing',
+                    align: 'center',
+                },
+                {
+                    type: 'box',
+                    width: 'md',
+                    components: [
+                        {
+                            type: 'button',
+                            action: __assign({}, exitAction),
+                        },
+                    ],
+                },
+            ];
+            expect(convertStepToLayout(finalStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+        });
+        describe('and the action has no type', function () {
+            it('should default to a "primary" action', function () {
+                var exitAction = {
+                    title: 'Exit',
+                    exit: true,
+                    result: { someKey: 'some value' },
+                };
+                var finalStep = {
+                    type: 'final',
+                    id: 'thing-final',
+                    details: {
+                        title: 'We create the thing!',
+                        description: 'You now do stuff with the thing',
+                        image: '/images/1234.png',
+                    },
+                    actions: [exitAction],
+                    success: true,
+                };
+                var finalLayout = [
+                    {
+                        type: 'image',
+                        url: '/images/1234.png',
+                        size: 'md',
+                        margin: 'lg',
+                        text: undefined,
+                    },
+                    {
+                        type: 'heading',
+                        text: 'We create the thing!',
+                        size: 'lg',
+                        margin: 'lg',
+                        align: 'center',
+                    },
+                    {
+                        type: 'paragraph',
+                        text: 'You now do stuff with the thing',
+                        align: 'center',
+                    },
+                    {
+                        type: 'box',
+                        width: 'md',
+                        components: [
+                            {
+                                type: 'button',
+                                action: __assign(__assign({}, exitAction), { type: 'primary' }),
+                            },
+                        ],
+                    },
+                ];
+                expect(convertStepToLayout(finalStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+            });
+        });
+        describe('and the image is an object', function () {
+            it('should use the image url, text, and size when present', function () {
+                var exitAction = {
+                    title: 'Exit',
+                    exit: true,
+                    result: { someKey: 'some value' },
+                };
+                var finalStep = {
+                    type: 'final',
+                    id: 'thing-final',
+                    details: {
+                        title: 'We create the thing!',
+                        description: 'You now do stuff with the thing',
+                        image: {
+                            url: '/images/1234.png',
+                            text: 'some image text',
+                            size: 'lg',
+                        },
+                    },
+                    actions: [exitAction],
+                    success: true,
+                };
+                var finalLayout = [
+                    {
+                        type: 'image',
+                        url: '/images/1234.png',
+                        margin: 'lg',
+                        text: 'some image text',
+                        size: 'lg',
+                    },
+                    {
+                        type: 'heading',
+                        text: 'We create the thing!',
+                        size: 'lg',
+                        margin: 'lg',
+                        align: 'center',
+                    },
+                    {
+                        type: 'paragraph',
+                        text: 'You now do stuff with the thing',
+                        align: 'center',
+                    },
+                    {
+                        type: 'box',
+                        width: 'md',
+                        components: [
+                            {
+                                type: 'button',
+                                action: __assign(__assign({}, exitAction), { type: 'primary' }),
+                            },
+                        ],
+                    },
+                ];
+                expect(convertStepToLayout(finalStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+            });
+        });
+    });
+    describe('given form step', function () {
+        it('should convert it into a layout', function () {
+            var schema = {
+                $id: 'thing',
+                type: 'object',
+                properties: {
+                    a: {
+                        type: 'integer',
+                    },
+                    b: {
+                        type: 'string',
+                    },
+                },
+            };
+            var submitAction = {
+                title: 'Submit',
+                type: 'primary',
+                url: '/things',
+                method: 'POST',
+            };
+            var cancelAction = {
+                title: 'Cancel',
+                type: 'delete',
+                exit: true,
+            };
+            var reviewFields = {
+                title: 'A thing',
+                fields: [
+                    {
+                        title: 'Label for a',
+                        value: 'Value of a',
+                    },
+                ],
+            };
+            var formStep = {
+                type: 'form',
+                id: 'create-thing',
+                title: 'Step 1',
+                description: 'Please create a thing',
+                refreshUrl: '/thing-requirements',
+                actions: [submitAction, cancelAction],
+                reviewFields: reviewFields,
+                schemas: [schema],
+            };
+            var finalLayout = [
+                {
+                    type: 'heading',
+                    text: formStep.title,
+                    size: 'lg',
+                    margin: 'lg',
+                    align: 'center',
+                },
+                {
+                    type: 'paragraph',
+                    text: formStep.description,
+                    align: 'center',
+                },
+                {
+                    type: 'review',
+                    title: reviewFields.title,
+                    fields: [
+                        {
+                            label: reviewFields.fields[0].title,
+                            value: reviewFields.fields[0].value,
+                        },
+                    ],
+                },
+                {
+                    type: 'box',
+                    width: 'md',
+                    components: [
+                        {
+                            type: 'form',
+                            schema: schema,
+                        },
+                    ],
+                },
+                {
+                    type: 'box',
+                    width: 'md',
+                    components: [
+                        {
+                            type: 'button',
+                            action: __assign(__assign({}, submitAction), { title: submitAction.title, type: 'primary' }),
+                        },
+                        {
+                            type: 'button',
+                            action: __assign(__assign({}, cancelAction), { title: cancelAction.title, type: 'delete' }),
+                        },
+                    ],
+                },
+            ];
+            expect(convertStepToLayout(formStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+        });
+        it('should add title and description to existing layout', function () {
+            var formStep = {
+                type: 'form',
+                title: 'Step 1',
+                description: 'Please create a thing',
+                layout: [
+                    {
+                        options: [],
+                    },
+                ],
+            };
+            var finalLayout = [
+                {
+                    type: 'heading',
+                    text: formStep.title,
+                    size: 'lg',
+                    margin: 'lg',
+                    align: 'center',
+                },
+                {
+                    type: 'paragraph',
+                    text: formStep.description,
+                    align: 'center',
+                },
+                {
+                    options: [],
+                },
+            ];
+            expect(convertStepToLayout(formStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+        });
+    });
+    describe('given external step', function () {
+        var externalStep = {
+            type: 'external',
+            id: 'external-example',
+            title: 'Connect to your bank',
+            description: 'Please, follow the instructions. Keep this window open.',
+            retryTitle: 'Reopen the window, please',
+            requestUrl: 'https://some-external-url/',
+            polling: {
+                url: 'https://our-polling-url/',
+                interval: 5000,
+                maxAttempts: 5,
+                maxConsecutiveFails: 3,
+                onError: {
+                    action: { url: '/failure' },
+                },
+            },
+            responseHandlers: [
+                {
+                    result: 'success',
+                    action: { url: '/success', data: { 'action-data': '1234567890' } },
+                },
+                {
+                    result: 'exit',
+                    action: { exit: true, result: { 'action-result': '0987654321' } },
+                },
+                {
+                    result: 'error',
+                    action: { url: '/failure' },
+                },
+            ],
+        };
+        var expectedLayout = [
+            {
+                type: 'heading',
+                text: 'Connect to your bank',
+                size: 'lg',
+                margin: 'lg',
+                align: 'center',
+            },
+            {
+                type: 'paragraph',
+                text: 'Please, follow the instructions. Keep this window open.',
+            },
+            {
+                type: 'external',
+                requestUrl: externalStep.requestUrl,
+                retryTitle: 'Reopen the window, please',
+                polling: externalStep.polling,
+                responseHandlers: externalStep.responseHandlers,
+            },
+        ];
+        it('should convert it into a layout', function () {
+            expect(convertStepToLayout(externalStep, { displayStepTitle: true })).toMatchObject(expectedLayout);
+        });
+    });
+    describe('given a step with no type', function () {
+        it('should default to form step', function () {
+            var schema = {
+                $id: 'thing',
+                type: 'object',
+                properties: {
+                    a: {
+                        type: 'integer',
+                    },
+                    b: {
+                        type: 'string',
+                    },
+                },
+            };
+            var typelessStep = {
+                id: 'create-thing',
+                title: 'Step 1',
+                description: 'Please create a thing',
+                schemas: [schema],
+            };
+            var finalLayout = [
+                {
+                    type: 'heading',
+                    text: typelessStep.title,
+                    size: 'lg',
+                    margin: 'lg',
+                    align: 'center',
+                },
+                {
+                    type: 'paragraph',
+                    text: typelessStep.description,
+                    align: 'center',
+                },
+                {
+                    type: 'box',
+                    width: 'md',
+                    components: [
+                        {
+                            type: 'form',
+                            schema: schema,
+                        },
+                    ],
+                },
+            ];
+            expect(convertStepToLayout(typelessStep, { displayStepTitle: true })).toStrictEqual(finalLayout);
+        });
+    });
+    describe('given a step with layout', function () {
+        var step = {
+            type: 'anything',
+            title: 'Step Title',
+            description: 'This is an optional description.',
+            layout: [
+                {
+                    type: 'paragraph',
+                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                },
+            ],
+        };
+        describe('and "displayStepTitle" is set to true', function () {
+            var options = { displayStepTitle: true };
+            it('injects the title and description into the layout', function () {
+                expect(convertStepToLayout(step, options)).toMatchObject([
+                    {
+                        align: 'center',
+                        margin: 'lg',
+                        size: 'lg',
+                        text: 'Step Title',
+                        type: 'heading',
+                    },
+                    {
+                        align: 'center',
+                        text: 'This is an optional description.',
+                        type: 'paragraph',
+                    },
+                    {
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                        type: 'paragraph',
+                    },
+                ]);
+            });
+        });
+        describe('and "displayStepTitle" is set to false', function () {
+            var options = { displayStepTitle: false };
+            it('only injects the description into the layout', function () {
+                expect(convertStepToLayout(step, options)).toMatchObject([
+                    {
+                        align: 'center',
+                        text: 'This is an optional description.',
+                        type: 'paragraph',
+                    },
+                    {
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                        type: 'paragraph',
+                    },
+                ]);
+            });
+        });
+        describe('and options are omitted', function () {
+            it('injects the title and description into the layout', function () {
+                expect(convertStepToLayout(step)).toMatchObject([
+                    {
+                        align: 'center',
+                        margin: 'lg',
+                        size: 'lg',
+                        text: 'Step Title',
+                        type: 'heading',
+                    },
+                    {
+                        align: 'center',
+                        text: 'This is an optional description.',
+                        type: 'paragraph',
+                    },
+                    {
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                        type: 'paragraph',
+                    },
+                ]);
+            });
+        });
+        describe('and the title and description are omitted', function () {
+            var options = { displayStepTitle: true };
+            var omittedStep = {
+                type: 'anything',
+                layout: [
+                    {
+                        type: 'paragraph',
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                    },
+                ],
+            };
+            it('does not inject anything into the layout', function () {
+                expect(convertStepToLayout(omittedStep, options)).toMatchObject([
+                    {
+                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+                        type: 'paragraph',
+                    },
+                ]);
+            });
+        });
+    });
+});

package/build/legacy/test-utils/DynamicFlowProviders.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EventsContextProvider, LogProvider } from '../common/contexts';
+var noop = function () { };
+function DynamicFlowProviders(_a) {
+    var children = _a.children, _b = _a.onLog, onLog = _b === void 0 ? noop : _b, _c = _a.onEvent, onEvent = _c === void 0 ? noop : _c;
+    return (_jsx(LogProvider, { flowId: "", stepId: "", onLog: onLog, children: _jsx(EventsContextProvider, { onEvent: onEvent, children: children }) }));
+}
+export default DynamicFlowProviders;

package/build/legacy/test-utils/index.js

@@ -0,0 +1,4 @@
+export { default as DynamicFlowProviders } from './DynamicFlowProviders';
+export { mount, mountWithOptions, getMockFetchPromise, wait, getI18n, TestContextProviders, } from './legacy-utils';
+export { default as mockUseLogger } from './log-utils';
+export { renderWithProviders } from '../../test-utils/rtl-utils';

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

@@ -0,0 +1,69 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { translations as componentTranslations, Provider } from '@transferwise/components';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { translations as dynamicFlowTranslations } from '../..';
+import { EventsContextProvider, LogProvider } from '../common/contexts';
+import { HttpClientProviderFromBaseUrl } from '../../common/httpClientContext';
+var defaultTranslations = __assign(__assign({}, componentTranslations.en), dynamicFlowTranslations.en);
+var getMockFetchPromise = function (status, jsonFn, delay, signal) {
+    var response = {
+        status: status,
+        json: jsonFn,
+    };
+    return new Promise(function (resolve) {
+        var aborted = false;
+        if (signal) {
+            signal.addEventListener('abort', function () {
+                aborted = true;
+            });
+        }
+        setTimeout(function () { return !aborted && resolve(response); }, delay);
+    });
+};
+var wait = function (t) {
+    return act(function () {
+        return new Promise(function (resolve) {
+            setTimeout(resolve, t);
+        });
+    });
+};
+function mountWithProviders(component, locale, messages, baseUrl, onEvent, onLog) {
+    if (locale === void 0) { locale = 'en-GB'; }
+    if (messages === void 0) { messages = defaultTranslations; }
+    if (baseUrl === void 0) { baseUrl = 'https://test-url'; }
+    if (onEvent === void 0) { onEvent = (function () { }); }
+    if (onLog === void 0) { onLog = (function () { }); }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return
+    return mount(_jsx(LogProvider, { flowId: "", stepId: "", onLog: onLog, children: _jsx(EventsContextProvider, { onEvent: onEvent, children: _jsx(Provider, { i18n: { locale: locale, messages: messages }, children: _jsx(HttpClientProviderFromBaseUrl, { baseUrl: baseUrl, children: component }) }) }) }));
+}
+function mountWithOptions(_a) {
+    var component = _a.component, _b = _a.locale, locale = _b === void 0 ? 'en-GB' : _b, _c = _a.messages, messages = _c === void 0 ? defaultTranslations : _c, _d = _a.baseUrl, baseUrl = _d === void 0 ? 'https://test-url' : _d, _e = _a.onEvent, onEvent = _e === void 0 ? function () { } : _e, _f = _a.onLog, onLog = _f === void 0 ? function () { } : _f;
+    return mountWithProviders(component, locale, messages, baseUrl, onEvent, onLog);
+}
+function getI18n(locale, messages) {
+    if (locale === void 0) { locale = 'en-GB'; }
+    if (messages === void 0) { messages = defaultTranslations; }
+    return { locale: locale, messages: messages };
+}
+var i18n = {
+    locale: 'en-GB',
+    messages: __assign({}, componentTranslations.en),
+};
+function TestContextProviders(_a) {
+    var children = _a.children;
+    return (_jsx(LogProvider, { flowId: "", stepId: "", onLog: function () { }, children: _jsx(Provider, { i18n: i18n, children: children }) }));
+}
+export { mountWithProviders as mount, mountWithOptions, getMockFetchPromise, wait, getI18n, TestContextProviders, };

package/build/legacy/test-utils/log-utils.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+var mockUseLogger = function () { return ({
+    debug: jest.fn(),
+    info: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+    critical: jest.fn(),
+}); };
+export default mockUseLogger;