@wise/dynamic-flow-client 4.3.14 → 4.5.0

package/build/main.mjs

@@ -1041,6 +1041,7 @@ function getChildren(node) {
     case "form":
     case "section":
     case "step":
+    case "modal-content":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1073,6 +1074,7 @@ function getChildren(node) {
     case "status-list":
     case "input-text":
     case "input-upload":
+    case "external-confirmation":
       return [];
   }
 }
@@ -1495,7 +1497,10 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
 };
 
 // src/revamp/renderers/mappers/reviewComponentToProps.ts
-var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "type", "callToAction", "control", "fields", "margin", "title")), rendererMapperProps);
+var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "type", "callToAction", "control", "margin", "title")), {
+  fields: component.fields.map(mapField)
+}), rendererMapperProps);
+var mapField = (field) => __spreadValues({}, field);
 
 // src/revamp/domain/mappers/utils/image.ts
 var mapSpecImage = (image) => {
@@ -1631,27 +1636,32 @@ var tupleComponentToProps = (component, rendererMapperProps) => {
 
 // src/revamp/renderers/mappers/listComponentToProps.ts
 var listComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "callToAction", "control", "margin", "title")), rendererMapperProps), {
-  items: component.items.map((_a) => {
-    var item = __objRest(_a, []);
-    return __spreadValues({}, item);
-  })
+  items: component.items.map(mapItem)
 });
