@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/stories/types.js

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

package/build/stories/utils/fixtureHttpClient.js

@@ -0,0 +1,70 @@
+import { action } from 'storybook/actions';
+import { layouts, schemas, responses } from '@wise/dynamic-flow-fixtures';
+export const getObjectKeys = Object.keys;
+const fixtures = Object.assign(Object.assign({}, schemas), layouts);
+const isObject = (val) => typeof val === 'object' && val !== null;
+export const fixtureHttpClient = async (input, init) => {
+    action('fixtureHttpClient')(input, init);
+    const url = getURL(input);
+    if (url.pathname.startsWith('/steps/')) {
+        return respondWithFixture(fixtures, url, init);
+    }
+    if (url.pathname.startsWith('/responses/')) {
+        return respondWithFixture(responses, url, init);
+    }
+    if (url.pathname.startsWith('/validate')) {
+        return new Response(JSON.stringify({ message: 'Validation-async OK' }));
+    }
+    if (url.pathname.startsWith('/persist-async')) {
+        return Promise.resolve(new Response(JSON.stringify({ nameToken: '123456' }), { status: 200 }));
+    }
+    if (url.pathname.startsWith('/validate')) {
+        return new Response(JSON.stringify({ message: 'Validation-async OK' }));
+    }
+    if (url.pathname.startsWith('/refresh')) {
+        return new Response(null, { status: 304 });
+    }
+    return new Response(null, { status: 404 });
+};
+const getURL = (input) => {
+    if (input instanceof URL) {
+        return input;
+    }
+    if (input instanceof Request) {
+        return new URL(input.url, 'http://foo');
+    }
+    return new URL(input, 'http://foo');
+};
+const respondWithFixture = async (fixtureList, url, init) => {
+    var _a;
+    const fixtureNames = getObjectKeys(fixtureList);
+    const name = url.pathname
+        .split('/')
+        .filter((part) => Boolean(part))
+        .pop();
+    if (!fixtureNames.includes(name !== null && name !== void 0 ? name : '')) {
+        action('ERROR 404')(url);
+        return new Response(null, { status: 404 });
+    }
+    const fixture = fixtureList[name];
+    // By convention if the url contains a "delay" query parameter, we delay the response
+    if (url.searchParams.has('delay')) {
+        await new Promise((resolve) => {
+            setTimeout(resolve, Number(url.searchParams.get('delay')));
+        });
+    }
+    // By convention if the url contains a "refresh" query parameter, we use the payload as model
+    if (url.searchParams.has('refresh') &&
+        (init === null || init === void 0 ? void 0 : init.body) &&
+        typeof init.body === 'string' &&
+        isObject(fixture)) {
+        const body = JSON.parse(init.body);
+        return new Response(JSON.stringify(Object.assign(Object.assign({}, fixture), { model: Object.assign(Object.assign({}, ((_a = fixture.model) !== null && _a !== void 0 ? _a : {})), body) })));
+    }
+    if (url.pathname.includes('exit')) {
+        return new Response(JSON.stringify(fixture), {
+            headers: { 'X-DF-Exit': 'true' },
+        });
+    }
+    return new Response(JSON.stringify(fixture));
+};

package/build/stories/utils/getBasicStep.js

