@wise/dynamic-flow-client 5.25.3 → 5.26.0-experimental-6048bca

package/build/main.css

@@ -267,6 +267,7 @@
   right: 0;
   padding: var(--size-16) 0;
   background-color: var(--color-background-screen);
+  z-index: 20;
 }
 
 /* If we're in a drawer, we need to account for the bottom padding on the drawer content */

package/build/main.js

@@ -870,6 +870,7 @@ var getChildren = (node) => {
     case "step":
     case "modal":
     case "section":
+    case "updatable":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1377,12 +1378,6 @@ var normaliseBehavior = (behavior, stepActions) => {
         track: true
       });
     }
-    if (behavior.type === "dispatch-event") {
-      return {
-        type: "none",
-        track: false
-      };
-    }
     if (behavior.type === "link") {
       return __spreadProps(__spreadValues({}, behavior), {
         type: "link",
@@ -3100,6 +3095,157 @@ var mapTabs = (tabs, uid, mapperProps, schemaComponents) => tabs.map(({ componen
   )
 }));
 
+// src/domain/components/UpdatableComponent.ts
+var createUpdatableComponent = (props, query, onComponentUpdate, subscribe, unsubscribe) => {
+  const updateComponent = getInputUpdateFunction(onComponentUpdate);
+  let abortController = new AbortController();
+  const triggerUpdate = (data) => {
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    query({ data, signal }).then((state) => {
+      component.update(state);
+    }).catch(() => {
+    });
+  };
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "updatable",
+    kind: "layout",
+    getChildren() {
+      return component.state.components;
+    },
+    update(newState) {
+      if (!newState) {
+        return;
+      }
+      component.getChildren().forEach((c) => c.stop());
+      updateComponent(component, (draft) => {
+        draft.state = newState;
+      });
+      component.getChildren().forEach((c) => c.start());
+    },
+    start() {
+      subscribe(triggerUpdate);
+    },
+    stop() {
+      unsubscribe(triggerUpdate);
+      abortController.abort();
+    }
+  });
+  return component;
+};
+
+// src/domain/features/updatable/getPerformUpdateQuery.ts
+var import_spec = require("@wise/dynamic-flow-types/spec");
+var getPerformUpdateQuery = (httpClient, baseRequest, fallbackLayout, mapState, trackEvent) => {
+  return async (props) => {
+    const { signal } = props;
+    trackEvent("Updatable Update Triggered");
+    try {
+      const response = await performRequest2(baseRequest, props, httpClient);
+      if (response.ok) {
+        const results = await parseResponse3(response);
+        if (signal.aborted || !results.components) {
+          return null;
+        }
+        const mappedState = mapState(results);
+        trackEvent("Updatable Update Succeeded");
+        return mappedState;
+      }
+      throw Error("error response", { cause: response });
+    } catch (e) {
+      if (signal.aborted) {
+        return null;
+      }
+      trackEvent("Updatable Update Failed");
+      return fallbackLayout != null ? fallbackLayout : null;
+    }
+  };
+};
+var performRequest2 = (request, queryProps, httpClient) => {
+  const { url, method, body, headers } = request;
+  return httpClient(url, {
+    method,
+    headers: __spreadProps(__spreadValues({}, headers), { "Content-Type": "application/json" }),
+    signal: queryProps.signal,
+    body: methodSupportsBody(method) ? JSON.stringify(recursiveMerge(body != null ? body : null, queryProps.data)) : void 0
+  });
+};
+var parseResponse3 = async (response) => {
+  if (response.ok) {
+    const body = await response.json();
+    const r = (0, import_spec.validateUpdatableResponse)(body);
+    if (r.valid) {
+      return body;
+    }
+    throw Error(`invalid response body: ${r.errors}`);
+  }
+  throw Error("error response");
+};
+var methodSupportsBody = (method) => ["POST", "PUT", "PATCH"].includes(method.toUpperCase());
+
+// src/domain/mappers/layout/updatableLayoutToComponent.ts
+var updatableLayoutToComponent = (uid, {
+  analyticsId,
+  baseRequest,
+  control,
+  margin,
+  tags,
+  trigger,
+  initialState,
+  onError
+}, mapperProps, schemaComponents) => {
+  const { httpClient, onComponentUpdate } = mapperProps;
+  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-updatable-${index}`, layout, mapperProps, schemaComponents);
+  const mapState = (state) => {
+    var _a;
+    return {
+      components: ((_a = state == null ? void 0 : state.components) != null ? _a : []).map((component2, index) => mapLayout(component2, index))
+    };
+  };
+  const trackEvent = (name, data) => mapperProps.trackEvent(name, __spreadProps(__spreadValues({}, data), { analyticsId }));
+  const fallbackLayout = (onError == null ? void 0 : onError.fallbackLayout) ? mapState({ components: onError.fallbackLayout }) : null;
+  const queryFunction = getPerformUpdateQuery(
+    httpClient,
+    baseRequest,
+    fallbackLayout,
+    mapState,
+    trackEvent
+  );
+  const { subscribe, unsubscribe } = getTriggerFunction(trigger, mapperProps);
+  const component = createUpdatableComponent(
+    {
+      uid,
+      analyticsId,
+      control,
+      margin: margin != null ? margin : "md",
+      tags,
+      state: mapState(initialState)
+    },
+    queryFunction,
+    onComponentUpdate,
+    subscribe,
+    unsubscribe
+  );
+  return component;
+};
+var getTriggerFunction = (trigger, mapperProps) => {
+  const { stepEventSubscriber } = mapperProps;
+  if (trigger.type === "on-event") {
+    return {
+      subscribe: (handler) => {
+        stepEventSubscriber.addEventListener(trigger.eventName, handler);
+      },
+      unsubscribe: (handler) => {
+        stepEventSubscriber.removeEventListener(trigger.eventName, handler);
+      }
+    };
+  }
+  return { subscribe() {
+  }, unsubscribe() {
+  } };
+};
+
 // src/domain/components/UpsellComponent.ts
 var createUpsellComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -3195,6 +3341,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "upsell":
       return upsellLayoutToComponent(uid, layout, mapperProps);
+    case "updatable":
+      return updatableLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -3392,6 +3540,7 @@ var createStepComponent = (props) => {
       });
     },
     start() {
+      getAllSubcomponents(component).forEach((child) => child.start());
       if (component.state === "initial") {
         onLoad == null ? void 0 : onLoad();
       }
@@ -3401,7 +3550,9 @@ var createStepComponent = (props) => {
       stepPolling == null ? void 0 : stepPolling.start();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
       stepPrefetch.start(component.getSubmittableValueSync());
-      getAllSubcomponents(component).forEach((child) => child.start());
+    },
+    dispatchStepEvent(eventName) {
+      props.eventPublisher.dispatchEvent(eventName, component.getSubmittableValueSync());
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
@@ -3447,6 +3598,32 @@ var validateInputComponent = (component, inputComponent, isStrict, logEvent) =>
   return isSchemaReferenced || isStrict ? isValid : true;
 };
 
+// src/domain/features/domain-event-bus/DomainEventBus.ts
+var DomainEventBus = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  dispatchEvent(eventName, data) {
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.forEach((callback) => callback(data));
+    }
+  }
+  addEventListener(eventName, callback) {
+    var _a;
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, /* @__PURE__ */ new Set());
+    }
+    (_a = this.listeners.get(eventName)) == null ? void 0 : _a.add(callback);
+  }
+  removeEventListener(eventName, callback) {
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.delete(callback);
+    }
+  }
+};
+
 // src/domain/features/polling/getStepPolling.ts
 var getStepPolling = ({
   pollingConfig,
@@ -3509,7 +3686,7 @@ var getErrorMessage = (error) => {
 };
 
 // src/controller/response-utils.ts
-var import_spec = require("@wise/dynamic-flow-types/spec");
+var import_spec2 = require("@wise/dynamic-flow-types/spec");
 var parseResponseBodyAsJsonElement = async (response) => {
   assertResponseIsValid(response);
   try {
@@ -3526,7 +3703,7 @@ var parseResponseBodyAsText = async (response) => {
   }
 };
 function isActionResponseBody(body) {
-  return (0, import_spec.validateActionResponse)(body).valid;
+  return (0, import_spec2.validateActionResponse)(body).valid;
 }
 function assertActionResponseBody(body) {
   if (!isObject(body) || !isObject(body.action)) {
@@ -3546,7 +3723,7 @@ function assertModalResponseBody(body) {
   );
 }
 function assertSubflowResponseBody(body) {
-  const { valid } = (0, import_spec.validateSubflowResponse)(body);
+  const { valid } = (0, import_spec2.validateSubflowResponse)(body);
   if (valid) {
     return;
   }
@@ -7315,8 +7492,10 @@ var mapStepToComponent = (_a) => {
   const registerSubmissionBehavior = (behavior) => {
     submissionBehaviors.push(behavior);
   };
+  const stepEventBus = new DomainEventBus();
   const mapperProps = __spreadProps(__spreadValues({}, restProps), {
     features,
+    stepEventSubscriber: stepEventBus,
     trackEvent,
     onBehavior,
     registerSubmissionBehavior
@@ -7377,6 +7556,7 @@ var mapStepToComponent = (_a) => {
     step,
     referencedSchemaIds,
     features,
+    eventPublisher: stepEventBus,
     onComponentUpdate,
     trackEvent,
     logEvent,
@@ -7437,13 +7617,13 @@ var getLayoutAndFooter = (step, features) => {
 };
 
 // src/utils/analyse-step.ts
-var import_spec2 = require("@wise/dynamic-flow-types/spec");
+var import_spec3 = require("@wise/dynamic-flow-types/spec");
 var analyseStep = (step, logEvent) => {
   validateStepTypes(step, logEvent);
 };
 var validateStepTypes = (step, logEvent) => {
   var _a;
-  const validationResult = (0, import_spec2.validateStep)(step);
+  const validationResult = (0, import_spec3.validateStep)(step);
   if (!validationResult.valid) {
     logEvent("info", "The provided step does not conform to the specification.", {
       stepId: (_a = step.id) != null ? _a : step.key,
@@ -7979,7 +8159,7 @@ var createFlowController = (props) => {
     onCancellation == null ? void 0 : onCancellation();
   };
   const onBehavior = async (behavior) => {
-    var _a;
+    var _a, _b;
     trackBehaviorTriggered(trackEvent, behavior);
     switch (behavior.type) {
       case "delay": {
@@ -8081,6 +8261,10 @@ var createFlowController = (props) => {
                 step: currentStep,
                 stepLocalValue: rootComponent.getLocalValue()
               }, getMapperProps()), {
+                stepEventSubscriber: { addEventListener: () => {
+                }, removeEventListener: () => {
+                } },
+                // IMPORTANT! this means that components in modal responses won't be able to listen to step events
                 registerSubmissionBehavior: () => {
                 }
                 // this means actions in modal responses won't have prefetching
@@ -8115,6 +8299,10 @@ var createFlowController = (props) => {
         }
         break;
       }
+      case "dispatch-event": {
+        (_b = rootComponent.getStep()) == null ? void 0 : _b.dispatchStepEvent(behavior.eventName);
+        break;
+      }
       case "none":
         break;
     }
@@ -9398,6 +9586,17 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/renderers/mappers/updatableComponentToProps.ts
+var updatableComponentToProps = (component, rendererMapperProps) => {
+  const childrenProps = component.state.components.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps
+  });
+};
+
 // src/renderers/mappers/upsellComponentToProps.ts
 var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "media", "tags", "text")), {
   callToAction: mapCallToAction(component.callToAction),
@@ -9514,6 +9713,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return uploadInputComponentToProps(component, rendererMapperProps);
     case "upsell":
       return upsellComponentToProps(component, rendererMapperProps);
+    case "updatable":
+      return updatableComponentToProps(component, rendererMapperProps);
     case "persist-async":
       return persistAsyncComponentToProps(component, rendererMapperProps);
     case "root":
@@ -9916,7 +10117,11 @@ var eventNames = [
   "Collection Filter Failed",
   "Collection Pagination Triggered",
   "Collection Pagination Succeeded",
-  "Collection Pagination Failed"
+  "Collection Pagination Failed",
+  "Updatable Update Triggered",
+  // agree on these names
+  "Updatable Update Succeeded",
+  "Updatable Update Failed"
 ];
 
 // src/renderers/subflow/getDynamicSubflowRenderer.tsx

package/build/main.mjs

@@ -839,6 +839,7 @@ var getChildren = (node) => {
     case "step":
     case "modal":
     case "section":
+    case "updatable":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1346,12 +1347,6 @@ var normaliseBehavior = (behavior, stepActions) => {
         track: true
       });
     }
-    if (behavior.type === "dispatch-event") {
-      return {
-        type: "none",
-        track: false
-      };
-    }
     if (behavior.type === "link") {
       return __spreadProps(__spreadValues({}, behavior), {
         type: "link",
@@ -3069,6 +3064,159 @@ var mapTabs = (tabs, uid, mapperProps, schemaComponents) => tabs.map(({ componen
   )
 }));
 
+// src/domain/components/UpdatableComponent.ts
+var createUpdatableComponent = (props, query, onComponentUpdate, subscribe, unsubscribe) => {
+  const updateComponent = getInputUpdateFunction(onComponentUpdate);
+  let abortController = new AbortController();
+  const triggerUpdate = (data) => {
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    query({ data, signal }).then((state) => {
+      component.update(state);
+    }).catch(() => {
+    });
+  };
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "updatable",
+    kind: "layout",
+    getChildren() {
+      return component.state.components;
+    },
+    update(newState) {
+      if (!newState) {
+        return;
+      }
+      component.getChildren().forEach((c) => c.stop());
+      updateComponent(component, (draft) => {
+        draft.state = newState;
+      });
+      component.getChildren().forEach((c) => c.start());
+    },
+    start() {
+      subscribe(triggerUpdate);
+    },
+    stop() {
+      unsubscribe(triggerUpdate);
+      abortController.abort();
+    }
+  });
+  return component;
+};
+
+// src/domain/features/updatable/getPerformUpdateQuery.ts
+import {
+  validateUpdatableResponse
+} from "@wise/dynamic-flow-types/spec";
+var getPerformUpdateQuery = (httpClient, baseRequest, fallbackLayout, mapState, trackEvent) => {
+  return async (props) => {
+    const { signal } = props;
+    trackEvent("Updatable Update Triggered");
+    try {
+      const response = await performRequest2(baseRequest, props, httpClient);
+      if (response.ok) {
+        const results = await parseResponse3(response);
+        if (signal.aborted || !results.components) {
+          return null;
+        }
+        const mappedState = mapState(results);
+        trackEvent("Updatable Update Succeeded");
+        return mappedState;
+      }
+      throw Error("error response", { cause: response });
+    } catch (e) {
+      if (signal.aborted) {
+        return null;
+      }
+      trackEvent("Updatable Update Failed");
+      return fallbackLayout != null ? fallbackLayout : null;
+    }
+  };
+};
+var performRequest2 = (request, queryProps, httpClient) => {
+  const { url, method, body, headers } = request;
+  return httpClient(url, {
+    method,
+    headers: __spreadProps(__spreadValues({}, headers), { "Content-Type": "application/json" }),
+    signal: queryProps.signal,
+    body: methodSupportsBody(method) ? JSON.stringify(recursiveMerge(body != null ? body : null, queryProps.data)) : void 0
+  });
+};
+var parseResponse3 = async (response) => {
+  if (response.ok) {
+    const body = await response.json();
+    const r = validateUpdatableResponse(body);
+    if (r.valid) {
+      return body;
+    }
+    throw Error(`invalid response body: ${r.errors}`);
+  }
+  throw Error("error response");
+};
+var methodSupportsBody = (method) => ["POST", "PUT", "PATCH"].includes(method.toUpperCase());
+
+// src/domain/mappers/layout/updatableLayoutToComponent.ts
+var updatableLayoutToComponent = (uid, {
+  analyticsId,
+  baseRequest,
+  control,
+  margin,
+  tags,
+  trigger,
+  initialState,
+  onError
+}, mapperProps, schemaComponents) => {
+  const { httpClient, onComponentUpdate } = mapperProps;
+  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-updatable-${index}`, layout, mapperProps, schemaComponents);
+  const mapState = (state) => {
+    var _a;
+    return {
+      components: ((_a = state == null ? void 0 : state.components) != null ? _a : []).map((component2, index) => mapLayout(component2, index))
+    };
+  };
+  const trackEvent = (name, data) => mapperProps.trackEvent(name, __spreadProps(__spreadValues({}, data), { analyticsId }));
+  const fallbackLayout = (onError == null ? void 0 : onError.fallbackLayout) ? mapState({ components: onError.fallbackLayout }) : null;
+  const queryFunction = getPerformUpdateQuery(
+    httpClient,
+    baseRequest,
+    fallbackLayout,
+    mapState,
+    trackEvent
+  );
+  const { subscribe, unsubscribe } = getTriggerFunction(trigger, mapperProps);
+  const component = createUpdatableComponent(
+    {
+      uid,
+      analyticsId,
+      control,
+      margin: margin != null ? margin : "md",
+      tags,
+      state: mapState(initialState)
+    },
+    queryFunction,
+    onComponentUpdate,
+    subscribe,
+    unsubscribe
+  );
+  return component;
+};
+var getTriggerFunction = (trigger, mapperProps) => {
+  const { stepEventSubscriber } = mapperProps;
+  if (trigger.type === "on-event") {
+    return {
+      subscribe: (handler) => {
+        stepEventSubscriber.addEventListener(trigger.eventName, handler);
+      },
+      unsubscribe: (handler) => {
+        stepEventSubscriber.removeEventListener(trigger.eventName, handler);
+      }
+    };
+  }
+  return { subscribe() {
+  }, unsubscribe() {
+  } };
+};
+
 // src/domain/components/UpsellComponent.ts
 var createUpsellComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -3164,6 +3312,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "upsell":
       return upsellLayoutToComponent(uid, layout, mapperProps);
