@wise/dynamic-flow-client 5.5.1 → 5.6.1

package/build/main.mjs

@@ -1307,9 +1307,10 @@ var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps
 });
 
 // src/domain/mappers/utils/layout-utils.ts
-var removeMarginFromLayout = (component) => {
-  return __spreadProps(__spreadValues({}, component), {
-    margin: "xs"
+var normaliseMarginInLastComponent = (container) => {
+  return container.map((component, index) => {
+    const shouldRemoveMargin = index === container.length - 1 && component.margin === void 0;
+    return shouldRemoveMargin ? __spreadProps(__spreadValues({}, component), { margin: "xs" }) : component;
   });
 };
 
@@ -1322,16 +1323,9 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   margin: margin != null ? margin : "md",
   width: width != null ? width : "xl",
   tags,
-  components: components.map((component, index) => {
-    const shouldRemoveMargin = index === components.length - 1 && component.margin === void 0;
-    const componentWithAdjustedMargin = shouldRemoveMargin ? removeMarginFromLayout(component) : component;
-    return mapLayoutToComponent(
-      `${uid}.box-${index}`,
-      componentWithAdjustedMargin,
-      mapperProps,
-      schemaComponents
-    );
-  })
+  components: normaliseMarginInLastComponent(components).map(
+    (component, index) => mapLayoutToComponent(`${uid}.box-${index}`, component, mapperProps, schemaComponents)
+  )
 });
 
 // src/domain/components/ButtonComponent.ts
@@ -2293,6 +2287,35 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
   mapperProps.onComponentUpdate
 );
 
+// src/domain/components/step/ExternalConfirmationComponent.ts
+var createExternalConfirmation = (uid, url, onComponentUpdate) => {
+  const update = getInputUpdateFunction(onComponentUpdate);
+  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) {
@@ -2332,526 +2355,162 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
-// src/controller/getErrorMessage.ts
-var getErrorMessage = (error) => {
-  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
-};
+// 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/controller/response-utils.ts
-import { validateActionResponse, validateSubflowResponse } from "@wise/dynamic-flow-types/spec";
-var parseResponseBodyAsJsonElement = async (response) => {
-  assertResponseIsValid(response);
-  try {
-    return await response.json();
-  } catch (e) {
-    return null;
-  }
-};
-var parseResponseBodyAsText = async (response) => {
-  try {
-    return await response.text();
-  } catch (e) {
-    return null;
-  }
+// src/domain/components/step/StepDomainComponent.ts
+var createStepComponent = (stepProps) => {
+  const _a = stepProps, { uid, stepPolling, stepRefreshAfter, stepPrefetch, onComponentUpdate } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "stepPrefetch", "onComponentUpdate"]);
+  const update = getInputUpdateFunction(onComponentUpdate);
+  const component = __spreadProps(__spreadValues({
+    uid
+  }, rest), {
+    type: "step",
+    kind: "step",
+    modals: [],
+    requestCache: stepPrefetch.requestCache,
+    dismissModal() {
+      var _a2;
+      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+    },
+    dismissAllModals() {
+      this._update((draft) => {
+        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
+      });
+    },
+    showModal(modal) {
+      this._update((draft) => {
+        draft.modals = [...draft.modals, modal];
+      });
+    },
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.externalConfirmation ? [...this.layoutComponents, this.externalConfirmation] : this.layoutComponents;
+    },
+    getModals() {
+      return this.modals;
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.schemaComponents);
+    },
+    getSubmittableValueSync() {
+      return getSubmittableDataSync(this.schemaComponents);
+    },
+    getLocalValue() {
+      return getLocalValues(this.schemaComponents);
+    },
+    validate() {
+      return this.schemaComponents.every(
+        (inputComponent) => inputComponent.isSchemaReferencedInStep ? inputComponent.validate() : true
+      );
+    },
+    setLoadingState(loadingState) {
+      this._update((draft) => {
+        draft.loadingState = loadingState;
+      });
+    },
+    start() {
+      stepPolling == null ? void 0 : stepPolling.start();
+      stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
+      stepPrefetch.start(this.getSubmittableValueSync());
+    },
+    stop() {
+      stepPolling == null ? void 0 : stepPolling.stop();
+      stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      stepPrefetch.stop();
+      this._update((draft) => {
+        draft.modals = [];
+      });
+    }
+  });
+  return component;
 };
