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

package/build/legacy/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.js

@@ -0,0 +1,150 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useEventDispatcher, useLogger } from '../../common/contexts';
+import { isEqual } from '../../common/utils';
+import { isValidSchema, isNull, isObject, isString } from '../../common/validators';
+import BasicTypeSchema from '../basicTypeSchema';
+import { useHttpClient } from '../../../common/httpClientContext';
+function ValidationAsyncSchema(props) {
+    var _this = this;
+    var schema = props.schema, model = props.model, required = props.required, submitted = props.submitted, errors = props.errors, onChange = props.onChange;
+    var _a = useState(model), validationAsyncModel = _a[0], setValidationAsyncModel = _a[1];
+    var previousRequestedModelReference = useRef(null);
+    var _b = useState(null), validationAsyncSuccessMessage = _b[0], setValidationAsyncSuccessMessage = _b[1];
+    var _c = useState(null), validationAsyncErrors = _c[0], setValidationAsyncErrors = _c[1];
+    var _d = useState(false), fieldSubmitted = _d[0], setFieldSubmitted = _d[1];
+    var _e = useState(null), abortController = _e[0], setAbortController = _e[1];
+    var httpClient = useHttpClient();
+    var onEvent = useEventDispatcher();
+    var log = useLogger();
+    useEffect(function () {
+        if (!schema.validationAsync.method) {
+            log.warning('Invalid schema or model', 'ValidationAsyncSchema without a "method" property would have defaulted to "GET" in previous versions. Now defaults to "POST".', {});
+        }
+    }, [log, schema.validationAsync.method]);
+    var getValidationAsyncResponse = function (currentValidationAsyncModel, validationAsyncSpec) { return __awaiter(_this, void 0, void 0, function () {
+        var signal, requestBody, response, jsonResponse, _a;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    signal = abortCurrentRequestAndGetNewAbortSignal();
+                    requestBody = (_b = {}, _b[validationAsyncSpec.param] = currentValidationAsyncModel, _b);
+                    previousRequestedModelReference.current = currentValidationAsyncModel;
+                    setFieldSubmitted(true);
+                    onEvent('Dynamic Flow - ValidationAsync', { status: 'pending' });
+                    return [4 /*yield*/, httpClient(validationAsyncSpec.url, {
+                            method: validationAsyncSpec.method || 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: validationAsyncSpec.method === 'GET' ? undefined : JSON.stringify(requestBody),
+                            signal: signal,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    _c.label = 2;
+                case 2:
+                    _c.trys.push([2, 4, , 5]);
+                    return [4 /*yield*/, response.json()];
+                case 3:
+                    jsonResponse = _c.sent();
+                    if (!isObject(jsonResponse)) {
+                        throw new Error('Response body is not an object');
+                    }
+                    onEvent('Dynamic Flow - ValidationAsync', { status: 'success' });
+                    if (response.status === 200) {
+                        setValidationAsyncSuccessMessage(isString(jsonResponse.message) ? jsonResponse.message : null);
+                    }
+                    else if (response.status === 422) {
+                        setValidationAsyncErrors(isString(jsonResponse.message) ? jsonResponse.message : null);
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    _a = _c.sent();
+                    onEvent('Dynamic Flow - ValidationAsync', { status: 'failure' });
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var abortCurrentRequestAndGetNewAbortSignal = function () {
+        if (abortController) {
+            abortController.abort();
+        }
+        var newAbortController = new AbortController();
+        setAbortController(newAbortController);
+        return newAbortController.signal;
+    };
+    var onBlur = function () {
+        if (!isNull(validationAsyncModel) &&
+            !isEqual(validationAsyncModel, previousRequestedModelReference.current) &&
+            isValidSchema(validationAsyncModel, schema)) {
+            void getValidationAsyncResponse(validationAsyncModel, schema.validationAsync);
+        }
+    };
+    var onValidationAsyncChange = function (parameters) {
+        onChange(__assign(__assign({}, parameters), { triggerSchema: schema, triggerModel: parameters.model }));
+        setValidationAsyncErrors(null);
+        setValidationAsyncSuccessMessage(null);
+        setValidationAsyncModel(parameters.model);
+    };
+    var basicTypeSchemaProps = {
+        submitted: submitted || fieldSubmitted,
+        model: validationAsyncModel,
+        errors: validationAsyncErrors || errors,
+        infoMessage: validationAsyncSuccessMessage,
+        onChange: onValidationAsyncChange,
+        onBlur: onBlur,
+        required: required,
+        schema: schema,
+    };
+    return _jsx(BasicTypeSchema, __assign({}, basicTypeSchemaProps));
+}
+ValidationAsyncSchema.defaultProps = { required: false };
+export default ValidationAsyncSchema;

package/build/legacy/jsonSchemaForm/validationAsyncSchema/index.js

@@ -0,0 +1 @@
+export { default } from './ValidationAsyncSchema';

package/build/legacy/layout/DynamicLayout.end-to-end.spec.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InlineAlert, Provider } from '@transferwise/components';
+import { mount } from 'enzyme';
+import * as loggingModule from '../common/contexts/logContext/LogContext';
+import { getI18n, mockUseLogger } from '../test-utils';
+import { DynamicLayout } from '.';
+jest.spyOn(loggingModule, 'useLogger').mockImplementation(mockUseLogger);
+describe('E2E: Given a component for rendering a dynamic layout', function () {
+    var component;
+    var onModelChange;
+    var onAction;
+    var onPersistAsync;
+    var action = {
+        url: '/exampe',
+        method: 'GET',
+        title: 'example',
+    };
+    var model = { an: 'example' };
+    var schema = {
+        id: 'example',
+        type: 'object',
+        properties: {
+            an: { type: 'string' },
+        },
+    };
+    var errors = { an: 'example error' };
+    var form = { type: 'form', schema: schema, model: model };
+    var button = { type: 'button', action: action };
+    var box = { type: 'box', components: [form, button] };
+    var mountOptions = {
+        wrappingComponent: Provider,
+        wrappingComponentProps: { i18n: getI18n() },
+    };
+    beforeEach(function () {
+        onAction = jest.fn();
+        onModelChange = jest.fn();
+        onPersistAsync = jest.fn();
+        component = mount(_jsx(DynamicLayout, { components: [box], submitted: true, errors: errors, onAction: onAction, onModelChange: onModelChange, onPersistAsync: onPersistAsync }), mountOptions);
+    });
+    it('should render the form', function () {
+        expect(component.find('input')).toBeTruthy();
+    });
+    it('should render the button', function () {
+        expect(component.find('button')).toBeTruthy();
+    });
+    it('should show the supplied error message', function () {
+        expect(component.find(InlineAlert).contains(errors.an)).toBe(true);
+    });
+    describe('when a form element is changed', function () {
+        beforeEach(function () {
+            component.find('input').simulate('change', { target: { value: 'other example' } });
+        });
+        it('should broadcast onModelChange', function () {
+            expect(onModelChange).toHaveBeenCalledWith(expect.objectContaining({
+                model: { an: 'other example' },
+                formSchema: schema,
+                triggerModel: 'other example',
+                triggerSchema: schema.properties.an,
+                lastTriggerModel: null,
+            }));
+        });
+    });
+    describe('when a button element is clicked', function () {
+        beforeEach(function () {
+            component.find('button').simulate('click');
+        });
+        it('should broadcast onAction', function () {
+            expect(onAction).toHaveBeenCalledWith(button.action);
+        });
+    });
+});

package/build/legacy/layout/DynamicLayout.js

@@ -0,0 +1,68 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { DynamicAlert, DynamicBox, DynamicButton, DynamicColumns, DynamicDecision, DynamicDivider, DynamicExternal, DynamicForm, DynamicHeading, DynamicImage, DynamicInfo, DynamicInstructions, DynamicStatusList, DynamicLoadingIndicator, DynamicMarkdown, DynamicParagraph, DynamicReview, DynamicSearch, DynamicModal, } from '.';
+import { HttpClientProviderFromBaseUrl, useHasHttpClientProvider, } from '../../common/httpClientContext';
+var getKey = function (component) { return JSON.stringify(component); };
+function DynamicLayout(props) {
+    var components = props.components, model = props.model, submitted = props.submitted, errors = props.errors, onModelChange = props.onModelChange, onAction = props.onAction, onPersistAsync = props.onPersistAsync, baseUrl = props.baseUrl;
+    var renderComponent = function (component) {
+        switch (component.type) {
+            case 'heading':
+                return _jsx(DynamicHeading, { component: component }, getKey(component));
+            case 'paragraph':
+                return _jsx(DynamicParagraph, { component: component }, getKey(component));
+            case 'image':
+                return _jsx(DynamicImage, { component: component }, getKey(component));
+            case 'alert':
+                return _jsx(DynamicAlert, { component: component }, getKey(component));
+            case 'review':
+                return _jsx(DynamicReview, { component: component, onAction: onAction }, getKey(component));
+            case 'divider':
+                return _jsx(DynamicDivider, { component: component }, getKey(component));
+            case 'info':
+                return _jsx(DynamicInfo, { component: component }, getKey(component));
+            case 'instructions':
+                return _jsx(DynamicInstructions, { component: component }, getKey(component));
+            case 'markdown':
+                return _jsx(DynamicMarkdown, { component: component }, getKey(component));
+            case 'columns':
+                return (_jsx(DynamicColumns, { component: component, model: model, submitted: submitted, errors: errors, onModelChange: onModelChange, onAction: onAction, onPersistAsync: onPersistAsync }, getKey(component)));
+            case 'form':
+                return (_jsx(DynamicForm, { component: component, model: model, submitted: submitted, errors: errors, onModelChange: onModelChange, onPersistAsync: onPersistAsync }, getKey(__assign(__assign({}, component), { errors: errors !== null && errors !== void 0 ? errors : null }))));
+            case 'button':
+                return _jsx(DynamicButton, { component: component, onAction: onAction }, getKey(component));
+            case 'box':
+                return (_jsx(DynamicBox, { component: component, model: model, submitted: submitted, errors: errors, onModelChange: onModelChange, onAction: onAction, onPersistAsync: onPersistAsync }, getKey(component)));
+            case 'decision':
+                return (_jsx(DynamicDecision, { component: component, onAction: onAction }, getKey(component)));
+            case 'external':
+                return (_jsx(DynamicExternal, { component: component, onAction: onAction }, getKey(component)));
+            case 'list':
+            case 'status-list':
+                return (_jsx(DynamicStatusList, { component: component, onAction: onAction }, getKey(component)));
+            case 'loading-indicator':
+                return _jsx(DynamicLoadingIndicator, { component: component }, getKey(component));
+            case 'search':
+                return _jsx(DynamicSearch, { component: component, onAction: onAction }, getKey(component));
+            case 'modal':
+                return (_jsx(DynamicModal, { component: component, model: model, submitted: submitted, errors: errors, onModelChange: onModelChange, onAction: onAction, onPersistAsync: onPersistAsync }, getKey(component)));
+            default:
+                return _jsx("div", {}, getKey(component));
+        }
+    };
+    if (useHasHttpClientProvider() || baseUrl == null) {
+        return _jsx(_Fragment, { children: components.map(renderComponent) });
+    }
+    return (_jsx(HttpClientProviderFromBaseUrl, { baseUrl: baseUrl, children: components.map(renderComponent) }));
+}
+export default DynamicLayout;

package/build/legacy/layout/DynamicLayout.spec.js

@@ -0,0 +1,243 @@
+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";
+import { shallow } from 'enzyme';
+import { DynamicAlert, DynamicBox, DynamicButton, DynamicColumns, DynamicDecision, DynamicDivider, DynamicForm, DynamicHeading, DynamicImage, DynamicInfo, DynamicLayout, DynamicLoadingIndicator, DynamicParagraph, DynamicReview, } from '.';
+describe('Given a component for rendering a dynamic layout', function () {
+    var props;
+    var component;
+    var components;
+    var onModelChange;
+    var onAction;
+    var onPersistAsync;
+    var action = {
+        url: '/exampe',
+        method: 'GET',
+        title: 'example',
+    };
+    var model = 'example';
+    var isValid = true;
+    var schema = {
+        type: 'string',
+    };
+    beforeEach(function () {
+        onAction = jest.fn();
+        onModelChange = jest.fn();
+        onPersistAsync = jest.fn();
+        props = {
+            components: components,
+            onAction: onAction,
+            onModelChange: onModelChange,
+            submitted: false,
+            errors: {},
+            onPersistAsync: onPersistAsync,
+        };
+    });
+    describe('when there is an alert component', function () {
+        beforeEach(function () {
+            components = [{ type: 'alert', markdown: '' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render an alert', function () {
+            expect(component.find(DynamicAlert)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicAlert).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is a box component', function () {
+        beforeEach(function () {
+            components = [{ type: 'box', components: [] }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicBox).simulate('action', action);
+            component.find(DynamicBox).simulate('modelChange', model, isValid, schema);
+        });
+        it('should render a box', function () {
+            expect(component.find(DynamicBox)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicBox).prop('component')).toBe(components[0]);
+        });
+        it('should propogate actions to the layout consumer', function () {
+            expect(onAction).toHaveBeenCalledWith(action);
+        });
+        it('should propogate model changes to the layout consumer', function () {
+            expect(onModelChange).toHaveBeenCalledWith(model, isValid, schema);
+        });
+    });
+    describe('when there is a button component', function () {
+        beforeEach(function () {
+            components = [{ type: 'button', action: action }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicButton).simulate('action', action);
+        });
+        it('should render a button', function () {
+            expect(component.find(DynamicButton)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicButton).prop('component')).toBe(components[0]);
+        });
+        it('should propogate actions to the layout consumer', function () {
+            expect(onAction).toHaveBeenCalledWith(action);
+        });
+    });
+    describe('when there is a columns component', function () {
+        beforeEach(function () {
+            components = [{ type: 'columns', left: [], right: [] }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicColumns).first().simulate('action', action);
+            component.find(DynamicColumns).first().simulate('modelChange', model, isValid, schema);
+        });
+        it('should render a columns component', function () {
+            expect(component.find(DynamicColumns).length).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicColumns).prop('component')).toBe(components[0]);
+        });
+        it('should propogate actions to the layout consumer', function () {
+            expect(onAction).toHaveBeenCalledWith(action);
+        });
+        it('should propogate model changes to the layout consumer', function () {
+            expect(onModelChange).toHaveBeenCalledWith(model, isValid, schema);
+        });
+    });
+    describe('when there is a decision component', function () {
+        beforeEach(function () {
+            components = [{ type: 'decision', options: [] }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicDecision).simulate('action', action);
+        });
+        it('should render a decision', function () {
+            expect(component.find(DynamicDecision)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicDecision).prop('component')).toBe(components[0]);
+        });
+        it('should propogate actions to the layout consumer', function () {
+            expect(onAction).toHaveBeenCalledWith(action);
+        });
+    });
+    describe('when there is a divider component', function () {
+        beforeEach(function () {
+            components = [{ type: 'divider' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render a divider', function () {
+            expect(component.find(DynamicDivider)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicDivider).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is a form component', function () {
+        beforeEach(function () {
+            components = [{ type: 'form', schema: {} }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicForm).simulate('modelChange', model, isValid, schema);
+        });
+        it('should render a form', function () {
+            expect(component.find(DynamicForm)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicForm).prop('component')).toBe(components[0]);
+        });
+        it('should propogate model changes to the layout consumer', function () {
+            expect(onModelChange).toHaveBeenCalledWith(model, isValid, schema);
+        });
+    });
+    describe('when there is a heading component', function () {
+        beforeEach(function () {
+            components = [{ type: 'heading', text: '' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render a heading', function () {
+            expect(component.find(DynamicHeading)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicHeading).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is an image component', function () {
+        beforeEach(function () {
+            components = [{ type: 'image', url: '' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render an image', function () {
+            expect(component.find(DynamicImage)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicImage).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is an info component', function () {
+        beforeEach(function () {
+            components = [{ type: 'info', markdown: '' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render a heading', function () {
+            expect(component.find(DynamicInfo)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicInfo).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is a paragraph component', function () {
+        beforeEach(function () {
+            components = [{ type: 'paragraph', text: '' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render a paragraph', function () {
+            expect(component.find(DynamicParagraph)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicParagraph).prop('component')).toBe(components[0]);
+        });
+    });
+    describe('when there is a review component', function () {
+        beforeEach(function () {
+            components = [{ type: 'review', fields: [] }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+            component.find(DynamicReview).simulate('action', action);
+        });
+        it('should render a review', function () {
+            expect(component.find(DynamicReview)).toBeTruthy();
+        });
+        it('should pass the component data', function () {
+            expect(component.find(DynamicReview).prop('component')).toBe(components[0]);
+        });
+        it('should propogate actions to the layout consumer', function () {
+            expect(onAction).toHaveBeenCalledWith(action);
+        });
+    });
+    describe('when there is a loading indicator component', function () {
+        beforeEach(function () {
+            components = [{ type: 'loading-indicator' }];
+            props = __assign(__assign({}, props), { components: components });
+            component = shallow(_jsx(DynamicLayout, __assign({}, props)));
+        });
+        it('should render a loading indicator', function () {
+            expect(component.find(DynamicLoadingIndicator)).toBeTruthy();
+        });
+    });
+});

package/build/legacy/layout/alert/DynamicAlert.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from '@transferwise/components';
+import { getMargin } from '../utils';
+var DynamicAlert = function (props) {
+    var alert = props.component;
+    return (_jsx(Alert, { type: mapContextToAlertType(legacy_mapContext(alert.context)), className: getMargin(alert.margin), message: alert.markdown }));
+};
+var legacy_mapContext = function (context) {
+    switch (context) {
+        case 'success':
+            return 'positive';
+        case 'failure':
+            return 'negative';
+        case 'warning':
+            return 'warning';
+        case 'info':
+        case 'primary':
+            return 'neutral';
+        default:
+            return context;
+    }
+};
+var mapContextToAlertType = function (context) {
+    if (!context || !['neutral', 'warning', 'negative', 'positive'].includes(context)) {
+        return 'neutral';
+    }
+    return context;
+};
+export default DynamicAlert;

package/build/legacy/layout/alert/DynamicAlert.spec.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import DynamicAlert from './DynamicAlert';
+var specs = [
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: 'neutral',
+    },
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: 'warning',
+    },
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: 'negative',
+    },
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: 'positive',
+    },
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: '',
+    },
+    {
+        component: 'alert',
+        markdown: '**This is a bold title** and some normal text',
+        context: 'failure',
+    },
+];
+describe.each(specs)('Given a component for dynamically rendering alert', function (spec) {
+    it('should render the alert component', function () {
+        render(_jsx(DynamicAlert, { component: spec }));
+        expect(screen.getByText('This is a bold title')).toBeInTheDocument();
+        expect(screen.getByText('and some normal text')).toBeInTheDocument();
+    });
+});

package/build/legacy/layout/box/DynamicBox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicLayout } from '..';
+import { getMargin } from '../utils';
+var DynamicBox = function (props) {
+    var box = props.component;
+    var margin = getMargin(box.margin || box.border ? 'lg' : 'xs');
+    if (!box.width || box.width === 'xl') {
+        return (_jsx("div", { className: margin + getBorderClass(box.border), children: _jsx(DynamicLayout, { components: box.components, model: props.model, submitted: props.submitted, errors: props.errors, onModelChange: props.onModelChange, onAction: props.onAction, onPersistAsync: props.onPersistAsync }) }));
+    }
+    return (_jsx("div", { className: "row", children: _jsx("div", { className: margin + getBoxWidthClasses(box), children: _jsx("div", { className: getBorderClass(box.border), children: _jsx(DynamicLayout, { components: box.components, model: props.model, submitted: props.submitted, errors: props.errors, onModelChange: props.onModelChange, onAction: props.onAction, onPersistAsync: props.onPersistAsync }) }) }) }));
+};
+var getBorderClass = function (border) {
+    return border ? ' well p-b-0' : '';
+};
+var getBoxWidthClasses = function (component) {
+    switch (component.width) {
+        case 'xs':
+            return ' col-md-4 col-md-offset-4';
+        case 'sm':
+            return ' col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4';
+        case 'md':
+            return ' col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3';
+        case 'lg':
+            return ' col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2';
+        case 'xl':
+        default:
+            return ' col-xs-12';
+    }
+};
+export default DynamicBox;