@wise/dynamic-flow-client 5.6.2 → 5.8.0

package/build/main.css

@@ -153,6 +153,21 @@
     width: 300px;
   }
 }
+.df-media-layout-avatar {
+  display: flex;
+}
+.df-media-layout-avatar.start {
+  justify-content: start;
+  align-items: start;
+}
+.df-media-layout-avatar.center {
+  justify-content: center;
+  align-items: center;
+}
+.df-media-layout-avatar.end {
+  justify-content: end;
+  align-items: end;
+}
 .df-toolbar {
   display: flex;
   gap: 0.25em;
@@ -193,3 +208,12 @@
 .chips-container {
   overflow-x: auto;
 }
+.df-button.small {
+  display: block !important;
+  /* left-aligned by default */
+}
+.df-button.small.align-center {
+  display: block !important;
+  margin-left: auto;
+  margin-right: auto;
+}

package/build/main.js

@@ -841,6 +841,7 @@ var getChildren = (node) => {
     case "list":
     case "loading-indicator":
     case "markdown":
+    case "media":
     case "input-multi-select":
     case "input-upload-multi":
     case "input-number":
@@ -854,6 +855,7 @@ var getChildren = (node) => {
     case "input-upload":
     case "external-confirmation":
     case "subflow":
+    case "upsell":
       return [];
   }
 };
@@ -1134,6 +1136,55 @@ var createSubflowDomainComponent = (subflowProps, onComponentUpdate) => {
   return subflowComponent;
 };
 
+// src/domain/features/prefetch/request-cache.ts
+var makeRequestCacheWithParent = (parent) => {
+  const map = /* @__PURE__ */ new Map();
+  const cache = {
+    get: (requestParams) => {
+      var _a;
+      const key = makeRequestCacheKey(requestParams);
+      const promise = (_a = map.get(key)) != null ? _a : parent == null ? void 0 : parent.get(requestParams);
+      map.delete(key);
+      return promise;
+    },
+    set: (requestParams, responsePromise) => {
+      return map.set(makeRequestCacheKey(requestParams), responsePromise);
+    }
+  };
+  return cache;
+};
+var makeRequestCache = (initialValues = []) => {
+  const cache = makeRequestCacheWithParent(void 0);
+  initialValues.forEach(([requestParams, responsePromise]) => {
+    cache.set(requestParams, responsePromise);
+  });
+  return cache;
+};
+var normaliseRequestCache = (cache) => {
+  if (cache === void 0) {
+    return makeRequestCache();
+  }
+  if (isRequestCacheInstance(cache)) {
+    return cache;
+  }
+  return makeRequestCache(cache);
+};
+var isRequestCacheInstance = (cache) => {
+  return !cache || !Array.isArray(cache);
+};
+var makeRequestCacheKey = (requestParams) => {
+  var _a, _b;
+  const [input, init] = requestParams;
+  const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
+  const key = JSON.stringify({
+    url,
+    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
+    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
+    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
+  });
+  return key;
+};
+
 // src/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -1208,51 +1259,6 @@ var getActionByReference = ($ref, actions = []) => {
   return action;
 };
 
