@wise/dynamic-flow-client 4.6.0 → 4.7.1

package/build/main.mjs

@@ -1530,6 +1530,17 @@ var objectComponentToProps = (component, rendererMapperProps) => {
 // src/revamp/renderers/mappers/paragraphComponentToProps.ts
 var paragraphComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "type", "align", "control", "margin", "text")), rendererMapperProps);
 
+// src/revamp/renderers/mappers/persistAsyncComponentToProps.ts
+var persistAsyncComponentToProps = (component, rendererMapperProps) => {
+  const props = componentToRendererProps(component.component, rendererMapperProps);
+  if ("validationState" in props && component.errors.length > 0) {
+    return __spreadProps(__spreadValues({}, props), {
+      validationState: { status: "invalid", message: component.errors[0] }
+    });
+  }
+  return props;
+};
+
 // src/revamp/renderers/mappers/repeatableComponentToProps.ts
 var repeatableComponentToProps = (component, rendererMapperProps) => {
   const {
@@ -1833,6 +1844,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return tupleComponentToProps(component, rendererMapperProps);
     case "upload":
       return uploadInputComponentToProps(component, rendererMapperProps);
+    case "persist-async":
+      return persistAsyncComponentToProps(component, rendererMapperProps);
     default:
       throw new Error("Unknown component type");
   }
@@ -3038,26 +3051,44 @@ var getStepRefreshAfter = ({ refreshAfter, onBehavior }) => {
   }
   const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
   const timeout = setTimeout(() => {
-    void onBehavior({ type: "refresh", schemaId: "refreshAfter" });
+    void onBehavior({ type: "refresh", analytics: { schema: "refreshAfter" } });
   }, timeLeft);
   return {
     stop: () => clearTimeout(timeout)
   };
 };
 
-// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
-var isExactLocalValueMatch = (valueA, valueB) => {
-  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
-    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    const keysA = Object.keys(valueA);
-    const keysB = Object.keys(valueB);
-    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
+// src/revamp/domain/components/utils/isOrWasValid.ts
+var isOrWasValid = (getErrors, previous, current) => {
+  const wasValid = getErrors(previous).length === 0 && previous !== null;
+  const isValid = getErrors(current).length === 0;
+  return wasValid || isValid;
+};
+
+// src/revamp/domain/features/schema-on-change/getDebouncedSchemaOnChange.ts
+var getDebouncedSchemaOnChange = (onChange, getValidationErrors) => {
+  if (!onChange) {
+    return void 0;
   }
-  return valueA === valueB;
+  const debouncedOnChange = debounce(onChange, 1e3);
+  return onChange.behaviorType === "refresh" ? getSelectiveDebouncedSchemaOnChange(debouncedOnChange, getValidationErrors) : debouncedOnChange;
+};
+var getSelectiveDebouncedSchemaOnChange = (debouncedOnChange, getValidationErrors) => {
+  const debouncedFn = (prevValue, updatedValue) => {
+    if (isOrWasValid(getValidationErrors, prevValue, updatedValue) || (debouncedOnChange == null ? void 0 : debouncedOnChange.isPending())) {
+      debouncedOnChange == null ? void 0 : debouncedOnChange();
+    }
+  };
+  debouncedFn.flush = () => debouncedOnChange.flush();
+  debouncedFn.cancel = () => debouncedOnChange.cancel();
+  debouncedFn.isPending = () => debouncedOnChange.isPending();
+  return debouncedFn;
 };
 
+// src/revamp/domain/features/validation/validation-functions.ts
+var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
+var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
+
 // src/revamp/domain/features/utils/http-utils.ts
 function constructPayload({
   value,
@@ -3085,143 +3116,6 @@ var abortAndResetController = (abortController) => {
   return new AbortController();
 };
 
-// src/revamp/domain/features/persistAsync/getComponentPersistAsync.ts
-var getComponentPersistAsync = (update, performPersistAsync) => (
-  /**
-   * Will update the persistedState when a new request is made, and will update
-   * the value or set errors when the request completes.
-   */
-  async (component, currentValue) => {
-    const { abortController, lastSubmitted, submission } = component.persistedState;
-    if (isExactLocalValueMatch(lastSubmitted, currentValue)) {
-      return submission;
-    }
-    const newAbortController = abortAndResetController(abortController);
-    if (isNullish(currentValue) || currentValue === "") {
-      const resolvedNull = Promise.resolve(null);
-      update(component, (draft) => {
-        draft.persistedState.abortController = newAbortController;
-        draft.persistedState.lastResponse = null;
-        draft.persistedState.lastSubmitted = currentValue;
-        draft.persistedState.submission = resolvedNull;
-      });
-      return resolvedNull;
-    }
-    const { signal } = newAbortController;
-    const newSubmission = performPersistAsync({ value: currentValue, signal }).then((newValue) => {
-      update(component, (draft) => {
-        draft.persistedState.lastResponse = newValue;
-      });
-      return newValue;
-    }).catch((error) => {
-      if (error instanceof DOMException && error.name === "AbortError") {
-        return null;
-      }
-      update(component, (draft) => {
-        draft.errors = [error.message];
-        draft.persistedState.lastResponse = null;
-        draft.persistedState.lastSubmitted = null;
-      });
-      throw error;
-    });
-    update(component, (draft) => {
-      draft.persistedState = {
-        abortController: newAbortController,
-        lastResponse: null,
-        lastSubmitted: currentValue,
-        submission: newSubmission
-      };
-    });
-    return newSubmission;
-  }
-);
-var getComponentMultiPersistAsync = (update, performPersistAsync) => (
-  /**
-   * Will update the persistedState when a new request is made, and will update
-   * the value or set errors when the request completes.
-   */
-  async (component, index, value) => {
-    if (isNullish(value)) {
-      throw new Error("Value must be a file or base64 string.");
-    }
-    const newAbortController = new AbortController();
-    const { signal } = newAbortController;
-    const newSubmission = performPersistAsync({ value, signal }).then((newValue) => {
-      update(component, (draft) => {
-        draft.persistedState[index].lastResponse = newValue;
-      });
-      return newValue;
-    }).catch((error) => {
-      update(component, (draft) => {
-        draft.persistedState = [
-          ...draft.persistedState.slice(0, index),
-          ...draft.persistedState.slice(index + 1)
-        ];
-        draft.value.splice(index, 1);
-        draft.files.splice(index, 1);
-      });
-      throw error;
-    });
-    update(component, (draft) => {
-      draft.persistedState = [
-        ...draft.persistedState.slice(0, index),
-        {
-          id: getRandomId(),
-          abortController: newAbortController,
-          lastResponse: null,
-          lastSubmitted: null,
-          submission: newSubmission
-        },
-        ...draft.persistedState.slice(index)
-      ];
-    });
-    return newSubmission;
-  }
-);
-
-// src/revamp/domain/components/utils/isOrWasValid.ts
-var isOrWasValid = (getErrors, previous, current) => {
-  const wasValid = getErrors(previous).length === 0 && previous !== null;
-  const isValid = getErrors(current).length === 0;
-  return wasValid || isValid;
-};
-
-// src/revamp/domain/features/refresh/getPerformRefresh.ts
-var getPerformRefresh = (schema, onBehavior) => {
-  var _a, _b;
-  if ("refreshStepOnChange" in schema && ((_a = schema.refreshStepOnChange) != null ? _a : false) || "refreshFormOnChange" in schema && ((_b = schema.refreshFormOnChange) != null ? _b : false)) {
-    const { $id, analyticsId, refreshUrl, refreshFormUrl } = schema;
-    const schemaId = analyticsId != null ? analyticsId : $id;
-    return () => {
-      void onBehavior({
-        type: "refresh",
-        schemaId,
-        url: refreshUrl != null ? refreshUrl : refreshFormUrl
-      });
-    };
-  }
-  return void 0;
-};
-var getDebouncedPerformRefresh = (performRefresh, getValidationErrors) => {
-  if (!performRefresh) {
-    return void 0;
-  }
-  const performDebouncedRefresh = debounce(performRefresh, 1e3);
-  const debouncedFn = (prevValue, updatedValue) => {
-    if (isOrWasValid(getValidationErrors, prevValue, updatedValue) || (performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.isPending())) {
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh();
-    }
-  };
-  debouncedFn.flush = () => performDebouncedRefresh.flush();
-  debouncedFn.cancel = () => performDebouncedRefresh.cancel();
-  debouncedFn.isPending = () => performDebouncedRefresh.isPending();
-  return debouncedFn;
-};
-
-// src/revamp/domain/features/validation/validation-functions.ts
-var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
-var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString);
-
 // src/revamp/domain/features/validationAsync/getComponentValidationAsync.ts
 var getComponentValidationAsync = (update, performValidationAsync) => (
   /**
@@ -3275,24 +3169,25 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
     uid,
     id,
     checks,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     performValidationAsync,
     onValueChange,
+    onPersistAsync,
     summariser
   } = _a, rest = __objRest(_a, [
     "uid",
     "id",
     "checks",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "performValidationAsync",
     "onValueChange",
+    "onPersistAsync",
     "summariser"
   ]);
   const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
+  const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+  const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const numberComponent = __spreadValues({
     type: "number",
     uid,
@@ -3301,8 +3196,12 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       update(this, updateFn);
     },
     onBlur() {
-      this.validate();
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
+      const isValid = this.validate();
+      performOnChange == null ? void 0 : performOnChange.flush();
+      if (isValid) {
+        onPersistAsync == null ? void 0 : onPersistAsync();
+        validateAsync == null ? void 0 : validateAsync.flush();
+      }
     },
     onFocus() {
     },
@@ -3314,7 +3213,11 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
+      performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
+      const isValid = getValidationErrors(updatedValue).length === 0;
+      if (isValid) {
+        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+      }
       onValueChange();
     },
     async getSubmittableValue() {
@@ -3338,43 +3241,44 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
       return errors.length === 0;
     }
   }, rest);
-  if (performRefresh) {
-    return numberComponent;
-  }
-  if (performPersistAsync) {
-    const persist = getComponentPersistAsync(update, performPersistAsync);
-    return __spreadProps(__spreadValues({}, numberComponent), {
-      onBlur() {
-        if (this.validate()) {
-          persist(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      },
-      async getSubmittableValue() {
-        return persist(this, this.getLocalValue());
-      },
-      getSubmittableValueSync() {
-        return this.persistedState.lastResponse;
-      }
-    });
+  return numberComponent;
+};
+
+// src/revamp/domain/features/schema-on-change/getSchemaOnChange.ts
+var getSchemaOnChange = (schema, onBehavior) => {
+  var _a, _b;
+  const behavior = (_b = (_a = getBehaviorFromSchemaOnChange(schema)) != null ? _a : getBehaviorFromSchemaRefreshStepOnChange(schema)) != null ? _b : void 0;
+  if (behavior) {
+    const onChange = () => {
+      void onBehavior(behavior);
+    };
+    onChange.behaviorType = behavior.type;
+    return onChange;
   }
-  if (performValidationAsync) {
-    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, numberComponent), {
-      onBlur() {
-        if (this.validate()) {
-          validateAsync.flush();
-        }
-      },
-      onChange(updatedValue) {
-        numberComponent.onChange.call(this, updatedValue);
-        if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this, updatedValue);
-        }
-      }
+  return void 0;
+};
+var getBehaviorFromSchemaOnChange = (schema) => {
+  if ("onChange" in schema && schema.onChange) {
+    const { $id, analyticsId, onChange } = schema;
+    const behavior = __spreadProps(__spreadValues({}, normaliseBehavior(onChange, [])), {
+      analytics: { schema: analyticsId != null ? analyticsId : $id }
     });
+    return behavior;
   }
-  return numberComponent;
+  return void 0;
+};
+var getBehaviorFromSchemaRefreshStepOnChange = (schema) => {
+  var _a, _b;
+  if ("refreshStepOnChange" in schema && ((_a = schema.refreshStepOnChange) != null ? _a : false) || "refreshFormOnChange" in schema && ((_b = schema.refreshFormOnChange) != null ? _b : false)) {
+    const { $id, analyticsId, refreshUrl, refreshFormUrl } = schema;
+    const behavior = {
+      type: "refresh",
+      analytics: { schema: analyticsId != null ? analyticsId : $id },
+      url: refreshUrl != null ? refreshUrl : refreshFormUrl
+    };
+    return behavior;
+  }
+  return void 0;
 };
 
 // src/revamp/domain/features/validation/validateStringPattern.ts
@@ -3595,6 +3499,13 @@ var parseResponseBodyAsJsonElement = async (response) => {
     return null;
   }
 };
+var parseResponseBodyAsText = async (response) => {
+  try {
+    return await response.text();
+  } catch (e) {
+    return null;
+  }
+};
 function isActionResponseBody(body) {
   return validateActionResponse(body).valid;
 }
@@ -3635,93 +3546,6 @@ var getAnalyticsFromErrorResponse = (json) => {
   return isObject(analytics) ? analytics : void 0;
 };
 
-// src/revamp/domain/features/persistAsync/getPerformPersistAsync.ts
-var getPerformPersistAsync = ({
-  genericErrorMessage,
-  httpClient,
-  persistAsyncConfig,
-  schemaId,
-  logEvent,
-  trackEvent
-}) => {
-  const { idProperty, param, method, url } = persistAsyncConfig;
-  const trackFailure = (json) => {
-    const analytics = getAnalyticsFromErrorResponse(json);
-    trackEvent("PersistAsync Failed", __spreadValues({ schema: schemaId }, analytics));
-  };
-  return async function performPersistAsync({ value, signal }) {
-    let response;
-    let json;
-    try {
-      trackEvent("PersistAsync Triggered", { schema: schemaId });
-      response = await httpClient(
-        url,
-        constructPayload({ value, signal, requestConfig: { method, param } })
-      );
-      json = await response.json();
-      if (response.ok && isObject(json)) {
-        trackEvent("PersistAsync Succeeded", { schema: schemaId });
-        if (json[idProperty] === void 0) {
-          logEvent(
-            "error",
-            `Response from persist async did not contain expected property ${idProperty}.`
-          );
-          throw new Error(genericErrorMessage);
-        }
-        return json[idProperty];
-      }
-    } catch (e) {
-      trackFailure();
-      throw new Error(genericErrorMessage);
-    }
-    const validationError = !response.ok && isObject(json) ? getValidationError(param, json) : null;
-    trackFailure(json);
-    throw new Error(validationError != null ? validationError : genericErrorMessage);
-  };
-};
-var getValidationError = (param, response) => {
-  var _a;
-  const message = (_a = response.validation) == null ? void 0 : _a[param];
-  return isString(message) ? message : null;
-};
-
-// src/revamp/domain/features/persistAsync/getInitialPersistedState.ts
-var getInitialPersistedState = (lastSubmitted, model) => ({
-  abortController: new AbortController(),
-  lastSubmitted: !isNullish(model) ? lastSubmitted != null ? lastSubmitted : null : null,
-  lastResponse: model != null ? model : null,
-  submission: Promise.resolve(model != null ? model : null)
-});
-
-// src/revamp/domain/mappers/schema/utils/getPersistAsyncInitialState.ts
-var getPersistAsyncInitialState = (schemaMapperProps, mapperProps) => {
-  const { localValue, model } = schemaMapperProps;
-  const performPersistAsync = getPerformPersisAsyncFn(schemaMapperProps, mapperProps);
-  const persistedState = performPersistAsync ? getInitialPersistedState(localValue, model) : getInitialPersistedState();
-  return { performPersistAsync, persistedState };
-};
-var getPerformPersisAsyncFn = (schemaMapperProps, mapperProps) => {
-  const { schema, persistAsyncConfig } = schemaMapperProps;
-  const { trackEvent, logEvent } = mapperProps;
-  if (!persistAsyncConfig) {
-    return void 0;
-  }
-  const { $id, analyticsId } = schema;
-  const { getErrorMessageFunctions, httpClient } = mapperProps;
-  const validationMessages = schemaHasValidationMessages(schema) ? schema.validationMessages : void 0;
-  const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const persistAsyncError = errorMessageFunctions.genericError();
-  return getPerformPersistAsync({
-    genericErrorMessage: persistAsyncError,
-    httpClient,
-    logEvent,
-    persistAsyncConfig,
-    schemaId: analyticsId != null ? analyticsId : $id,
-    trackEvent
-  });
-};
-var schemaHasValidationMessages = (schema) => Boolean("validationMessages" in schema && schema.validationMessages);
-
 // src/revamp/domain/features/validationAsync/getPerformValidationAsync.ts
 var getPerformValidationAsync = ({
   httpClient,
@@ -3838,7 +3662,7 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
 // src/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.ts
 var mapCommonSchemaProps = (schemaMapperProps) => {
   var _a;
-  const { uid, schemaId, schema, required, validationErrors } = schemaMapperProps;
+  const { uid, schemaId, schema, required, validationErrors, onPersistAsync } = schemaMapperProps;
   const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
   return __spreadValues(__spreadValues(__spreadValues({
     uid,
@@ -3855,6 +3679,7 @@ var mapCommonSchemaProps = (schemaMapperProps) => {
     keywords,
     required: Boolean(required),
     title,
+    onPersistAsync,
     summariser: getSummariser(schema)
   }, schemaHasHelp(schema) ? { help: schema.help.markdown } : {}), schemaHasPlaceholder(schema) ? { placeholder: schema.placeholder } : {}), schema.alert ? { alert: mapSchemaAlert(schema.alert) } : {});
 };
@@ -3864,21 +3689,17 @@ var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema
 
 // src/revamp/domain/mappers/schema/numberSchemaToComponent.ts
 var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, model, localValue, required = false } = schemaMapperProps;
+  const { schema, model, localValue, required = false, onPersistAsync } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
   const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
   const validLocalValue = isNumber(localValue) ? localValue : null;
   const validModel = isNumber(model) ? model : defaultValue != null ? defaultValue : null;
-  const value = performPersistAsync ? validLocalValue : validModel;
+  const value = onPersistAsync ? validLocalValue : validModel;
   return createNumberInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       autoComplete: getAutocompleteString(autocompleteHint),
@@ -3890,10 +3711,8 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
       value,
       maximum,
       minimum,
-      persistedState,
       validationAsyncState,
-      performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -4170,8 +3989,53 @@ var localValueToJsonElement = (localValue) => {
 };
 var getRandomInt = () => Math.floor(Math.random() * 1e8);
 
-// src/revamp/domain/components/utils/file-utils.ts
-var toBase64 = async (file) => new Promise((resolve, reject) => {
+// src/revamp/domain/features/persistAsync/getComponentMultiPersistAsync.ts
+var getComponentMultiPersistAsync = (update, performPersistAsync) => (
+  /**
+   * Will update the persistedState when a new request is made, and will update
+   * the value or set errors when the request completes.
+   */
+  async (component, index, value) => {
+    if (isNullish(value)) {
+      throw new Error("Value must be a file or base64 string.");
+    }
+    const newAbortController = new AbortController();
+    const { signal } = newAbortController;
+    const newSubmission = performPersistAsync({ value, signal }).then((newValue) => {
+      update(component, (draft) => {
+        draft.persistedState[index].lastResponse = newValue;
+      });
+      return newValue;
+    }).catch((error) => {
+      update(component, (draft) => {
+        draft.persistedState = [
+          ...draft.persistedState.slice(0, index),
+          ...draft.persistedState.slice(index + 1)
+        ];
+        draft.value.splice(index, 1);
+        draft.files.splice(index, 1);
+      });
+      throw error;
+    });
+    update(component, (draft) => {
+      draft.persistedState = [
+        ...draft.persistedState.slice(0, index),
+        {
+          id: getRandomId(),
+          abortController: newAbortController,
+          lastResponse: null,
+          lastSubmitted: null,
+          submission: newSubmission
+        },
+        ...draft.persistedState.slice(index)
+      ];
+    });
+    return newSubmission;
+  }
+);
+
+// src/revamp/domain/components/utils/file-utils.ts
+var toBase64 = async (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.addEventListener("load", () => resolve(reader.result));
   reader.addEventListener("error", reject);
@@ -4298,6 +4162,82 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
   });
 };
 
