@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/flow/DynamicFlow.js

@@ -0,0 +1,368 @@
+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 { useCallback, useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { DynamicFlowProvider } from '../common/contexts/dynamicFlowContext/dynamicFlowContext';
+import { FetcherProvider, makeFetcher } from '../common/contexts/fetcherContext';
+import { LogProvider, getLogger } from '../common/logging';
+import { getTracker, TrackingContextProvider } from '../common/tracking';
+import { isValidSchema } from '../common/validation/schema-validators';
+import { isObjectModel } from '../dynamic-flow-types';
+import { DynamicFlowStep } from './DynamicFlowStep';
+import ErrorBoundary from './errorBoundary';
+import { parseFetchResponse, parseExitResponse, parseErrorResponse } from './response-parsers';
+import { useDebouncedRefresh } from './useDebouncedRefresh';
+import { useDynamicFlowState } from './useDynamicFlowState';
+import { useLoader } from './useLoader';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop = function () { };
+/**
+ * ## DynamicFlow
+ *
+ * The dynamic flow component is responsible for the asynchronous actions occuring
+ * within a dynamic flow, managing transitions between steps as well as refreshing
+ * requirements.  It doesn't control any view logic, but takes the step definition
+ * and reformats it to use a LayoutStep for presentation.
+ *
+ */
+var DynamicFlowComponent = function (_a) {
+    var flowId = _a.id, baseUrl = _a.baseUrl, propsFetcher = _a.fetcher, flowUrl = _a.flowUrl, initialAction = _a.initialAction, initialStep = _a.initialStep, loaderConfig = _a.loaderConfig, _b = _a.displayStepTitle, displayStepTitle = _b === void 0 ? true : _b, onClose = _a.onClose, _c = _a.onStepChange, onStepChange = _c === void 0 ? noop : _c, onError = _a.onError, _d = _a.onTrackableEvent, onTrackableEvent = _d === void 0 ? noop : _d, _e = _a.onLog, onLog = _e === void 0 ? noop : _e;
+    var locale = useIntl().locale;
+    var _f = useDynamicFlowState(initialStep), formErrors = _f.formErrors, globalError = _f.globalError, step = _f.step, models = _f.models, etag = _f.etag, modelIsValid = _f.modelIsValid, setFormErrors = _f.setFormErrors, setGlobalError = _f.setGlobalError, setStepAndEtag = _f.setStepAndEtag, setSchemaModel = _f.setSchemaModel;
+    var _g = useState(false), submitted = _g[0], setSubmitted = _g[1];
+    var _h = useLoader(loaderConfig, initialStep ? 'idle' : 'initial'), loadingState = _h.loadingState, setLoadingState = _h.setLoadingState, loader = _h.loader;
+    var logWarning = getLogger('warning', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var logError = getLogger('error', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var logCritical = getLogger('critical', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var analyticsMetadata = useMemo(function () { var _a; return (__assign({ flowId: flowId, stepId: step === null || step === void 0 ? void 0 : step.key }, ((_a = step === null || step === void 0 ? void 0 : step.analytics) !== null && _a !== void 0 ? _a : {}))); }, [flowId, step]);
+    var trackEvent = useMemo(function () { return getTracker(onTrackableEvent, analyticsMetadata); }, [onTrackableEvent, analyticsMetadata]);
+    var fetcher = useMemo(function () { return propsFetcher || makeFetcher(baseUrl); }, [propsFetcher, baseUrl]);
+    var triggerActionRequest = useCallback(function (_a) {
+        var action = _a.action, data = _a.data, etag = _a.etag;
+        var url = action.url, _b = action.method, method = _b === void 0 ? 'POST' : _b;
+        return fetcher(url !== null && url !== void 0 ? url : '', {
+            method: method,
+            headers: __assign({ 'accept-language': locale, 'Content-Type': 'application/json' }, (etag ? { 'If-None-Match': etag } : {})),
+            credentials: 'include',
+            body: method === 'GET' ? undefined : JSON.stringify(data)
+        });
+    }, [fetcher, locale]);
+    var fetchNextStep = function (action, data) {
+        if (data === void 0) { data = {}; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var response, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setLoadingState(loadingState === 'initial' ? 'initial' : 'submission');
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        trackEvent('Dynamic Flow - Step Submitted', { actionId: action.$id });
+                        return [4 /*yield*/, triggerActionRequest({ action: action, data: data })];
+                    case 2:
+                        response = _a.sent();
+                        return [2 /*return*/, handleFetchResponse(response, 'submission')];
+                    case 3:
+                        error_1 = _a.sent();
+                        handleFetchError(error_1, 'Error fetching next step');
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var fetchRefreshStep = function (action, data, etag) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoadingState('refresh');
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    trackEvent('Dynamic Flow - Step Refreshed', { status: 'pending' });
+                    return [4 /*yield*/, triggerActionRequest({ action: action, data: data, etag: etag })];
+                case 2:
+                    response = _a.sent();
+                    return [4 /*yield*/, handleFetchResponse(response, 'refresh')];
+                case 3:
+                    _a.sent();
+                    setLoadingState('idle');
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_2 = _a.sent();
+                    handleFetchError(error_2, 'Error fetching refresh step');
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var fetchExitResult = function (action, data) { return __awaiter(void 0, void 0, void 0, function () {
+        var response, exitResult, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    return [4 /*yield*/, triggerActionRequest({ action: action, data: data })];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, parseExitResponse(response)];
+                case 2:
+                    exitResult = _a.sent();
+                    onCloseWithTracking(__assign(__assign({}, exitResult), action.result));
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_3 = _a.sent();
+                    handleFetchError(error_3, 'Error fetching exit result');
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var debouncedFetchRefresh = useDebouncedRefresh(fetchRefreshStep);
+    var onCloseWithTracking = useCallback(function (result) {
+        trackEvent('Dynamic Flow - Flow Finished', { result: 'success' });
+        onClose(result);
+    }, [onClose, trackEvent]);
+    useEffect(function () {
+        trackEvent('Dynamic Flow - Flow Started', {});
+    }, []);
+    useEffect(function () {
+        if (!initialStep) {
+            var action = __assign({ $id: '#initial-step-request', method: 'GET', url: flowUrl }, initialAction);
+            void fetchNextStep(action, action.data);
+        }
+    }, [flowUrl, fetcher, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
+    var handleFetchResponse = function (response, fetchType) { return __awaiter(void 0, void 0, void 0, function () {
+        var parsedResponse, step_1, etag_1, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!response.ok) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, parseFetchResponse(response)];
+                case 2:
+                    parsedResponse = _a.sent();
+                    switch (parsedResponse.type) {
+                        case 'action':
+                            void fetchNextStep(parsedResponse.action, parsedResponse.action.data);
+                            return [2 /*return*/];
+                        case 'exit':
+                            return [2 /*return*/, onCloseWithTracking(parsedResponse.result)];
+                        case 'step':
+                        default: {
+                            step_1 = parsedResponse.step, etag_1 = parsedResponse.etag;
+                            return [2 /*return*/, fetchType === 'submission'
+                                    ? updateStepAfterSubmission(step_1, etag_1)
+                                    : updateStepAfterRefresh(step_1, etag_1)];
+                        }
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_4 = _a.sent();
+                    return [2 /*return*/, handleFetchError(error_4, 'Error parsing fetch response')];
+                case 4: return [2 /*return*/, handleErrorResponse(response, fetchType)];
+            }
+        });
+    }); };
+    var updateStepAfterSubmission = function (newStep, etag) {
+        var previousStep = step;
+        setStepAndEtag(newStep, etag);
+        onStepChange(newStep, previousStep);
+        setSubmitted(false);
+        setLoadingState('idle');
+        trackEvent('Dynamic Flow - Step Started', __assign({ stepId: newStep.key }, newStep === null || newStep === void 0 ? void 0 : newStep.analytics));
+    };
+    var updateStepAfterRefresh = function (step, etag) {
+        setStepAndEtag(step, etag);
+        setLoadingState('idle');
+        trackEvent('Dynamic Flow - Step Refreshed', { status: 'success' });
+    };
+    var handleErrorResponse = function (response, fetchType) { return __awaiter(void 0, void 0, void 0, function () {
+        var errorBody, action, error_5;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (response.status === 304) {
+                        setLoadingState('idle');
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 5, , 6]);
+                    return [4 /*yield*/, parseErrorResponse(response)];
+                case 2:
+                    errorBody = _a.sent();
+                    if (!errorBody.refreshFormUrl) return [3 /*break*/, 4];
+                    action = { url: errorBody === null || errorBody === void 0 ? void 0 : errorBody.refreshFormUrl, method: 'POST' };
+                    return [4 /*yield*/, fetchRefreshStep(action, combineModels(models), etag)];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4:
+                    if (errorBody.validation) {
+                        setFormErrors(errorBody.validation);
+                    }
+                    if (errorBody.error) {
+                        setGlobalError(errorBody.error);
+                    }
+                    if (!errorBody.refreshFormUrl && !errorBody.validation && !errorBody.error) {
+                        logError('Invalid response', 'Response body must contain at least one of the following properties: refreshFormUrl, validation, or error.');
+                        throw errorBody;
+                    }
+                    return [3 /*break*/, 6];
+                case 5:
+                    error_5 = _a.sent();
+                    if (fetchType === 'refresh') {
+                        trackEvent('Dynamic Flow - Step Refreshed', { status: 'failure' });
+                    }
+                    trackEvent('Dynamic Flow - Flow Finished', { status: 'failure' });
+                    onError(error_5, response.status);
+                    logError('Invalid response', 'Error response body must be an object.');
+                    return [3 /*break*/, 6];
+                case 6:
+                    setLoadingState('idle');
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleFetchError = function (error, message) {
+        logCritical('Error fetching', message);
+        onError(error);
+        setLoadingState('idle');
+    };
+    var onModelChange = function (onModelChangeProps) {
+        var model = onModelChangeProps.model, formSchema = onModelChangeProps.formSchema;
+        var _a = formSchema.$id, $id = _a === void 0 ? '' : _a;
+        setGlobalError(null);
+        if (!isObjectModel(model)) {
+            // TODO: MC-3224
+            logCritical('Invalid model on change', 'onModelChange was called but the model argument is not an object');
+        }
+        var objectModel = model;
+        setSchemaModel($id, objectModel, function (updatedModels) {
+            refreshOnChangeIfNeeded(onModelChangeProps, updatedModels);
+        });
+    };
+    var refreshOnChangeIfNeeded = function (props, updatedModels) {
+        var triggerSchema = props.triggerSchema;
+        if (shouldTriggerRefresh(props)) {
+            var url = triggerSchema.refreshFormUrl || (step === null || step === void 0 ? void 0 : step.refreshFormUrl);
+            var action = { url: url, method: 'POST' };
+            debouncedFetchRefresh(action, combineModels(updatedModels), etag, triggerSchema);
+        }
+    };
+    var onAction = function (action) { return __awaiter(void 0, void 0, void 0, function () {
+        var data, method, exit, url, result, submissionData, extraLoggingProps;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    data = action.data, method = action.method, exit = action.exit, url = action.url, result = action.result;
+                    submissionData = __assign(__assign({}, combineModels(models)), data);
+                    extraLoggingProps = {
+                        url: action.url,
+                        method: action.method,
+                        currency: submissionData.currency,
+                        type: submissionData.type
+                    };
+                    if (loadingState !== 'idle' || action.disabled) {
+                        logWarning('Action supressed', loadingState !== 'idle'
+                            ? "onAction was supressed because loadingState is ".concat(loadingState)
+                            : "onAction was supressed because action is disabled", extraLoggingProps);
+                        return [2 /*return*/];
+                    }
+                    if (!exit) return [3 /*break*/, 3];
+                    if (!url) return [3 /*break*/, 2];
+                    return [4 /*yield*/, fetchExitResult(action, submissionData)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 2:
+                    onCloseWithTracking(result);
+                    return [2 /*return*/];
+                case 3:
+                    if (isSubmissionMethod(method)) {
+                        setFormErrors(null);
+                        setSubmitted(true);
+                        if (modelIsValid) {
+                            void fetchNextStep(action, submissionData);
+                        }
+                        else {
+                            trackEvent('Dynamic Flow - onAction supressed', __assign({ reason: 'invalid model' }, extraLoggingProps));
+                        }
+                        return [2 /*return*/];
+                    }
+                    void fetchNextStep(action);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx(LogProvider, __assign({ flowId: flowId, stepId: step === null || step === void 0 ? void 0 : step.key, onLog: onLog }, { children: _jsx(TrackingContextProvider, __assign({ metadata: analyticsMetadata, onTrackableEvent: onTrackableEvent }, { children: _jsx(DynamicFlowProvider, __assign({ loading: loadingState !== 'idle' }, { children: _jsx(FetcherProvider, __assign({ fetcher: fetcher }, { children: loader !== null ? (loader) : (_jsx(DynamicFlowStep, { step: step, model: combineModels(models), submitted: submitted, globalError: globalError, formErrors: formErrors, stepLayoutOptions: { displayStepTitle: displayStepTitle }, onAction: function (action) {
+                            void onAction(action);
+                        }, onModelChange: onModelChange })) })) })) })) })));
+};
+var DynamicFlow = function (props) { return (_jsx(ErrorBoundary, __assign({ onError: props.onError }, { children: _jsx(DynamicFlowComponent, __assign({}, props)) }))); };
+export default DynamicFlow;
+var combineModels = function (formModels) {
+    return Object.values(formModels).reduce(function (previous, model) { return (__assign(__assign({}, previous), model)); }, {});
+};
+var isSubmissionMethod = function (method) {
+    if (method === void 0) { method = 'POST'; }
+    var submissionMethods = ['POST', 'PUT', 'PATCH'];
+    return submissionMethods.includes(method.toUpperCase());
+};
+var shouldTriggerRefresh = function (props) {
+    var type = props.type, triggerSchema = props.triggerSchema, triggerModel = props.triggerModel, _a = props.lastTriggerModel, lastTriggerModel = _a === void 0 ? null : _a;
+    var isValid = function () { return isValidSchema(triggerModel, triggerSchema); };
+    var wasValid = function () { return isValidSchema(lastTriggerModel, triggerSchema); };
+    return type !== 'init' && (triggerSchema === null || triggerSchema === void 0 ? void 0 : triggerSchema.refreshFormOnChange) && (isValid() || wasValid());
+};

package/build/flow/DynamicFlowStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { GlobalError, Step } from '../dynamic-flow-types';
+import { LayoutStepProps } from '../step/layoutStep/LayoutStep';
+type DynamicFlowStepProps = Omit<LayoutStepProps, 'stepSpecification'> & {
+    step: Step | undefined;
+    globalError: GlobalError;
+};
+export declare const DynamicFlowStep: (props: DynamicFlowStepProps) => JSX.Element | null;
+export {};

package/build/flow/DynamicFlowStep.js

@@ -0,0 +1,32 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStepType } from '../common/stepTypes/stepTypes';
+import DynamicAlert from '../layout/alert';
+import { CameraStep, LayoutStep, ExternalConfirmationStep } from '../step';
+import { useExternal } from '../step/features';
+export var DynamicFlowStep = function (props) {
+    var _a;
+    var step = props.step, globalError = props.globalError;
+    var externalUrl = (_a = step === null || step === void 0 ? void 0 : step.external) === null || _a === void 0 ? void 0 : _a.url;
+    var _b = useExternal(externalUrl), requiresManualTrigger = _b.requiresManualTrigger, dismissConfirmation = _b.dismissConfirmation;
+    if (step === undefined) {
+        return null;
+    }
+    if (externalUrl && requiresManualTrigger) {
+        return _jsx(ExternalConfirmationStep, { url: externalUrl, onClose: dismissConfirmation });
+    }
+    if (getStepType(step) === 'camera') {
+        return _jsx(CameraStep, __assign({}, props, { step: step }));
+    }
+    return (_jsxs(_Fragment, { children: [globalError ? (_jsx(DynamicAlert, { component: { context: 'negative', markdown: globalError, margin: 'lg' } })) : null, _jsx(LayoutStep, __assign({}, props, { stepSpecification: step }))] }));
+};

package/build/flow/errorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+type Props = {
+    onError?: (error: Error) => void;
+    children: React.ReactNode;
+};
+type State = {
+    hasError: boolean;
+    isFatalError: boolean;
+};
+declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+        isFatalError: boolean;
+    };
+    componentDidCatch(error: Error): void;
+    handleErrorReset: () => void;
+    render(): JSX.Element;
+}
+export default ErrorBoundary;

package/build/flow/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,45 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { ErrorBoundaryAlert } from './ErrorBoundaryAlert';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop = function () { };
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleErrorReset = function () {
+            _this.setState({ hasError: false, isFatalError: false });
+        };
+        _this.state = { hasError: false, isFatalError: false };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true, isFatalError: true };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        var _a = this.props.onError, onError = _a === void 0 ? noop : _a;
+        onError(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        var children = this.props.children;
+        var _a = this.state, hasError = _a.hasError, isFatalError = _a.isFatalError;
+        return (_jsxs(_Fragment, { children: [hasError && _jsx(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }), !isFatalError && children] }));
+    };
+    return ErrorBoundary;
+}(Component));
+export default ErrorBoundary;

package/build/flow/errorBoundary/ErrorBoundary.messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    errorAlert: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    retry: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/build/flow/errorBoundary/ErrorBoundary.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    errorAlert: {
+        id: 'dynamicFlows.ErrorBoundary.errorAlert',
+        defaultMessage: 'Oops. Something went wrong...',
+        description: 'Generic error message for when something has gone wrong'
+    },
+    retry: {
+        id: 'dynamicFlows.ErrorBoundary.retry',
+        defaultMessage: 'Retry',
+        description: 'Retry'
+    }
+});

package/build/flow/errorBoundary/ErrorBoundaryAlert.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    onDismiss: () => void;
+};
+export declare const ErrorBoundaryAlert: ({ onDismiss }: Props) => JSX.Element;
+export {};

package/build/flow/errorBoundary/ErrorBoundaryAlert.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Sentiment } from '@transferwise/components';
+import { useIntl } from 'react-intl';
+import messages from './ErrorBoundary.messages';
+export var ErrorBoundaryAlert = function (_a) {
+    var onDismiss = _a.onDismiss;
+    var formatMessage = useIntl().formatMessage;
+    return (_jsx(Alert, { action: {
+            text: formatMessage(messages.retry),
+            href: window.location.href
+        }, message: formatMessage(messages.errorAlert), type: Sentiment.NEGATIVE, className: "m-b-3", onDismiss: onDismiss }));
+};

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

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

