@wise/dynamic-flow-client 0.1.2 → 0.1.4

package/build/flow/response-parsers/spec.js

@@ -0,0 +1,263 @@
+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 { parseErrorResponse, parseExitResponse, parseFetchResponse } from '.';
+describe('parseFetchResponse', function () {
+    describe('when response contains the X-DF-Exit header', function () {
+        var headers = { 'X-Df-Exit': 'true' };
+        describe('and response body can be json-parsed as an object', function () {
+            it('should return exit result', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var response, parsedBody;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            response = new Response("{ \"exitResult\": \"exit result\" }", { headers: headers });
+                            return [4 /*yield*/, parseFetchResponse(response)];
+                        case 1:
+                            parsedBody = _a.sent();
+                            expect(parsedBody).toStrictEqual({
+                                type: 'exit',
+                                result: { exitResult: 'exit result' }
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('but response body cannot be json-parsed as an object', function () {
+            getNonObjectBodyCases().forEach(function (_a) {
+                var description = _a[0], body = _a[1];
+                describe("when the body is ".concat(description), function () {
+                    it("returns exit result with null", function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var parsedBody;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, parseFetchResponse(new Response(body, { headers: headers }))];
+                                case 1:
+                                    parsedBody = _a.sent();
+                                    expect(parsedBody).toStrictEqual({ type: 'exit', result: null });
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+            });
+        });
+    });
+    describe('when response does not contain the X-DF-Exit header', function () {
+        var headers = { etag: 'etag' };
+        describe('and response body can be json-parsed as an object', function () {
+            describe('and it contains an action property', function () {
+                describe('and the action property is an object', function () {
+                    it('assumes the action property is of type Action, and returns type action and the action', function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var parsedBody;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, parseFetchResponse(new Response('{ "action": { "url": "/path", "method": "POST" } }'))];
+                                case 1:
+                                    parsedBody = _a.sent();
+                                    expect(parsedBody).toStrictEqual({
+                                        type: 'action',
+                                        action: { url: '/path', method: 'POST' }
+                                    });
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    it('assumes the action property is of type Action, even if its NOT', function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var parsedBody;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, parseFetchResponse(new Response('{ "action": { "random": "property" } }'))];
+                                case 1:
+                                    parsedBody = _a.sent();
+                                    expect(parsedBody).toStrictEqual({ type: 'action', action: { random: 'property' } });
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+                describe('and the action property is NOT an object', function () {
+                    it('throws an error', function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, expect(parseFetchResponse(new Response('{ "action": 123 }'))).rejects.toThrow('Incorrect response body in action response. Expected an object satisfying the type { action: Action }.')];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+            });
+            describe('when the body is NOT an object with an action property', function () {
+                it('assumes the response is a step and returns step and etag', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var response, parsedBody;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                response = new Response("{ \"stepResult\": \"step result\" }", { headers: headers });
+                                return [4 /*yield*/, parseFetchResponse(response)];
+                            case 1:
+                                parsedBody = _a.sent();
+                                expect(parsedBody).toStrictEqual({
+                                    type: 'step',
+                                    step: { stepResult: 'step result' },
+                                    etag: 'etag'
+                                });
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+        describe('but response body cannot be json-parsed as an object', function () {
+            getNonObjectBodyCases().forEach(function (_a) {
+                var description = _a[0], body = _a[1];
+                describe("when the body is ".concat(description), function () {
+                    it("throws an error", function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, expect(parseFetchResponse(new Response(body))).rejects.toThrow('Incorrect response body in response. Expected an object.')];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+            });
+        });
+    });
+});
+describe('parseErrorResponse', function () {
+    describe('when response body can be json-parsed as an object', function () {
+        it('returns the response body', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, parsedBody;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        response = new Response(JSON.stringify({
+                            error: 'This is a global error',
+                            validation: { field: 'This is a field error' }
+                        }), { status: 422 });
+                        return [4 /*yield*/, parseErrorResponse(response)];
+                    case 1:
+                        parsedBody = _a.sent();
+                        expect(parsedBody).toStrictEqual({
+                            error: 'This is a global error',
+                            validation: { field: 'This is a field error' }
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when response body CANNOT be json-parsed as an object', function () {
+        getNonObjectBodyCases().forEach(function (_a) {
+            var description = _a[0], body = _a[1];
+            describe("when the body is ".concat(description), function () {
+                it("throws an error", function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, expect(parseErrorResponse(new Response(body))).rejects.toThrow('Incorrect response body in error response. Expected an object.')];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+    });
+});
+describe('parseExitResponse', function () {
+    describe('when response body can be json-parsed as an object', function () {
+        it('returns the parsed response body', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        response = new Response("{ \"exitResult\": \"exit result\" }");
+                        return [4 /*yield*/, expect(parseExitResponse(response)).resolves.toStrictEqual({
+                                exitResult: 'exit result'
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when response body CANNOT be json-parsed as an object', function () {
+        getNonObjectBodyCases().forEach(function (_a) {
+            var description = _a[0], body = _a[1];
+            describe("when the body is ".concat(description), function () {
+                it("returns null", function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var parsedBody;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, parseExitResponse(new Response(body))];
+                            case 1:
+                                parsedBody = _a.sent();
+                                expect(parsedBody).toBeNull();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+    });
+});
+function getNonObjectBodyCases() {
+    return [
+        ['parseable as number', '1234'],
+        ['parseable as a string', '"json string"'],
+        ['parseable as an empty string', '""'],
+        ['parseable as an array', '[]'],
+        ['parseable as true', 'true'],
+        ['parseable as false', 'false'],
+        ['parseable as null', 'null'],
+        ['an empty string', ''],
+        ['non-json parseable string', 'non-json string'],
+        ['a number', 1234],
+        ['NaN', NaN],
+        ['undefined', undefined],
+        ['a Blob instance', new Blob()],
+        ['a FormData instance', new FormData()],
+        ['a URLSearchParams instance', new URLSearchParams('foo=bar')],
+    ];
+}

package/build/flow/stories/EditableDynamicFlow.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const EditableDynamicFlow: ({ initialStepName }: {
+    initialStepName?: string | undefined;
+}) => JSX.Element;
+export default EditableDynamicFlow;

package/build/flow/stories/EditableDynamicFlow.js

@@ -0,0 +1,61 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/forbid-dom-props */
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+import DynamicFlow from '../DynamicFlow';
+import { fixtures } from '../fixtures';
+var EditableDynamicFlow = function (_a) {
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = fixtures.steps[initialStepName] || {};
+    var selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+};
+var InteractiveDemo = function (_a) {
+    var selectedInitialStep = _a.selectedInitialStep;
+    var _b = useState(selectedInitialStep), initialStep = _b[0], setInitialStep = _b[1];
+    var onTextAreaChange = function (event) {
+        setInitialStep(event.target.value);
+    };
+    return (_jsxs("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [_jsxs("div", __assign({ style: { flexBasis: '50%' } }, { children: [_jsx("h3", { children: "Editable Demo" }), _jsxs("p", { children: ["You can select an initial step from the drop down in the controls panel.", _jsx("br", {}), "You can edit the JSON below and see the result on the right."] }), _jsx("textarea", { wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })), _jsx("div", __assign({ style: { flexBasis: '50%' } }, { children: _jsx(DynamicFlow, { initialStep: safeParseStepJson(initialStep), fetcher: function () { return Promise.resolve(new Response(initialStep)); }, onClose: action('onClose'), onStepChange: action('onStepChange'), onError: action('onError'), onTrackableEvent: action('onTrackableEvent'), onLog: action('onLog') }, initialStep) }))] })));
+};
+function safeParseStepJson(jsonStep) {
+    try {
+        return JSON.parse(jsonStep);
+    }
+    catch (_a) {
+        // eslint-disable-next-line no-console
+        console.warn('JSON parsing error');
+        return {
+            type: 'final',
+            layout: [
+                {
+                    type: 'box',
+                    width: 'lg',
+                    components: [
+                        {
+                            type: 'alert',
+                            markdown: "**Error parsing JSON.**",
+                            context: 'warning'
+                        },
+                        {
+                            type: 'paragraph',
+                            text: " Invalid syntax or missing elements are preventing the JSON code you entered from being parsed. Carefully review and edit the code for errors such as missing commas or brackets."
+                        },
+                    ]
+                },
+            ]
+        };
+    }
+}
+export default EditableDynamicFlow;

package/build/flow/types.d.ts

@@ -0,0 +1,77 @@
+import { LogEventHandler } from '../common/logging';
+import { TrackableEventHandler } from '../common/tracking';
+import { Action, FormLayout, Schema, Size, Step } from '../dynamic-flow-types';
+import { OnChangeProps } from '../jsonSchemaForm/JsonSchemaForm';
+export type DynamicFlowPropsBasic = {
+    id?: string;
+    loaderConfig?: LoaderConfig;
+    displayStepTitle?: boolean;
+    onClose: (result: Record<string, unknown> | undefined | null) => void;
+    onStepChange?: (newStep: Step, previousStep: Step | undefined) => void;
+    onError: (error: unknown, status?: number) => void;
+    onTrackableEvent?: TrackableEventHandler;
+    onLog?: LogEventHandler;
+};
+type DynamicFlowPropsWithBaseUrl = {
+    baseUrl: string;
+    fetcher?: never;
+};
+type DynamicFlowPropsWithFetcher = {
+    baseUrl?: never;
+    fetcher: Fetcher;
+};
+type DynamicFlowPropsWithInitialAction = {
+    initialAction: InitialAction;
+    initialStep?: never;
+    flowUrl?: never;
+};
+type DynamicFlowPropsWithInitialStep = {
+    initialAction?: never;
+    initialStep: Step;
+    flowUrl?: never;
+};
+type DynamicFlowPropsWithFlowUrl = {
+    initialAction?: never;
+    initialStep?: never;
+    /** @deprecated Use initialAction instead */
+    flowUrl: string;
+};
+export type DynamicFlowProps = DynamicFlowPropsBasic & (DynamicFlowPropsWithBaseUrl | DynamicFlowPropsWithFetcher) & (DynamicFlowPropsWithInitialAction | DynamicFlowPropsWithInitialStep | DynamicFlowPropsWithFlowUrl);
+/** @deprecated Use DynamicFlowProps instead */
+export type DynamicFlowV3Props = DynamicFlowProps;
+/** @deprecated Use DynamicFlowPropsWithBaseUrl instead */
+export type DynamicFlowV3PropsWithBaseUrl = DynamicFlowPropsWithBaseUrl;
+/** @deprecated Use DynamicFlowPropsWithFetcher instead */
+export type DynamicFlowV3PropsWithFetcher = DynamicFlowPropsWithFetcher;
+/** @deprecated Use DynamicFlowPropsWithInitialAction instead */
+export type DynamicFlowV3PropsWithFlowUrl = DynamicFlowPropsWithInitialAction;
+/** @deprecated Use DynamicFlowPropsWithInitialStep instead */
+export type DynamicFlowV3PropsWithInitialStep = DynamicFlowPropsWithInitialStep;
+/** @deprecated Use DynamicFlowPropsBasic instead */
+export type DynamicFlowV3PropsBasic = DynamicFlowPropsBasic;
+export declare function isSchema(schema: FormLayout['schema']): schema is Schema;
+export type Fetcher = typeof fetch;
+export type ETag = string;
+export type LoaderConfig = {
+    size?: Size;
+    initial?: boolean;
+    submission?: boolean;
+};
+export type OnModelChangeProps = OnChangeProps & {
+    formSchema: Schema;
+};
+export type OnModelChange = (props: OnModelChangeProps) => void;
+export type OnAction = (action: Action) => void;
+export type OnPersistAsync = (promise: Promise<unknown>) => void;
+export type InitialAction = {
+    $id?: string;
+    url: string;
+    method?: 'GET';
+    data?: never;
+} | {
+    $id?: string;
+    url: string;
+    method: 'POST';
+    data: Record<string, unknown>;
+};
+export {};

package/build/flow/types.js

@@ -0,0 +1,3 @@
+export function isSchema(schema) {
+    return Object.prototype.hasOwnProperty.call(schema, '$ref') === false;
+}

package/build/flow/useDebouncedRefresh/index.d.ts

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

package/build/flow/useDebouncedRefresh/index.js

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

package/build/flow/useDebouncedRefresh/useDebouncedRefresh.d.ts

@@ -0,0 +1,5 @@
+import { Action, Schema } from '../../dynamic-flow-types';
+import { ETag } from '../types';
+type FetchRefresh = (action: Action, data: unknown, etag: ETag | undefined) => Promise<void | null>;
+export declare function useDebouncedRefresh(fetchRefresh: FetchRefresh): (action: Action, data: unknown, etag: ETag | undefined, schema: Schema) => void;
+export {};

package/build/flow/useDebouncedRefresh/useDebouncedRefresh.js

@@ -0,0 +1,24 @@
+import debounce from 'lodash.debounce';
+import { useRef } from 'react';
+import { shouldDebounceSchema } from '../../common/schemaTypes/shouldDebounceSchema';
+var DEBOUNCE_DELAY = 1000; // milliseconds
+export function useDebouncedRefresh(fetchRefresh) {
+    var map = useRef(new Map());
+    var retrieveOrCreate = function (key) {
+        if (map.current.has(key)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return map.current.get(key);
+        }
+        var debouncedFetchRefresh = debounce(function (action, data, etag) { return fetchRefresh(action, data, etag); }, DEBOUNCE_DELAY);
+        map.current.set(key, debouncedFetchRefresh);
+        return debouncedFetchRefresh;
+    };
+    return function (action, data, etag, schema) {
+        var key = action.url || '';
+        var debouncedFetchRefresh = retrieveOrCreate(key);
+        void debouncedFetchRefresh(action, data, etag);
+        if (!schema || !shouldDebounceSchema(schema)) {
+            void debouncedFetchRefresh.flush();
+        }
+    };
+}

package/build/flow/useDynamicFlowState.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FormErrors, GlobalError, ObjectModel, Step } from '../dynamic-flow-types';
+type ModelsMap = {
+    [key: string]: ObjectModel;
+};
+export declare const useDynamicFlowState: (initialStep?: Step) => {
+    formErrors: FormErrors;
+    globalError: GlobalError;
+    step: Step | undefined;
+    models: ModelsMap;
+    etag: string | undefined;
+    modelIsValid: boolean;
+    setFormErrors: import("react").Dispatch<import("react").SetStateAction<FormErrors>>;
+    setGlobalError: import("react").Dispatch<import("react").SetStateAction<GlobalError>>;
+    setStepAndEtag: (step: Step, etag?: string) => void;
+    setSchemaModel: (schemaId: string, objectModel: ObjectModel, onModelsUpdated: (models: ModelsMap) => void) => void;
+};
+export {};

package/build/flow/useDynamicFlowState.js

@@ -0,0 +1,111 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useMemo, useState } from 'react';
+import { isValidSchema } from '../common/validation/schema-validators';
+import { getValidObjectModelParts } from '../common/validation/valid-model';
+import { isSchema } from '../schema';
+export var useDynamicFlowState = function (initialStep) {
+    var _a, _b;
+    var _c = useState((_a = initialStep === null || initialStep === void 0 ? void 0 : initialStep.errors) === null || _a === void 0 ? void 0 : _a.validation), formErrors = _c[0], setFormErrors = _c[1];
+    var _d = useState((_b = initialStep === null || initialStep === void 0 ? void 0 : initialStep.errors) === null || _b === void 0 ? void 0 : _b.error), globalError = _d[0], setGlobalError = _d[1];
+    var _e = useState({
+        step: initialStep || undefined,
+        models: (initialStep === null || initialStep === void 0 ? void 0 : initialStep.model)
+            ? buildInitialModels(initialStep.model, getAllSchemas(initialStep))
+            : {},
+        etag: undefined
+    }), stepAndModels = _e[0], setStepAndModels = _e[1];
+    var step = stepAndModels.step, models = stepAndModels.models, etag = stepAndModels.etag;
+    var setStepAndEtag = function (step, etag) {
+        var _a, _b, _c, _d;
+        setStepAndModels(function (previous) { return ({
+            step: step,
+            models: step.model ? buildInitialModels(step.model, getAllSchemas(step)) : previous.models,
+            etag: etag
+        }); });
+        setFormErrors((_b = (_a = step === null || step === void 0 ? void 0 : step.errors) === null || _a === void 0 ? void 0 : _a.validation) !== null && _b !== void 0 ? _b : null);
+        setGlobalError((_d = (_c = step === null || step === void 0 ? void 0 : step.errors) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : null);
+    };
+    var setSchemaModel = function (schemaId, objectModel, onModelsUpdated) {
+        setStepAndModels(function (previous) {
+            var _a;
+            var updatedModels = __assign(__assign({}, previous.models), (_a = {}, _a[schemaId] = objectModel, _a));
+            var updatedState = {
+                step: previous.step,
+                models: updatedModels,
+                etag: previous.etag
+            };
+            onModelsUpdated(updatedModels);
+            return updatedState;
+        });
+    };
+    var modelIsValid = useMemo(function () { return areModelsValid(models, getAllSchemas(step)); }, [models, step]);
+    return {
+        formErrors: formErrors,
+        globalError: globalError,
+        step: step,
+        models: models,
+        etag: etag,
+        modelIsValid: modelIsValid,
+        setFormErrors: setFormErrors,
+        setGlobalError: setGlobalError,
+        setStepAndEtag: setStepAndEtag,
+        setSchemaModel: setSchemaModel
+    };
+};
+var buildInitialModels = function (model, schemas) {
+    if (schemas === void 0) { schemas = []; }
+    return schemas.reduce(function (acc, schema) {
+        var _a;
+        if (!schema.$id) {
+            // TODO: MC-3224
+            // eslint-disable-next-line no-console
+            console.warn('Schema without $id property found.');
+        }
+        return __assign(__assign({}, acc), (_a = {}, _a[schema.$id || ''] = getValidObjectModelParts(model, schema) || {}, _a));
+    }, {});
+};
+var getAllSchemas = function (step) { return __spreadArray(__spreadArray([], getAllSchemasInLayout((step === null || step === void 0 ? void 0 : step.layout) || []), true), ((step === null || step === void 0 ? void 0 : step.schemas) || []), true); };
+var getAllSchemasInLayout = function (components) {
+    return components.flatMap(function (component) {
+        switch (component.type) {
+            case 'columns':
+                return __spreadArray([], getAllSchemasInLayout(__spreadArray(__spreadArray([], component.left, true), component.right, true)), true);
+            case 'box':
+                return getAllSchemasInLayout(component.components);
+            case 'form':
+                return isSchema(component.schema) ? [component.schema] : [];
+            default:
+                return [];
+        }
+    });
+};
+var areModelsValid = function (formModels, schemas) {
+    if (schemas === void 0) { schemas = []; }
+    return !(schemas === null || schemas === void 0 ? void 0 : schemas.some(function (schema) {
+        if (!schema.$id) {
+            // TODO: MC-3224
+            // eslint-disable-next-line no-console
+            console.warn('Schema without $id property found.');
+        }
+        return !isValidSchema(formModels[schema.$id || ''] || {}, schema);
+    }));
+};

package/build/flow/useLoader.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DynamicFlowProps } from './types';
+type LoadingState = 'idle' | 'initial' | 'refresh' | 'submission';
+export declare function useLoader(loaderConfig: DynamicFlowProps['loaderConfig'], initialState: LoadingState): {
+    loadingState: "initial" | "idle" | "refresh" | "submission";
+    setLoadingState: import("react").Dispatch<import("react").SetStateAction<"initial" | "idle" | "refresh" | "submission">>;
+    loader: JSX.Element | null;
+};
+export {};

package/build/flow/useLoader.js

@@ -0,0 +1,22 @@
+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 { Loader, Size } from '@transferwise/components';
+import { useState } from 'react';
+export function useLoader(loaderConfig, initialState) {
+    var config = __assign({ size: Size.EXTRA_LARGE, initial: true, submission: false }, loaderConfig);
+    var _a = useState(initialState), loadingState = _a[0], setLoadingState = _a[1];
+    var shouldDisplayLoader = (config.initial && loadingState === 'initial') ||
+        (config.submission && loadingState === 'submission');
+    var loader = shouldDisplayLoader ? (_jsx(Loader, { size: config.size, classNames: { 'tw-loader': 'tw-loader m-x-auto' }, "data-testid": "loader" })) : null;
+    return { loadingState: loadingState, setLoadingState: setLoadingState, loader: loader };
+}