+// src/revamp/domain/features/persistAsync/getInitialPersistedState.ts
+var getInitialPersistedState = (lastSubmitted, model) => ({
+  abortController: new AbortController(),
+  lastSubmitted: !isNullish(model) ? lastSubmitted != null ? lastSubmitted : null : null,
+  lastResponse: model != null ? model : null,
+  submission: Promise.resolve(model != null ? model : null)
+});
+
+// src/revamp/domain/features/persistAsync/getPerformPersistAsync.ts
+var getPerformPersistAsync = ({
+  genericErrorMessage,
+  httpClient,
+  persistAsyncConfig,
+  schemaId,
+  logEvent,
+  trackEvent
+}) => {
+  const { idProperty, param, method, url } = persistAsyncConfig;
+  const trackFailure = (json) => {
+    const analytics = getAnalyticsFromErrorResponse(json);
+    trackEvent("PersistAsync Failed", __spreadValues({ schema: schemaId }, analytics));
+  };
+  return async function performPersistAsync({ value, signal }) {
+    let response;
+    let json;
+    try {
+      trackEvent("PersistAsync Triggered", { schema: schemaId });
+      response = await httpClient(
+        url,
+        constructPayload({ value, signal, requestConfig: { method, param } })
+      );
+      json = await response.json();
+      if (response.ok && isObject(json)) {
+        trackEvent("PersistAsync Succeeded", { schema: schemaId });
+        if (json[idProperty] === void 0) {
+          logEvent(
+            "error",
+            `Response from persist async did not contain expected property ${idProperty}.`
+          );
+          throw new Error(genericErrorMessage);
+        }
+        return json[idProperty];
+      }
+    } catch (e) {
+      trackFailure();
+      throw new Error(genericErrorMessage);
+    }
+    const validationError = !response.ok && isObject(json) ? getValidationError(param, json) : null;
+    trackFailure(json);
+    throw new Error(validationError != null ? validationError : genericErrorMessage);
+  };
+};
+var getValidationError = (param, response) => {
+  var _a;
+  const message = (_a = response.validation) == null ? void 0 : _a[param];
+  return isString(message) ? message : null;
+};
+
+// src/revamp/domain/mappers/schema/utils/getPerformPersistAsyncFn.ts
+var getPerformPersistAsyncFn = (schema, persistAsyncConfig, mapperProps) => {
+  const { getErrorMessageFunctions, httpClient, trackEvent, logEvent } = mapperProps;
+  const { $id, analyticsId } = schema;
+  const validationMessages = schemaHasValidationMessages(schema) ? schema.validationMessages : void 0;
+  const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
+  const persistAsyncError = errorMessageFunctions.genericError();
+  return getPerformPersistAsync({
+    genericErrorMessage: persistAsyncError,
+    httpClient,
+    logEvent,
+    persistAsyncConfig,
+    schemaId: analyticsId != null ? analyticsId : $id,
+    trackEvent
+  });
+};
+var schemaHasValidationMessages = (schema) => Boolean("validationMessages" in schema && schema.validationMessages);
+
 // src/revamp/domain/mappers/schema/arraySchemaToComponent/arraySchemaToMultiUploadComponent.ts
 var arraySchemaToMultiUploadComponent = (schemaMapperProps, mapperProps) => {
   var _a;
@@ -4324,7 +4264,7 @@ var arraySchemaToMultiUploadComponent = (schemaMapperProps, mapperProps) => {
     schema: __spreadProps(__spreadValues({}, uploadSchema), { hidden: (_a = schema.hidden) != null ? _a : uploadSchema.hidden, alert: schema.alert })
   });
   const { onValueChange } = mapperProps;