@@ -0,0 +1,223 @@
+export const getBasicStep = () => ({
+    id: 'step',
+    title: 'Dynamic Flow Step Title',
+    schemas: [
+        {
+            $id: '#personal-details',
+            type: 'object',
+            title: 'Personal details object',
+            description: 'Personal details schema description',
+            displayOrder: ['name', 'date', 'occupation', 'age', 'money', 'profileId'],
+            alert: {
+                type: 'alert',
+                markdown: 'Please enter the correct details here',
+            },
+            properties: {
+                profileId: { const: 12345678 },
+                name: {
+                    title: 'Full name',
+                    type: 'string',
+                    minLength: 3,
+                    maxLength: 50,
+                    help: { markdown: 'Put your name here' },
+                    validationMessages: {
+                        required: 'Name is required',
+                        minLength: 'Name is too short',
+                        maxLength: 'Name is too long',
+                    },
+                },
+                occupation: {
+                    title: 'Occupation',
+                    type: 'string',
+                },
+                date: {
+                    title: 'Date',
+                    type: 'string',
+                    format: 'date',
+                    control: 'date-lookup',
+                    minimum: '2023-01-01',
+                    maximum: '2023-12-31',
+                },
+                age: {
+                    title: 'Age',
+                    type: 'integer',
+                    minimum: 10,
+                    maximum: 99,
+                    help: { markdown: 'Put your age here' },
+                    validationMessages: {
+                        required: 'Age is required',
+                        minimum: 'Age is too low',
+                        maximum: 'Age is too high',
+                    },
+                    alert: { type: 'alert', markdown: 'You must be over 18' },
+                },
+                money: {
+                    title: 'How much money would you like?',
+                    type: 'number',
+                    minimum: 0,
+                    maximum: 9999,
+                    validationMessages: {
+                        required: 'Money is required',
+                        minimum: 'Money is too low',
+                        maximum: 'Money is too high',
+                    },
+                },
+            },
+            required: ['name', 'age'],
+        },
+        {
+            $id: '#bank-info',
+            type: 'object',
+            title: 'Bank info object',
+            description: 'Bank info schema description',
+            displayOrder: ['currency', 'complexOneOf'],
+            required: ['currency', 'complexOneOf'],
+            properties: {
+                currency: {
+                    description: 'Currency schema description.',
+                    help: { markdown: 'Currency schema help' },
+                    control: 'select',
+                    autocompleteHint: ['transaction-currency'],
+                    placeholder: 'This is a placeholder',
+                    disabled: false,
+                    validationMessages: { required: 'Please select an option' },
+                    default: 'EUR',
+                    oneOf: [
+                        {
+                            title: 'EUR',
+                            icon: { name: 'flag-eur' },
+                            description: 'Euro (schema default)',
+                            const: 'EUR',
+                        },
+                        {
+                            title: 'GBP',
+                            icon: { name: 'flag-gbp' },
+                            description: 'British pound',
+                            const: { gbp: 'GBP' },
+                        },
+                        {
+                            title: 'USD',
+                            icon: { name: 'flag-usd' },
+                            description: 'United States dollar',
+                            const: 'USD',
+                        },
+                    ],
+                },
+                complexOneOf: {
+                    title: 'Complex oneOf',
+                    description: 'Complex oneOf schema description blah blah blah blah.',
+                    control: 'tab',
+                    default: { type: 'type-a', accountNumber: '12345678' },
+                    oneOf: [
+                        {
+                            type: 'object',
+                            title: 'Option A (schema default)',
+                            icon: { name: 'flag-ars' },
+                            description: 'Option A description',
+                            displayOrder: ['type', 'accountNumber', 'sortCodeA'],
+                            required: ['sortCodeA'],
+                            properties: {
+                                type: { const: 'type-a' },
+                                accountNumber: {
+                                    title: '(A) Account number',
+                                    type: 'string',
+                                },
+                                sortCodeA: {
+                                    title: '(A) Sort code',
+                                    type: 'string',
+                                },
+                            },
+                        },
+                        {
+                            type: 'object',
+                            title: 'Option B',
+                            icon: { name: 'flag-brl' },
+                            description: 'Option B description',
+                            displayOrder: ['type', 'accountNumber', 'sortCodeB'],
+                            properties: {
+                                type: { const: 'type-b' },
+                                accountNumber: {
+                                    title: '(B) Account number',
+                                    type: 'string',
+                                },
+                                sortCodeB: {
+                                    title: '(B) Sort code',
+                                    type: 'string',
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    ],
+    layout: [
+        { type: 'heading', text: 'Welcome to the revamped Dynamic Flow', size: 'sm' },
+        {
+            type: 'alert',
+            markdown: 'If you can see this, things are going **well**.',
+            context: 'positive',
+        },
+        {
+            type: 'columns',
+            left: [
+                {
+                    type: 'form',
+                    schemaId: '#personal-details',
+                },
+            ],
+            right: [
+                {
+                    type: 'form',
+                    schemaId: '#bank-info',
+                },
+            ],
+        },
+        {
+            type: 'columns',
+            bias: 'left',
+            left: [
+                {
+                    type: 'paragraph',
+                    text: `Starting paragraph: The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love.`,
+                },
+            ],
+            right: [
+                {
+                    type: 'paragraph',
+                    text: `Ending paragraph: The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love.`,
+                },
+            ],
+        },
+        {
+            type: 'box',
+            border: true,
+            width: 'md',
+            components: [
+                {
+                    type: 'paragraph',
+                    text: `The Wise account is the universal way for you to manage money internationally. It's made for the world. And it's built to save your money and time, so you can do more of the things you love.`,
+                    align: 'center',
+                },
+            ],
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+                method: 'POST',
+            },
+        },
+        {
+            type: 'button',
+            title: 'Cancel',
+            control: 'secondary',
+            action: {
+                url: '/cancel',
+                method: 'POST',
+            },
+        },
+    ],
+});

package/build/stories/utils/mockSearchHandler.js

@@ -0,0 +1,71 @@
+import { abortableDelay } from '../../test-utils/fetch-utils';
+export const mockSearchHandler = async (input, init) => {
+    var _a;
+    if (typeof input !== 'string') {
+        return fetch(input, init);
+    }
+    const query = (init === null || init === void 0 ? void 0 : init.method) === 'POST'
+        ? Object.values(JSON.parse(init.body))[0]
+        : input.split('=')[1];
+    const signal = (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null;
+    if (query === 'nothing') {
+        return abortableDelay(1000, signal).then(async () => Promise.resolve(new Response(JSON.stringify({ results: [] }))));
+    }
+    if (query === 'error') {
+        return abortableDelay(1000, signal).then(async () => Promise.resolve(new Response(null, { status: 500 })));
+    }
+    if (input.startsWith('/search')) {
+        const delay = query.length <= 3 ? 2000 : 1000;
+        return abortableDelay(delay, signal).then(async () => Promise.resolve(new Response(JSON.stringify({ results: getFakeSearchResults(query) }))));
+    }
+    if (input.startsWith('/more-search')) {
+        return abortableDelay(1000, signal).then(async () => Promise.resolve(new Response(JSON.stringify({ results: getMoreFakeSearchResults(query) }))));
+    }
+    return fetch(input, init);
+};
+const getFakeSearchResults = (query) => [
+    ...Array.from({ length: 3 }, () => null).map((_, index) => ({
+        type: 'action',
+        title: `Result #${index + 1} for ${decodeURIComponent(query)}`,
+        description: `This is a search result for ${decodeURIComponent(query)}. The type is "action".`,
+        icon: { name: 'building' },
+        value: {
+            url: `/next-step?result=${index + 1}`,
+            method: 'GET',
+        },
+    })),
+    {
+        type: 'search',
+        title: `Search for "more ${decodeURIComponent(query)}"`,
+        description: `Search for "get more ${decodeURIComponent(query)}" description. This is a search result using GET method.`,
+        icon: { name: 'search' },
+        value: {
+            url: '/more-search',
+            method: 'GET',
+            param: 'query',
+            query: `get more ${decodeURIComponent(query)}`,
+        },
+    },
+    {
+        type: 'search',
+        title: `Search for "more ${decodeURIComponent(query)}"`,
+        description: `Search for "post more ${decodeURIComponent(query)}" description. This is a search result using POST method.`,
+        icon: { name: 'search' },
+        value: {
+            url: '/more-search',
+            method: 'POST',
+            param: 'query',
+            query: `post more ${decodeURIComponent(query)}`,
+        },
+    },
+];
+const getMoreFakeSearchResults = (query) => Array.from({ length: 3 }, () => null).map((_, index) => ({
+    type: 'action',
+    title: `Another result for "${decodeURIComponent(query)}" - ${index + 1}`,
+    description: `Description for this thing.`,
+    icon: { name: 'cog' },
+    value: {
+        url: `/next-step?result=${index + 1}`,
+        method: 'GET',
+    },
+}));

package/build/stories/utils/render-utils.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-bitwise */
+import { fixtureHttpClient } from './fixtureHttpClient';
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { useTheme } from '@wise/components-theming';
+export const renderWithStep = (step, httpClient = fixtureHttpClient) => renderWithStepAndOverrides(step, { httpClient });
+export const renderWithAction = (initialAction, httpClient = fixtureHttpClient, overrides = {}) => (_jsx(DynamicFlowWise, Object.assign({ flowId: "flow-id", features: {}, httpClient: async (input, init) => {
+        action('httpClient')(input, init);
+        const response = await httpClient(input, init);
+        action('httpClient response status')(response.status);
+        return response;
+    }, initialAction: initialAction, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onAnalytics: action('onAnalytics'), onError: (error) => {
+        action('onError');
+        console.error(error);
+    }, onLog: action('onLog'), onCancellation: () => {
+        action('onCancellation')('User cancelled the flow');
+    } }, overrides), JSON.stringify(initialAction)));
+const DFWithStepAndOverrides = ({ step, overrides, }) => {
+    var _a;
+    const httpClient = (_a = overrides.httpClient) !== null && _a !== void 0 ? _a : fixtureHttpClient;
+    const theming = useTheme();
+    const onEvent = (event, data) => {
+        action('onEvent')(event, data);
+        // when rendering DF with initialStep, often this means the ThemeProvider is mounted at the same time as DF.
+        // In this cases, setting the theme synchonously doesn't work.
+        // To get around this in Storybook and Sandbox
+        // we listen to the event and set the them within a Promise.resolve().then
+        // to ensure it happens after the initial render.
+        // We don't want to fix this in the library code because in most real use cases,
+        // DF is initialised with an `initialAction` and the theme would be changed asynchronously.
+        if (event === 'Dynamic Flow - Theme Required' && data && 'theme' in data) {
+            void Promise.resolve().then(() => {
+                theming.setTheme(data.theme);
+            });
+        }
+    };
+    return (_jsx(DynamicFlowWise, Object.assign({ flowId: "flow-id", features: { nativeBack: true }, initialStep: step, onCompletion: action('onCompletion'), onEvent: onEvent, onAnalytics: action('onAnalytics'), onError: (error) => {
+            action('onError');
+            console.error(error);
+        }, onLog: action('onLog') }, overrides, { httpClient: async (input, init) => {
+            action('httpClient')(input, init);
+            const response = await httpClient(input, init);
+            action('httpClient response status')(response.status);
+            return response;
+        } }), hashStep(step)));
+};
+export const renderWithStepAndOverrides = (step, overrides) => _jsx(DFWithStepAndOverrides, { step: step, overrides: overrides });
+// Hash function for steps (thanks claude)
+const hashStep = (step) => {
+    const str = JSON.stringify(step);
+    let hash = 0;
+    for (let i = 0; i < str.length; i += 1) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash &= hash; // Convert to 32-bit integer
+    }
+    return Math.abs(hash).toString(36);
+};

package/build/stories/visual-tests/layouts/NotUsingListItem.story.js

@@ -0,0 +1,17 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { layouts } from '@wise/dynamic-flow-fixtures';
+import { getWiseRenderers } from '@wise/dynamic-flow-renderers';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+const renderers = getWiseRenderers();
+export default {
+    component: DynamicFlowWise,
+    title: 'Visual Tests/Layouts/NotUsingListItem',
+};
+const decisionStep = JSON.parse(layouts.decision);
+const listStep = JSON.parse(layouts.list);
+const reviewStep = JSON.parse(layouts.review);
+const statusListStep = JSON.parse(layouts.statusList);
+export const Decision = () => renderWithStepAndOverrides(decisionStep, { renderers });
+export const ListNotUsingListItem = () => renderWithStepAndOverrides(listStep, { renderers });
+export const ReviewNotUsingListItem = () => renderWithStepAndOverrides(reviewStep, { renderers });
+export const StatusListNotUsingListItem = () => renderWithStepAndOverrides(statusListStep, { renderers });

package/build/test-utils/DynamicFlowWise.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeRequiredEventName } from '@wise/dynamic-flow-renderers';
+import { useMemo } from 'react';
+import { useDynamicFlow } from '../useDynamicFlow';
+import { getMergedTestRenderers } from './getMergedTestRenderers';
+import { openLinkInNewTab } from './openLinkInNewTab';
+import { useSnackBar } from './useSnackBar';
+/**
+ * This component is only used in tests.
+ */
+function DynamicFlowWise(props) {
+    const snackBarOnCopy = useSnackbarOnCopy();
+    const createSnackBar = useSnackBar();
+    const { renderers, className = 'df-prefer-container-queries', onAnalytics, onEvent, onLog, onLink = openLinkInNewTab, onCopy = snackBarOnCopy, onNotification = createSnackBar, } = props;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const mergedRenderers = useMemo(() => getMergedTestRenderers(props), [renderers]);
+    const coreProps = Object.assign(Object.assign({}, props), { renderers: mergedRenderers, onEvent: filteredOnEvent(onEvent, onAnalytics), onLog,
+        onLink,
+        onCopy,
+        onNotification });
+    const df = useDynamicFlow(coreProps);
+    return _jsx("div", { className: className, children: df.view });
+}
+const filteredOnEvent = (onEvent, onAnalytics) => (name, properties) => {
+    onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, properties);
+    if (!name.includes(ThemeRequiredEventName)) {
+        onAnalytics === null || onAnalytics === void 0 ? void 0 : onAnalytics(name, properties);
+    }
+};
+const useSnackbarOnCopy = () => {
+    const createSnackBar = useSnackBar();
+    return (copiedContent) => {
+        if (copiedContent) {
+            createSnackBar({ text: 'Copied!' });
+        }
+        else {
+            createSnackBar({ text: 'Not copied!' });
+        }
+    };
+};
+export default DynamicFlowWise;

package/build/test-utils/DynamicFlowWiseModal.js

@@ -0,0 +1,34 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Modal } from '@transferwise/components';
+import { openLinkInNewTab } from './openLinkInNewTab';
+import { getMergedTestRenderers } from './getMergedTestRenderers';
+import { ThemeRequiredEventName } from '@wise/dynamic-flow-renderers';
+import { useDynamicFlowModal } from '../useDynamicFlowModal';
+/**
+ * This component is only used in tests.
+ */
+export function DynamicFlowWiseModal(props) {
+    const { renderers, onAnalytics, onEvent, onLink = openLinkInNewTab } = props, rest = __rest(props, ["renderers", "onAnalytics", "onEvent", "onLink"]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const mergedRenderers = useMemo(() => getMergedTestRenderers(props), [renderers]);
+    const df = useDynamicFlowModal(Object.assign(Object.assign({}, rest), { renderers: mergedRenderers, onEvent: filteredOnEvent(onEvent, onAnalytics), onLink }));
+    return (_jsx(Modal, Object.assign({ className: "dynamic-flow-modal", disableDimmerClickToClose: true }, df.modal, { body: _jsx("div", { className: "dynamic-flow-modal", children: df.modal.body }) })));
+}
+const filteredOnEvent = (onEvent, onAnalytics) => (name, properties) => {
+    onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, properties);
+    if (!name.includes(ThemeRequiredEventName)) {
+        onAnalytics === null || onAnalytics === void 0 ? void 0 : onAnalytics(name, properties);
+    }
+};

package/build/test-utils/NeptuneProviders.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider as ComponentProvider, DEFAULT_LANG, DEFAULT_LOCALE, SnackbarProvider, translations as componentTranslations, getLangFromLocale, } from '@transferwise/components';
+import { ThemeProvider } from '@wise/components-theming';
+import translations from '../i18n';
+const locale = DEFAULT_LOCALE;
+const lang = getLangFromLocale(locale) || DEFAULT_LANG;
+const messages = Object.assign(Object.assign({}, componentTranslations[lang]), translations[lang]);
+function NeptuneProviders({ children }) {
+    return (_jsx(ThemeProvider, { theme: "personal", screenMode: "light", children: _jsx(SnackbarProvider, { children: _jsx(ComponentProvider, { i18n: { locale, messages }, children: children }) }) }));
+}
+export default NeptuneProviders;

package/build/test-utils/component-utils.js

@@ -0,0 +1,5 @@
+import { vi } from 'vitest';
+import { createTextInputComponent } from '../domain/components/TextInputComponent';
+import { getInitialValidationAsyncState } from '../domain/features/validationAsync/getInitialValidationAsyncState';
+import { getRandomId } from './getRandomId';
+export const createMockTextInputComponent = (props = {}) => createTextInputComponent(Object.assign({ uid: getRandomId(), checks: [], analyticsId: 'analyticsId', autocapitalization: 'none', autoComplete: 'off', disabled: true, errors: [], id: 'id', hidden: false, required: false, validationAsyncState: getInitialValidationAsyncState(), value: '', summariser: () => ({}), performValidationAsync: undefined, schemaOnChange: undefined, onValueChange: () => { }, onPersistAsync: async () => Promise.resolve() }, props), vi.fn());

package/build/test-utils/dummy-native-subflows-handlers/dummySubflowHandlers.js

@@ -0,0 +1,45 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, PromoCard, PromoCardGroup, Title } from '@transferwise/components';
+import { useEffect, useRef } from 'react';
+export const dummyPushSubflowHandler = {
+    id: 'dummy-push',
+    getCapabilityComments: () => ({ version: '1.0', supportedFeatures: 'all' }),
+    getPresentationMode: () => 'push',
+    render: (props) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Title, { type: "title-screen", children: "This is not DF" }), _jsx("br", {}), _jsx("br", {}), _jsxs(PromoCardGroup, { children: [_jsx(PromoCard, { title: "Option A", description: "This is option A.", onClick: () => props.onCompletion('Option A') }), _jsx(PromoCard, { title: "Option B", description: "This is option B.", onClick: () => props.onCompletion('Option B') }), _jsx(PromoCard, { title: "Error!", description: "Simulate error.", onClick: () => {
+                                props.onError(new Error('Something went wrong'));
+                            } })] })] }));
+    },
+};
+export const dummyModalSubflowHandler = {
+    id: 'dummy-modal',
+    getPresentationMode: () => 'modal',
+    render: (props) => {
+        return (_jsx(Modal, { size: "lg", open: true, title: "This is not DF", body: _jsxs(PromoCardGroup, { children: [_jsx(PromoCard, { title: "Option A", description: "This is option A.", onClick: () => props.onCompletion('Option A') }), _jsx(PromoCard, { title: "Option B", description: "This is option B.", onClick: () => props.onCompletion('Option B') }), _jsx(PromoCard, { title: "Error!", description: "Simulate error.", onClick: () => {
+                            props.onError(new Error('Something went wrong'));
+                        } })] }), onClose: () => props.onCompletion('Modal closed') }));
+    },
+};
+export const dummyTimedSubflowHandler = {
+    id: 'dummy-timed',
+    getPresentationMode: () => 'push',
+    render: (props) => _jsx(DummyTimedComponent, Object.assign({}, props)),
+};
+const DummyTimedComponent = ({ onCompletion }) => {
+    var _a;
+    const startTimeRef = useRef(null);
+    const timerIdRef = useRef(null);
+    useEffect(() => {
+        startTimeRef.current = Date.now();
+        timerIdRef.current = setTimeout(() => {
+            onCompletion('timer elapsed');
+        }, 5000);
+        return () => {
+            if (timerIdRef.current) {
+                clearTimeout(timerIdRef.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return _jsxs("h2", { children: ["The remaining time is ", Date.now() - ((_a = startTimeRef.current) !== null && _a !== void 0 ? _a : Date.now())] });
+};

package/build/test-utils/dummy-native-subflows-handlers/geolocationSubflowHandler.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+export const geolocationSubflowHandler = {
+    id: 'geolocation',
+    getPresentationMode: () => 'modal',
+    render: (props) => _jsx(GeolocationComponent, Object.assign({}, props)),
+};
+const GeolocationComponent = ({ onCompletion, onError }) => {
+    useEffect(() => {
+        navigator.geolocation.getCurrentPosition((position) => {
+            onCompletion(position.coords.toJSON());
+        }, (error) => {
+            switch (error.code) {
+                case error.PERMISSION_DENIED:
+                    onCompletion({ error: 'Permission denied' });
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                    onCompletion({ error: 'Position unavailable' }); // onError?
+                    break;
+                case error.TIMEOUT:
+                    onError({ error: 'Timeout' });
+                    break;
+                default:
+                    onError({ error: 'Unknown error' });
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+};

package/build/test-utils/dummy-native-subflows-handlers/index.js

@@ -0,0 +1,9 @@
+import { notificationPermissionSubflowHandler } from './notificationPermissionSubflowHandler';
+import { geolocationSubflowHandler } from './geolocationSubflowHandler';
+import { dummyPushSubflowHandler, dummyModalSubflowHandler } from './dummySubflowHandlers';
+export const getDummyNativeSubflowHandlers = () => [
+    notificationPermissionSubflowHandler,
+    geolocationSubflowHandler,
+    dummyPushSubflowHandler,
+    dummyModalSubflowHandler,
+];

package/build/test-utils/dummy-native-subflows-handlers/notificationPermissionSubflowHandler.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+export const notificationPermissionSubflowHandler = {
+    id: 'notification-permission',
+    getPresentationMode: () => 'modal',
+    render: (props) => _jsx(NotificationPermissionComponent, Object.assign({}, props)),
+};
+const NotificationPermissionComponent = ({ onCompletion }) => {
+    useEffect(() => {
+        void Notification.requestPermission() //
+            .then((result) => {
+            onCompletion(result);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+};