@wise/dynamic-flow-client 5.14.1 → 5.15.0

package/build/main.js

@@ -59,6 +59,7 @@ __export(index_exports, {
   DynamicFlow: () => DynamicFlowCore,
   eventNames: () => eventNames,
   findRendererPropsByType: () => findRendererPropsByType,
+  getDynamicSubflowRenderer: () => getDynamicSubflowRenderer,
   makeHttpClient: () => makeHttpClient,
   makeRequestCache: () => makeRequestCache,
   translations: () => i18n_default,
@@ -855,7 +856,8 @@ var getChildren = (node) => {
     case "input-text":
     case "input-upload":
     case "external-confirmation":
-    case "subflow":
+    case "subflow-dynamic":
+    case "subflow-native":
     case "upsell":
       return [];
   }
@@ -941,6 +943,47 @@ var ErrorBoundary = class extends import_react.Component {
 };
 var ErrorBoundary_default = ErrorBoundary;
 
+// src/common/capabilities/getHttpClientWithCapabilities.ts
+var getHttpClientWithCapabilities = (httpClient, nativeSubflowHandlers = []) => {
+  const headers = getCapabilitiesHeader(nativeSubflowHandlers);
+  return async (input, init) => {
+    return headers && isRelativeOrSameOrigin(input) ? httpClient(input, mergeRequestInit(init != null ? init : {}, { headers })) : httpClient(input, init);
+  };
+};
+var getCapabilitiesHeader = (nativeSubflowHandlers) => {
+  const capabilities = nativeSubflowHandlers.map(getCapability);
+  return capabilities.length > 0 ? { "X-DF-Native-Capabilities": capabilities.join(";") } : null;
+};
+var getCapability = (handler) => {
+  return `${encode(handler.id)}${getCapabilityComments(handler)}`;
+};
+var getCapabilityComments = (handler) => {
+  var _a, _b;
+  const comments = Object.entries((_b = (_a = handler.getCapabilityComments) == null ? void 0 : _a.call(handler)) != null ? _b : {}).map(([key, value]) => {
+    return `${encode(key)}:${encode(value)}`;
+  });
+  return comments.length > 0 ? `(${comments.join(",")})` : "";
+};
+var isRelativeOrSameOrigin = (input) => {
+  var _a;
+  if (typeof input === "string") {
+    return isRelativePath2(input) || input.startsWith(`${(_a = window == null ? void 0 : window.location) == null ? void 0 : _a.origin}/`);
+  }
+  if (input instanceof Request) {
+    return isRelativeOrSameOrigin(input.url);
+  }
+  if (input instanceof URL) {
+    return isRelativeOrSameOrigin(input.toString());
+  }
+  return false;
+};
+var isRelativePath2 = (url = "") => {
+  return !["https://", "http://", "data:"].some(
+    (prefix) => url.startsWith(prefix) && url.length > prefix.length
+  );
+};
+var encode = (value) => encodeURIComponent(value).replace(/\(/g, "%28").replace(/\)/g, "%29");
+
 // src/domain/components/utils/component-utils.ts
 var getInputUpdateFunction = (onComponentUpdate) => {
   return (component, updateFn) => {
@@ -1029,6 +1072,9 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
       });
     },
     closeSubflow() {
+      if (!this.subflow) {
+        return;
+      }
       this._update((draft) => {
         draft.subflow = null;
       });
@@ -1119,24 +1165,6 @@ var shouldScrollOnStepUpdate = (newStep, currentStep) => {
   return newStep.error != null && newStep.error !== currentStep.error;
 };
 
-// src/domain/components/utils/getRandomId.ts
-var getRandomId = () => Math.random().toString(36).substring(2);
-
-// src/domain/components/SubflowDomainComponent.ts
-var createSubflowDomainComponent = (subflowProps, onComponentUpdate) => {
-  const update = getInputUpdateFunction(onComponentUpdate);
-  const subflowComponent = __spreadProps(__spreadValues({
-    uid: `subflow-${getRandomId()}`,
-    type: "subflow",
-    kind: "layout"
-  }, subflowProps), {
-    _update(updateFn) {
-      update(this, updateFn);
-    }
-  });
-  return subflowComponent;
-};
-
 // src/domain/features/prefetch/request-cache.ts
 var makeRequestCacheWithParent = (parent) => {
   const map = /* @__PURE__ */ new Map();
@@ -1209,6 +1237,9 @@ var createModalContentComponent = (modalProps, onComponentUpdate) => {
   return modalContentComponent;
 };
 
+// src/domain/components/utils/getRandomId.ts
+var getRandomId = () => Math.random().toString(36).substring(2);
+
 // src/domain/components/AlertComponent.ts
 var createAlertComponent = (alertProps) => __spreadValues({
   type: "alert",
@@ -2695,120 +2726,461 @@ var getStepPolling = ({
   return { start, stop };
 };
 
-// src/domain/features/refreshAfter/getStepRefreshAfter.ts
-var ONE_SECOND = 1e3;
-var getStepRefreshAfter = ({
-  refreshAfter,
-  logEvent,
-  onBehavior
-}) => {
-  let timeout = null;
-  const targetTime = new Date(refreshAfter).getTime();
-  if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
-    throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
-  }
-  const start = () => {
-    const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
-    timeout = setTimeout(() => {
-      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
-    }, timeLeft);
-  };
-  return {
-    start,
-    stop: () => {
-      if (!timeout) {
-        logEvent("warning", "Attempted to stop refreshAfter but it was not started");
-        return;
-      }
-      clearTimeout(timeout);
-    }
-  };
+// src/controller/getErrorMessage.ts
+var getErrorMessage = (error) => {
+  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
 };
 
-// src/domain/components/utils/isOrWasValid.ts
-var isOrWasValid = (getErrors, previous, current) => {
-  const wasValid = getErrors(previous).length === 0 && previous !== null;
-  const isValid = getErrors(current).length === 0;
-  return wasValid || isValid;
+// src/controller/response-utils.ts
+var import_spec = require("@wise/dynamic-flow-types/spec");
+var parseResponseBodyAsJsonElement = async (response) => {
+  assertResponseIsValid(response);
+  try {
+    return await response.json();
+  } catch (e) {
+    return null;
+  }
 };
-
-// src/domain/features/schema-on-change/getDebouncedSchemaOnChange.ts
-var debounceDelay = 1e3;
-var getDebouncedSchemaOnChange = (onChange, getValidationErrors) => {
-  if (!onChange) {
-    return void 0;
+var parseResponseBodyAsText = async (response) => {
+  try {
+    return await response.text();
+  } catch (e) {
+    return null;
   }
-  const performOnChange = onChange.behaviorType === "refresh" ? getSelectiveDebouncedSchemaOnChange(onChange, getValidationErrors) : debounce(onChange, debounceDelay);
-  return performOnChange;
 };
-var getSelectiveDebouncedSchemaOnChange = (onChange, getValidationErrors) => {
-  let behaviorControl = { abort: () => {
-  } };
-  let timeoutId = null;
-  const clearTimer = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = null;
-  };
-  const flush = () => {
-    if (timeoutId !== null) {
-      void onChange().then((bc) => {
-        behaviorControl = bc;
-      });
-      clearTimer();
-    }
-  };
-  const debouncedOnChange = (prevValue, updatedValue) => {
-    var _a;
-    const valid = isOrWasValid(getValidationErrors, prevValue, updatedValue);
-    const isPending = timeoutId !== null;
-    if (valid || isPending) {
-      (_a = behaviorControl.abort) == null ? void 0 : _a.call(behaviorControl);
-      clearTimer();
-      timeoutId = setTimeout(() => flush(), debounceDelay);
+function isActionResponseBody(body) {
+  return (0, import_spec.validateActionResponse)(body).valid;
+}
+function assertActionResponseBody(body) {
+  if (!isObject(body) || !isObject(body.action)) {
+    throw new Error(
+      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
+    );
+  }
+}
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
     }
-  };
-  debouncedOnChange.cancel = () => {
-    var _a;
-    clearTimer();
-    (_a = behaviorControl.abort) == null ? void 0 : _a.call(behaviorControl);
-  };
-  debouncedOnChange.flush = () => {
-    flush();
-  };
-  return debouncedOnChange;
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
+function assertSubflowResponseBody(body) {
+  const { valid } = (0, import_spec.validateSubflowResponse)(body);
+  if (valid) {
+    return;
+  }
+  throw new Error("Incorrect response body in subflow response.");
+}
+function isErrorResponseBody(body) {
+  return Boolean(
+    isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
+  );
+}
+function assertStepResponseBody(body) {
+  if (!isObject(body)) {
+    throw new Error("Incorrect response body in step response. Expected an object.");
+  }
+}
+var assertResponseIsValid = (response) => {
+  if (!isResponse(response)) {
+    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
+  }
+  if (response.bodyUsed) {
+    throw new Error(
+      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
+    );
+  }
 };
+var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
-// src/domain/features/validation/validation-functions.ts
-var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
-var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
-
-// src/domain/features/utils/http-utils.ts
-function constructPayload({
-  value,
-  signal,
-  requestConfig
-}) {
-  const isFile2 = value instanceof File;
-  const { method, param } = requestConfig;
-  const body = isFile2 ? wrapInFormData(param, value) : JSON.stringify({ [param]: value });
-  const headers = __spreadValues({}, !isFile2 && { "Content-Type": "application/json" });
+// src/controller/handleErrorResponse.ts
+var handleErrorResponse = async (response, actionId, trackEvent) => {
+  const body = await parseResponseBodyAsJsonElement(response.clone());
+  if (isErrorResponseBody(body)) {
+    const refreshUrl = body.refreshUrl || body.refreshFormUrl;
+    const { error, validation, analytics } = body;
+    trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
+    const errors = { error, validation };
+    return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
+      type: "error",
+      body: { errors, analytics },
+      httpError: { statusCode: response.status }
+    };
+  }
+  trackEvent("Action Failed", { actionId, statusCode: response.status });
+  const errorMessage = await parseResponseBodyAsText(response);
   return {
-    method,
-    headers,
-    body,
-    signal
+    type: "error",
+    httpError: {
+      message: errorMessage || void 0,
+      statusCode: response.status
+    }
   };
-}
-var wrapInFormData = (key, file) => {
-  const formData = new FormData();
-  formData.append(key, file);
-  return formData;
 };
-var abortAndResetController = (abortController) => {
-  abortController.abort();
-  return new AbortController();
+
+// src/controller/getResponseType.ts
+var responseTypes = ["step", "action", "exit", "modal", "subflow", "no-op"];
+var getResponseType = (headers, body) => {
+  const headerResponseType = getResponseTypeFromHeader(headers);
+  if (headerResponseType) {
+    return headerResponseType;
+  }
+  if (isObject(body) && body.action) {
+    return "action";
+  }
+  return "step";
+};
+var getResponseTypeFromHeader = (headers) => {
+  if (headers == null ? void 0 : headers.has("X-Df-Response-Type")) {
+    const type = headers.get("X-Df-Response-Type");
+    assertDFResponseType(type);
+    return type;
+  }
+  if (headers == null ? void 0 : headers.has("X-Df-Exit")) {
+    return "exit";
+  }
+  return void 0;
+};
+function assertDFResponseType(type) {
+  if (!responseTypes.includes(type)) {
+    throw new Error(
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'."
+    );
+  }
+}
+
+// src/controller/makeSafeHttpClient.ts
+var makeSafeHttpClient = (httpClient) => async (...props) => {
+  try {
+    return await httpClient(...props);
+  } catch (e) {
+    return null;
+  }
+};
+
+// src/controller/executeRequest.ts
+var executeRequest = async (props) => {
+  const { exit, request, requestCache, httpClient, trackEvent, logEvent } = props;
+  const { url, method, body } = request;
+  const response = await getCachedOrFetch(
+    [
+      url,
+      {
+        method,
+        body: body ? JSON.stringify(body) : void 0,
+        headers: { "Content-Type": "application/json" }
+      }
+    ],
+    requestCache,
+    httpClient
+  );
+  if (!response) {
+    const extra = { errorMessage: "Network Error" };
+    trackEvent("Request Failed", extra);
+    logEvent("error", "Dynamic Flow - Request Failed Unexpectedly", extra);
+    return { type: "error" };
+  }
+  if (!response.ok) {
+    return handleErrorResponse(response, void 0, trackEvent);
+  }
+  const responseBody = await parseResponseBodyAsJsonElement(response);
+  const responseType = getResponseType(response.headers, responseBody);
+  if (exit) {
+    return { type: "complete", result: responseBody };
+  }
+  switch (responseType) {
+    case "step": {
+      const etag = response.headers.get("etag") || null;
+      assertStepResponseBody(responseBody);
+      return { type: "replace-step", step: responseBody, etag };
+    }
+    case "exit": {
+      return { type: "complete", result: responseBody };
+    }
+    case "action": {
+      assertActionResponseBody(responseBody);
+      return {
+        type: "behavior",
+        behavior: {
+          type: "action",
+          action: responseBody.action
+        }
+      };
+    }
+    case "subflow": {
+      assertSubflowResponseBody(responseBody);
+      return {
+        type: "behavior",
+        behavior: __spreadProps(__spreadValues({}, responseBody), {
+          type: "subflow",
+          onCompletion: responseBody.onCompletion ? normaliseBehavior(responseBody.onCompletion, []) : void 0,
+          onError: responseBody.onError ? normaliseBehavior(responseBody.onError, []) : void 0
+        })
+      };
+    }
+    case "modal": {
+      assertModalResponseBody(responseBody);
+      return { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) };
+    }
+    case "no-op": {
+      return { type: "no-op" };
+    }
+    default: {
+      throw new Error(`Unsupported response type: ${String(responseType)}`);
+    }
+  }
+};
+var getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
+  const cachedPromise = requestCache.get(requestParams);
+  if (cachedPromise) {
+    const cachedResponse = await cachedPromise;
+    if (cachedResponse == null ? void 0 : cachedResponse.ok) {
+      return cachedResponse;
+    }
+  }
+  return makeSafeHttpClient(httpClient)(...requestParams);
+};
+
+// src/controller/executeSubmission.ts
+var executeSubmission = async (props) => {
+  const { httpClient, requestCache, trackEvent, logEvent } = props;
+  const triggerAction = async (action, model, isInitial) => {
+    var _a, _b;
+    const { exit, url, result = null, id: actionId } = action;
+    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
+    };
+    trackSubmissionEvent("Action Triggered", { actionId });
+    if (exit && !url) {
+      trackSubmissionEvent("Action Succeeded", { actionId });
+      return { type: "complete", result };
+    }
+    try {
+      const command = await executeRequest({
+        exit,
+        request: createRequestFromAction(action, model),
+        requestCache,
+        httpClient,
+        trackEvent: (name, properties) => {
+          trackSubmissionEvent(name, __spreadProps(__spreadValues({}, properties), { actionId }));
+        },
+        logEvent
+      });
+      switch (command.type) {
+        case "error": {
+          trackSubmissionEvent("Action Failed", __spreadValues({
+            actionId,
+            statusCode: (_a = command.httpError) == null ? void 0 : _a.statusCode
+          }, (_b = command.body) == null ? void 0 : _b.analytics));
+          return command;
+        }
+        case "behavior": {
+          if (command.behavior.type === "action") {
+            trackSubmissionEvent("Action Succeeded", { actionId });
+            return await executeSubmission({
+              action: command.behavior.action,
+              isInitial: false,
+              model: null,
+              requestCache,
+              httpClient,
+              trackEvent,
+              logEvent
+            });
+          }
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return command;
+        }
+        case "complete": {
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return __spreadProps(__spreadValues({}, command), { result: recursiveMerge(command.result, result) });
+        }
+        case "no-op":
+        default: {
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return command;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      trackSubmissionEvent("Action Failed", { actionId, errorMessage });
+      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", { actionId, errorMessage });
+      throw error;
+    }
+  };
+  return triggerAction(props.action, props.model, props.isInitial);
+};
+var createRequestFromAction = (action, model) => {
+  var _a, _b, _c;
+  return __spreadProps(__spreadValues({}, action), {
+    url: (_a = action.url) != null ? _a : "",
+    method: (_b = action.method) != null ? _b : "POST",
+    body: action.method === "GET" ? void 0 : recursiveMerge(model, (_c = action.data) != null ? _c : null)
+  });
+};
+
+// src/domain/features/prefetch/getStepPrefetch.ts
+var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
+  const requestCache = makeRequestCacheWithParent(flowRequestCache);
+  const keys = /* @__PURE__ */ new Set();
+  const start = (model) => {
+    if (keys.size > 0) {
+      return;
+    }
+    submissionBehaviors.forEach((behavior) => {
+      const request = getPrefetchableRequest(behavior, model);
+      if (request) {
+        const requestParams = [
+          request.url,
+          {
+            body: JSON.stringify(request.body),
+            method: request.method,
+            headers: { "Content-Type": "application/json" }
+          }
+        ];
+        try {
+          const key = makeRequestCacheKey(requestParams);
+          if (keys.has(key)) {
+            return;
+          }
+          const responsePromise = httpClient(...requestParams).catch(() => null);
+          requestCache.set(requestParams, responsePromise);
+          keys.add(key);
+        } catch (e) {
+        }
+      }
+    });
+  };
+  const stop = () => {
+  };
+  return { requestCache, start, stop };
+};
+var getPrefetchableRequest = (behavior, model) => {
+  if (behavior.type === "action" && behavior.action.prefetch) {
+    return createRequestFromAction(behavior.action, model);
+  }
+  if (behavior.type === "subflow" && behavior.launchConfig.type === "dynamic" && behavior.launchConfig.request.prefetch) {
+    return behavior.launchConfig.request;
+  }
+  return null;
+};
+
+// src/domain/features/refreshAfter/getStepRefreshAfter.ts
+var ONE_SECOND = 1e3;
+var getStepRefreshAfter = ({
+  refreshAfter,
+  logEvent,
+  onBehavior
+}) => {
+  let timeout = null;
+  const targetTime = new Date(refreshAfter).getTime();
+  if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
+    throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
+  }
+  const start = () => {
+    const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
+    timeout = setTimeout(() => {
+      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
+    }, timeLeft);
+  };
+  return {
+    start,
+    stop: () => {
+      if (!timeout) {
+        logEvent("warning", "Attempted to stop refreshAfter but it was not started");
+        return;
+      }
+      clearTimeout(timeout);
+    }
+  };
+};
+
+// src/domain/components/utils/isOrWasValid.ts
+var isOrWasValid = (getErrors, previous, current) => {
+  const wasValid = getErrors(previous).length === 0 && previous !== null;
+  const isValid = getErrors(current).length === 0;
+  return wasValid || isValid;
+};
+
+// src/domain/features/schema-on-change/getDebouncedSchemaOnChange.ts
+var debounceDelay = 1e3;
+var getDebouncedSchemaOnChange = (onChange, getValidationErrors) => {
+  if (!onChange) {
+    return void 0;
+  }
+  const performOnChange = onChange.behaviorType === "refresh" ? getSelectiveDebouncedSchemaOnChange(onChange, getValidationErrors) : debounce(onChange, debounceDelay);
+  return performOnChange;
+};
+var getSelectiveDebouncedSchemaOnChange = (onChange, getValidationErrors) => {
+  let behaviorControl = { abort: () => {
+  } };
+  let timeoutId = null;
+  const clearTimer = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = null;
+  };
+  const flush = () => {
+    if (timeoutId !== null) {
+      void onChange().then((bc) => {
+        behaviorControl = bc;
+      });
+      clearTimer();
+    }
+  };
+  const debouncedOnChange = (prevValue, updatedValue) => {
+    var _a;
+    const valid = isOrWasValid(getValidationErrors, prevValue, updatedValue);
+    const isPending = timeoutId !== null;
+    if (valid || isPending) {
+      (_a = behaviorControl.abort) == null ? void 0 : _a.call(behaviorControl);
+      clearTimer();
+      timeoutId = setTimeout(() => flush(), debounceDelay);
+    }
+  };
+  debouncedOnChange.cancel = () => {
+    var _a;
+    clearTimer();
+    (_a = behaviorControl.abort) == null ? void 0 : _a.call(behaviorControl);
+  };
+  debouncedOnChange.flush = () => {
+    flush();
+  };
+  return debouncedOnChange;
+};
+
+// src/domain/features/validation/validation-functions.ts
+var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
+var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
+
+// src/domain/features/utils/http-utils.ts
+function constructPayload({
+  value,
+  signal,
+  requestConfig
+}) {
+  const isFile2 = value instanceof File;
+  const { method, param } = requestConfig;
+  const body = isFile2 ? wrapInFormData(param, value) : JSON.stringify({ [param]: value });
+  const headers = __spreadValues({}, !isFile2 && { "Content-Type": "application/json" });
+  return {
+    method,
+    headers,
+    body,
+    signal
+  };
+}
+var wrapInFormData = (key, file) => {
+  const formData = new FormData();
+  formData.append(key, file);
+  return formData;
+};
+var abortAndResetController = (abortController) => {
+  abortController.abort();
+  return new AbortController();
 };
 
 // src/domain/features/validationAsync/getComponentValidationAsync.ts
@@ -3199,75 +3571,9 @@ var autocompleteTokenMap = {
 // src/domain/features/validationAsync/getInitialValidationAsyncState.ts
 var getInitialValidationAsyncState = () => ({
   abortController: new AbortController(),
-  lastSubmitted: null,
-  messages: {}
-});
-
-// src/controller/response-utils.ts
-var import_spec = require("@wise/dynamic-flow-types/spec");
-var parseResponseBodyAsJsonElement = async (response) => {
-  assertResponseIsValid(response);
-  try {
-    return await response.json();
-  } catch (e) {
-    return null;
-  }
-};
-var parseResponseBodyAsText = async (response) => {
-  try {
-    return await response.text();
-  } catch (e) {
-    return null;
-  }
-};
-function isActionResponseBody(body) {
-  return (0, import_spec.validateActionResponse)(body).valid;
-}
-function assertActionResponseBody(body) {
-  if (!isObject(body) || !isObject(body.action)) {
-    throw new Error(
-      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
-    );
-  }
-}
-function assertModalResponseBody(body) {
-  if (isObject(body)) {
-    if ("content" in body && isArray(body.content)) {
-      return;
-    }
-  }
-  throw new Error(
-    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
-  );
-}
-function assertSubflowResponseBody(body) {
-  const { valid } = (0, import_spec.validateSubflowResponse)(body);
-  if (valid) {
-    return;
-  }
-  throw new Error("Incorrect response body in subflow response.");
-}
-function isErrorResponseBody(body) {
-  return Boolean(
-    isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
-  );
-}
-function assertStepResponseBody(body) {
-  if (!isObject(body)) {
-    throw new Error("Incorrect response body in step response. Expected an object.");
-  }
-}
-var assertResponseIsValid = (response) => {
-  if (!isResponse(response)) {
-    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
-  }
-  if (response.bodyUsed) {
-    throw new Error(
-      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
-    );
-  }
-};
-var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
+  lastSubmitted: null,
+  messages: {}
+});
 
 // src/domain/features/utils/response-utils.ts
 var getAnalyticsFromErrorResponse = (json) => {
@@ -5868,381 +6174,117 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
   if (isNumberSchema(schema)) {
     return numberSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
-  if (isStringSchema(schema)) {
-    return stringSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isArraySchema(schema)) {
-    return arraySchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isBlobSchema(schema)) {
-    if (!schemaMapperProps.onPersistAsync) {
-      throw new Error(
-        "Blob schemas can only be used as the schema of a persist async configuration."
-      );
-    }
-    return blobSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  throw new Error("Not yet supported");
-};
-
-// src/domain/mappers/mapStepSchemas.ts
-var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
-  return step.schemas.map(
-    (schema, i) => {
-      var _a, _b;
-      return mapSchemaToComponent(
-        {
-          uid: `${uid}.schemas-${i}.${schema.$id}`,
-          schemaId: schema.$id,
-          schema,
-          model: (_a = step.model) != null ? _a : null,
-          localValue: stepLocalValue,
-          validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
-          required: true
-        },
-        mapperProps
-      );
-    }
-  );
-};
-
-// src/domain/mappers/mapToolbarToComponent.ts
-var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
-  if (!toolbar) {
-    return void 0;
-  }
-  const { onBehavior } = mapperProps;
-  return __spreadProps(__spreadValues({}, toolbar), {
-    type: "toolbar",
-    uid: `${uid}.toolbar`,
-    tags: toolbar.tags,
-    items: toolbar.items.map((item) => {
-      const context = item.context ? mapLegacyContext(item.context) : void 0;
-      const behavior = getDomainLayerBehavior(
-        { behavior: item.behavior },
-        [],
-        mapperProps.registerSubmissionBehavior
-      );
-      return __spreadProps(__spreadValues({}, item), {
-        context: context ? mapLegacyContext(context) : void 0,
-        disabled: !!item.disabled,
-        tags: item.tags,
-        onClick: () => {
-          void onBehavior(behavior);
-        }
-      });
-    })
-  });
-};
-
-// src/domain/mappers/utils/groupLayoutByPinned.ts
-var groupLayoutByPinned = (layouts) => {
-  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
-};
-var groupLayout = (acc, layout) => {
-  if (layout.type === "button" && layout.pinOrder !== void 0) {
-    return {
-      pinned: [...acc.pinned, layout],
-      nonPinned: acc.nonPinned
-    };
-  }
-  if (hasColumns(layout)) {
-    const leftChildren = groupLayoutByPinned(layout.left);
-    const rightChildren = groupLayoutByPinned(layout.right);
-    return {
-      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
-      nonPinned: [
-        ...acc.nonPinned,
-        __spreadProps(__spreadValues({}, layout), {
-          left: leftChildren.nonPinned,
-          right: rightChildren.nonPinned
-        })
-      ]
-    };
-  }
-  if (hasChildren(layout)) {
-    const childComponents = groupLayoutByPinned(layout.components);
-    return {
-      pinned: [...acc.pinned, ...childComponents.pinned],
-      nonPinned: [
-        ...acc.nonPinned,
-        __spreadProps(__spreadValues({}, layout), {
-          components: childComponents.nonPinned
-        })
-      ]
-    };
-  }
-  return {
-    pinned: [...acc.pinned],
-    nonPinned: [...acc.nonPinned, layout]
-  };
-};
-var hasChildren = (component) => "components" in component;
-var hasColumns = (component) => "right" in component && "left" in component;
-
-// src/controller/getErrorMessage.ts
-var getErrorMessage = (error) => {
-  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
-};
-
-// src/controller/handleErrorResponse.ts
-var handleErrorResponse = async (response, actionId, trackEvent) => {
-  const body = await parseResponseBodyAsJsonElement(response.clone());
-  if (isErrorResponseBody(body)) {
-    const refreshUrl = body.refreshUrl || body.refreshFormUrl;
-    const { error, validation, analytics } = body;
-    trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
-    const errors = { error, validation };
-    return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
-      type: "error",
-      body: { errors, analytics },
-      httpError: { statusCode: response.status }
-    };
-  }
-  trackEvent("Action Failed", { actionId, statusCode: response.status });
-  const errorMessage = await parseResponseBodyAsText(response);
-  return {
-    type: "error",
-    httpError: {
-      message: errorMessage || void 0,
-      statusCode: response.status
-    }
-  };
-};
-
-// src/controller/getResponseType.ts
-var responseTypes = ["step", "action", "exit", "modal", "subflow", "no-op"];
-var getResponseType = (headers, body) => {
-  const headerResponseType = getResponseTypeFromHeader(headers);
-  if (headerResponseType) {
-    return headerResponseType;
-  }
-  if (isObject(body) && body.action) {
-    return "action";
-  }
-  return "step";
-};
-var getResponseTypeFromHeader = (headers) => {
-  if (headers == null ? void 0 : headers.has("X-Df-Response-Type")) {
-    const type = headers.get("X-Df-Response-Type");
-    assertDFResponseType(type);
-    return type;
-  }
-  if (headers == null ? void 0 : headers.has("X-Df-Exit")) {
-    return "exit";
-  }
-  return void 0;
-};
-function assertDFResponseType(type) {
-  if (!responseTypes.includes(type)) {
-    throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'modal', 'subflow', 'no-op'."
-    );
-  }
-}
-
-// src/controller/makeSafeHttpClient.ts
-var makeSafeHttpClient = (httpClient) => async (...props) => {
-  try {
-    return await httpClient(...props);
-  } catch (e) {
-    return null;
-  }
-};
-
-// src/controller/executeRequest.ts
-var executeRequest = async (props) => {
-  const { exit, request, requestCache, httpClient, trackEvent, logEvent } = props;
-  const { url, method, body } = request;
-  const response = await getCachedOrFetch(
-    [
-      url,
-      {
-        method,
-        body: body ? JSON.stringify(body) : void 0,
-        headers: { "Content-Type": "application/json" }
-      }
-    ],
-    requestCache,
-    httpClient
-  );
-  if (!response) {
-    const extra = { errorMessage: "Network Error" };
-    trackEvent("Request Failed", extra);
-    logEvent("error", "Dynamic Flow - Request Failed Unexpectedly", extra);
-    return { type: "error" };
-  }
-  if (!response.ok) {
-    return handleErrorResponse(response, void 0, trackEvent);
-  }
-  const responseBody = await parseResponseBodyAsJsonElement(response);
-  const responseType = getResponseType(response.headers, responseBody);
-  if (exit) {
-    return { type: "complete", result: responseBody };
-  }
-  switch (responseType) {
-    case "step": {
-      const etag = response.headers.get("etag") || null;
-      assertStepResponseBody(responseBody);
-      return { type: "replace-step", step: responseBody, etag };
-    }
-    case "exit": {
-      return { type: "complete", result: responseBody };
-    }
-    case "action": {
-      assertActionResponseBody(responseBody);
-      return {
-        type: "behavior",
-        behavior: {
-          type: "action",
-          action: responseBody.action
-        }
-      };
-    }
-    case "subflow": {
-      assertSubflowResponseBody(responseBody);
-      return {
-        type: "behavior",
-        behavior: __spreadProps(__spreadValues({}, responseBody), {
-          type: "subflow",
-          onCompletion: responseBody.onCompletion ? normaliseBehavior(responseBody.onCompletion, []) : void 0,
-          onError: responseBody.onError ? normaliseBehavior(responseBody.onError, []) : void 0
-        })
-      };
-    }
-    case "modal": {
-      assertModalResponseBody(responseBody);
-      return { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) };
-    }
-    case "no-op": {
-      return { type: "no-op" };
-    }
-    default: {
-      throw new Error(`Unsupported response type: ${String(responseType)}`);
-    }
-  }
-};
-var getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
-  const cachedPromise = requestCache.get(requestParams);
-  if (cachedPromise) {
-    const cachedResponse = await cachedPromise;
-    if (cachedResponse == null ? void 0 : cachedResponse.ok) {
-      return cachedResponse;
+  if (isStringSchema(schema)) {
+    return stringSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isArraySchema(schema)) {
+    return arraySchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isBlobSchema(schema)) {
+    if (!schemaMapperProps.onPersistAsync) {
+      throw new Error(
+        "Blob schemas can only be used as the schema of a persist async configuration."
+      );
     }
+    return blobSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
-  return makeSafeHttpClient(httpClient)(...requestParams);
+  throw new Error("Not yet supported");
 };
 
-// src/controller/executeSubmission.ts
-var executeSubmission = async (props) => {
-  const { httpClient, requestCache, trackEvent, logEvent } = props;
-  const triggerAction = async (action, model, isInitial) => {
-    var _a, _b;
-    const { exit, url, result = null, id: actionId } = action;
-    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
-    };
-    trackSubmissionEvent("Action Triggered", { actionId });
-    if (exit && !url) {
-      trackSubmissionEvent("Action Succeeded", { actionId });
-      return { type: "complete", result };
-    }
-    try {
-      const command = await executeRequest({
-        exit,
-        request: createRequestFromAction(action, model),
-        requestCache,
-        httpClient,
-        trackEvent: (name, properties) => {
-          trackSubmissionEvent(name, __spreadProps(__spreadValues({}, properties), { actionId }));
+// src/domain/mappers/mapStepSchemas.ts
+var mapStepSchemas = (uid, step, stepLocalValue, mapperProps) => {
+  return step.schemas.map(
+    (schema, i) => {
+      var _a, _b;
+      return mapSchemaToComponent(
+        {
+          uid: `${uid}.schemas-${i}.${schema.$id}`,
+          schemaId: schema.$id,
+          schema,
+          model: (_a = step.model) != null ? _a : null,
+          localValue: stepLocalValue,
+          validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
+          required: true
         },
-        logEvent
-      });
-      switch (command.type) {
-        case "error": {
-          trackSubmissionEvent("Action Failed", __spreadValues({
-            actionId,
-            statusCode: (_a = command.httpError) == null ? void 0 : _a.statusCode
-          }, (_b = command.body) == null ? void 0 : _b.analytics));
-          return command;
-        }
-        case "behavior": {
-          if (command.behavior.type === "action") {
-            trackSubmissionEvent("Action Succeeded", { actionId });
-            return await executeSubmission({
-              action: command.behavior.action,
-              isInitial: false,
-              model: null,
-              requestCache,
-              httpClient,
-              trackEvent,
-              logEvent
-            });
-          }
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return command;
-        }
-        case "complete": {
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return __spreadProps(__spreadValues({}, command), { result: recursiveMerge(command.result, result) });
-        }
-        case "no-op":
-        default: {
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return command;
-        }
-      }
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      trackSubmissionEvent("Action Failed", { actionId, errorMessage });
-      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", { actionId, errorMessage });
-      throw error;
+        mapperProps
+      );
     }
-  };
-  return triggerAction(props.action, props.model, props.isInitial);
+  );
 };
-var createRequestFromAction = (action, model) => {
-  var _a, _b, _c;
-  return __spreadProps(__spreadValues({}, action), {
-    url: (_a = action.url) != null ? _a : "",
-    method: (_b = action.method) != null ? _b : "POST",
-    body: action.method === "GET" ? void 0 : recursiveMerge(model, (_c = action.data) != null ? _c : null)
+
+// src/domain/mappers/mapToolbarToComponent.ts
+var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  const { onBehavior } = mapperProps;
+  return __spreadProps(__spreadValues({}, toolbar), {
+    type: "toolbar",
+    uid: `${uid}.toolbar`,
+    tags: toolbar.tags,
+    items: toolbar.items.map((item) => {
+      const context = item.context ? mapLegacyContext(item.context) : void 0;
+      const behavior = getDomainLayerBehavior(
+        { behavior: item.behavior },
+        [],
+        mapperProps.registerSubmissionBehavior
+      );
+      return __spreadProps(__spreadValues({}, item), {
+        context: context ? mapLegacyContext(context) : void 0,
+        disabled: !!item.disabled,
+        tags: item.tags,
+        onClick: () => {
+          void onBehavior(behavior);
+        }
+      });
+    })
   });
 };
 
-// src/domain/features/prefetch/getStepPrefetch.ts
-var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
-  const requestCache = makeRequestCacheWithParent(flowRequestCache);
-  const keys = /* @__PURE__ */ new Set();
-  const start = (model) => {
-    if (keys.size > 0) {
-      return;
-    }
-    submissionBehaviors.forEach((behavior) => {
-      const request = behavior.type === "action" ? createRequestFromAction(behavior.action, model) : behavior.launchConfig.request;
-      const requestParams = [
-        request.url,
-        {
-          body: JSON.stringify(request.body),
-          method: request.method,
-          headers: { "Content-Type": "application/json" }
-        }
-      ];
-      try {
-        const key = makeRequestCacheKey(requestParams);
-        if (keys.has(key)) {
-          return;
-        }
-        const responsePromise = httpClient(...requestParams).catch(() => null);
-        requestCache.set(requestParams, responsePromise);
-        keys.add(key);
-      } catch (e) {
-      }
-    });
-  };
-  const stop = () => {
+// src/domain/mappers/utils/groupLayoutByPinned.ts
+var groupLayoutByPinned = (layouts) => {
+  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
+};
+var groupLayout = (acc, layout) => {
+  if (layout.type === "button" && layout.pinOrder !== void 0) {
+    return {
+      pinned: [...acc.pinned, layout],
+      nonPinned: acc.nonPinned
+    };
+  }
+  if (hasColumns(layout)) {
+    const leftChildren = groupLayoutByPinned(layout.left);
+    const rightChildren = groupLayoutByPinned(layout.right);
+    return {
+      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          left: leftChildren.nonPinned,
+          right: rightChildren.nonPinned
+        })
+      ]
+    };
+  }
+  if (hasChildren(layout)) {
+    const childComponents = groupLayoutByPinned(layout.components);
+    return {
+      pinned: [...acc.pinned, ...childComponents.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          components: childComponents.nonPinned
+        })
+      ]
+    };
+  }
+  return {
+    pinned: [...acc.pinned],
+    nonPinned: [...acc.nonPinned, layout]
   };
-  return { requestCache, start, stop };
 };
+var hasChildren = (component) => "components" in component;
+var hasColumns = (component) => "right" in component && "left" in component;
 
 // src/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
@@ -6278,12 +6320,7 @@ var mapStepToComponent = (_a) => {
   } = step;
   const submissionBehaviors = [];
   const registerSubmissionBehavior = (behavior) => {
-    if (behavior.type === "action" && behavior.action.prefetch) {
-      submissionBehaviors.push(behavior);
-    }
-    if (behavior.type === "subflow" && behavior.launchConfig.type === "dynamic" && behavior.launchConfig.request.prefetch) {
-      submissionBehaviors.push(behavior);
-    }
+    submissionBehaviors.push(behavior);
   };
   const back = mapBackNavigation(navigation, onBehavior, features.isEnabled("nativeBack"));
   const stepId = id || key;
@@ -6381,64 +6418,6 @@ var getLayoutAndFooter = (step, features) => {
   return { layout, footer: [] };
 };
 
-// src/getSubflowCallbacks.ts
-var getSubflowCallbacks = ({
-  behavior,
-  close,
-  restart,
-  onBehavior,
-  onError,
-  onEvent
-}) => {
-  const {
-    onCompletion: onCompletionBehavior,
-    onError: onErrorBehavior,
-    referrerId,
-    resultKey
-  } = behavior;
-  return {
-    onCompletion: (result) => {
-      var _a;
-      restart();
-      if (!onCompletionBehavior) {
-        close();
-        return;
-      }
-      if (onCompletionBehavior.type === "action") {
-        const newActionData = recursiveMerge(
-          (_a = onCompletionBehavior.action.data) != null ? _a : null,
-          resultKey ? { [resultKey]: result } : result
-        );
-        void onBehavior(__spreadProps(__spreadValues({}, onCompletionBehavior), {
-          action: __spreadProps(__spreadValues({}, onCompletionBehavior.action), { data: newActionData })
-        }));
-        return;
-      }
-      void onBehavior(onCompletionBehavior);
-      close();
-    },
-    onError: (error, status) => {
-      if (!onErrorBehavior) {
-        onError(error, {}, status);
-        close();
-        return;
-      }
-      restart();
-      void onBehavior(onErrorBehavior);
-      close();
-    },
-    onEvent: (name, properties) => {
-      onEvent(name, __spreadValues({
-        referrerId
-      }, properties));
-    },
-    onCancellation: () => {
-      restart();
-      close();
-    }
-  };
-};
-
 // src/utils/analyse-step.ts
 var import_spec2 = require("@wise/dynamic-flow-types/spec");
 var analyseStep = (step, logEvent) => {
@@ -6567,6 +6546,136 @@ var executeRefresh = async (props) => {
   }
 };
 
+// src/domain/components/SubflowComponent.ts
+var createSubflowComponent = (subflowProps, onComponentUpdate) => {
+  switch (subflowProps.subflowType) {
+    case "dynamic":
+      return createDynamicSubflowComponent(subflowProps, onComponentUpdate);
+    case "native":
+      return createNativeSubflowComponent(subflowProps);
+  }
+};
+var createDynamicSubflowComponent = (subflowProps, onComponentUpdate) => {
+  const update = getInputUpdateFunction(onComponentUpdate);
+  const subflowComponent = __spreadProps(__spreadValues({
+    uid: `subflow-dynamic-${getRandomId()}`,
+    type: "subflow",
+    subflowType: "dynamic",
+    kind: "layout"
+  }, subflowProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    }
+  });
+  return subflowComponent;
+};
+var createNativeSubflowComponent = (subflowProps) => {
+  const subflowComponent = __spreadValues({
+    uid: `subflow-native-${getRandomId()}`,
+    type: "subflow",
+    subflowType: "native",
+    kind: "layout"
+  }, subflowProps);
+  return subflowComponent;
+};
+
+// src/controller/executeSubflow.ts
+var executeSubflow = async ({
+  behavior,
+  rootComponent,
+  trackEvent,
+  onEvent,
+  onChange
+}) => {
+  rootComponent.setLoadingState("submitting");
+  const { launchConfig } = behavior;
+  const trackSubflowEvent = (eventName, properties) => {
+    if (behavior.launchConfig.type === "native") {
+      trackEvent(`Native Subflow ${eventName}`, __spreadValues({
+        referrerId,
+        nativeSubflowId: behavior.launchConfig.id
+      }, properties));
+    }
+  };
+  const { onCompletion, onError: onErrorBehavior, referrerId, resultKey } = behavior;
+  return new Promise((resolve) => {
+    var _a, _b;
+    const restart = () => {
+      rootComponent.setLoadingState("idle");
+      rootComponent.start();
+    };
+    const close = () => {
+      var _a2;
+      if (((_a2 = rootComponent.subflow) == null ? void 0 : _a2.uid) === component.uid) {
+        rootComponent.closeSubflow();
+      }
+    };
+    const callbacks = {
+      onCompletion: (result) => {
+        var _a2;
+        trackSubflowEvent("Succeeded");
+        restart();
+        if (!onCompletion) {
+          close();
+          resolve({ type: "no-op" });
+          return;
+        }
+        if (onCompletion.type === "action") {
+          const newActionData = recursiveMerge(
+            (_a2 = onCompletion.action.data) != null ? _a2 : null,
+            resultKey ? { [resultKey]: result } : result
+          );
+          resolve({
+            type: "behavior",
+            behavior: __spreadProps(__spreadValues({}, onCompletion), {
+              action: __spreadProps(__spreadValues({}, onCompletion.action), { data: newActionData })
+            })
+          });
+          return;
+        }
+        resolve({ type: "behavior", behavior: onCompletion });
+        close();
+      },
+      onError: (error, status) => {
+        trackSubflowEvent("Failed", { error, status });
+        if (!onErrorBehavior) {
+          resolve({ type: "error", error, status });
+          close();
+          return;
+        }
+        restart();
+        resolve({ type: "behavior", behavior: onErrorBehavior });
+        close();
+      },
+      onEvent: (name, properties) => onEvent == null ? void 0 : onEvent(name, __spreadValues({ referrerId }, properties)),
+      onCancellation: () => {
+        trackSubflowEvent("Cancelled");
+        restart();
+        close();
+      }
+    };
+    const component = launchConfig.type === "dynamic" ? createSubflowComponent(
+      __spreadProps(__spreadValues({}, callbacks), {
+        subflowType: "dynamic",
+        initialRequest: launchConfig.request,
+        requestCache: (_b = (_a = rootComponent.getStep()) == null ? void 0 : _a.requestCache) != null ? _b : rootComponent.requestCache,
+        presentation: launchConfig.presentation
+      }),
+      onChange
+    ) : createSubflowComponent(
+      __spreadProps(__spreadValues({}, callbacks), {
+        subflowType: "native",
+        id: launchConfig.id,
+        payload: launchConfig.payload
+      }),
+      onChange
+    );
+    rootComponent.stop();
+    rootComponent.addSubflow(component);
+    trackSubflowEvent("Triggered");
+  });
+};
+
 // src/controller/getRequestAbortController.ts
 var getRequestAbortController = () => {
   let abortController = new AbortController();
@@ -6596,8 +6705,6 @@ var getStepCounter = () => {
 };
 
 // src/controller/FlowController.ts
-var noop2 = () => {
-};
 var createFlowController = (props) => {
   const _a = props, {
     flowId,
@@ -6605,9 +6712,9 @@ var createFlowController = (props) => {
     initialStep,
     backConfig,
     features,
+    nativeSubflowHandlers,
     getErrorMessageFunctions,
     scrollToTop,
-    httpClient,
     onChange,
     onCancellation,
     onCompletion,
@@ -6623,9 +6730,9 @@ var createFlowController = (props) => {
     "initialStep",
     "backConfig",
     "features",
+    "nativeSubflowHandlers",
     "getErrorMessageFunctions",
     "scrollToTop",
-    "httpClient",
     "onChange",
     "onCancellation",
     "onCompletion",
@@ -6636,6 +6743,7 @@ var createFlowController = (props) => {
     "onLog",
     "onValueChange"
   ]);
+  const httpClient = getHttpClientWithCapabilities(props.httpClient, nativeSubflowHandlers);
   const rootComponent = createRootDomainComponent(
     onChange,
     scrollToTop,
@@ -6731,7 +6839,7 @@ var createFlowController = (props) => {
     onCancellation == null ? void 0 : onCancellation();
   };
   const onBehavior = async (behavior) => {
-    var _a2, _b, _c;
+    var _a2;
     switch (behavior.type) {
       case "back": {
         if (behavior.action) {
@@ -6823,35 +6931,23 @@ var createFlowController = (props) => {
         rootComponent.dismissModal();
         break;
       case "subflow": {
-        rootComponent.setLoadingState("submitting");
-        const { launchConfig } = behavior;
-        const { request, presentation } = launchConfig;
-        const callbacks = getSubflowCallbacks({
+        const command = await executeSubflow({
           behavior,
-          close: () => {
-            var _a3;
-            if (((_a3 = rootComponent.subflow) == null ? void 0 : _a3.uid) === component.uid) {
-              rootComponent.closeSubflow();
-            }
-          },
-          onBehavior,
-          onError: closeWithError,
-          onEvent: onEvent != null ? onEvent : noop2,
-          restart: () => {
-            rootComponent.setLoadingState("idle");
-            rootComponent.start();
-          }
-        });
-        const component = createSubflowDomainComponent(
-          __spreadProps(__spreadValues({}, callbacks), {
-            initialRequest: request,
-            requestCache: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.requestCache) != null ? _c : rootComponent.requestCache,
-            presentation
-          }),
+          rootComponent,
+          trackEvent,
+          onEvent,
           onChange
-        );
-        rootComponent.stop();
-        rootComponent.addSubflow(component);
+        });
+        switch (command.type) {
+          case "behavior":
+            void onBehavior(command.behavior);
+            break;
+          case "error":
+            closeWithError(command.error, {}, command.status);
+            break;
+          case "no-op":
+            break;
+        }
         break;
       }
       case "none":
@@ -7054,29 +7150,29 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children })
 };
 
-// src/renderers/EmptyLoadingStateRenderer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var EmptyLoadingStateRenderer = {
-  canRenderType: "loading-state",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {})
-};
-
 // src/renderers/CoreRootRenderer.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CoreRootRenderer = {
   canRenderType: "root",
   render: ({ children, childrenProps, subflow }) => {
     if ((subflow == null ? void 0 : subflow.presentation.type) === "push") {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: subflow.children });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: subflow.children });
     }
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [
       children,
       (subflow == null ? void 0 : subflow.presentation.type) === "modal" ? subflow.children : void 0
     ] });
   }
 };
 
