@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/DynamicFlowCore.js

@@ -0,0 +1,5 @@
+import { useDynamicFlow } from './useDynamicFlow';
+export function DynamicFlowCore(props) {
+    const df = useDynamicFlow(props);
+    return df.view;
+}

package/build/common/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { ErrorBoundaryAlert } from './ErrorBoundaryAlert';
+const noop = () => { };
+class ErrorBoundary extends Component {
+    static getDerivedStateFromError() {
+        return { hasError: true, isFatalError: true };
+    }
+    constructor(props) {
+        super(props);
+        this.handleErrorReset = () => {
+            this.setState({ hasError: false, isFatalError: false });
+        };
+        this.state = { hasError: false, isFatalError: false };
+    }
+    componentDidCatch(error) {
+        const { onError = noop } = this.props;
+        onError(error);
+    }
+    render() {
+        const { children } = this.props;
+        const { hasError, isFatalError } = this.state;
+        return (_jsxs(_Fragment, { children: [hasError && _jsx(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }), !isFatalError && children] }));
+    }
+}
+export default ErrorBoundary;

package/build/common/errorBoundary/ErrorBoundary.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils';
+import ErrorBoundary from './ErrorBoundary';
+describe('when an error occurs during rendering', () => {
+    const ThrowError = () => {
+        throw new Error('Forced error during rendering.');
+    };
+    beforeEach(() => {
+        vi.spyOn(console, 'error').mockImplementation(() => { });
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('should render an error message with a retry link', async () => {
+        const onError = vi.fn();
+        renderWithProviders(_jsx(ErrorBoundary, { onError: onError, children: _jsx(ThrowError, {}) }));
+        expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByRole('link', { name: 'Retry' })).toBeInTheDocument();
+        });
+    });
+    it('should trigger the onError callback', () => {
+        const onError = vi.fn();
+        renderWithProviders(_jsx(ErrorBoundary, { onError: onError, children: _jsx(ThrowError, {}) }));
+        expect(onError).toHaveBeenCalledWith(new Error('Forced error during rendering.'));
+    });
+});

package/build/common/errorBoundary/ErrorBoundaryAlert.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Sentiment } from '@transferwise/components';
+import { useIntl } from 'react-intl';
+import messages from '../messages/generic-error.messages';
+export function ErrorBoundaryAlert({ onDismiss }) {
+    const { formatMessage } = useIntl();
+    return (_jsx(Alert, { action: {
+            text: formatMessage(messages.retry),
+            href: window.location.href,
+        }, message: formatMessage(messages.genericError), type: Sentiment.NEGATIVE, className: "m-b-3", onDismiss: onDismiss }));
+}

package/build/common/makeHttpClient/api-utils.js

@@ -0,0 +1,3 @@
+export function isRelativePath(url = '') {
+    return !['https://', 'http://', 'data:'].some((prefix) => url.startsWith(prefix) && url.length > prefix.length);
+}

package/build/common/makeHttpClient/index.js

@@ -0,0 +1 @@
+export * from './makeHttpClient';

package/build/common/makeHttpClient/makeHttpClient.js

@@ -0,0 +1,10 @@
+import { isRelativePath } from './api-utils';
+export const makeHttpClient = (baseUrl, additionalHeaders) => 
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+(input, init) => {
+    const resource = applyBaseUrl(input, baseUrl || '');
+    return fetch(resource, mergeRequestInit(init !== null && init !== void 0 ? init : {}, { headers: additionalHeaders }));
+};
+const applyBaseUrl = (input, baseUrl) => typeof input === 'string' && isRelativePath(input) ? baseUrl + input : input;
+export const mergeRequestInit = (init, additionalInit) => (Object.assign(Object.assign(Object.assign({}, init), additionalInit), { headers: mergeHeaders(init === null || init === void 0 ? void 0 : init.headers, additionalInit === null || additionalInit === void 0 ? void 0 : additionalInit.headers) }));
+const mergeHeaders = (...headersInits) => headersInits.reduce((acc, headers) => (Object.assign(Object.assign({}, acc), Object.fromEntries(new Headers(headers).entries()))), {});

package/build/common/makeHttpClient/makeHttpClient.test.js

