@wise/dynamic-flow-client 5.9.2 → 5.11.0

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/test-utils/DynamicFlowWise.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeRequiredEventName, useSnackBarIfAvailable } from '@wise/dynamic-flow-renderers';
 import { useMemo } from 'react';
 import { DynamicFlowCore } from '../DynamicFlowCore';
-import { openLinkInNewTab } from '../utils/openLinkInNewTab';
+import { openLinkInNewTab } from './openLinkInNewTab';
 import { getMergedTestRenderers } from './getMergedTestRenderers';
 /**
  * This component is only used in tests.

package/build/test-utils/DynamicFlowWiseModal.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Modal } from '@transferwise/components';
-import { openLinkInNewTab } from '../utils/openLinkInNewTab';
+import { openLinkInNewTab } from './openLinkInNewTab';
 import { getMergedTestRenderers } from './getMergedTestRenderers';
 import { ThemeRequiredEventName } from '@wise/dynamic-flow-renderers';
 import { useDynamicFlowModal } from '../useDynamicFlowModal';

package/build/test-utils/openLinkInNewTab.js

@@ -0,0 +1,15 @@
+export const openLinkInNewTab = (url) => {
+    if (typeof window === 'undefined' || typeof window.open !== 'function') {
+        return false;
+    }
+    try {
+        const w = window.open(url, '_blank');
+        if (w) {
+            w.opener = null;
+        }
+        return Boolean(w);
+    }
+    catch (_a) {
+        return false;
+    }
+};

package/build/tests/NoOp.test.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const noOpHeaders = { 'X-Df-Response-Type': 'no-op' };
+describe('No-op responses', () => {
+    describe('Action submissions', () => {
+        const buildInitialStep = () => ({
+            id: 'no-op-action-step',
+            title: 'No-Op Action Demo',
+            model: { message: '' },
+            schemas: [
+                {
+                    $id: '#action-form',
+                    type: 'object',
+                    displayOrder: ['message'],
+                    required: ['message'],
+                    properties: {
+                        message: {
+                            title: 'Message',
+                            type: 'string',
+                        },
+                    },
+                },
+            ],
+            layout: [
+                { type: 'form', schemaId: '#action-form' },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    action: { id: 'noop-action-id', url: '/action', method: 'POST' },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit elsewhere',
+                    action: { id: 'other-action-id', url: '/other-action', method: 'POST' },
+                },
+            ],
+        });
+        it('should keep the current step when an action responds with no-op', async () => {
+            const initialStep = buildInitialStep();
+            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { headers: noOpHeaders }));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            const input = screen.getByLabelText('Message');
+            await user.type(input, 'first attempt');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            expect(httpClient).toHaveBeenCalledWith('/action', expect.objectContaining({ body: '{"message":"first attempt"}' }));
+            expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Action Succeeded', expect.objectContaining({ actionId: 'noop-action-id' }));
+        });
+        it('should allow submitting another action after a no-op response', async () => {
+            const initialStep = buildInitialStep();
+            const nextStep = {
+                id: 'post-no-op-step',
+                title: 'Step after No-Op',
+                layout: [],
+                schemas: [],
+            };
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith({}, { headers: noOpHeaders }))
+                .mockResolvedValueOnce(respondWith(nextStep));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            const input = screen.getByLabelText('Message');
+            await user.type(input, 'first attempt');
+            await user.click(screen.getByText('Submit'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            await user.clear(input);
+            await user.type(input, 'second attempt');
+            await user.click(screen.getByText('Submit elsewhere'));
+            await waitFor(() => {
+                expect(screen.getByText('Step after No-Op')).toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(httpClient).toHaveBeenCalledWith('/other-action', expect.objectContaining({ body: '{"message":"second attempt"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Action Succeeded', expect.objectContaining({ actionId: 'other-action-id' }));
+        });
+    });
+    describe('Refresh requests', () => {
+        const buildInitialStep = () => ({
+            id: 'no-op-refresh-step',
+            title: 'No-Op Refresh Demo',
+            schemas: [
+                {
+                    $id: '#refresh-form',
+                    type: 'object',
+                    displayOrder: ['color'],
+                    properties: {
+                        color: {
+                            title: 'Color',
+                            control: 'radio',
+                            analyticsId: '#color-schema',
+                            oneOf: [
+                                { const: 'red', title: 'Red' },
+                                { const: 'blue', title: 'Blue' },
+                            ],
+                            onChange: { type: 'refresh' },
+                        },
+                    },
+                },
+            ],
+            layout: [
+                { type: 'form', schemaId: '#refresh-form' },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    action: { id: 'submit-id', url: '/submit', method: 'POST' },
+                },
+                {
+                    type: 'button',
+                    title: 'Submit step',
+                    action: { id: 'step-submit-id', url: '/step-submit', method: 'POST' },
+                },
+            ],
+            refreshUrl: '/refresh',
+        });
+        it('should treat a no-op refresh like a 304 response', async () => {
+            const initialStep = buildInitialStep();
+            const httpClient = vi.fn().mockResolvedValue(respondWith({}, { headers: noOpHeaders }));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Red'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            expect(httpClient).toHaveBeenNthCalledWith(1, '/refresh', expect.objectContaining({ body: '{"color":"red"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+            expect(props.onEvent).toHaveBeenCalledWith('Dynamic Flow - Refresh Succeeded', expect.objectContaining({
+                flowId: 'flow-id',
+                stepId: initialStep.id,
+                schema: '#color-schema',
+            }));
+        });
+        it('should allow refreshing again and submitting after a no-op response', async () => {
+            const initialStep = buildInitialStep();
+            const refreshedStep = Object.assign(Object.assign({}, initialStep), { id: 'refreshed-step', title: 'Refreshed after No-Op', model: { color: 'blue' } });
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(respondWith({}, { headers: noOpHeaders }))
+                .mockResolvedValueOnce(respondWith(refreshedStep))
+                .mockResolvedValueOnce(respondWith(refreshedStep));
+            const props = Object.assign(Object.assign({}, getProps()), { initialStep, httpClient });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+            await waitFor(() => {
+                expect(screen.getByText(initialStep.title)).toBeInTheDocument();
+            });
+            await user.click(screen.getByText('Red'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+            await user.click(screen.getByText('Blue'));
+            await waitFor(() => {
+                expect(screen.getByText('Refreshed after No-Op')).toBeInTheDocument();
+            });
+            expect(httpClient).toHaveBeenCalledTimes(2);
+            expect(httpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({ body: '{"color":"blue"}' }));
+            await user.click(screen.getByText('Submit step'));
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledTimes(3);
+            });
+            expect(httpClient).toHaveBeenCalledWith('/step-submit', expect.objectContaining({ body: '{"color":"blue"}' }));
+            expect(props.onError).not.toHaveBeenCalled();
+        });
+    });
+});

package/build/tests/ScrollToBottom.test.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+/*
+This test mocks the IntersectionObserver API, because,
+unfortunately, jsdom doesn't implement real layout, scrolling, or visibility.
+
+- IntersectionObserver doesn't exist (hence why we mock it)
+- scrollIntoView() does nothing — it's a no-op
+- getBoundingClientRect() always returns all zeros
+- There is no actual viewport or rendering engine
+*/
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const makeStep = (overrides = {}) => (Object.assign({ id: 'step-id', title: 'Step', schemas: [], layout: [] }, overrides));
+const mockIntersectionObserver = (isIntersecting) => {
+    vi.stubGlobal('IntersectionObserver', class {
+        get root() {
+            return null;
+        }
+        get rootMargin() {
+            return '';
+        }
+        get thresholds() {
+            return [];
+        }
+        constructor(callback) {
+            this.observe = vi.fn().mockImplementation((el) => {
+                this.callback([{ isIntersecting, target: el }], this);
+            });
+            this.unobserve = vi.fn();
+            this.disconnect = vi.fn();
+            this.takeRecords = vi.fn().mockReturnValue([]);
+            this.callback = callback;
+        }
+    });
+};
+describe('Scroll to bottom', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+    const stepWithoutFooter = makeStep({
+        layout: [{ type: 'markdown', content: 'Some very long terms and conditions content.' }],
+        tags: ['scroll-to-bottom'],
+    });
+    const stepWithFooter = makeStep({
+        layout: [{ type: 'markdown', content: 'Some very long terms and conditions content.' }],
+        footer: [
+            {
+                type: 'button',
+                title: 'Accept',
+                behavior: { type: 'action', action: { url: '/accept' } },
+            },
+        ],
+        tags: ['scroll-to-bottom'],
+    });
+    describe('given a step with a long markdown content without a footer', () => {
+        it('shows a scroll to bottom button if the end of the step is not visible', async () => {
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+        });
+        it('scrolls to the bottom of the step when the scroll to bottom button is clicked', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Scroll to bottom' }));
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not show a scroll to bottom button if the end of the step is visible', async () => {
+            mockIntersectionObserver(true);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithoutFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('given a step with a long markdown content and a footer', () => {
+        it('shows a scroll to bottom button in the footer, along with the footer content, if the end of the step is not visible', async () => {
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
+        });
+        it('scrolls to the bottom of the step when the scroll to bottom button is clicked', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            mockIntersectionObserver(false);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Scroll to bottom' }));
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not show a scroll to bottom button in the footer, if the end of the step is visible', async () => {
+            mockIntersectionObserver(true);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: stepWithFooter, httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument();
+            });
+            expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument();
+        });
+    });
+});