-function isActionResponseBody(body) {
-  return validateActionResponse(body).valid;
-}
-function assertActionResponseBody(body) {
-  if (!isObject(body) || !isObject(body.action)) {
-    throw new Error(
-      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
-    );
+
+// src/domain/features/polling/getStepPolling.ts
+var getStepPolling = ({
+  pollingConfig,
+  logEvent,
+  onBehavior,
+  onPoll,
+  registerSubmissionBehavior
+}) => {
+  const { interval, delay = interval, maxAttempts, url, onError } = pollingConfig;
+  let abortController = new AbortController();
+  let intervalRef = null;
+  if (delay == null) {
+    throw new Error("Polling configuration must include delay or interval");
   }
-}
-function assertModalResponseBody(body) {
-  if (isObject(body)) {
-    if ("content" in body && isArray(body.content)) {
+  const onErrorBehavior = getDomainLayerBehavior(onError, [], registerSubmissionBehavior);
+  let attempts = 0;
+  const poll = () => {
+    attempts += 1;
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    onPoll(url, onErrorBehavior, signal).then((result) => {
+      if (result) {
+        stop();
+        return;
+      }
+      if (attempts >= maxAttempts && !signal.aborted) {
+        void onBehavior(onErrorBehavior);
+        stop();
+      }
+    }).catch(() => {
+    });
+  };
+  const start = () => {
+    attempts = 0;
+    intervalRef = setInterval(poll, delay * 1e3);
+    poll();
+  };
+  const stop = () => {
+    if (!intervalRef) {
+      logEvent("warning", "Attempted to stop polling but it was not started");
       return;
     }
-  }
-  throw new Error(
-    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
-  );
-}
-function assertSubflowResponseBody(body) {
-  const { valid } = validateSubflowResponse(body);
-  if (valid) {
-    return;
-  }
-  throw new Error("Incorrect response body in subflow response.");
-}
-function isErrorResponseBody(body) {
-  return Boolean(
-    isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
-  );
-}
-function assertStepResponseBody(body) {
-  if (!isObject(body)) {
-    throw new Error("Incorrect response body in step response. Expected an object.");
-  }
-}
-var assertResponseIsValid = (response) => {
-  if (!isResponse(response)) {
-    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
-  }
-  if (response.bodyUsed) {
-    throw new Error(
-      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
-    );
-  }
+    clearTimeout(intervalRef);
+    abortController.abort();
+  };
+  return { start, stop };
 };
-var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
-// src/controller/handleErrorResponse.ts
-var handleErrorResponse = async (response, actionId, trackEvent) => {
-  const body = await parseResponseBodyAsJsonElement(response.clone());
-  if (isErrorResponseBody(body)) {
-    const refreshUrl = body.refreshUrl || body.refreshFormUrl;
-    const { error, validation, analytics } = body;
-    trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
-    const errors = { error, validation };
-    return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
-      type: "error",
-      body: { errors, analytics },
-      httpError: { statusCode: response.status }
-    };
+// src/domain/features/refreshAfter/getStepRefreshAfter.ts
+var ONE_SECOND = 1e3;
+var getStepRefreshAfter = ({
+  refreshAfter,
+  logEvent,
+  onBehavior
+}) => {
+  let timeout = null;
+  const targetTime = new Date(refreshAfter).getTime();
+  if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
+    throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
   }
-  trackEvent("Action Failed", { actionId, statusCode: response.status });
-  const errorMessage = await parseResponseBodyAsText(response);
+  const start = () => {
+    const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
+    timeout = setTimeout(() => {
+      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
+    }, timeLeft);
+  };
   return {
-    type: "error",
-    httpError: {
-      message: errorMessage || void 0,
-      statusCode: response.status
+    start,
+    stop: () => {
+      if (!timeout) {
+        logEvent("warning", "Attempted to stop refreshAfter but it was not started");
+        return;
+      }
+      clearTimeout(timeout);
     }
   };
 };
 
-// src/controller/getResponseType.ts
-var responseTypes = ["step", "action", "exit", "modal", "subflow"];
-var getResponseType = (headers, body) => {
-  const headerResponseType = getResponseTypeFromHeader(headers);
-  if (headerResponseType) {
-    return headerResponseType;
-  }
-  if (isObject(body) && body.action) {
-    return "action";
-  }
-  return "step";
-};
-var getResponseTypeFromHeader = (headers) => {
-  if (headers == null ? void 0 : headers.has("X-Df-Response-Type")) {
-    const type = headers.get("X-Df-Response-Type");
-    assertDFResponseType(type);
-    return type;
-  }
-  if (headers == null ? void 0 : headers.has("X-Df-Exit")) {
-    return "exit";
-  }
-  return void 0;
-};
-function assertDFResponseType(type) {
-  if (!responseTypes.includes(type)) {
-    throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal', 'subflow'."
-    );
-  }
-}
-
-// src/controller/makeSafeHttpClient.ts
-var makeSafeHttpClient = (httpClient) => async (...props) => {
-  try {
-    return await httpClient(...props);
-  } catch (e) {
-    return null;
-  }
-};
-
-// src/controller/executeRequest.ts
-var executeRequest = async (props) => {
-  const { exit, request, requestCache, httpClient, trackEvent, logEvent } = props;
-  const { url, method, body } = request;
-  const response = await getCachedOrFetch(
-    [
-      url,
-      {
-        method,
-        body: body ? JSON.stringify(body) : void 0,
-        headers: { "Content-Type": "application/json" }
-      }
-    ],
-    requestCache,
-    httpClient
-  );
-  if (!response) {
-    const extra = { errorMessage: "Network Error" };
-    trackEvent("Request Failed", extra);
-    logEvent("error", "Dynamic Flow - Request Failed Unexpectedly", extra);
-    return { type: "error" };
-  }
-  if (!response.ok) {
-    return handleErrorResponse(response, void 0, trackEvent);
-  }
-  const responseBody = await parseResponseBodyAsJsonElement(response);
-  const responseType = getResponseType(response.headers, responseBody);
-  if (exit) {
-    return { type: "complete", result: responseBody };
-  }
-  switch (responseType) {
-    case "step": {
-      const etag = response.headers.get("etag") || null;
-      assertStepResponseBody(responseBody);
-      return { type: "replace-step", step: responseBody, etag };
-    }
-    case "exit": {
-      return { type: "complete", result: responseBody };
-    }
-    case "action": {
-      assertActionResponseBody(responseBody);
-      return {
-        type: "behavior",
-        behavior: {
-          type: "action",
-          action: responseBody.action
-        }
-      };
-    }
-    case "subflow": {
-      assertSubflowResponseBody(responseBody);
-      return {
-        type: "behavior",
-        behavior: __spreadProps(__spreadValues({}, responseBody), {
-          type: "subflow",
-          onCompletion: responseBody.onCompletion ? normaliseBehavior(responseBody.onCompletion, []) : void 0,
-          onError: responseBody.onError ? normaliseBehavior(responseBody.onError, []) : void 0
-        })
-      };
-    }
-    case "modal": {
-      assertModalResponseBody(responseBody);
-      return { type: "behavior", behavior: __spreadProps(__spreadValues({}, responseBody), { type: "modal" }) };
-    }
-    default: {
-      throw new Error(`Unsupported response type: ${String(responseType)}`);
-    }
-  }
-};
-var getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
-  const cachedPromise = requestCache.get(requestParams);
-  if (cachedPromise) {
-    const cachedResponse = await cachedPromise;
-    if (cachedResponse == null ? void 0 : cachedResponse.ok) {
-      return cachedResponse;
-    }
-  }
-  return makeSafeHttpClient(httpClient)(...requestParams);
-};
-
-// src/controller/executeSubmission.ts
-var executeSubmission = async (props) => {
-  const { httpClient, requestCache, trackEvent, logEvent } = props;
-  const triggerAction = async (action, model, isInitial) => {
-    var _a, _b;
-    const { exit, url, result = null, id: actionId } = action;
-    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
-    };
-    trackSubmissionEvent("Action Triggered", { actionId });
-    if (exit && !url) {
-      trackSubmissionEvent("Action Succeeded", { actionId });
-      return { type: "complete", result };
-    }
-    try {
-      const command = await executeRequest({
-        exit,
-        request: createRequestFromAction(action, model),
-        requestCache,
-        httpClient,
-        trackEvent: (name, properties) => {
-          trackSubmissionEvent(name, __spreadProps(__spreadValues({}, properties), { actionId }));
-        },
-        logEvent
-      });
-      switch (command.type) {
-        case "error": {
-          trackSubmissionEvent("Action Failed", __spreadValues({
-            actionId,
-            statusCode: (_a = command.httpError) == null ? void 0 : _a.statusCode
-          }, (_b = command.body) == null ? void 0 : _b.analytics));
-          return command;
-        }
-        case "behavior": {
-          if (command.behavior.type === "action") {
-            trackSubmissionEvent("Action Succeeded", { actionId });
-            return await 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/components/step/ExternalConfirmationComponent.ts
-var createExternalConfirmation = (uid, url, onComponentUpdate) => {
-  const update = getInputUpdateFunction(onComponentUpdate);
-  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, onComponentUpdate } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "onComponentUpdate"]);
-  const update = getInputUpdateFunction(onComponentUpdate);
-  const component = __spreadProps(__spreadValues({
-    uid
-  }, rest), {
-    type: "step",
-    kind: "step",
-    modals: [],
-    dismissModal() {
-      var _a2;
-      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
-    },
-    dismissAllModals() {
-      this._update((draft) => {
-        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
-      });
-    },
-    showModal(modal) {
-      this._update((draft) => {
-        draft.modals = [...draft.modals, modal];
-      });
-    },
-    _update(updateFn) {
-      update(this, updateFn);
-    },
-    getChildren() {
-      return this.externalConfirmation ? [...this.layoutComponents, this.externalConfirmation] : this.layoutComponents;
-    },
-    getModals() {
-      return this.modals;
-    },
-    async getSubmittableValue() {
-      return getSubmittableData(this.schemaComponents);
-    },
-    getSubmittableValueSync() {
-      return getSubmittableDataSync(this.schemaComponents);
-    },
-    getLocalValue() {
-      return getLocalValues(this.schemaComponents);
-    },
-    validate() {
-      return this.schemaComponents.every(
-        (inputComponent) => inputComponent.isSchemaReferencedInStep ? inputComponent.validate() : true
-      );
-    },
-    setLoadingState(loadingState) {
-      this._update((draft) => {
-        draft.loadingState = loadingState;
-      });
-    },
-    start() {
-      stepPolling == null ? void 0 : stepPolling.start();
-      stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
-    },
-    stop() {
-      stepPolling == null ? void 0 : stepPolling.stop();
-      stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
-      this._update((draft) => {
-        draft.modals = [];
-      });
-    }
-  });
-  return component;
-};
-
-// src/domain/features/polling/getStepPolling.ts
-var getStepPolling = ({
-  pollingConfig,
-  logEvent,
-  onBehavior,
-  onPoll,
-  registerSubmissionBehavior
-}) => {
-  const { interval, delay = interval, maxAttempts, url, onError } = pollingConfig;
-  let abortController = new AbortController();
-  let intervalRef = null;
-  if (delay == null) {
-    throw new Error("Polling configuration must include delay or interval");
-  }
-  const onErrorBehavior = getDomainLayerBehavior(onError, [], registerSubmissionBehavior);
-  let attempts = 0;
-  const poll = () => {
-    attempts += 1;
-    abortController.abort();
-    abortController = new AbortController();
-    const { signal } = abortController;
-    onPoll(url, onErrorBehavior, signal).then((result) => {
-      if (result) {
-        stop();
-        return;
-      }
-      if (attempts >= maxAttempts && !signal.aborted) {
-        void onBehavior(onErrorBehavior);
-        stop();
-      }
-    }).catch(() => {
-    });
-  };
-  const start = () => {
-    attempts = 0;
-    intervalRef = setInterval(poll, delay * 1e3);
-    poll();
-  };
-  const stop = () => {
-    if (!intervalRef) {
-      logEvent("warning", "Attempted to stop polling but it was not started");
-      return;
-    }
-    clearTimeout(intervalRef);
-    abortController.abort();
-  };
-  return { start, stop };
-};
-
-// src/domain/features/refreshAfter/getStepRefreshAfter.ts
-var ONE_SECOND = 1e3;
-var getStepRefreshAfter = ({
-  refreshAfter,
-  logEvent,
-  onBehavior
-}) => {
-  let timeout = null;
-  const targetTime = new Date(refreshAfter).getTime();
-  if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
-    throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
-  }
-  const start = () => {
-    const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
-    timeout = setTimeout(() => {
-      void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
-    }, timeLeft);
-  };
-  return {
-    start,
-    stop: () => {
-      if (!timeout) {
-        logEvent("warning", "Attempted to stop refreshAfter but it was not started");
-        return;
-      }
-      clearTimeout(timeout);
-    }
-  };
-};
-
-// src/domain/prefetching/request-cache.ts
-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;
-    },
-    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 _a, _b;
-  const [input, init] = requestParams;
-  const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
-  const key = JSON.stringify({
-    url,
-    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
-    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
-    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
-  });
-  return key;
-};
-
 // src/domain/components/utils/isOrWasValid.ts
 var isOrWasValid = (getErrors, previous, current) => {
   const wasValid = getErrors(previous).length === 0 && previous !== null;
@@ -3330,6 +2989,72 @@ var getInitialValidationAsyncState = () => ({
   messages: {}
 });
 
+// src/controller/response-utils.ts
+import { validateActionResponse, validateSubflowResponse } from "@wise/dynamic-flow-types/spec";
+var parseResponseBodyAsJsonElement = async (response) => {
+  assertResponseIsValid(response);
+  try {
+    return await response.json();
+  } catch (e) {
+    return null;
+  }
+};
+var parseResponseBodyAsText = async (response) => {
+  try {
+    return await response.text();
+  } catch (e) {
+    return null;
+  }
+};
+function isActionResponseBody(body) {
+  return validateActionResponse(body).valid;
+}
+function assertActionResponseBody(body) {
+  if (!isObject(body) || !isObject(body.action)) {
+    throw new Error(
+      "Incorrect response body in action response. Expected an object satisfying the type { action: Action }."
+    );
+  }
+}
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
+    }
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
+function assertSubflowResponseBody(body) {
+  const { valid } = validateSubflowResponse(body);
+  if (valid) {
+    return;
+  }
+  throw new Error("Incorrect response body in subflow response.");
+}
+function isErrorResponseBody(body) {
+  return Boolean(
+    isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
+  );
+}
+function assertStepResponseBody(body) {
+  if (!isObject(body)) {
+    throw new Error("Incorrect response body in step response. Expected an object.");
+  }
+}
+var assertResponseIsValid = (response) => {
+  if (!isResponse(response)) {
+    throw new Error("Incorrect type of response from fetch. Expected object of type Response.");
+  }
+  if (response.bodyUsed) {
+    throw new Error(
+      "The body of the provided Response object has already been used. Every request must respond with a new Response object."
+    );
+  }
+};
+var isResponse = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
+
 // src/domain/features/utils/response-utils.ts
 var getAnalyticsFromErrorResponse = (json) => {
   if (!isErrorResponseBody(json)) {
@@ -5811,229 +5536,529 @@ var createTextInputComponent = (textInputProps, onComponentUpdate) => {
   return inputComponent;
 };
 
-// src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToTextInputComponent.ts
-var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
-  const {
-    autocapitalization,
-    autocompleteHint,
-    control,
-    default: defaultValue,
-    displayFormat,
-    format,
-    maxLength,
-    minLength,
-    suggestions,
-    validationMessages
-  } = schema;
-  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange, logEvent } = mapperProps;
-  const controlForLegacyFormat = getControlForLegacyFormat(format);
-  const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
-  const validLocalValue = isString(localValue) ? localValue : null;
-  const validModel = isString(model) ? model : defaultValue != null ? defaultValue : null;
-  const value = onPersistAsync ? validLocalValue : validModel;
-  return createTextInputComponent(
-    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
-      autocapitalization,
-      autoComplete: getAutocompleteString(autocompleteHint),
-      checks: schema.hidden ? [] : [
-        getRequiredCheck(required, errorMessageFunctions),
-        getAboveMaxLengthCheck(schema, errorMessageFunctions),
-        getBelowMinLengthCheck(schema, errorMessageFunctions),
-        getNotAdheringToPatternCheck(schema, errorMessageFunctions, { logEvent })
-      ],
-      control: control != null ? control : controlForLegacyFormat,
-      displayFormat,
-      maxLength,
-      minLength,
-      suggestions: mapStringSchemaSuggestions(suggestions, mapperProps.logEvent),
-      value,
-      validationAsyncState,
-      schemaOnChange: getSchemaOnChange(schema, onBehavior),
-      performValidationAsync,
-      onValueChange
-    }),
-    onComponentUpdate
-  );
+// src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToTextInputComponent.ts
+var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
+  const {
+    autocapitalization,
+    autocompleteHint,
+    control,
+    default: defaultValue,
+    displayFormat,
+    format,
+    maxLength,
+    minLength,
+    suggestions,
+    validationMessages
+  } = schema;
+  const { getErrorMessageFunctions, onComponentUpdate, onBehavior, onValueChange, logEvent } = mapperProps;
+  const controlForLegacyFormat = getControlForLegacyFormat(format);
+  const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
+  const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
+    schemaMapperProps,
+    mapperProps
+  );
+  const validLocalValue = isString(localValue) ? localValue : null;
+  const validModel = isString(model) ? model : defaultValue != null ? defaultValue : null;
+  const value = onPersistAsync ? validLocalValue : validModel;
+  return createTextInputComponent(
+    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
+      autocapitalization,
+      autoComplete: getAutocompleteString(autocompleteHint),
+      checks: schema.hidden ? [] : [
+        getRequiredCheck(required, errorMessageFunctions),
+        getAboveMaxLengthCheck(schema, errorMessageFunctions),
+        getBelowMinLengthCheck(schema, errorMessageFunctions),
+        getNotAdheringToPatternCheck(schema, errorMessageFunctions, { logEvent })
+      ],
+      control: control != null ? control : controlForLegacyFormat,
+      displayFormat,
+      maxLength,
+      minLength,
+      suggestions: mapStringSchemaSuggestions(suggestions, mapperProps.logEvent),
+      value,
+      validationAsyncState,
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
+      performValidationAsync,
+      onValueChange
+    }),
+    onComponentUpdate
+  );
+};
+var getControlForLegacyFormat = (format) => {
+  if (format && ["numeric", "phone-number", "email", "password"].includes(format)) {
+    return format;
+  }
+  return void 0;
+};
+
+// src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToComponent.ts
+var stringSchemaToComponent = (schemaMapperProps, mapperProps) => {
+  const { schema } = schemaMapperProps;
+  if (isStringSchemaWithBase64(schema)) {
+    return stringSchemaToUploadInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  switch (schema.format) {
+    case "date":
+      return stringSchemaToDateInputComponent(schemaMapperProps, mapperProps);
+    default:
+      return stringSchemaToTextInputComponent(schemaMapperProps, mapperProps);
+  }
+};
+var isStringSchemaWithBase64 = (schema) => {
+  return schema.format === "base64url" && !("persistAsync" in schema);
+};
+
+// src/domain/mappers/mapSchemaToComponent.ts
+var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
+  const { uid, schema } = schemaMapperProps;
+  if (isConstSchema(schema)) {
+    return constSchemaToComponent(uid, __spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isSchemaWithPersistAsync(schema)) {
+    return persistAsyncSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isAllOfSchema(schema)) {
+    return allOfSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isOneOfSchema(schema)) {
+    return oneOfSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isBooleanSchema(schema)) {
+    return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isObjectSchema(schema)) {
+    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)) {
+    return integerSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isNumberSchema(schema)) {
+    return numberSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isStringSchema(schema)) {
+    return stringSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isArraySchema(schema)) {
+    return arraySchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  if (isBlobSchema(schema)) {
+    if (!schemaMapperProps.onPersistAsync) {
+      throw new Error(
+        "Blob schemas can only be used as the schema of a persist async configuration."
+      );
+    }
+    return blobSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  }
+  throw new Error("Not yet supported");
+};
+
+// src/domain/mappers/mapStepSchemas.ts
+var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaIds) => {
+  const isReferenced = (schemaId) => schemaId != null && referencedSchemaIds.includes(schemaId);
+  return step.schemas.map((schema, i) => {
+    var _a, _b;
+    const schemaComponent = mapSchemaToComponent(
+      {
+        uid: `${uid}.schemas-${i}.${schema.$id}`,
+        schemaId: schema.$id,
+        schema,
+        model: (_a = step.model) != null ? _a : null,
+        localValue: stepLocalValue,
+        validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
+        required: true
+      },
+      mapperProps
+    );
+    return __spreadProps(__spreadValues({}, schemaComponent), {
+      isSchemaReferencedInStep: isReferenced(schema.$id)
+    });
+  });
+};
+
+// src/domain/mappers/mapToolbarToComponent.ts
+var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
+  if (!toolbar) {
+    return void 0;
+  }
+  const { onBehavior } = mapperProps;
+  return __spreadProps(__spreadValues({}, toolbar), {
+    type: "toolbar",
+    uid: `${uid}.toolbar`,
+    tags: toolbar.tags,
+    items: toolbar.items.map((item) => {
+      const context = item.context ? mapLegacyContext(item.context) : void 0;
+      const behavior = getDomainLayerBehavior(
+        { behavior: item.behavior },
+        [],
+        mapperProps.registerSubmissionBehavior
+      );
+      return __spreadProps(__spreadValues({}, item), {
+        context: context ? mapLegacyContext(context) : void 0,
+        disabled: !!item.disabled,
+        tags: item.tags,
+        onClick: () => {
+          void onBehavior(behavior);
+        }
+      });
+    })
+  });
+};
+
+// src/domain/mappers/utils/groupLayoutByPinned.ts
+var groupLayoutByPinned = (layouts) => {
+  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
 };
