@wise/dynamic-flow-client 0.4.0-beta-d2067b.7 → 0.4.0

package/build/dynamicFlow/DynamicFlow.js

@@ -0,0 +1,372 @@
+"use strict";
+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 };
+    }
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_intl_1 = require("react-intl");
+var contexts_1 = require("../common/contexts");
+var validators_1 = require("../common/validators");
+var types_1 = require("../types");
+var DynamicFlowStep_1 = require("./DynamicFlowStep");
+var utils_1 = require("./utils");
+// 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.flowId, fetcher = _a.fetcher, flowUrl = _a.flowUrl, initialAction = _a.initialAction, initialStep = _a.initialStep, loaderConfig = _a.loaderConfig, _b = _a.displayStepTitle, displayStepTitle = _b === void 0 ? true : _b, onComplete = _a.onComplete, _c = _a.onStepChange, onStepChange = _c === void 0 ? noop : _c, onError = _a.onError, _d = _a.onEvent, onEvent = _d === void 0 ? noop : _d, _e = _a.onLog, onLog = _e === void 0 ? noop : _e;
+    var locale = (0, react_intl_1.useIntl)().locale;
+    var _f = (0, utils_1.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 = (0, react_1.useState)(false), submitted = _g[0], setSubmitted = _g[1];
+    var _h = (0, utils_1.useLoader)(loaderConfig, initialStep ? 'idle' : 'initial'), loadingState = _h.loadingState, setLoadingState = _h.setLoadingState, loader = _h.loader;
+    var logWarning = (0, contexts_1.getLogger)('warning', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var logError = (0, contexts_1.getLogger)('error', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var logCritical = (0, contexts_1.getLogger)('critical', onLog, flowId, step === null || step === void 0 ? void 0 : step.key);
+    var analyticsMetadata = (0, react_1.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 dispatchEvent = (0, react_1.useMemo)(function () { return (0, contexts_1.getEventDispatcher)(onEvent, analyticsMetadata); }, [onEvent, analyticsMetadata]);
+    var triggerActionRequest = (0, react_1.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]);
+                        dispatchEvent('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]);
+                    dispatchEvent('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*/, (0, utils_1.parseExitResponse)(response)];
+                case 2:
+                    exitResult = _a.sent();
+                    onCloseWithEvent(__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 = (0, utils_1.useDebouncedRefresh)(fetchRefreshStep);
+    var onCloseWithEvent = (0, react_1.useCallback)(function (result) {
+        dispatchEvent('Dynamic Flow - Flow Finished', { result: 'success' });
+        onComplete(result);
+    }, [onComplete, dispatchEvent]);
+    (0, react_1.useEffect)(function () {
+        dispatchEvent('Dynamic Flow - Flow Started', {});
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!initialStep) {
+            var action = __assign({ $id: '#initial-step-request', method: 'GET' }, 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*/, (0, utils_1.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*/, onCloseWithEvent(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');
+        dispatchEvent('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');
+        dispatchEvent('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*/, (0, utils_1.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') {
+                        dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'failure' });
+                    }
+                    dispatchEvent('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 (!(0, types_1.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*/, 7];
+                    if (!url) return [3 /*break*/, 6];
+                    if (!isSubmissionMethod(method)) return [3 /*break*/, 3];
+                    setFormErrors(null);
+                    setSubmitted(true);
+                    if (!modelIsValid) return [3 /*break*/, 2];
+                    return [4 /*yield*/, fetchExitResult(action, submissionData)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, fetchExitResult(action)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+                case 6:
+                    onCloseWithEvent(result);
+                    return [2 /*return*/];
+                case 7:
+                    if (isSubmissionMethod(method)) {
+                        setFormErrors(null);
+                        setSubmitted(true);
+                        if (modelIsValid) {
+                            void fetchNextStep(action, submissionData);
+                        }
+                        else {
+                            dispatchEvent('Dynamic Flow - onAction supressed', __assign({ reason: 'invalid model' }, extraLoggingProps));
+                        }
+                        return [2 /*return*/];
+                    }
+                    void fetchNextStep(action);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return ((0, jsx_runtime_1.jsx)(contexts_1.LogProvider, __assign({ flowId: flowId, stepId: step === null || step === void 0 ? void 0 : step.key, onLog: onLog }, { children: (0, jsx_runtime_1.jsx)(contexts_1.EventsContextProvider, __assign({ metadata: analyticsMetadata, onEvent: onEvent }, { children: (0, jsx_runtime_1.jsx)(contexts_1.DynamicFlowProvider, __assign({ loading: loadingState !== 'idle' }, { children: (0, jsx_runtime_1.jsx)(contexts_1.FetcherProvider, __assign({ fetcher: fetcher }, { children: loader !== null ? (loader) : ((0, jsx_runtime_1.jsx)(DynamicFlowStep_1.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 ((0, jsx_runtime_1.jsx)(utils_1.ErrorBoundary, __assign({ onError: props.onError }, { children: (0, jsx_runtime_1.jsx)(DynamicFlowComponent, __assign({}, props)) }))); };
+exports["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 (0, validators_1.isValidSchema)(triggerModel, triggerSchema); };
+    var wasValid = function () { return (0, validators_1.isValidSchema)(lastTriggerModel, triggerSchema); };
+    return type !== 'init' && (triggerSchema === null || triggerSchema === void 0 ? void 0 : triggerSchema.refreshFormOnChange) && (isValid() || wasValid());
+};

package/build/dynamicFlow/DynamicFlowStep.js

@@ -0,0 +1,36 @@
+"use strict";
+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);
+};
+exports.__esModule = true;
+exports.DynamicFlowStep = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../common/hooks");
+var utils_1 = require("../common/utils");
+var layout_1 = require("../layout");
+var step_1 = require("../step");
+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 = (0, hooks_1.useExternal)(externalUrl), requiresManualTrigger = _b.requiresManualTrigger, dismissConfirmation = _b.dismissConfirmation;
+    if (step === undefined) {
+        return null;
+    }
+    if (externalUrl && requiresManualTrigger) {
+        return (0, jsx_runtime_1.jsx)(step_1.ExternalConfirmationStep, { url: externalUrl, onClose: dismissConfirmation });
+    }
+    if ((0, utils_1.getStepType)(step) === 'camera') {
+        return (0, jsx_runtime_1.jsx)(step_1.CameraStep, __assign({}, props, { step: step }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalError ? ((0, jsx_runtime_1.jsx)(layout_1.DynamicAlert, { component: { context: 'negative', markdown: globalError, margin: 'lg' } })) : null, (0, jsx_runtime_1.jsx)(step_1.LayoutStep, __assign({}, props, { stepSpecification: step }))] }));
+};
+exports.DynamicFlowStep = DynamicFlowStep;

package/build/dynamicFlow/DynamicFlowTypes.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+exports.isSchema = void 0;
+// TODO HD Move this out of types
+function isSchema(schema) {
+    return Object.prototype.hasOwnProperty.call(schema, '$ref') === false;
+}
+exports.isSchema = isSchema;

package/build/dynamicFlow/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports["default"] = void 0;
+var DynamicFlow_1 = require("./DynamicFlow");
+__createBinding(exports, DynamicFlow_1, "default");

package/build/dynamicFlow/stories/DynamicFlow.story.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getObjectKeys = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var addon_actions_1 = require("@storybook/addon-actions");
+var react_1 = require("@storybook/react");
+var fixtures_1 = require("../../fixtures");
+var DynamicFlow_1 = __importDefault(require("../DynamicFlow"));
+var EditableDynamicFlow_1 = __importDefault(require("./EditableDynamicFlow"));
+var fixtureFetcher_1 = require("./fixtureFetcher");
+exports.getObjectKeys = Object.keys;
+var storyMap = {};
+var allStepNames = (0, exports.getObjectKeys)(fixtures_1.fixtures.steps);
+allStepNames.forEach(function (stepName) {
+    var _a;
+    var label = (_a = fixtures_1.fixtures.steps[stepName].key) !== null && _a !== void 0 ? _a : stepName;
+    var _b = label.split('/'), group = _b[0], name = _b[1];
+    if (!storyMap[group]) {
+        storyMap[group] = (0, react_1.storiesOf)("Dynamic Flow/".concat(group), module);
+    }
+    storyMap[group].add(name, function () { return ((0, jsx_runtime_1.jsx)(DynamicFlow_1["default"], { flowId: "storybook", initialAction: { method: 'GET', url: "/steps/".concat(stepName) }, fetcher: fixtureFetcher_1.fixtureFetcher, loaderConfig: { size: 'xl', initial: true, submission: false }, onComplete: (0, addon_actions_1.action)('onComplete'), onStepChange: (0, addon_actions_1.action)('onStepChange'), onError: (0, addon_actions_1.action)('onError'), onEvent: (0, addon_actions_1.action)('onEvent'), onLog: (0, addon_actions_1.action)('onLog') }, stepName)); });
+});
+var editable = (0, react_1.storiesOf)("Dynamic Flow/Editable", module);
+editable.add('Dynamic Flow', EditableDynamicFlow_1["default"], {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures_1.fixtures.steps)
+        }
+    },
+    args: { initialStepName: Object.keys(fixtures_1.fixtures)[0] }
+});

package/build/dynamicFlow/stories/EditableDynamicFlow.js

@@ -0,0 +1,67 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable react/forbid-dom-props */
+var addon_actions_1 = require("@storybook/addon-actions");
+var react_1 = require("react");
+var fixtures_1 = require("../../fixtures");
+var DynamicFlow_1 = __importDefault(require("../DynamicFlow"));
+var fixtureFetcher_1 = require("./fixtureFetcher");
+var EditableDynamicFlow = function (_a) {
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = fixtures_1.fixtures.steps[initialStepName] || {};
+    var selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return (0, jsx_runtime_1.jsx)(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+};
+var InteractiveDemo = function (_a) {
+    var selectedInitialStep = _a.selectedInitialStep;
+    var _b = (0, react_1.useState)(selectedInitialStep), initialStep = _b[0], setInitialStep = _b[1];
+    var onTextAreaChange = function (event) {
+        setInitialStep(event.target.value);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flexBasis: '50%' } }, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Editable Demo" }), (0, jsx_runtime_1.jsxs)("p", { children: ["You can select an initial step from the drop down in the controls panel.", (0, jsx_runtime_1.jsx)("br", {}), "You can edit the JSON below and see the result on the right."] }), (0, jsx_runtime_1.jsx)("textarea", { wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { flexBasis: '50%' } }, { children: (0, jsx_runtime_1.jsx)(DynamicFlow_1["default"], { flowId: "the-flow-id", initialStep: safeParseStepJson(initialStep), fetcher: fixtureFetcher_1.fixtureFetcher, onComplete: (0, addon_actions_1.action)('onComplete'), onStepChange: (0, addon_actions_1.action)('onStepChange'), onError: (0, addon_actions_1.action)('onError'), onEvent: (0, addon_actions_1.action)('onEvent'), onLog: (0, addon_actions_1.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."
+                        },
+                    ]
+                },
+            ]
+        };
+    }
+}
+exports["default"] = EditableDynamicFlow;

package/build/dynamicFlow/stories/fixtureFetcher.js

@@ -0,0 +1,118 @@
+"use strict";
+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 };
+    }
+};
+exports.__esModule = true;
+exports.fixtureFetcher = void 0;
+var addon_actions_1 = require("@storybook/addon-actions");
+var validators_1 = require("../../common/validators");
+var fixtures_1 = require("../../fixtures");
+var DynamicFlow_story_1 = require("./DynamicFlow.story");
+var fixtureFetcher = function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var url;
+    return __generator(this, function (_a) {
+        (0, addon_actions_1.action)('fixtureFetcher')(input, init);
+        url = getURL(input);
+        if (url.pathname.startsWith('/steps/')) {
+            return [2 /*return*/, respondWithFixture(fixtures_1.fixtures.steps, url, init)];
+        }
+        if (url.pathname.startsWith('/responses/')) {
+            return [2 /*return*/, respondWithFixture(fixtures_1.fixtures.responses, url, init)];
+        }
+        if (url.pathname.startsWith('/validate')) {
+            return [2 /*return*/, new Response(JSON.stringify({ message: 'Validation-async OK' }))];
+        }
+        return [2 /*return*/, new Response(null, { status: 404 })];
+    });
+}); };
+exports.fixtureFetcher = fixtureFetcher;
+var getURL = function (input) {
+    if (input instanceof URL) {
+        return input;
+    }
+    if (input instanceof Request) {
+        return new URL(input.url, 'http://foo');
+    }
+    return new URL(input, 'http://foo');
+};
+var respondWithFixture = function (fixtures, url, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var fixtureNames, name, fixture, body;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                fixtureNames = (0, DynamicFlow_story_1.getObjectKeys)(fixtures);
+                name = url.pathname
+                    .split('/')
+                    .filter(function (part) { return !!part; })
+                    .pop();
+                if (!fixtureNames.includes(name !== null && name !== void 0 ? name : '')) return [3 /*break*/, 3];
+                fixture = fixtures[name];
+                if (!url.searchParams.has('delay')) return [3 /*break*/, 2];
+                return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, Number(url.searchParams.get('delay'))); })];
+            case 1:
+                _b.sent();
+                _b.label = 2;
+            case 2:
+                // by convention if the url contains a "refresh"query parameterm we use the payload as model
+                if (url.searchParams.has('refresh') &&
+                    (init === null || init === void 0 ? void 0 : init.body) &&
+                    typeof init.body === 'string' &&
+                    (0, validators_1.isObject)(fixture)) {
+                    body = JSON.parse(init.body);
+                    return [2 /*return*/, new Response(JSON.stringify(__assign(__assign({}, fixture), { model: __assign(__assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })))];
+                }
+                if (url.pathname.includes('exit')) {
+                    return [2 /*return*/, new Response(JSON.stringify(fixture), { headers: { 'X-DF-Exit': 'true' } })];
+                }
+                return [2 /*return*/, new Response(JSON.stringify(fixture))];
+            case 3:
+                (0, addon_actions_1.action)('ERROR 404')(url);
+                return [2 /*return*/, new Response(null, { status: 404 })];
+        }
+    });
+}); };