-  const { performPersistAsync } = getPersistAsyncInitialState(combinedSchemaProps, mapperProps);
+  const performPersistAsync = persistAsyncConfig ? getPerformPersistAsyncFn(combinedSchemaProps.schema, persistAsyncConfig, mapperProps) : void 0;
   const value = performPersistAsync ? getValueForPersistAsync(localValue) : [];
   const persistedState = performPersistAsync && isArray(model) ? model.map((itemModel) => getInitialPersistedState(null, itemModel)) : [];
   return createMultiUploadInputComponent(
@@ -4380,7 +4320,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     options,
     initialValue,
     performValidationAsync,
-    performRefresh,
+    schemaOnChange,
     onValueChange
   } = _a, rest = __objRest(_a, [
     "uid",
@@ -4388,13 +4328,14 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
     "options",
     "initialValue",
     "performValidationAsync",
-    "performRefresh",
+    "schemaOnChange",
     "onValueChange"
   ]);
   const update = getInputUpdateFunction(updateComponent);
   const children = options.map((option) => option.component);
   const selectedIndices = getInitialModelIndices(initialValue, children);
   const getValidationErrors = getLocalValueValidator(checks);
+  const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const component = __spreadProps(__spreadValues({
     uid,
     type: "multi-select",
@@ -4411,12 +4352,16 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
         draft.selectedIndices = indices;
         draft.errors = [];
       });
-      performRefresh == null ? void 0 : performRefresh();
-      onValueChange();
+      schemaOnChange == null ? void 0 : schemaOnChange();
       const errors = getValidationErrors(this.getLocalValue());
       this._update((draft) => {
         draft.errors = errors;
       });
+      if (this.validate()) {
+        validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+        });
+      }
+      onValueChange();
     },
     onBlur() {
     },
@@ -4454,21 +4399,6 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
       return this.selectedIndices.map((i) => this.children[i]);
     }
   });
-  if (performRefresh) {
-    return component;
-  }
-  if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, component), {
-      onSelect(indices) {
-        component.onSelect.call(this, indices);
-        if (this.validate()) {
-          validateAsync(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      }
-    });
-  }
   return component;
 };
 var getInitialModelIndices = (model, options) => {
@@ -4535,7 +4465,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       title,
       validationAsyncState,
       performValidationAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -4655,9 +4585,9 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
     checks,
     format,
     value,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     onValueChange,
+    onPersistAsync,
     summariser
   } = _a, rest = __objRest(_a, [
     "uid",
@@ -4665,9 +4595,9 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
     "checks",
     "format",
     "value",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "onValueChange",
+    "onPersistAsync",
     "summariser"
   ]);
   const update = getInputUpdateFunction(updateComponent);
@@ -4676,7 +4606,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
     type: "upload",
     uid,
     id,
-    format: "base64",
+    format,
     value,
     _update(updateFn) {
       update(this, updateFn);
@@ -4692,12 +4622,16 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
-      performRefresh == null ? void 0 : performRefresh();
+      schemaOnChange == null ? void 0 : schemaOnChange();
       onValueChange();
+      onPersistAsync == null ? void 0 : onPersistAsync();
     },
     async getSubmittableValue() {
       const file = this.getLocalValue();
-      return file ? toBase64(file) : null;
+      if (this.format === "base64" && file) {
+        return toBase64(file);
+      }
+      return null;
     },
     getSubmittableValueSync() {
       return null;
@@ -4717,50 +4651,17 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
       return errors.length === 0;
     }
   }, rest);