-var getControlForLegacyFormat = (format) => {
-  if (format && ["numeric", "phone-number", "email", "password"].includes(format)) {
-    return format;
+var groupLayout = (acc, layout) => {
+  if (layout.type === "button" && layout.pinOrder !== void 0) {
+    return {
+      pinned: [...acc.pinned, layout],
+      nonPinned: acc.nonPinned
+    };
   }
-  return void 0;
+  if (hasColumns(layout)) {
+    const leftChildren = groupLayoutByPinned(layout.left);
+    const rightChildren = groupLayoutByPinned(layout.right);
+    return {
+      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          left: leftChildren.nonPinned,
+          right: rightChildren.nonPinned
+        })
+      ]
+    };
+  }
+  if (hasChildren(layout)) {
+    const childComponents = groupLayoutByPinned(layout.components);
+    return {
+      pinned: [...acc.pinned, ...childComponents.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          components: childComponents.nonPinned
+        })
+      ]
+    };
+  }
+  return {
+    pinned: [...acc.pinned],
+    nonPinned: [...acc.nonPinned, layout]
+  };
 };
+var hasChildren = (component) => "components" in component;
+var hasColumns = (component) => "right" in component && "left" in component;
 
-// src/domain/mappers/schema/stringSchemaToComponent/stringSchemaToComponent.ts
-var stringSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema } = schemaMapperProps;
-  if (isStringSchemaWithBase64(schema)) {
-    return stringSchemaToUploadInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+// src/controller/getErrorMessage.ts
+var getErrorMessage = (error) => {
+  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
+};
+
+// src/controller/handleErrorResponse.ts
+var handleErrorResponse = async (response, actionId, trackEvent) => {
+  const body = await parseResponseBodyAsJsonElement(response.clone());
+  if (isErrorResponseBody(body)) {
+    const refreshUrl = body.refreshUrl || body.refreshFormUrl;
+    const { error, validation, analytics } = body;
+    trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
+    const errors = { error, validation };
+    return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
+      type: "error",
+      body: { errors, analytics },
+      httpError: { statusCode: response.status }
+    };
   }
-  switch (schema.format) {
-    case "date":
-      return stringSchemaToDateInputComponent(schemaMapperProps, mapperProps);
-    default:
-      return stringSchemaToTextInputComponent(schemaMapperProps, mapperProps);
+  trackEvent("Action Failed", { actionId, statusCode: response.status });
+  const errorMessage = await parseResponseBodyAsText(response);
+  return {
+    type: "error",
+    httpError: {
+      message: errorMessage || void 0,
+      statusCode: response.status
+    }
+  };
+};
+
+// src/controller/getResponseType.ts
+var responseTypes = ["step", "action", "exit", "modal", "subflow"];
+var getResponseType = (headers, body) => {
+  const headerResponseType = getResponseTypeFromHeader(headers);
+  if (headerResponseType) {
+    return headerResponseType;
   }
+  if (isObject(body) && body.action) {
+    return "action";
+  }
+  return "step";
 };
-var isStringSchemaWithBase64 = (schema) => {
-  return schema.format === "base64url" && !("persistAsync" in schema);
+var getResponseTypeFromHeader = (headers) => {
+  if (headers == null ? void 0 : headers.has("X-Df-Response-Type")) {
+    const type = headers.get("X-Df-Response-Type");
+    assertDFResponseType(type);
+    return type;
+  }
+  if (headers == null ? void 0 : headers.has("X-Df-Exit")) {
+    return "exit";
+  }
+  return void 0;
 };
-
-// src/domain/mappers/mapSchemaToComponent.ts
-var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { uid, schema } = schemaMapperProps;
-  if (isConstSchema(schema)) {
-    return constSchemaToComponent(uid, __spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+function assertDFResponseType(type) {
+  if (!responseTypes.includes(type)) {
+    throw new Error(
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal', 'subflow'."
+    );
   }
-  if (isSchemaWithPersistAsync(schema)) {
-    return persistAsyncSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+}
+
+// src/controller/makeSafeHttpClient.ts
+var makeSafeHttpClient = (httpClient) => async (...props) => {
+  try {
+    return await httpClient(...props);
+  } catch (e) {
+    return null;
   }
-  if (isAllOfSchema(schema)) {
-    return allOfSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+};
+
+// src/controller/executeRequest.ts
+var executeRequest = async (props) => {
+  const { exit, request, requestCache, httpClient, trackEvent, logEvent } = props;
+  const { url, method, body } = request;
+  const response = await getCachedOrFetch(
+    [
+      url,
+      {
+        method,
+        body: body ? JSON.stringify(body) : void 0,
+        headers: { "Content-Type": "application/json" }
+      }
+    ],
+    requestCache,
+    httpClient
+  );
+  if (!response) {
+    const extra = { errorMessage: "Network Error" };
+    trackEvent("Request Failed", extra);
+    logEvent("error", "Dynamic Flow - Request Failed Unexpectedly", extra);
+    return { type: "error" };
   }
-  if (isOneOfSchema(schema)) {
-    return oneOfSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  if (!response.ok) {
+    return handleErrorResponse(response, void 0, trackEvent);
   }
-  if (isBooleanSchema(schema)) {
-    return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  const responseBody = await parseResponseBodyAsJsonElement(response);
+  const responseType = getResponseType(response.headers, responseBody);
+  if (exit) {
+    return { type: "complete", result: responseBody };
   }
-  if (isObjectSchema(schema)) {
-    const { format } = schema;
-    if (format === "money") {
-      return objectSchemaToMoneyInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
+  switch (responseType) {
+    case "step": {
+      const etag = response.headers.get("etag") || null;
+      assertStepResponseBody(responseBody);
+      return { type: "replace-step", step: responseBody, etag };
     }
-    if (format != null && Object.keys(schema.properties).length === 0) {
-      return objectSchemaToFormattedValueComponent(
-        __spreadProps(__spreadValues({}, schemaMapperProps), { schema: __spreadProps(__spreadValues({}, schema), { format }) }),
-        mapperProps
-      );
+    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)}`);
     }
-    return objectSchemaToObjectComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isIntegerSchema(schema)) {
-    return integerSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isNumberSchema(schema)) {
-    return numberSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isStringSchema(schema)) {
-    return stringSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
-  }
-  if (isArraySchema(schema)) {
-    return arraySchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
-  if (isBlobSchema(schema)) {
-    if (!schemaMapperProps.onPersistAsync) {
-      throw new Error(
-        "Blob schemas can only be used as the schema of a persist async configuration."
-      );
+};
+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 blobSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
-  throw new Error("Not yet supported");
+  return makeSafeHttpClient(httpClient)(...requestParams);
 };
 
-// src/domain/mappers/mapStepSchemas.ts
-var mapStepSchemas = (uid, step, stepLocalValue, mapperProps, referencedSchemaIds) => {
-  const isReferenced = (schemaId) => schemaId != null && referencedSchemaIds.includes(schemaId);
-  return step.schemas.map((schema, i) => {
+// src/controller/executeSubmission.ts
+var executeSubmission = async (props) => {
+  const { httpClient, requestCache, trackEvent, logEvent } = props;
+  const triggerAction = async (action, model, isInitial) => {
     var _a, _b;
-    const schemaComponent = mapSchemaToComponent(
-      {
-        uid: `${uid}.schemas-${i}.${schema.$id}`,
-        schemaId: schema.$id,
-        schema,
-        model: (_a = step.model) != null ? _a : null,
-        localValue: stepLocalValue,
-        validationErrors: (_b = step.errors) == null ? void 0 : _b.validation,
-        required: true
-      },
-      mapperProps
-    );
-    return __spreadProps(__spreadValues({}, schemaComponent), {
-      isSchemaReferencedInStep: isReferenced(schema.$id)
-    });
-  });
-};
-
-// src/domain/mappers/mapToolbarToComponent.ts
-var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
-  if (!toolbar) {
-    return void 0;
-  }
-  const { onBehavior } = mapperProps;
-  return __spreadProps(__spreadValues({}, toolbar), {
-    type: "toolbar",
-    uid: `${uid}.toolbar`,
-    tags: toolbar.tags,
-    items: toolbar.items.map((item) => {
-      const context = item.context ? mapLegacyContext(item.context) : void 0;
-      const behavior = getDomainLayerBehavior(
-        { behavior: item.behavior },
-        [],
-        mapperProps.registerSubmissionBehavior
-      );
-      return __spreadProps(__spreadValues({}, item), {
-        context: context ? mapLegacyContext(context) : void 0,
-        disabled: !!item.disabled,
-        tags: item.tags,
-        onClick: () => {
-          void onBehavior(behavior);
-        }
+    const { exit, url, result = null, id: actionId } = action;
+    const trackSubmissionEvent = !isInitial ? trackEvent : () => {
+    };
+    trackSubmissionEvent("Action Triggered", { actionId });
+    if (exit && !url) {
+      trackSubmissionEvent("Action Succeeded", { actionId });
+      return { type: "complete", result };
+    }
+    try {
+      const command = await executeRequest({
+        exit,
+        request: createRequestFromAction(action, model),
+        requestCache,
+        httpClient,
+        trackEvent: (name, properties) => {
+          trackSubmissionEvent(name, __spreadProps(__spreadValues({}, properties), { actionId }));
+        },
+        logEvent
       });
-    })
+      switch (command.type) {
+        case "error": {
+          trackSubmissionEvent("Action Failed", __spreadValues({
+            actionId,
+            statusCode: (_a = command.httpError) == null ? void 0 : _a.statusCode
+          }, (_b = command.body) == null ? void 0 : _b.analytics));
+          return command;
+        }
+        case "behavior": {
+          if (command.behavior.type === "action") {
+            trackSubmissionEvent("Action Succeeded", { actionId });
+            return await executeSubmission({
+              action: command.behavior.action,
+              isInitial: false,
+              model: null,
+              requestCache,
+              httpClient,
+              trackEvent,
+              logEvent
+            });
+          }
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return command;
+        }
+        case "complete": {
+          trackSubmissionEvent("Action Succeeded", { actionId });
+          return __spreadProps(__spreadValues({}, command), { result: recursiveMerge(command.result, result) });
+        }
+        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/utils/groupLayoutByPinned.ts
-var groupLayoutByPinned = (layouts) => {
-  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
+// src/domain/features/prefetch/request-cache.ts
+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;
+    },
+    set: (requestParams, responsePromise) => {
+      return map.set(makeKey(requestParams), responsePromise);
+    }
+  };
+  return cache;
 };
-var groupLayout = (acc, layout) => {
-  if (layout.type === "button" && layout.pinOrder !== void 0) {
-    return {
-      pinned: [...acc.pinned, layout],
-      nonPinned: acc.nonPinned
-    };
-  }
-  if (hasColumns(layout)) {
-    const leftChildren = groupLayoutByPinned(layout.left);
-    const rightChildren = groupLayoutByPinned(layout.right);
-    return {
-      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
-      nonPinned: [
-        ...acc.nonPinned,
-        __spreadProps(__spreadValues({}, layout), {
-          left: leftChildren.nonPinned,
-          right: rightChildren.nonPinned
-        })
-      ]
-    };
+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 (hasChildren(layout)) {
-    const childComponents = groupLayoutByPinned(layout.components);
-    return {
-      pinned: [...acc.pinned, ...childComponents.pinned],
-      nonPinned: [
-        ...acc.nonPinned,
-        __spreadProps(__spreadValues({}, layout), {
-          components: childComponents.nonPinned
-        })
-      ]
-    };
+  if (isRequestCacheInstance(cache)) {
+    return cache;
   }
-  return {
-    pinned: [...acc.pinned],
-    nonPinned: [...acc.nonPinned, layout]
+  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;
+  const key = JSON.stringify({
+    url,
+    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
+    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
+    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
+  });
+  return key;
+};
+
+// src/domain/features/prefetch/getStepPrefetch.ts
+var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
+  const requestCache = makeRequestCacheWithParent(flowRequestCache);
+  const start = (model) => {
+    submissionBehaviors.forEach((behavior) => {
+      const request = behavior.type === "action" ? createRequestFromAction(behavior.action, model) : behavior.launchConfig.request;
+      const requestParams = [
+        request.url,
+        {
+          body: JSON.stringify(request.body),
+          method: request.method,
+          headers: { "Content-Type": "application/json" }
+        }
+      ];
+      try {
+        const responsePromise = httpClient(...requestParams).catch(() => null);
+        requestCache.set(requestParams, responsePromise);
+      } catch (e) {
+      }
+    });
+  };
+  const stop = () => {
   };
+  return { requestCache, start, stop };
 };
-var hasChildren = (component) => "components" in component;
-var hasColumns = (component) => "right" in component && "left" in component;
 
 // src/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
@@ -6061,14 +6086,12 @@ var mapStepToComponent = (_a) => {
     errors,
     external,
     key,
-    layout = [],
     navigation,
     polling,
     refreshAfter,
     title,
     tags
   } = step;
-  const requestCache = makeRequestCacheWithParent(flowRequestCache);
   const submissionBehaviors = [];
   const registerSubmissionBehavior = (behavior) => {
     if (behavior.type === "action" && behavior.action.prefetch) {
@@ -6092,6 +6115,7 @@ var mapStepToComponent = (_a) => {
     registerSubmissionBehavior
   }) : void 0;
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, logEvent, onBehavior }) : void 0;
+  const stepPrefetch = getStepPrefetch(restProps.httpClient, flowRequestCache, submissionBehaviors);
   const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, onComponentUpdate) : void 0;
   const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior, registerSubmissionBehavior });
   const referencedSchemaIds = getReferencedSchemaId(step);
@@ -6102,21 +6126,12 @@ var mapStepToComponent = (_a) => {
     mapperProps,
     referencedSchemaIds
   );
-  const shouldPinButtons = features.isEnabled("pinnedButtons");
-  const { pinned, nonPinned } = shouldPinButtons ? groupLayoutByPinned(layout) : { pinned: [], nonPinned: layout };
-  const layoutComponents = nonPinned.map(
+  const { layout, footer } = getLayoutAndFooter(step, features);
+  const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
-  const footerComponents = pinned.map((footerComponent, index) => {
-    const shouldRemoveMargin = index === pinned.length - 1 && footerComponent.margin === void 0;
-    return shouldRemoveMargin ? removeMarginFromLayout(footerComponent) : footerComponent;
-  }).map(
-    (footerComponent, index) => mapLayoutToComponent(
-      `${uid}.footer-${index}`,
-      footerComponent,
-      mapperProps,
-      schemaComponents
-    )
+  const footerComponents = normaliseMarginInLastComponent(footer).map(
+    (footerComponent, index) => mapLayoutToComponent(`${uid}.footer-${index}`, footerComponent, mapperProps, schemaComponents)
   );
   const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
@@ -6137,18 +6152,12 @@ var mapStepToComponent = (_a) => {
     title,
     tags,
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
-    requestCache,
+    stepPrefetch,
     step,
     onComponentUpdate,
     trackEvent,
     onBehavior
   });
-  executePrefetch({
-    httpClient: mapperProps.httpClient,
-    model: stepComponent.getSubmittableValueSync(),
-    behaviors: submissionBehaviors,
-    requestCache
-  });
   return stepComponent;
 };
 var getReferencedSchemaId = (step) => {
@@ -6169,24 +6178,18 @@ var mapBackNavigation = (navigation, onBehavior, isNativeBackEnabled) => {
     }
   } : void 0;
 };
-var executePrefetch = (props) => {
-  const { httpClient, behaviors: submissionBehaviors, model, requestCache } = props;
-  submissionBehaviors.forEach((behavior) => {
-    const request = behavior.type === "action" ? createRequestFromAction(behavior.action, model) : behavior.launchConfig.request;
-    const requestParams = [
-      request.url,
-      {
-        body: JSON.stringify(request.body),
-        method: request.method,
-        headers: { "Content-Type": "application/json" }
-      }
-    ];
-    try {
-      const responsePromise = httpClient(...requestParams).catch(() => null);
-      requestCache.set(requestParams, responsePromise);
-    } catch (e) {
-    }
-  });
+var getLayoutAndFooter = (step, features) => {
+  var _a;
+  if (step.footer) {
+    const { layout: layout2 = [], footer = [] } = step;
+    return { layout: layout2, footer };
+  }
+  if (features.isEnabled("pinnedButtons")) {
+    const { pinned: footer, nonPinned: layout2 } = groupLayoutByPinned((_a = step.layout) != null ? _a : []);
+    return { layout: layout2, footer };
+  }
+  const { layout = [] } = step;
+  return { layout, footer: [] };
 };
 
 // src/getSubflowCallbacks.ts
@@ -6780,17 +6783,28 @@ var createFlowController = (props) => {
         return false;
     }
   };
-  trackEvent("Initiated");
+  let initState = "initial";
   if (initialStep) {
+    initState = "created";
+    trackEvent("Initiated");
     createStep(initialStep, null);
     trackEvent("Step Shown", { isFirstStep: true });
-  } else if (initialAction) {
-    rootComponent.setLoadingState("submitting");
-    void onAction(__spreadValues({ method: "GET" }, initialAction), null);
   }
-  rootComponent.start();
+  const start = () => {
+    if (initState === "initial" && initialAction) {
+      initState = "created";
+      trackEvent("Initiated");
+      rootComponent.setLoadingState("submitting");
+      void onAction(__spreadValues({ method: "GET" }, initialAction), null);
+    }
+    if (initState === "created") {
+      initState = "started";
+      rootComponent.start();
+    }
+  };
   return {
     rootComponent,
+    start,
     cancel: closeWithCancellation
   };
 };
@@ -8188,7 +8202,10 @@ var useRerender = () => {
 };
 var useFlowController = (props) => {
   const df = useMemo(() => createFlowController(props), []);
-  useEffect2(() => () => df.rootComponent.stop(), []);
+  useEffect2(() => {
+    df.start();
+    return () => df.rootComponent.stop();
+  }, []);
   return df;
 };