@wise/dynamic-flow-client 5.2.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,
-  DynamicForm: () => DynamicFormCore,
+  eventNames: () => eventNames,
   findRendererPropsByType: () => findRendererPropsByType,
   makeHttpClient: () => makeHttpClient,
-  translations: () => i18n_default
+  makeRequestCache: () => makeRequestCache,
+  translations: () => i18n_default,
+  useDynamicFlow: () => useDynamicFlow,
+  useDynamicFlowModal: () => useDynamicFlowModal
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -778,7 +781,84 @@ var translations = {
 };
 var i18n_default = translations;
 
-// src/DynamicFlowCore.tsx
+// src/utils/type-validators.ts
+var isString = (value) => typeof value === "string";
+var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
+var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
+var isBoolean = (value) => typeof value === "boolean";
+var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
+var isArray = (value) => Array.isArray(value);
+var isNull = (value) => value === null;
+var isUndefined = (value) => typeof value === "undefined";
+var isNullish = (v) => isNull(v) || isUndefined(v);
+var isFile = (value) => value instanceof File;
+var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
+
+// src/renderers/utils.ts
+function findRendererPropsByType(root, type, predicate = () => true) {
+  if (isArray(root)) {
+    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+  }
+  return [
+    ...isType(root, type) && predicate(root) ? [root] : [],
+    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
+  ];
+}
+var isType = (node, type) => node.type === type;
+var getChildren = (node) => {
+  switch (node.type) {
+    case "root":
+    case "box":
+    case "container":
+    case "form":
+    case "form-section":
+    case "step":
+    case "modal":
+    case "section":
+      return node.childrenProps;
+    case "columns":
+      return [...node.startChildrenProps, ...node.endChildrenProps];
+    case "modal-layout":
+      return node.content.childrenProps;
+    case "repeatable":
+      return node.editableItemProps ? [node.editableItemProps] : [];
+    case "input-select":
+      return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
+    case "alert":
+    case "button":
+    case "input-checkbox":
+    case "input-date":
+    case "decision":
+    case "divider":
+    case "formatted-value":
+    case "heading":
+    case "hidden":
+    case "image":
+    case "instructions":
+    case "input-integer":
+    case "list":
+    case "loading-indicator":
+    case "markdown":
+    case "input-multi-select":
+    case "input-upload-multi":
+    case "input-number":
+    case "money-input":
+    case "paragraph":
+    case "progress":
+    case "review":
+    case "search":
+    case "status-list":
+    case "input-text":
+    case "input-upload":
+    case "external-confirmation":
+    case "subflow":
+      return [];
+  }
+};
+
+// src/useDynamicFlow.tsx
 var import_react4 = require("react");
 
 // src/common/errorBoundary/ErrorBoundary.tsx
@@ -882,88 +962,19 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children })
 };
 
-// src/utils/type-validators.ts
-var isString = (value) => typeof value === "string";
-var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
-var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
-var isBoolean = (value) => typeof value === "boolean";
-var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
-var isArray = (value) => Array.isArray(value);
-var isNull = (value) => value === null;
-var isUndefined = (value) => typeof value === "undefined";
-var isNullish = (v) => isNull(v) || isUndefined(v);
-var isFile = (value) => value instanceof File;
-var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
-
-// src/renderers/utils.ts
-function findRendererPropsByType(root, type, predicate = () => true) {
-  if (isArray(root)) {
-    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
-  }
-  return [
-    ...isType(root, type) && predicate(root) ? [root] : [],
-    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
-  ];
-}
-var isType = (node, type) => node.type === type;
-var getChildren = (node) => {
-  switch (node.type) {
-    case "root":
-    case "box":
-    case "container":
-    case "form":
-    case "form-section":
-    case "step":
-    case "modal":
-    case "section":
-      return node.childrenProps;
-    case "columns":
-      return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal-layout":
-      return node.content.childrenProps;
-    case "repeatable":
-      return node.editableItemProps ? [node.editableItemProps] : [];
-    case "input-select":
-      return node.childrenProps ? [node.childrenProps] : [];
-    case "tabs":
-      return node.tabs.flatMap((c) => c.childrenProps);
-    case "alert":
-    case "button":
-    case "input-checkbox":
-    case "input-date":
-    case "decision":
-    case "divider":
-    case "heading":
-    case "hidden":
-    case "image":
-    case "instructions":
-    case "input-integer":
-    case "list":
-    case "loading-indicator":
-    case "markdown":
-    case "input-multi-select":
-    case "input-upload-multi":
-    case "input-number":
-    case "money-input":
-    case "paragraph":
-    case "progress":
-    case "review":
-    case "search":
-    case "status-list":
-    case "input-text":
-    case "input-upload":
-    case "external-confirmation":
-      return [];
-  }
-};
-
 // src/renderers/CoreRootRenderer.tsx
 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