-  if (!performPersistAsync) {
-    return uploadComponent;
-  }
-  const persist = getComponentPersistAsync(update, performPersistAsync);
-  return __spreadProps(__spreadValues({}, uploadComponent), {
-    format,
-    async onUpload(file) {
-      this._update((draft) => {
-        draft.errors = [];
-        draft.value = file;
-      });
-      onValueChange();
-      const submission = format === "base64" && file ? await toBase64(file) : file;
-      await persist(this, submission).catch((error) => {
-        this._update((draft) => {
-          draft.persistedState.lastResponse = null;
-          draft.persistedState.lastSubmitted = null;
-          draft.persistedState.submission = Promise.resolve(null);
-          draft.errors = [];
-          draft.value = null;
-        });
-        throw error;
-      });
-      onValueChange();
-    },
-    async getSubmittableValue() {
-      return this.persistedState.submission;
-    },
-    getSubmittableValueSync() {
-      return this.persistedState.lastResponse;
-    }
-  });
+  return uploadComponent;
 };
 
 // src/revamp/domain/mappers/schema/blobSchemaToComponent.ts
 var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false } = schemaMapperProps;
+  const { schema, localValue, required = false, onPersistAsync } = schemaMapperProps;
   const { accepts, cameraConfig, maxSize, source, validationMessages } = schema;
   const { getErrorMessageFunctions, updateComponent, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
-  const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
   const validLocalValue = isFile(localValue) ? localValue : null;
-  const value = performPersistAsync ? validLocalValue : null;
+  const value = onPersistAsync ? validLocalValue : null;
   return createUploadInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       accepts,
@@ -4770,9 +4671,8 @@ var blobSchemaToComponent = (schemaMapperProps, mapperProps) => {
       maxSize,
       source,
       value,
-      persistedState,
-      performPersistAsync,
       checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)],
+      schemaOnChange: void 0,
       onValueChange
     }),
     updateComponent
@@ -4785,22 +4685,23 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     uid,
     id,
     value,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     performValidationAsync,
     onValueChange,
+    onPersistAsync,
     summariser
   } = _a, rest = __objRest(_a, [
     "uid",
     "id",
     "value",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "performValidationAsync",
     "onValueChange",
+    "onPersistAsync",
     "summariser"
   ]);
   const update = getInputUpdateFunction(updateComponent);
+  const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const booleanComponent = __spreadValues({
     type: "boolean",
     uid,
@@ -4821,7 +4722,10 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
         draft.errors = [];
         draft.value = updatedValue;
       });
-      performRefresh == null ? void 0 : performRefresh();
+      schemaOnChange == null ? void 0 : schemaOnChange();
+      onPersistAsync == null ? void 0 : onPersistAsync();
+      validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+      });
       onValueChange();
     },
     async getSubmittableValue() {
@@ -4838,62 +4742,27 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
     },
     validate: () => true
   }, rest);
-  if (performRefresh) {
-    return booleanComponent;
-  }
-  if (performPersistAsync) {
-    const persist = getComponentPersistAsync(update, performPersistAsync);
-    return __spreadProps(__spreadValues({}, booleanComponent), {
-      onChange(updatedValue) {
-        booleanComponent.onChange.call(this, updatedValue);
-        persist(this, this.getLocalValue()).catch(() => {
-        });
-      },
-      async getSubmittableValue() {
-        return persist(this, this.getLocalValue());
-      },
-      getSubmittableValueSync() {
-        return this.persistedState.lastResponse;
-      }
-    });
-  }
-  if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, booleanComponent), {
-      onChange(updatedValue) {
-        booleanComponent.onChange.call(this, updatedValue);
-        validateAsync(this, this.getLocalValue()).catch(() => {
-        });
-      }
-    });
-  }
   return booleanComponent;
 };
 
 // src/revamp/domain/mappers/schema/booleanSchemaToComponent.ts
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model } = schemaMapperProps;
+  const { schema, localValue, model, onPersistAsync } = schemaMapperProps;
   const { default: defaultValue } = schema;
   const { updateComponent, onBehavior, onValueChange } = mapperProps;
-  const performRefresh = getPerformRefresh(schema, onBehavior);
-  const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
+  const schemaOnChange = getSchemaOnChange(schema, onBehavior);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
   const validLocalValue = isBoolean(localValue) ? localValue : false;
   const validModel = getValidModel(model, defaultValue);
-  const value = performPersistAsync ? validLocalValue : validModel;
+  const value = onPersistAsync ? validLocalValue : validModel;
   return createBooleanInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       value: value != null ? value : false,
-      persistedState,
       validationAsyncState,
-      performPersistAsync,
-      performRefresh,
+      schemaOnChange,
       performValidationAsync,
       onValueChange
     }),
@@ -4949,25 +4818,26 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
     id,
     checks,
     value,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     performValidationAsync,
     onValueChange,
+    onPersistAsync,
     summariser
   } = _a, rest = __objRest(_a, [
     "uid",
     "id",
     "checks",
     "value",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "performValidationAsync",
     "onValueChange",
+    "onPersistAsync",
     "summariser"
   ]);
   const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
+  const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+  const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const integerComponent = __spreadValues({
     type: "integer",
     uid,
@@ -4977,8 +4847,12 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       update(this, updateFn);
     },
     onBlur() {
-      this.validate();
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
+      const isValid = this.validate();
+      performOnChange == null ? void 0 : performOnChange.flush();
+      if (isValid) {
+        onPersistAsync == null ? void 0 : onPersistAsync();
+        validateAsync == null ? void 0 : validateAsync.flush();
+      }
     },
     onFocus() {
     },
@@ -4990,7 +4864,11 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
+      performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
+      const isValid = getValidationErrors(updatedValue).length === 0;
+      if (isValid) {
+        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+      }
       onValueChange();
     },
     async getSubmittableValue() {
@@ -5014,62 +4892,22 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
       return errors.length === 0;
     }
   }, rest);
-  if (performRefresh) {
-    return integerComponent;
-  }
-  if (performPersistAsync) {
-    const persist = getComponentPersistAsync(update, performPersistAsync);
-    return __spreadProps(__spreadValues({}, integerComponent), {
-      onBlur() {
-        if (this.validate()) {
-          persist(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      },
-      async getSubmittableValue() {
-        return persist(this, this.getLocalValue());
-      },
-      getSubmittableValueSync() {
-        return this.persistedState.lastResponse;
-      }
-    });
-  }
-  if (performValidationAsync) {
-    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, integerComponent), {
-      onBlur() {
-        if (this.validate()) {
-          validateAsync.flush();
-        }
-      },
-      onChange(updatedValue) {
-        integerComponent.onChange.call(this, updatedValue);
-        if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this, updatedValue);
-        }
-      }
-    });
-  }
   return integerComponent;
 };
 
 // src/revamp/domain/mappers/schema/integerSchemaToComponent.ts
 var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
   const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
   const validLocalValue = isInteger(localValue) ? localValue : null;
   const validModel = isInteger(model) ? model : defaultValue != null ? defaultValue : null;
