@wise/dynamic-flow-client 3.0.1 → 3.0.2

package/build/main.js

@@ -69,7 +69,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames8() {
+      function classNames9() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -87,7 +87,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames8.apply(null, arg);
+          return classNames9.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -110,14 +110,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames8.default = classNames8;
-        module2.exports = classNames8;
+        classNames9.default = classNames9;
+        module2.exports = classNames9;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames8;
+          return classNames9;
         });
       } else {
-        window.classNames = classNames8;
+        window.classNames = classNames9;
       }
     })();
   }
@@ -1183,7 +1183,7 @@ function isReference(block) {
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
 var import_react47 = require("react");
-var import_react_intl29 = require("react-intl");
+var import_react_intl30 = require("react-intl");
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 var import_react2 = require("react");
@@ -2144,7 +2144,7 @@ function useExternalStepPolling(polling, onAction) {
 
 // src/legacy/common/hooks/usePersistAsync/usePersistAsync.ts
 var import_react34 = require("react");
-var import_react_intl20 = require("react-intl");
+var import_react_intl21 = require("react-intl");
 
 // src/common/messages/generic-error.messages.ts
 var import_react_intl = require("react-intl");
@@ -2168,7 +2168,7 @@ var generic_error_messages_default = (0, import_react_intl.defineMessages)({
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
 var import_react33 = require("react");
-var import_react_intl19 = require("react-intl");
+var import_react_intl20 = require("react-intl");
 
 // src/legacy/common/constants/DateMode.ts
 var DateMode = {
@@ -2215,7 +2215,7 @@ var Size = {
 };
 
 // src/legacy/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
-var import_classnames7 = __toESM(require_classnames());
+var import_classnames8 = __toESM(require_classnames());
 var import_react32 = require("react");
 
 // src/legacy/layout/alert/DynamicAlert.tsx
@@ -2851,11 +2851,26 @@ var import_react12 = require("react");
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
 var import_components7 = require("@transferwise/components");
 var import_formatting = require("@transferwise/formatting");
-var import_react_intl5 = require("react-intl");
+var import_react_intl6 = require("react-intl");
 
-// src/common/messages/validation.messages.ts
+// src/common/messages/validation.array.messages.ts
 var import_react_intl4 = require("react-intl");
-var validation_messages_default = (0, import_react_intl4.defineMessages)({
+var validation_array_messages_default = (0, import_react_intl4.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"
+  }
+});
+
+// src/common/messages/validation.messages.ts
+var import_react_intl5 = require("react-intl");
+var validation_messages_default = (0, import_react_intl5.defineMessages)({
   type: {
     id: "dynamicFlows.ControlFeedback.type",
     defaultMessage: "Incorrect type",
@@ -2934,7 +2949,7 @@ ControlFeedback.defaultProps = {
   validationAsyncSuccessMessage: null
 };
 function useDefaultValidationMessages(schema) {
-  const { formatMessage, locale } = (0, import_react_intl5.useIntl)();
+  const { formatMessage, locale } = (0, import_react_intl6.useIntl)();
   const formattedMessages = {
     type: formatMessage(validation_messages_default.type),
     minimum: formatMessage(validation_messages_default.minimum, {
@@ -2949,6 +2964,12 @@ function useDefaultValidationMessages(schema) {
     maxLength: formatMessage(validation_messages_default.maxLength, {
       maxLength: schema.maxLength
     }),
+    minItems: formatMessage(validation_array_messages_default.minItemsError, {
+      minItems: schema.minItems
+    }),
+    maxItems: formatMessage(validation_array_messages_default.maxItemsError, {
+      maxItems: schema.maxItems
+    }),
     pattern: formatMessage(validation_messages_default.pattern),
     required: formatMessage(validation_messages_default.required)
   };
@@ -3015,11 +3036,11 @@ function constructUploadError(response) {
 }
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multipleFileUploadSchema/utils/useFormattedDefaultErrorMessages.tsx
-var import_react_intl8 = require("react-intl");
+var import_react_intl9 = require("react-intl");
 
 // src/legacy/common/messages.ts
-var import_react_intl6 = require("react-intl");
-var messages_default = (0, import_react_intl6.defineMessages)({
+var import_react_intl7 = require("react-intl");
+var messages_default = (0, import_react_intl7.defineMessages)({
   required: {
     id: "dynamicFlows.DefaultErrorMessages.required",
     defaultMessage: "Please fill out this field.",
@@ -3028,8 +3049,8 @@ var messages_default = (0, import_react_intl6.defineMessages)({
 });
 
 // src/common/messages/multi-file-upload.messages.js
-var import_react_intl7 = require("react-intl");
-var multi_file_upload_messages_default = (0, import_react_intl7.defineMessages)({
+var import_react_intl8 = require("react-intl");
+var multi_file_upload_messages_default = (0, import_react_intl8.defineMessages)({
   minItemsError: {
     id: "dynamicFlows.MultipleFileUploadSchema.minItemsError",
     defaultMessage: "Please upload at least {minItems} file(s).",
@@ -3052,7 +3073,7 @@ function useFormattedDefaultErrorMessages({
   maxItems,
   minItems
 }) {
-  const { formatMessage } = (0, import_react_intl8.useIntl)();
+  const { formatMessage } = (0, import_react_intl9.useIntl)();
   const { maxFileSizeError, maxItemsError, minItemsError } = multi_file_upload_messages_default;
   return {
     maxFileSizeErrorMessage: formatMessage(maxFileSizeError),
@@ -3172,7 +3193,7 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 var import_components10 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_react14 = require("react");
-var import_react_intl11 = require("react-intl");
+var import_react_intl12 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/ItemSummary.tsx
 var import_components9 = require("@transferwise/components");
@@ -3191,8 +3212,8 @@ function ItemSummaryOption({ item, onClick }) {
 }
 
 // src/common/messages/repeatable.messages.ts
-var import_react_intl9 = require("react-intl");
-var repeatable_messages_default = (0, import_react_intl9.defineMessages)({
+var import_react_intl10 = require("react-intl");
+var repeatable_messages_default = (0, import_react_intl10.defineMessages)({
   addItemTitle: {
     id: "dynamicFlows.ArraySchema.addItemTitle",
     defaultMessage: "Add Item",
@@ -3217,7 +3238,7 @@ var repeatable_messages_default = (0, import_react_intl9.defineMessages)({
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchemaStep.tsx
 var import_react13 = require("react");
-var import_react_intl10 = require("react-intl");
+var import_react_intl11 = require("react-intl");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function RepeatableSchemaStep({
   type,
@@ -3228,7 +3249,7 @@ function RepeatableSchemaStep({
   onModelChange,
   onAction
 }) {
-  const { formatMessage } = (0, import_react_intl10.useIntl)();
+  const { formatMessage } = (0, import_react_intl11.useIntl)();
   const [filename, setFilename] = (0, import_react13.useState)(void 0);
   const step = {
     layout: [
@@ -3471,9 +3492,19 @@ var schemaSummaryProvides = (summary, providesProp) => (
 );
 
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/repeatableSchema/RepeatableSchema.tsx
+var import_classnames3 = __toESM(require_classnames());
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function RepeatableSchema({ schema, model, errors, submitted, onChange }) {
+function RepeatableSchema({
+  schema,
+  model,
+  errors,
+  submitted,
+  required = false,
+  onChange
+}) {
+  var _a;
   const [openModalType, setOpenModalType] = (0, import_react14.useState)(null);
+  const [changed, setChanged] = (0, import_react14.useState)(false);
   const [itemSummaries, setItemSummaries] = (0, import_react14.useState)(() => {
     if (isObject(model) && !isArray(model)) {
       throw new Error(
@@ -3483,6 +3514,7 @@ function RepeatableSchema({ schema, model, errors, submitted, onChange }) {
     return model ? model.map((item) => getItemSummaryFromSchema(schema.items, item, schema == null ? void 0 : schema.summary)) : null;
   });
   const [editableItem, setEditableItem] = (0, import_react14.useState)({ item: null, model: null });
+  const id = (0, import_react14.useMemo)(() => schema.$id || generateRandomId(), [schema.$id]);
   const broadcastModelChange = (updatedItems) => {
     const updatedModel = updatedItems ? updatedItems.map(({ value }) => value) : null;
     onChange({
@@ -3499,14 +3531,15 @@ function RepeatableSchema({ schema, model, errors, submitted, onChange }) {
     setOpenModalType("edit");
   };
   const onSaveItem = (action, summaryTextOverride) => {
-    var _a;
+    var _a2;
+    setChanged(true);
     const updatedItem = action === "remove" ? null : getItemSummaryFromSchema(
       schema.items,
       editableItem.model,
       schema.summary,
       summaryTextOverride
     );
-    if (action !== "remove" && !isValidSchema((_a = updatedItem == null ? void 0 : updatedItem.value) != null ? _a : null, schema.items)) {
+    if (action !== "remove" && !isValidSchema((_a2 = updatedItem == null ? void 0 : updatedItem.value) != null ? _a2 : null, schema.items)) {
       return;
     }
     const updatedItemSummaries = getUpdatedItemSummaries(action, {
@@ -3523,8 +3556,21 @@ function RepeatableSchema({ schema, model, errors, submitted, onChange }) {
     setEditableItem({ item: null, model: null });
     setOpenModalType(null);
   };
-  const { formatMessage } = (0, import_react_intl11.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  const { formatMessage } = (0, import_react_intl12.useIntl)();
+  const validations = getValidationFailures(model, schema, required);
+  const base64ValidationMessages = useFormattedDefaultErrorMessages({
+    minItems: schema.minItems,
+    maxItems: schema.maxItems
+  });
+  const validationMessages = schema.items.type === "string" && schema.items.format === "base64url" ? {
+    minItems: base64ValidationMessages.minItemsErrorMessage,
+    maxItems: base64ValidationMessages.maxItemsErrorMessage,
+    required: base64ValidationMessages.requiredMessage
+  } : void 0;
+  const formGroupClasses = {
+    "has-error": (_a = errors && !isEmpty(errors)) != null ? _a : submitted && validations.length
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id, className: (0, import_classnames3.default)(formGroupClasses), children: [
     schema.title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.Header, { title: schema.title }),
     itemSummaries == null ? void 0 : itemSummaries.map((itemSummary) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ItemSummaryOption,
@@ -3562,6 +3608,21 @@ function RepeatableSchema({ schema, model, errors, submitted, onChange }) {
         ),
         onClose: onCancelEdit
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ControlFeedback_default,
+      {
+        id: `${id}-feedback`,
+        changed,
+        focused: false,
+        blurred: false,
+        errors: typeof errors === "string" ? errors : void 0,
+        submitted,
+        schema,
+        validations,
+        validationMessages,
+        infoMessage: null
+      }
     )
   ] });
 }
@@ -3623,7 +3684,7 @@ var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
 var import_components11 = require("@transferwise/components");
-var import_classnames3 = __toESM(require_classnames());
+var import_classnames4 = __toESM(require_classnames());
 var import_react15 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var getSchemaColumnClasses2 = (width) => ({
@@ -3673,7 +3734,7 @@ function ObjectSchema(props) {
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "row", children: orderedPropertyNames.map((propertyName) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
-          className: (0, import_classnames3.default)(
+          className: (0, import_classnames4.default)(
             getSchemaColumnClasses2(props.schema.properties[propertyName].width)
           ),
           children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -3703,16 +3764,16 @@ var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
 var import_components15 = require("@transferwise/components");
-var import_classnames4 = __toESM(require_classnames());
+var import_classnames5 = __toESM(require_classnames());
 var import_react20 = require("react");
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
 var import_components12 = require("@transferwise/components");
-var import_react_intl13 = require("react-intl");
+var import_react_intl14 = require("react-intl");
 
 // src/common/messages/help.messages.ts
-var import_react_intl12 = require("react-intl");
-var help_messages_default = (0, import_react_intl12.defineMessages)({
+var import_react_intl13 = require("react-intl");
+var help_messages_default = (0, import_react_intl13.defineMessages)({
   helpAria: {
     id: "dynamicFlows.Help.ariaLabel",
     defaultMessage: "Click here for more info.",
@@ -3723,7 +3784,7 @@ var help_messages_default = (0, import_react_intl12.defineMessages)({
 // src/legacy/jsonSchemaForm/help/Help.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function Help(props) {
-  const intl = (0, import_react_intl13.useIntl)();
+  const intl = (0, import_react_intl14.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_components12.Info,
     {
@@ -4646,7 +4707,7 @@ function OneOfSchema(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
       props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DynamicAlert_default, { component: props.schema.alert }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
         getTitleAndHelp(props.schema, id),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           SchemaFormControl_default,
@@ -4740,7 +4801,7 @@ OneOfSchema.defaultProps = {
 var OneOfSchema_default = OneOfSchema;
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
-var import_classnames5 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 var import_react22 = require("react");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
@@ -4845,7 +4906,7 @@ function PersistAsyncBlobSchema(props) {
   };
   const id = schema.$id || schema.persistAsync.schema.$id || schema.persistAsync.idProperty;
   const feedbackId = `${id}-feedback`;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       UploadInputAdapter,
       __spreadValues({
@@ -5049,11 +5110,11 @@ var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
 var import_components19 = require("@transferwise/components");
-var import_react_intl15 = require("react-intl");
+var import_react_intl16 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.js
-var import_react_intl14 = require("react-intl");
-var ReadOnlySchema_messages_default = (0, import_react_intl14.defineMessages)({
+var import_react_intl15 = require("react-intl");
+var ReadOnlySchema_messages_default = (0, import_react_intl15.defineMessages)({
   yes: {
     id: "dynamicFlows.ReadOnlySchema.yes",
     defaultMessage: "Yes",
@@ -5070,7 +5131,7 @@ var ReadOnlySchema_messages_default = (0, import_react_intl14.defineMessages)({
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
-  const { formatMessage } = (0, import_react_intl15.useIntl)();
+  const { formatMessage } = (0, import_react_intl16.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_components19.DefinitionList, { layout: import_components19.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
@@ -5298,11 +5359,11 @@ var DynamicForm_default = DynamicForm;
 
 // src/legacy/layout/heading/DynamicHeading.tsx
 var import_components20 = require("@transferwise/components");
-var import_classnames6 = __toESM(require_classnames());
+var import_classnames7 = __toESM(require_classnames());
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
   const { text, size = "md", align = "left", margin = "md", control } = props.component;
-  const classes = (0, import_classnames6.default)(getTextAlignmentAndMargin({ align, margin }));
+  const classes = (0, import_classnames7.default)(getTextAlignmentAndMargin({ align, margin }));
   return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DisplayHeading, { size, text, classes }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StandardHeading, { size, text, classes });
 };
 var StandardHeading = ({ size, text, classes }) => {
@@ -5571,11 +5632,11 @@ var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
 var import_components27 = require("@transferwise/components");
-var import_react_intl17 = require("react-intl");
+var import_react_intl18 = require("react-intl");
 
 // src/common/messages/paragraph.messages.ts
-var import_react_intl16 = require("react-intl");
-var paragraph_messages_default = (0, import_react_intl16.defineMessages)({
+var import_react_intl17 = require("react-intl");
+var paragraph_messages_default = (0, import_react_intl17.defineMessages)({
   copy: {
     id: "dynamicFlows.DynamicParagraph.copy",
     defaultMessage: "Copy",
@@ -5611,14 +5672,14 @@ function BasicDynamicParagraph({ component }) {
   ] });
 }
 function CopyableDynamicParagraph({ component }) {
-  const { formatMessage } = (0, import_react_intl17.useIntl)();
+  const { formatMessage } = (0, import_react_intl18.useIntl)();
   const createSnackbar = useSnackBarIfAvailable();
   const { text } = component;
   const copy = () => {
     var _a;
     (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(paragraph_messages_default.copied) })).catch(noop3);
   };
-  const classNames8 = `${getTextAlignmentAndMargin({
+  const classNames9 = `${getTextAlignmentAndMargin({
     align: component.align,
     margin: "sm"
   })} form-control`;
@@ -5627,7 +5688,7 @@ function CopyableDynamicParagraph({ component }) {
       "input",
       {
         type: "text",
-        className: classNames8,
+        className: classNames9,
         value: text,
         readOnly: true,
         style: { textOverflow: "ellipsis" }
@@ -5713,7 +5774,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 
 // src/legacy/layout/search/SearchResults.tsx
 var import_components30 = require("@transferwise/components");
-var import_react_intl18 = require("react-intl");
+var import_react_intl19 = require("react-intl");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function SearchResults({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
@@ -5733,7 +5794,7 @@ function SearchResults({ results, emptyMessage, onSelect }) {
   )) });
 }
 function ErrorResult({ onRetrySearch }) {
-  const intl = (0, import_react_intl18.useIntl)();
+  const intl = (0, import_react_intl19.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
@@ -5976,7 +6037,7 @@ var BasicTypeSchema = (props) => {
   const feedbackId = `${id}-feedback`;
   return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: (0, import_classnames7.default)(formGroupClasses), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: (0, import_classnames8.default)(formGroupClasses), children: [
       showLabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "d-inline-block m-b-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
         !!schemaHelp && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Help_default, { help: schemaHelp })
@@ -6035,7 +6096,7 @@ var controlTypesWithPersistOnChange = /* @__PURE__ */ new Set([
 ]);
 function PersistAsyncBasicSchema(props) {
   const { schema, required, submitted, errors, onChange, onPersistAsync } = props;
-  const intl = (0, import_react_intl19.useIntl)();
+  const intl = (0, import_react_intl20.useIntl)();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const [persistAsyncModel, setPersistAsyncModel] = (0, import_react33.useState)(null);
@@ -6133,7 +6194,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 var usePersistAsync = (persistAsync) => {
   const [abortController, setAbortController] = (0, import_react34.useState)(null);
   const httpClient = useHttpClient();
-  const intl = (0, import_react_intl20.useIntl)();
+  const intl = (0, import_react_intl21.useIntl)();
   const { schema } = persistAsync;
   async function handlePersistAsync(model) {
     const isInvalidSchema = model instanceof Blob ? !isBlobSchema(schema) : !isValidSchema(model, schema);
@@ -6364,12 +6425,12 @@ var import_react42 = require("react");
 
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.tsx
 var import_react41 = require("react");
-var import_react_intl25 = require("react-intl");
+var import_react_intl26 = require("react-intl");
 var import_react_webcam = __toESM(require_react_webcam());
 
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.messages.ts
-var import_react_intl21 = require("react-intl");
-var CameraCapture_messages_default = (0, import_react_intl21.defineMessages)({
+var import_react_intl22 = require("react-intl");
+var CameraCapture_messages_default = (0, import_react_intl22.defineMessages)({
   reviewSubmit: {
     id: "dynamicFlows.CameraCapture.reviewSubmit",
     defaultMessage: "Yes, submit",
@@ -6429,14 +6490,14 @@ var CameraCapture_messages_default = (0, import_react_intl21.defineMessages)({
 
 // src/legacy/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.tsx
 var import_components32 = require("@transferwise/components");
-var import_react_intl22 = require("react-intl");
+var import_react_intl23 = require("react-intl");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
-  const intl = (0, import_react_intl22.useIntl)();
+  const intl = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       import_components32.Button,
@@ -6475,11 +6536,11 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ (0, import_jsx_runtime60.js
 );
 
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-var import_react_intl24 = require("react-intl");
+var import_react_intl25 = require("react-intl");
 
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.ts
-var import_react_intl23 = require("react-intl");
-var OrientationLockOverlay_messages_default = (0, import_react_intl23.defineMessages)({
+var import_react_intl24 = require("react-intl");
+var OrientationLockOverlay_messages_default = (0, import_react_intl24.defineMessages)({
   text: {
     id: "dynamicFlows.CameraCapture.rotatePhone.text",
     defaultMessage: "Rotate your phone to portrait view to take a photo",
@@ -6490,7 +6551,7 @@ var OrientationLockOverlay_messages_default = (0, import_react_intl23.defineMess
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function OrientationLockOverlay() {
-  const intl = (0, import_react_intl24.useIntl)();
+  const intl = (0, import_react_intl25.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "img",
@@ -6777,7 +6838,7 @@ function CameraCapture({
     shouldLockOrientation,
     onEvent
   );
-  const intl = (0, import_react_intl25.useIntl)();
+  const intl = (0, import_react_intl26.useIntl)();
   const handleCapture = (0, import_react41.useCallback)(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
@@ -7000,11 +7061,11 @@ function getFirstAction(step) {
 }
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_react_intl27 = require("react-intl");
+var import_react_intl28 = require("react-intl");
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.messages.ts
-var import_react_intl26 = require("react-intl");
-var ExternalConfirmationStep_messages_default = (0, import_react_intl26.defineMessages)({
+var import_react_intl27 = require("react-intl");
+var ExternalConfirmationStep_messages_default = (0, import_react_intl27.defineMessages)({
   title: {
     id: "dynamicFlows.ExternalConfirmation.title",
     defaultMessage: "Please confirm",
@@ -7032,7 +7093,7 @@ var import_jsx_runtime66 = require("react/jsx-runtime");
 var noop5 = () => {
 };
 var ExternalConfirmationStep = ({ url, onClose }) => {
-  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const { formatMessage } = (0, import_react_intl28.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     DynamicLayout_default,
     {
@@ -7309,10 +7370,10 @@ var import_react46 = require("react");
 
 // src/common/errorBoundary/ErrorBoundaryAlert.tsx
 var import_components37 = require("@transferwise/components");
-var import_react_intl28 = require("react-intl");
+var import_react_intl29 = require("react-intl");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 function ErrorBoundaryAlert({ onDismiss }) {
-  const { formatMessage } = (0, import_react_intl28.useIntl)();
+  const { formatMessage } = (0, import_react_intl29.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     import_components37.Alert,
     {
@@ -7466,7 +7527,7 @@ var DynamicFlowComponent = ({
   onEvent = noop7,
   onLog = noop7
 }) => {
-  const { locale } = (0, import_react_intl29.useIntl)();
+  const { locale } = (0, import_react_intl30.useIntl)();
   const {
     formErrors,
     globalError,