@wise/dynamic-flow-client 0.2.1 → 0.3.0-beta-ec09e7.2

package/README.md

@@ -23,17 +23,18 @@ pnpm install @wise/dynamic-flow-client
 
 ```
 # yarn
-yarn add prop-types react react-dom react-intl
+yarn add react react-dom react-intl
 yarn add @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
 
 # npm
-npm install prop-types react react-dom react-intl
+npm install react react-dom react-intl
 npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
 
 # pnpm
-pnpm install prop-types react react-dom react-intl
+pnpm install react react-dom react-intl
 pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
 ```
+**Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
 
 ```js
 // Should be imported once in your application
@@ -50,10 +51,7 @@ import {
   getLangFromLocale,
   DEFAULT_LANG,
 } from '@transferwise/components';
-import {
-  DynamicFlow,
-  translations as dynamicFlowsTranslations,
-} from '@wise/dynamic-flow-client/';
+import { DynamicFlow, translations as dynamicFlowsTranslations } from '@wise/dynamic-flow-client/';
 
 const lang = getLangFromLocale(locale) || DEFAULT_LANG;
 const i18n = {
@@ -88,7 +86,7 @@ We recommend using a `initialAction` and a `fetcher` function.
 <DynamicFlow
   initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
   fetcher={(...args) => fetch(...args)}
-  onClose={(result) => {
+  onComplete={(result) => {
     console.log('Flow exited with', result);
   }}
   onError={(error, statusCode) => {
@@ -105,44 +103,70 @@ In some cases you may want to obtain the initial step yourself, and then pass it
 <DynamicFlow
   initialStep={someInitialStepIfoundLayingAroundHere}
   fetcher={...}
-  onClose={...}
+  onComplete={...}
   onError={...}
 />
 ```
 
-### `baseUrl` vs `fetcher`
+### The `fetcher` function prop
 
-We recommend passing a fetcher function. This can be `window.fetch` itself or some wrapper function where you inject auth headers and anything else you many need.
+You must pass a fetcher function. This can be `window.fetch` itself or some wrapper function where you inject authorisation headers and anything else you many need.
 
-You can take advantage of the `makeFetcher` utility function. This function takes a `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests, such as `{ 'X-Access-Token': 'Tr4n5f3rw153' }`:
+You can take advantage of the provided `makeFetcher` utility function. This function takes `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests.
 
 ```tsx
 import { makeFetcher, DynamicFlow } from '@wise/dynamic-flow-client';
 
-const myFetcher = makeFetcher('/my-base-url', { 'X-Access-Token': 'Tr4n5f3rw153' });
-
-...
+const myFetcher = makeFetcher('/my-base-url', { 'X-Access-Token': 'an-access-token' });
 
 <DynamicFlow
-  initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
+  initialAction={{ method: 'GET', url: '/flow-starting-url' }}
   fetcher={myFetcher}
-  // baseUrl="/my-base-url"
-  onClose={...}
+  onComplete={...}
   onError={...}
 />
 ```
 
-**Important**: You must not throw from your fetcher function. Errors should result in a response with an error status code and potentially a body with an error message.
+#### Custom `fetcher` functions
 