-  const value = performPersistAsync ? validLocalValue : validModel;
+  const value = onPersistAsync ? validLocalValue : validModel;
   const checks = [
     getRequiredCheck(required, errorMessageFunctions),
     getBelowMinimumCheck(schema, errorMessageFunctions),
@@ -5081,11 +4919,9 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
       checks,
       maximum,
       minimum,
-      persistedState,
       value,
       validationAsyncState,
-      performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5240,7 +5076,7 @@ var nonNullishKeys = (model) => Object.keys(model).filter((key) => !isNullish(mo
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
-  const _a = selectProps, { uid, checks, initialModel, options, performRefresh, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialModel", "options", "performRefresh", "onValueChange", "summariser"]);
+  const _a = selectProps, { uid, checks, initialModel, options, schemaOnChange, onValueChange, summariser } = _a, rest = __objRest(_a, ["uid", "checks", "initialModel", "options", "schemaOnChange", "onValueChange", "summariser"]);
   const children = options.map((option) => option.component);
   const matchingOptions = options.map(
     (option) => isPartialModelMatch(option.component.getSubmittableValueSync(), initialModel)
@@ -5301,7 +5137,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
         draft.errors = [];
         draft.selectedIndex = updatedIndex;
       });
-      performRefresh == null ? void 0 : performRefresh();
+      schemaOnChange == null ? void 0 : schemaOnChange();
       onValueChange();
     },
     validate() {
@@ -5373,7 +5209,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)],
       options,
       initialModel,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       onValueChange,
       trackEvent
     }),
@@ -5392,25 +5228,26 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
     uid,
     id,
     checks,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     performValidationAsync,
     onValueChange,
+    onPersistAsync,
     summariser,
     value
   } = _a, rest = __objRest(_a, [
     "uid",
     "id",
     "checks",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "performValidationAsync",
     "onValueChange",
+    "onPersistAsync",
     "summariser",
     "value"
   ]);
   const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
+  const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const dateInputComponent = __spreadValues({
     type: "date",
     uid,
@@ -5420,7 +5257,11 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       update(this, updateFn);
     },
     onBlur() {
-      this.validate();
+      const isValid = this.validate();
+      if (isValid) {
+        validateAsync == null ? void 0 : validateAsync(this, this.getLocalValue()).catch(() => {
+        });
+      }
     },
     onFocus() {
     },
@@ -5433,9 +5274,12 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
         draft.value = updatedValue;
       });
       if (isOrWasValid(getValidationErrors, prevValue, updatedValue)) {
-        performRefresh == null ? void 0 : performRefresh();
+        schemaOnChange == null ? void 0 : schemaOnChange();
       }
       onValueChange();
+      if (getValidationErrors(updatedValue).length === 0) {
+        onPersistAsync == null ? void 0 : onPersistAsync();
+      }
     },
     async getSubmittableValue() {
       return this.getSubmittableValueSync();
@@ -5458,45 +5302,12 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       return errors.length === 0;
     }
   }, rest);
-  if (performRefresh) {
-    return dateInputComponent;
-  }
-  if (performPersistAsync) {
-    const persist = getComponentPersistAsync(update, performPersistAsync);
-    return __spreadProps(__spreadValues({}, dateInputComponent), {
-      onChange(updatedValue) {
-        dateInputComponent.onChange.call(this, updatedValue);
-        const isValid = getValidationErrors(updatedValue).length === 0;
-        if (isValid) {
-          persist(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      },
-      async getSubmittableValue() {
-        return persist(this, this.getLocalValue());
-      },
-      getSubmittableValueSync() {
-        return this.persistedState.lastResponse;
-      }
-    });
-  }
-  if (performValidationAsync) {
-    const validateAsync = getComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, dateInputComponent), {
-      onBlur() {
-        if (this.validate()) {
-          validateAsync(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      }
-    });
-  }
   return dateInputComponent;
 };
 
 // src/revamp/domain/mappers/schema/stringSchemaToComponent/stringSchemaToDateInputComponent.ts
 var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const {
     autocompleteHint,
     default: defaultValue,
@@ -5506,17 +5317,13 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
   } = schema;
   const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(schema.validationMessages);
-  const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
   const validLocalValue = isString(localValue) ? localValue : null;
   const validModel = isString(model) ? model : defaultValue != null ? defaultValue : null;
-  const value = performPersistAsync ? validLocalValue : validModel;
+  const value = onPersistAsync ? validLocalValue : validModel;
   return createDateInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       autoComplete: getAutocompleteString(autocompleteHint),
@@ -5533,10 +5340,8 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
         }))
       } : void 0,
       value,
-      persistedState,
       validationAsyncState,
-      performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5551,8 +5356,6 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   const { accepts, autocompleteHint, cameraConfig, hidden, maxSize, source, validationMessages } = schema;
   const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
-  const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
   const validLocalValue = isFile(localValue) ? localValue : null;
   const value = (_a = getFileFromModel(model)) != null ? _a : validLocalValue;
   const checks = hidden ? [] : [
@@ -5570,9 +5373,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
       maxSize,
       source,
       value,
-      persistedState,
-      performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -5586,26 +5387,27 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
     uid,
     id,
     checks,
-    performPersistAsync,
-    performRefresh,
+    schemaOnChange,
     performValidationAsync,
     onValueChange,
+    onPersistAsync,
     summariser,
     value
   } = _a, rest = __objRest(_a, [
     "uid",
     "id",
     "checks",
-    "performPersistAsync",
-    "performRefresh",
+    "schemaOnChange",
     "performValidationAsync",
     "onValueChange",
+    "onPersistAsync",
     "summariser",
     "value"
   ]);
   const update = getInputUpdateFunction(updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
-  const performDebouncedRefresh = getDebouncedPerformRefresh(performRefresh, getValidationErrors);
+  const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
+  const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const inputComponent = __spreadValues({
     type: "text",
     uid,
@@ -5615,8 +5417,12 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       update(this, updateFn);
     },
     onBlur() {
-      this.validate();
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh.flush();
+      const isValid = this.validate();
+      performOnChange == null ? void 0 : performOnChange.flush();
+      if (isValid) {
+        onPersistAsync == null ? void 0 : onPersistAsync();
+        validateAsync == null ? void 0 : validateAsync.flush();
+      }
     },
     onFocus() {
     },
@@ -5628,7 +5434,14 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
         draft.validationAsyncState.messages = {};
         draft.value = updatedValue;
       });
-      performDebouncedRefresh == null ? void 0 : performDebouncedRefresh(prevValue, updatedValue);
+      performOnChange == null ? void 0 : performOnChange(prevValue, updatedValue);
+      const isValid = getValidationErrors(updatedValue).length === 0;
+      if (isValid) {
+        validateAsync == null ? void 0 : validateAsync(this, updatedValue);
+      }
+      if (!updatedValue) {
+        validateAsync == null ? void 0 : validateAsync.cancel();
+      }
       onValueChange();
     },
     async getSubmittableValue() {
@@ -5651,51 +5464,12 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
       return errors.length === 0;
     }
   }, rest);
