@wise/dynamic-flow-client 5.9.2-logging-bf0bd22 → 5.9.2

package/build/stories/spec/schemas/oneOf/OneOfInitialisation.story.js

@@ -0,0 +1,55 @@
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/OneOf',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function AllOfAndOneOfInitialisation() {
+    return renderWithStep(allOfAndOneOfStep);
+}
+const allOfAndOneOfStep = {
+    id: 'step-id',
+    title: 'Step Title',
+    schemas: [
+        {
+            $id: '#root',
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['email'],
+                    properties: { email: { type: 'string', title: 'Email' } },
+                },
+                {
+                    control: 'radio',
+                    oneOf: [
+                        {
+                            title: 'Iban',
+                            type: 'object',
+                            displayOrder: ['iban', 'type'],
+                            properties: { iban: { type: 'string', title: 'IBAN' }, type: { const: 'IBAN' } },
+                        },
+                        {
+                            title: 'Bic',
+                            type: 'object',
+                            displayOrder: ['bic', 'type'],
+                            properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#root',
+        },
+    ],
+    model: {
+        email: 'marty.mcfly@wise.com',
+        type: 'IBAN',
+    },
+};

package/build/stories/spec/schemas/oneOf/OneOfWithSingleOption.story.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Schemas/OneOf',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const httpClient = getMockHttpClient({
+    '/submit': async () => respondWith({}, { status: 404 }),
+});
+export function SingleOptionOneOfs() {
+    const optionSchemasByType = {
+        object: {
+            type: 'object',
+            title: 'Object Schema Option',
+            displayOrder: ['accountId'],
+            properties: {
+                accountId: {
+                    title: 'Account Number',
+                    type: 'string',
+                    placeholder: '12345678',
+                },
+            },
+        },
+        const: {
+            title: 'Const Schema Option',
+            const: 'fixedValue',
+            layout: [
+                {
+                    type: 'alert',
+                    markdown: 'This is a const schema with a fixed value of "fixedValue"',
+                },
+            ],
+        },
+    };
+    const rootLevel = [true, false];
+    const withId = [true, false];
+    const required = [true, false];
+    const optionSchemaType = Object.keys(optionSchemasByType);
+    const examples = [];
+    rootLevel.forEach((isRootLevel) => {
+        withId.forEach((hasId) => {
+            required.forEach((isRequired) => {
+                optionSchemaType.forEach((optionType) => {
+                    const step = getStep(isRootLevel, isRequired, hasId, optionSchemasByType[optionType]);
+                    if (!isRequired && isRootLevel) {
+                        return null;
+                    }
+                    if (!hasId && isRootLevel) {
+                        return null;
+                    }
+                    examples.push(_jsx("div", { className: "m-b-3", children: _jsx(BeforeAndAfter, { step: step, configuration: _jsx(ConfigurationTable, { ordinal: examples.length + 1, step: step, configuration: {
+                                    isRootLevel,
+                                    isRequired,
+                                    withId: hasId,
+                                    optionType,
+                                } }) }) }, `${isRootLevel}-${isRequired}-${hasId}-${optionType}`));
+                });
+            });
+        });
+    });
+    return examples;
+}
+const getStep = (rootLevel, required, withId, singleOption) => {
+    const oneOfSchema = {
+        $id: withId && rootLevel ? '#oneOfSchemaId' : undefined,
+        title: 'One Of Schema Title',
+        placeholder: 'Select an option',
+        oneOf: [singleOption],
+        // control: 'tab',
+    };
+    const objectSchemaWrapper = {
+        type: 'object',
+        $id: '#objectSchemaWrapper',
+        title: 'Object Schema Wrapper Title',
+        displayOrder: ['childSchema'],
+        properties: {
+            childSchema: oneOfSchema,
+        },
+        required: required ? ['childSchema'] : [],
+    };
+    return {
+        id: 'step-id',
+        title: 'Step Title',
+        schemas: [rootLevel ? oneOfSchema : objectSchemaWrapper],
+        layout: [
+            {
+                type: 'form',
+                schemaId: rootLevel ? '#oneOfSchemaId' : '#objectSchemaWrapper',
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                behavior: { type: 'action', action: { url: '/submit' } },
+            },
+        ],
+    };
+};
+function ConfigurationTable({ configuration, ordinal, step, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("h4", { children: ["Configuration ", String(ordinal)] }), _jsxs("ul", { style: { paddingLeft: '16px', marginBottom: '4px' }, children: [_jsxs("li", { children: ["OneOf is at ", _jsxs("strong", { children: ["root level: ", configuration.isRootLevel ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf is ", _jsxs("strong", { children: ["required: ", configuration.isRequired ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf has ", _jsxs("strong", { children: ["$id: ", configuration.withId ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["Option Schema Type: ", _jsx("strong", { children: configuration.optionType })] })] }), _jsxs("details", { children: [_jsx("summary", { children: "Step JSON" }), _jsx("pre", { children: JSON.stringify(step, null, 2) })] })] }));
+}
+function BeforeAndAfter({ configuration, step }) {
+    return (_jsxs("div", { style: { display: 'flex', gap: '16px' }, children: [_jsx("div", { style: { flex: 1, padding: '8px' }, children: configuration }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "Before" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
+                        httpClient,
+                        features: { bugfix: false },
+                    })] }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "After" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
+                        httpClient,
+                        features: { bugfix: true },
+                    })] })] }));
+}