+    ] });
   }
 };
 
@@ -1276,6 +1287,29 @@ var externalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
+// src/renderers/mappers/formattedValueComponentToProps.ts
+var formattedValueComponentToProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    type: "formatted-value"
+  }, pick(
+    component,
+    "format",
+    "uid",
+    "analyticsId",
+    "control",
+    "description",
+    "help",
+    "media",
+    "tags",
+    "title"
+    // for now, we don't want to pass `value` down to the renderer to avoid the "WhateverComponent".
+    // 'value',
+  )), {
+    validationState: getValidationState(component.errors, void 0),
+    onChange: component.onChange.bind(component)
+  }), rendererMapperProps);
+};
+
 // src/renderers/mappers/formComponentToProps.ts
 var formComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
@@ -1688,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);
 };
 
@@ -1883,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)) {
@@ -1931,6 +1985,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return dividerComponentToProps(component, rendererMapperProps);
     case "external-confirmation":
       return externalComponentToProps(component, rendererMapperProps);
+    case "formatted-value":
+      return formattedValueComponentToProps(component, rendererMapperProps);
     case "form":
       return formComponentToProps(component, rendererMapperProps);
     case "heading":
@@ -1979,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":
@@ -2003,7 +2061,7 @@ var getComponentAlertProps = (component, rendererMapperProps) => "alert" in comp
   markdown: component.alert.content
 }, rendererMapperProps) : null;
 
-// src/useDynamicFlowCore.tsx
+// src/useDynamicFlowController.tsx
 var import_react3 = require("react");
 var import_react_intl7 = require("react-intl");
 
@@ -2016,16 +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: [],
-    isNativeBackEnabled: backConfig.isNativeBackEnabled,
-    isFlowCancellable: backConfig.isFlowCancellable,
+    backConfig,
+    requestCache,
     _update(updateFn) {
       update(this, updateFn);
     },
@@ -2088,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();
@@ -2098,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);
@@ -2109,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":
@@ -2127,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");
       }
     },
@@ -2147,6 +2218,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     },
     navigateBack() {
       var _a;
+      this.closeSubflow();
       if (this.stepStack.length === 1) {
         return;
       }
@@ -2159,7 +2231,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       var _a, _b;
       const navigation = (_a = this.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
-      return this.isFlowCancellable || this.stepStack.length > 1 && this.isNativeBackEnabled || stepHasBehavior;
+      return this.backConfig.isFlowCancellable || this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled || stepHasBehavior;
     }
   };
   return rootComponent;
