@wise/dynamic-flow-client 5.3.0 → 5.4.0

package/build/main.js

@@ -57,10 +57,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlowCore,
+  eventNames: () => eventNames,
   findRendererPropsByType: () => findRendererPropsByType,
   makeHttpClient: () => makeHttpClient,
+  makeRequestCache: () => makeRequestCache,
   translations: () => i18n_default,
-  useDynamicFlow: () => useDynamicFlow
+  useDynamicFlow: () => useDynamicFlow,
+  useDynamicFlowModal: () => useDynamicFlowModal
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -850,6 +853,7 @@ var getChildren = (node) => {
     case "input-text":
     case "input-upload":
     case "external-confirmation":
+    case "subflow":
       return [];
   }
 };
@@ -962,9 +966,15 @@ var CoreContainerRenderer = {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CoreRootRenderer = {
   canRenderType: "root",
-  render: ({ children, childrenProps }) => {
+  render: ({ children, childrenProps, subflow }) => {
+    if ((subflow == null ? void 0 : subflow.presentation.type) === "push") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: subflow.children });
+    }
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
+    ] });
   }
 };
 
@@ -1712,11 +1722,18 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
     }
     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
+    childrenProps,
+    subflow
   }, rendererMapperProps);
 };
 
@@ -1907,6 +1924,19 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/renderers/mappers/subflowComponentToRendererProps.ts
+var subflowComponentToRendererProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    uid: "subflow",
+    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)) {
@@ -2005,6 +2035,8 @@ 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":
@@ -2042,15 +2074,17 @@ var getInputUpdateFunction = (updateComponent) => {
 };
 
 // src/domain/components/RootDomainComponent.ts
-var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
+var createRootDomainComponent = (updateComponent, scrollToTop, backConfig, requestCache) => {
   const update = getInputUpdateFunction(updateComponent);
   const rootComponent = {
     type: "root",
     kind: "step",
     uid: "root",
     stepComponent: null,
+    subflow: null,
     stepStack: [],
     backConfig,
+    requestCache,
     _update(updateFn) {
       update(this, updateFn);
     },
@@ -2113,6 +2147,16 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       var _a;
       return (_a = this.stepStack[this.stepStack.length - 1]) != null ? _a : null;
     },
+    addSubflow(subflow) {
+      this._update((draft) => {
+        draft.subflow = subflow;
+      });
+    },
+    closeSubflow() {
+      this._update((draft) => {
+        draft.subflow = null;
+      });
+    },
     start() {
       var _a;
       (_a = this.getStep()) == null ? void 0 : _a.start();
@@ -2123,6 +2167,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     },
     updateStep(stepComponent) {
       var _a;
+      this.closeSubflow();
       const shouldScroll = shouldScrollOnStepUpdate(stepComponent, this.getStep());
       this._update((draft) => {
         draft.stepStack = draft.stepStack.slice(0, -1);
@@ -2134,10 +2179,11 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       (_a = this.getStep()) == null ? void 0 : _a.start();
     },
     pushStep(stepComponent) {
+      var _a;
+      this.closeSubflow();
       const previousStep = this.getStep();
       const previousStepHasPolling = previousStep == null ? void 0 : previousStep.step.polling;
       this._update((draft) => {
-        var _a;
         switch (stepComponent.stackBehavior) {
           case "remove-previous":
           case "replace-current":
@@ -2152,9 +2198,9 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
             }
             draft.stepStack.push(stepComponent);
         }
-        (_a = this.getStep()) == null ? void 0 : _a.start();
       });
       if (previousStep != null) {
+        (_a = this.getStep()) == null ? void 0 : _a.start();
         scrollToTop == null ? void 0 : scrollToTop("instant");
       }
     },
@@ -2172,6 +2218,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     },
     navigateBack() {
       var _a;
+      this.closeSubflow();
       if (this.stepStack.length === 1) {
         return;
       }
@@ -2196,6 +2243,24 @@ 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, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const subflowComponent = __spreadProps(__spreadValues({
+    uid: `subflow-${getRandomId()}`,
+    type: "subflow",
+    kind: "layout"
+  }, subflowProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    }
+  });
+  return subflowComponent;
+};
+
 // src/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
@@ -2219,9 +2284,6 @@ var createModalContentComponent = (modalProps, updateComponent) => {
   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",
@@ -2244,6 +2306,12 @@ var getDomainLayerBehavior = ({ action, behavior: specBehavior }, stepActions, r
 };
 var normaliseBehavior = (behavior, stepActions) => {
   if ("type" in behavior) {
+    if (behavior.type === "subflow") {
+      return __spreadProps(__spreadValues({}, behavior), {
+        onCompletion: behavior.onCompletion ? normaliseBehavior(behavior.onCompletion, stepActions) : void 0,
+        onError: behavior.onError ? normaliseBehavior(behavior.onError, stepActions) : void 0
+      });
+    }
     return behavior;
   }
   if ("action" in behavior && behavior.action) {
@@ -3365,6 +3433,35 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
   mapperProps.updateComponent
 );
 
+// src/domain/components/step/ExternalConfirmationComponent.ts
+var createExternalConfirmation = (uid, url, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "external-confirmation",
+    kind: "layout",
+    uid,
+    url,
+    status: "initial",
+    onSuccess() {
+      update(this, (draft) => {
+        draft.status = "success";
+      });
+    },
+    onFailure() {
+      if (this.status === "initial") {
+        update(this, (draft) => {
+          draft.status = "failure";
+        });
+      }
+    },
+    onCancel() {
+      update(this, (draft) => {
+        draft.status = "dismissed";
+      });
+    }
+  };
+};
+
 // src/utils/recursiveMerge.ts
 function recursiveMerge(valueA, valueB) {
   if (valueA === null) {
@@ -3404,57 +3501,6 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
-// src/flow/makeSubmissionRequest.ts
-var makeSubmissionRequest = (action, model) => {
-  var _a, _b;
-  return [
-    (_a = action.url) != null ? _a : "",
-    {
-      method: (_b = action.method) != null ? _b : "POST",
-      body: makeRequestBody(action, model),
-      headers: { "Content-Type": "application/json" }
-    }
-  ];
-};
-var makeRequestBody = (action, model) => {
-  var _a, _b;
-  const method = (_a = action.method) != null ? _a : "POST";
-  if (method === "GET") {
-    return void 0;
-  }
-  const payload = recursiveMerge(model, (_b = action.data) != null ? _b : null);
-  return payload !== null ? JSON.stringify(payload) : null;
-};
-
-// src/domain/components/step/ExternalConfirmationComponent.ts
-var createExternalConfirmation = (uid, url, updateComponent) => {
-  const update = getInputUpdateFunction(updateComponent);
-  return {
-    type: "external-confirmation",
-    kind: "layout",
-    uid,
-    url,
-    status: "initial",
-    onSuccess() {
-      update(this, (draft) => {
-        draft.status = "success";
-      });
-    },
-    onFailure() {
-      if (this.status === "initial") {
-        update(this, (draft) => {
-          draft.status = "failure";
-        });
-      }
-    },
-    onCancel() {
-      update(this, (draft) => {
-        draft.status = "dismissed";
-      });
-    }
-  };
-};
-
 // src/utils/component-utils.ts
 var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
   (values) => values.reduce((acc, value) => recursiveMerge(acc, value), null)
@@ -3609,27 +3655,42 @@ var getStepRefreshAfter = ({
 };
 
 // src/domain/prefetching/request-cache.ts
-var makeRequestCache = () => {
-  const cache = /* @__PURE__ */ new Map();
-  return {
-    has: (...requestParams) => {
-      return cache.has(makeKey(...requestParams));
-    },
-    get: (...requestParams) => {
-      return cache.get(makeKey(...requestParams));
-    },
-    delete: (...requestParams) => {
-      return cache.delete(makeKey(...requestParams));
-    },
-    set: (...[input, init, response]) => {
-      return cache.set(makeKey(input, init), response);
+var makeRequestCacheWithParent = (parent) => {
+  const map = /* @__PURE__ */ new Map();
+  const cache = {
+    get: (requestParams) => {
+      var _a;
+      const key = makeKey(requestParams);
+      const promise = (_a = map.get(key)) != null ? _a : parent == null ? void 0 : parent.get(requestParams);
+      map.delete(key);
+      return promise;
     },
-    clear: () => {
-      cache.clear();
+    set: (requestParams, responsePromise) => {
+      return map.set(makeKey(requestParams), responsePromise);
     }
   };
+  return cache;
+};
+var makeRequestCache = (initialValues = []) => {
+  const cache = makeRequestCacheWithParent(void 0);
+  initialValues.forEach(([requestParams, responsePromise]) => {
+    cache.set(requestParams, responsePromise);
+  });
+  return cache;
+};
+var normaliseRequestCache = (cache) => {
+  if (cache === void 0) {
+    return makeRequestCache();
+  }
+  if (isRequestCacheInstance(cache)) {
+    return cache;
+  }
+  return makeRequestCache(cache);
+};
+var isRequestCacheInstance = (cache) => {
+  return !cache || !Array.isArray(cache);
 };
-var makeKey = (...requestParams) => {
+var makeKey = (requestParams) => {
   var _a, _b;
   const [input, init] = requestParams;
   const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
@@ -4167,6 +4228,13 @@ function assertModalResponseBody(body) {
     "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)
@@ -6115,11 +6183,17 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
       if (updatedIndex === this.selectedIndex) {
         return;
       }
-      if (updatedIndex !== null && this.analyticsId) {
-        selectProps.trackEvent("OneOf Selected", {
-          oneOfId: this.analyticsId,
-          schemaId: this.children[updatedIndex].analyticsId
+      if (updatedIndex !== null) {
+        selectProps.trackEvent("OneOf Option Selected", {
+          schema: this.analyticsId,
+          selectedOption: this.children[updatedIndex].analyticsId
         });
+        if (this.analyticsId) {
+          selectProps.trackEvent("OneOf Selected", {
+            oneOfId: this.analyticsId,
+            schemaId: this.children[updatedIndex].analyticsId
+          });
+        }
       }
       this._update((draft) => {
         draft.errors = [];
@@ -6856,6 +6930,227 @@ var groupLayout = (acc, layout) => {
 var hasChildren = (component) => "components" in component;
 var hasColumns = (component) => "right" in component && "left" in component;
 
+// src/flow/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/flow/getResponseType.ts
+var responseTypes = ["step", "action", "exit", "modal", "subflow"];
+var getResponseType = async (response) => {
+  assertResponseIsValid(response);
+  const headerResponseType = getResponseTypeFromHeader(response);
+  if (headerResponseType) {
+    return headerResponseType;
+  }
+  const jsonBody = await parseResponseBodyAsJsonElement(response.clone());
+  if (isObject(jsonBody) && jsonBody.action) {
+    return "action";
+  }
+  return "step";
+};
+var getResponseTypeFromHeader = (response) => {
+  var _a, _b;
+  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Response-Type")) {
+    const type = response.headers.get("X-Df-Response-Type");
+    assertDFResponseType(type);
+    return type;
+  }
+  if ((_b = response.headers) == null ? void 0 : _b.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', 'error', 'modal', 'subflow'."
+    );
+  }
+}
+
+// src/flow/makeSafeHttpClient.ts
+var makeSafeHttpClient = (httpClient) => async (...props) => {
+  try {
+    return await httpClient(...props);
+  } catch (e) {
+    return null;
+  }
+};
+
+// src/flow/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 responseType = await getResponseType(response);
+  const responseBody = await parseResponseBodyAsJsonElement(response.clone());
+  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" }) };
+    }
+    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/flow/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 executeRequest({
+              request: createRequestFromAction(command.behavior.action, 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) });
+        }
+        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/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
   var _b = _a, {
@@ -6874,7 +7169,7 @@ var mapStepToComponent = (_a) => {
     "onBehavior"
   ]);
   var _a2;
-  const { etag, step, stepLocalValue, logEvent, updateComponent } = restProps;
+  const { etag, step, stepLocalValue, flowRequestCache, logEvent, updateComponent } = restProps;
   const {
     id,
     control,
@@ -6889,12 +7184,15 @@ var mapStepToComponent = (_a) => {
     title,
     tags
   } = step;
-  const submissionRequestsCache = makeRequestCache();
+  const requestCache = makeRequestCacheWithParent(flowRequestCache);
   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);
+    }
   };
   const back = mapBackNavigation(navigation, onBehavior, features.isEnabled("nativeBack"));
   const stepId = id || key;
@@ -6955,7 +7253,7 @@ var mapStepToComponent = (_a) => {
     title,
     tags,
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
-    submissionRequestsCache,
+    requestCache,
     step,
     updateComponent,
     trackEvent,
@@ -6965,7 +7263,7 @@ var mapStepToComponent = (_a) => {
     httpClient: mapperProps.httpClient,
     model: stepComponent.getSubmittableValueSync(),
     behaviors: submissionBehaviors,
-    requestsCache: submissionRequestsCache
+    requestCache
   });
   return stepComponent;
 };
@@ -6988,56 +7286,25 @@ var mapBackNavigation = (navigation, onBehavior, isNativeBackEnabled) => {
   } : void 0;
 };
 var executePrefetch = (props) => {
-  const {
-    httpClient,
-    behaviors: submissionBehaviors,
-    model,
-    requestsCache: submissionRequestsCache
-  } = props;
+  const { httpClient, behaviors: submissionBehaviors, model, requestCache } = props;
   submissionBehaviors.forEach((behavior) => {
-    const requestParams = makeSubmissionRequest(behavior.action, model);
+    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 responsePromise = httpClient(...requestParams).catch(() => null);
-      submissionRequestsCache.set(...requestParams, responsePromise);
+      requestCache.set(requestParams, responsePromise);
     } catch (e) {
     }
   });
 };
 
-// src/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit", "modal"];
-var getResponseType = async (response) => {
-  assertResponseIsValid(response);
-  const headerResponseType = getResponseTypeFromHeader(response);
-  if (headerResponseType) {
-    return headerResponseType;
-  }
-  const jsonBody = await parseResponseBodyAsJsonElement(response.clone());
-  if (isObject(jsonBody) && jsonBody.action) {
-    return "action";
-  }
-  return "step";
-};
-var getResponseTypeFromHeader = (response) => {
-  var _a, _b;
-  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Response-Type")) {
-    const type = response.headers.get("X-Df-Response-Type");
-    assertDFResponseType(type);
-    return type;
-  }
-  if ((_b = response.headers) == null ? void 0 : _b.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', 'error', 'modal'."
-    );
-  }
-}
-
 // src/flow/executePoll.ts
 var executePoll = async (props) => {
   const { errorBehavior, signal, url, httpClient, trackEvent } = props;
@@ -7131,113 +7398,62 @@ var executeRefresh = async (props) => {
   }
 };
 
-// src/flow/makeSafeHttpClient.ts
-var makeSafeHttpClient = (httpClient) => async (...props) => {
-  try {
-    return await httpClient(...props);
-  } catch (e) {
-    return null;
-  }
-};
-
-// src/flow/executeSubmission.ts
-var executeSubmission = async (props) => {
-  const { httpClient, requestCache, trackEvent, logEvent } = props;
-  const triggerAction = async (action, model, isInitial) => {
-    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 };
-    }
-    const requestParams = makeSubmissionRequest(action, model);
-    const response = await getCachedOrFetch(requestParams, requestCache, httpClient);
-    if (!response) {
-      const extra = { actionId, errorMessage: "Network Error" };
-      trackEvent("Action Failed", extra);
-      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
-      return { type: "error" };
-    }
-    if (!response.ok) {
-      return handleErrorResponse(response, actionId);
-    }
-    try {
-      const responseType = await getResponseType(response);
-      const body = await parseResponseBodyAsJsonElement(response);
-      if (exit) {
-        return { type: "complete", result: recursiveMerge(body, result) };
-      }
-      switch (responseType) {
-        case "step": {
-          const etag = response.headers.get("etag") || null;
-          assertStepResponseBody(body);
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return { type: "replace-step", step: body, etag };
-        }
-        case "exit": {
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return { type: "complete", result: recursiveMerge(body, result) };
-        }
-        case "action": {
-          assertActionResponseBody(body);
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return await triggerAction(body.action, null, false);
-        }
-        case "modal": {
-          assertModalResponseBody(body);
-          trackSubmissionEvent("Action Succeeded", { actionId });
-          return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
-        }
-        default: {
-          throw new Error(`Unsupported response type: ${String(responseType)}`);
-        }
+// 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;
       }
-    } catch (error) {
-      const errorMessage = getErrorMessage(error);
-      trackSubmissionEvent("Action Failed", { actionId, errorMessage });
-      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", { actionId, errorMessage });
-      throw error;
-    }
-  };
-  const handleErrorResponse = async (response, actionId) => {
-    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
+      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;
       }
-    };
-  };
-  return triggerAction(props.action, props.model, props.isInitial);
-};
-var getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
-  if (requestCache == null ? void 0 : requestCache.has(...requestParams)) {
-    const cachedPromise = requestCache.get(...requestParams);
-    requestCache.delete(...requestParams);
-    if (cachedPromise) {
-      const cachedResponse = await cachedPromise;
-      if (cachedResponse == null ? void 0 : cachedResponse.ok) {
-        return cachedResponse;
+      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();
     }
-  }
-  return makeSafeHttpClient(httpClient)(...requestParams);
+  };
 };
 
 // src/renderers/getSchemaErrorMessageFunction.ts
@@ -7469,17 +7685,16 @@ function useStableCallback(handler) {
 
 // src/useDynamicFlowController.tsx
 function useDynamicFlowController(props) {
-  const _a = props, { flowId, initialAction, initialStep, features } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features"]);
+  const _a = props, { flowId, initialAction, initialStep, features, scrollToTop } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features", "scrollToTop"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCancellation = useStableCallback(rest.onCancellation);
   const onCompletion = useStableCallback(rest.onCompletion);
-  const onCopy = useStableCallback(props.onCopy);
-  const onValueChange = useStableCallback(props.onValueChange);
-  const onLink = useStableCallback(props.onLink);
+  const onCopy = useStableCallback(rest.onCopy);
+  const onLink = useStableCallback(rest.onLink);
   const onError = useStableCallback(rest.onError);
   const onEvent = useStableCallback(rest.onEvent);
   const onLog = useStableCallback(rest.onLog);
-  const scrollToTop = useStableCallback(props.scrollToTop);
+  const onValueChange = useStableCallback(rest.onValueChange);
   const { formatMessage, locale } = (0, import_react_intl7.useIntl)();
   const getErrorMessageFunctions = (0, import_react3.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
@@ -7487,10 +7702,15 @@ function useDynamicFlowController(props) {
   );
   const rerender = useRerender();
   const rootComponentRef = (0, import_react3.useRef)(
-    createRootDomainComponent(rerender, scrollToTop, {
-      isNativeBackEnabled: features.isEnabled("nativeBack"),
-      isFlowCancellable: Boolean(rest.onCancellation)
-    })
+    createRootDomainComponent(
+      rerender,
+      scrollToTop,
+      {
+        isNativeBackEnabled: features.isEnabled("nativeBack"),
+        isFlowCancellable: Boolean(rest.onCancellation)
+      },
+      normaliseRequestCache(rest.requestCache)
+    )
   );
   const stepCount = (0, import_react3.useRef)(0);
   const abortControllerRef = (0, import_react3.useRef)(new AbortController());
@@ -7499,12 +7719,15 @@ function useDynamicFlowController(props) {
     abortControllerRef.current = new AbortController();
     return abortControllerRef.current.signal;
   };
+  const hasTriggeredInitialAction = (0, import_react3.useRef)(false);
   (0, import_react3.useEffect)(() => {
     trackCoreEvent("Initiated");
-    if (!initialStep && initialAction) {
+    if (!hasTriggeredInitialAction.current && !initialStep && initialAction) {
       rootComponentRef.current.setLoadingState("submitting");
+      hasTriggeredInitialAction.current = true;
       void onAction(__spreadValues({ method: "GET" }, initialAction), null);
     }
+    rootComponentRef.current.start();
     return () => {
       rootComponentRef.current.stop();
     };
@@ -7517,6 +7740,7 @@ function useDynamicFlowController(props) {
       const component = createStepComponent2(newStep, etag, null);
       if (component) {
         rootComponentRef.current.pushStep(component);
+        rootComponentRef.current.setLoadingState("idle");
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -7531,12 +7755,14 @@ function useDynamicFlowController(props) {
     );
     if (component) {
       rootComponentRef.current.updateStep(component);
+      rootComponentRef.current.setLoadingState("idle");
     }
   }, []);
   const getMapperProps = () => ({
     uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
     loadingState: "idle",
     updateComponent: () => rerender(),
+    flowRequestCache: rootComponentRef.current.requestCache,
     getErrorMessageFunctions,
     trackEvent,
     logEvent,
@@ -7575,7 +7801,8 @@ function useDynamicFlowController(props) {
       const stepId = (_b = (_a2 = step == null ? void 0 : step.id) != null ? _a2 : step == null ? void 0 : step.key) != null ? _b : null;
       const analytics = step == null ? void 0 : step.analytics;
       const metadata = __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-        flowId
+        flowId,
+        integrationId: flowId
       }, step ? { stepCount: stepCount.current } : {}), stepId !== null ? { stepId } : {}), analytics), properties);
       try {
         onEvent == null ? void 0 : onEvent(`Dynamic Flow - ${eventName}`, __spreadValues({}, metadata));
@@ -7616,7 +7843,7 @@ function useDynamicFlowController(props) {
     onCancellation();
   }, []);
   const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
-    var _a2;
+    var _a2, _b, _c;
     switch (behavior.type) {
       case "back": {
         if (behavior.action) {
@@ -7707,6 +7934,33 @@ function useDynamicFlowController(props) {
       case "dismiss":
         rootComponentRef.current.dismissModal();
         break;
+      case "subflow": {
+        rootComponentRef.current.setLoadingState("submitting");
+        const { launchConfig } = behavior;
+        const { request, presentation } = launchConfig;
+        const callbacks = getSubflowCallbacks({
+          behavior,
+          close: () => rootComponentRef.current.closeSubflow(),
+          onBehavior,
+          onError: closeWithError,
+          onEvent,
+          restart: () => {
+            rootComponentRef.current.setLoadingState("idle");
+            rootComponentRef.current.start();
+          }
+        });
+        const component = createSubflowDomainComponent(
+          __spreadProps(__spreadValues({}, callbacks), {
+            initialRequest: request,
+            requestCache: (_c = (_b = rootComponentRef.current.getStep()) == null ? void 0 : _b.requestCache) != null ? _c : rootComponentRef.current.requestCache,
+            presentation
+          }),
+          rerender
+        );
+        rootComponentRef.current.stop();
+        rootComponentRef.current.addSubflow(component);
+        break;
+      }
       case "none":
         break;
     }
@@ -7715,16 +7969,16 @@ function useDynamicFlowController(props) {
   }, []);
   const onAction = (0, import_react3.useCallback)(
     async (action, model) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
       try {
         rootComponentRef.current.setLoadingState("submitting");
         const command = await executeSubmission({
           action,
           model,
           isInitial: !rootComponentRef.current.hasStep(),
-          requestCache: (_a2 = rootComponentRef.current.getStep()) == null ? void 0 : _a2.submissionRequestsCache,
+          requestCache: (_b = (_a2 = rootComponentRef.current.getStep()) == null ? void 0 : _a2.requestCache) != null ? _b : rootComponentRef.current.requestCache,
           httpClient,
-          trackEvent: trackCoreEvent,
+          trackEvent,
           logEvent
         });
         switch (command.type) {
@@ -7736,6 +7990,7 @@ function useDynamicFlowController(props) {
           }
           case "replace-step": {
             const isFirstStep = !rootComponentRef.current.hasStep();
+            rootComponentRef.current.closeSubflow();
             createStep(command.step, command.etag);
             trackCoreEvent("Step Shown", { isFirstStep });
             break;
@@ -7743,7 +7998,7 @@ function useDynamicFlowController(props) {
           case "error": {
             rootComponentRef.current.setLoadingState("idle");
             const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-            const errors = (_c = (_b = command.body) == null ? void 0 : _b.errors) != null ? _c : { error: genericErrorMessage };
+            const errors = (_d = (_c = command.body) == null ? void 0 : _c.errors) != null ? _d : { error: genericErrorMessage };
             const currentStep = rootComponentRef.current.getStep();
             if (currentStep) {
               updateStep(
@@ -7757,16 +8012,16 @@ function useDynamicFlowController(props) {
                   external: void 0
                   // and no external, to avoid retriggering it
                 }),
-                (_e = (_d = rootComponentRef.current.getStep()) == null ? void 0 : _d.etag) != null ? _e : null
+                (_f = (_e = rootComponentRef.current.getStep()) == null ? void 0 : _e.etag) != null ? _f : null
               );
             } else {
-              const errorMessage = ((_g = (_f = command.body) == null ? void 0 : _f.errors) == null ? void 0 : _g.error) || ((_h = command.httpError) == null ? void 0 : _h.message) || "Initial request failed";
+              const errorMessage = ((_h = (_g = command.body) == null ? void 0 : _g.errors) == null ? void 0 : _h.error) || ((_i = command.httpError) == null ? void 0 : _i.message) || "Initial request failed";
               closeWithError(
                 new Error(errorMessage, {
                   cause: `method: ${action.method}, url: ${action.url}`
                 }),
                 {},
-                (_i = command.httpError) == null ? void 0 : _i.statusCode
+                (_j = command.httpError) == null ? void 0 : _j.statusCode
               );
             }
             break;
@@ -7862,7 +8117,7 @@ function useDynamicFlowController(props) {
     []
   );
   const hasMappedInitialStep = (0, import_react3.useRef)(false);
-  if (!hasMappedInitialStep.current && initialStep && !initialAction) {
+  if (!hasMappedInitialStep.current && initialStep) {
     createStep(initialStep, null);
     trackCoreEvent("Step Shown", { isFirstStep: true });
     hasMappedInitialStep.current = true;
@@ -7947,8 +8202,79 @@ function useDynamicFlow(props) {
   };
 }
 
+// src/useDynamicFlowModal.tsx
+var import_react5 = require("react");
+var useDynamicFlowModal = (props) => {
+  const _a = props, { renderers, onCompletion, onError, onCancellation, onEvent, onLink } = _a, rest = __objRest(_a, ["renderers", "onCompletion", "onError", "onCancellation", "onEvent", "onLink"]);
+  const [state, setState] = (0, import_react5.useState)({ type: "initial" });
+  const df = useDynamicFlow(__spreadProps(__spreadValues({}, rest), {
+    onCompletion: (result) => {
+      setState({ type: "completed", result });
+    },
+    onError: (error, status) => {
+      setState({ type: "error", error, status });
+    },
+    onEvent: (name, properties) => {
+      if (name === "Dynamic Flow - Step Shown") {
+        setState({ type: "in-progress" });
+      }
+      onEvent == null ? void 0 : onEvent(name, properties);
+    },
+    renderers,
+    onLink: onLink != null ? onLink : (() => true)
+  }));
+  const onUnmount = () => {
+    switch (state.type) {
+      case "completed":
+        onCompletion(state.result);
+        break;
+      case "error":
+        onError(state.error, state.status);
+        break;
+      case "initial":
+      case "in-progress":
+      case "cancelled": {
+        df.controller.cancel();
+        onCancellation == null ? void 0 : onCancellation();
+      }
+    }
+  };
+  const onClose = () => {
+    setState({ type: "cancelled" });
+  };
+  return __spreadProps(__spreadValues({}, df), {
+    modal: { body: df.view, open: state.type === "in-progress", onClose, onUnmount }
+  });
+};
+
 // src/DynamicFlowCore.tsx
 function DynamicFlowCore(props) {
   const df = useDynamicFlow(props);
   return df.view;
 }
+
+// src/domain/features/eventNames.ts
+var eventNames = [
+  "Initiated",
+  "Succeeded",
+  "Failed",
+  "Cancelled",
+  "Step Shown",
+  "Action Triggered",
+  "Action Succeeded",
+  "Action Aborted",
+  "Action Failed",
+  "Refresh Triggered",
+  "Refresh Succeeded",
+  "Refresh Aborted",
+  "Refresh Failed",
+  "OneOf Selected",
+  "OneOf Option Selected",
+  "PersistAsync Triggered",
+  "PersistAsync Succeeded",
+  "PersistAsync Failed",
+  "Polling Failed",
+  "ValidationAsync Triggered",
+  "ValidationAsync Succeeded",
+  "ValidationAsync Failed"
+];