-### Logging and Tracking
+If you want to write your own fetcher function (or if you're writing mocks), it's important that you return proper `Response` objects, and that you **do not throw**. Errors should result in a response with an error status code and potentially a body with an error message. For example:
 
-The `DynamicFlow` component accepts two optional props: `onTrackableEvent` and `onLog` which can be used to track and log.
+```tsx
+const mockFetcher = (input, init) => {
+  switch (input) {
+    case '/standard':
+      return Promise.resolve(new Response(init.body));
+    case '/exit':
+      return Promise.resolve(new Response(init.body, { headers: { 'x-df-exit': true } }));
+    case '/error':
+    default:
+      return Promise.resolve(new Response('An error has occurred.', { status: 500 }));
+  }
+};
+```
+
+Also, please make sure your mocks return a new `Response` instace every time. This is because responses are mutated when we parse their body, and they cannot be parsed a second time.
+
+```ts
+const initialResponse = new Response(JSON.stringify(initialStep));
+// ❌ wrong - the same instance is returned on each request
+const mockFetcher = (input, init) => Promise.resolve(initialResponse);
+```
+
+```ts
+// ✅ correct - a new instance is returned on each request
+const mockFetcher = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
+```
+
+### Telemetry
+
+The `DynamicFlow` component accepts two optional props: `onEvent` and `onLog` which can be used to track and log.
 
 In the example below we send tracking events to Mixpanel and logging events to Rollbar.
 
 ```tsx
 <DynamicFlow
-  onTrackableEvent={(event, props) => mixpanel.track(event, props)}
+  onEvent={(event, props) => mixpanel.track(event, props)}
   onLog={(level, message, extra) => Rollbar[level](message, extra)}
 />
 ```
@@ -150,7 +174,7 @@ In the example below we send tracking events to Mixpanel and logging events to R
 Alternatively, you can log to the browser console:
 
 ```ts
-onTrackableEvent={(event, props) => console.log(event, props)}
+onEvent={(event, props) => console.log(event, props)}
 onLog={(level, message, extra) => {
   const levelToConsole = {
     critical: console.error,
@@ -183,8 +207,6 @@ type LoaderConfig = {
 | `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
 | `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
 
-
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.
-

package/build/common/contexts/events/EventsContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type EventName = 'Dynamic Flow - Flow Started' | 'Dynamic Flow - Flow Finished' | 'Dynamic Flow - Step Started' | 'Dynamic Flow - Step Submitted' | 'Dynamic Flow - Step Refreshed' | 'Dynamic Flow - OneOf Selected' | 'Dynamic Flow - PersistAsync' | 'Dynamic Flow - ValidationAsync' | 'Dynamic Flow - Camera Permission Denied' | 'Dynamic Flow - Camera Feed Started' | 'Dynamic Flow - Camera Not Supported' | 'Dynamic Flow - invalid submission response' | 'Dynamic Flow - onAction supressed' | 'Dynamic Flow - OneOf Searched';
+export type EventHandler = (eventName: EventName, properties: Record<string, unknown>) => void;
+type Props = {
+    metadata?: Record<string, unknown> & {
+        flowId?: string;
+        stepId?: string;
+    };
+    children: React.ReactNode;
+    onEvent: EventHandler;
+};
+export declare const EventsContextProvider: ({ metadata, children, onEvent }: Props) => JSX.Element;
+export declare function useEventDispatcher(): EventHandler;
+export declare const getEventDispatcher: (onEvent: EventHandler, metadata?: Record<string, unknown>) => EventHandler;
+export {};

package/build/common/contexts/events/EventsContext.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+var EventsContext = createContext({
+    triggerEvent: function () {
+        // noop
+    }
+});
+export var EventsContextProvider = function (_a) {
+    var metadata = _a.metadata, children = _a.children, onEvent = _a.onEvent;
+    var value = useMemo(function () { return ({ triggerEvent: getEventDispatcher(onEvent, metadata) }); }, [onEvent, metadata]);
+    return _jsx(EventsContext.Provider, __assign({ value: value }, { children: children }));
+};
+export function useEventDispatcher() {
+    var triggerEvent = useContext(EventsContext).triggerEvent;
+    return triggerEvent;
+}
+export var getEventDispatcher = function (onEvent, metadata) {
+    return function (eventName, properties) {
+        if (properties === void 0) { properties = {}; }
+        return onEvent(eventName, __assign(__assign({}, metadata), properties));
+    };
+};

package/build/common/contexts/events/index.d.ts

@@ -0,0 +1 @@
+export * from './EventsContext';

package/build/common/contexts/events/index.js

@@ -0,0 +1 @@
+export * from './EventsContext';

package/build/flow/DynamicFlow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DynamicFlowProps } from './types';
 declare const DynamicFlow: (props: DynamicFlowProps) => JSX.Element;
 export default DynamicFlow;

package/build/flow/DynamicFlow.js

@@ -49,9 +49,9 @@ 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 { getEventDispatcher, EventsContextProvider } from '../common/contexts/events';
+import { FetcherProvider } 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';
@@ -72,7 +72,7 @@ var noop = function () { };
  *
  */
 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 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 = 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];
@@ -81,8 +81,7 @@ var DynamicFlowComponent = function (_a) {
     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 dispatchEvent = useMemo(function () { return getEventDispatcher(onEvent, analyticsMetadata); }, [onEvent, analyticsMetadata]);
     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;
@@ -104,7 +103,7 @@ var DynamicFlowComponent = function (_a) {
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, 3, , 4]);
-                        trackEvent('Dynamic Flow - Step Submitted', { actionId: action.$id });
+                        dispatchEvent('Dynamic Flow - Step Submitted', { actionId: action.$id });
                         return [4 /*yield*/, triggerActionRequest({ action: action, data: data })];
                     case 2:
                         response = _a.sent();
@@ -127,7 +126,7 @@ var DynamicFlowComponent = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 4, , 5]);
-                    trackEvent('Dynamic Flow - Step Refreshed', { status: 'pending' });
+                    dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'pending' });
                     return [4 /*yield*/, triggerActionRequest({ action: action, data: data, etag: etag })];
                 case 2:
                     response = _a.sent();
@@ -156,7 +155,7 @@ var DynamicFlowComponent = function (_a) {
                     return [4 /*yield*/, parseExitResponse(response)];
                 case 2:
                     exitResult = _a.sent();
-                    onCloseWithTracking(__assign(__assign({}, exitResult), action.result));
+                    onCloseWithEvent(__assign(__assign({}, exitResult), action.result));
                     return [3 /*break*/, 4];
                 case 3:
                     error_3 = _a.sent();
@@ -167,16 +166,16 @@ var DynamicFlowComponent = function (_a) {
         });
     }); };
     var debouncedFetchRefresh = useDebouncedRefresh(fetchRefreshStep);
-    var onCloseWithTracking = useCallback(function (result) {
-        trackEvent('Dynamic Flow - Flow Finished', { result: 'success' });
-        onClose(result);
-    }, [onClose, trackEvent]);
+    var onCloseWithEvent = useCallback(function (result) {
+        dispatchEvent('Dynamic Flow - Flow Finished', { result: 'success' });
+        onComplete(result);
+    }, [onComplete, dispatchEvent]);
     useEffect(function () {
-        trackEvent('Dynamic Flow - Flow Started', {});
+        dispatchEvent('Dynamic Flow - Flow Started', {});
     }, []);
     useEffect(function () {
         if (!initialStep) {
-            var action = __assign({ $id: '#initial-step-request', method: 'GET', url: flowUrl }, initialAction);
+            var action = __assign({ $id: '#initial-step-request', method: 'GET' }, initialAction);
             void fetchNextStep(action, action.data);
         }
     }, [flowUrl, fetcher, locale, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
@@ -197,7 +196,7 @@ var DynamicFlowComponent = function (_a) {
                             void fetchNextStep(parsedResponse.action, parsedResponse.action.data);
                             return [2 /*return*/];
                         case 'exit':
-                            return [2 /*return*/, onCloseWithTracking(parsedResponse.result)];
+                            return [2 /*return*/, onCloseWithEvent(parsedResponse.result)];
                         case 'step':
                         default: {
                             step_1 = parsedResponse.step, etag_1 = parsedResponse.etag;
@@ -220,12 +219,12 @@ var DynamicFlowComponent = function (_a) {
         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));
+        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');
-        trackEvent('Dynamic Flow - Step Refreshed', { status: 'success' });
+        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;
@@ -263,9 +262,9 @@ var DynamicFlowComponent = function (_a) {
                 case 5:
                     error_5 = _a.sent();
                     if (fetchType === 'refresh') {
-                        trackEvent('Dynamic Flow - Step Refreshed', { status: 'failure' });
+                        dispatchEvent('Dynamic Flow - Step Refreshed', { status: 'failure' });
                     }
-                    trackEvent('Dynamic Flow - Flow Finished', { 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];
@@ -337,7 +336,7 @@ var DynamicFlowComponent = function (_a) {
                     _a.label = 5;
                 case 5: return [2 /*return*/];
                 case 6:
-                    onCloseWithTracking(result);
+                    onCloseWithEvent(result);
                     return [2 /*return*/];
                 case 7:
                     if (isSubmissionMethod(method)) {
@@ -347,7 +346,7 @@ var DynamicFlowComponent = function (_a) {
                             void fetchNextStep(action, submissionData);
                         }
                         else {
-                            trackEvent('Dynamic Flow - onAction supressed', __assign({ reason: 'invalid model' }, extraLoggingProps));
+                            dispatchEvent('Dynamic Flow - onAction supressed', __assign({ reason: 'invalid model' }, extraLoggingProps));
                         }
                         return [2 /*return*/];
                     }
@@ -356,7 +355,7 @@ var DynamicFlowComponent = function (_a) {
             }
         });
     }); };
-    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) {
+    return (_jsx(LogProvider, __assign({ flowId: flowId, stepId: step === null || step === void 0 ? void 0 : step.key, onLog: onLog }, { children: _jsx(EventsContextProvider, __assign({ metadata: analyticsMetadata, onEvent: onEvent }, { 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 })) })) })) })) })));
 };

package/build/flow/DynamicFlowStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalError, Step } from '../dynamic-flow-types';
 import { LayoutStepProps } from '../step/layoutStep/LayoutStep';
 type DynamicFlowStepProps = Omit<LayoutStepProps, 'stepSpecification'> & {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     onDismiss: () => void;
 };

package/build/flow/response-parsers/index.d.ts

@@ -2,7 +2,7 @@ import { ActionResponseBody, ErrorResponseBody, Step } from '../../dynamic-flow-
 import { DynamicFlowProps } from '../types';
 type ParsedBody = {
     type: 'exit';
-    result: Parameters<DynamicFlowProps['onClose']>[0];
+    result: Parameters<DynamicFlowProps['onComplete']>[0];
 } | {
     type: 'action';
     action: ActionResponseBody['action'];
@@ -13,5 +13,5 @@ type ParsedBody = {
 };
 export declare const parseFetchResponse: (response: Response) => Promise<ParsedBody>;
 export declare const parseErrorResponse: (response: Response) => Promise<ErrorResponseBody>;
-export declare const parseExitResponse: (response: Response) => Promise<Parameters<DynamicFlowProps['onClose']>[0]>;
+export declare const parseExitResponse: (response: Response) => Promise<Parameters<DynamicFlowProps['onComplete']>[0]>;
 export {};

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

@@ -42,11 +42,12 @@ export var parseFetchResponse = function (response) { return __awaiter(void 0, v
     return __generator(this, function (_c) {
         switch (_c.label) {
             case 0:
+                assertResponseIsValid(response);
                 if (!((_b = response.headers) === null || _b === void 0 ? void 0 : _b.has('X-Df-Exit'))) return [3 /*break*/, 2];
                 _a = { type: 'exit' };
                 return [4 /*yield*/, parseExitResponse(response)];
             case 1: return [2 /*return*/, (_a.result = _c.sent(), _a)];
-            case 2: return [4 /*yield*/, parseResponseJson(response.clone())];
+            case 2: return [4 /*yield*/, parseResponseJson(response)];
             case 3:
                 jsonBody = _c.sent();
                 if (!isObject(jsonBody)) {
@@ -71,7 +72,9 @@ export var parseErrorResponse = function (response) { return __awaiter(void 0, v
     var jsonBody;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, parseResponseJson(response.clone())];
+            case 0:
+                assertResponseIsValid(response);
+                return [4 /*yield*/, parseResponseJson(response)];
             case 1:
                 jsonBody = _a.sent();
                 if (!isObject(jsonBody)) {
@@ -85,7 +88,9 @@ export var parseExitResponse = function (response) { return __awaiter(void 0, vo
     var result;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, parseResponseJson(response.clone())];
+            case 0:
+                assertResponseIsValid(response);
+                return [4 /*yield*/, parseResponseJson(response)];
             case 1:
                 result = _a.sent();
                 if (isObject(result) || result === null) {
@@ -110,3 +115,11 @@ var parseResponseJson = function (response) { return __awaiter(void 0, void 0, v
         }
     });
 }); };
+var assertResponseIsValid = function (response) {
+    if (!(response instanceof Response)) {
+        throw new Error('Incorrect type of response from fetch. Expected object of type Response.');
+    }
+    if (response.bodyUsed) {
+        throw new Error('The body of the provided Response object has already been used. Every request must respond with a new Response object.');
+    }
+};

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

@@ -15,7 +15,7 @@ allStepNames.forEach(function (stepName) {
     if (!storyMap[group]) {
         storyMap[group] = storiesOf("Dynamic Flow/".concat(group), module);
     }
-    storyMap[group].add(name, function () { return (_jsx(DynamicFlow, { id: "storybook", initialAction: { method: 'GET', url: "/steps/".concat(stepName) }, fetcher: fixtureFetcher, loaderConfig: { size: 'xl', initial: true, submission: false }, onClose: action('onClose'), onStepChange: action('onStepChange'), onError: action('onError'), onTrackableEvent: action('onTrackableEvent'), onLog: action('onLog') }, stepName)); });
+    storyMap[group].add(name, function () { return (_jsx(DynamicFlow, { flowId: "storybook", initialAction: { method: 'GET', url: "/steps/".concat(stepName) }, fetcher: fixtureFetcher, loaderConfig: { size: 'xl', initial: true, submission: false }, onComplete: action('onComplete'), onStepChange: action('onStepChange'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
 });
 var editable = storiesOf("Dynamic Flow/Editable", module);
 editable.add('Dynamic Flow', EditableDynamicFlow, {

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

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

package/build/flow/stories/EditableDynamicFlow.js

@@ -28,7 +28,7 @@ var InteractiveDemo = function (_a) {
     var onTextAreaChange = function (event) {
         setInitialStep(event.target.value);
     };
-    return (_jsxs("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [_jsxs("div", __assign({ style: { flexBasis: '50%' } }, { children: [_jsx("h3", { children: "Editable Demo" }), _jsxs("p", { children: ["You can select an initial step from the drop down in the controls panel.", _jsx("br", {}), "You can edit the JSON below and see the result on the right."] }), _jsx("textarea", { wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })), _jsx("div", __assign({ style: { flexBasis: '50%' } }, { children: _jsx(DynamicFlow, { initialStep: safeParseStepJson(initialStep), fetcher: fixtureFetcher, onClose: action('onClose'), onStepChange: action('onStepChange'), onError: action('onError'), onTrackableEvent: action('onTrackableEvent'), onLog: action('onLog') }, initialStep) }))] })));
+    return (_jsxs("div", __assign({ style: { display: 'flex', gap: '1em' } }, { children: [_jsxs("div", __assign({ style: { flexBasis: '50%' } }, { children: [_jsx("h3", { children: "Editable Demo" }), _jsxs("p", { children: ["You can select an initial step from the drop down in the controls panel.", _jsx("br", {}), "You can edit the JSON below and see the result on the right."] }), _jsx("textarea", { wrap: "off", rows: 40, style: { fontFamily: 'monospace', fontSize: '0.9em', width: '100%' }, value: initialStep, onChange: onTextAreaChange })] })), _jsx("div", __assign({ style: { flexBasis: '50%' } }, { children: _jsx(DynamicFlow, { flowId: "the-flow-id", initialStep: safeParseStepJson(initialStep), fetcher: fixtureFetcher, onComplete: action('onComplete'), onStepChange: action('onStepChange'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, initialStep) }))] })));
 };
 function safeParseStepJson(jsonStep) {
     try {

package/build/flow/types.d.ts

@@ -1,25 +1,18 @@
+import { EventHandler } from '../common/contexts/events';
 import { LogEventHandler } from '../common/logging';
-import { TrackableEventHandler } from '../common/tracking';
 import { Action, FormLayout, Schema, Size, Step } from '../dynamic-flow-types';
 import { OnChangeProps } from '../jsonSchemaForm/JsonSchemaForm';
 export type DynamicFlowPropsBasic = {
-    id?: string;
+    flowId: string;
     loaderConfig?: LoaderConfig;
     displayStepTitle?: boolean;
-    onClose: (result: Record<string, unknown> | undefined | null) => void;
+    fetcher: Fetcher;
+    onComplete: (result: Record<string, unknown> | undefined | null) => void;
     onStepChange?: (newStep: Step, previousStep: Step | undefined) => void;
     onError: (error: unknown, status?: number) => void;
-    onTrackableEvent?: TrackableEventHandler;
+    onEvent?: EventHandler;
     onLog?: LogEventHandler;
 };
-type DynamicFlowPropsWithBaseUrl = {
-    baseUrl: string;
-    fetcher?: never;
-};
-type DynamicFlowPropsWithFetcher = {
-    baseUrl?: never;
-    fetcher: Fetcher;
-};
 type DynamicFlowPropsWithInitialAction = {
     initialAction: InitialAction;
     initialStep?: never;
@@ -30,25 +23,7 @@ type DynamicFlowPropsWithInitialStep = {
     initialStep: Step;
     flowUrl?: never;
 };
-type DynamicFlowPropsWithFlowUrl = {
-    initialAction?: never;
-    initialStep?: never;
-    /** @deprecated Use initialAction instead */
-    flowUrl: string;
-};
-export type DynamicFlowProps = DynamicFlowPropsBasic & (DynamicFlowPropsWithBaseUrl | DynamicFlowPropsWithFetcher) & (DynamicFlowPropsWithInitialAction | DynamicFlowPropsWithInitialStep | DynamicFlowPropsWithFlowUrl);
-/** @deprecated Use DynamicFlowProps instead */
-export type DynamicFlowV3Props = DynamicFlowProps;
-/** @deprecated Use DynamicFlowPropsWithBaseUrl instead */
-export type DynamicFlowV3PropsWithBaseUrl = DynamicFlowPropsWithBaseUrl;
-/** @deprecated Use DynamicFlowPropsWithFetcher instead */
-export type DynamicFlowV3PropsWithFetcher = DynamicFlowPropsWithFetcher;
-/** @deprecated Use DynamicFlowPropsWithInitialAction instead */
-export type DynamicFlowV3PropsWithFlowUrl = DynamicFlowPropsWithInitialAction;
-/** @deprecated Use DynamicFlowPropsWithInitialStep instead */
-export type DynamicFlowV3PropsWithInitialStep = DynamicFlowPropsWithInitialStep;
-/** @deprecated Use DynamicFlowPropsBasic instead */
-export type DynamicFlowV3PropsBasic = DynamicFlowPropsBasic;
+export type DynamicFlowProps = DynamicFlowPropsBasic & (DynamicFlowPropsWithInitialAction | DynamicFlowPropsWithInitialStep);
 export declare function isSchema(schema: FormLayout['schema']): schema is Schema;
 export type Fetcher = typeof fetch;
 export type ETag = string;

package/build/i18n/de.json

@@ -15,7 +15,7 @@
   "dynamicFlows.ControlFeedback.minLength": "Bitte gib mindestens {minLength} Zeichen ein.",
   "dynamicFlows.ControlFeedback.minimum": "Bitte gib eine Zahl ein, die {minimum} oder mehr beträgt.",
   "dynamicFlows.ControlFeedback.minimumDate": "Bitte gib ein Datum ein, das am oder nach dem {minimum} liegt.",
-  "dynamicFlows.ControlFeedback.pattern": "Falsches Format",
+  "dynamicFlows.ControlFeedback.pattern": "Bitte gib die Angabe im richtigen Format ein.",
   "dynamicFlows.ControlFeedback.patternDate": "Bitte gib ein Datum im richtigen Format ein.",
   "dynamicFlows.ControlFeedback.required": "Bitte fülle dieses Feld aus.",
   "dynamicFlows.ControlFeedback.type": "Falscher Typ",
@@ -24,6 +24,10 @@
   "dynamicFlows.DynamicParagraph.copy": "Kopieren",
   "dynamicFlows.ErrorBoundary.errorAlert": "Hoppla – da ist was schiefgelaufen...",
   "dynamicFlows.ErrorBoundary.retry": "Erneut versuchen",
+  "dynamicFlows.ExternalConfirmation.cancel": "Abbrechen",
+  "dynamicFlows.ExternalConfirmation.description": "Bitte bestätige, dass du **{origin}** in einem neuen Browser-Tab öffnen möchtest.",
+  "dynamicFlows.ExternalConfirmation.open": "In neuem Tab öffnen",
+  "dynamicFlows.ExternalConfirmation.title": "Bitte bestätigen",
   "dynamicFlows.Help.ariaLabel": "Klicke hier für mehr Informationen.",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Diese Datei ist leider zu groß. Bitte lade eine kleinere Datei hoch.",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Bitte lade {maxItems} oder weniger Dateien hoch.",

package/build/i18n/es.json

@@ -1,9 +1,9 @@
 {
   "dynamicFlows.ArraySchema.maxItemsError": "Añade {maxItems} o menos.",
   "dynamicFlows.ArraySchema.minItemsError": "Añade al menos {minItems}.",
-  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "El navegador que estás utilizando no es compatible con una cámara. Prueba con otro navegador o dispositivo o descarga nuestra aplicación móvil.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "El navegador que estás utilizando no es compatible con una cámara. Prueba con otro navegador, dispositivo o descarga nuestra app móvil.",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Cámara no compatible",
-  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Permitir acceso a la cámara",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Habilitar acceso a la cámara",
   "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Habilita el acceso a la cámara en la configuración de tu navegador para volver a activarla.",
   "dynamicFlows.CameraCapture.NoCameraAccess.title": "No podemos acceder a tu cámara",
   "dynamicFlows.CameraCapture.reviewInstructions": "¿Tu foto es clara, legible y completa?",
@@ -24,11 +24,15 @@
   "dynamicFlows.DynamicParagraph.copy": "Copiar",
   "dynamicFlows.ErrorBoundary.errorAlert": "Vaya. Algo ha salido mal...",
   "dynamicFlows.ErrorBoundary.retry": "Reintentar",
+  "dynamicFlows.ExternalConfirmation.cancel": "Cancelar",
+  "dynamicFlows.ExternalConfirmation.description": "Confirma que quieres abrir **{origin}** en una nueva pestaña del navegador.",
+  "dynamicFlows.ExternalConfirmation.open": "Abrir en nueva pestaña",
+  "dynamicFlows.ExternalConfirmation.title": "Por favor, confirma",
   "dynamicFlows.Help.ariaLabel": "Haz clic aquí para obtener más información.",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Lo sentimos, el archivo pesa demasiado. Sube uno más pequeño.",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Sube {maxItems} o menos archivos.",
   "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Sube al menos {minItems} archivo(s).",
-  "dynamicFlows.PersistAsyncSchema.genericError": "Algo ha ido mal. Vuelve a intentarlo más tarde.",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Algo ha ido mal. Inténtalo de nuevo más tarde.",
   "dynamicFlows.ReadOnlySchema.no": "No",
   "dynamicFlows.ReadOnlySchema.yes": "Sí"
 }

package/build/i18n/fr.json

@@ -1,29 +1,33 @@
 {
   "dynamicFlows.ArraySchema.maxItemsError": "Veuillez ajouter {maxItems} ou moins.",
   "dynamicFlows.ArraySchema.minItemsError": "Veuillez ajouter au moins {minItems}.",
-  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "Le navigateur que vous utilisez ne prend pas en charge l'appareil photo. Veuillez essayer un autre navigateur, un autre appareil ou télécharger notre appli",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "Le navigateur que vous utilisez ne prend pas en charge l'appareil photo. Veuillez essayer un autre navigateur, un autre appareil ou télécharger notre appli.",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Appareil photo non pris en charge",
   "dynamicFlows.CameraCapture.NoCameraAccess.action": "Autoriser l'accès à l'appareil photo",
   "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Autorisez l'accès à l'appareil photo depuis les paramètres de votre navigateur.",
   "dynamicFlows.CameraCapture.NoCameraAccess.title": "Nous n'avons pas accès à votre appareil photo",
   "dynamicFlows.CameraCapture.reviewInstructions": "Votre image est-elle claire, lisible et dans son intégralité ?",
-  "dynamicFlows.CameraCapture.reviewRetry": "Non, veuillez réessayer",
+  "dynamicFlows.CameraCapture.reviewRetry": "Non, réessayer",
   "dynamicFlows.CameraCapture.reviewSubmit": "Oui, confirmer",
   "dynamicFlows.ControlFeedback.maxLength": "Veuillez saisir {maxLength} caractères ou moins.",
   "dynamicFlows.ControlFeedback.maximum": "Veuillez saisir un nombre inférieur ou égal à {maximum}.",
   "dynamicFlows.ControlFeedback.maximumDate": "Veuillez saisir une date égale ou antérieure au {maximum}.",
-  "dynamicFlows.ControlFeedback.minLength": "Veuillez saisir {minLength} caractères minimum.",
+  "dynamicFlows.ControlFeedback.minLength": "Veuillez saisir au moins {minLength} caractères.",
   "dynamicFlows.ControlFeedback.minimum": "Veuillez saisir un nombre supérieur ou égal à {minimum}.",
   "dynamicFlows.ControlFeedback.minimumDate": "Veuillez saisir une date égale ou postérieure au {minimum}.",
   "dynamicFlows.ControlFeedback.pattern": "Veuillez saisir les informations dans le bon format.",
   "dynamicFlows.ControlFeedback.patternDate": "Veuillez saisir une date au format correct.",
-  "dynamicFlows.ControlFeedback.required": "Veuillez remplir ce champ.",
+  "dynamicFlows.ControlFeedback.required": "Champ obligatoire.",
   "dynamicFlows.ControlFeedback.type": "Type incorrect",
   "dynamicFlows.DynamicExternal.retryTitle": "Rouvrir la fenêtre",
   "dynamicFlows.DynamicParagraph.copied": "Copié dans le presse-papier",
   "dynamicFlows.DynamicParagraph.copy": "Copier",
-  "dynamicFlows.ErrorBoundary.errorAlert": "Oups ! Quelque chose n'a pas fonctionné...",
+  "dynamicFlows.ErrorBoundary.errorAlert": "Oups ! Une erreur s'est produite...",
   "dynamicFlows.ErrorBoundary.retry": "Réessayer",
+  "dynamicFlows.ExternalConfirmation.cancel": "Annuler",
+  "dynamicFlows.ExternalConfirmation.description": "Veuillez confirmer que vous souhaitez ouvrir **{origin}** dans un nouvel onglet.",
+  "dynamicFlows.ExternalConfirmation.open": "Ouvrir dans un nouvel onglet",
+  "dynamicFlows.ExternalConfirmation.title": "Veuillez confirmer",
   "dynamicFlows.Help.ariaLabel": "Cliquez ici pour plus d'informations.",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Nous sommes désolés, ce fichier est trop volumineux. Veuillez télécharger un fichier plus petit.",
   "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Veuillez télécharger {maxItems} fichiers ou moins.",