package/build/stories/spec/step/Controls.story.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FlowNavigation } from '@transferwise/components';
+import { ThemeProvider } from '@wise/components-theming';
+import { action } from 'storybook/actions';
+import { respondWith } from '../../../test-utils';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Controls',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export function Splash() {
+    return render('splash');
+}
+export function SplashCelebration() {
+    return render('splash-celebration');
+}
+export function SplashInteractive() {
+    return (_jsx(ThemeProvider, { theme: "personal", className: "animate-theme", children: _jsxs("div", { style: {
+                width: '100%',
+                height: '100vh',
+            }, children: [_jsx(FlowNavigation, { steps: [], onClose: () => { } }), _jsx("div", { style: {
+                        maxWidth: '546px',
+                        margin: 'auto',
+                        paddingTop: '48px',
+                    }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: async (input) => {
+                            if (input === '/continue') {
+                                return respondWith(step('splash-celebration'));
+                            }
+                            return respondWith({
+                                id: 'next',
+                                title: 'This is the step after the splash',
+                                description: 'The theme should be reset to personal',
+                                layout: [],
+                                schemas: [],
+                            });
+                        }, initialStep: {
+                            title: 'Click the button to continue',
+                            id: 'step',
+                            layout: [
+                                {
+                                    type: 'button',
+                                    title: 'Continue',
+                                    behavior: {
+                                        type: 'action',
+                                        action: {
+                                            url: '/continue',
+                                        },
+                                    },
+                                },
+                            ],
+                            schemas: [],
+                        }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
+                            action('onError');
+                            console.error(error);
+                        }, onLog: action('onLog') }) })] }) }));
+}
+SplashInteractive.parameters = {
+    chromatic: { disableSnapshot: true },
+};
+const render = (control) => {
+    return (_jsx("div", { style: {
+            width: '60%',
+            margin: 'auto',
+        }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: fetch, initialStep: step(control), onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
+                action('onError');
+                console.error(error);
+            }, onLog: action('onLog') }) }));
+};
+const step = (control) => ({
+    id: 'splash',
+    title: '',
+    layout: [
+        {
+            type: 'image',
+            content: {
+                accessibilityDescription: 'plane',
+                uri: 'urn:wise:illustrations:plane',
+            },
+        },
+        {
+            type: 'heading',
+            control: 'display',
+            text: 'Almost there',
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'markdown',
+            content: "Your money should arrive **by Wednesday**. We'll keep you posted.",
+            align: 'center',
+            margin: 'lg',
+        },
+        {
+            type: 'button',
+            title: 'Track your transfer',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+    ],
+    schemas: [],
+    control,
+});

package/build/stories/spec/step/DFModal.story.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Layout } from '@transferwise/navigation-ui';
+import { action } from 'storybook/actions';
+import { DynamicFlowWiseModal } from '../../../test-utils/DynamicFlowWiseModal';
+export default {
+    component: DynamicFlowWiseModal,
+    title: 'Spec/Step/DFModal',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+const httpClient = async (input, init) => {
+    action('httpClient')(input, init);
+    const url = typeof input === 'string' ? input : '';
+    const match = /\/submit\/(\d+)/.exec(url);
+    if (!match) {
+        return new Response('Not Found', { status: 404 });
+    }
+    const index = match[1];
+    action('httpClient response index')(index);
+    return new Response(JSON.stringify(getStep(index)));
+};
+export function DFModalExample() {
+    return (_jsx(Layout, { children: _jsx(DynamicFlowWiseModal, { flowId: "df-modal-story", initialStep: getStep('1'), features: {
+                nativeBack: true,
+                hideStepTitle: false,
+            }, httpClient: httpClient, onCompletion: action('onCompletion'), onAnalytics: action('onAnalytics'), onCancellation: action('onCancellation'), onEvent: action('onEvent'), onError: (error) => {
+                action('onError');
+                console.error(error);
+            }, onLog: action('onLog') }) }));
+}
+const getStep = (index) => {
+    return {
+        id: 'step',
+        title: `Step title ${index}`,
+        description: 'This is a description of the step.',
+        schemas: [],
+        layout: [
+            {
+                type: 'markdown',
+                content: 'The title is now missing from the layout, and only visible in the modal header. This is because we are using the hideStepTitle to hide it.',
+                align: 'left',
+                margin: 'xl',
+            },
+            {
+                type: 'button',
+                title: 'Continue',
+                behavior: {
+                    type: 'action',
+                    action: {
+                        url: `/submit/${Number(index) + 1}`,
+                    },
+                },
+            },
+        ],
+        tags: ['root-screen'],
+    };
+};

package/build/stories/spec/step/Footer.story.js

@@ -0,0 +1,70 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStepAndOverrides } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Footer',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    globals: { viewport: { value: 'iphone6' } },
+};
+export const Basic = {
+    render: () => renderWithStepAndOverrides(getFooterStep(), { features: { pinnedButtons: true } }),
+};
+const getFooterStep = () => ({
+    id: 'step-footer',
+    title: 'Step Footer Demo',
+    description: 'This step demonstrates the step footer.',
+    layout: [
+        {
+            type: 'paragraph',
+            text: 'Pinned buttons like the one below are not pinned here because a footer layout is provided.',
+        },
+        {
+            type: 'button',
+            title: 'The pinOrder prop is ignored',
+            control: 'secondary',
+            pinOrder: 1,
+            behavior: {
+                type: 'copy',
+                content: 'Banana.',
+            },
+        },
+        {
+            type: 'paragraph',
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+        {
+            type: 'image',
+            content: {
+                uri: 'urn:wise:illustrations:confetti',
+            },
+        },
+        {
+            type: 'paragraph',
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+    ],
+    schemas: [
+        {
+            $id: '#footer-schema',
+            type: 'boolean',
+            title: 'I accept the terms and conditions without having scrolled all the way down, thanks to the new footer layout.',
+        },
+    ],
+    footer: [
+        {
+            type: 'form',
+            schemaId: '#footer-schema',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            behavior: {
+                type: 'action',
+                action: { url: '/submit' },
+            },
+        },
+    ],
+});

package/build/stories/spec/step/Navigation.story.js

@@ -0,0 +1,20 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { getBasicStep } from '../../utils/getBasicStep';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Navigation',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function NavigationWithBackButton() {
+    return renderWithStep(Object.assign(Object.assign({}, getBasicStep()), { navigation: {
+            back: {
+                title: 'Go back',
+                action: {
+                    url: '/back',
+                },
+            },
+        } }));
+}

package/build/stories/spec/step/Tags.story.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { Layout } from '@transferwise/navigation-ui';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Tags',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export function RootScreen() {
+    return _jsx(Layout, { children: renderWithStep(step) });
+}
+const step = {
+    id: 'step',
+    title: 'Step title',
+    description: 'This is a description of the step, which is left-aligned',
+    schemas: [],
+    layout: [
+        {
+            type: 'markdown',
+            content: "Your money should arrive **by Wednesday**. We'll keep you posted.",
+            align: 'left',
+            margin: 'xl',
+        },
+        {
+            type: 'button',
+            title: 'Continue',
+            behavior: {
+                type: 'action',
+                action: {
+                    url: '/submit',
+                },
+            },
+        },
+    ],
+    tags: ['root-screen'],
+};