-  if (performRefresh) {
-    return inputComponent;
-  }
-  if (performPersistAsync) {
-    const persist = getComponentPersistAsync(update, performPersistAsync);
-    return __spreadProps(__spreadValues({}, inputComponent), {
-      onBlur() {
-        if (this.validate()) {
-          persist(this, this.getLocalValue()).catch(() => {
-          });
-        }
-      },
-      async getSubmittableValue() {
-        return persist(this, this.getLocalValue());
-      },
-      getSubmittableValueSync() {
-        return this.persistedState.lastResponse;
-      }
-    });
-  }
-  if (performValidationAsync) {
-    const validateAsync = getDebouncedComponentValidationAsync(update, performValidationAsync);
-    return __spreadProps(__spreadValues({}, inputComponent), {
-      onBlur() {
-        if (this.validate()) {
-          validateAsync.flush();
-        }
-      },
-      onChange(updatedValue) {
-        inputComponent.onChange.call(this, updatedValue);
-        if (getValidationErrors(updatedValue).length === 0) {
-          validateAsync(this, updatedValue);
-        }
-        if (!updatedValue) {
-          validateAsync.cancel();
-        }
-      }
-    });
-  }
   return inputComponent;
 };
 
 // src/revamp/domain/mappers/schema/stringSchemaToComponent/stringSchemaToTextInputComponent.ts
 var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
-  const { schema, localValue, model, required = false } = schemaMapperProps;
+  const { schema, localValue, model, required = false, onPersistAsync } = schemaMapperProps;
   const {
     autocapitalization,
     autocompleteHint,
@@ -5711,17 +5485,13 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
   const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange, logEvent } = mapperProps;
   const controlForLegacyFormat = getControlForLegacyFormat(format);
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
-  const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
-    schemaMapperProps,
-    mapperProps
-  );
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
     mapperProps
   );
   const validLocalValue = isString(localValue) ? localValue : null;
   const validModel = isString(model) ? model : defaultValue != null ? defaultValue : null;
-  const value = performPersistAsync ? validLocalValue : validModel;
+  const value = onPersistAsync ? validLocalValue : validModel;
   return createTextInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
       autocapitalization,
@@ -5742,10 +5512,8 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
         }))
       } : void 0,
       value,
-      persistedState,
       validationAsyncState,
-      performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onBehavior),
+      schemaOnChange: getSchemaOnChange(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5776,6 +5544,136 @@ var isStringSchemaWithBase64 = (schema) => {
   return schema.format === "base64url" && !("persistAsync" in schema);
 };
 
+// src/revamp/domain/components/utils/isExactLocalValueMatch.ts
+var isExactLocalValueMatch = (valueA, valueB) => {
+  if (isArrayLocalValue(valueA) && isArrayLocalValue(valueB)) {
+    return valueA.length === valueB.length && valueA.every((value, index) => isExactLocalValueMatch(value, valueB[index]));
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    const keysA = Object.keys(valueA);
+    const keysB = Object.keys(valueB);
+    return keysA.length === keysB.length && keysA.every((key) => isExactLocalValueMatch(valueA[key], valueB[key]));
+  }
+  return valueA === valueB;
+};
+
+// src/revamp/domain/components/PersistAsyncComponent.ts
+var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, updateComponent) => {
+  const { uid, schemaId, component, hidden, model, localValue } = props;
+  const update = getInputUpdateFunction(updateComponent);
+  const paComponent = {
+    type: "persist-async",
+    uid,
+    schemaId,
+    component,
+    hidden,
+    lastSubmitted: model != null ? localValue != null ? localValue : null : null,
+    lastResponse: model != null ? model : null,
+    submission: Promise.resolve(model != null ? model : null),
+    abortController: new AbortController(),
+    errors: [],
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    validate() {
+      return this.component.validate();
+    },
+    getLocalValue() {
+      return this.component.getLocalValue();
+    },
+    async getSubmittableValue() {
+      return this.persist();
+    },
+    getSubmittableValueSync() {
+      return this.lastResponse;
+    },
+    getSummary() {
+      return this.component.getSummary();
+    },
+    async persist() {
+      const childLocalValue = this.component.getLocalValue();
+      if (isExactLocalValueMatch(childLocalValue, this.lastSubmitted)) {
+        return this.submission;
+      }
+      const newAbortController = abortAndResetController(this.abortController);
+      if (childLocalValue == null || childLocalValue === "") {
+        const resolvedNull = Promise.resolve(null);
+        this._update((draft) => {
+          draft.abortController = newAbortController;
+          draft.lastResponse = null;
+          draft.lastSubmitted = childLocalValue;
+          draft.submission = resolvedNull;
+          draft.errors = [];
+        });
+        schemaOnChange == null ? void 0 : schemaOnChange();
+        return resolvedNull;
+      }
+      const { signal } = newAbortController;
+      const newSubmission = performPersistAsync({ value: childLocalValue, signal }).then((token) => {
+        this._update((draft) => {
+          draft.lastResponse = token;
+          draft.errors = [];
+        });
+        schemaOnChange == null ? void 0 : schemaOnChange();
+        return token;
+      }).catch((error) => {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return null;
+        }
+        this._update((draft) => {
+          draft.lastResponse = null;
+          draft.lastSubmitted = null;
+          draft.errors = error instanceof Error ? [error.message] : [];
+        });
+        throw error;
+      });
+      this._update((draft) => {
+        draft.abortController = newAbortController;
+        draft.lastSubmitted = childLocalValue;
+        draft.lastResponse = null;
+        draft.submission = newSubmission;
+        draft.errors = [];
+      });
+      return newSubmission;
+    }
+  };
+  return paComponent;
+};
+
+// src/revamp/domain/mappers/schema/persistAsyncSchemaToComponent.ts
+var isSupported = (type) => ["boolean", "text", "date", "integer", "number", "upload"].includes(type);
+var persistAsyncSchemaToComponent = (schemaMapperProps, mapperProps) => {
+  var _a;
+  const { uid, schema, model, localValue } = schemaMapperProps;
+  const { persistAsync } = schema;
+  const performPersistAsync = getPerformPersistAsyncFn(schema, persistAsync, mapperProps);
+  const onPersistAsync = () => {
+    void paComponent.persist().catch(() => {
+    });
+  };
+  const childComponent = mapSchemaToComponent(
+    __spreadProps(__spreadValues({}, schemaMapperProps), { uid: `${uid}-persist`, schema: persistAsync.schema, onPersistAsync }),
+    mapperProps
+  );
+  if (!isSupported(childComponent.type)) {
+    return childComponent;
+  }
+  const paComponent = createPersistAsyncComponent(
+    {
+      uid,
+      hidden: (_a = schema.hidden) != null ? _a : false,
+      component: childComponent,
+      schemaId: schema.$id,
+      model,
+      localValue
+    },
+    performPersistAsync,
+    getSchemaOnChange(schema, mapperProps.onBehavior),
+    mapperProps.updateComponent
+  );
+  return paComponent;
+};
+
 // src/revamp/domain/mappers/mapSchemaToComponent.ts
 var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { uid, schema } = schemaMapperProps;