+// src/renderers/EmptyLoadingStateRenderer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var EmptyLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
+};
+
 // src/renderers/getRenderFunction.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var getRenderFunction = (renderers) => {
@@ -7952,76 +8048,6 @@ var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(
   "tags"
 )), rendererMapperProps);
 
-// src/renderers/stepComponentToProps.ts
-var stepComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, back, control, description, error, step, title, tags, onBehavior } = component;
-  const _a = rendererMapperProps, { showBack } = _a, restMapperProps = __objRest(_a, ["showBack"]);
-  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, restMapperProps));
-  const footerProps = component.footerComponents.map(
-    (c) => componentToRendererProps(c, restMapperProps)
-  );
-  return __spreadValues({
-    type: "step",
-    id: step.id,
-    analyticsId,
-    uid,
-    back: showBack ? back : void 0,
-    control,
-    description,
-    toolbar: getToolbarProps(component.toolbar, restMapperProps),
-    error,
-    __rawStep: step,
-    title: restMapperProps.features.isEnabled("hideStepTitle") ? "" : title,
-    tags,
-    children: childrenProps.map(rendererMapperProps.render),
-    childrenProps,
-    footer: footerProps.map(rendererMapperProps.render),
-    footerProps,
-    __onAction: (action) => {
-      void onBehavior({ type: "action", action });
-    }
-  }, restMapperProps);
-};
-var getToolbarProps = (toolbar, rendererMapperProps) => {
-  if (!toolbar) {
-    return void 0;
-  }
-  return __spreadValues(__spreadProps(__spreadValues({}, pick(toolbar, "uid", "control", "type", "tags")), {
-    type: "toolbar",
-    items: toolbar.items.map((item) => __spreadProps(__spreadValues({}, item), {
-      disabled: item.disabled || rendererMapperProps.stepLoadingState !== "idle"
-    }))
-  }), rendererMapperProps);
-};
-
-// src/renderers/mappers/rootComponentToProps.ts
-var rootComponentToProps = (rootComponent, rendererMapperProps) => {
-  const childrenProps = [
-    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
-    ...rootComponent.getChildren().map((child) => {
-      if (child.type === "step") {
-        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
-          showBack: rootComponent.canPerformBack()
-        }));
-      }
-      return componentToRendererProps(child, rendererMapperProps);
-    })
-  ];
-  const subflow = rootComponent.subflow ? {
-    presentation: rootComponent.subflow.presentation,
-    children: rendererMapperProps.render(
-      componentToRendererProps(rootComponent.subflow, rendererMapperProps)
-    )
-  } : void 0;
-  return __spreadValues({
-    type: "root",
-    uid: rootComponent.uid,
-    children: childrenProps.map(rendererMapperProps.render),
-    childrenProps,
-    subflow
-  }, rendererMapperProps);
-};
-
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
   const { uid, control, emptyMessage, error, hint, isLoading, margin, query, title, tags } = component;
