@wise/dynamic-flow-client 5.9.1 → 5.9.2-exp-ext-renderer-5899c9c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "5.9.1",
+  "version": "5.9.2-exp-ext-renderer-5899c9c",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@formatjs/cli": "^6.12.2",
+    "@formatjs/cli": "^6.13.0",
     "@storybook/addon-a11y": "^10.2.10",
     "@storybook/addon-docs": "^10.2.10",
     "@storybook/addon-links": "^10.2.10",
@@ -41,21 +41,22 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "^46.122.1",
+    "@transferwise/components": "^46.129.0",
     "@transferwise/formatting": "^2.13.5",
-    "@transferwise/icons": "4.0.2",
+    "@transferwise/icons": "4.1.0",
     "@transferwise/navigation-ui": "4.42.1",
-    "@transferwise/neptune-css": "14.26.1",
+    "@transferwise/neptune-css": "14.26.3",
     "@types/node": "22.19.11",
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@wise/art": "2.27.0",
-    "@wise/components-theming": "^1.10.0",
+    "@wise/art": "2.28.0",
+    "@wise/components-theming": "^1.10.1",
     "esbuild": "0.27.0",
     "eslint-plugin-storybook": "10.2.10",
-    "framer-motion": "^12.34.1",
+    "framer-motion": "^12.34.3",
+    "jsdom-testing-mocks": "1.16.0",
     "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -72,8 +73,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",

package/build/DynamicFlowCore.js

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

package/build/common/errorBoundary/ErrorBoundary.js

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

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

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

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

package/build/common/makeHttpClient/index.js

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

package/build/common/makeHttpClient/makeHttpClient.js

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

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

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

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

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

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

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

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

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

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

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

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

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