+    case "updatable":
+      return updatableLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -3361,6 +3511,7 @@ var createStepComponent = (props) => {
       });
     },
     start() {
+      getAllSubcomponents(component).forEach((child) => child.start());
       if (component.state === "initial") {
         onLoad == null ? void 0 : onLoad();
       }
@@ -3370,7 +3521,9 @@ var createStepComponent = (props) => {
       stepPolling == null ? void 0 : stepPolling.start();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
       stepPrefetch.start(component.getSubmittableValueSync());
-      getAllSubcomponents(component).forEach((child) => child.start());
+    },
+    dispatchStepEvent(eventName) {
+      props.eventPublisher.dispatchEvent(eventName, component.getSubmittableValueSync());
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
@@ -3416,6 +3569,32 @@ var validateInputComponent = (component, inputComponent, isStrict, logEvent) =>
   return isSchemaReferenced || isStrict ? isValid : true;
 };
 
+// src/domain/features/domain-event-bus/DomainEventBus.ts
+var DomainEventBus = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  dispatchEvent(eventName, data) {
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.forEach((callback) => callback(data));
+    }
+  }
+  addEventListener(eventName, callback) {
+    var _a;
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, /* @__PURE__ */ new Set());
+    }
+    (_a = this.listeners.get(eventName)) == null ? void 0 : _a.add(callback);
+  }
+  removeEventListener(eventName, callback) {
+    const eventListeners = this.listeners.get(eventName);
+    if (eventListeners) {
+      eventListeners.delete(callback);
+    }
+  }
+};
+
 // src/domain/features/polling/getStepPolling.ts
 var getStepPolling = ({
   pollingConfig,
@@ -7284,8 +7463,10 @@ var mapStepToComponent = (_a) => {
   const registerSubmissionBehavior = (behavior) => {
     submissionBehaviors.push(behavior);
   };
+  const stepEventBus = new DomainEventBus();
   const mapperProps = __spreadProps(__spreadValues({}, restProps), {
     features,
+    stepEventSubscriber: stepEventBus,
     trackEvent,
     onBehavior,
     registerSubmissionBehavior
@@ -7346,6 +7527,7 @@ var mapStepToComponent = (_a) => {
     step,
     referencedSchemaIds,
     features,
+    eventPublisher: stepEventBus,
     onComponentUpdate,
     trackEvent,
     logEvent,
@@ -7948,7 +8130,7 @@ var createFlowController = (props) => {
     onCancellation == null ? void 0 : onCancellation();
   };
   const onBehavior = async (behavior) => {
-    var _a;
+    var _a, _b;
     trackBehaviorTriggered(trackEvent, behavior);
     switch (behavior.type) {
       case "delay": {
@@ -8050,6 +8232,10 @@ var createFlowController = (props) => {
                 step: currentStep,
                 stepLocalValue: rootComponent.getLocalValue()
               }, getMapperProps()), {
+                stepEventSubscriber: { addEventListener: () => {
+                }, removeEventListener: () => {
+                } },
+                // IMPORTANT! this means that components in modal responses won't be able to listen to step events
                 registerSubmissionBehavior: () => {
                 }
                 // this means actions in modal responses won't have prefetching
@@ -8084,6 +8270,10 @@ var createFlowController = (props) => {
         }
         break;
       }
+      case "dispatch-event": {
+        (_b = rootComponent.getStep()) == null ? void 0 : _b.dispatchStepEvent(behavior.eventName);
+        break;
+      }
       case "none":
         break;
     }
@@ -9367,6 +9557,17 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/renderers/mappers/updatableComponentToProps.ts
+var updatableComponentToProps = (component, rendererMapperProps) => {
+  const childrenProps = component.state.components.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps
+  });
+};
+
 // src/renderers/mappers/upsellComponentToProps.ts
 var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "media", "tags", "text")), {
   callToAction: mapCallToAction(component.callToAction),
@@ -9483,6 +9684,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return uploadInputComponentToProps(component, rendererMapperProps);
     case "upsell":
       return upsellComponentToProps(component, rendererMapperProps);
+    case "updatable":
+      return updatableComponentToProps(component, rendererMapperProps);
     case "persist-async":
       return persistAsyncComponentToProps(component, rendererMapperProps);
     case "root":
@@ -9885,7 +10088,11 @@ var eventNames = [
   "Collection Filter Failed",
   "Collection Pagination Triggered",
   "Collection Pagination Succeeded",
-  "Collection Pagination Failed"
+  "Collection Pagination Failed",
+  "Updatable Update Triggered",
+  // agree on these names
+  "Updatable Update Succeeded",
+  "Updatable Update Failed"
 ];
 
 // src/renderers/subflow/getDynamicSubflowRenderer.tsx