@@ -2171,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);
@@ -2194,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",
@@ -2219,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) {
@@ -3340,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) {
@@ -3379,67 +3501,16 @@ 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/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)
+);
+var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => recursiveMerge(acc, value), null);
+var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => recursiveMerge(acc, value), 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)
-);
-var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => recursiveMerge(acc, value), null);
-var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => recursiveMerge(acc, value), null);
-
-// src/domain/components/step/StepDomainComponent.ts
-var createStepComponent = (stepProps) => {
-  const _a = stepProps, { uid, stepPolling, stepRefreshAfter, updateComponent } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "updateComponent"]);
+// src/domain/components/step/StepDomainComponent.ts
+var createStepComponent = (stepProps) => {
+  const _a = stepProps, { uid, stepPolling, stepRefreshAfter, updateComponent } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "updateComponent"]);
   const update = getInputUpdateFunction(updateComponent);
   const component = __spreadProps(__spreadValues({
     uid
@@ -3584,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 makeKey = (...requestParams) => {
+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 _a, _b;
   const [input, init] = requestParams;
   const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
@@ -4142,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)
@@ -5600,6 +5693,83 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
+// src/domain/components/FormattedValueComponent.ts
+var createFormattedValueComponent = (props, updateComponent) => {
+  const {
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    summariser,
+    title,
+    tags,
+    value,
+    schemaOnChange
+  } = props;
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "formatted-value",
+    kind: "input",
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    title,
+    tags,
+    value,
+    async getSubmittableValue() {
+      return this.getSubmittableValueSync();
+    },
+    getSubmittableValueSync() {
+      return this.getLocalValue();
+    },
+    getSummary() {
+      return summariser(this.getLocalValue());
+    },
+    getLocalValue() {
+      return this.value;
+    },
+    validate() {
+      return true;
+    },
+    onChange(newValue) {
+      update(this, (draft) => {
+        draft.value = newValue;
+      });
+      void (schemaOnChange == null ? void 0 : schemaOnChange());
+    }
+  };
+};
+
+// src/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.ts
+var objectSchemaToFormattedValueComponent = (schemaMapperProps, mapperProps) => {
+  const { onBehavior } = mapperProps;
+  const { schema } = schemaMapperProps;
+  const { format } = schema;
+  return createFormattedValueComponent(
+    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
+      format,
+      value: schemaMapperProps.model,
+      schemaOnChange: getSchemaOnChange(schema, onBehavior)
+    }),
+    mapperProps.updateComponent
+  );
+};
+
 // src/domain/components/MoneyInputComponent.ts
 var createMoneyInputComponent = (moneyInputProps, updateComponent) => {
   const _a = moneyInputProps, {
@@ -6013,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 = [];
@@ -6622,9 +6798,16 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isObjectSchema(schema)) {
-    if (schema.format === "money") {
+    const { format } = schema;
+    if (format === "money") {
       return objectSchemaToMoneyInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
     }
+    if (format != null && Object.keys(schema.properties).length === 0) {
+      return objectSchemaToFormattedValueComponent(
+        __spreadProps(__spreadValues({}, schemaMapperProps), { schema: __spreadProps(__spreadValues({}, schema), { format }) }),
+        mapperProps
+      );
+    }
     return objectSchemaToObjectComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isIntegerSchema(schema)) {
@@ -6747,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, {
@@ -6765,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,
@@ -6780,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;
@@ -6846,7 +7253,7 @@ var mapStepToComponent = (_a) => {
     title,
     tags,
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
-    submissionRequestsCache,
+    requestCache,
     step,
     updateComponent,
     trackEvent,
@@ -6856,7 +7263,7 @@ var mapStepToComponent = (_a) => {
     httpClient: mapperProps.httpClient,
     model: stepComponent.getSubmittableValueSync(),
     behaviors: submissionBehaviors,
-    requestsCache: submissionRequestsCache
+    requestCache
   });
   return stepComponent;
 };
@@ -6879,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;
@@ -7022,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
@@ -7358,19 +7683,18 @@ function useStableCallback(handler) {
   return (0, import_react2.useCallback)((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
-// src/useDynamicFlowCore.tsx
-function useDynamicFlowCore(props) {
-  const _a = props, { flowId, initialAction, initialStep, features } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features"]);
+// src/useDynamicFlowController.tsx
+function useDynamicFlowController(props) {
+  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),
@@ -7378,10 +7702,15 @@ function useDynamicFlowCore(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());
@@ -7390,12 +7719,15 @@ function useDynamicFlowCore(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();
     };
@@ -7408,6 +7740,7 @@ function useDynamicFlowCore(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
@@ -7422,12 +7755,14 @@ function useDynamicFlowCore(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,
@@ -7466,7 +7801,8 @@ function useDynamicFlowCore(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));
@@ -7507,7 +7843,7 @@ function useDynamicFlowCore(props) {
     onCancellation();
   }, []);
   const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
-    var _a2;
+    var _a2, _b, _c;
     switch (behavior.type) {
       case "back": {
         if (behavior.action) {
@@ -7598,6 +7934,33 @@ function useDynamicFlowCore(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;
     }
@@ -7606,16 +7969,16 @@ function useDynamicFlowCore(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) {
@@ -7627,6 +7990,7 @@ function useDynamicFlowCore(props) {
           }
           case "replace-step": {
             const isFirstStep = !rootComponentRef.current.hasStep();
+            rootComponentRef.current.closeSubflow();
             createStep(command.step, command.etag);
             trackCoreEvent("Step Shown", { isFirstStep });
             break;
@@ -7634,7 +7998,7 @@ function useDynamicFlowCore(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(
@@ -7648,16 +8012,16 @@ function useDynamicFlowCore(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;
@@ -7753,25 +8117,25 @@ function useDynamicFlowCore(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;
   }
-  return { rootComponent: rootComponentRef.current };
+  return {
+    rootComponent: rootComponentRef.current,
+    cancel: closeWithCancellation
+  };
 }
 var useRerender = () => {
   const [, setState] = (0, import_react3.useState)({});
   return (0, import_react3.useCallback)(() => setState({}), []);
 };
 
-// src/utils/normalise-flow-id.ts
-var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
-
-// src/utils/scrollToTop.ts
-var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
+// src/utils/getScrollToTop.ts
+var getScrollToTop = (normalisedFlowId, className2) => (behavior) => {
   var _a;
-  const element = document.querySelector(`div#${normalisedFlowId}.${className3}`);
+  const element = document.querySelector(`div#${normalisedFlowId}.${className2}`);
   if (!element || !window) {
     return;
   }
@@ -7782,10 +8146,13 @@ var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
   }
 };
 
-// src/DynamicFlowCore.tsx
+// src/utils/normalise-flow-id.ts
+var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
+
+// src/useDynamicFlow.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var className = "dynamic-flow";
-function DynamicFlowCore(props) {
+function useDynamicFlow(props) {
   var _a;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
@@ -7797,7 +8164,10 @@ function DynamicFlowCore(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), { features, scrollToTop }));
+  const { rootComponent, cancel } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+    features,
+    scrollToTop
+  }));
   const render = (0, import_react4.useMemo)(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7810,95 +8180,101 @@ function DynamicFlowCore(props) {
     }),
     stepLoadingState: rootComponent.getLoadingState()
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
-        onError == null ? void 0 : onError(error);
-        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
-    }
-  );
+  return {
+    controller: {
+      getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+      validate: () => rootComponent.validate(),
+      cancel
+    },
+    view: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ErrorBoundary_default,
+      {
+        onError: (error) => {
+          onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
+          onError == null ? void 0 : onError(error);
+          onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", {
+            errorMessage: getErrorMessage(error)
+          });
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+      }
+    )
+  };
 }
 
-// src/DynamicFormCore.tsx
+// src/useDynamicFlowModal.tsx
 var import_react5 = require("react");
-
-// src/utils/openLinkInNewTab.tsx
-var openLinkInNewTab = (url) => {
-  var _a;
-  try {
-    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
-    return Boolean(w);
-  } catch (e) {
-    return false;
-  }
-};
-
-// src/DynamicFormCore.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var className2 = "dynamic-flow";
-var DynamicFormCore = (0, import_react5.forwardRef)(function DynamicFormCore2(props, ref) {
-  var _a;
-  const {
-    onCompletion = () => {
+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);
     },
-    httpClient,
-    onEvent,
-    onError,
-    onLink = openLinkInNewTab,
-    renderers
-  } = props;
-  const normalisedFlowId = normaliseFlowId(props.flowId);
-  const scrollToTop = (0, import_react5.useMemo)(
-    () => getScrollToTop(normalisedFlowId, className2),
-    [normalisedFlowId]
-  );
-  const features = (0, import_react5.useMemo)(() => {
-    var _a2;
-    return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
-  }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({
-    onCompletion
-  }, props), {
-    features,
-    scrollToTop,
-    onLink
+    renderers,
+    onLink: onLink != null ? onLink : (() => true)
   }));
-  (0, import_react5.useImperativeHandle)(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a2;
-        return (_a2 = await rootComponent.getSubmittableValue()) != null ? _a2 : null;
-      },
-      validate: () => rootComponent.validate()
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const render = (0, import_react5.useMemo)(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
-    [renderers]
-  );
-  const tree = componentToRendererProps(rootComponent, {
-    features,
-    render,
-    httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
-    }),
-    stepLoadingState: rootComponent.getLoadingState()
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed");
-        onError(error);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className: className2, children: render(tree) })
+  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"
+];