@@ -8229,19 +8255,6 @@ var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(
   onDismiss: component.onDismiss ? component.onDismiss.bind(component) : void 0
 }), rendererMapperProps);
 
-// src/renderers/mappers/subflowComponentToRendererProps.ts
-var subflowComponentToRendererProps = (component, rendererMapperProps) => {
-  return __spreadValues(__spreadProps(__spreadValues({
-    uid: component.uid,
-    type: "subflow"
-  }, pick(component, "requestCache", "presentation", "initialRequest")), {
-    onCancellation: component.onCancellation.bind(component),
-    onCompletion: component.onCompletion.bind(component),
-    onError: component.onError.bind(component),
-    onEvent: component.onEvent.bind(component)
-  }), rendererMapperProps);
-};
-
 // src/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, mapperProps) => {
   if (isHiddenComponent(component)) {
@@ -8266,8 +8279,6 @@ var componentToRendererProps = (component, mapperProps) => {
 };
 var getComponentProps = (component, rendererMapperProps) => {
   switch (component.type) {
-    case "root":
-      return rootComponentToProps(component, rendererMapperProps);
     case "alert":
       return alertComponentToProps(component, rendererMapperProps);
     case "all-of":
@@ -8342,8 +8353,6 @@ var getComponentProps = (component, rendererMapperProps) => {
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
       return statusListComponentToProps(component, rendererMapperProps);
-    case "subflow":
-      return subflowComponentToRendererProps(component, rendererMapperProps);
     case "tabs":
       return tabsComponentToProps(component, rendererMapperProps);
     case "text":
@@ -8356,8 +8365,12 @@ var getComponentProps = (component, rendererMapperProps) => {
       return upsellComponentToProps(component, rendererMapperProps);
     case "persist-async":
       return persistAsyncComponentToProps(component, rendererMapperProps);
+    case "root":
+      throw new Error("Root components are only mapped from rootComponentToProps");
     case "step":
-      throw Error("Step components are only mapped from rootComponentToProps");
+      throw new Error("Step components are only mapped from rootComponentToProps");
+    case "subflow":
+      throw new Error("Subflow components are only mapped from rootComponentToProps");
     default:
       throw new Error("Unknown component type");
   }
@@ -8370,6 +8383,142 @@ var getComponentAlertProps = (component, rendererMapperProps) => "alert" in comp
   markdown: component.alert.content
 }, rendererMapperProps) : null;
 
+// src/renderers/stepComponentToProps.ts
+var stepComponentToProps = (component, rendererMapperProps) => {
+  const { uid, analyticsId, back, control, description, error, step, title, tags, onBehavior } = component;
+  const _a = rendererMapperProps, { showBack } = _a, restMapperProps = __objRest(_a, ["showBack"]);
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, restMapperProps));
+  const footerProps = component.footerComponents.map(
+    (c) => componentToRendererProps(c, restMapperProps)
+  );
+  return __spreadValues({
+    type: "step",
+    id: step.id,
+    analyticsId,
+    uid,
+    back: showBack ? back : void 0,
+    control,
+    description,
+    toolbar: getToolbarProps(component.toolbar, restMapperProps),
+    error,
+    __rawStep: step,
+    title: restMapperProps.features.isEnabled("hideStepTitle") ? "" : title,
+    tags,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    footer: footerProps.map(rendererMapperProps.render),
+    footerProps,
+    __onAction: (action) => {
+      void onBehavior({ type: "action", action });
+    }
+  }, restMapperProps);
+};
+var getToolbarProps = (toolbar, rendererMapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  return __spreadValues(__spreadProps(__spreadValues({}, pick(toolbar, "uid", "control", "type", "tags")), {
+    type: "toolbar",
+    items: toolbar.items.map((item) => __spreadProps(__spreadValues({}, item), {
+      disabled: item.disabled || rendererMapperProps.stepLoadingState !== "idle"
+    }))
+  }), rendererMapperProps);
+};
+
+// src/renderers/mappers/subflowComponentToRendererProps.ts
+var subflowComponentToRendererProps = (subflow, rendererMapperProps, nativeSubflowHandlers) => {
+  if (subflow.subflowType === "native") {
+    const handler = nativeSubflowHandlers.find((h) => h.id === subflow.id);
+    if (!handler) {
+      throw new Error(
+        `No native subflow handler found for subflow with id "${subflow.id}". Make sure to provide it in the "nativeSubflowHandlers" prop of DynamicFlowCore.`
+      );
+    }
+    const presentationMode = handler.getPresentationMode(subflow.payload);
+    return {
+      presentation: { type: presentationMode },
+      children: rendererMapperProps.render(
+        nativeSubflowComponentToRendererProps(subflow, rendererMapperProps)
+      )
+    };
+  }
+  if (subflow.subflowType === "dynamic") {
+    return {
+      presentation: subflow.presentation,
+      children: rendererMapperProps.render(
+        dynamicSubflowComponentToRendererProps(subflow, rendererMapperProps)
+      )
+    };
+  }
+};
+var dynamicSubflowComponentToRendererProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    uid: component.uid,
+    type: "subflow-dynamic"
+  }, pick(component, "requestCache", "presentation", "initialRequest")), {
+    onCancellation: component.onCancellation.bind(component),
+    onCompletion: component.onCompletion.bind(component),
+    onError: component.onError.bind(component),
+    onEvent: component.onEvent.bind(component)
+  }), rendererMapperProps);
+};
+var nativeSubflowComponentToRendererProps = (component, rendererMapperProps) => {
+  return __spreadValues({
+    uid: component.uid,
+    type: "subflow-native",
+    id: component.id,
+    payload: component.payload,
+    onCancellation: component.onCancellation.bind(component),
+    onCompletion: component.onCompletion.bind(component),
+    onError: component.onError.bind(component),
+    onEvent: component.onEvent.bind(component)
+  }, rendererMapperProps);
+};
+
+// src/renderers/mappers/rootComponentToProps.ts
+var rootComponentToProps = (rootComponent, rendererMapperProps, nativeSubflowHandlers) => {
+  const childrenProps = [
+    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
+    ...rootComponent.getChildren().map((child) => {
+      if (child.type === "step") {
+        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
+          showBack: rootComponent.canPerformBack()
+        }));
+      }
+      return componentToRendererProps(child, rendererMapperProps);
+    })
+  ];
+  const subflow = rootComponent.subflow ? subflowComponentToRendererProps(
+    rootComponent.subflow,
+    rendererMapperProps,
+    nativeSubflowHandlers
+  ) : void 0;
+  return __spreadValues({
+    type: "root",
+    uid: rootComponent.uid,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    subflow
+  }, rendererMapperProps);
+};
+
+// src/renderers/subflow/getNativeSubflowRenderer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var getNativeSubflowRenderer = (handlers) => {
+  return {
+    canRenderType: "subflow-native",
+    render: (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NativeSubflow, __spreadProps(__spreadValues({}, props), { handlers }))
+  };
+};
+var NativeSubflow = (propsWithHandler) => {
+  const _a = propsWithHandler, { handlers } = _a, props = __objRest(_a, ["handlers"]);
+  const handler = handlers.find((it) => it.id === props.id);
+  if (!handler) {
+    throw new Error(`No handler found for native subflow with id ${props.id}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: handler.render(props) });
+};
+
 // src/utils/getScrollToTop.ts
 var getScrollToTop = (normalisedFlowId, className2) => (behavior) => {
   var _a;
@@ -8398,12 +8547,12 @@ function useStableCallback(handler) {
 }
 
 // src/useDynamicFlow.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var className = "dynamic-flow";
-var noop3 = () => {
+var noop2 = () => {
 };
 function useDynamicFlow(props) {
-  var _a;
+  var _a, _b;
   const { flowId, renderers } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
   const scrollToTop = (0, import_react3.useMemo)(
@@ -8423,7 +8572,7 @@ function useDynamicFlow(props) {
   const onError = useStableCallback(props.onError);
   const onEvent = useStableCallback(props.onEvent);
   const onLog = useStableCallback(props.onLog);
-  const onValueChange = noop3;
+  const onValueChange = noop2;
   const { formatMessage, locale } = (0, import_react_intl7.useIntl)();
   const getErrorMessageFunctions = (0, import_react3.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
@@ -8449,33 +8598,45 @@ function useDynamicFlow(props) {
     scrollToTop
   }));
   const render = (0, import_react3.useMemo)(
-    () => getRenderFunction([
-      CoreRootRenderer,
-      CoreContainerRenderer,
-      ...renderers,
-      EmptyLoadingStateRenderer
-    ]),
+    () => {
+      var _a2;
+      return getRenderFunction([
+        CoreRootRenderer,
+        CoreContainerRenderer,
+        getNativeSubflowRenderer((_a2 = props.nativeSubflowHandlers) != null ? _a2 : []),
+        // renderers above this cannot be overridden by the user
+        ...renderers,
+        EmptyLoadingStateRenderer
+        // this can be overridden by the user
+      ]);
+    },
+    // we don't want to react to changes in the nativeSubflowHandlers. they should be set once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [renderers]
   );
-  const tree = componentToRendererProps(rootComponent, {
-    features,
-    render,
-    httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
-    }),
-    stepLoadingState: rootComponent.getLoadingState()
-  });
+  const tree = rootComponentToProps(
+    rootComponent,
+    {
+      features,
+      render,
+      httpClient,
+      trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
+      }),
+      stepLoadingState: rootComponent.getLoadingState()
+    },
+    (_b = props.nativeSubflowHandlers) != null ? _b : []
+  );
   return {
     controller: {
       getSubmittableValue: async () => rootComponent.getSubmittableValue(),
       validate: () => rootComponent.validate(),
       getCurrentStep: () => {
-        var _a2, _b;
-        return (_b = (_a2 = rootComponent.getStep()) == null ? void 0 : _a2.step) != null ? _b : null;
+        var _a2, _b2;
+        return (_b2 = (_a2 = rootComponent.getStep()) == null ? void 0 : _a2.step) != null ? _b2 : null;
       },
       cancel
     },
-    view: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    view: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -8485,7 +8646,7 @@ function useDynamicFlow(props) {
             errorMessage: getErrorMessage(error)
           });
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
       }
     )
   };
@@ -8583,5 +8744,36 @@ var eventNames = [
   "Polling Failed",
   "ValidationAsync Triggered",
   "ValidationAsync Succeeded",
-  "ValidationAsync Failed"
+  "ValidationAsync Failed",
+  "Native Subflow Triggered",
+  "Native Subflow Succeeded",
+  "Native Subflow Failed",
+  "Native Subflow Cancelled"
 ];
+
+// src/renderers/subflow/getDynamicSubflowRenderer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getDynamicSubflowRenderer = ({
+  Component: Component2,
+  canRender
+}) => {
+  return {
+    canRenderType: "subflow-dynamic",
+    canRender,
+    render: (props) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Component2,
+        {
+          presentation: props.presentation,
+          requestCache: props.requestCache,
+          initialRequest: props.initialRequest,
+          onCompletion: props.onCompletion,
+          onError: props.onError,
+          onCancellation: props.onCancellation,
+          onEvent: props.onEvent
+        },
+        props.uid
+      );
+    }
+  };
+};