@wise/dynamic-flow-client 3.7.0 → 3.7.2-experimental-1ba6fef

package/build/legacy/dynamicFlow/DynamicFlow.js

@@ -0,0 +1,348 @@
+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, getEventDispatcher, EventsContextProvider, LogProvider, getLogger, } from '../common/contexts';
+import { FeatureContextProvider } from '../common/contexts/featureContext/FeatureContext';
+import { isObjectModel } from '../common/utils';
+import { isValidSchema } from '../common/validators';
+import { DynamicFlowStep } from './DynamicFlowStep';
+import { ErrorBoundary, useLoader, useDynamicFlowState, useDebouncedRefresh, parseFetchResponse, getJsonObjectOrNull, parseErrorResponse, } from './utils';
+import { HttpClientProvider } from '../../common/httpClientContext';
+// 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.
+ *
+ */
+// eslint-disable-next-line react/function-component-definition
+var DynamicFlowComponent = function (_a) {
+    var flowId = _a.flowId, httpClient = _a.httpClient, initialAction = _a.initialAction, initialStep = _a.initialStep, loaderConfig = _a.loaderConfig, _b = _a.displayStepTitle, displayStepTitle = _b === void 0 ? true : _b, features = _a.features, onCompletion = _a.onCompletion, onError = _a.onError, _c = _a.onEvent, onEvent = _c === void 0 ? noop : _c, _d = _a.onLog, onLog = _d === void 0 ? noop : _d;
+    var locale = useIntl().locale;
+    var _e = useDynamicFlowState(initialStep), formErrors = _e.formErrors, globalError = _e.globalError, step = _e.step, models = _e.models, etag = _e.etag, modelIsValid = _e.modelIsValid, setFormErrors = _e.setFormErrors, setGlobalError = _e.setGlobalError, setStepAndEtag = _e.setStepAndEtag, setSchemaModel = _e.setSchemaModel;
+    var _f = useState(false), submitted = _f[0], setSubmitted = _f[1];
+    var _g = useLoader(loaderConfig, initialStep ? 'idle' : 'initial'), isLoading = _g.isLoading, loader = _g.loader, setLoadingState = _g.setLoadingState;
+    var logCritical = getLogger('critical', onLog, flowId, (step === null || step === void 0 ? void 0 : step.id) || (step === null || step === void 0 ? void 0 : step.key));
+    var logWarning = getLogger('warning', onLog, flowId, (step === null || step === void 0 ? void 0 : step.id) || (step === null || step === void 0 ? void 0 : step.key));
+    var warnIfNoStepLayout = function (step) {
+        if (step && !step.layout) {
+            logWarning('Deprecation warning', 'Support for steps with no layout is being dropped. Please add a layout array to your step.', {
+                stepId: step.id || step.key,
+            });
+        }
+    };
+    var analyticsMetadata = useMemo(function () { var _a; return (__assign({ flowId: flowId, stepId: (step === null || step === void 0 ? void 0 : step.id) || (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 = useMemo(function () { return getEventDispatcher(onEvent, analyticsMetadata); }, [onEvent, analyticsMetadata]);
+    var dfHttpClient = 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 httpClient(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),
+        });
+    }, [httpClient, locale]);
+    var performAction = 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:
+                        cancelPendingRefreshes();
+                        setLoadingState(!step ? 'initial' : 'submission');
+                        dispatchEvent('Dynamic Flow - Step Submitted', { actionId: action.id || action.$id });
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 6, , 7]);
+                        return [4 /*yield*/, dfHttpClient({ action: action, data: data })];
+                    case 2:
+                        response = _a.sent();
+                        if (!(action.exit && response.ok)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, handleExitResponse(response, action.result)];
+                    case 3:
+                        _a.sent();
+                        return [2 /*return*/];
+                    case 4: return [4 /*yield*/, handleResponse(response, 'submission')];
+                    case 5:
+                        _a.sent();
+                        return [3 /*break*/, 7];
+                    case 6:
+                        error_1 = _a.sent();
+                        completeWithError(error_1, action.exit ? 'Error fetching exit result' : 'Error fetching next step');
+                        return [3 /*break*/, 7];
+                    case 7: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var performRefresh = function (url, 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:
+                    cancelPendingRefreshes();
+                    setLoadingState('refresh');
+                    dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'pending' });
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, dfHttpClient({ action: { url: url, method: 'POST' }, data: data, etag: etag })];
+                case 2:
+                    response = _a.sent();
+                    return [4 /*yield*/, handleResponse(response, 'refresh')];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_2 = _a.sent();
+                    completeWithError(error_2, 'Error fetching refresh step');
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleExitResponse = function (response, actionResult) { return __awaiter(void 0, void 0, void 0, function () {
+        var exitResult;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getJsonObjectOrNull(response)];
+                case 1:
+                    exitResult = _a.sent();
+                    dispatchEventAndComplete(__assign(__assign({}, exitResult), actionResult));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var _h = useDebouncedRefresh(performRefresh), debouncedRefresh = _h.debouncedRefresh, isDebouncing = _h.isDebouncing, cancelPendingRefreshes = _h.cancelPendingRefreshes;
+    var dispatchEventAndComplete = useCallback(function (result) {
+        dispatchEvent('Dynamic Flow - Flow Finished', { result: 'success' });
+        onCompletion(result);
+    }, [onCompletion, dispatchEvent]);
+    useEffect(function () {
+        dispatchEvent('Dynamic Flow - Flow Started', {});
+    }, []);
+    useEffect(function () {
+        if (!initialStep) {
+            var action = __assign({ id: '#initial-step-request', method: 'GET' }, initialAction);
+            void performAction(action, action.data);
+        }
+        if (initialStep) {
+            warnIfNoStepLayout(initialStep);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [httpClient, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
+    var handleResponse = function (response, fetchType) { return __awaiter(void 0, void 0, void 0, function () {
+        var errorResponse, result, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 4, , 5]);
+                    if (response.status === 304) {
+                        setLoadingState('idle');
+                        return [2 /*return*/];
+                    }
+                    if (!!response.ok) return [3 /*break*/, 2];
+                    return [4 /*yield*/, parseErrorResponse(response)];
+                case 1:
+                    errorResponse = _a.sent();
+                    void updateAfterError(errorResponse);
+                    return [2 /*return*/];
+                case 2: return [4 /*yield*/, parseFetchResponse(response)];
+                case 3:
+                    result = _a.sent();
+                    if (result.type === 'action') {
+                        void performAction(result.action, result.action.data);
+                    }
+                    else if (result.type === 'exit') {
+                        dispatchEventAndComplete(result.result);
+                    }
+                    else {
+                        updateStep(result.step, result.etag, fetchType);
+                    }
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_3 = _a.sent();
+                    completeWithError(error_3, 'Error parsing fetch response', fetchType, response.status);
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var updateStep = function (newStep, etag, fetchType) {
+        warnIfNoStepLayout(newStep);
+        setStepAndEtag(newStep, etag);
+        setLoadingState('idle');
+        if (fetchType === 'submission') {
+            setSubmitted(false);
+            dispatchEvent('Dynamic Flow - Step Started', __assign({ stepId: newStep.id || newStep.key }, newStep === null || newStep === void 0 ? void 0 : newStep.analytics));
+        }
+        else {
+            dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'success' });
+        }
+    };
+    var updateAfterError = function (errorBody) { return __awaiter(void 0, void 0, void 0, function () {
+        var refreshUrl;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    refreshUrl = errorBody.refreshUrl || errorBody.refreshFormUrl;
+                    if (!refreshUrl) return [3 /*break*/, 2];
+                    return [4 /*yield*/, performRefresh(refreshUrl, combineModels(models), etag)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    if (errorBody.validation) {
+                        setFormErrors(errorBody.validation);
+                    }
+                    if (errorBody.error) {
+                        setGlobalError(errorBody.error);
+                    }
+                    setLoadingState('idle');
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var completeWithError = function (error, message, fetchType, responseStatus) {
+        logCritical('Error fetching', message);
+        if (fetchType === 'refresh') {
+            dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'failure' });
+        }
+        dispatchEvent('Dynamic Flow - Flow Finished', { status: 'failure' });
+        onError(error, responseStatus);
+        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: DF-473 - Remove type assertions once we're confident people have had time to fix any errors
+            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 triggerSchemaRefreshUrl = triggerSchema.refreshUrl || triggerSchema.refreshFormUrl;
+            var stepRefreshUrl = (step === null || step === void 0 ? void 0 : step.refreshUrl) || (step === null || step === void 0 ? void 0 : step.refreshFormUrl);
+            var refreshUrl = triggerSchemaRefreshUrl || stepRefreshUrl;
+            if (refreshUrl) {
+                debouncedRefresh(refreshUrl, combineModels(updatedModels), etag, triggerSchema);
+            }
+        }
+    };
+    // FIXME: We should annotate the entire onAction function with the type OnAction
+    var onAction = function (action) { return __awaiter(void 0, void 0, void 0, function () {
+        var data, method, skipValidation, submissionData;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (isLoading || isDebouncing || action.disabled) {
+                        return [2 /*return*/];
+                    }
+                    if (action.exit && !action.url) {
+                        dispatchEventAndComplete(action.result);
+                        return [2 /*return*/];
+                    }
+                    data = action.data, method = action.method, skipValidation = action.skipValidation;
+                    submissionData = __assign(__assign({}, combineModels(models)), data);
+                    if (!isSubmissionMethod(method)) return [3 /*break*/, 3];
+                    setFormErrors(null);
+                    if (!skipValidation) {
+                        setSubmitted(true);
+                    }
+                    if (!(modelIsValid || skipValidation)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, performAction(action, submissionData)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, performAction(action)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsx(LogProvider, { flowId: flowId, stepId: (step === null || step === void 0 ? void 0 : step.id) || (step === null || step === void 0 ? void 0 : step.key), onLog: onLog, children: _jsx(EventsContextProvider, { metadata: analyticsMetadata, onEvent: onEvent, children: _jsx(DynamicFlowProvider, { loading: isLoading || isDebouncing, children: _jsx(HttpClientProvider, { httpClient: httpClient, children: _jsx(FeatureContextProvider, { features: features, 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 })) }) }) }) }) }));
+};
+function DynamicFlow(props) {
+    return (_jsx(ErrorBoundary, { 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); };
+    var hasRefreshOnChange = (triggerSchema === null || triggerSchema === void 0 ? void 0 : triggerSchema.refreshStepOnChange) || (triggerSchema === null || triggerSchema === void 0 ? void 0 : triggerSchema.refreshFormOnChange);
+    return type !== 'init' && hasRefreshOnChange && (isValid() || wasValid());
+};

package/build/legacy/dynamicFlow/DynamicFlowStep.js

@@ -0,0 +1,37 @@
+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 { useExternal } from '../common/hooks';
+import { isCameraStep } from '../common/utils';
+import { DynamicAlert } from '../layout';
+import { CameraStep, LayoutStep, ExternalConfirmationStep } from '../step';
+import BackButton from './BackButton';
+export function DynamicFlowStep(props) {
+    var _a, _b, _c;
+    var step = props.step, globalError = props.globalError, onAction = props.onAction;
+    var externalUrl = (_a = step === null || step === void 0 ? void 0 : step.external) === null || _a === void 0 ? void 0 : _a.url;
+    var backButton = ((_b = step === null || step === void 0 ? void 0 : step.navigation) === null || _b === void 0 ? void 0 : _b.back) || ((_c = step === null || step === void 0 ? void 0 : step.navigation) === null || _c === void 0 ? void 0 : _c.backButton);
+    var _d = useExternal(externalUrl), requiresManualTrigger = _d.requiresManualTrigger, dismissConfirmation = _d.dismissConfirmation;
+    if (step === undefined) {
+        if (globalError) {
+            return (_jsx(DynamicAlert, { component: { context: 'negative', markdown: globalError, margin: 'lg' } }));
+        }
+        return null;
+    }
+    if (externalUrl && requiresManualTrigger) {
+        return _jsx(ExternalConfirmationStep, { url: externalUrl, onClose: dismissConfirmation });
+    }
+    if (isCameraStep(step)) {
+        return _jsx(CameraStep, __assign({}, props, { step: step }));
+    }
+    return (_jsxs(_Fragment, { children: [backButton && _jsx(BackButton, __assign({}, backButton, { onAction: onAction })), globalError ? (_jsx(DynamicAlert, { component: { context: 'negative', markdown: globalError, margin: 'lg' } })) : null, _jsx(LayoutStep, __assign({}, props, { stepSpecification: step }))] }));
+}

package/build/legacy/dynamicFlow/DynamicFlowTypes.js

@@ -0,0 +1 @@
+export {};

package/build/legacy/dynamicFlow/index.js

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

package/build/legacy/dynamicFlow/stories/dev-tools/DynamicFlow.story.js

@@ -0,0 +1,78 @@
+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 { layouts, schemas, examples } from '@wise/dynamic-flow-fixtures';
+import { useCallback, useMemo, useState } from 'react';
+import DynamicFlow from '../../DynamicFlow';
+import { fixtureHttpClient } from '../fixtureHttpClient';
+var fixtures = __assign(__assign(__assign({}, schemas), layouts), examples);
+function EditableDynamicFlow(_a) {
+    var _b = _a.initialStepName, initialStepName = _b === void 0 ? '' : _b;
+    var selectedStep = fixtures[initialStepName] || {};
+    var selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+var initialAction = { url: '/initial' };
+function InteractiveDemo(_a) {
+    var selectedInitialStep = _a.selectedInitialStep;
+    var _b = useState(200), initialStatusCode = _b[0], setInitialStatusCode = _b[1];
+    var _c = useState(selectedInitialStep), initialStep = _c[0], setInitialStep = _c[1];
+    var onTextAreaChange = function (event) {
+        setInitialStep(event.target.value);
+    };
+    var httpClient = useCallback(function (input, init) {
+        action('httpClient')(input, init);
+        if (String(input) === '/initial') {
+            return Promise.resolve(new Response(initialStep, { status: initialStatusCode }));
+        }
+        return fixtureHttpClient(input, init);
+    }, [initialStep, initialStatusCode]);
+    return (_jsxs("div", { style: { display: 'flex', gap: '1em' }, children: [_jsxs("div", { style: { flexBasis: '50%' }, children: [_jsx("h3", { children: "Editable Demo" }), _jsxs("p", { children: ["You can specify a response status code and body, and DF will load your step.", _jsx("br", {}), "(for ideas, you can select an initial step from the drop down in the controls panel)"] }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "status-code", children: "Response Status code: " }), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "textarea", children: "Response Body:" }), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })] }), _jsx("div", { style: { flexBasis: '50%' }, children: _jsx(DynamicFlow, { flowId: "the-flow-id", initialAction: initialAction, httpClient: httpClient, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "".concat(initialStep, "-").concat(initialStatusCode)) })] }));
+}
+function InvalidJsonWarning(_a) {
+    var initialStep = _a.initialStep;
+    var validJson = useMemo(function () { return isValidJson(initialStep); }, [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+var isValidJson = function (value) {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect(_a) {
+    var id = _a.id, _b = _a.state, value = _b[0], setValue = _b[1];
+    return (_jsxs("select", { id: id, value: value, onChange: function (event) { return setValue(Number.parseInt(event.target.value, 10)); }, children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] }));
+}
+var meta = {
+    title: 'Dev Tools/Dynamic Flow',
+    component: EditableDynamicFlow,
+};
+export var EditableStep = {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/legacy/dynamicFlow/stories/dev-tools/ErrorResponses.story.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import DynamicFlow from '../../DynamicFlow';
+var cases = {
+    '/422-global-error': {
+        btnText: 'Status 422 with a global error',
+        paragraph: 'It should display a global error on screen. This is valid, expected behaviour.',
+        btnType: 'primary',
+        status: 422,
+        body: "{\"error\": \"Global Error\"}",
+    },
+    '/422-non-json-parseable': {
+        btnText: 'Error 422 with non-json-parseable response body',
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 422,
+        body: "Any string that CANNOT be parsed as JSON.",
+    },
+    '/422-json-parseable': {
+        btnText: 'Error 422 with json-parseable response body',
+        btnType: 'negative',
+        paragraph: "It should trigger onError and onLog. This is not expected behaviour.",
+        status: 422,
+        body: "{ \"valid\": \"JSON\" }",
+    },
+    '/200-json-parseable': {
+        btnText: "Status 200 with json-parseable response body",
+        btnType: 'negative',
+        paragraph: "This is not expected behaviour because the response does not cointain the DF-X-Exit header. It should trigger onError and onLog, but it doesn't!.",
+        status: 200,
+        body: "{ \"valid\": \"JSON\" }",
+    },
+    '/200-bad-action': {
+        btnText: "Status 200 with bad action body",
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 200,
+        body: "{ \"action\": {\"bad\": \"action\"} }",
+    },
+    '/422-json-parseable-non-object': {
+        btnText: 'Error 422 with json-parseable response body, but not an object',
+        btnType: 'negative',
+        paragraph: 'It should trigger onError and onLog. This is not expected behaviour.',
+        status: 422,
+        body: "\"A string literal can be parsed as JSON.\"",
+    },
+};
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    var testCase = cases[String(input)];
+    var response = testCase
+        ? new Response(testCase.body, { status: testCase.status })
+        : new Response(null, { status: 404 });
+    return Promise.resolve(response);
+};
+var initialStep = getInitialStep();
+function ErrorResponsesStory() {
+    return (_jsx(DynamicFlow, { flowId: "simulate-errors", initialStep: initialStep, httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }));
+}
+function getTestCaseBoxLayout(url, testCase, index) {
+    var btnText = testCase.btnText, paragraph = testCase.paragraph, btnType = testCase.btnType, status = testCase.status, body = testCase.body;
+    return {
+        type: 'box',
+        border: true,
+        margin: 'xl',
+        components: [
+            {
+                type: 'button',
+                action: {
+                    title: btnText,
+                    type: btnType,
+                    url: url,
+                    data: { 'button-id': index },
+                },
+            },
+            {
+                type: 'paragraph',
+                text: "Response status: ".concat(status, " - body: ").concat(body, "."),
+                align: 'center',
+                margin: 'xs',
+            },
+            {
+                type: 'paragraph',
+                text: paragraph,
+                align: 'center',
+                margin: 'md',
+            },
+        ],
+    };
+}
+function getInitialStep() {
+    return {
+        type: 'form',
+        id: 'Examples/Simulate Errors',
+        title: 'Simulate Errors',
+        description: 'Click any of the buttons to simulate an error as described below.',
+        schemas: [],
+        layout: [
+            {
+                type: 'paragraph',
+                text: 'Press any buttons and see the httpClient requests and responses in the Actions panel.',
+                align: 'center',
+            },
+            {
+                type: 'box',
+                width: 'md',
+                components: Object.keys(cases).map(function (url, index) {
+                    return getTestCaseBoxLayout(url, cases[url], index);
+                }),
+            },
+        ],
+    };
+}
+var meta = {
+    title: 'Dev Tools/Responses',
+    component: ErrorResponsesStory,
+};
+export var ErrorResponses = {
+    render: function () { return _jsx(ErrorResponsesStory, {}); },
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/legacy/dynamicFlow/stories/dev-tools/Examples.story.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { examples } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../../DynamicFlow';
+import { getObjectKeys } from '../fixtureHttpClient';
+var storyMap = {};
+var allStepNames = getObjectKeys(examples);
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    return fetch(input, init);
+};
+allStepNames.forEach(function (stepName) {
+    // eslint-disable-next-line import/namespace
+    var label = examples[stepName].id;
+    if (label) {
+        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
+        storyMap[group] || (storyMap[group] = storiesOf("Dev Tools/".concat(group), module).addParameters({
+            chromatic: { disableSnapshot: true },
+        }));
+        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
+            // eslint-disable-next-line import/namespace
+            initialStep: examples[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
+    }
+});

package/build/legacy/dynamicFlow/stories/dev-tools/Features.story.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { features } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../../DynamicFlow';
+var storyMap = {};
+var selectedStepNames = [
+    'actionResponse',
+    'arrayUploadBase64',
+    'external',
+    'multiSelect',
+    'persistAsync',
+    'polling',
+    'search',
+    'modal',
+];
+var httpClient = function (input, init) {
+    action('httpClient')(input, init);
+    return fetch(input, init);
+};
+selectedStepNames.forEach(function (stepName) {
+    // eslint-disable-next-line import/namespace
+    var label = features[stepName].id;
+    if (label) {
+        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
+        storyMap[group] || (storyMap[group] = storiesOf("Dev Tools/".concat(group), module).addParameters({
+            chromatic: { disableSnapshot: true },
+        }));
+        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
+            // eslint-disable-next-line import/namespace
+            initialStep: features[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
+    }
+});