package/build/stories/spec/step/ToolBar.story.js

@@ -0,0 +1,60 @@
+import { renderWithStep } from '../../utils/render-utils';
+import { getBasicStep } from '../../utils/getBasicStep';
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Toolbar',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function ToolbarStep() {
+    return renderWithStep(Object.assign(Object.assign({}, getBasicStep()), { toolbar: getToolbar() }));
+}
+export function ToolbarStepWithBack() {
+    return renderWithStep(Object.assign(Object.assign({}, getBasicStep()), { navigation: {
+            back: {
+                title: 'Go back',
+                action: {
+                    url: '/back',
+                },
+            },
+        }, toolbar: getToolbar() }));
+}
+const getToolbar = () => ({
+    items: [
+        {
+            type: 'toolbar-button',
+            title: 'Settings',
+            control: 'primary',
+            media: {
+                type: 'avatar',
+                content: [{ type: 'uri', uri: 'urn:wise:icons:cog' }],
+            },
+            behavior: { type: 'action', action: { url: '/settings', skipValidation: true } },
+            accessibilityDescription: 'Open settings for this step',
+        },
+        {
+            type: 'toolbar-button',
+            title: 'Settings',
+            control: 'secondary',
+            media: {
+                type: 'avatar',
+                content: [{ type: 'uri', uri: 'urn:wise:icons:cog' }],
+            },
+            behavior: { type: 'action', action: { url: '/settings', skipValidation: true } },
+            accessibilityDescription: 'Open settings for this step',
+        },
+        {
+            type: 'toolbar-button',
+            title: 'Settings',
+            control: 'secondary-neutral',
+            media: {
+                type: 'avatar',
+                content: [{ type: 'uri', uri: 'urn:wise:icons:cog' }],
+            },
+            behavior: { type: 'action', action: { url: '/settings', skipValidation: true } },
+            accessibilityDescription: 'Open settings for this step',
+        },
+    ],
+});

