@wise/dynamic-flow-client 5.30.0-experimental-7a76ef5 → 5.30.1

package/build/renderers/mappers/updatableComponentToProps.js

@@ -0,0 +1,6 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const updatableComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.state.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'isLoading', 'margin', 'tags')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/uploadInputComponentToProps.js

@@ -0,0 +1,5 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+import { pick } from './utils/pick';
+export const uploadInputComponentToProps = (component, rendererMapperProps) => {
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-upload')), rendererMapperProps), pick(component, 'accepts', 'cameraConfig', 'maxSize', 'source')), { onUpload: component.setValue });
+};

package/build/renderers/mappers/upsellComponentToProps.js

@@ -0,0 +1,3 @@
+import { mapCallToAction } from './utils/mapCallToAction';
+import { pick } from './utils/pick';
+export const upsellComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'margin', 'media', 'tags', 'text')), { callToAction: mapCallToAction(component.callToAction), onDismiss: component.dismiss }), rendererMapperProps));

package/build/renderers/mappers/utils/getValidationState.js

@@ -0,0 +1,12 @@
+import { mapErrorsToValidationState } from './mapErrorsToValidationState';
+export const getValidationState = (errors, validationAsyncState) => {
+    if (validationAsyncState) {
+        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error) {
+            return { status: 'invalid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.error };
+        }
+        if (validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success) {
+            return { status: 'valid', message: validationAsyncState === null || validationAsyncState === void 0 ? void 0 : validationAsyncState.messages.success };
+        }
+    }
+    return mapErrorsToValidationState(errors);
+};

package/build/renderers/mappers/utils/inputComponentToProps.js

@@ -0,0 +1,17 @@
+import { getValidationState } from './getValidationState';
+import { pick } from './pick';
+export const inputComponentToProps = (component, type) => {
+    var _a;
+    const { errors, validationAsyncState } = component;
+    const { messages } = validationAsyncState !== null && validationAsyncState !== void 0 ? validationAsyncState : {};
+    return Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'control', 'description', 'disabled', 'help', 'id', 'media', 'placeholder', 'required', 'title', 'tags', 'inlineAlert', 'onBlur', 'onFocus')), { type, error: (_a = messages === null || messages === void 0 ? void 0 : messages.error) !== null && _a !== void 0 ? _a : errors === null || errors === void 0 ? void 0 : errors[0], value: component.getLocalValue(), validationState: getValidationState(errors, validationAsyncState), fieldLoadingState: getFieldLoadingState(component) });
+};
+const getFieldLoadingState = (component) => {
+    const { validationAsyncState } = component;
+    if (!validationAsyncState) {
+        return 'idle';
+    }
+    return validationAsyncState.loadingState === 'pending'
+        ? 'validating'
+        : 'idle';
+};

package/build/renderers/mappers/utils/mapCallToAction.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+export const mapCallToAction = (_a) => {
+    var { hrefWithTracking } = _a, cta = __rest(_a, ["hrefWithTracking"]);
+    return (Object.assign(Object.assign({}, cta), { getAnchorProps: hrefWithTracking }));
+};
+export const mapCallToActionOptional = (cta) => (cta ? mapCallToAction(cta) : undefined);
+export const mapAdditionalInfo = (info) => {
+    if (info) {
+        const { hrefWithTracking } = info, rest = __rest(info, ["hrefWithTracking"]);
+        return Object.assign(Object.assign({}, rest), { getAnchorProps: hrefWithTracking });
+    }
+    return undefined;
+};

package/build/renderers/mappers/utils/mapErrorsToValidationState.js

@@ -0,0 +1,9 @@
+export const mapErrorsToValidationState = (errors) => {
+    if (errors) {
+        if (errors.length > 0) {
+            return { status: 'invalid', message: errors[0] };
+        }
+        return { status: 'valid' };
+    }
+    return undefined;
+};

package/build/renderers/mappers/utils/mapRendererLoadingState.js

@@ -0,0 +1 @@
+export const mapRendererLoadingState = (loadingState) => loadingState === 'delay-pending' ? 'submitting' : loadingState;

package/build/renderers/mappers/utils/pick.js

