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

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,46 @@
+import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
+import { renderWithStep } from '../../utils/render-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Navigation',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+};
+export function NavigationWithBackButton() {
+    return renderWithStep(Object.assign({}, basicStep));
+}
+export function NonDismissibleStep() {
+    return renderWithStep(Object.assign(Object.assign({}, basicStep), { description: 'This step hides the back button because one of its tags is "non-dismissible".', tags: ['non-dismissible'] }));
+}
+const basicStep = {
+    id: 'step',
+    title: 'Step Title',
+    description: 'This step has a back button in the top bar that loads a new step (but it fails).',
+    navigation: {
+        back: {
+            title: 'Go back',
+            action: {
+                url: '/back',
+            },
+        },
+    },
+    schemas: [],
+    layout: [
+        {
+            type: 'image',
+            content: {
+                uri: 'urn:wise:illustrations:plane',
+                accessibilityDescription: 'Plane illustration',
+            },
+        },
+        {
+            type: 'button',
+            control: 'primary',
+            title: 'Continue',
+            action: {
+                url: '/continue',
+            },
+        },
+    ],
+};

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

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

@@ -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',
+        },
+    } }));

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { respondWith } from '../../../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Features/External',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function ExternalInInitialStep() {
+    return renderWithStep(stepWithExternal);
+}
+export function ExternalInSecondStep() {
+    return renderWithStep(stepWithSubmission);
+}
+const httpClient = async (input, init) => {
+    action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+    switch (input.toString()) {
+        case '/external':
+            return respondWith(stepWithExternal);
+        case '/skip':
+            return respondWith(stepWithSkipMessage);
+        default:
+            return fetch(input, init);
+    }
+};
+const renderWithStep = (step) => (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: httpClient, initialStep: step, features: { nativeBack: true }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+        action('onError');
+        console.error(error);
+    } }));
+const stepWithSubmission = {
+    id: 'step-id-0',
+    title: 'Initial Step',
+    schemas: [],
+    layout: [
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'The next step will open an external link.',
+        },
+        {
+            type: 'button',
+            title: 'Go to next step',
+            behavior: { type: 'action', action: { url: '/external' } },
+        },
+    ],
+};
+const stepWithExternal = {
+    id: 'step-id-1',
+    title: 'Step with External',
+    external: { url: 'https://www.google.com' },
+    schemas: [],
+    layout: [
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'Your bank is opening in another window.',
+        },
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'Please, follow their instructions. Keep this window open.',
+        },
+        { type: 'loading-indicator', margin: 'xl' },
+        {
+            type: 'info',
+            align: 'center',
+            markdown: `If it didn't work, you can [reopen](http://google.com/) the tab`,
+        },
+        {
+            type: 'button',
+            control: 'tertiary',
+            title: 'Skip',
+            behavior: { type: 'action', action: { url: '/skip' } },
+        },
+    ],
+};
+const stepWithSkipMessage = {
+    id: 'step-id-2',
+    title: 'Step with Skip Message',
+    schemas: [],
+    layout: [
+        {
+            type: 'paragraph',
+            align: 'center',
+            text: 'You have skipped. You can go back to open the external link, but manually.',
+        },
+    ],
+};

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
+import { getMockHttpClient, respondWith } from '../../../../test-utils';
+export default {
+    component: DynamicFlowWise,
+    title: 'Spec/Step/Features/Long Form Error',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function ErrorOnFirstFieldAfterSubmission() {
+    const step = getLongFormStep();
+    return renderWithStep(step, getHttpClient());
+}
+const getHttpClient = () => getMockHttpClient({
+    '/submit': async () => respondWith({
+        validation: {
+            firstName: 'First name must not contain numbers or special characters',
+            addressLine2: 'First name must not contain numbers or special characters',
+        },
+    }, { status: 422 }),
+});
+const renderWithStep = (step, httpClient) => (_jsx(DynamicFlowWise, { flowId: "long-form-error", httpClient: httpClient, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+        action('onError');
+        console.error(error);
+    } }));
+const getLongFormStep = () => ({
+    id: 'long-form-step',
+    title: 'Personal Details',
+    description: 'Please fill in your personal details to continue',
+    schemas: [
+        {
+            $id: '#personal-details',
+            type: 'object',
+            displayOrder: [
+                'firstName',
+                'lastName',
+                'email',
+                'phone',
+                'addressLine1',
+                'addressLine2',
+                'city',
+                'postcode',
+                'country',
+                'dateOfBirth',
+                'nationality',
+                'occupation',
+                'employer',
+                'taxId',
+                'referenceNote',
+            ],
+            required: ['firstName', 'addressLine2'],
+            properties: {
+                firstName: { type: 'string', title: 'First name' },
+                lastName: { type: 'string', title: 'Last name' },
+                email: { type: 'string', title: 'Email address' },
+                phone: { type: 'string', title: 'Phone number' },
+                addressLine1: { type: 'string', title: 'Address line 1' },
+                addressLine2: { type: 'string', title: 'Address line 2' },
+                city: { type: 'string', title: 'City' },
+                postcode: { type: 'string', title: 'Postcode' },
+                country: { type: 'string', title: 'Country' },
+                dateOfBirth: { type: 'string', title: 'Date of birth' },
+                nationality: { type: 'string', title: 'Nationality' },
+                occupation: { type: 'string', title: 'Occupation' },
+                employer: { type: 'string', title: 'Employer name' },
+                taxId: { type: 'string', title: 'Tax identification number' },
+                referenceNote: { type: 'string', title: 'Reference note' },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#personal-details',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            control: 'primary',
+            action: {
+                url: '/submit',
+                method: 'POST',
+            },
+        },
+    ],
+});