@wise/dynamic-flow-client 4.4.0 → 4.5.0

package/build/main.js

@@ -1117,6 +1117,7 @@ function getChildren(node) {
     case "status-list":
     case "input-text":
     case "input-upload":
+    case "external-confirmation":
       return [];
   }
 }
@@ -1539,7 +1540,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) => {
@@ -1675,11 +1679,17 @@ 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 = (component, rendererMapperProps) => {
@@ -1689,7 +1699,6 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     control,
     description,
     error,
-    external,
     loadingState,
     step,
     title,
@@ -1704,7 +1713,6 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     control,
     description,
     error,
-    external,
     loadingState,
     step,
     title,
@@ -1719,12 +1727,12 @@ var stepComponentToProps = (component, rendererMapperProps) => {
 // 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
@@ -1742,6 +1750,19 @@ var modalContentComponentToProps = (component, rendererMapperProps) => {
   }, 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
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1772,6 +1793,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":
@@ -1935,6 +1958,40 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
+// 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
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -1975,7 +2032,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);
@@ -2002,7 +2059,7 @@ var createStepComponent = (stepProps) => {
       update(this, updateFn);
     },
     getChildren() {
-      return this.components;
+      return this.externalConfirmation ? [...this.components, this.externalConfirmation] : this.components;
     },
     getModals() {
       return this.modals;
@@ -2421,6 +2478,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,
@@ -2431,20 +2509,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({
@@ -5505,16 +5585,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,
@@ -5525,6 +5602,7 @@ var getReviewAction = ({
   }
   if (action == null ? void 0 : action.title) {
     return {
+      type: "action",
       title: action.title,
       onClick: () => {
         void onBehavior({ type: "action", action });
@@ -5545,6 +5623,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;
@@ -5764,14 +5856,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) => {
@@ -5906,6 +6014,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(
@@ -5919,7 +6028,7 @@ var mapStepToComponent = (_a) => {
     control,
     description,
     error: errors == null ? void 0 : errors.error,
-    external,
+    externalConfirmation,
     loadingState,
     stepPolling,
     stepRefreshAfter,
@@ -11672,7 +11781,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) {
@@ -11720,7 +11829,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__ */ (0, import_jsx_runtime57.jsxs)("div", { className: margin, children: [
     review.title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_components30.Header, { title: review.title, action: (_b = callToAction != null ? callToAction : legacyCallToAction) != null ? _b : void 0 }),

package/build/main.mjs

@@ -1074,6 +1074,7 @@ function getChildren(node) {
     case "status-list":
     case "input-text":
     case "input-upload":
+    case "external-confirmation":
       return [];
   }
 }
@@ -1496,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) => {
@@ -1632,11 +1636,17 @@ 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 = (component, rendererMapperProps) => {
@@ -1646,7 +1656,6 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     control,
     description,
     error,
-    external,
     loadingState,
     step,
     title,
@@ -1661,7 +1670,6 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     control,
     description,
     error,
-    external,
     loadingState,
     step,
     title,
@@ -1676,12 +1684,12 @@ var stepComponentToProps = (component, rendererMapperProps) => {
 // 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
@@ -1699,6 +1707,19 @@ var modalContentComponentToProps = (component, rendererMapperProps) => {
   }, 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
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1729,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":
@@ -1892,6 +1915,40 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
+// 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
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -1932,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);
@@ -1959,7 +2016,7 @@ var createStepComponent = (stepProps) => {
       update(this, updateFn);
     },
     getChildren() {
-      return this.components;
+      return this.externalConfirmation ? [...this.components, this.externalConfirmation] : this.components;
     },
     getModals() {
       return this.modals;
@@ -2378,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,
@@ -2388,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({
@@ -5462,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,
@@ -5482,6 +5559,7 @@ var getReviewAction = ({
   }
   if (action == null ? void 0 : action.title) {
     return {
+      type: "action",
       title: action.title,
       onClick: () => {
         void onBehavior({ type: "action", action });
@@ -5502,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;
@@ -5721,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) => {
@@ -5863,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(
@@ -5876,7 +5985,7 @@ var mapStepToComponent = (_a) => {
     control,
     description,
     error: errors == null ? void 0 : errors.error,
-    external,
+    externalConfirmation,
     loadingState,
     stepPolling,
     stepRefreshAfter,
@@ -11644,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) {
@@ -11692,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 }),

package/build/types/revamp/domain/components/DecisionComponent.d.ts

@@ -1,5 +1,5 @@
 import type { Icon } from '@wise/dynamic-flow-types/build/next';
-import type { Image, LayoutComponent } from '../types';
+import type { Image, InlineAlert, LayoutComponent, SupportingValues } from '../types';
 export type DecisionComponent = LayoutComponent & {
     type: 'decision';
     options: DecisionOption[];
@@ -13,6 +13,9 @@ export type DecisionOption = {
     image?: Image;
     title: string;
     tag?: string;
+    additionalText?: string;
+    supportingValues?: SupportingValues;
+    inlineAlert?: InlineAlert;
     onClick: () => void;
 };
 export declare const createDecisionComponent: (decisionProps: Pick<DecisionComponent, "uid" | "control" | "margin" | "options" | "title">) => DecisionComponent;

package/build/types/revamp/domain/components/ListComponent.d.ts

@@ -1,5 +1,5 @@
 import { Icon } from '@wise/dynamic-flow-types/build/next';
-import { CallToAction, Image, LayoutComponent } from '../types';
+import { AdditionalInfo, CallToAction, Image, InlineAlert, LayoutComponent, SupportingValues } from '../types';
 export type ListComponent = LayoutComponent & {
     type: 'list';
     items: ListItem[];
@@ -10,9 +10,10 @@ export type ListItem = {
     icon?: Icon;
     image?: Image;
     title?: string;
-    subtitle?: string;
-    value?: string;
-    subvalue?: string;
+    description?: string;
     tag?: string;
+    supportingValues?: SupportingValues;
+    additionalInfo?: AdditionalInfo;
+    inlineAlert?: InlineAlert;
 };
 export declare const createListComponent: (listProps: Pick<ListComponent, "uid" | "callToAction" | "control" | "items" | "margin" | "title">) => ListComponent;

package/build/types/revamp/domain/components/ReviewComponent.d.ts

@@ -1,9 +1,10 @@
-import type { LayoutComponent } from '../types';
+import { Icon } from '@wise/dynamic-flow-types/build/next';
+import type { AdditionalInfo, CallToAction, Image, InlineAlert, LayoutComponent } from '../types';
 export type ReviewComponent = LayoutComponent & {
     type: 'review';
     fields: ReviewField[];
     title?: string;
-    callToAction?: ReviewCallToAction;
+    callToAction?: CallToAction;
 };
 export type ReviewField = {
     help?: string;
@@ -11,11 +12,10 @@ export type ReviewField = {
     value: string;
     rawValue?: string;
     tag?: string;
-};
-export type ReviewCallToAction = {
-    accessibilityDescription?: string;
-    href?: string;
-    title: string;
-    onClick: () => void;
+    inlineAlert?: InlineAlert;
+    additionalInfo?: AdditionalInfo;
+    callToAction?: CallToAction;
+    icon?: Icon;
+    image?: Image;
 };
 export declare const createReviewComponent: (reviewProps: Pick<ReviewComponent, "uid" | "callToAction" | "control" | "fields" | "margin" | "title">) => ReviewComponent;

package/build/types/revamp/domain/components/RootDomainComponent.d.ts

@@ -1,6 +1,6 @@
 import { AnalyticsEventDispatcher } from '../features/events';
 import { BaseComponent, DomainComponent, LoadingState, LocalValue, UpdateComponent } from '../types';
-import { StepDomainComponent } from './StepDomainComponent';
+import { StepDomainComponent } from './step/StepDomainComponent';
 import { ModalContentComponent } from './ModalContentComponent';
 export type RootDomainComponent = BaseComponent & {
     type: 'root';

package/build/types/revamp/domain/components/step/ExternalConfirmationComponent.d.ts

@@ -0,0 +1,12 @@
+import { BaseComponent, LocalValue, UpdateComponent } from '../../types';
+export type ExternalConfirmationComponent = BaseComponent & {
+    type: 'external-confirmation';
+    uid: string;
+    status: 'initial' | 'success' | 'failure' | 'dismissed';
+    url: string;
+    onSuccess: () => void;
+    onFailure: () => void;
+    onCancel: () => void;
+    getLocalValue: () => LocalValue;
+};
+export declare const createExternalConfirmation: (uid: string, url: string, updateComponent: UpdateComponent) => ExternalConfirmationComponent;

package/build/types/revamp/domain/components/{StepDomainComponent.d.ts → step/StepDomainComponent.d.ts}

@@ -1,9 +1,10 @@
-import type { BaseComponent, DomainComponent, LoadingState, LocalValue, OnBehavior, UpdateComponent } from '../types';
+import type { BaseComponent, DomainComponent, LoadingState, LocalValue, OnBehavior, UpdateComponent } from '../../types';
 import type { Step } from '@wise/dynamic-flow-types/build/next';
-import type { AnalyticsEventDispatcher } from '../features/events';
-import type { StepPolling } from '../features/polling/getStepPolling';
-import { StepRefreshAfter } from '../features/refreshAfter/getStepRefreshAfter';
-import { ModalContentComponent } from './ModalContentComponent';
+import type { AnalyticsEventDispatcher } from '../../features/events';
+import type { StepPolling } from '../../features/polling/getStepPolling';
+import { StepRefreshAfter } from '../../features/refreshAfter/getStepRefreshAfter';
+import { ModalContentComponent } from '../ModalContentComponent';
+import { ExternalConfirmationComponent } from './ExternalConfirmationComponent';
 export type StepDomainComponent = BaseComponent & {
     type: 'step';
     back?: BackNavigation;
@@ -11,7 +12,7 @@ export type StepDomainComponent = BaseComponent & {
     control?: string;
     description?: string;
     error?: string;
-    external?: Step['external'];
+    externalConfirmation?: ExternalConfirmationComponent;
     loadingState: LoadingState;
     step: Step;
     title?: string;
@@ -31,7 +32,7 @@ type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "components" | "control" | "description" | "error" | "external" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "components" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
     stepPolling?: StepPolling;
     stepRefreshAfter?: StepRefreshAfter;
     updateComponent: UpdateComponent;

package/build/types/revamp/domain/mappers/mapStepToComponent.d.ts

@@ -8,4 +8,4 @@ export type StepMapperProps = Omit<MapperProps, 'trackEvent'> & {
     trackEvent: AnalyticsEventDispatcher<string>;
     onPoll: OnPoll;
 };
-export declare const mapStepToComponent: ({ uid: rootUid, loadingState, displayStepTitle, trackEvent, onPoll, onBehavior, ...restProps }: StepMapperProps) => import("../components/StepDomainComponent").StepDomainComponent;
+export declare const mapStepToComponent: ({ uid: rootUid, loadingState, displayStepTitle, trackEvent, onPoll, onBehavior, ...restProps }: StepMapperProps) => import("../components/step/StepDomainComponent").StepDomainComponent;

package/build/types/revamp/domain/mappers/utils/legacy-utils.d.ts

@@ -1,7 +1,7 @@
-import type { Context as DFContext, Align as DFAlign, Action } from '@wise/dynamic-flow-types/build/next';
+import type { Context as SpecContext, Align as SpecAlign, Action } from '@wise/dynamic-flow-types/build/next';
 import type { Align, Bias, Context } from '../../types';
-export declare const mapLegacyContext: (context: DFContext) => Context;
+export declare const mapLegacyContext: (context: SpecContext) => Context;
 export declare const mapLegacyBias: (bias: "left" | "right" | "none") => Bias;
-export declare const mapLegacyAlign: (align: DFAlign) => Align;
+export declare const mapLegacyAlign: (align: SpecAlign) => Align;
 export declare const mapLegacyActionTypeToContext: (type: Action["type"]) => Context;
 export declare const mapLegacyActionTypeToControl: (type: Action["type"]) => "primary" | "secondary" | "tertiary";

package/build/types/revamp/domain/mappers/utils/utils.d.ts

@@ -0,0 +1,4 @@
+import type { AdditionalInfo as SpecAdditionalInfo, InlineAlert as SpecInlineAlert } from '@wise/dynamic-flow-types/build/next';
+import { AdditionalInfo, InlineAlert, OnBehavior } from '../../types';
+export declare const mapInlineAlert: (alert: SpecInlineAlert | undefined) => InlineAlert | undefined;
+export declare const mapAdditionalInfo: (info: SpecAdditionalInfo | undefined, onBehavior: OnBehavior) => AdditionalInfo | undefined;

package/build/types/revamp/domain/types.d.ts

@@ -30,12 +30,13 @@ import type { RootDomainComponent } from './components/RootDomainComponent';
 import type { SearchComponent } from './components/searchComponent/SearchComponent';
 import type { SelectInputComponent } from './components/SelectInputComponent';
 import type { StatusListComponent } from './components/StatusListComponent';
-import type { StepDomainComponent } from './components/StepDomainComponent';
+import type { StepDomainComponent } from './components/step/StepDomainComponent';
 import type { TextInputComponent } from './components/TextInputComponent';
 import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
 import { ModalContentComponent } from './components/ModalContentComponent';
-export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
+import { ExternalConfirmationComponent } from './components/step/ExternalConfirmationComponent';
+export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {
@@ -143,3 +144,16 @@ export type ValidationAsyncState = {
     };
 };
 export type LoadingState = 'idle' | 'initial' | 'submitting' | 'refreshing';
+export type AdditionalInfo = {
+    text: string;
+    accessibilityDescription?: string;
+    onClick?: () => void;
+};
+export type InlineAlert = {
+    content: string;
+    context?: Context;
+};
+export type SupportingValues = {
+    value?: string;
+    subvalue?: string;
+};

package/build/types/revamp/renderers/mappers/externalComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import { ExternalConfirmationRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { ExternalConfirmationComponent } from '../../domain/components/step/ExternalConfirmationComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const externalComponentToProps: (component: ExternalConfirmationComponent, rendererMapperProps: RendererMapperProps) => ExternalConfirmationRendererProps;

package/build/types/revamp/renderers/stepComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { StepRendererProps } from '@wise/dynamic-flow-types/build/renderers';
-import type { StepDomainComponent } from '../domain/components/StepDomainComponent';
+import type { StepDomainComponent } from '../domain/components/step/StepDomainComponent';
 import { type RendererMapperProps } from './mappers/componentToRendererProps';
 export declare const stepComponentToProps: (component: StepDomainComponent, rendererMapperProps: RendererMapperProps) => StepRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -53,10 +53,10 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.96.0",
+    "@transferwise/components": "46.96.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.20.0",
-    "@transferwise/neptune-css": "14.24.2",
+    "@transferwise/icons": "3.21.0",
+    "@transferwise/neptune-css": "14.24.3",
     "@types/node": "22.15.3",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
@@ -85,8 +85,8 @@
     "tsx": "4.19.3",
     "typescript": "5.8.3",
     "webpack": "5.99.7",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -102,7 +102,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.2.0"
+    "@wise/dynamic-flow-types": "3.3.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",