package/build/tests/SingleFileUpload.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWithProviders } from '../test-utils';
+import { renderWithProviders, respondWith } from '../test-utils';
 import DynamicFlowWise from '../test-utils/DynamicFlowWise';
 import { vi } from 'vitest';
 const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
@@ -86,3 +86,83 @@ describe.each(cases)(`given a %s with persist-async`, (_, schema) => {
         });
     });
 });
+describe('given a blob schema on a step that refreshes', () => {
+    const uploadSchema = {
+        $id: '#upload-national-id',
+        type: 'object',
+        displayOrder: ['fileUpload'],
+        properties: {
+            fileUpload: {
+                type: 'string',
+                persistAsync: {
+                    method: 'POST',
+                    url: '/persist-async',
+                    param: 'param',
+                    idProperty: 'token',
+                    schema: {
+                        type: 'blob',
+                        source: 'file',
+                        title: 'Upload label (from innner schema title)',
+                        accepts: ['image/png', 'image/jpeg', 'application/pdf'],
+                    },
+                },
+            },
+        },
+    };
+    const step = {
+        id: 'step-id',
+        title: 'Step',
+        schemas: [
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['type'],
+                properties: {
+                    type: {
+                        title: 'Select document',
+                        refreshStepOnChange: true,
+                        oneOf: [
+                            {
+                                title: 'National ID',
+                                const: 'national-id',
+                            },
+                            {
+                                title: 'Passport',
+                                const: 'passport',
+                            },
+                        ],
+                    },
+                },
+            },
+        ],
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#schema',
+            },
+        ],
+    };
+    it('clears the value when the model is nullified', async () => {
+        const initialStep = Object.assign(Object.assign({}, step), { schemas: [...step.schemas, uploadSchema], layout: [...step.layout, { type: 'form', schemaId: '#upload-national-id' }] });
+        const httpClient = vi
+            .fn()
+            .mockResolvedValueOnce(respondWith({ token: 123 }))
+            .mockResolvedValueOnce(respondWith(Object.assign(Object.assign({}, step), { schemas: [...step.schemas, Object.assign(Object.assign({}, uploadSchema), { $id: '#upload-passport' })], layout: [...step.layout, { type: 'form', schemaId: '#upload-passport' }], title: 'Step refreshed', model: {
+                type: 'passport',
+                fileUpload: null,
+            } }), { status: 200 }));
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: initialStep, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+        await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
+        await waitFor(() => {
+            expect(screen.getByText('Uploaded')).toBeInTheDocument();
+        });
+        await user.click(screen.getByLabelText('Select document'));
+        await user.click(screen.getByText('Passport'));
+        await waitFor(() => {
+            expect(screen.getByText('Step refreshed')).toBeInTheDocument();
+        });
+        await waitFor(() => {
+            expect(screen.queryByText('Uploaded')).not.toBeInTheDocument();
+        });
+    });
+});