@wise/dynamic-flow-client 0.0.0-experimental-20240319142919

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2019 Wise Ltd.
+ 
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ 
+http://www.apache.org/licenses/LICENSE-2.0
+ 
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,236 @@
+# Dynamic Flow Web Client
+
+This is the Dynamic Flow web client. It provides a simple way to integrate a Dynamic Flow into your web app.
+
+⚡ Access the latest deployed version of the [Dynamic Flow Playground](https://main--641de2ace0e1566a6a450fad.chromatic.com).
+
+## Integration
+
+1. Install `@wise/dynamic-flow-client`.
+
+```
+# yarn
+yarn add @wise/dynamic-flow-client
+
+# npm
+npm install @wise/dynamic-flow-client
+
+# pnpm
+pnpm install @wise/dynamic-flow-client
+```
+
+2. Install required peer dependencies (if not already installed). Please refer to setup instructions for `@transferwise/components` and `@transferwise/neptune-css` if installing up for the first time.
+
+```
+# yarn
+yarn add react react-dom react-intl
+yarn add @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+
+# npm
+npm install react react-dom react-intl
+npm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+
+# pnpm
+pnpm install react react-dom react-intl
+pnpm install @transferwise/components @transferwise/formatting @transferwise/icons @transferwise/neptune-css
+```
+**Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
+
+```js
+// Should be imported once in your application
+import '@wise/dynamic-flow-client/build/main.css';
+```
+
+The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
+
+### For CRAB apps, use the `getLocalisedMessages(...)` function for translations
+
+```js
+import {
+  Provider,
+  SnackbarProvider,
+  translations as componentTranslations,
+} from '@transferwise/components';
+import { getLocalisedMessages } from '@transferwise/crab/client';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client';
+
+const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
+
+return (
+  <Provider i18n={{ locale, messages }}>
+    <ThemeProvider theme={theme} screenMode={screenMode}>
+      <SnackbarProvider>
+        <DynamicFlow {...props} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  </Provider>
+);
+```
+
+### For non-CRAB apps
+
+You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.  
+
+```js
+import {
+  Provider,
+  SnackbarProvider,
+  translations as componentTranslations,
+} from '@transferwise/components';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client';
+
+// create your messages object
+const messages: Record<string, string> = {
+  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
+  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+}
+
+return (
+  <Provider i18n={{ locale, messages }}>
+    <ThemeProvider theme={theme} screenMode={screenMode}>
+      <SnackbarProvider>
+        <DynamicFlow {...props} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  </Provider>
+);
+```
+
+## Configuring your Flow
+
+DF can be initialised with `initialAction` (recommended) or with an `initialStep`.
+
+```tsx
+<DynamicFlow
+  initialAction={{ method: 'GET', url: '/my-amazing-new-flow' }}
+  httpClient={(...args) => fetch(...args)}
+  onCompletion={(result) => {
+    console.log('Flow exited with', result);
+  }}
+  onError={(error, statusCode) => {
+    console.error('Flow Error:', error, 'status code', statusCode);
+  }}
+/>
+```
+
+### `initialAction` vs `initialStep`
+
+In some cases you may want to obtain the initial step yourself, and then pass it to DF component. In these cases you don't provide a `initialAction` since the next steps will result from interactions in the provided `initialStep`:
+
+```tsx
+<DynamicFlow
+  initialStep={someInitialStepIfoundLayingAroundHere}
+  httpClient={...}
+  onCompletion={...}
+  onError={...}
+/>
+```
+
+### The `httpClient` function prop
+
+You must pass a `httpClient` function. This can be `window.fetch` itself or some wrapper function where you inject authorisation headers and anything else you many need.
+
+You can take advantage of the provided `makeHttpClient` utility function. This function takes `baseUrl` and `additionalHeaders` arguments. The `baseUrl` will be prefixed to any relative request URLs. Absolute URLs will not be altered. The `additionalHeaders` parameter can be used to add any request headers you need in all requests.
+
+```tsx
+import { makeHttpClient, DynamicFlow } from '@wise/dynamic-flow-client';
+
+const myHttpClient = makeHttpClient('/my-base-url', { 'X-Access-Token': 'an-access-token' });
+
+<DynamicFlow
+  initialAction={{ method: 'GET', url: '/flow-starting-url' }}
+  httpClient={myHttpClient}
+  onCompletion={...}
+  onError={...}
+/>
+```
+
+#### Custom `httpClient` functions
+
+If you want to write your own `httpClient` function (or if you're writing mocks), it's important that you return actual `Response` objects, and that you **do not throw**. Errors should result in a response with an error status code and potentially a body with an error message. For example:
+
+```tsx
+const mockHttpClient = (input, init) => {
+  switch (input) {
+    case '/standard':
+      return Promise.resolve(new Response(init.body));
+    case '/exit':
+      return Promise.resolve(new Response(init.body, { headers: { 'x-df-exit': true } }));
+    case '/error':
+    default:
+      return Promise.resolve(new Response('An error has occurred.', { status: 500 }));
+  }
+};
+```
+
+Also, please make sure your mocks return a new `Response` instace every time. This is because responses are mutated when we parse their body, and they cannot be parsed a second time.
+
+```ts
+const initialResponse = new Response(JSON.stringify(initialStep));
+// ❌ wrong - the same instance is returned on each request
+const mockHttpClient = (input, init) => Promise.resolve(initialResponse);
+```
+
+```ts
+// ✅ correct - a new instance is returned on each request
+const mockHttpClient = (input, init) => Promise.resolve(new Response(JSON.stringify(initialStep)));
+```
+
+### Telemetry
+
+The `DynamicFlow` component accepts two optional props: `onEvent` and `onLog` which can be used to track and log.
+
+In the example below we send tracking events to Mixpanel and logging events to Rollbar.
+
+```tsx
+<DynamicFlow
+  onEvent={(event, props) => mixpanel.track(event, props)}
+  onLog={(level, message, extra) => Rollbar[level](message, extra)}
+/>
+```
+
+Alternatively, you can log to the browser console:
+
+```ts
+onEvent={(event, props) => console.log(event, props)}
+onLog={(level, message, extra) => {
+  const levelToConsole = {
+    critical: console.error,
+    error: console.error,
+    warning: console.warn,
+    info: console.info,
+    debug: console.log,
+  } as const;
+  levelToConsole[level](message, extra);
+}}
+```
+
+### Loader configuration
+
+By default, DF will display a loading animation (The `Loader` component from Neptune) when the first step is loading. It will not display it during refresh-on-change or while submitting forms.
+
+You can change the defaults by passing a `loaderConfig` prop:
+
+```ts
+type LoaderConfig = {
+  size?: `xs | sm | md | lg | xl`;
+  initial?: boolean;
+  submission?: boolean;
+};
+```
+
+| property     | type    | notes                                                                          | default |
+| ------------ | ------- | ------------------------------------------------------------------------------ | ------- |
+| `size`       | string  | The size of the Loader component.                                              | `xl`    |
+| `initial`    | boolean | Whether or not to display the Loader component while loading the initial step. | true    |
+| `submission` | boolean | Whether or not to display the Loader component during form submissions.        | false   |
+
+## Contributing
+
+We love contributions! Check out `CONTRIBUTING.md` for more information.

package/build/common/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,44 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { ErrorBoundaryAlert } from './ErrorBoundaryAlert';
+var noop = function () { };
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleErrorReset = function () {
+            _this.setState({ hasError: false, isFatalError: false });
+        };
+        _this.state = { hasError: false, isFatalError: false };
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function () {
+        return { hasError: true, isFatalError: true };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        var _a = this.props.onError, onError = _a === void 0 ? noop : _a;
+        onError(error);
+    };
+    ErrorBoundary.prototype.render = function () {
+        var children = this.props.children;
+        var _a = this.state, hasError = _a.hasError, isFatalError = _a.isFatalError;
+        return (_jsxs(_Fragment, { children: [hasError && _jsx(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }), !isFatalError && children] }));
+    };
+    return ErrorBoundary;
+}(Component));
+export default ErrorBoundary;

