@wise/dynamic-flow-client 2.7.1 → 2.8.0

package/build/main.js

@@ -1013,7 +1013,7 @@ function isReference(block) {
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
 var import_react44 = require("react");
-var import_react_intl34 = require("react-intl");
+var import_react_intl30 = require("react-intl");
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 var import_react2 = require("react");
@@ -1174,10 +1174,6 @@ var FeatureContext = (0, import_react6.createContext)([]);
 function FeatureContextProvider({ features, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FeatureContext.Provider, { value: features, children });
 }
-var useFeatureFlag = (featureName) => {
-  const features = (0, import_react6.useContext)(FeatureContext);
-  return features == null ? void 0 : features.find((feature) => feature.featureName === featureName);
-};
 
 // src/legacy/common/utils/api-utils.ts
 function isStatus2xx(status) {
@@ -2668,9 +2664,9 @@ var import_components7 = require("@transferwise/components");
 var import_formatting = require("@transferwise/formatting");
 var import_react_intl5 = require("react-intl");
 
-// src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.messages.ts
+// src/common/validationMessages/validation.messages.ts
 var import_react_intl4 = require("react-intl");
-var ControlFeedback_messages_default = (0, import_react_intl4.defineMessages)({
+var validation_messages_default = (0, import_react_intl4.defineMessages)({
   type: {
     id: "dynamicFlows.ControlFeedback.type",
     defaultMessage: "Incorrect type",
@@ -2725,14 +2721,14 @@ var ControlFeedback_messages_default = (0, import_react_intl4.defineMessages)({
 
 // src/legacy/jsonSchemaForm/controlFeedback/ControlFeedback.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var ControlFeedback = (props) => {
+function ControlFeedback(props) {
   var _a;
   const defaultValidationMessages = useDefaultValidationMessages(props.schema);
   const validationMessages = __spreadValues(__spreadValues(__spreadValues({}, defaultValidationMessages), props.validationMessages), props.schema.validationMessages);
-  const isErrorVisible = (props.submitted || !props.changed) && !!props.errors;
-  const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && !!((_a = props.validations) == null ? void 0 : _a.length);
+  const isErrorVisible = (props.submitted || !props.changed) && Boolean(props.errors);
+  const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && Boolean((_a = props.validations) == null ? void 0 : _a.length);
   const isDescriptionVisible = props.schema.description && !isErrorVisible && !isValidationVisible;
-  const hasInfoMessage = !!props.infoMessage;
+  const hasInfoMessage = Boolean(props.infoMessage);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { id: props.id, children: [
     isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.InlineAlert, { type: "error", children: props.errors }) : null,
     isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
@@ -2741,7 +2737,7 @@ var ControlFeedback = (props) => {
       hasInfoMessage && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: props.infoMessage })
     ] })
   ] });
-};
+}
 ControlFeedback.defaultProps = {
   errors: "",
   validations: [],
@@ -2751,26 +2747,26 @@ ControlFeedback.defaultProps = {
 function useDefaultValidationMessages(schema) {
   const { formatMessage, locale } = (0, import_react_intl5.useIntl)();
   const formattedMessages = {
-    type: formatMessage(ControlFeedback_messages_default.type),
-    minimum: formatMessage(ControlFeedback_messages_default.minimum, {
+    type: formatMessage(validation_messages_default.type),
+    minimum: formatMessage(validation_messages_default.minimum, {
       minimum: schema.minimum
     }),
-    maximum: formatMessage(ControlFeedback_messages_default.maximum, {
+    maximum: formatMessage(validation_messages_default.maximum, {
       maximum: schema.maximum
     }),
-    minLength: formatMessage(ControlFeedback_messages_default.minLength, {
+    minLength: formatMessage(validation_messages_default.minLength, {
       minLength: schema.minLength
     }),
-    maxLength: formatMessage(ControlFeedback_messages_default.maxLength, {
+    maxLength: formatMessage(validation_messages_default.maxLength, {
       maxLength: schema.maxLength
     }),
-    pattern: formatMessage(ControlFeedback_messages_default.pattern),
-    required: formatMessage(ControlFeedback_messages_default.required)
+    pattern: formatMessage(validation_messages_default.pattern),
+    required: formatMessage(validation_messages_default.required)
   };
   if (schema.format === "date") {
     const dateOverrides = {
-      pattern: formatMessage(ControlFeedback_messages_default.patternDate),
-      minimum: schema.minimum ? formatMessage(ControlFeedback_messages_default.minimumDate, {
+      pattern: formatMessage(validation_messages_default.patternDate),
+      minimum: schema.minimum ? formatMessage(validation_messages_default.minimumDate, {
         minimum: (0, import_formatting.formatDate)(
           new Date(schema.minimum),
           locale,
@@ -2780,7 +2776,7 @@ function useDefaultValidationMessages(schema) {
           }
         )
       }) : void 0,
-      maximum: schema.maximum ? formatMessage(ControlFeedback_messages_default.maximumDate, {
+      maximum: schema.maximum ? formatMessage(validation_messages_default.maximumDate, {
         maximum: (0, import_formatting.formatDate)(
           new Date(schema.maximum),
           locale,
@@ -3466,40 +3462,42 @@ function ObjectSchema(props) {
   const isPropertyDefined = (propertyName) => typeof props.schema.properties[propertyName] !== "undefined";
   const orderedPropertyNames = Array.from(allorderedPropertiesSet).filter(isPropertyDefined);
   const propsErrors = props.errors;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("fieldset", { children: [
-    props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("legend", { children: [
-      " ",
-      props.schema.title,
-      " "
-    ] }),
-    props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
-      " ",
-      props.schema.description,
-      " "
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicAlert_default, { component: props.schema.alert }),
-    /* @__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)(
-          getSchemaColumnClasses2(props.schema.properties[propertyName].width)
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          GenericSchema_default,
-          {
-            schema: props.schema.properties[propertyName],
-            model: props.model && props.model[propertyName],
-            errors: propsErrors == null ? void 0 : propsErrors[propertyName],
-            submitted: props.submitted,
-            required: isRequired(propertyName),
-            disabled: props.disabled,
-            onChange: (onChangeProps) => onChangeProperty(propertyName, onChangeProps),
-            onPersistAsync: props.onPersistAsync
-          }
-        )
-      },
-      propertyName
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("fieldset", { children: [
+      props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("legend", { children: [
+        " ",
+        props.schema.title,
+        " "
+      ] }),
+      props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
+        " ",
+        props.schema.description,
+        " "
+      ] }),
+      /* @__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)(
+            getSchemaColumnClasses2(props.schema.properties[propertyName].width)
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            GenericSchema_default,
+            {
+              schema: props.schema.properties[propertyName],
+              model: props.model && props.model[propertyName],
+              errors: propsErrors == null ? void 0 : propsErrors[propertyName],
+              submitted: props.submitted,
+              required: isRequired(propertyName),
+              disabled: props.disabled,
+              onChange: (onChangeProps) => onChangeProperty(propertyName, onChangeProps),
+              onPersistAsync: props.onPersistAsync
+            }
+          )
+        },
+        propertyName
+      )) })
+    ] })
   ] });
 }
 ObjectSchema.defaultProps = {
@@ -6136,7 +6134,7 @@ var import_react39 = require("react");
 
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.tsx
 var import_react38 = require("react");
-var import_react_intl30 = 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
@@ -6156,6 +6154,46 @@ var CameraCapture_messages_default = (0, import_react_intl22.defineMessages)({
     id: "dynamicFlows.CameraCapture.reviewInstructions",
     defaultMessage: "Is your picture clear, readable and complete?",
     description: "After taking an image with the camera, prompt user to review the image"
+  },
+  cameraNotSupportedTitle: {
+    id: "dynamicFlows.CameraCapture.CameraNotSupported.title",
+    defaultMessage: "Camera not supported",
+    description: "Title of standalone page prompting that camera is not available on users browser"
+  },
+  cameraNotSupportedParagraph: {
+    id: "dynamicFlows.CameraCapture.CameraNotSupported.paragraph",
+    defaultMessage: "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
+    description: "Further text of standalone page prompting that camera is not available on user's browser"
+  },
+  noCameraAccessTitle: {
+    id: "dynamicFlows.CameraCapture.NoCameraAccess.title",
+    defaultMessage: "We can't access your camera",
+    description: "Title of standalone page prompting missing camera permissions"
+  },
+  noCameraAccessParagraph: {
+    id: "dynamicFlows.CameraCapture.NoCameraAccess.paragraph",
+    defaultMessage: "Enable camera access in your browser's settings to get going again.",
+    description: "Further text of standalone page prompting missing camera permissions"
+  },
+  noCameraAccessAction: {
+    id: "dynamicFlows.CameraCapture.NoCameraAccess.action",
+    defaultMessage: "Enable camera access",
+    description: "Action to ask for camera permissions again"
+  },
+  cameraConnectionIssueTitle: {
+    id: "dynamicFlows.CameraCapture.CameraConnectionIssue.title",
+    defaultMessage: "We can't access your camera",
+    description: "Title of standalone page prompting that there was an issue connecting to a camera"
+  },
+  cameraConnectionIssueParagraph: {
+    id: "dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph",
+    defaultMessage: "Please check if it is connected and try again.",
+    description: "Further text of standalone page prompting that there was an issue connecting to a camera"
+  },
+  cameraConnectionIssueAction: {
+    id: "dynamicFlows.CameraCapture.CameraConnectionIssue.action",
+    defaultMessage: "Try again",
+    description: "Action to try using camera again"
   }
 });
 
@@ -6221,7 +6259,7 @@ var OrientationLockOverlay_messages_default = (0, import_react_intl24.defineMess
 
 // src/legacy/step/cameraStep/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var OrientationLockOverlay = () => {
+function OrientationLockOverlay() {
   const intl = (0, import_react_intl25.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -6236,52 +6274,24 @@ var OrientationLockOverlay = () => {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-center m-b-0", children: intl.formatMessage(OrientationLockOverlay_messages_default.text) })
   ] });
-};
+}
 var OrientationLockOverlay_default = OrientationLockOverlay;
 
+// src/legacy/step/cameraStep/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
+var import_components32 = require("@transferwise/components");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function CameraErrorScreen({ title, description, actionButton, onAction }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h2", { className: "text-xs-center m-b-3", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs-center m-b-5", children: description }),
+    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components32.Button, { block: true, onClick: onAction, children: actionButton })
+  ] }) }) });
+}
+var CameraErrorScreen_default = CameraErrorScreen;
+
 // src/legacy/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.ts
 var import_react35 = require("react");
 var import_screenfull = __toESM(require_screenfull());
-var useFullScreenOrientationLock = (shouldLockOrientation) => {
-  const lockOrientation = (0, import_react35.useCallback)(() => {
-    if (window.screen.orientation && "lock" in window.screen.orientation && typeof window.screen.orientation.lock === "function") {
-      window.screen.orientation.lock("portrait").catch(noop4);
-    }
-  }, []);
-  const unlockOrientation = (0, import_react35.useCallback)(() => {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = window == null ? void 0 : window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.unlock) == null ? void 0 : _c.call(_b);
-  }, []);
-  const enterFullScreen = (0, import_react35.useCallback)(() => {
-    setTimeout(() => {
-      if (shouldLockOrientation && !import_screenfull.default.isFullscreen && import_screenfull.default.isEnabled) {
-        import_screenfull.default.request(document.documentElement, { navigationUI: "show" }).then(() => {
-          lockOrientation();
-        }).catch(noop4);
-      }
-    }, 100);
-  }, [shouldLockOrientation, lockOrientation]);
-  const exitFullScreen = (0, import_react35.useCallback)(() => {
-    if (import_screenfull.default.isFullscreen) {
-      import_screenfull.default.exit().catch(noop4);
-    }
-    unlockOrientation();
-  }, [unlockOrientation]);
-  (0, import_react35.useEffect)(() => {
-    return () => {
-      exitFullScreen();
-    };
-  }, [exitFullScreen]);
-  return {
-    enterFullScreen,
-    exitFullScreen
-  };
-};
-var noop4 = () => {
-};
-
-// src/legacy/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
-var import_react36 = require("react");
 
 // src/legacy/step/cameraStep/cameraCapture/utils/index.ts
 var isSelfieCamera = (stream) => {
@@ -6329,7 +6339,95 @@ var getVideoCapabilities = (videoStream) => {
   return (_b = (_a = getVideoTrack(videoStream)) == null ? void 0 : _a.getCapabilities) == null ? void 0 : _b.call(_a);
 };
 
+// src/legacy/step/cameraStep/cameraCapture/tracking/index.ts
+var trackCameraError = (message, onEvent, error) => onEvent == null ? void 0 : onEvent(message, { Error: getSerializedError(error) });
+var getSerializedError = (error) => error instanceof DOMException ? JSON.stringify({
+  name: error == null ? void 0 : error.name,
+  message: error == null ? void 0 : error.message
+}) : error;
+var trackCameraFeedStarted = async (onEvent, props, stream) => onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Feed Started", await getCameraStartedProperties(props, stream));
+var getCameraStartedProperties = async (props, videoStream) => {
+  var _a;
+  const videoTrack = getVideoTrack(videoStream);
+  const capabilities = getVideoCapabilities(videoStream);
+  const settings = (_a = videoTrack == null ? void 0 : videoTrack.getSettings) == null ? void 0 : _a.call(videoTrack);
+  return __spreadProps(__spreadValues({}, videoTrack && {
+    "Available Video Devices (by label)": await getAvailableVideoDeviceLabels(),
+    "Active Video Device (by label)": await getActiveVideoDeviceLabel(videoStream),
+    "Camera Capabilities": capabilities,
+    "Camera Settings": settings
+  }), {
+    "Camera Direction (Asked)": props == null ? void 0 : props.direction
+  });
+};
+var trackCameraOrientationLandscape = (onEvent) => {
+  onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Orientation Lock Overlay Shown", {});
+};
+var trackCameraOrientationLocked = (onEvent) => {
+  onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Orientation Locked", {});
+};
+
+// src/legacy/step/cameraStep/cameraCapture/hooks/useFullScreenOrientationLock.ts
+var useFullScreenOrientationLock = (shouldLockOrientation, onEvent) => {
+  const lockOrientation = (0, import_react35.useCallback)(() => {
+    if (window.screen.orientation && "lock" in window.screen.orientation && typeof window.screen.orientation.lock === "function") {
+      window.screen.orientation.lock("portrait").then(() => trackCameraOrientationLocked(onEvent)).catch(noop4);
+    }
+  }, [onEvent]);
+  const unlockOrientation = (0, import_react35.useCallback)(() => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = window == null ? void 0 : window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.unlock) == null ? void 0 : _c.call(_b);
+  }, []);
+  const enterFullScreen = (0, import_react35.useCallback)(() => {
+    setTimeout(() => {
+      if (shouldLockOrientation && !import_screenfull.default.isFullscreen && import_screenfull.default.isEnabled) {
+        import_screenfull.default.request(document.documentElement, { navigationUI: "show" }).then(() => {
+          lockOrientation();
+        }).catch(noop4);
+      }
+    }, 100);
+  }, [shouldLockOrientation, lockOrientation]);
+  const exitFullScreen = (0, import_react35.useCallback)(() => {
+    if (import_screenfull.default.isFullscreen) {
+      import_screenfull.default.exit().catch(noop4);
+    }
+    unlockOrientation();
+  }, [unlockOrientation]);
+  const handleOrientationChange = (0, import_react35.useCallback)(
+    (event) => {
+      var _a, _b;
+      if ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.type.includes("landscape")) {
+        if ((_b = window.screen) == null ? void 0 : _b.orientation) {
+          trackCameraOrientationLandscape(onEvent);
+        }
+      }
+    },
+    [onEvent]
+  );
+  (0, import_react35.useEffect)(() => {
+    var _a, _b;
+    if (shouldLockOrientation) {
+      (_b = (_a = window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.addEventListener(
+        "change",
+        (event) => handleOrientationChange(event)
+      );
+    }
+    return () => {
+      var _a2, _b2;
+      (_b2 = (_a2 = window.screen) == null ? void 0 : _a2.orientation) == null ? void 0 : _b2.removeEventListener("change", handleOrientationChange);
+      exitFullScreen();
+    };
+  }, [exitFullScreen, handleOrientationChange, shouldLockOrientation]);
+  return {
+    enterFullScreen,
+    exitFullScreen
+  };
+};
+var noop4 = () => {
+};
+
 // src/legacy/step/cameraStep/cameraCapture/hooks/useVideoConstraints.ts
+var import_react36 = require("react");
 var useVideoConstraints = (direction) => {
   const [videoConstraints, setVideoConstraints] = (0, import_react36.useState)();
   const defaultVideoConstraints = {
@@ -6358,7 +6456,7 @@ var useVideoConstraints = (direction) => {
 
 // src/legacy/step/cameraStep/cameraCapture/overlay/Overlay.tsx
 var import_react37 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
 var imageHeight = 40;
@@ -6366,39 +6464,32 @@ var titleHeight = 32;
 var instructionsHeight = 48;
 var reviewInstructionsHeight = 40;
 var overlayMaxWidth = 800;
-function Overlay({
-  overlay,
-  outline,
-  imageUrl,
-  title,
-  instructions,
-  reviewInstructions
-}) {
+function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstructions }) {
   const svgReference = (0, import_react37.useRef)(null);
   (0, import_react37.useEffect)(() => {
     const listener = debounce(() => {
       var _a;
       if ((_a = svgReference.current) == null ? void 0 : _a.innerHTML) {
         const reference = svgReference.current;
-        reference.innerHTML += "";
+        reference.innerHTML = String(reference.innerHTML);
       }
     }, 100);
     window.addEventListener("resize", listener);
     return () => window.removeEventListener("resize", listener);
   });
   let helperBoxHeight = (imageUrl ? imageHeight : 0) + (title ? titleHeight : 0) + (instructions ? instructionsHeight : 0);
-  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h4", { className: "camera-capture-title", children: title }),
-    instructions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("small", { className: "camera-capture-instructions", children: instructions })
+  let helperBox = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+    imageUrl && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("img", { className: "camera-capture-img", src: imageUrl, alt: "" }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h4", { className: "camera-capture-title", children: title }),
+    instructions && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("small", { className: "camera-capture-instructions", children: instructions })
   ] });
   const frameBottomMargin = captureButtonHeight + helperBoxHeight;
   if (reviewInstructions) {
     helperBoxHeight = frameBottomMargin - reviewButtonsHeight;
-    helperBox = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
+    helperBox = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("small", { className: "camera-capture-instructions", children: reviewInstructions });
     const frameWithReviewInstructionsMinBottomMargin = reviewButtonsHeight + reviewInstructionsHeight;
     if (frameBottomMargin < frameWithReviewInstructionsMinBottomMargin) {
-      helperBox = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, {});
+      helperBox = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, {});
     }
   }
   const framePosition = {
@@ -6416,104 +6507,20 @@ function Overlay({
       width: "90%"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("mask", { id: "mask", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("image", __spreadValues({ href: overlay }, framePosition))
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("svg", { ref: svgReference, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("mask", { id: "mask", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("rect", { width: "100%", height: "100%", fill: "#fff" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("image", __spreadValues({ href: overlay }, framePosition))
     ] }) }),
-    overlay && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
-    outline && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("image", __spreadValues({ href: outline }, framePosition)),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
+    overlay && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("rect", { width: "100%", height: "100%", mask: "url(#mask)", fillOpacity: "0.72" }),
+    outline && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("image", __spreadValues({ href: outline }, framePosition)),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("foreignObject", { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", __spreadProps(__spreadValues({ className: "camera-capture-text-and-image-container" }, helperBoxPosition), { children: helperBox })) })
   ] });
 }
 var Overlay_default = Overlay;
 
-// src/legacy/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
-var import_components32 = require("@transferwise/components");
-var import_react_intl27 = require("react-intl");
-
-// src/legacy/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.messages.ts
-var import_react_intl26 = require("react-intl");
-var NoCameraAccess_messages_default = (0, import_react_intl26.defineMessages)({
-  title: {
-    id: "dynamicFlows.CameraCapture.NoCameraAccess.title",
-    defaultMessage: "We can't access your camera",
-    description: "Title of standalone page prompting missing camera permissions"
-  },
-  paragraph: {
-    id: "dynamicFlows.CameraCapture.NoCameraAccess.paragraph",
-    defaultMessage: "Enable camera access in your browser's settings to get going again.",
-    description: "Further text of standalone page prompting missing camera permissions"
-  },
-  action: {
-    id: "dynamicFlows.CameraCapture.NoCameraAccess.action",
-    defaultMessage: "Enable camera access",
-    description: "Action to ask for camera permissions again"
-  }
-});
-
-// src/legacy/step/cameraStep/cameraCapture/screens/NoCameraAccess/NoCameraAccess.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
-function NoCameraAccess({ onAction }) {
-  const intl = (0, import_react_intl27.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { id: "no-camera-access", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(NoCameraAccess_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(NoCameraAccess_messages_default.paragraph) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components32.Button, { block: true, onClick: onAction, children: intl.formatMessage(NoCameraAccess_messages_default.action) })
-  ] }) }) }) });
-}
-var NoCameraAccess_default = NoCameraAccess;
-
-// src/legacy/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
-var import_react_intl29 = require("react-intl");
-
-// src/legacy/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.messages.ts
-var import_react_intl28 = require("react-intl");
-var CameraNotSupported_messages_default = (0, import_react_intl28.defineMessages)({
-  title: {
-    id: "dynamicFlows.CameraCapture.CameraNotSupported.title",
-    defaultMessage: "Camera not supported",
-    description: "Title of standalone page prompting that camera is not available on users browser"
-  },
-  paragraph: {
-    id: "dynamicFlows.CameraCapture.CameraNotSupported.paragraph",
-    defaultMessage: "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
-    description: "Further text of standalone page prompting that camera is not available on user's browser"
-  }
-});
-
-// src/legacy/step/cameraStep/cameraCapture/screens/CameraNotSupported/CameraNotSupported.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var CameraNotSupported = () => {
-  const intl = (0, import_react_intl29.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { id: "camera-not-supported", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h2", { className: "text-xs-center m-b-3", children: intl.formatMessage(CameraNotSupported_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "text-xs-center m-b-5", children: intl.formatMessage(CameraNotSupported_messages_default.paragraph) })
-  ] }) }) }) });
-};
-var CameraNotSupported_default = CameraNotSupported;
-
-// src/legacy/step/cameraStep/cameraCapture/tracking/index.ts
-var trackCameraPermissionDenied = (onEvent) => onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Permission Denied", {});
-var trackCameraFeedStarted = async (onEvent, props, stream) => onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Feed Started", await getCameraStartedProperties(props, stream));
-var trackCameraNotSupported = (onEvent, error) => onEvent == null ? void 0 : onEvent("Dynamic Flow - Camera Not Supported", { Error: error });
-var getCameraStartedProperties = async (props, videoStream) => {
-  var _a;
-  const videoTrack = getVideoTrack(videoStream);
-  const capabilities = getVideoCapabilities(videoStream);
-  const settings = (_a = videoTrack == null ? void 0 : videoTrack.getSettings) == null ? void 0 : _a.call(videoTrack);
-  return __spreadProps(__spreadValues({}, videoTrack && {
-    "Available Video Devices (by label)": await getAvailableVideoDeviceLabels(),
-    "Active Video Device (by label)": await getActiveVideoDeviceLabel(videoStream),
-    "Camera Capabilities": capabilities,
-    "Camera Settings": settings
-  }), {
-    "Camera Direction (Asked)": props == null ? void 0 : props.direction
-  });
-};
-
 // src/legacy/step/cameraStep/cameraCapture/CameraCapture.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function CameraCapture({
   direction = "back",
   overlay = "",
@@ -6525,19 +6532,22 @@ function CameraCapture({
   onCapture,
   onEvent
 }) {
-  const [mode, setMode] = (0, import_react38.useState)("CAPTURE");
+  const [mode, setMode] = (0, import_react38.useState)("CAPTURE" /* CAPTURE */);
+  const [cameraError, setCameraError] = (0, import_react38.useState)();
   const [isVideoMirrored, setIsVideoMirrored] = (0, import_react38.useState)(false);
   const [ready, setReady] = (0, import_react38.useState)(false);
   const [reviewImage, setReviewImage] = (0, import_react38.useState)();
   const webcamReference = (0, import_react38.useRef)(null);
   const { videoConstraints } = useVideoConstraints(direction);
-  const orientationLockFeature = useFeatureFlag("camera-orientation-lock" /* CAMERA_ORIENTATION_LOCK */);
   const shouldLockOrientation = (0, import_react38.useMemo)(
-    () => !!((orientationLockFeature == null ? void 0 : orientationLockFeature.enabled) && isMobile()),
-    [orientationLockFeature]
+    () => !!(isMobile() && mode === "CAPTURE" /* CAPTURE */),
+    [mode]
   );
-  const { enterFullScreen, exitFullScreen } = useFullScreenOrientationLock(shouldLockOrientation);
-  const intl = (0, import_react_intl30.useIntl)();
+  const { enterFullScreen, exitFullScreen } = useFullScreenOrientationLock(
+    shouldLockOrientation,
+    onEvent
+  );
+  const intl = (0, import_react_intl26.useIntl)();
   const handleCapture = (0, import_react38.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) {
@@ -6549,7 +6559,7 @@ function CameraCapture({
             if (showReview) {
               const source = window.URL.createObjectURL(blob);
               setReviewImage({ source, blob });
-              setMode("REVIEW");
+              setMode("REVIEW" /* REVIEW */);
             } else {
               onCapture(blob);
             }
@@ -6562,15 +6572,39 @@ function CameraCapture({
   }, [webcamReference, showReview, setReviewImage, setMode, onCapture, isVideoMirrored]);
   const handleUserMediaError = (0, import_react38.useCallback)(
     (error) => {
-      if (error instanceof DOMException && (error == null ? void 0 : error.name) === "NotAllowedError") {
-        setMode("NO_CAMERA_ACCESS");
-        trackCameraPermissionDenied(onEvent);
-        return;
+      setMode("ERROR" /* ERROR */);
+      if (error instanceof DOMException) {
+        switch (error == null ? void 0 : error.name) {
+          case "NotAllowedError":
+            setCameraError({
+              title: intl.formatMessage(CameraCapture_messages_default.noCameraAccessTitle),
+              description: intl.formatMessage(CameraCapture_messages_default.noCameraAccessParagraph),
+              actionButton: intl.formatMessage(CameraCapture_messages_default.noCameraAccessAction),
+              onAction: handleRetryCameraAccess
+            });
+            trackCameraError("Dynamic Flow - Camera Permission Denied", onEvent, error);
+            return;
+          case "NotFoundError":
+          case "OverconstrainedError":
+          case "AbortError":
+          case "NotReadableError":
+            setCameraError({
+              title: intl.formatMessage(CameraCapture_messages_default.cameraConnectionIssueTitle),
+              description: intl.formatMessage(CameraCapture_messages_default.cameraConnectionIssueParagraph),
+              actionButton: intl.formatMessage(CameraCapture_messages_default.cameraConnectionIssueAction),
+              onAction: handleRetryCameraAccess
+            });
+            trackCameraError("Dynamic Flow - Camera Not Accessible", onEvent, error);
+            return;
+        }
       }
-      setMode("CAMERA_NOT_SUPPORTED");
-      trackCameraNotSupported(onEvent, error);
+      setCameraError({
+        title: intl.formatMessage(CameraCapture_messages_default.cameraNotSupportedTitle),
+        description: intl.formatMessage(CameraCapture_messages_default.cameraNotSupportedParagraph)
+      });
+      trackCameraError("Dynamic Flow - Camera Not Supported", onEvent, error);
     },
-    [setMode, onEvent]
+    [intl, onEvent]
   );
   const handleUserMedia = (0, import_react38.useCallback)(
     (stream) => {
@@ -6585,17 +6619,17 @@ function CameraCapture({
     onCapture((reviewImage == null ? void 0 : reviewImage.blob) || null);
   };
   const handleReviewRetry = () => {
-    setMode("CAPTURE");
+    setMode("CAPTURE" /* CAPTURE */);
     setReviewImage(void 0);
   };
-  const handleRetryCameraAccess = () => setMode("CAPTURE");
+  const handleRetryCameraAccess = () => setMode("CAPTURE" /* CAPTURE */);
   (0, import_react38.useEffect)(() => {
-    if (mode !== "CAPTURE") {
+    if (mode !== "CAPTURE" /* CAPTURE */) {
       exitFullScreen();
     }
   }, [mode, exitFullScreen]);
-  const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const captureScreen = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "camera-capture", children: [
+    videoConstraints && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_react_webcam.default,
       {
         ref: webcamReference,
@@ -6606,7 +6640,7 @@ function CameraCapture({
         onUserMedia: handleUserMedia
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Overlay_default,
       {
         overlay,
@@ -6616,8 +6650,8 @@ function CameraCapture({
         instructions
       }
     ),
-    shouldLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(OrientationLockOverlay_default, {}),
-    ready && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    shouldLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(OrientationLockOverlay_default, {}),
+    ready && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       CaptureBottomBar,
       {
         onCapture: () => {
@@ -6626,9 +6660,9 @@ function CameraCapture({
       }
     )
   ] });
-  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const reviewScreen = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "camera-capture", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: "review-image", src: reviewImage == null ? void 0 : reviewImage.source, alt: "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Overlay_default,
       {
         overlay,
@@ -6638,19 +6672,18 @@ function CameraCapture({
         reviewInstructions: intl.formatMessage(CameraCapture_messages_default.reviewInstructions)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ReviewBottomBar, { onSubmit: handleReviewSubmit, onRetry: handleReviewRetry })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("section", { className: "camera-capture", children: [
-    mode === "CAPTURE" && captureScreen,
-    mode === "REVIEW" && reviewScreen,
-    mode === "NO_CAMERA_ACCESS" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(NoCameraAccess_default, { onAction: handleRetryCameraAccess }),
-    mode === "CAMERA_NOT_SUPPORTED" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CameraNotSupported_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { children: [
+    mode === "CAPTURE" /* CAPTURE */ && captureScreen,
+    mode === "REVIEW" /* REVIEW */ && reviewScreen,
+    mode === "ERROR" /* ERROR */ && cameraError && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CameraErrorScreen_default, __spreadValues({}, cameraError))
   ] });
 }
 var CameraCapture_default = CameraCapture;
 
 // src/legacy/step/cameraStep/CameraStep.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function blobToBase64(blob) {
   return new Promise((resolve, _) => {
     const reader = new FileReader();
@@ -6688,7 +6721,7 @@ function CameraStep(props) {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     CameraCapture_default,
     {
       overlay,
@@ -6737,11 +6770,11 @@ function getFirstAction(step) {
 }
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_react_intl32 = require("react-intl");
+var import_react_intl28 = require("react-intl");
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.messages.ts
-var import_react_intl31 = require("react-intl");
-var ExternalConfirmationStep_messages_default = (0, import_react_intl31.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",
@@ -6765,12 +6798,12 @@ var ExternalConfirmationStep_messages_default = (0, import_react_intl31.defineMe
 });
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var noop5 = () => {
 };
 var ExternalConfirmationStep = ({ url, onClose }) => {
-  const { formatMessage } = (0, import_react_intl32.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  const { formatMessage } = (0, import_react_intl28.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     DynamicLayout_default,
     {
       components: [
@@ -6837,9 +6870,9 @@ function getOrigin(url) {
 // src/legacy/dynamicFlow/BackButton.tsx
 var import_components34 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function BackButton({ title, action, onAction }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     "a",
     {
       href: "/",
@@ -6850,8 +6883,8 @@ function BackButton({ title, action, onAction }) {
         onAction(__spreadProps(__spreadValues({}, action), { skipValidation: true }));
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_components34.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "sr-only", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components34.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
       ]
     }
   );
@@ -6859,7 +6892,7 @@ function BackButton({ title, action, onAction }) {
 var BackButton_default = BackButton;
 
 // src/legacy/dynamicFlow/DynamicFlowStep.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function DynamicFlowStep(props) {
   var _a, _b, _c;
   const { step, globalError, onAction } = props;
@@ -6868,20 +6901,20 @@ function DynamicFlowStep(props) {
   const { requiresManualTrigger, dismissConfirmation } = useExternal(externalUrl);
   if (step === void 0) {
     if (globalError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } });
     }
     return null;
   }
   if (externalUrl && requiresManualTrigger) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ExternalConfirmationStep_default, { url: externalUrl, onClose: dismissConfirmation });
   }
   if (isCameraStep(step)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CameraStep_default, __spreadProps(__spreadValues({}, props), { step }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    backButton && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
-    globalError ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    backButton && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BackButton_default, __spreadProps(__spreadValues({}, backButton), { onAction })),
+    globalError ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DynamicAlert_default, { component: { context: "negative", markdown: globalError, margin: "lg" } }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LayoutStep_default, __spreadProps(__spreadValues({}, props), { stepSpecification: step }))
   ] });
 }
 
@@ -7021,7 +7054,7 @@ var isInlineSchema = (schema) => schema !== void 0 && typeof schema === "object"
 // src/legacy/dynamicFlow/utils/useLoader.tsx
 var import_components35 = require("@transferwise/components");
 var import_react42 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
     size: import_components35.Size.EXTRA_LARGE,
@@ -7030,7 +7063,7 @@ function useLoader(loaderConfig, initialState) {
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react42.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
-  const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     import_components35.Loader,
     {
       size: config.size,
@@ -7046,11 +7079,11 @@ var import_react43 = require("react");
 
 // src/common/errorBoundary/ErrorBoundaryAlert.tsx
 var import_components36 = require("@transferwise/components");
-var import_react_intl33 = require("react-intl");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react_intl29 = require("react-intl");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function ErrorBoundaryAlert({ onDismiss }) {
-  const { formatMessage } = (0, import_react_intl33.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  const { formatMessage } = (0, import_react_intl29.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     import_components36.Alert,
     {
       action: {
@@ -7066,7 +7099,7 @@ function ErrorBoundaryAlert({ onDismiss }) {
 }
 
 // src/common/errorBoundary/ErrorBoundary.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var noop6 = () => {
 };
 var ErrorBoundary = class extends import_react43.Component {
@@ -7087,8 +7120,8 @@ var ErrorBoundary = class extends import_react43.Component {
   render() {
     const { children } = this.props;
     const { hasError, isFatalError } = this.state;
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
-      hasError && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+      hasError && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorBoundaryAlert, { onDismiss: this.handleErrorReset }),
       !isFatalError && children
     ] });
   }
@@ -7191,7 +7224,7 @@ var assertResponseIsValid = (response) => {
 var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var noop7 = () => {
 };
 var DynamicFlowComponent = ({
@@ -7207,7 +7240,7 @@ var DynamicFlowComponent = ({
   onEvent = noop7,
   onLog = noop7
 }) => {
-  const { locale } = (0, import_react_intl34.useIntl)();
+  const { locale } = (0, import_react_intl30.useIntl)();
   const {
     formErrors,
     globalError,
@@ -7416,7 +7449,7 @@ var DynamicFlowComponent = ({
       await actionHandler(action);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DynamicFlowProvider, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HttpClientProvider, { httpClient, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LogProvider, { flowId, stepId: (step == null ? void 0 : step.id) || (step == null ? void 0 : step.key), onLog, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(EventsContextProvider, { metadata: analyticsMetadata, onEvent, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicFlowProvider, { loading: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(HttpClientProvider, { httpClient, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FeatureContextProvider, { features, children: loader !== null ? loader : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     DynamicFlowStep,
     {
       step,
@@ -7433,7 +7466,7 @@ var DynamicFlowComponent = ({
   ) }) }) }) }) });
 };
 function DynamicFlow(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorBoundary_default, { onError: props.onError, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DynamicFlowComponent, __spreadValues({}, props)) });
 }
 var DynamicFlow_default = DynamicFlow;
 var combineModels2 = (formModels) => Object.values(formModels).reduce((previous, model) => __spreadValues(__spreadValues({}, previous), model), {});
@@ -7450,19 +7483,19 @@ var shouldTriggerRefresh = (props) => {
 };
 
 // src/legacy/jsonSchemaForm/JsonSchemaForm.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function JsonSchemaForm(props) {
   const schemaProps = __spreadValues({
     model: null,
     errors: null
   }, props);
   const { baseUrl = "", onEvent = noop8, onLog = noop8 } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LogProvider, { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm", onLog, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     EventsContextProvider,
     {
       metadata: { flowId: "JsonSchemaForm", stepId: "JsonSchemaForm" },
       onEvent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(GenericSchema_default, __spreadValues({}, schemaProps)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HttpClientProviderFromBaseUrl, { baseUrl, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(GenericSchema_default, __spreadValues({}, schemaProps)) })
     }
   ) });
 }
@@ -7523,6 +7556,9 @@ var en_default = {
   "dynamicFlows.ArraySchema.maxItemsError": "Please add {maxItems} or fewer.",
   "dynamicFlows.ArraySchema.minItemsError": "Please add at least {minItems}.",
   "dynamicFlows.ArraySchema.removeItem": "Remove",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.action": "Try again",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph": "Please check if it is connected and try again.",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.title": "We can't access your camera",
   "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Camera not supported",
   "dynamicFlows.CameraCapture.NoCameraAccess.action": "Enable camera access",
@@ -7542,6 +7578,7 @@ var en_default = {
   "dynamicFlows.ControlFeedback.patternDate": "Please enter a date in the corrrect format.",
   "dynamicFlows.ControlFeedback.required": "Please fill out this field.",
   "dynamicFlows.ControlFeedback.type": "Incorrect type",
+  "dynamicFlows.DefaultErrorMessages.required": "Please fill out this field.",
   "dynamicFlows.DynamicExternal.retryTitle": "Reopen window",
   "dynamicFlows.DynamicParagraph.copied": "Copied to clipboard",
   "dynamicFlows.DynamicParagraph.copy": "Copy",
@@ -7878,7 +7915,7 @@ var pl_default = {
 // src/i18n/pt.json
 var pt_default = {
   "dynamicFlows.ArraySchema.addItem": "Salvar",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "Adicionar item",
   "dynamicFlows.ArraySchema.editItem": "Salvar",
   "dynamicFlows.ArraySchema.maxItemsError": "Adicione {maxItems} ou menos.",
   "dynamicFlows.ArraySchema.minItemsError": "Adicione pelo menos {minItems}.",
@@ -7891,7 +7928,7 @@ var pt_default = {
   "dynamicFlows.CameraCapture.reviewInstructions": "A sua foto est\xE1 clara, leg\xEDvel e aparece por inteiro?",
   "dynamicFlows.CameraCapture.reviewRetry": "N\xE3o, tentar novamente",
   "dynamicFlows.CameraCapture.reviewSubmit": "Sim, enviar",
-  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Gire o telefone para o modo retrato para tirar uma foto",
   "dynamicFlows.ControlFeedback.maxLength": "Por favor, insira {maxLength} caracteres ou menos.",
   "dynamicFlows.ControlFeedback.maximum": "Por favor, insira um n\xFAmero que seja {maximum} ou menos.",
   "dynamicFlows.ControlFeedback.maximumDate": "Por favor, insira uma data que seja em ou antes de {maximum}.",
@@ -8103,22 +8140,22 @@ var tr_default = {
 // src/i18n/zh_CN.json
 var zh_CN_default = {
   "dynamicFlows.ArraySchema.addItem": "\u4FDD\u5B58",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "\u6DFB\u52A0\u9879\u76EE",
   "dynamicFlows.ArraySchema.editItem": "\u4FDD\u5B58",
-  "dynamicFlows.ArraySchema.maxItemsError": "\u8BF7\u6DFB\u52A0 {maxItems} \u4E2A\u6216\u66F4\u5C11\u3002",
-  "dynamicFlows.ArraySchema.minItemsError": "\u8BF7\u81F3\u5C11\u6DFB\u52A0 {minItems}\u3002",
-  "dynamicFlows.ArraySchema.removeItem": "\u5220\u9664",
-  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
+  "dynamicFlows.ArraySchema.maxItemsError": "\u8BF7\u6DFB\u52A0\u4E0D\u8D85\u8FC7 {maxItems} \u9879\u3002",
+  "dynamicFlows.ArraySchema.minItemsError": "\u8BF7\u81F3\u5C11\u6DFB\u52A0 {minItems} \u9879\u3002",
+  "dynamicFlows.ArraySchema.removeItem": "\u79FB\u9664",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "\u60A8\u76EE\u524D\u4F7F\u7528\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6444\u50CF\u5934\u3002\u8BF7\u5C1D\u8BD5\u5176\u4ED6\u6D4F\u89C8\u5668\u3001\u8BBE\u5907\u6216\u4E0B\u8F7D\u6211\u4EEC\u7684\u5E94\u7528\u3002",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "\u4E0D\u652F\u6301\u6444\u50CF\u5934",
-  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Enable camera access",
-  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Enable camera access in your browser's settings to get going again.",
-  "dynamicFlows.CameraCapture.NoCameraAccess.title": "We can't access your camera",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "\u5141\u8BB8\u8BBF\u95EE\u6444\u50CF\u5934",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "\u5728\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E2D\u542F\u7528\u76F8\u673A\u8BBF\u95EE\u6743\u9650\uFF0C\u518D\u91CD\u65B0\u5C1D\u8BD5\u3002",
+  "dynamicFlows.CameraCapture.NoCameraAccess.title": "\u6211\u4EEC\u65E0\u6CD5\u8BBF\u95EE\u60A8\u7684\u6444\u50CF\u5934",
   "dynamicFlows.CameraCapture.reviewInstructions": "\u60A8\u7684\u56FE\u7247\u662F\u5426\u6E05\u6670\u3001\u53EF\u8BFB\u548C\u5B8C\u6574\uFF1F",
-  "dynamicFlows.CameraCapture.reviewRetry": "\u5426\uFF0C\u91CD\u8BD5",
+  "dynamicFlows.CameraCapture.reviewRetry": "\u5426\uFF0C\u518D\u8BD5\u4E00\u6B21",
   "dynamicFlows.CameraCapture.reviewSubmit": "\u662F\uFF0C\u63D0\u4EA4",
-  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
-  "dynamicFlows.ControlFeedback.maxLength": "\u8BF7\u8F93\u5165 {maxLength} \u4E2A\u6216\u66F4\u5C11\u5B57\u7B26",
-  "dynamicFlows.ControlFeedback.maximum": "\u8BF7\u8F93\u5165\u4E00\u4E2A\u5C0F\u4E8E\u6216\u7B49\u4E8E {maximum} \u7684\u6570\u5B57",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "\u5C06\u624B\u673A\u65CB\u8F6C\u5230\u7EB5\u5411\u89C6\u56FE\u4EE5\u62CD\u7167",
+  "dynamicFlows.ControlFeedback.maxLength": "\u8BF7\u8F93\u5165\u4E0D\u8D85\u8FC7 {maxLength} \u4E2A\u5B57\u7B26\u3002",
+  "dynamicFlows.ControlFeedback.maximum": "\u8BF7\u8F93\u5165\u4E00\u4E2A\u5C0F\u4E8E\u6216\u7B49\u4E8E {maximum} \u7684\u6570\u5B57\u3002",
   "dynamicFlows.ControlFeedback.maximumDate": "\u8BF7\u8F93\u5165 {maximum} \u6216\u4E4B\u524D\u7684\u65E5\u671F",
   "dynamicFlows.ControlFeedback.minLength": "\u8BF7\u81F3\u5C11\u8F93\u5165 {minLength} \u4E2A\u5B57\u7B26",
   "dynamicFlows.ControlFeedback.minimum": "\u8BF7\u8F93\u5165\u4E00\u4E2A\u5927\u4E8E\u6216\u7B49\u4E8E {minimum} \u7684\u6570\u5B57",
@@ -8126,21 +8163,21 @@ var zh_CN_default = {
   "dynamicFlows.ControlFeedback.pattern": "\u8BF7\u4EE5\u6B63\u786E\u7684\u683C\u5F0F\u8F93\u5165",
   "dynamicFlows.ControlFeedback.patternDate": "\u8BF7\u4EE5\u6B63\u786E\u7684\u683C\u5F0F\u8F93\u5165\u65E5\u671F",
   "dynamicFlows.ControlFeedback.required": "\u8BF7\u586B\u5199\u6B64\u5B57\u6BB5\u3002",
-  "dynamicFlows.ControlFeedback.type": "\u7C7B\u578B\u4E0D\u6B63\u786E",
+  "dynamicFlows.ControlFeedback.type": "\u7C7B\u578B\u9519\u8BEF",
   "dynamicFlows.DynamicExternal.retryTitle": "\u91CD\u65B0\u6253\u5F00\u7A97\u53E3",
   "dynamicFlows.DynamicParagraph.copied": "\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
   "dynamicFlows.DynamicParagraph.copy": "\u590D\u5236",
-  "dynamicFlows.ErrorBoundary.errorAlert": "\u7CDF\u7CD5\u3002\u51FA\u95EE\u9898\u4E86\u2026",
+  "dynamicFlows.ErrorBoundary.errorAlert": "\u7CDF\u7CD5\u3002\u51FA\u9519\u4E86\u2026",
   "dynamicFlows.ErrorBoundary.retry": "\u91CD\u8BD5",
   "dynamicFlows.ExternalConfirmation.cancel": "\u53D6\u6D88",
-  "dynamicFlows.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
-  "dynamicFlows.ExternalConfirmation.open": "Open in new tab",
-  "dynamicFlows.ExternalConfirmation.title": "Please confirm",
+  "dynamicFlows.ExternalConfirmation.description": "\u8BF7\u786E\u8BA4\u60A8\u662F\u5426\u8981\u5728\u65B0\u6807\u7B7E\u9875\u4E2D\u6253\u5F00**{origin}**\u3002",
+  "dynamicFlows.ExternalConfirmation.open": "\u5728\u65B0\u6807\u7B7E\u9875\u4E2D\u6253\u5F00",
+  "dynamicFlows.ExternalConfirmation.title": "\u8BF7\u786E\u8BA4",
   "dynamicFlows.Help.ariaLabel": "\u70B9\u51FB\u6B64\u5904\u83B7\u53D6\u66F4\u591A\u4FE1\u606F\u3002",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "\u62B1\u6B49\uFF0C\u8BE5\u6587\u4EF6\u592A\u5927\u3002\u8BF7\u4E0A\u4F20\u4E00\u4E2A\u66F4\u5C0F\u7684\u6587\u4EF6\u3002",
-  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "\u8BF7\u4E0A\u4F20 {maxItems} \u4E2A\u6216\u66F4\u5C11\u7684\u6587\u4EF6\u3002",
-  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u8BF7\u81F3\u5C11\u4E0A\u4F20 {minItems} \u4E2A\u6587\u4EF6\u3002",
-  "dynamicFlows.PersistAsyncSchema.genericError": "\u51FA\u73B0\u4E00\u4E9B\u95EE\u9898\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\uFF01",
+  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "\u8BF7\u4E0A\u4F20\u4E0D\u8D85\u8FC7 {maxItems} \u4E2A\u6587\u4EF6\u3002",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "\u8BF7\u4E0A\u4F20\u81F3\u5C11 {minItems} \u4E2A\u6587\u4EF6\u3002",
+  "dynamicFlows.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5\uFF01",
   "dynamicFlows.ReadOnlySchema.no": "\u5426",
   "dynamicFlows.ReadOnlySchema.yes": "\u662F"
 };