@@ -0,0 +1,8 @@
+export function pick(obj, ...keys) {
+    const result = {};
+    keys.forEach((key) => {
+        // eslint-disable-next-line functional/immutable-data
+        result[key] = obj[key];
+    });
+    return result;
+}

package/build/renderers/mappers/utils/selectInputOptionsToProps.js

@@ -0,0 +1,11 @@
+import { componentToRendererProps } from '../componentToRendererProps';
+export const selectInputOptionsToProps = (options, children, rendererMapperProps) => {
+    return options.map((option, index) => {
+        const child = children[index];
+        const optionChildrenProps = child ? componentToRendererProps(child, rendererMapperProps) : null;
+        const optionChildren = optionChildrenProps
+            ? rendererMapperProps.render(optionChildrenProps)
+            : null;
+        return Object.assign(Object.assign({}, option), { children: optionChildren, childrenProps: optionChildrenProps });
+    });
+};

package/build/renderers/stepComponentToProps.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { componentToRendererProps, } from './mappers/componentToRendererProps';
+import { pick } from './mappers/utils/pick';
+export const stepComponentToProps = (component, rendererMapperProps) => {
+    const { uid, analyticsId, back, control, description, error, step, title, tags, onBehavior } = component;
+    const { showBack } = rendererMapperProps, restMapperProps = __rest(rendererMapperProps, ["showBack"]);
+    const childrenProps = component
+        .getChildren()
+        .map((c) => componentToRendererProps(c, restMapperProps));
+    const footerProps = component.footerComponents.map((c) => componentToRendererProps(c, restMapperProps));
+    return Object.assign({ type: 'step', id: step.id, analyticsId,
+        uid, back: showBack ? back : undefined, control,
+        description, toolbar: getToolbarProps(component.toolbar, restMapperProps), error, __rawStep: step, title: restMapperProps.features.hideStepTitle === true ? '' : title, tags, children: childrenProps.map(rendererMapperProps.render), childrenProps, footer: footerProps.map(rendererMapperProps.render), footerProps, __onAction: (action) => {
+            void onBehavior({ type: 'action', action, track: false }); // don't track from renderers
+        } }, restMapperProps);
+};
+const getToolbarProps = (toolbar, rendererMapperProps) => {
+    if (!toolbar) {
+        return undefined;
+    }
+    return Object.assign(Object.assign(Object.assign({}, pick(toolbar, 'uid', 'control', 'type', 'tags')), { type: 'toolbar', items: toolbar.items.map((item) => (Object.assign(Object.assign({}, item), { disabled: item.disabled || rendererMapperProps.stepLoadingState !== 'idle' }))) }), rendererMapperProps);
+};

package/build/renderers/subflow/getDynamicSubflowRenderer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @experimental - This API is experimental and may change without a major version bump. Use with caution and provide feedback to the maintainers.
+ */
+export const getDynamicSubflowRenderer = ({ Component, canRender, }) => {
+    return {
+        canRenderType: 'subflow-dynamic',
+        canRender,
+        render: (props) => {
+            return (_jsx(Component, { presentation: props.presentation, requestCache: props.requestCache, initialRequest: props.initialRequest, onCompletion: props.onCompletion, onError: props.onError, onCancellation: props.onCancellation, onEvent: props.onEvent }, props.uid));
+        },
+    };
+};

package/build/renderers/subflow/getNativeSubflowRenderer.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const getNativeSubflowRenderer = (handlers) => {
+    return {
+        canRenderType: 'subflow-native',
+        render: (props) => _jsx(NativeSubflow, Object.assign({}, props, { handlers: handlers })),
+    };
+};
+const NativeSubflow = (propsWithHandler) => {
+    const { handlers } = propsWithHandler, props = __rest(propsWithHandler, ["handlers"]);
+    const handler = handlers.find((it) => it.id === props.id);
+    if (!handler) {
+        throw new Error(`No handler found for native subflow with id ${props.id}`);
+    }
+    return _jsx(_Fragment, { children: handler.render(props) });
+};

package/build/renderers/utils.js

