@wise/dynamic-flow-client-internal 4.11.2 → 4.12.0

package/build/i18n/cs.json

@@ -4,13 +4,13 @@
   "df.wise.ArraySchema.editItem": "Uložit",
   "df.wise.ArraySchema.maxItemsError": "Přidejte {maxItems} nebo méně.",
   "df.wise.ArraySchema.minItemsError": "Přidejte alespoň {minItems}.",
-  "df.wise.ArraySchema.removeItem": "Odstranit",
+  "df.wise.ArraySchema.removeItem": "Odebrat",
   "df.wise.ControlFeedback.maxLength": "Zadejte {maxLength} nebo méně znaků.",
   "df.wise.ControlFeedback.maximum": "Zadejte číslo, které je {maximum} nebo menší.",
-  "df.wise.ControlFeedback.maximumDate": "Zadejte datum, které je v den nebo před {maximum}.",
-  "df.wise.ControlFeedback.minLength": "Zadejte alespoň {minLength} znaků.",
-  "df.wise.ControlFeedback.minimum": "Zadejte číslo, které je {minimum} nebo více.",
-  "df.wise.ControlFeedback.minimumDate": "Zadejte datum, které je v den nebo po {minimum}.",
+  "df.wise.ControlFeedback.maximumDate": "Zadejte datum, které je {maximum} nebo předtím.",
+  "df.wise.ControlFeedback.minLength": "Zadejte alespoň následující počet znaků: {minLength}.",
+  "df.wise.ControlFeedback.minimum": "Zadejte číslo, které je {minimum} nebo vyšší.",
+  "df.wise.ControlFeedback.minimumDate": "Zadejte datum, které je {minimum} nebo potom.",
   "df.wise.ControlFeedback.pattern": "Zadejte to prosím ve správném formátu.",
   "df.wise.ControlFeedback.patternDate": "Zadejte prosím datum ve správném formátu.",
   "df.wise.ControlFeedback.required": "Vyplňte prosím toto pole.",
@@ -24,10 +24,10 @@
   "df.wise.ExternalConfirmation.open": "Otevřít v nové kartě",
   "df.wise.ExternalConfirmation.title": "Potvrďte",
   "df.wise.Help.ariaLabel": "Pro více informací klikněte sem.",
-  "df.wise.MultiSelect.summary": "{first} a {count} více",
-  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Pardon, tento soubor je příliš velký. Nahrajte prosím menší soubor.",
+  "df.wise.MultiSelect.summary": "{first} a {count} další(ch)",
+  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Je nám líto, ale tento soubor je příliš velký. Nahrajte prosím menší soubor.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Nahrajte {maxItems} nebo méně souborů.",
-  "df.wise.MultipleFileUploadSchema.minItemsError": "Nahrajte prosím alespoň {minItems} soubor(y).",
-  "df.wise.PersistAsyncSchema.genericError": "Něco se pokazilo. Prosím, zkuste to znovu.",
+  "df.wise.MultipleFileUploadSchema.minItemsError": "Nahrajte prosím alespoň následující počet souborů: {minItems}.",
+  "df.wise.PersistAsyncSchema.genericError": "Něco se pokazilo. Zkuste to prosím znovu.",
   "df.wise.SearchLayout.loading": "Načítání..."
 }

package/build/main.js

@@ -665,7 +665,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_intl16 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
@@ -854,27 +854,39 @@ var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer.tsx
 var import_components5 = require("@transferwise/components");