+var mapItem = (item) => {
+  var _a, _b;
+  return __spreadProps(__spreadValues({}, item), {
+    // populate deprecated fields
+    subtitle: item.description,
+    value: (_a = item.supportingValues) == null ? void 0 : _a.value,
+    subvalue: (_b = item.supportingValues) == null ? void 0 : _b.subvalue
+  });
+};
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({
-  uid,
-  back,
-  control,
-  description,
-  error,
-  external,
-  loadingState,
-  step,
-  title,
-  components,
-  onBehavior
-}, rendererMapperProps) => {
-  const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+var stepComponentToProps = (component, rendererMapperProps) => {
+  const {
+    uid,
+    back,
+    control,
+    description,
+    error,
+    loadingState,
+    step,
+    title,
+    onBehavior
+  } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1660,7 +1670,6 @@ var stepComponentToProps = ({
     control,
     description,
     error,
-    external,
     loadingState,
     step,
     title,
@@ -1675,12 +1684,40 @@ var stepComponentToProps = ({
 // src/revamp/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
   const childrenProps = rootComponent.getChildren().map((child) => componentToRendererProps(child, rendererMapperProps));
-  return {
+  return __spreadValues({
     type: "root",
     uid: rootComponent.uid,
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
-  };
+  }, rendererMapperProps);
+};
+
+// src/revamp/renderers/mappers/modalContentComponentToProps.ts
+var modalContentComponentToProps = (component, rendererMapperProps) => {
+  const { uid, open, title, close } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    type: "modal-content",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
+// src/revamp/renderers/mappers/externalComponentToProps.ts
+var externalComponentToProps = (component, rendererMapperProps) => {
+  return __spreadValues({
+    type: "external-confirmation",
+    uid: component.uid,
+    url: component.url,
+    status: component.status,
+    onSuccess: component.onSuccess.bind(component),
+    onFailure: component.onFailure.bind(component),
+    onCancel: component.onCancel.bind(component)
+  }, rendererMapperProps);
 };
 
 // src/revamp/renderers/mappers/componentToRendererProps.ts
@@ -1713,6 +1750,8 @@ var componentToRendererProps = (component, rendererMapperProps) => {
       return decisionComponentToProps(component, rendererMapperProps);
     case "divider":
       return dividerComponentToProps(component, rendererMapperProps);
+    case "external-confirmation":
+      return externalComponentToProps(component, rendererMapperProps);
     case "form":
       return formComponentToProps(component, rendererMapperProps);
     case "heading":
@@ -1733,6 +1772,8 @@ var componentToRendererProps = (component, rendererMapperProps) => {
       return markdownComponentToProps(component, rendererMapperProps);
     case "modal":
       return modalComponentToProps(component, rendererMapperProps);
+    case "modal-content":
+      return modalContentComponentToProps(component, rendererMapperProps);
     case "multi-select":
       return multiSelectInputComponentToProps(component, rendererMapperProps);
     case "multi-upload":
@@ -1777,6 +1818,37 @@ var getInputUpdateFunction = (updateComponent) => {
   };
 };
 
+// src/revamp/utils/component-utils.ts
+var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
+  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
+);
+var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
+var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
+var mergeLocalValues = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+var mergeModels = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectModel(valueA) && isObjectModel(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+
 // src/revamp/domain/components/RootDomainComponent.ts
 var createRootDomainComponent = (updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
@@ -1787,17 +1859,29 @@ var createRootDomainComponent = (updateComponent) => {
     _update(updateFn) {
       update(this, updateFn);
     },
+    dismissAllModals() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissAllModals();
+    },
+    dismissModal() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissModal();
+    },
+    showModal(modal) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.showModal(modal);
+    },
     getChildren() {
-      return this.stepComponent ? [this.stepComponent] : [];
+      return this.stepComponent ? [this.stepComponent, ...this.stepComponent.getModals()] : [];
     },
     getLocalValue() {
       return this.stepComponent ? this.stepComponent.getLocalValue() : null;
     },
     async getSubmittableValue() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
+      return this.stepComponent ? getSubmittableData([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSubmittableValueSync() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
+      return this.stepComponent ? getSubmittableDataSync([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSummary() {
       return this.stepComponent ? this.stepComponent.getSummary() : {};
@@ -1831,35 +1915,38 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
-// src/revamp/utils/component-utils.ts
-var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
-  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
-);
-var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
-var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
-var mergeLocalValues = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
-};
-var mergeModels = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectModel(valueA) && isObjectModel(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
+// src/revamp/domain/components/step/ExternalConfirmationComponent.ts
+var createExternalConfirmation = (uid, url, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "external-confirmation",
+    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";
+      });
+    },
+    getSubmittableValue: async () => null,
+    getSubmittableValueSync: () => null,
+    getLocalValue: () => null,
+    getSummary: () => ({}),
+    // Noop
+    validate: () => true
+  };
 };
 
 // src/revamp/domain/features/summary/summary-utils.ts
@@ -1902,7 +1989,7 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
 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/components/StepDomainComponent.ts
+// src/revamp/domain/components/step/StepDomainComponent.ts
 var createStepComponent = (stepProps) => {
   const _a = stepProps, { uid, stepPolling, stepRefreshAfter, updateComponent } = _a, rest = __objRest(_a, ["uid", "stepPolling", "stepRefreshAfter", "updateComponent"]);
   const update = getInputUpdateFunction(updateComponent);
@@ -1910,11 +1997,29 @@ var createStepComponent = (stepProps) => {
     uid
   }, rest), {
     type: "step",
+    modals: [],
+    dismissModal() {
+      var _a2;
+      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+    },
+    dismissAllModals() {
+      this._update((draft) => {
+        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
+      });
+    },
+    showModal(modal) {
+      this._update((draft) => {
+        draft.modals = [...draft.modals, modal];
+      });
+    },
     _update(updateFn) {
       update(this, updateFn);
     },
     getChildren() {
-      return this.components;
+      return this.externalConfirmation ? [...this.components, this.externalConfirmation] : this.components;
+    },
+    getModals() {
+      return this.modals;
     },
     async getSubmittableValue() {
       return getSubmittableData(this.components);
@@ -1939,6 +2044,9 @@ var createStepComponent = (stepProps) => {
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      this._update((draft) => {
+        draft.modals = [];
+      });
     }
   });
   return component;
@@ -2067,9 +2175,11 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
     void onBehavior(behavior);
   };
   switch (behavior.type) {
-    case "action": {
+    case "action":
+    case "modal":
+    case "dismiss": {
       return {
-        type: "action",
+        type: behavior.type,
         title: title != null ? title : "",
         accessibilityDescription,
         onClick
@@ -2325,6 +2435,27 @@ var createDecisionComponent = (decisionProps) => __spreadProps(__spreadValues({
   validate: () => true
 });
 
+// src/revamp/domain/mappers/utils/utils.ts
+var mapInlineAlert = (alert) => {
+  return alert ? {
+    content: alert.content,
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+  } : void 0;
+};
+var mapAdditionalInfo = (info, onBehavior) => {
+  if (info) {
+    const behavior = getDomainLayerBehavior(info, []);
+    return {
+      text: info.text,
+      accessibilityDescription: info.accessibilityDescription,
+      onClick: () => {
+        void onBehavior(behavior);
+      }
+    };
+  }
+  return void 0;
+};
+
 // src/revamp/domain/mappers/layout/decisionLayoutToComponent.ts
 var decisionLayoutToComponent = (uid, {
   control,
@@ -2335,20 +2466,22 @@ var decisionLayoutToComponent = (uid, {
   uid,
   control,
   margin,
-  options: options.map((option) => {
-    var _a, _b;
-    const behavior = getDomainLayerBehavior(option, (_a = step.actions) != null ? _a : []);
-    return __spreadProps(__spreadValues({}, option), {
-      disabled: (_b = option.disabled) != null ? _b : false,
-      href: behavior.type === "link" ? behavior.url : void 0,
-      image: mapSpecImage(option.image),
-      onClick: () => {
-        void onBehavior(behavior);
-      }
-    });
-  }),
+  options: options.map((option) => mapOption(option, onBehavior, step.actions)),
   title
 });
+var mapOption = (option, onBehavior, stepActions = []) => {
+  var _a;
+  const behavior = getDomainLayerBehavior(option, stepActions);
+  return __spreadProps(__spreadValues({}, option), {
+    disabled: (_a = option.disabled) != null ? _a : false,
+    href: behavior.type === "link" ? behavior.url : void 0,
+    image: mapSpecImage(option.image),
+    inlineAlert: mapInlineAlert(option.inlineAlert),
+    onClick: () => {
+      void onBehavior(behavior);
+    }
+  });
+};
 
 // src/revamp/domain/components/DividerComponent.ts
 var createDividerComponent = (props) => __spreadProps(__spreadValues({
@@ -2957,6 +3090,16 @@ function assertActionResponseBody(body) {
     );
   }
 }
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
+    }
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
 function isErrorResponseBody(body) {
   return Boolean(
     isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
@@ -3635,6 +3778,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     },
     // noop
     onSelect(updatedIndex) {
+      if (updatedIndex === this.selectedIndex) {
+        return;
+      }
       if (updatedIndex !== null && this.analyticsId) {
         selectProps.trackEvent("OneOf Selected", {
           oneOfId: this.analyticsId,
@@ -5396,16 +5542,13 @@ var createReviewComponent = (reviewProps) => __spreadProps(__spreadValues({
 // src/revamp/domain/mappers/layout/reviewLayoutToComponent.ts
 var reviewLayoutToComponent = (uid, { fields, title, callToAction, control, margin = "md", orientation, action }, { onBehavior, step }) => createReviewComponent({
   uid,
-  callToAction: getReviewAction({ onBehavior, callToAction, action, stepActions: step.actions }),
+  callToAction: getCallToAction2({ onBehavior, callToAction, action, stepActions: step.actions }),
   control: getOrientationControl({ control, orientation }),
-  fields: fields.map((field) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, field), { help: (_a = field.help) == null ? void 0 : _a.markdown });
-  }),
+  fields: fields.map((field) => mapReviewField(field, { onBehavior, step })),
   margin,
   title
 });
-var getReviewAction = ({
+var getCallToAction2 = ({
   onBehavior,
   callToAction,
   action,
@@ -5416,6 +5559,7 @@ var getReviewAction = ({
   }
   if (action == null ? void 0 : action.title) {
     return {
+      type: "action",
       title: action.title,
       onClick: () => {
         void onBehavior({ type: "action", action });
@@ -5436,6 +5580,20 @@ var getOrientationControl = ({
   }
   return void 0;
 };
+var mapReviewField = (field, { onBehavior, step }) => {
+  var _a, _b;
+  return __spreadProps(__spreadValues({}, field), {
+    image: mapSpecImage(field.image),
+    help: (_a = field.help) == null ? void 0 : _a.markdown,
+    inlineAlert: mapInlineAlert(field.inlineAlert),
+    additionalInfo: mapAdditionalInfo(field.additionalInfo, onBehavior),
+    callToAction: getCallToAction2({
+      onBehavior,
+      callToAction: field.callToAction,
+      stepActions: (_b = step.actions) != null ? _b : []
+    })
+  });
+};
 
 // src/revamp/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
@@ -5655,14 +5813,30 @@ var listLayoutToComponent = (uid, { callToAction, control, items, margin = "md",
   return createListComponent({
     uid,
     control,
-    items: items.map((item) => __spreadProps(__spreadValues({}, item), {
-      image: mapSpecImage(item.image)
-    })),
+    items: items.map((item) => mapItem2(item, mapperProps)),
     callToAction: getDomainLayerCallToAction(callToAction, onBehavior, (_a = step.actions) != null ? _a : []),
     margin,
     title
   });
 };
+var mapItem2 = (item, mapperProps) => {
+  var _b;
+  const _a = item, { value, subvalue, subtitle } = _a, rest = __objRest(_a, ["value", "subvalue", "subtitle"]);
+  return __spreadProps(__spreadValues({}, rest), {
+    description: (_b = item.description) != null ? _b : subtitle,
+    image: mapSpecImage(item.image),
+    supportingValues: mapSupportingValues(item),
+    additionalInfo: mapAdditionalInfo(item.additionalInfo, mapperProps.onBehavior),
+    inlineAlert: mapInlineAlert(item.inlineAlert)
+  });
+};
+var mapSupportingValues = (item) => {
+  const { value, subvalue, supportingValues } = item;
+  if (supportingValues) {
+    return supportingValues;
+  }
+  return value || subvalue ? { value, subvalue } : void 0;
+};
 
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps) => {
@@ -5797,6 +5971,7 @@ var mapStepToComponent = (_a) => {
   const onRefresh = async (schemaId, url) => restProps.onRefresh(schemaId, url != null ? url : refreshUrl);
   const stepPolling = polling ? getStepPolling({ pollingConfig: polling, onBehavior, onPoll }) : void 0;
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, onRefresh }) : 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, onRefresh });
   const unreferencedSchemaFormComponents = mapUnreferencedSchemas(mapperProps);
   const layoutComponents = layout.map(
@@ -5810,7 +5985,7 @@ var mapStepToComponent = (_a) => {
     control,
     description,
     error: errors == null ? void 0 : errors.error,
-    external,
+    externalConfirmation,
     loadingState,
     stepPolling,
     stepRefreshAfter,
@@ -5824,7 +5999,7 @@ var mapStepToComponent = (_a) => {
 };
 
 // src/revamp/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit"];
+var responseTypes = ["step", "action", "exit", "modal"];
 var getResponseType = async (response) => {
   assertResponseIsValid(response);
   const headerResponseType = getResponseTypeFromHeader(response);
@@ -5852,7 +6027,7 @@ var getResponseTypeFromHeader = (response) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal'."
     );
   }
 }
@@ -6007,6 +6182,10 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return await triggerAction(body.action, null, false);
         }
+        case "modal": {
+          assertModalResponseBody(body);
+          return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
+        }
         default: {
           throw new Error(`Unsupported response type: ${String(responseType)}`);
         }
@@ -6251,6 +6430,55 @@ function useStableCallback(handler) {
   return useCallback((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
+// src/revamp/domain/components/ModalContentComponent.ts
+var createModalContentComponent = (modalProps, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const modalContentComponent = __spreadProps(__spreadValues({
+    type: "modal-content",
+    open: true
+  }, modalProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.components;
+    },
+    getLocalValue() {
+      return getLocalValues(this.getChildren());
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.getChildren());
+    },
+    getSubmittableValueSync() {
+      return getSubmittableDataSync(this.getChildren());
+    },
+    getSummary() {
+      return summariseFromChildren(this.getChildren());
+    },
+    validate() {
+      return validateComponents(this.getChildren());
+    },
+    close() {
+      update(this, (draft) => {
+        draft.open = false;
+      });
+    }
+  });
+  return modalContentComponent;
+};
+
+// src/revamp/domain/mappers/layout/modalToContent.ts
+var modalToContent = (uid, { content, title }, mapperProps) => createModalContentComponent(
+  {
+    uid: `${uid}-modal-${getRandomId()}`,
+    title,
+    components: content.map(
+      (component, index) => mapLayoutToComponent(`${uid}.modal-${index}`, component, mapperProps)
+    )
+  },
+  mapperProps.updateComponent
+);
+
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
@@ -6300,6 +6528,20 @@ function useDynamicFlowCore(props) {
     var _a2;
     initialiseWithStep(newStep, etag, (_a2 = rootComponentRef.current.getLocalValue()) != null ? _a2 : null);
   }, []);
+  const getMapperProps = () => ({
+    uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+    displayStepTitle,
+    loadingState: "idle",
+    updateComponent: () => rerender(),
+    getErrorMessageFunctions,
+    trackEvent,
+    logEvent,
+    httpClient,
+    onBehavior,
+    onRefresh,
+    onPoll,
+    onValueChange
+  });
   const initialiseWithStep = useCallback2(
     (newStep, etag, localValue) => {
       rootComponentRef.current.stop();
@@ -6312,24 +6554,11 @@ function useDynamicFlowCore(props) {
         });
       }
       try {
-        rootComponentRef.current.setStep(
-          mapStepToComponent({
-            uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
-            stepLocalValue: localValue,
-            step: newStep,
-            displayStepTitle,
-            loadingState: "idle",
-            updateComponent: () => rerender(),
-            getErrorMessageFunctions,
-            trackEvent,
-            logEvent,
-            httpClient,
-            onBehavior,
-            onRefresh,
-            onPoll,
-            onValueChange
-          })
-        );
+        const newStepComponent = mapStepToComponent(__spreadValues({
+          stepLocalValue: localValue,
+          step: newStep
+        }, getMapperProps()));
+        rootComponentRef.current.setStep(newStepComponent);
       } catch (error) {
         closeWithError(error);
       }
@@ -6381,6 +6610,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = useCallback2(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
           await rootComponentRef.current.getSubmittableValue();
@@ -6400,10 +6630,20 @@ function useDynamicFlowCore(props) {
         onLink(behavior.url);
         break;
       }
-      // case 'modal':
-      //   return undefined;
-      // case 'dismiss':
-      //   return undefined;
+      case "modal":
+        if (stepRef.current) {
+          rootComponentRef.current.showModal(
+            modalToContent(rootComponentRef.current.uid, behavior, __spreadValues({
+              step: stepRef.current,
+              stepLocalValue: rootComponentRef.current.getLocalValue()
+            }, getMapperProps()))
+          );
+        }
+        rootComponentRef.current.setLoadingState("idle");
+        break;
+      case "dismiss":
+        rootComponentRef.current.dismissModal();
+        break;
       case "none":
         break;
     }
@@ -6468,6 +6708,11 @@ function useDynamicFlowCore(props) {
           void onRefresh(void 0, refreshUrl, errors);
           break;
         }
+        case "behavior": {
+          void onBehavior(command.behavior);
+          rootComponentRef.current.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);
@@ -11508,7 +11753,7 @@ var getDefinitionListLayout = (review) => {
 function DynamicReview({ component: review, onAction }) {
   var _a, _b;
   const margin = getMargin(review.margin || "xs");
-  const getReviewAction2 = (callToAction2) => {
+  const getReviewAction = (callToAction2) => {
     const { title, action, behavior } = callToAction2;
     if (behavior) {
       if ("type" in behavior) {
@@ -11556,7 +11801,7 @@ function DynamicReview({ component: review, onAction }) {
     };
   };
   const orientation = getDefinitionListLayout(review);
-  const callToAction = review.callToAction ? getReviewAction2(review.callToAction) : null;
+  const callToAction = review.callToAction ? getReviewAction(review.callToAction) : null;
   const legacyCallToAction = !callToAction && review.action ? { text: (_a = review.action.title) != null ? _a : "", onClick: getOnClick(review.action) } : null;
   return /* @__PURE__ */ jsxs19("div", { className: margin, children: [
     review.title && /* @__PURE__ */ jsx57(Header8, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),