package/build/stories/spec/step/features/ErrorHandling.story.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { fixtureHttpClient } from '../../../utils/fixtureHttpClient';
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Features/Error Handling',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function ErrorOnSubmission() {
+    const step = getBasicStep();
+    return renderWithStep(step, getHttpClient());
+}
+export function StepWithErrors() {
+    const step = getGlobalErrorStep();
+    return renderWithStep(step);
+}
+const getHttpClient = () => getMockHttpClient({
+    '/submit': async () => respondWith({
+        error: 'Server-side Global Error',
+        validation: {
+            name: "I don't like your name",
+            age: 'You are too young',
+            date: 'You are too old',
+            money: 'You are too poor',
+        },
+    }, { status: 422 }),
+});
+const renderWithStep = (step, httpClient = fixtureHttpClient) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+        action('onError');
+        console.error(error);
+    } }));
+const getBasicStep = () => ({
+    id: 'new-df-initial-step',
+    title: 'Error Handling in Dynamic Flow',
+    schemas: [
+        {
+            $id: '#personal-details',
+            type: 'object',
+            title: 'Personal details object',
+            description: 'Personal details schema description',
+            displayOrder: ['name', 'date', 'age', 'money'],
+            properties: {
+                name: {
+                    title: 'Full name',
+                    type: 'string',
+                },
+                date: {
+                    title: 'Date',
+                    type: 'string',
+                    format: 'date',
+                    control: 'date-lookup',
+                },
+                age: {
+                    title: 'Age',
+                    type: 'integer',
+                },
+                money: {
+                    title: 'How much money would you like?',
+                    type: 'number',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#personal-details',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+                method: 'POST',
+            },
+        },
+    ],
+});
+const getGlobalErrorStep = () => (Object.assign(Object.assign({}, getBasicStep()), { errors: {
+        error: 'This is a global error',
+        validation: {
+            name: "I don't like your name",
+            age: 'You are too young',
+            date: 'You are too old',
+            money: 'You are too poor',
+        },
+    } }));