@wise/dynamic-flow-client 5.0.1-exp-css-28d60ea → 5.1.0

package/README.md

@@ -36,9 +36,14 @@ pnpm install @transferwise/components @transferwise/formatting @transferwise/ico
 ```
 **Note:** Keep in mind that some of these dependencies have their own peer dependencies. Don't forget to install those, for instance: `@transferwise/components` needs `@wise/art` and `@wise/components-theming`.
 
+3. In addition to the design system styles, you need to import the DynamicFlow styles once into your application. You can do this either via JavaScript or CSS.
+
 ```js
-// Should be imported once in your application
-import '@wise/dynamic-flow-client/build/main.css';
+import '@wise/dynamic-flow-client/main.css'; // JavaScript
+```
+
+```css
+@import url('@wise/dynamic-flow-client/build/main.css'); /* CSS */
 ```
 
 The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).

package/build/main.js

@@ -1175,15 +1175,16 @@ var createAlertComponent = (alertProps) => __spreadValues({
 }, alertProps);
 
 // src/domain/mappers/utils/behavior-utils.ts
-var getDomainLayerBehavior = ({
-  action,
-  behavior
-}, stepActions) => {
-  if (behavior) {
-    return normaliseBehavior(behavior, stepActions);
+var getDomainLayerBehavior = ({ action, behavior: specBehavior }, stepActions, registerSubmissionBehavior) => {
+  if (specBehavior) {
+    const behavior = normaliseBehavior(specBehavior, stepActions);
+    registerSubmissionBehavior == null ? void 0 : registerSubmissionBehavior(behavior);
+    return behavior;
   }
   if (action) {
-    return actionToBehavior(action, stepActions);
+    const behavior = actionToBehavior(action, stepActions);
+    registerSubmissionBehavior == null ? void 0 : registerSubmissionBehavior(behavior);
+    return behavior;
   }
   return { type: "none" };
 };
@@ -1213,14 +1214,17 @@ var getActionByReference = ($ref, actions = []) => {
 };
 
 // src/domain/mappers/utils/call-to-action-utils.ts
-var getDomainLayerCallToAction = (callToAction, onBehavior, stepActions) => {
+var getDomainLayerCallToAction = (callToAction, mapperProps) => {
+  var _a;
   if (!callToAction) {
     return void 0;
   }
+  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const stepActions = (_a = step.actions) != null ? _a : [];
   const { title = "", accessibilityDescription, action, behavior } = callToAction;
   return getCallToAction(
     { title, accessibilityDescription },
-    getDomainLayerBehavior({ action, behavior }, stepActions),
+    getDomainLayerBehavior({ action, behavior }, stepActions, registerSubmissionBehavior),
     onBehavior
   );
 };
@@ -1314,9 +1318,8 @@ var alertLayoutToComponent = (uid, {
   callToAction,
   analyticsId,
   tags
-}, { onBehavior, step }) => {
-  var _a;
-  const cta = callToAction ? getDomainLayerCallToAction(callToAction, onBehavior, (_a = step.actions) != null ? _a : []) : void 0;
+}, mapperProps) => {
+  const cta = callToAction ? getDomainLayerCallToAction(callToAction, mapperProps) : void 0;
   return createAlertComponent({
     uid,
     analyticsId,
@@ -1405,7 +1408,11 @@ var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
     analyticsId,
     tags
   } = button;
-  const behavior = getDomainLayerBehavior(button, (_a = mapperProps.step.actions) != null ? _a : []);
+  const behavior = getDomainLayerBehavior(
+    button,
+    (_a = mapperProps.step.actions) != null ? _a : [],
+    mapperProps.registerSubmissionBehavior
+  );
   const onClick = () => {
     void onBehavior(behavior);
   };
@@ -1549,9 +1556,10 @@ var mapInlineAlert = (alert) => {
     context: alert.context ? mapLegacyContext(alert.context) : "neutral"
   } : void 0;
 };
-var mapAdditionalInfo = (info, onBehavior) => {
+var mapAdditionalInfo = (info, mapperProps) => {
+  const { onBehavior, registerSubmissionBehavior } = mapperProps;
   if (info) {
-    const behavior = getDomainLayerBehavior(info, []);
+    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
     return {
       text: info.text,
       href: behavior.type === "link" ? behavior.url : void 0,
@@ -1578,20 +1586,21 @@ var decisionLayoutToComponent = (uid, {
   options,
   tags,
   title
-}, { onBehavior, step }) => createDecisionComponent({
+}, mapperProps) => createDecisionComponent({
   uid,
   analyticsId,
   control,
   margin,
-  options: options.map((option) => mapOption(option, onBehavior, step.actions)),
+  options: options.map((option) => mapOption(option, mapperProps)),
   tags,
   title
 });
-var mapOption = (option, onBehavior, stepActions = []) => {
-  var _a;
-  const behavior = getDomainLayerBehavior(option, stepActions);
+var mapOption = (option, mapperProps) => {
+  var _a, _b;
+  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const behavior = getDomainLayerBehavior(option, (_a = step.actions) != null ? _a : [], registerSubmissionBehavior);
   return __spreadProps(__spreadValues({}, option), {
-    disabled: (_a = option.disabled) != null ? _a : false,
+    disabled: (_b = option.disabled) != null ? _b : false,
     href: behavior.type === "link" ? behavior.url : void 0,
     media: getDomainLayerMedia(option),
     inlineAlert: mapInlineAlert(option.inlineAlert),
@@ -1780,21 +1789,18 @@ var createListComponent = (listProps) => __spreadValues({
 
 // src/domain/mappers/layout/listLayoutToComponent.ts
 var listLayoutToComponent = (uid, { analyticsId, callToAction, control, items, margin = "md", tags, title }, mapperProps) => {
-  var _a;
-  const { step, onBehavior } = mapperProps;
   return createListComponent({
     uid,
     analyticsId,
     control,
     items: items.map((item) => mapItem(item, mapperProps)),
-    callToAction: getDomainLayerCallToAction(callToAction, onBehavior, (_a = step.actions) != null ? _a : []),
+    callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
     margin,
     tags,
     title
   });
 };
 var mapItem = (item, mapperProps) => {
-  var _b;
   const _a = item, {
     value,
     subvalue,
@@ -1818,14 +1824,13 @@ var mapItem = (item, mapperProps) => {
     "additionalInfo",
     "inlineAlert"
   ]);
-  const { step, onBehavior } = mapperProps;
   return __spreadProps(__spreadValues({}, rest), {
     description: description != null ? description : subtitle,
     media: getDomainLayerMedia({ icon, image, media }),
     supportingValues: mapSupportingValues(item),
-    additionalInfo: mapAdditionalInfo(additionalInfo, onBehavior),
+    additionalInfo: mapAdditionalInfo(additionalInfo, mapperProps),
     inlineAlert: mapInlineAlert(inlineAlert),
-    callToAction: getDomainLayerCallToAction(callToAction, onBehavior, (_b = step.actions) != null ? _b : []),
+    callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
     tags: mapTags(rest)
   });
 };
@@ -1937,31 +1942,30 @@ var reviewLayoutToComponent = (uid, {
   tags,
   orientation,
   action
-}, { onBehavior, step }) => createReviewComponent({
+}, mapperProps) => createReviewComponent({
   uid,
   analyticsId,
-  callToAction: getCallToAction2({ onBehavior, callToAction, action, stepActions: step.actions }),
+  callToAction: getCallToAction2({ mapperProps, callToAction, action }),
   control: getOrientationControl({ control, orientation }),
-  fields: fields.map((field) => mapReviewField(field, { onBehavior, step })),
+  fields: fields.map((field) => mapReviewField(field, mapperProps)),
   margin,
   tags,
   title
 });
 var getCallToAction2 = ({
-  onBehavior,
   callToAction,
   action,
-  stepActions = []
+  mapperProps
 }) => {
   if (callToAction) {
-    return getDomainLayerCallToAction(callToAction, onBehavior, stepActions);
+    return getDomainLayerCallToAction(callToAction, mapperProps);
   }
   if (action == null ? void 0 : action.title) {
     return {
       type: "action",
       title: action.title,
       onClick: () => {
-        void onBehavior({ type: "action", action });
+        void mapperProps.onBehavior({ type: "action", action });
       }
     };
   }
@@ -1979,17 +1983,16 @@ var getOrientationControl = ({
   }
   return void 0;
 };
-var mapReviewField = (field, { onBehavior, step }) => {
-  var _a, _b;
+var mapReviewField = (field, mapperProps) => {
+  var _a;
   return __spreadProps(__spreadValues({}, field), {
     media: getDomainLayerMedia(field),
     help: (_a = field.help) == null ? void 0 : _a.markdown,
     inlineAlert: mapInlineAlert(field.inlineAlert),
-    additionalInfo: mapAdditionalInfo(field.additionalInfo, onBehavior),
+    additionalInfo: mapAdditionalInfo(field.additionalInfo, mapperProps),
     callToAction: getCallToAction2({
-      onBehavior,
       callToAction: field.callToAction,
-      stepActions: (_b = step.actions) != null ? _b : []
+      mapperProps
     }),
     tags: mapTags(field)
   });
@@ -2186,17 +2189,12 @@ var searchLayoutToComponent = (uid, {
 };
 
 // src/domain/mappers/layout/statusListLayoutToComponent.ts
-var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin = "md", tags, title }, { onBehavior, step }) => createStatusListComponent({
+var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin = "md", tags, title }, mapperProps) => createStatusListComponent({
   uid,
   analyticsId,
   control,
   items: items.map((item) => {
-    var _a;
-    const callToAction = getDomainLayerCallToAction(
-      item.callToAction,
-      onBehavior,
-      (_a = step.actions) != null ? _a : []
-    );
+    const callToAction = getDomainLayerCallToAction(item.callToAction, mapperProps);
     return __spreadProps(__spreadValues({}, item), { callToAction, tags: mapTags(item) });
   }),
   margin,
@@ -2217,7 +2215,6 @@ var createSectionComponent = (props) => {
 
 // src/domain/mappers/layout/sectionLayoutToComponent.ts
 var sectionLayoutToComponent = (uid, { analyticsId, control, title, components, callToAction, margin = "md", tags }, mapperProps, schemaComponents) => {
-  var _a;
   return createSectionComponent({
     uid,
     analyticsId,
@@ -2227,11 +2224,7 @@ var sectionLayoutToComponent = (uid, { analyticsId, control, title, components,
       (component, index) => mapLayoutToComponent(`${uid}.section-${index}`, component, mapperProps, schemaComponents)
     ),
     margin,
-    callToAction: getDomainLayerCallToAction(
-      callToAction,
-      mapperProps.onBehavior,
-      (_a = mapperProps.step.actions) != null ? _a : []
-    ),
+    callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
     tags
   });
 };
@@ -2360,34 +2353,39 @@ var modalToComponent = (uid, { content, title }, mapperProps, schemaComponents)
   mapperProps.updateComponent
 );
 
-// src/domain/components/step/ExternalConfirmationComponent.ts
-var createExternalConfirmation = (uid, url, updateComponent) => {
-  const update = getInputUpdateFunction(updateComponent);
+// src/domain/prefetching/request-cache.ts
+var makeRequestCache = () => {
+  const cache = /* @__PURE__ */ new Map();
   return {
-    type: "external-confirmation",
-    kind: "layout",
-    uid,
-    url,
-    status: "initial",
-    onSuccess() {
-      update(this, (draft) => {
-        draft.status = "success";
-      });
+    has: (...requestParams) => {
+      return cache.has(makeKey(...requestParams));
     },
-    onFailure() {
-      if (this.status === "initial") {
-        update(this, (draft) => {
-          draft.status = "failure";
-        });
-      }
+    get: (...requestParams) => {
+      return cache.get(makeKey(...requestParams));
     },
-    onCancel() {
-      update(this, (draft) => {
-        draft.status = "dismissed";
-      });
+    delete: (...requestParams) => {
+      return cache.delete(makeKey(...requestParams));
+    },
+    set: (...[input, init, response]) => {
+      return cache.set(makeKey(input, init), response);
+    },
+    clear: () => {
+      cache.clear();
     }
   };
 };
+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/utils/recursiveMerge.ts
 function recursiveMerge(valueA, valueB) {
@@ -2428,6 +2426,57 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
+// src/flow/makeSubmissionRequest.ts
+var makeSubmissionRequest = (action, model) => {
+  var _a, _b;
+  return [
+    (_a = action.url) != null ? _a : "",
+    {
+      method: (_b = action.method) != null ? _b : "POST",
+      body: makeRequestBody(action, model),
+      headers: { "Content-Type": "application/json" }
+    }
+  ];
+};
+var makeRequestBody = (action, model) => {
+  var _a, _b;
+  const method = (_a = action.method) != null ? _a : "POST";
+  if (method === "GET") {
+    return void 0;
+  }
+  const payload = recursiveMerge(model, (_b = action.data) != null ? _b : null);
+  return payload !== null ? JSON.stringify(payload) : null;
+};
+
+// src/domain/components/step/ExternalConfirmationComponent.ts
+var createExternalConfirmation = (uid, url, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "external-confirmation",
+    kind: "layout",
+    uid,
+    url,
+    status: "initial",
+    onSuccess() {
+      update(this, (draft) => {
+        draft.status = "success";
+      });
+    },
+    onFailure() {
+      if (this.status === "initial") {
+        update(this, (draft) => {
+          draft.status = "failure";
+        });
+      }
+    },
+    onCancel() {
+      update(this, (draft) => {
+        draft.status = "dismissed";
+      });
+    }
+  };
+};
+
 // src/utils/component-utils.ts
 var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
   (values) => values.reduce((acc, value) => recursiveMerge(acc, value), null)
@@ -2507,7 +2556,8 @@ var getStepPolling = ({
   pollingConfig,
   logEvent,
   onBehavior,
-  onPoll
+  onPoll,
+  registerSubmissionBehavior
 }) => {
   const { interval, delay = interval, maxAttempts, url, onError } = pollingConfig;
   let abortController = new AbortController();
@@ -2515,7 +2565,7 @@ var getStepPolling = ({
   if (delay == null) {
     throw new Error("Polling configuration must include delay or interval");
   }
-  const onErrorBehavior = getDomainLayerBehavior(onError, []);
+  const onErrorBehavior = getDomainLayerBehavior(onError, [], registerSubmissionBehavior);
   let attempts = 0;
   const poll = () => {
     attempts += 1;
@@ -4830,11 +4880,12 @@ var objectSchemaToMoneyInputComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 var createMoneyInputSubComponents = (schemaMapperProps, mapperProps) => {
-  const { schema: objectSchema } = schemaMapperProps;
+  const { schema: objectSchema, model } = schemaMapperProps;
   const amountKey = getAmountSchemaKey(objectSchema, mapperProps);
   const currencyKey = getCurrencySchemaKey(objectSchema, mapperProps);
   const currencySchema = objectSchema.properties[currencyKey];
   const customSchemaMapperProps = __spreadProps(__spreadValues({}, schemaMapperProps), {
+    model: getSanitizedModel(amountKey, model),
     schema: isOneOfSchema(currencySchema) ? objectSchema : replaceKeyInObjectSchema(objectSchema, currencyKey, { oneOf: [currencySchema] })
   });
   const componentMap = createComponentMap(customSchemaMapperProps, mapperProps, "money");
@@ -4846,6 +4897,18 @@ var createMoneyInputSubComponents = (schemaMapperProps, mapperProps) => {
   const checks = getMinMaxChecks(objectSchema, amountKey, mapperProps);
   return { amountKey, amountComponent, currencyKey, currencyComponent, extraValues, checks };
 };
+var isNumberString = (value) => {
+  return typeof value === "string" && !Number.isNaN(Number.parseFloat(value)) && /^\d*(?:\.\d*)?$/.test(value);
+};
+var getSanitizedModel = (key, value) => {
+  if (isObject(value)) {
+    const amount = value[key];
+    if (!isNumberString(amount)) {
+      return __spreadProps(__spreadValues({}, value), { [key]: null });
+    }
+  }
+  return value;
+};
 var getAmountSchemaKey = ({ displayOrder, properties }, mapperProps) => {
   var _a;
   const entry = displayOrder.map((key) => ({ key, schema: properties[key] })).find(({ schema }) => isAmountSchema(schema));
@@ -5647,7 +5710,11 @@ var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
     tags: toolbar.tags,
     items: toolbar.items.map((item) => {
       const context = item.context ? mapLegacyContext(item.context) : void 0;
-      const behavior = getDomainLayerBehavior({ behavior: item.behavior }, []);
+      const behavior = getDomainLayerBehavior(
+        { behavior: item.behavior },
+        [],
+        mapperProps.registerSubmissionBehavior
+      );
       return __spreadProps(__spreadValues({}, item), {
         context: context ? mapLegacyContext(context) : void 0,
         disabled: !!item.disabled,
@@ -5743,16 +5810,29 @@ var mapStepToComponent = (_a) => {
     title,
     tags
   } = step;
+  const submissionRequestsCache = makeRequestCache();
+  const submissionBehaviors = [];
+  const registerSubmissionBehavior = (behavior) => {
+    if (behavior.type === "action" && behavior.action.prefetch) {
+      submissionBehaviors.push(behavior);
+    }
+  };
   const back = mapBackNavigation(navigation, onBehavior, Boolean(features.nativeBack));
   const stepId = id || key;
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
   }
   const uid = `${rootUid}.${stepId != null ? stepId : "step"}`;
-  const stepPolling = polling ? getStepPolling({ pollingConfig: polling, logEvent, onBehavior, onPoll }) : void 0;
+  const stepPolling = polling ? getStepPolling({
+    pollingConfig: polling,
+    logEvent,
+    onBehavior,
+    onPoll,
+    registerSubmissionBehavior
+  }) : void 0;
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, logEvent, onBehavior }) : void 0;
   const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, updateComponent) : void 0;
-  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior });
+  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior, registerSubmissionBehavior });
   const referencedSchemaIds = getReferencedSchemaId(step);
   const schemaComponents = mapStepSchemas(
     uid,
@@ -5796,11 +5876,18 @@ var mapStepToComponent = (_a) => {
     title: !features.hideStepTitle ? title : void 0,
     tags,
     stackBehavior: (_a2 = navigation == null ? void 0 : navigation.stackBehavior) != null ? _a2 : "default",
+    submissionRequestsCache,
     step,
     updateComponent,
     trackEvent,
     onBehavior
   });
+  executePrefetch({
+    httpClient: mapperProps.httpClient,
+    model: stepComponent.getSubmittableValueSync(),
+    behaviors: submissionBehaviors,
+    requestsCache: submissionRequestsCache
+  });
   return stepComponent;
 };
 var getReferencedSchemaId = (step) => {
@@ -5821,6 +5908,22 @@ var mapBackNavigation = (navigation, onBehavior, isNativeBackEnabled) => {
     }
   } : void 0;
 };
+var executePrefetch = (props) => {
+  const {
+    httpClient,
+    behaviors: submissionBehaviors,
+    model,
+    requestsCache: submissionRequestsCache
+  } = props;
+  submissionBehaviors.forEach((behavior) => {
+    const requestParams = makeSubmissionRequest(behavior.action, model);
+    try {
+      const responsePromise = httpClient(...requestParams).catch(() => null);
+      submissionRequestsCache.set(...requestParams, responsePromise);
+    } catch (e) {
+    }
+  });
+};
 
 // src/flow/getResponseType.ts
 var responseTypes = ["step", "action", "exit", "modal"];
@@ -5949,11 +6052,20 @@ var executeRefresh = async (props) => {
   }
 };
 
+// src/flow/makeSafeHttpClient.ts
+var makeSafeHttpClient = (httpClient) => async (...props) => {
+  try {
+    return await httpClient(...props);
+  } catch (e) {
+    return null;
+  }
+};
+
 // src/flow/executeSubmission.ts
 var executeSubmission = async (props) => {
-  const { httpClient, trackEvent, logEvent } = props;
+  const { httpClient, requestCache, trackEvent, logEvent } = props;
   const triggerAction = async (action, model, isInitial) => {
-    const { exit, url, method = "POST", result = null, id: actionId } = action;
+    const { exit, url, result = null, id: actionId } = action;
     const trackSubmissionEvent = !isInitial ? trackEvent : () => {
     };
     trackSubmissionEvent("Action Triggered", { actionId });
@@ -5961,19 +6073,8 @@ var executeSubmission = async (props) => {
       trackSubmissionEvent("Action Succeeded", { actionId });
       return { type: "complete", result };
     }
-    const makeRequestBody = () => {
-      var _a;
-      if (method === "GET") {
-        return void 0;
-      }
-      const payload = recursiveMerge(model, (_a = action.data) != null ? _a : null);
-      return payload !== null ? JSON.stringify(payload) : null;
-    };
-    const response = await getSafeHttpClient(httpClient)(url != null ? url : "", {
-      method,
-      body: makeRequestBody(),
-      headers: { "Content-Type": "application/json" }
-    });
+    const requestParams = makeSubmissionRequest(action, model);
+    const response = await getCachedOrFetch(requestParams, requestCache, httpClient);
     if (!response) {
       const extra = { actionId, errorMessage: "Network Error" };
       trackEvent("Action Failed", extra);
@@ -6046,12 +6147,18 @@ var executeSubmission = async (props) => {
   };
   return triggerAction(props.action, props.model, props.isInitial);
 };
-var getSafeHttpClient = (httpClient) => async (input, init) => {
-  try {
-    return await httpClient(input, init);
-  } catch (e) {
-    return null;
+var getCachedOrFetch = async (requestParams, requestCache, httpClient) => {
+  if (requestCache == null ? void 0 : requestCache.has(...requestParams)) {
+    const cachedPromise = requestCache.get(...requestParams);
+    requestCache.delete(...requestParams);
+    if (cachedPromise) {
+      const cachedResponse = await cachedPromise;
+      if (cachedResponse == null ? void 0 : cachedResponse.ok) {
+        return cachedResponse;
+      }
+    }
   }
+  return makeSafeHttpClient(httpClient)(...requestParams);
 };
 
 // src/renderers/getSchemaErrorMessageFunction.ts
@@ -6503,10 +6610,14 @@ function useDynamicFlowCore(props) {
             modalToComponent(
               rootComponentRef.current.uid,
               behavior,
-              __spreadValues({
+              __spreadProps(__spreadValues({
                 step: currentStep,
                 stepLocalValue: rootComponentRef.current.getLocalValue()
-              }, getMapperProps()),
+              }, getMapperProps()), {
+                registerSubmissionBehavior: () => {
+                }
+                // this means actions in modal responses won't have prefetching
+              }),
               rootComponentRef.current.getSchemaComponents()
             )
           );
@@ -6525,13 +6636,14 @@ function useDynamicFlowCore(props) {
   }, []);
   const onAction = (0, import_react3.useCallback)(
     async (action, model) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
       try {
         rootComponentRef.current.setLoadingState("submitting");
         const command = await executeSubmission({
           action,
           model,
           isInitial: !rootComponentRef.current.hasStep(),
+          requestCache: (_a2 = rootComponentRef.current.getStep()) == null ? void 0 : _a2.submissionRequestsCache,
           httpClient,
           trackEvent: trackCoreEvent,
           logEvent
@@ -6552,7 +6664,7 @@ function useDynamicFlowCore(props) {
           case "error": {
             rootComponentRef.current.setLoadingState("idle");
             const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-            const errors = (_b = (_a2 = command.body) == null ? void 0 : _a2.errors) != null ? _b : { error: genericErrorMessage };
+            const errors = (_c = (_b = command.body) == null ? void 0 : _b.errors) != null ? _c : { error: genericErrorMessage };
             const currentStep = rootComponentRef.current.getStep();
             if (currentStep) {
               updateStep(
@@ -6566,16 +6678,16 @@ function useDynamicFlowCore(props) {
                   external: void 0
                   // and no external, to avoid retriggering it
                 }),
-                (_d = (_c = rootComponentRef.current.getStep()) == null ? void 0 : _c.etag) != null ? _d : null
+                (_e = (_d = rootComponentRef.current.getStep()) == null ? void 0 : _d.etag) != null ? _e : null
               );
             } else {
-              const errorMessage = ((_f = (_e = command.body) == null ? void 0 : _e.errors) == null ? void 0 : _f.error) || ((_g = command.httpError) == null ? void 0 : _g.message) || "Initial request failed";
+              const errorMessage = ((_g = (_f = command.body) == null ? void 0 : _f.errors) == null ? void 0 : _g.error) || ((_h = command.httpError) == null ? void 0 : _h.message) || "Initial request failed";
               closeWithError(
                 new Error(errorMessage, {
                   cause: `method: ${action.method}, url: ${action.url}`
                 }),
                 {},
-                (_h = command.httpError) == null ? void 0 : _h.statusCode
+                (_i = command.httpError) == null ? void 0 : _i.statusCode
               );
             }
             break;