@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

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,
+];

package/build/stories/examples/NativeFlow.story.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { useState } from 'react';
+import { Button } from '@transferwise/components';
+import { respondWith } from '../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Examples',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function NativeFlowInterop() {
+    const [screenId, setScreenId] = useState(0);
+    switch (screenId) {
+        case 0:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+        case 1:
+            return (_jsx(DynamicFlowWise, { flowId: "DemoFlowId", initialStep: step('Original step'), httpClient: mockHttpClient, onCompletion: () => {
+                    action('onCompletion')();
+                    setScreenId(2);
+                }, onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+                    action('onError')(error);
+                    setScreenId(2);
+                    console.error(error);
+                } }));
+        case 2:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " THIS IS A NATIVE SCREEN (SECOND) " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+        default:
+            return (_jsxs(_Fragment, { children: [_jsx("h1", { children: " YOU ARE IN LIMBO " }), _jsx(Button, { onClick: () => setScreenId(1), children: "Continue" })] }));
+    }
+}
+const step = (title) => ({
+    id: 'native-interop',
+    title,
+    navigation: {
+        back: {
+            action: {
+                exit: true,
+                result: {
+                    state: 0,
+                },
+            },
+        },
+    },
+    refreshUrl: '/refresh',
+    refreshAfter: new Date(Date.now() + 3000).toISOString(),
+    layout: [
+        {
+            type: 'heading',
+            text: 'This step has refreshAfter in 3s. Once it has refreshed, use the browser back button to navigate away. It will continue refreshing',
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'button',
+            title: 'Continue',
+            behavior: {
+                type: 'action',
+                action: {
+                    exit: true,
+                    result: {
+                        state: 2,
+                    },
+                },
+            },
+        },
+    ],
+    schemas: [],
+});
+const mockHttpClient = async (input, init) => {
+    console.log(input, init);
+    action('httpClient')(input, init);
+    if (input === '/refresh') {
+        return respondWith(step('This is a refreshed step'));
+    }
+    console.log('FAILING');
+    return respondWith({}, { status: 500 });
+};