@@ -0,0 +1,82 @@
+import { isArray } from '../utils/type-validators';
+/**
+ * @experimental
+ */
+export function findRendererPropsByType(root, type, predicate = () => true) {
+    if (isArray(root)) {
+        return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+    }
+    return [
+        ...(isType(root, type) && predicate(root) ? [root] : []),
+        ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate)),
+    ];
+}
+const isType = (node, type) => node.type === type;
+const getChildren = (node) => {
+    var _a;
+    switch (node.type) {
+        case 'root':
+        case 'box':
+        case 'container':
+        case 'form':
+        case 'form-section':
+        case 'step':
+        case 'modal':
+        case 'section':
+        case 'updatable':
+            return node.childrenProps;
+        case 'columns':
+            return [...node.startChildrenProps, ...node.endChildrenProps];
+        case 'modal-layout':
+            return node.content.childrenProps;
+        case 'repeatable':
+            return node.editableItemProps ? [node.editableItemProps] : [];
+        case 'input-select':
+            return node.childrenProps ? [node.childrenProps] : [];
+        case 'tabs':
+            return node.tabs.flatMap((c) => c.childrenProps);
+        case 'collection': {
+            const { beforeSectionsProps, afterSectionsProps, sections, search } = node.state;
+            return [
+                ...beforeSectionsProps,
+                ...afterSectionsProps,
+                ...[...sections, ...((_a = search === null || search === void 0 ? void 0 : search.initialSections) !== null && _a !== void 0 ? _a : [])]
+                    .filter((section) => section.type === 'layout')
+                    .flatMap((section) => section.childrenProps),
+            ];
+        }
+        case 'alert':
+        case 'button':
+        case 'input-checkbox':
+        case 'input-date':
+        case 'decision':
+        case 'divider':
+        case 'formatted-value':
+        case 'heading':
+        case 'hidden':
+        case 'image':
+        case 'loading-state':
+        case 'instructions':
+        case 'input-integer':
+        case 'list':
+        case 'loading-indicator':
+        case 'markdown':
+        case 'media':
+        case 'input-multi-select':
+        case 'input-upload-multi':
+        case 'input-number':
+        case 'money-input':
+        case 'paragraph':
+        case 'progress':
+        case 'review':
+        case 'search':
+        case 'status-list':
+        case 'input-text':
+        case 'input-upload':
+        case 'external-confirmation':
+        case 'subflow-dynamic':
+        case 'subflow-native':
+        case 'upsell':
+            return [];
+    }
+};

package/build/renderers/utils.test.js

