@wise/dynamic-flow-client 0.3.0-beta-d45b31.38 → 0.3.0

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 @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
+yarn add react react-dom react-intl
+yarn add @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
 
 # npm
-npm install prop-types react react-dom react-intl
-npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
+npm install react react-dom react-intl
+npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
 
 # pnpm
-pnpm install prop-types react react-dom react-intl
-pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css @transferwise/neptune-validation
+pnpm install react react-dom react-intl
+pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
 ```
+**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/constants/DateMode.d.ts

@@ -0,0 +1,4 @@
+export declare const DateMode: {
+    DAY_MONTH_YEAR: string;
+    MONTH_YEAR: string;
+};

package/build/common/constants/DateMode.js

@@ -0,0 +1,4 @@
+export var DateMode = {
+    DAY_MONTH_YEAR: 'day-month-year',
+    MONTH_YEAR: 'month-year'
+};

package/build/common/constants/FormControlType.d.ts

@@ -0,0 +1,17 @@
+export declare const FormControlType: {
+    RADIO: string;
+    CHECKBOX: string;
+    SELECT: string;
+    FILE: string;
+    DATE: string;
+    DATETIME: string;
+    DATELOOKUP: string;
+    TEL: string;
+    NUMBER: string;
+    HIDDEN: string;
+    PASSWORD: string;
+    TEXT: string;
+    TEXTAREA: string;
+    UPLOAD: string;
+    TAB: string;
+};

package/build/common/constants/FormControlType.js

@@ -0,0 +1,17 @@
+export var FormControlType = {
+    RADIO: 'radio',
+    CHECKBOX: 'checkbox',
+    SELECT: 'select',
+    FILE: 'file',
+    DATE: 'date',
+    DATETIME: 'date-time',
+    DATELOOKUP: 'date-lookup',
+    TEL: 'tel',
+    NUMBER: 'number',
+    HIDDEN: 'hidden',
+    PASSWORD: 'password',
+    TEXT: 'text',
+    TEXTAREA: 'textarea',
+    UPLOAD: 'upload',
+    TAB: 'tab'
+};

package/build/common/constants/MonthFormat.d.ts

@@ -0,0 +1,4 @@
+export declare const MonthFormat: {
+    SHORT: string;
+    LONG: string;
+};

package/build/common/constants/MonthFormat.js

@@ -0,0 +1,4 @@
+export var MonthFormat = {
+    SHORT: 'short',
+    LONG: 'long'
+};

package/build/common/constants/SchemaType.d.ts

@@ -0,0 +1,11 @@
+export declare const SchemaType: {
+    READ_ONLY: string;
+    PERSIST_ASYNC: string;
+    VALIDATION_ASYNC: string;
+    OBJECT: string;
+    PROMOTED_ONE_OF: string;
+    ONE_OF: string;
+    ALL_OF: string;
+    BASIC: string;
+    ARRAY: string;
+};

package/build/common/constants/SchemaType.js

@@ -0,0 +1,11 @@
+export var SchemaType = {
+    READ_ONLY: 'readOnly',
+    PERSIST_ASYNC: 'persistAsync',
+    VALIDATION_ASYNC: 'validationAsync',
+    OBJECT: 'object',
+    PROMOTED_ONE_OF: 'promotedOneOf',
+    ONE_OF: 'oneOf',
+    ALL_OF: 'allOf',
+    BASIC: 'basic',
+    ARRAY: 'array'
+};

package/build/common/constants/Size.d.ts

@@ -0,0 +1,7 @@
+export declare const Size: {
+    EXTRA_SMALL: string;
+    SMALL: string;
+    MEDIUM: string;
+    LARGE: string;
+    EXTRA_LARGE: string;
+};

package/build/common/constants/Size.js

@@ -0,0 +1,7 @@
+export var Size = {
+    EXTRA_SMALL: 'xs',
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+    EXTRA_LARGE: 'xl'
+};

package/build/common/constants/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DateMode';
+export * from './FormControlType';
+export * from './MonthFormat';
+export * from './SchemaType';
+export * from './Size';

package/build/common/constants/index.js

@@ -0,0 +1,5 @@
+export * from './DateMode';
+export * from './FormControlType';
+export * from './MonthFormat';
+export * from './SchemaType';
+export * from './Size';

package/build/common/contexts/dynamicFlowContexts/DynamicFlowContexts.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    loading: boolean;
+    children: React.ReactNode;
+};
+export declare const DynamicFlowProvider: ({ loading, children }: Props) => JSX.Element;
+export declare const useDynamicFlow: () => {
+    loading: boolean;
+    registerPersistAsyncPromise: (promise: Promise<unknown>) => void;
+};
+export {};

package/build/common/contexts/dynamicFlowContexts/DynamicFlowContexts.js

@@ -0,0 +1,36 @@
+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';
+import { usePendingPromiseCounter } from './usePendingPromiseCounter';
+var defaultContextValue = {
+    loading: false,
+    registerPersistAsyncPromise: function (promise) {
+        //
+    }
+};
+var DFContext = createContext(defaultContextValue);
+export var DynamicFlowProvider = function (_a) {
+    var loading = _a.loading, children = _a.children;
+    var _b = usePendingPromiseCounter(), pendingPromises = _b.pendingPromises, addPendingPromise = _b.addPendingPromise;
+    var providerValue = useMemo(function () {
+        return {
+            loading: loading || pendingPromises > 0,
+            registerPersistAsyncPromise: addPendingPromise
+        };
+    }, [loading, pendingPromises, addPendingPromise]);
+    return _jsx(DFContext.Provider, __assign({ value: providerValue }, { children: children }));
+};
+export var useDynamicFlow = function () {
+    var context = useContext(DFContext);
+    return context || defaultContextValue;
+};

package/build/common/contexts/dynamicFlowContexts/usePendingPromiseCounter.d.ts

@@ -0,0 +1,4 @@
+export declare function usePendingPromiseCounter(): {
+    addPendingPromise: (promise: Promise<unknown>) => void;
+    pendingPromises: number;
+};

package/build/common/contexts/dynamicFlowContexts/usePendingPromiseCounter.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+export function usePendingPromiseCounter() {
+    var _a = useState(0), count = _a[0], setCount = _a[1];
+    var addPendingPromise = useCallback(function (promise) {
+        setCount(function (c) { return c + 1; });
+        promise["catch"](noop)["finally"](function () { return delayUntilNextCycle(function () { return setCount(function (c) { return Math.max(0, c - 1); }); }); });
+    }, [setCount]);
+    return { addPendingPromise: addPendingPromise, pendingPromises: count };
+}
+var delayUntilNextCycle = function (fn) { return setTimeout(function () { return fn(); }, 0); };
+var noop = function () {
+    // no-op
+};

package/build/common/contexts/eventsContext/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/eventsContext/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/fetcherContexts/FetcherContexts.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type Fetcher = typeof fetch;
+type FetcherProviderProps = {
+    fetcher: Fetcher;
+    children: React.ReactNode;
+};
+export declare const FetcherProvider: ({ fetcher, children }: FetcherProviderProps) => JSX.Element;
+type FetcherProviderFromBaseUrlProps = {
+    baseUrl: string;
+    children: React.ReactNode;
+};
+export declare const FetcherProviderFromBaseUrl: ({ baseUrl, children, }: FetcherProviderFromBaseUrlProps) => JSX.Element;
+/**
+ * Provides the fetch(er) function for dynamic flows asynchronous operations.
+ */
+export declare const useFetcher: () => typeof fetch;
+export declare const useHasFetcherProvider: () => boolean;
+export {};

package/build/common/contexts/fetcherContexts/FetcherContexts.js

@@ -0,0 +1,35 @@
+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';
+import { makeFetcher } from '../../makeFetcher';
+var FetcherContext = createContext(undefined);
+export var FetcherProvider = function (_a) {
+    var fetcher = _a.fetcher, children = _a.children;
+    return _jsx(FetcherContext.Provider, __assign({ value: fetcher }, { children: children }));
+};
+export var FetcherProviderFromBaseUrl = function (_a) {
+    var baseUrl = _a.baseUrl, children = _a.children;
+    var fetcher = useMemo(function () { return makeFetcher(baseUrl); }, [baseUrl]);
+    return _jsx(FetcherContext.Provider, __assign({ value: fetcher }, { children: children }));
+};
+/**
+ * Provides the fetch(er) function for dynamic flows asynchronous operations.
+ */
+export var useFetcher = function () {
+    var contextFetch = useContext(FetcherContext);
+    return contextFetch || fetch;
+};
+export var useHasFetcherProvider = function () {
+    var context = useContext(FetcherContext);
+    return !!context;
+};

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

@@ -0,0 +1,4 @@
+export * from './dynamicFlowContexts/DynamicFlowContexts';
+export * from './eventsContext/EventsContext';
+export * from './fetcherContexts/FetcherContexts';
+export * from './logContext/LogContext';

package/build/common/contexts/index.js

@@ -0,0 +1,4 @@
+export * from './dynamicFlowContexts/DynamicFlowContexts';
+export * from './eventsContext/EventsContext';
+export * from './fetcherContexts/FetcherContexts';
+export * from './logContext/LogContext';

package/build/common/contexts/logContext/LogContext.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type LogLevel = 'debug' | 'info' | 'warning' | 'error' | 'critical';
+export type LogTitle = 'Invalid schema or model' | 'Invalid model on change' | 'Invalid response' | 'Action supressed' | 'Deprecation advanced warning' | 'Deprecated schema' | 'Error fetching';
+type ExtraProps = Record<string, unknown>;
+export type LogEventHandler = (level: LogLevel, message: string, extra: ExtraProps) => void;
+type LogFunction = (title: LogTitle, description: string, extra?: ExtraProps) => void;
+export declare const getLogger: (level: LogLevel, onLog: LogEventHandler, flowId?: string | undefined, stepId?: string | undefined) => LogFunction;
+type LogProviderProps = {
+    flowId?: string;
+    stepId?: string;
+    children: React.ReactNode;
+    onLog: LogEventHandler;
+};
+export declare const LogProvider: ({ flowId, stepId, children, onLog }: LogProviderProps) => JSX.Element;
+export declare const useLogger: () => {
+    debug: LogFunction;
+    info: LogFunction;
+    warning: LogFunction;
+    error: LogFunction;
+    critical: LogFunction;
+};
+export {};

package/build/common/contexts/logContext/LogContext.js

@@ -0,0 +1,39 @@
+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';
+export var getLogger = function (level, onLog, flowId, stepId) {
+    if (flowId === void 0) { flowId = 'UNKNOWN-FLOW-ID'; }
+    if (stepId === void 0) { stepId = 'UNKNOWN-FLOW-ID'; }
+    return function (title, description, extra) {
+        return onLog(level, "Dynamic Flow ".concat(level, " - ").concat(title, " - ").concat(description), __assign({ flowId: flowId, stepId: stepId }, extra));
+    };
+};
+var LogContext = createContext(null);
+export var LogProvider = function (_a) {
+    var flowId = _a.flowId, stepId = _a.stepId, children = _a.children, onLog = _a.onLog;
+    var value = useMemo(function () { return ({
+        debug: getLogger('debug', onLog, flowId, stepId),
+        info: getLogger('info', onLog, flowId, stepId),
+        warning: getLogger('warning', onLog, flowId, stepId),
+        error: getLogger('error', onLog, flowId, stepId),
+        critical: getLogger('critical', onLog, flowId, stepId)
+    }); }, [onLog, flowId, stepId]);
+    return _jsx(LogContext.Provider, __assign({ value: value }, { children: children }));
+};
+export var useLogger = function () {
+    var logging = useContext(LogContext);
+    if (logging == null) {
+        throw new Error('Logging context not found. Did you forget to wrap your component in a <LogProvider />?');
+    }
+    return logging;
+};

package/build/common/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useDebouncedFunction/useDebouncedFunction';
+export * from './useExternal/useExternal';
+export * from './useExternalStepPolling/useExternalStepPolling';
+export * from './usePersistAsync/usePersistAsync';
+export * from './usePolling/usePolling';
+export * from './usePrevious/usePrevious';
+export * from './useStepPolling/useStepPolling';

package/build/common/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './useDebouncedFunction/useDebouncedFunction';
+export * from './useExternal/useExternal';
+export * from './useExternalStepPolling/useExternalStepPolling';
+export * from './usePersistAsync/usePersistAsync';
+export * from './usePolling/usePolling';
+export * from './usePrevious/usePrevious';
+export * from './useStepPolling/useStepPolling';

package/build/common/hooks/useDebouncedFunction/useDebouncedFunction.d.ts

@@ -0,0 +1,2 @@
+import { DebouncedFunc } from '../../utils';
+export declare function useDebouncedFunction<T extends (...args: any[]) => any>(callback: T, waitMs: number): DebouncedFunc<T>;

package/build/common/hooks/useDebouncedFunction/useDebouncedFunction.js

@@ -0,0 +1,9 @@
+/* References:
+- https://github.com/gnbaron/use-lodash-debounce
+- https://dmitripavlutin.com/react-throttle-debounce/
+*/
+import { useCallback } from 'react';
+import { debounce } from '../../utils';
+export function useDebouncedFunction(callback, waitMs) {
+    return useCallback(debounce(callback, waitMs), [callback, waitMs]);
+}

package/build/common/hooks/useExternal/useExternal.d.ts

@@ -0,0 +1,4 @@
+export declare function useExternal(url?: string): {
+    requiresManualTrigger: boolean;
+    dismissConfirmation: () => void;
+};

package/build/common/hooks/useExternal/useExternal.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export function useExternal(url) {
+    // If we fail to open the window, the user will need to open this on their own
+    var _a = useState(null), externalWindow = _a[0], setExternalWindow = _a[1];
+    var _b = useState(false), hasManuallyTriggered = _b[0], setHasManuallyTriggered = _b[1];
+    var dismissConfirmation = function () { return setHasManuallyTriggered(true); };
+    useEffect(function () {
+        if (url) {
+            setHasManuallyTriggered(false);
+            setExternalWindow(window.open(url, '_blank'));
+        }
+    }, [url]);
+    var requiresManualTrigger = Boolean(url && !externalWindow && !hasManuallyTriggered);
+    return { requiresManualTrigger: requiresManualTrigger, dismissConfirmation: dismissConfirmation };
+}

package/build/common/hooks/useExternalStepPolling/useExternalStepPolling.d.ts

@@ -0,0 +1,12 @@
+import { Action, PollingConfiguration } from '../../../types';
+export type ExternalStepPollingConfiguration = PollingConfiguration & {
+    maxConsecutiveFails: number;
+    responseHandlers: ResponseHandler[];
+};
+type ResponseHandler = {
+    result: string;
+    action: Action;
+};
+/** @deprecated External step is no longer supported */
+export declare function useExternalStepPolling(polling: ExternalStepPollingConfiguration | undefined, onAction: (action: Action) => void): void;
+export {};