@@ -5783,13 +5681,7 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return constSchemaToComponent(uid, __spreadProps(__spreadValues({}, schemaMapperProps), { schema }));
   }
   if (isSchemaWithPersistAsync(schema)) {
-    const { persistAsync } = schema;
-    const { idProperty, method, param, url } = persistAsync;
-    const persistAsyncConfig = { idProperty, method, param, url };
-    return mapSchemaToComponent(
-      __spreadProps(__spreadValues({}, schemaMapperProps), { persistAsyncConfig, schema: persistAsync.schema }),
-      mapperProps
-    );
+    return persistAsyncSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isAllOfSchema(schema)) {
     return allOfSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
@@ -5816,7 +5708,7 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return arraySchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isBlobSchema(schema)) {
-    if (!schemaMapperProps.persistAsyncConfig) {
+    if (!schemaMapperProps.onPersistAsync) {
       throw new Error(
         "Blob schemas can only be used as the schema of a persist async configuration."
       );
@@ -6018,8 +5910,8 @@ var executePoll = async (props) => {
 
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
-  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent, logEvent } = props;
-  trackEvent("Refresh Triggered", { schema: schemaId });
+  const { abortSignal, url, model, etag, analytics, httpClient, trackEvent, logEvent } = props;
+  trackEvent("Refresh Triggered", analytics);
   try {
     const response = await httpClient(url != null ? url : "", {
       method: "POST",
@@ -6030,34 +5922,34 @@ var executeRefresh = async (props) => {
       signal: abortSignal
     });
     if (response.status === 304) {
-      trackEvent("Refresh Succeeded", { schema: schemaId });
+      trackEvent("Refresh Succeeded", analytics);
       return { type: "noop" };
     }
     if (!response.ok) {
       const responseBody = await parseResponseBodyAsJsonElement(response).catch(() => ({}));
       const body2 = isErrorResponseBody(responseBody) ? responseBody : {};
-      trackEvent("Refresh Failed", __spreadProps(__spreadValues({}, body2.analytics), {
-        schema: schemaId,
+      trackEvent("Refresh Failed", __spreadProps(__spreadValues(__spreadValues({}, analytics), body2.analytics), {
+        statusCode: response.status
+      }));
+      logEvent("error", "Dynamic Flow - Refresh Failed", __spreadProps(__spreadValues({}, analytics), {
         statusCode: response.status
       }));
-      logEvent("error", "Dynamic Flow - Refresh Failed", { schemaId, statusCode: response.status });
       return { type: "error", body: body2, statusCode: response.status };
     }
     const newEtag = response.headers.get("etag") || null;
     const body = await parseResponseBodyAsJsonElement(response);
     assertStepResponseBody(body);
-    trackEvent("Refresh Succeeded", { schema: schemaId });
+    trackEvent("Refresh Succeeded", analytics);
     return { type: "refresh-step", step: body, etag: newEtag };
   } catch (error) {
     if (error instanceof DOMException && error.name === "AbortError") {
-      trackEvent("Refresh Aborted", { schema: schemaId });
+      trackEvent("Refresh Aborted", analytics);
       return { type: "noop" };
     }
-    trackEvent("Refresh Failed", { schema: schemaId });
-    logEvent("error", "Dynamic Flow - Refresh Failed", {
-      schemaId,
+    trackEvent("Refresh Failed", analytics);
+    logEvent("error", "Dynamic Flow - Refresh Failed", __spreadProps(__spreadValues({}, analytics), {
       errorMessage: getErrorMessage(error)
-    });
+    }));
     return { type: "error", body: {} };
   }
 };
@@ -6091,7 +5983,7 @@ var executeSubmission = async (props) => {
       const extra = { actionId, errorMessage: "Network Error" };
       trackEvent("Action Failed", extra);
       logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
-      return { type: "error", body: {} };
+      return { type: "error" };
     }
     if (!response.ok) {
       return handleErrorResponse(response, actionId);
@@ -6134,16 +6026,27 @@ var executeSubmission = async (props) => {
     }
   };
   const handleErrorResponse = async (response, actionId) => {
-    const body = await parseResponseBodyAsJsonElement(response);
+    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 }, statusCode: response.status };
+      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
+        type: "error",
+        body: { errors, analytics },
+        httpError: { statusCode: response.status }
+      };
     }
     trackEvent("Action Failed", { actionId, statusCode: response.status });
-    return { type: "error", body: {}, statusCode: response.status };
+    const errorMessage = await parseResponseBodyAsText(response);
+    return {
+      type: "error",
+      httpError: {
+        message: errorMessage || void 0,
+        statusCode: response.status
+      }
+    };
   };
   return triggerAction(props.action, props.model, props.isInitial);
 };
@@ -6536,7 +6439,7 @@ function useDynamicFlowCore(props) {
         break;
       }
       case "refresh": {
-        await onRefresh(behavior.schemaId, behavior.url);
+        await onRefresh({ refreshUrl: behavior.url, analytics: behavior.analytics });
         break;
       }
       case "link": {
@@ -6567,7 +6470,7 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onAction = useCallback2(async (action) => {
-    var _a2;
+    var _a2, _b, _c, _d, _e, _f, _g;
     try {
       rootComponentRef.current.setLoadingState("submitting");
       const model = (_a2 = await rootComponentRef.current.getSubmittableValue()) != null ? _a2 : null;
@@ -6594,7 +6497,7 @@ function useDynamicFlowCore(props) {
         }
         case "error": {
           const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-          const { errors = { error: genericErrorMessage } } = command.body;
+          const errors = (_c = (_b = command.body) == null ? void 0 : _b.errors) != null ? _c : { error: genericErrorMessage };
           if (stepRef.current) {
             updateStep(
               __spreadProps(__spreadValues({}, stepRef.current), {
@@ -6611,19 +6514,20 @@ function useDynamicFlowCore(props) {
               etagRef.current
             );
           } else {
+            const errorMessage = ((_e = (_d = command.body) == null ? void 0 : _d.errors) == null ? void 0 : _e.error) || ((_f = command.httpError) == null ? void 0 : _f.message) || "Initial request failed";
             closeWithError(
-              new Error("Initial request failed", {
+              new Error(errorMessage, {
                 cause: `method: ${action.method}, url: ${action.url}`
               }),
               {},
-              command.statusCode
+              (_g = command.httpError) == null ? void 0 : _g.statusCode
             );
           }
           break;
         }
         case "refresh": {
           const { refreshUrl, errors = {} } = command.body;
-          void onRefresh(void 0, refreshUrl, errors);
+          void onRefresh({ refreshUrl, errorsOverride: errors });
           break;
         }
         case "behavior": {
@@ -6637,7 +6541,11 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onRefresh = useCallback2(
-    async (schemaId, refreshUrl, errorsOverride) => {
+    async ({
+      refreshUrl,
+      errorsOverride,
+      analytics
+    }) => {
       var _a2, _b;
       try {
         rootComponentRef.current.setLoadingState("refreshing");
@@ -6646,8 +6554,8 @@ function useDynamicFlowCore(props) {
           abortSignal: abortCurrentAndGetNewAbortSignal(),
           url: (_b = refreshUrl != null ? refreshUrl : rootComponentRef.current.getRefreshUrl()) != null ? _b : "",
           model,
-          schemaId,
           etag: etagRef.current,
+          analytics,
           httpClient,
           trackEvent: trackCoreEvent,
           logEvent