@@ -0,0 +1,70 @@
+import { mapStepToComponent } from '../domain/mappers/mapStepToComponent';
+import { getMockRendererMapperProps, getStepMapperProps, } from '../domain/mappers/schema/tests/test-utils';
+import { findRendererPropsByType } from './utils';
+import { stepComponentToProps } from './stepComponentToProps';
+const step = {
+    id: '123',
+    title: 'Hello',
+    schemas: [
+        {
+            $id: '#form-1',
+            type: 'object',
+            displayOrder: ['name', 'surname', 'age'],
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'first name',
+                },
+                surname: {
+                    type: 'string',
+                    title: 'last name',
+                },
+                age: {
+                    type: 'number',
+                    title: 'age',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'box',
+            components: [
+                {
+                    type: 'paragraph',
+                    text: 'Please fill in some details',
+                },
+                {
+                    type: 'form',
+                    schemaId: '#form-1',
+                },
+                {
+                    type: 'button',
+                    title: 'submit',
+                    action: {},
+                },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'back',
+            action: {},
+        },
+    ],
+};
+const component = mapStepToComponent(Object.assign(Object.assign({}, getStepMapperProps()), { step }));
+const stepProps = stepComponentToProps(component, Object.assign(Object.assign({}, getMockRendererMapperProps()), { showBack: false }));
+describe('given a renderer props tree', () => {
+    describe('the findRendererPropsByType function', () => {
+        it('returns all elements that match a type', () => {
+            const textResults = findRendererPropsByType(stepProps, 'input-text');
+            expect(textResults).toHaveLength(2);
+            const buttonResults = findRendererPropsByType(stepProps, 'button');
+            expect(buttonResults).toHaveLength(2);
+        });
+        it('returns all elements that match a type and a predicate', () => {
+            const results = findRendererPropsByType(stepProps, 'input-text', (props) => props.title === 'first name');
+            expect(results).toHaveLength(1);
+        });
+    });
+});

package/build/stories/dev-tools/ContainerQueries.story.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react/jsx-runtime';
+import { renderWithStep } from '../utils/render-utils';
+export default {
+    component: ContainerQueries,
+    title: 'Dev Tools',
+    argTypes: {
+        width: {
+            options: ['100%', '900px', '600px', '575px', '400px'],
+            control: { type: 'select' },
+            description: 'Width of the div containing the DynamicFlow component',
+        },
+    },
+    args: {
+        width: '575px',
+    },
+};
+export function ContainerQueries({ width }) {
+    return _jsx(Fragment, { children: render(imageLayoutStep, width) }, width);
+}
+function render(step, width) {
+    return (_jsxs("div", { className: "d-flex", children: [_jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " }), _jsx("div", { style: { width, backgroundColor: 'white' }, children: renderWithStep(step) }), _jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " })] }));
+}
+const imageLayoutStep = {
+    id: 'step-id',
+    title: 'Dynamic Flow Step',
+    description: 'This is a step in the dynamic flow.',
+    schemas: [],
+    layout: [
+        {
+            type: 'image',
+            size: 'xs',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'sm',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'md',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'lg',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'xl',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+    ],
+};

package/build/stories/dev-tools/Debugger.story.js

@@ -0,0 +1,107 @@
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { getMockHttpClient, respondWith } from '../../test-utils';
+import { renderWithStep } from '../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Dev Tools/Debugger',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWith(Object.assign(Object.assign({}, step), { title: 'Success, try again!' })),
+});
+export function Debugger() {
+    return renderWithStep(step, httpClient);
+}
+const step = {
+    id: 'step',
+    title: 'Debugger',
+    description: 'This is here to help you debug steps.',
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#schema-1',
+            margin: 'xs',
+        },
+        {
+            type: 'form',
+            schemaId: '#schema-2',
+            margin: 'xs',
+        },
+        {
+            type: 'button',
+            title: 'Open Modal',
+            behavior: {
+                type: 'modal',
+                title: 'Modal Title',
+                content: [
+                    {
+                        type: 'form',
+                        schemaId: '#schema-3',
+                    },
+                ],
+            },
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+    ],
+    schemas: [
+        {
+            $id: '#schema-1',
+            type: 'object',
+            displayOrder: ['name'],
+            properties: {
+                name: {
+                    type: 'string',
+                    title: 'Name',
+                },
+            },
+            onChange: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+        {
+            $id: '#schema-2',
+            type: 'object',
+            displayOrder: ['age', 'rate'],
+            properties: {
+                age: {
+                    type: 'integer',
+                    title: 'Age',
+                },
+                rate: {
+                    type: 'number',
+                    title: 'Rate',
+                },
+            },
+        },
+        {
+            $id: '#schema-3',
+            type: 'object',
+            displayOrder: ['choice'],
+            properties: {
+                choice: {
+                    title: 'Choice',
+                    control: 'radio',
+                    oneOf: [
+                        { const: 'A', title: 'Choice A' },
+                        { const: 'B', title: 'Choice B' },
+                    ],
+                },
+            },
+        },
+    ],
+};

package/build/stories/dev-tools/FixtureSelect.story.js

@@ -0,0 +1,23 @@
+import { layouts, schemas, misc, step } from '@wise/dynamic-flow-fixtures';
+import { renderWithStep } from '../utils/render-utils';
+const fixtures = Object.assign(Object.assign(Object.assign(Object.assign({}, schemas), step), layouts), misc);
+export default {
+    component: FixtureSelect,
+    title: 'Dev Tools/Fixture Select',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+};
+export function FixtureSelect({ initialStepName = '' }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const parsedStep = typeof selectedStep === 'string' ? JSON.parse(selectedStep) : selectedStep;
+    return renderWithStep(parsedStep);
+}