package/build/flow/errorBoundary/index.js

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

package/build/flow/fixtures/components/alert.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../../dynamic-flow-types';
+declare const step: Step;
+export default step;

package/build/flow/fixtures/components/alert.js

@@ -0,0 +1,31 @@
+var step = {
+    type: 'form',
+    key: 'Components/Alert',
+    title: 'Alert Component',
+    description: 'Alerts can have different contexts.',
+    actions: [],
+    schemas: [],
+    layout: [
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "neutral" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'neutral'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "warning" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'warning'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "positive" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'positive'
+        },
+        {
+            type: 'alert',
+            markdown: 'This is an alert with "negative" context. A subset of Markdown features are supported, like **bold text**, and __italic__ I think. But no line breaks nor links.',
+            context: 'negative'
+        },
+    ]
+};
+export default step;

package/build/flow/fixtures/components/box.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../../dynamic-flow-types';
+declare const step: Step;
+export default step;

package/build/flow/fixtures/components/box.js

@@ -0,0 +1,20 @@
+var step = {
+    type: 'form',
+    key: 'Components/Box',
+    title: 'Box Component',
+    description: 'Box is a container for other layour components. It can have a border!',
+    actions: [],
+    schemas: [],
+    layout: ['xs', 'sm', 'md', 'lg', 'xl'].map(function (size) { return ({
+        type: 'box',
+        width: size,
+        border: true,
+        components: [
+            {
+                type: 'paragraph',
+                text: "This paragraph is inside a box with border: \"true\" and width: \"".concat(size, "\".")
+            },
+        ]
+    }); })
+};
+export default step;

package/build/flow/fixtures/components/button.d.ts

@@ -0,0 +1,3 @@
+import { Step } from '../../../dynamic-flow-types';
+declare const step: Step;
+export default step;