+var import_react = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonRenderer = {
   canRenderType: "button",
-  render: ({ control, context, disabled, margin, title, size, onClick }) => {
-    const priority = mapControl(control);
-    const type = priority === "tertiary" ? void 0 : mapContext(context);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_components5.Button,
-      {
-        block: true,
-        className: getMargin(margin),
-        disabled,
-        priority,
-        size: mapSize(size),
-        type,
-        onClick,
-        children: title
-      }
-    );
-  }
-};
+  render: ButtonComponent
+};
+function ButtonComponent(props) {
+  const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
+  const [isActive, setActive] = (0, import_react.useState)(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
+  const priority = mapControl(control);
+  const type = priority === "tertiary" ? void 0 : mapContext(context);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_components5.Button,
+    {
+      block: true,
+      className: getMargin(margin),
+      disabled: isLoading ? false : disabled,
+      priority,
+      size: mapSize(size),
+      loading: isLoading,
+      type,
+      onClick: () => {
+        setActive(true);
+        onClick();
+      },
+      onBlur: () => {
+        setActive(false);
+      },
+      children: title
+    }
+  );
+}
 var mapContext = (context) => {
   switch (context) {
     case "neutral":
@@ -1279,7 +1291,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 var import_components12 = require("@transferwise/components");
-var import_react = require("react");
+var import_react2 = require("react");
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1298,8 +1310,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = (0, import_react.useState)("");
-  (0, import_react.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -1571,13 +1583,13 @@ var import_components17 = require("@transferwise/components");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components17.Markdown, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components17.Markdown, { className: "np-text-body-large", config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/ModalRenderer.tsx
 var import_components18 = require("@transferwise/components");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ModalRenderer = {
   canRenderType: "modal",
@@ -1585,7 +1597,7 @@ var ModalRenderer = {
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = (0, import_react2.useState)(false);
+  const [visible, setVisible] = (0, import_react3.useState)(false);
   const { children, title } = content;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components18.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -1605,7 +1617,7 @@ function DFModal({ content, margin, trigger }) {
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
 var import_components19 = require("@transferwise/components");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_intl4 = require("react-intl");
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -1626,7 +1638,7 @@ var MultiSelectInputRenderer = {
 };
 function MultiSelectInputRendererComponent(props) {
   const { formatMessage } = (0, import_react_intl4.useIntl)();
-  const [stagedIndices, setStagedIndices] = (0, import_react3.useState)();
+  const [stagedIndices, setStagedIndices] = (0, import_react4.useState)();
   const {
     id,
     autoComplete,
@@ -1874,9 +1886,9 @@ var import_react_intl6 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components23 = require("@transferwise/components");
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react4.useContext)(import_components23.SnackbarContext);
+  const context = (0, import_react5.useContext)(import_components23.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -1944,7 +1956,7 @@ var ParagraphRenderer_default = ParagraphRenderer;
 var import_components25 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_classnames5 = __toESM(require("classnames"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_intl8 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -1993,7 +2005,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl8.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react5.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react6.useState)(null);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2075,7 +2087,7 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components27 = require("@transferwise/components");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_intl12 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
@@ -2148,7 +2160,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react6.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react7.useState)(false);
   const { formatMessage } = (0, import_react_intl12.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -2220,7 +2232,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 var import_components28 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_intl13 = require("react-intl");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function InlineSearchRenderer({
@@ -2232,7 +2244,7 @@ function InlineSearchRenderer({
   title,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react7.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react8.useState)(false);
   const intl = (0, import_react_intl13.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_components28.Typeahead,
@@ -2351,7 +2363,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components30 = require("@transferwise/components");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -2366,7 +2378,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isValidIndex(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -2479,7 +2491,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_components32 = require("@transferwise/components");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -2494,7 +2506,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3010,12 +3022,12 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const previousThemeHookValue = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react10.useMemo)(() => previousThemeHookValue.theme, []);
-  (0, import_react10.useEffect)(() => {
+  const previousTheme = (0, import_react11.useMemo)(() => previousThemeHookValue.theme, []);
+  (0, import_react11.useEffect)(() => {
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });
@@ -3070,7 +3082,7 @@ var external_confirmation_messages_default = (0, import_react_intl14.defineMessa
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 var import_react_intl15 = require("react-intl");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -3084,7 +3096,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = (0, import_react_intl15.useIntl)();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (url) {
       const w = window.open(url, "_blank");
       if (w) {
@@ -3181,7 +3193,7 @@ var ModalContentRenderer = {
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.11.2";
+var appVersion = "4.12.0";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
@@ -3238,12 +3250,12 @@ function DynamicFlowRevamp(props) {
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react12.useMemo)(
+  const mergedRenderers = (0, import_react13.useMemo)(
     () => [ModalContentRenderer, ...renderers != null ? renderers : [], ...wiseRenderers],
     [renderers]
   );
-  const logEvent = (0, import_react12.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react12.useMemo)(
+  const logEvent = (0, import_react13.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react13.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -3256,7 +3268,7 @@ function DynamicFlowRevamp(props) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
-var DynamicForm = (0, import_react12.forwardRef)(function DynamicForm2(props, ref) {
+var DynamicForm = (0, import_react13.forwardRef)(function DynamicForm2(props, ref) {
   const {
     customFetch = globalThis.fetch,
     renderers,
@@ -3267,12 +3279,12 @@ var DynamicForm = (0, import_react12.forwardRef)(function DynamicForm2(props, re
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react12.useMemo)(
+  const mergedRenderers = (0, import_react13.useMemo)(
     () => [ModalContentRenderer, ...renderers != null ? renderers : [], ...wiseRenderers],
     [renderers]
   );
-  const logEvent = (0, import_react12.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react12.useMemo)(
+  const logEvent = (0, import_react13.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react13.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -3287,11 +3299,16 @@ var DynamicForm = (0, import_react12.forwardRef)(function DynamicForm2(props, re
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl16.useIntl)();
-  return (0, import_react12.useCallback)(
+  return (0, import_react13.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
-      return httpClient(input, __spreadProps(__spreadValues({}, init), { credentials: "include", headers }));
+      return httpClient(input, __spreadProps(__spreadValues({}, init), { credentials: "include", headers })).catch((error) => {
+        if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+          return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+        }
+        throw error;
+      });
     },
     [httpClient, locale]
   );

package/build/main.mjs

@@ -820,27 +820,39 @@ var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer.tsx
 import { Button } from "@transferwise/components";
+import { useState } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var ButtonRenderer = {
   canRenderType: "button",
-  render: ({ control, context, disabled, margin, title, size, onClick }) => {
-    const priority = mapControl(control);
-    const type = priority === "tertiary" ? void 0 : mapContext(context);
-    return /* @__PURE__ */ jsx7(
-      Button,
-      {
-        block: true,
-        className: getMargin(margin),
-        disabled,
-        priority,
-        size: mapSize(size),
-        type,
-        onClick,
-        children: title
-      }
-    );
-  }
-};
+  render: ButtonComponent
+};
+function ButtonComponent(props) {
+  const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
+  const [isActive, setActive] = useState(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
+  const priority = mapControl(control);
+  const type = priority === "tertiary" ? void 0 : mapContext(context);
+  return /* @__PURE__ */ jsx7(
+    Button,
+    {
+      block: true,
+      className: getMargin(margin),
+      disabled: isLoading ? false : disabled,
+      priority,
+      size: mapSize(size),
+      loading: isLoading,
+      type,
+      onClick: () => {
+        setActive(true);
+        onClick();
+      },
+      onBlur: () => {
+        setActive(false);
+      },
+      children: title
+    }
+  );
+}
 var mapContext = (context) => {
   switch (context) {
     case "neutral":
@@ -1245,7 +1257,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1264,7 +1276,7 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = useState("");
+  const [imageSource, setImageSource] = useState2("");
   useEffect(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
@@ -1541,13 +1553,13 @@ import { Markdown as Markdown2 } from "@transferwise/components";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ jsx31("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx31(Markdown2, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ jsx31("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx31(Markdown2, { className: "np-text-body-large", config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/ModalRenderer.tsx
 import { Button as Button2, Modal } from "@transferwise/components";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx32, jsxs as jsxs6 } from "react/jsx-runtime";
 var ModalRenderer = {
   canRenderType: "modal",
@@ -1555,7 +1567,7 @@ var ModalRenderer = {
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = useState2(false);
+  const [visible, setVisible] = useState3(false);
   const { children, title } = content;
   return /* @__PURE__ */ jsxs6("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx32(Button2, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -1575,7 +1587,7 @@ function DFModal({ content, margin, trigger }) {
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { useIntl as useIntl2 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -1596,7 +1608,7 @@ var MultiSelectInputRenderer = {
 };
 function MultiSelectInputRendererComponent(props) {
   const { formatMessage } = useIntl2();
-  const [stagedIndices, setStagedIndices] = useState3();
+  const [stagedIndices, setStagedIndices] = useState4();
   const {
     id,
     autoComplete,
@@ -1914,7 +1926,7 @@ var ParagraphRenderer_default = ParagraphRenderer;
 import { Button as Button4, Header as Header4, InlineAlert as InlineAlert2, Modal as Modal2, NavigationOption as NavigationOption2 } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
 import classNames5 from "classnames";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { useIntl as useIntl4 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -1963,7 +1975,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = useIntl4();
-  const [openModalType, setOpenModalType] = useState4(null);
+  const [openModalType, setOpenModalType] = useState5(null);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2045,7 +2057,7 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input4, Markdown as Markdown3, NavigationOption as NavigationOption3, NavigationOptionsList as NavigationOptionsList2 } from "@transferwise/components";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { useIntl as useIntl6 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
@@ -2118,7 +2130,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState5(false);
+  const [hasSearched, setHasSearched] = useState6(false);
   const { formatMessage } = useIntl6();
   return /* @__PURE__ */ jsxs11("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx40(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx40(
@@ -2190,7 +2202,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown4, Typeahead } from "@transferwise/components";
 import { Search } from "@transferwise/icons";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 import { jsx as jsx41 } from "react/jsx-runtime";
 function InlineSearchRenderer({
@@ -2202,7 +2214,7 @@ function InlineSearchRenderer({
   title,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState6(false);
+  const [hasSearched, setHasSearched] = useState7(false);
   const intl = useIntl7();
   return /* @__PURE__ */ jsx41("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx41(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx41(
     Typeahead,
@@ -3157,7 +3169,7 @@ var ModalContentRenderer = {
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.11.2";
+var appVersion = "4.12.0";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
@@ -3267,7 +3279,12 @@ var useWiseHttpClient = (httpClient) => {
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
-      return httpClient(input, __spreadProps(__spreadValues({}, init), { credentials: "include", headers }));
+      return httpClient(input, __spreadProps(__spreadValues({}, init), { credentials: "include", headers })).catch((error) => {
+        if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+          return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+        }
+        throw error;
+      });
     },
     [httpClient, locale]
   );

package/build/types/stories/SCAIntegration.story.d.ts

@@ -0,0 +1,12 @@
+import { DynamicFlowRevamp } from '../index';
+declare const _default: {
+    component: typeof DynamicFlowRevamp;
+    title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare function SCAIntegration(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.11.2",
+  "version": "4.12.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -30,14 +30,14 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.26.10",
-    "@babel/plugin-syntax-flow": "7.26.0",
-    "@babel/plugin-transform-react-jsx": "7.25.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
-    "@babel/preset-typescript": "7.27.0",
+    "@babel/core": "7.27.1",
+    "@babel/plugin-syntax-flow": "7.27.1",
+    "@babel/plugin-transform-react-jsx": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@babel/preset-typescript": "7.27.1",
     "@chromatic-com/storybook": "3.2.6",
-    "@formatjs/cli": "^6.6.4",
+    "@formatjs/cli": "^6.7.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-actions": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -51,18 +51,18 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.97.0",
+    "@transferwise/components": "46.97.2",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.21.0",
-    "@transferwise/neptune-css": "14.24.3",
+    "@transferwise/neptune-css": "14.24.4",
     "@types/jest": "29.5.14",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "@wise/art": "2.20.1",
+    "@types/react": "18.3.21",
+    "@types/react-dom": "18.3.7",
+    "@wise/art": "2.20.2",
     "@wise/components-theming": "^1.6.2",
     "babel-jest": "29.7.0",
     "currency-flags": "4.0.7",
-    "esbuild": "0.25.3",
+    "esbuild": "0.25.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -79,12 +79,12 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.19.3",
+    "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "webpack": "5.99.7",
-    "@wise/dynamic-flow-renderers": "0.0.0",
+    "webpack": "5.99.8",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "3.3.1"
+    "@wise/dynamic-flow-types": "3.3.2",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -99,8 +99,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.5.2",
-    "@wise/dynamic-flow-types": "3.3.1"
+    "@wise/dynamic-flow-client": "4.5.3",
+    "@wise/dynamic-flow-types": "3.3.2"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",

package/build/types/dynamicFlow/DynamicFlow.test.d.ts

@@ -1 +0,0 @@
-export {};