package/build/stories/dev-tools/TestServer.story.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layout } from '@transferwise/navigation-ui';
+import { useEffect, useMemo } from 'react';
+import { action } from 'storybook/actions';
+import { makeHttpClient } from '../../common/makeHttpClient';
+import { renderWithAction } from '../utils/render-utils';
+import { Modal, PromoCard } from '@transferwise/components';
+const createHttpClient = (baseUrl, headers) => {
+    const customFetch = makeHttpClient(baseUrl, headers);
+    return async (input, init) => {
+        action('customFetch')(input, init);
+        const response = await customFetch(input, Object.assign({}, init));
+        try {
+            action('response body')(await response.clone().json());
+        }
+        catch (_a) {
+            action('response body')('parsing response as JSON failed');
+        }
+        return response;
+    };
+};
+export default {
+    component: TestServer,
+    title: 'Dev Tools',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        port: {
+            control: { type: 'number', min: 1, max: 65535, step: 1 },
+            description: 'Port used by the local test server',
+        },
+        endpoint: {
+            control: 'text',
+            description: 'Endpoint used for the initial request',
+        },
+        headers: {
+            control: 'object',
+            description: 'Headers included with every request',
+        },
+    },
+    args: {
+        port: 8888,
+        endpoint: '',
+        headers: {},
+    },
+};
+export function TestServer({ port, endpoint, headers }) {
+    const { httpClient, initialAction } = useTestServer(port, endpoint, headers);
+    return renderWithAction(initialAction, httpClient, {
+        nativeSubflowHandlers,
+        features: { nativeBack: true },
+    });
+}
+export function TestServerWithNav({ port, endpoint, headers }) {
+    const { httpClient, initialAction } = useTestServer(port, endpoint, headers);
+    return _jsx(Layout, { children: renderWithAction(initialAction, httpClient) });
+}
+const useTestServer = (port, endpoint, headers) => {
+    const baseUrl = `http://localhost:${port}/`;
+    const httpClient = useMemo(() => createHttpClient(baseUrl, headers), [baseUrl, headers]);
+    const initialAction = {
+        method: 'GET',
+        url: `${baseUrl}${endpoint.replace(/^\/+/, '')}`,
+    };
+    return { httpClient, initialAction };
+};
+const biometricAuthenticationHandler = {
+    id: 'biometric-authentication',
+    getCapabilityComments: () => ({ version: '1.0', supportedFeatures: 'all' }),
+    getPresentationMode: () => 'modal',
+    render: (props) => {
+        return (_jsx(Modal, { size: "lg", open: true, title: "This is not DF", body: _jsxs("div", { children: [_jsx(PromoCard, { title: "Success!", description: "{ authenticated: true, method: 'simulated' }", onClick: () => props.onCompletion({ authenticated: true, method: 'simulated' }) }), _jsx("br", {}), _jsx(PromoCard, { title: "Failure", description: "{ authenticated: false, method: 'banana' }", onClick: () => props.onCompletion({ authenticated: false, method: 'banana' }) }), _jsx("br", {}), _jsx(PromoCard, { title: "Error!", description: "Simulate error.", onClick: () => {
+                            props.onError(new Error('Something went wrong'));
+                        } }), _jsx("br", {}), _jsx(PromoCard, { title: "Cancel", description: "Just cancel.", onClick: () => {
+                            props.onCancellation();
+                        } })] }), onClose: () => props.onCancellation() }));
+    },
+};
+const cameraPermissionHandler = {
+    id: 'camera-permission',
+    getPresentationMode: () => 'modal',
+    render: ({ onCompletion, onError }) => {
+        useEffect(() => {
+            navigator.mediaDevices
+                .getUserMedia({ video: true })
+                .then((stream) => {
+                // stop all tracks to release the camera
+                stream.getTracks().forEach((track) => track.stop());
+                onCompletion({ permissionGranted: true });
+            })
+                .catch((error) => {
+                console.log('Camera permission error:', error);
+                // onError(error);
+                onCompletion({ permissionGranted: false });
+            });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        return null;
+    },
+};
+const urlEncodedHandler = {
+    id: '(url)encoded',
+    getPresentationMode: () => 'modal',
+    getCapabilityComments: () => ({ 'foo:bar': '1,0', 'supported;Features': 'all (the) things' }),
+    render: ({ onCompletion }) => {
+        useEffect(() => {
+            onCompletion(null);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        return null;
+    },
+};
+const nativeSubflowHandlers = [
+    biometricAuthenticationHandler,
+    cameraPermissionHandler,
+    urlEncodedHandler,
+];