-// src/domain/mappers/utils/call-to-action-utils.ts
-var getDomainLayerCallToAction = (callToAction, mapperProps) => {
-  var _a;
-  if (!callToAction) {
-    return void 0;
-  }
-  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
-  const stepActions = (_a = step.actions) != null ? _a : [];
-  const { title = "", accessibilityDescription, action, behavior } = callToAction;
-  return getCallToAction(
-    { title, accessibilityDescription },
-    getDomainLayerBehavior({ action, behavior }, stepActions, registerSubmissionBehavior),
-    onBehavior
-  );
-};
-var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior) => {
-  const onClick = () => {
-    void onBehavior(behavior);
-  };
-  switch (behavior.type) {
-    case "action":
-    case "modal":
-    case "copy":
-    case "dismiss": {
-      return {
-        type: behavior.type,
-        title: title != null ? title : "",
-        accessibilityDescription,
-        onClick
-      };
-    }
-    case "link": {
-      return {
-        type: "link",
-        title: title != null ? title : "",
-        href: behavior.url,
-        accessibilityDescription,
-        onClick
-      };
-    }
-    default:
-      return void 0;
-  }
-};
-
 // src/domain/mappers/utils/legacy-utils.ts
 var mapLegacyContext = (context) => {
   switch (context) {
@@ -1304,6 +1310,27 @@ var legacyActionTypeToControl = {
 };
 var mapLegacyActionTypeToControl = (type) => type && type in legacyActionTypeToControl ? legacyActionTypeToControl[type] : "secondary";
 
+// src/domain/mappers/utils/call-to-action-utils.ts
+function getDomainLayerCallToAction(cta, mapperProps) {
+  var _a, _b;
+  if (!cta) {
+    return void 0;
+  }
+  const { step, onBehavior, registerSubmissionBehavior } = mapperProps;
+  const stepActions = (_a = step.actions) != null ? _a : [];
+  const behavior = getDomainLayerBehavior(cta, stepActions, registerSubmissionBehavior);
+  return {
+    type: behavior.type,
+    title: (_b = cta.title) != null ? _b : "",
+    context: cta.context ? mapLegacyContext(cta.context) : void 0,
+    accessibilityDescription: cta.accessibilityDescription,
+    href: behavior.type === "link" ? behavior.url : void 0,
+    onClick: () => {
+      void onBehavior(behavior);
+    }
+  };
+}
+
 // src/domain/mappers/layout/alertLayoutToComponent.ts
 var alertLayoutToComponent = (uid, {
   control,
@@ -1390,6 +1417,9 @@ var getDomainLayerMedia = ({ icon, image, media }) => {
 
 // src/domain/mappers/layout/buttonLayoutToComponent.ts
 var buttonLayoutToComponent = (uid, button, mapperProps) => {
+  if (!button.behavior && !button.action && mapperProps.features.isEnabled("strictButtonOperations")) {
+    throw new Error("ButtonLayout must have either a behavior or an action");
+  }
   if (!button.behavior && button.action) {
     return buttonLayoutToComponentWithAction(
       uid,
@@ -1852,6 +1882,24 @@ var markdownLayoutToComponent = (uid, {
   size: size != null ? size : "md"
 });
 
+// src/domain/components/MediaComponent.ts
+var createMediaComponent = (props) => __spreadValues({
+  type: "media",
+  kind: "layout"
+}, props);
+
+// src/domain/mappers/layout/mediaLayoutToComponent.ts
+var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media, size, tags }) => createMediaComponent({
+  uid,
+  analyticsId,
+  align: mapLegacyAlign(align != null ? align : "center"),
+  control,
+  margin: margin != null ? margin : "md",
+  media,
+  size: size != null ? size : "md",
+  tags
+});
+
 // src/domain/components/ModalLayoutComponent.ts
 var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
   type: "modal-layout",
@@ -1951,14 +1999,14 @@ var reviewLayoutToComponent = (uid, {
 }, mapperProps) => createReviewComponent({
   uid,
   analyticsId,
-  callToAction: getCallToAction2({ mapperProps, callToAction, action }),
+  callToAction: getCallToAction({ mapperProps, callToAction, action }),
   control: getOrientationControl({ control, orientation }),
   fields: fields.map((field) => mapReviewField(field, mapperProps)),
   margin: margin != null ? margin : "md",
   tags,
   title
 });
-var getCallToAction2 = ({
+var getCallToAction = ({
   callToAction,
   action,
   mapperProps
@@ -1996,7 +2044,7 @@ var mapReviewField = (field, mapperProps) => {
     help: (_a = field.help) == null ? void 0 : _a.markdown,
     inlineAlert: mapInlineAlert(field.inlineAlert),
     additionalInfo: mapAdditionalInfo(field.additionalInfo, mapperProps),
-    callToAction: getCallToAction2({
+    callToAction: getCallToAction({
       callToAction: field.callToAction,
       mapperProps
     }),
@@ -2043,7 +2091,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2079,6 +2127,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    hint,
     margin,
     tags,
     title,
@@ -2165,7 +2214,7 @@ var isValidResponseBody = (body) => isObject(body) && "results" in body && isArr
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
   const search = getPerformSearchFunction(httpClient, { method, param, url });
   return createSearchComponent(
@@ -2174,6 +2223,7 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, method
       analyticsId,
       control,
       emptyMessage: emptyMessage != null ? emptyMessage : "",
+      hint,
       margin: margin != null ? margin : "md",
       tags,
       title
@@ -2253,6 +2303,60 @@ var mapTabs = (tabs, uid, mapperProps, schemaComponents) => tabs.map(({ componen
   )
 }));
 
+// src/domain/components/UpsellComponent.ts
+var createUpsellComponent = (upsellProps, onComponentUpdate) => {
+  const update = getInputUpdateFunction(onComponentUpdate);
+  const _a = upsellProps, { onDismiss: propsOnDismiss } = _a, restProps = __objRest(_a, ["onDismiss"]);
+  const component = __spreadProps(__spreadValues({
+    type: "upsell",
+    kind: "layout"
+  }, restProps), {
+    visible: true,
+    onDismiss: propsOnDismiss ? () => {
+      update(component, (draft) => {
+        draft.visible = false;
+      });
+      propsOnDismiss();
+    } : void 0
+  });
+  return component;
+};
+
+// src/domain/mappers/layout/upsellLayoutToComponent.ts
+var upsellLayoutToComponent = (uid, {
+  analyticsId,
+  callToAction,
+  context,
+  control,
+  margin,
+  media,
+  onDismiss,
+  tags,
+  text
+}, mapperProps) => {
+  const { onComponentUpdate } = mapperProps;
+  return createUpsellComponent(
+    {
+      uid,
+      analyticsId,
+      callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
+      context: context ? mapLegacyContext(context) : "neutral",
+      control,
+      margin: margin != null ? margin : "md",
+      media: getDomainLayerMedia({ media }),
+      tags,
+      text,
+      onDismiss: onDismiss ? () => {
+        const { url, method } = onDismiss;
+        const body = method === "GET" ? void 0 : JSON.stringify(onDismiss.body);
+        void mapperProps.httpClient(url, { method, body }).catch(() => {
+        });
+      } : void 0
+    },
+    onComponentUpdate
+  );
+};
+
 // src/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2284,6 +2388,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return loadingIndicatorLayoutToComponent(uid, layout);
     case "markdown":
       return markdownLayoutToComponent(uid, layout);
+    case "media":
+      return mediaLayoutToComponent(uid, layout);
     case "modal":
       return modalLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "paragraph":
@@ -2300,6 +2406,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return statusListLayoutToComponent(uid, layout, mapperProps);
     case "tabs":
       return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
+    case "upsell":
+      return upsellLayoutToComponent(uid, layout, mapperProps);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -4011,6 +4119,9 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       tags,
       disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
       analyticsId: (_a = childSchema.analyticsId) != null ? _a : childSchema.$id,
+      additionalText: childSchema.additionalText,
+      inlineAlert: mapInlineAlert(childSchema.inlineAlert),
+      supportingValues: childSchema.supportingValues,
       component: mapSchemaToComponent(
         {
           uid: `${uid}.oneOf-${index}`,
@@ -6031,55 +6142,6 @@ var createRequestFromAction = (action, model) => {
   });
 };
 
-// src/domain/features/prefetch/request-cache.ts
-var makeRequestCacheWithParent = (parent) => {
-  const map = /* @__PURE__ */ new Map();
-  const cache = {
-    get: (requestParams) => {
-      var _a;
-      const key = makeRequestCacheKey(requestParams);
-      const promise = (_a = map.get(key)) != null ? _a : parent == null ? void 0 : parent.get(requestParams);
-      map.delete(key);
-      return promise;
-    },
-    set: (requestParams, responsePromise) => {
-      return map.set(makeRequestCacheKey(requestParams), responsePromise);
-    }
-  };
-  return cache;
-};
-var makeRequestCache = (initialValues = []) => {
-  const cache = makeRequestCacheWithParent(void 0);
-  initialValues.forEach(([requestParams, responsePromise]) => {
-    cache.set(requestParams, responsePromise);
-  });
-  return cache;
-};
-var normaliseRequestCache = (cache) => {
-  if (cache === void 0) {
-    return makeRequestCache();
-  }
-  if (isRequestCacheInstance(cache)) {
-    return cache;
-  }
-  return makeRequestCache(cache);
-};
-var isRequestCacheInstance = (cache) => {
-  return !cache || !Array.isArray(cache);
-};
-var makeRequestCacheKey = (requestParams) => {
-  var _a, _b;
-  const [input, init] = requestParams;
-  const url = typeof input === "string" || input instanceof URL ? input.toString() : input.url;
-  const key = JSON.stringify({
-    url,
-    method: (_a = init == null ? void 0 : init.method) != null ? _a : "GET",
-    headers: (init == null ? void 0 : init.headers) ? Array.from(new Headers(init.headers).entries()) : [],
-    body: (_b = init == null ? void 0 : init.body) != null ? _b : null
-  });
-  return key;
-};
-
 // src/domain/features/prefetch/getStepPrefetch.ts
 var getStepPrefetch = (httpClient, flowRequestCache, submissionBehaviors) => {
   const requestCache = makeRequestCacheWithParent(flowRequestCache);
@@ -6172,7 +6234,12 @@ var mapStepToComponent = (_a) => {
   const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, logEvent, onBehavior }) : void 0;
   const stepPrefetch = getStepPrefetch(restProps.httpClient, flowRequestCache, submissionBehaviors);
   const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, onComponentUpdate) : void 0;
-  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior, registerSubmissionBehavior });
+  const mapperProps = __spreadProps(__spreadValues({}, restProps), {
+    features,
+    trackEvent,
+    onBehavior,
+    registerSubmissionBehavior
+  });
   const referencedSchemaIds = getReferencedSchemaId(step);
   const schemaComponents = mapStepSchemas(
     uid,
@@ -6850,7 +6917,11 @@ var createFlowController = (props) => {
       initState = "created";
       trackEvent("Initiated");
       rootComponent.setLoadingState("submitting");
-      void onAction(__spreadValues({ method: "GET" }, initialAction), null);
+      void onAction(__spreadValues({ method: "GET" }, initialAction), null).then(() => {
+        initState = "started";
+        rootComponent.start();
+      });
+      return;
     }
     if (initState === "created") {
       initState = "started";
@@ -7497,6 +7568,9 @@ var markdownComponentToProps = (control, rendererMapperProps) => __spreadValues(
   "size"
 )), rendererMapperProps);
 
+// src/renderers/mappers/mediaComponentToProps.ts
+var mediaComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "align", "control", "margin", "media", "size", "tags")), rendererMapperProps);
+
 // src/renderers/mappers/modalComponentToProps.ts
 var modalComponentToProps = (component, rendererMapperProps) => {
   const { uid, analyticsId, open, tags, title, close } = component;
@@ -7842,7 +7916,19 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const { uid, control, emptyMessage, error, isLoading, margin, query, results, title, tags } = component;
+  const {
+    uid,
+    control,
+    emptyMessage,
+    error,
+    hint,
+    isLoading,
+    margin,
+    query,
+    results,
+    title,
+    tags
+  } = component;
   const onChange = component.onChange.bind(component);
   const onSelect = component.onSelect.bind(component);
   const state = getSearchState({
@@ -7859,6 +7945,7 @@ var searchComponentToProps = (component, rendererMapperProps) => {
     type: "search",
     id: uid,
     control,
+    hint,
     isLoading,
     margin,
     query,
@@ -8003,6 +8090,23 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/renderers/mappers/upsellComponentToProps.ts
+var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(
+  component,
+  "uid",
+  "analyticsId",
+  "type",
+  "callToAction",
+  "context",
+  "control",
+  "margin",
+  "media",
+  "tags",
+  "text"
+)), {
+  onDismiss: component.onDismiss ? component.onDismiss.bind(component) : void 0
+}), rendererMapperProps);
+
 // src/renderers/mappers/subflowComponentToRendererProps.ts
 var subflowComponentToRendererProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({
@@ -8084,6 +8188,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return loadingIndicatorComponentToProps(component, rendererMapperProps);
     case "markdown":
       return markdownComponentToProps(component, rendererMapperProps);
+    case "media":
+      return mediaComponentToProps(component, rendererMapperProps);
     case "modal-layout":
       return modalLayoutComponentToProps(component, rendererMapperProps);
     case "modal":
@@ -8124,6 +8230,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return tupleComponentToProps(component, rendererMapperProps);
     case "upload":
       return uploadInputComponentToProps(component, rendererMapperProps);
+    case "upsell":
+      return upsellComponentToProps(component, rendererMapperProps);
     case "persist-async":
       return persistAsyncComponentToProps(component, rendererMapperProps);
     case "step":