@@ -0,0 +1,186 @@
+import { vi } from 'vitest';
+import { makeHttpClient, mergeRequestInit } from './makeHttpClient';
+describe('makeHttpClient', () => {
+    let originalFetch;
+    let spyFetch;
+    beforeEach(() => {
+        originalFetch = global.fetch;
+        spyFetch = vi.spyOn(global, 'fetch');
+    });
+    afterEach(() => {
+        global.fetch = originalFetch;
+        vi.clearAllMocks();
+    });
+    describe('when initialised with a with a baseUrl', () => {
+        const httpClient = makeHttpClient('http://foo.bar');
+        describe('and called with a relative url', () => {
+            it('prefixes the baseUrl to the url given', () => {
+                void httpClient('/banana');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('http://foo.bar/banana', expect.anything());
+            });
+        });
+        describe('and called with an absolute url', () => {
+            it('does not prefix the baseUrl', () => {
+                void httpClient('http://banana.com/banana');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('http://banana.com/banana', expect.anything());
+            });
+        });
+        describe('and called with an "data:" url', () => {
+            it('does not prefix the baseUrl', () => {
+                void httpClient('data:image/jpeg;base64,/9j');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('data:image/jpeg;base64,/9j', expect.anything());
+            });
+        });
+    });
+    describe(`when initialised with a an empty baseUrl`, () => {
+        const httpClient = makeHttpClient('');
+        describe('and called with a relative url', () => {
+            it('uses the url as given', () => {
+                void httpClient('/banana');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('/banana', expect.anything());
+            });
+        });
+    });
+    describe('with additional headers', () => {
+        describe('when initialised with a with additionalHeaders', () => {
+            const httpClient = makeHttpClient('', { 'X-Access-Token': 'QWERTYUIOP' });
+            describe('and called without an init argument', () => {
+                it('calls fetch with an init object containing the headers', () => {
+                    void httpClient('/banana');
+                    expect(spyFetch).toHaveBeenCalledTimes(1);
+                    expect(spyFetch).toHaveBeenCalledWith('/banana', {
+                        headers: expect.anything(),
+                    });
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    const headers = spyFetch.mock.calls[0][1].headers;
+                    expect(headers).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP',
+                    });
+                });
+            });
+            describe('and called with an init argument', () => {
+                it('calls fetch with an init object containing the headers and the rest of the original init object', () => {
+                    void httpClient('/banana', { method: 'POST' });
+                    expect(spyFetch).toHaveBeenCalledTimes(1);
+                    expect(spyFetch).toHaveBeenCalledWith('/banana', {
+                        method: 'POST',
+                        headers: expect.anything(),
+                    });
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    const headers = spyFetch.mock.calls[0][1].headers;
+                    expect(headers).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP',
+                    });
+                });
+            });
+            describe('and called with headers in the init argument', () => {
+                it('calls fetch with an init object containing all headers and the rest of the original init object', () => {
+                    void httpClient('/banana', { method: 'POST', headers: { 'X-DF-Exit': 'true' } });
+                    expect(spyFetch).toHaveBeenCalledTimes(1);
+                    expect(spyFetch).toHaveBeenCalledWith('/banana', {
+                        method: 'POST',
+                        headers: expect.anything(),
+                    });
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    const headers = spyFetch.mock.calls[0][1].headers;
+                    expect(headers).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP',
+                        'x-df-exit': 'true',
+                    });
+                });
+            });
+        });
+        describe('when initialised without additionalHeaders', () => {
+            const httpClient = makeHttpClient('');
+            it('calls fetch with whatever headers are passed in the call', () => {
+                void httpClient('/banana', { method: 'POST', headers: { 'X-DF-Exit': 'true' } });
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('/banana', {
+                    method: 'POST',
+                    headers: expect.anything(),
+                });
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                const headers = spyFetch.mock.calls[0][1].headers;
+                expect(headers).toMatchObject({
+                    'x-df-exit': 'true',
+                });
+            });
+        });
+    });
+});
+describe('mergeRequestInit', () => {
+    describe('when called with two RequestInit objects', () => {
+        it('merges the two objects and the headers', () => {
+            const result = mergeRequestInit({ credentials: 'include', headers: { 'X-DF-Response-Type': 'true' } }, { method: 'POST', headers: { 'X-Access-Token': 'QWERTYUIOP' } });
+            expect(result).toMatchObject({
+                credentials: 'include',
+                method: 'POST',
+            });
+            expect(result.headers).toMatchObject({
+                'x-df-response-type': 'true',
+                'x-access-token': 'QWERTYUIOP',
+            });
+        });
+    });
+    describe('when called with undefined as a first argument', () => {
+        it('returns the second argument and empty headers', () => {
+            const result = mergeRequestInit(undefined, { method: 'POST' });
+            expect(result).toEqual({ method: 'POST', headers: {} });
+        });
+    });
+    describe('when called with null as a first argument', () => {
+        it('returns the second argument and empty headers', () => {
+            const result = mergeRequestInit(null, { method: 'POST' });
+            expect(result).toEqual({ method: 'POST', headers: {} });
+        });
+    });
+    describe('when called with an abort signal', () => {
+        it('passes the signal in the merged request-init', () => {
+            const controller = new AbortController();
+            const result = mergeRequestInit({ method: 'POST' }, { signal: controller.signal });
+            expect(result).toEqual({ method: 'POST', headers: {}, signal: controller.signal });
+        });
+    });
+});
+describe('aborting requests', () => {
+    it('when provided, it calls fetch with the abort signal', () => {
+        const spyFetch = vi.spyOn(global, 'fetch');
+        const controller = new AbortController();
+        const httpClient = makeHttpClient('', { 'X-Custom-Header': 'value' });
+        void httpClient('/banana', { method: 'POST', signal: controller.signal });
+        expect(spyFetch).toHaveBeenCalledTimes(1);
+        expect(spyFetch).toHaveBeenCalledWith('/banana', expect.objectContaining({
+            method: 'POST',
+            signal: controller.signal,
+        }));
+        spyFetch.mockRestore();
+    });
+    it('aborts the request when the signal is triggered', async () => {
+        // For some reason the fetch function in this test environment does not reject on abort
+        // so we need to write an implementation that does
+        const spyFetch = vi.spyOn(global, 'fetch').mockImplementation(async (input, init) => {
+            return new Promise((resolve, reject) => {
+                var _a;
+                // resolve in 10ms, unless aborted
+                const timer = setTimeout(() => {
+                    resolve(new Response('OK'));
+                }, 10);
+                // reject when the signal is triggered
+                (_a = init === null || init === void 0 ? void 0 : init.signal) === null || _a === void 0 ? void 0 : _a.addEventListener('abort', () => {
+                    clearTimeout(timer);
+                    reject(new DOMException('AbortError', 'AbortError'));
+                });
+            });
+        });
+        const controller = new AbortController();
+        const httpClient = makeHttpClient('', { 'X-Custom-Header': 'value' });
+        const promise = httpClient('/banana', { method: 'POST', signal: controller.signal });
+        controller.abort();
+        await expect(promise).rejects.toThrow('AbortError');
+        spyFetch.mockRestore();
+    });
+});