package/build/common/errorBoundary/ErrorBoundaryAlert.js

@@ -0,0 +1,12 @@
+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(_a) {
+    var onDismiss = _a.onDismiss;
+    var formatMessage = useIntl().formatMessage;
+    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/httpClientContext/HttpClientContext.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { makeHttpClient } from '../makeHttpClient';
+var HttpClientContext = createContext(undefined);
+export function HttpClientProvider(_a) {
+    var httpClient = _a.httpClient, children = _a.children;
+    return _jsx(HttpClientContext.Provider, __assign({ value: httpClient }, { children: children }));
+}
+export function HttpClientProviderFromBaseUrl(_a) {
+    var baseUrl = _a.baseUrl, children = _a.children;
+    var httpClient = useMemo(function () { return makeHttpClient(baseUrl); }, [baseUrl]);
+    return _jsx(HttpClientContext.Provider, __assign({ value: httpClient }, { children: children }));
+}
+/**
+ * Provides the fetch(er) function for dynamic flows asynchronous operations.
+ */
+export var useHttpClient = function () {
+    var contextFetch = useContext(HttpClientContext);
+    return contextFetch !== null && contextFetch !== void 0 ? contextFetch : fetch;
+};
+export var useHasHttpClientProvider = function () {
+    var context = useContext(HttpClientContext);
+    return Boolean(context);
+};

package/build/common/httpClientContext/index.js

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

package/build/common/makeHttpClient/index.js

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

package/build/common/makeHttpClient/makeHttpClient.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { isRelativePath } from '../utils/api-utils';
+export var makeHttpClient = function (baseUrl, additionalHeaders) {
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    return function (input, init) {
+        var resource = applyBaseUrl(input, baseUrl || '');
+        return fetch(resource, mergeRequestInit(init !== null && init !== void 0 ? init : {}, { headers: additionalHeaders }));
+    };
+};
+var applyBaseUrl = function (input, baseUrl) {
+    return typeof input === 'string' && isRelativePath(input) ? baseUrl + input : input;
+};
+export var mergeRequestInit = function (init, additionalInit) { return (__assign(__assign(__assign({}, init), additionalInit), { headers: mergeHeaders(init === null || init === void 0 ? void 0 : init.headers, additionalInit === null || additionalInit === void 0 ? void 0 : additionalInit.headers) })); };
+var mergeHeaders = function (initHeaders, additionalHeaders) {
+    if (!initHeaders && !additionalHeaders) {
+        return {};
+    }
+    var headers = new Headers(initHeaders);
+    for (var _i = 0, _a = Object.entries(additionalHeaders !== null && additionalHeaders !== void 0 ? additionalHeaders : {}); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        headers.set(key, value);
+    }
+    return headers;
+};

package/build/common/makeHttpClient/makeHttpClient.spec.js

@@ -0,0 +1,141 @@
+import { makeHttpClient, mergeRequestInit } from './makeHttpClient';
+describe('makeHttpClient', function () {
+    var originalFetch;
+    var spyFetch;
+    beforeEach(function () {
+        originalFetch = global.fetch;
+        spyFetch = jest.spyOn(global, 'fetch').mockImplementation();
+    });
+    afterEach(function () {
+        global.fetch = originalFetch;
+        jest.clearAllMocks();
+    });
+    describe('when initialised with a with a baseUrl', function () {
+        var httpClient = makeHttpClient('http://foo.bar');
+        describe('and called with a relative url', function () {
+            it('prefixes the baseUrl to the url given', function () {
+                void httpClient('/banana');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('http://foo.bar/banana', expect.anything());
+            });
+        });
+        describe('and called with an absolute url', function () {
+            it('does not prefix the baseUrl', function () {
+                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', function () {
+            it('does not prefix the baseUrl', function () {
+                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", function () {
+        var httpClient = makeHttpClient('');
+        describe('and called with a relative url', function () {
+            it('uses the url as given', function () {
+                void httpClient('/banana');
+                expect(spyFetch).toHaveBeenCalledTimes(1);
+                expect(spyFetch).toHaveBeenCalledWith('/banana', expect.anything());
+            });
+        });
+    });
+    describe('with additional headers', function () {
+        describe('when initialised with a with additionalHeaders', function () {
+            var httpClient = makeHttpClient('', { 'X-Access-Token': 'QWERTYUIOP' });
+            describe('and called without an init argument', function () {
+                it('calls fetch with an init object containing the headers', function () {
+                    void httpClient('/banana');
+                    expect(spyFetch).toHaveBeenCalledTimes(1);
+                    expect(spyFetch).toHaveBeenCalledWith('/banana', {
+                        headers: expect.anything()
+                    });
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    var headers = spyFetch.mock.calls[0][1].headers;
+                    expect(Object.fromEntries(headers.entries())).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP'
+                    });
+                });
+            });
+            describe('and called with an init argument', function () {
+                it('calls fetch with an init object containing the headers and the rest of the original init object', function () {
+                    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
+                    var headers = spyFetch.mock.calls[0][1].headers;
+                    expect(Object.fromEntries(headers.entries())).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP'
+                    });
+                });
+            });
+            describe('and called with headers in the init argument', function () {
+                it('calls fetch with an init object containing all headers and the rest of the original init object', function () {
+                    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
+                    var headers = spyFetch.mock.calls[0][1].headers;
+                    expect(Object.fromEntries(headers.entries())).toMatchObject({
+                        'x-access-token': 'QWERTYUIOP',
+                        'x-df-exit': 'true'
+                    });
+                });
+            });
+        });
+        describe('when initialised without additionalHeaders', function () {
+            var httpClient = makeHttpClient('');
+            it('calls fetch with whatever headers are passed in the call', function () {
+                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
+                var headers = spyFetch.mock.calls[0][1].headers;
+                expect(Object.fromEntries(headers.entries())).toMatchObject({
+                    'x-df-exit': 'true'
+                });
+            });
+        });
+    });
+});
+describe('mergeRequestInit', function () {
+    describe('when called with two RequestInit objects', function () {
+        it('merges the two objects and the headers', function () {
+            var result = mergeRequestInit({ credentials: 'include', headers: { 'X-DF-Response-Type': 'true' } }, { method: 'POST', headers: { 'X-Access-Token': 'QWERTYUIOP' } });
+            expect(result).toMatchObject({
+                credentials: 'include',
+                method: 'POST',
+                headers: expect.any(Headers)
+            });
+            expect(Object.fromEntries(result.headers.entries())).toMatchObject({
+                'x-df-response-type': 'true',
+                'x-access-token': 'QWERTYUIOP'
+            });
+        });
+    });
+    describe('when called with undefined as a first argument', function () {
+        it('returns the second argument and empty headers', function () {
+            var result = mergeRequestInit(undefined, { method: 'POST' });
+            expect(result).toEqual({ method: 'POST', headers: {} });
+        });
+    });
+    describe('when called with null as a first argument', function () {
+        it('returns the second argument and empty headers', function () {
+            var result = mergeRequestInit(null, { method: 'POST' });
+            expect(result).toEqual({ method: 'POST', headers: {} });
+        });
+    });
+});

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