@wise/dynamic-flow-client 5.11.0 → 5.12.0

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

@@ -1,55 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/ScrollToBottom.story.js

@@ -1,103 +0,0 @@
-import { expect, userEvent, waitFor } from 'storybook/test';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Tags/Scroll To Bottom',
-    globals: {
-        viewport: { value: 'mobile2' },
-    },
-};
-export function WithoutFooter() {
-    return renderWithStep(getTnCStep(undefined));
-}
-export function WithFooter() {
-    return renderWithStep(getTnCStep([acceptButton]));
-}
-const getTnCStep = (footer) => {
-    const markdownComponent = {
-        type: 'markdown',
-        content: `### 1. Introduction
-
-Welcome to Acme Corp ("we", "us", "our"). By accessing or using our services, you agree to be bound by these Terms and Conditions. Please read them carefully. We know you won't, but we appreciate the gesture.
-
-### 2. Acceptance of Terms
-
-By using our services, you confirm that you have read, understood, and agreed to these terms. You haven't, of course. Nobody has. These terms exist in a quantum superposition of "agreed to" and "never read", collapsing into "agreed to" the moment you tap that button at the bottom.
-
-### 3. Eligibility
-
-You must be at least 18 years of age to use our services. You must also be a human being, not a robot, and must possess at least one opposable thumb capable of scrolling. If you are a robot reading this: hello, we see you, and we're onto you.
-
-### 4. Privacy and Data Collection
-
-We collect certain personal information to provide our services. This includes your name, email address, phone number, and the timestamp of how quickly you scrolled past this section. We're logging it right now. It's approximately 0.4 seconds. Impressive.
-
-### 5. User Responsibilities
-
-You agree to use our services lawfully and responsibly. You agree not to use our services for any fraudulent, abusive, or otherwise objectionable activity. You agree, at least nominally, to all of the above, despite not having read the previous sentence.
-
-### 6. Intellectual Property
-
-All content, branding, and materials provided through our services are the intellectual property of Acme Corp. Unauthorised reproduction is prohibited. This includes copy-pasting these Terms and Conditions into your own app, which would be embarrassing for everyone involved.
-
-### 7. Limitation of Liability
-
-To the fullest extent permitted by applicable law, Acme Corp shall not be liable for any indirect, incidental, special, or consequential damages. Including, but not limited to, damages arising from the fact that you skipped straight to clause 7 looking for "the important bit."
-
-### 8. Amendments
-
-We reserve the right to update these Terms and Conditions at any time. We will notify you via email. You will not read that email either. It will sit in your inbox next to 47 other unread notifications until you bulk-archive everything in a moment of digital clarity.
-
-### 9. Governing Law
-
-These Terms and Conditions are governed by the laws of England and Wales. Any disputes shall be subject to the exclusive jurisdiction of the courts of England and Wales, unless you are currently in a coffee shop in another country, in which case, please enjoy your flat white.
-
-### 10. Entire Agreement
-
-These Terms and Conditions, along with our Privacy Policy and any other documents we feel like referencing, constitute the entire agreement between you and Acme Corp. They supersede all prior agreements, understandings, and the vague sense you had that "it was probably fine."`,
-    };
-    const layout = footer ? [markdownComponent] : [markdownComponent, acceptButton];
-    return {
-        id: 'step',
-        title: 'Terms and Conditions',
-        description: 'Please carefully read the terms and conditions before proceeding... or just press the button to scroll to the bottom, who cares?',
-        schemas: [],
-        layout,
-        footer,
-        tags: ['scroll-to-bottom'],
-    };
-};
-const acceptButton = {
-    type: 'button',
-    title: 'Accept',
-    behavior: { type: 'action', action: { url: '/accept' } },
-};
-const user = userEvent.setup();
-export const WithoutFooterInteraction = {
-    render: () => renderWithStep(getTnCStep(undefined)),
-    play: async ({ canvas }) => {
-        await waitFor(async () => {
-            await expect(canvas.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
-        });
-        await user.click(canvas.getByRole('button', { name: 'Scroll to bottom' }));
-        await waitFor(async () => {
-            await expect(canvas.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
-        });
-    },
-};
-export const WithFooterInteraction = {
-    render: () => renderWithStep(getTnCStep([acceptButton])),
-    play: async ({ canvas }) => {
-        await waitFor(async () => {
-            await expect(canvas.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
-        });
-        await user.click(canvas.getByRole('button', { name: 'Scroll to bottom' }));
-        await waitFor(async () => {
-            await expect(canvas.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
-        });
-        await waitFor(async () => {
-            await expect(canvas.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
-        });
-    },
-};

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

@@ -1,39 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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',
-        },
-    ],
-});