package/build/common/messages/external-confirmation.messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    title: {
+        id: 'dynamicFlows.ExternalConfirmation.title',
+        defaultMessage: 'Please confirm',
+        description: 'Heading for the confirmation screen.',
+    },
+    description: {
+        id: 'dynamicFlows.ExternalConfirmation.description',
+        defaultMessage: 'Please confirm you want to open **{origin}** in a new browser tab.',
+        description: 'Description for the confirmation screen.',
+    },
+    open: {
+        id: 'dynamicFlows.ExternalConfirmation.open',
+        defaultMessage: 'Open in new tab',
+        description: 'Button text confirming opening a new browser tab.',
+    },
+    cancel: {
+        id: 'dynamicFlows.ExternalConfirmation.cancel',
+        defaultMessage: 'Cancel',
+        description: 'Button text rejecting opening a new browser tab.',
+    },
+});

package/build/common/messages/file-upload.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    maxFileSizeError: {
+        id: 'dynamicFlows.FileUploadSchema.maxFileSizeError',
+        defaultMessage: 'Sorry, that file is too big. Please upload a smaller file.',
+        description: "Customer has uploaded a file that's too big. To fix: upload a smaller file.",
+    },
+    wrongFileTypeError: {
+        id: 'dynamicFlows.FileUploadSchema.wrongFileTypeError',
+        defaultMessage: 'Sorry, that file format is not supported. Please upload a different file.',
+        description: 'Customer has uploaded a file that is the wrong type. To fix: upload a file of the correct type.',
+    },
+});

package/build/common/messages/generic-error.messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    genericErrorRetryHint: {
+        id: 'dynamicFlows.PersistAsyncSchema.genericError',
+        defaultMessage: 'Something went wrong, please try again.',
+        description: 'Generic error message for persist async schema',
+    },
+    genericError: {
+        id: 'dynamicFlows.ErrorBoundary.errorAlert',
+        defaultMessage: 'Something went wrong.',
+        description: 'Generic error message for when something has gone wrong.',
+    },
+    retry: {
+        id: 'dynamicFlows.ErrorBoundary.retry',
+        defaultMessage: 'Retry',
+        description: 'Usually this follows the generic error and contains a link.',
+    },
+});

package/build/common/messages/help.messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    helpAria: {
+        id: 'dynamicFlows.Help.ariaLabel',
+        defaultMessage: 'Click here for more info.',
+        description: 'Aria label for help.',
+    },
+});

package/build/common/messages/multi-file-upload.messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    minItemsError: {
+        id: 'dynamicFlows.MultipleFileUploadSchema.minItemsError',
+        defaultMessage: 'Please upload at least {minItems} file(s).',
+        description: 'Customer has uploaded not enough files. To fix: upload more files.',
+    },
+    maxItemsError: {
+        id: 'dynamicFlows.MultipleFileUploadSchema.maxItemsError',
+        defaultMessage: 'Please upload {maxItems} or fewer files.',
+        description: 'Customer has uploaded too many files. To fix: upload fewer files.',
+    },
+    maxFileSizeError: {
+        id: 'dynamicFlows.MultipleFileUploadSchema.maxFileSizeError',
+        defaultMessage: 'Sorry, that file is too big. Please upload a smaller file.',
+        description: "Customer has uploaded a file that's too big. To fix: upload a smaller file.",
+    },
+});

package/build/common/messages/multi-select.messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    summary: {
+        id: 'dynamicFlows.MultiSelect.summary',
+        defaultMessage: '{first} and {count} more',
+        description: 'A summary of the multiple items selected. Showing the title of the first selected item, and the number of other items that have been selected.',
+    },
+});

package/build/common/messages/paragraph.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    copy: {
+        id: 'dynamicFlows.DynamicParagraph.copy',
+        defaultMessage: 'Copy',
+        description: 'Copy to clipboard button label.',
+    },
+    copied: {
+        id: 'dynamicFlows.DynamicParagraph.copied',
+        defaultMessage: 'Copied to clipboard',
+        description: 'Appears in a snackbar when the copy operation succeeds.',
+    },
+});

package/build/common/messages/repeatable.messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    addItemTitle: {
+        id: 'dynamicFlows.ArraySchema.addItemTitle',
+        defaultMessage: 'Add Item',
+        description: 'Label on the button used to open a form to add an item',
+    },
+    addItem: {
+        id: 'dynamicFlows.ArraySchema.addItem',
+        defaultMessage: 'Save',
+        description: 'Label on the add button used to submit a form that adds an item',
+    },
+    editItem: {
+        id: 'dynamicFlows.ArraySchema.editItem',
+        defaultMessage: 'Save',
+        description: 'Label on the edit button used to submit a form that edits an item',
+    },
+    removeItem: {
+        id: 'dynamicFlows.ArraySchema.removeItem',
+        defaultMessage: 'Remove',
+        description: 'Label on the remove button used to confirm deletion of an item',
+    },
+});

package/build/common/messages/search.messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    loading: {
+        id: 'dynamicFlows.SearchLayout.loading',
+        defaultMessage: 'Loading...',
+        description: 'A message shown to the user while their search is being processed, before results appear.',
+    },
+});

package/build/common/messages/validation.array.messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    minItemsError: {
+        id: 'dynamicFlows.ArraySchema.minItemsError',
+        defaultMessage: 'Please add at least {minItems}.',
+        description: 'Customer inputs less than the expected number of values',
+    },
+    maxItemsError: {
+        id: 'dynamicFlows.ArraySchema.maxItemsError',
+        defaultMessage: 'Please add {maxItems} or fewer.',
+        description: 'Customer inputs more than the allowed number of values',
+    },
+});

package/build/common/messages/validation.messages.js

@@ -0,0 +1,53 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+    type: {
+        id: 'dynamicFlows.ControlFeedback.type',
+        defaultMessage: 'Incorrect type',
+        description: '',
+    },
+    minimum: {
+        id: 'dynamicFlows.ControlFeedback.minimum',
+        defaultMessage: `Please enter a number that's {minimum} or more.`,
+        description: '',
+    },
+    maximum: {
+        id: 'dynamicFlows.ControlFeedback.maximum',
+        defaultMessage: `Please enter a number that's {maximum} or less.`,
+        description: '',
+    },
+    minLength: {
+        id: 'dynamicFlows.ControlFeedback.minLength',
+        defaultMessage: 'Please enter at least {minLength} characters.',
+        description: '',
+    },
+    maxLength: {
+        id: 'dynamicFlows.ControlFeedback.maxLength',
+        defaultMessage: 'Please enter {maxLength} or fewer characters.',
+        description: '',
+    },
+    minimumDate: {
+        id: 'dynamicFlows.ControlFeedback.minimumDate',
+        defaultMessage: `Please enter a date that's on or after {minimum}.`,
+        description: '',
+    },
+    maximumDate: {
+        id: 'dynamicFlows.ControlFeedback.maximumDate',
+        defaultMessage: `Please enter a date that's on or before {maximum}.`,
+        description: '',
+    },
+    pattern: {
+        id: 'dynamicFlows.ControlFeedback.pattern',
+        defaultMessage: 'Please enter this in the correct format.',
+        description: '',
+    },
+    patternDate: {
+        id: 'dynamicFlows.ControlFeedback.patternDate',
+        defaultMessage: 'Please enter a date in the corrrect format.',
+        description: '',
+    },
+    required: {
+        id: 'dynamicFlows.ControlFeedback.required',
+        defaultMessage: 'Please fill out this field.',
+        description: '',
+    },
+});