@wise/dynamic-flow-client 5.13.4 → 5.14.0-experimental-a850677

package/build/main.mjs

@@ -798,6 +798,7 @@ var getChildren = (node) => {
       return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
+    case "collection":
     case "input-checkbox":
     case "input-date":
     case "decision":
@@ -1356,6 +1357,305 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   )
 });
 
+// src/domain/components/utils/debounce.ts
+var debounce = (callback, waitMs) => {
+  let timeoutId = null;
+  let lastArgs = null;
+  const clearTimer = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    lastArgs = null;
+  };
+  const debouncedFn = (...args) => {
+    lastArgs = args;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...lastArgs);
+      timeoutId = null;
+      lastArgs = null;
+    }, waitMs);
+  };
+  debouncedFn.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimer();
+    }
+  };
+  debouncedFn.flush = () => {
+    if (timeoutId !== null) {
+      callback(...lastArgs);
+      clearTimer();
+    }
+  };
+  return debouncedFn;
+};
+
+// src/domain/components/CollectionComponent.ts
+var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
+  const { uid, analyticsId, control, margin, tags, url, method, state, search, filters } = props;
+  const update = getInputUpdateFunction(onComponentUpdate);
+  let abortController = new AbortController();
+  const searchFn = (component2, query, searchFilters, cursor) => {
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    searchFunction({
+      query,
+      cursor,
+      signal,
+      filters: searchFilters
+    }).then((response) => {
+      if (!response) {
+        return;
+      }
+      if (response.type === "collection-content") {
+        if (cursor) {
+          update(component2, (draft) => {
+            if (draft.state.type === "empty") {
+              return;
+            }
+            const updated = draft.state.sections.map((section) => {
+              const m = response.sections.find((s) => s.id === section.id);
+              if (m) {
+                return __spreadProps(__spreadValues({}, section), {
+                  items: [...section.items, ...m.items]
+                });
+              }
+              return section;
+            });
+            draft.state.sections = updated;
+            draft.state.nextCursor = response.nextCursor;
+            draft.cursorStale = false;
+          });
+        } else {
+          update(component2, (draft) => {
+            draft.state = __spreadValues({}, response);
+            draft.cursorStale = false;
+          });
+        }
+      } else {
+        update(component2, (draft) => {
+          draft.state = response;
+        });
+      }
+    }).catch(() => {
+    });
+  };
+  const debouncedSearch = debounce(searchFn, 800);
+  const component = {
+    type: "collection",
+    kind: "layout",
+    uid,
+    analyticsId,
+    control,
+    cursorStale: false,
+    margin,
+    method,
+    url,
+    tags,
+    state,
+    search: __spreadProps(__spreadValues({}, search), {
+      onChange(query) {
+        component._update((draft) => {
+          draft.search.query = query;
+        });
+        debouncedSearch(component, query, component.filters);
+      }
+    }),
+    filters: filters.map((filter, i) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, filter), {
+        options: (_a = filter.options) == null ? void 0 : _a.map((value, j) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, value), {
+            selected: (_a2 = value.selected) != null ? _a2 : false,
+            onSelect() {
+              const currentValue = component.filters[i].options[j].selected;
+              component._update((draft) => {
+                if (filter.multiSelection) {
+                  draft.filters[i].options[j].selected = !currentValue;
+                } else {
+                  draft.filters[i].options = draft.filters[i].options.map((option, k) => __spreadProps(__spreadValues({}, option), {
+                    selected: k === j ? !currentValue : false
+                  }));
+                }
+              });
+              searchFn(component, component.search.query, component.filters, void 0);
+            }
+          });
+        })
+      });
+    }),
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    loadMore() {
+      if (this.cursorStale || this.state.type === "empty") {
+        return;
+      }
+      const cursor = this.state.nextCursor;
+      this._update((draft) => {
+        draft.cursorStale = true;
+      });
+      searchFn(this, this.search.query, this.filters, cursor);
+    }
+  };
+  return component;
+};
+
+// src/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, mapperProps) => {
+  const { onBehavior, registerSubmissionBehavior } = mapperProps;
+  if (info) {
+    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+    return {
+      text: info.text,
+      href: behavior.type === "link" ? behavior.url : void 0,
+      accessibilityDescription: info.accessibilityDescription,
+      onClick: behavior.type === "none" ? void 0 : () => {
+        void onBehavior(behavior);
+      }
+    };
+  }
+  return void 0;
+};
+var mapSchemaAlert = (alert) => {
+  return alert ? {
+    content: alert.markdown,
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+  } : void 0;
+};
+
+// src/domain/mappers/layout/collectionLayoutToComponent.ts
+var collectionLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  filters,
+  initialState,
+  margin,
+  method,
+  search,
+  tags,
+  url
+}, mapperProps) => {
+  const { httpClient, onComponentUpdate } = mapperProps;
+  const searchFunction = getPerformCollectionSearchFunction(
+    httpClient,
+    url,
+    method,
+    search.param,
+    mapperProps,
+    (layout, index) => mapLayoutToComponent(`${uid}-collection-response-${index}`, layout, mapperProps, [])
+  );
+  const component = createCollectionComponent(
+    {
+      uid,
+      analyticsId,
+      control,
+      margin: margin != null ? margin : "md",
+      tags,
+      url,
+      method,
+      state: {
+        type: "collection-content",
+        sections: initialState.sections.map((section) => {
+          return {
+            id: section.id,
+            title: section.title,
+            items: section.items.map((item) => {
+              return __spreadProps(__spreadValues({}, item), {
+                callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+                inlineAlert: mapInlineAlert(item.inlineAlert)
+              });
+            })
+          };
+        }),
+        nextCursor: initialState.nextCursor
+      },
+      search: {
+        query: null,
+        onChange(query) {
+        }
+      },
+      filters: filters.filter((filter) => filter.options)
+    },
+    onComponentUpdate,
+    searchFunction
+  );
+  return component;
+};
+var getPerformCollectionSearchFunction = (httpClient, url, method, searchParam, mapperProps, mapLayout) => {
+  let latestSuccessfulRequestHash = "abc";
+  let latestSuccessfulResults = null;
+  return async ({ query, cursor, signal, filters }) => {
+    const requestHash = query;
+    const headers = { "Content-Type": "application/json" };
+    const filterValues = filters.map(
+      (f) => {
+        var _a;
+        return [f.param, (_a = f.options.find((option) => option.selected)) == null ? void 0 : _a.id];
+      }
+    );
+    const response = await (method === "GET" ? httpClient(addQueryParameters(url, [[searchParam, query != null ? query : void 0], ...filterValues]), {
+      method,
+      headers,
+      signal
+    }) : httpClient(url, {
+      method,
+      headers,
+      signal,
+      body: JSON.stringify(__spreadValues(__spreadProps(__spreadValues({}, query ? { [searchParam]: query } : {}), {
+        cursor
+      }), filterValues.reduce((acc, [k, v]) => __spreadProps(__spreadValues({}, acc), { [k]: v }), {})))
+    }));
+    const results = await parseResponse(response);
+    if (results.type === "collection-content") {
+      return {
+        type: "collection-content",
+        sections: [
+          ...results.sections.map((section) => __spreadProps(__spreadValues({}, section), {
+            callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+            items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
+              callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+              inlineAlert: mapInlineAlert(item.inlineAlert)
+            }))
+          }))
+        ],
+        nextCursor: results.nextCursor
+      };
+    }
+    return {
+      type: "empty",
+      content: results.content.map(mapLayout)
+    };
+  };
+};
+var parseResponse = async (response) => {
+  if (response.ok) {
+    const body = await response.json().catch(() => null);
+    return body;
+  }
+  throw Error("error response");
+};
+var addQueryParameters = (url, params) => {
+  return params.reduce((u, [key, param]) => param ? addQueryParameter(u, key, param) : u, url);
+};
+var addQueryParameter = (url, key, value) => {
+  const [urlBase, urlQuery] = url.split("?");
+  const urlQueryParams = new URLSearchParams(urlQuery);
+  urlQueryParams.set(key, value);
+  return `${urlBase}?${urlQueryParams.toString()}`;
+};
+
 // src/domain/components/ButtonComponent.ts
 var createButtonComponent = (buttonProps) => __spreadValues({
   type: "button",
@@ -1524,35 +1824,6 @@ var createDecisionComponent = (decisionProps) => __spreadValues({
 // src/domain/mappers/utils/tags-utils.ts
 var mapTags = ({ tag, tags }) => tags != null ? tags : tag != null ? [tag] : void 0;
 
-// src/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, mapperProps) => {
-  const { onBehavior, registerSubmissionBehavior } = mapperProps;
-  if (info) {
-    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
-    return {
-      text: info.text,
-      href: behavior.type === "link" ? behavior.url : void 0,
-      accessibilityDescription: info.accessibilityDescription,
-      onClick: behavior.type === "none" ? void 0 : () => {
-        void onBehavior(behavior);
-      }
-    };
-  }
-  return void 0;
-};
-var mapSchemaAlert = (alert) => {
-  return alert ? {
-    content: alert.markdown,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
-  } : void 0;
-};
-
 // src/domain/mappers/layout/decisionLayoutToComponent.ts
 var decisionLayoutToComponent = (uid, {
   analyticsId,
@@ -2023,42 +2294,6 @@ var mapReviewField = (field, mapperProps) => {
   });
 };
 
-// src/domain/components/utils/debounce.ts
-var debounce = (callback, waitMs) => {
-  let timeoutId = null;
-  let lastArgs = null;
-  const clearTimer = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-    lastArgs = null;
-  };
-  const debouncedFn = (...args) => {
-    lastArgs = args;
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      callback(...lastArgs);
-      timeoutId = null;
-      lastArgs = null;
-    }, waitMs);
-  };
-  debouncedFn.cancel = () => {
-    if (timeoutId !== null) {
-      clearTimer();
-    }
-  };
-  debouncedFn.flush = () => {
-    if (timeoutId !== null) {
-      callback(...lastArgs);
-      clearTimer();
-    }
-  };
-  return debouncedFn;
-};
-
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
@@ -2155,7 +2390,7 @@ var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultC
     if (requestHash !== latestSuccessfulRequestHash) {
       const { method, param, url } = config;
       const headers = { "Content-Type": "application/json" };
-      const response = await (method === "GET" ? httpClient(addQueryParameter(url, param, query), {
+      const response = await (method === "GET" ? httpClient(addQueryParameter2(url, param, query), {
         method,
         headers,
         signal
@@ -2165,7 +2400,7 @@ var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultC
         signal,
         body: JSON.stringify({ [param]: query })
       }));
-      const results = await parseResponse(response);
+      const results = await parseResponse2(response);
       latestSuccessfulRequestHash = requestHash;
       if (results.type === "layout") {
         const mappedLayoutResult = {
@@ -2181,7 +2416,7 @@ var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultC
     return latestSuccessfulResults;
   };
 };
-var parseResponse = async (response) => {
+var parseResponse2 = async (response) => {
   if (response.ok) {
     const body = await response.json().catch(() => null);
     if (isValidResponseBody(body)) {
@@ -2198,7 +2433,7 @@ var parseResponse = async (response) => {
   }
   throw Error("error response");
 };
-var addQueryParameter = (url, key, value) => {
+var addQueryParameter2 = (url, key, value) => {
   const [urlBase, urlQuery] = url.split("?");
   const urlQueryParams = new URLSearchParams(urlQuery);
   urlQueryParams.set(key, value);
@@ -2406,6 +2641,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return boxLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "button":
       return buttonLayoutToComponent(uid, layout, mapperProps);
+    case "collection":
+      return collectionLayoutToComponent(uid, layout, mapperProps);
     case "columns":
       return columnsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "decision":
@@ -7421,6 +7658,34 @@ var mapBoxControl = ({
   return control;
 };
 
+// src/renderers/mappers/collectionComponentToProps.ts
+var collectionComponentToProps = (component, rendererMapperProps) => {
+  var _a;
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(
+    component,
+    "uid",
+    "analyticsId",
+    "type",
+    "control",
+    "margin",
+    "tags",
+    "url",
+    "method",
+    "search",
+    "filters"
+  )), rendererMapperProps), {
+    state: component.state.type === "empty" ? {
+      type: "empty",
+      children: component.state.content.map((child) => componentToRendererProps(child, rendererMapperProps)).map(rendererMapperProps.render)
+    } : component.state,
+    search: __spreadProps(__spreadValues({}, component.search), {
+      query: (_a = component.search.query) != null ? _a : void 0
+    }),
+    filters: component.filters,
+    loadMore: !component.cursorStale && component.state.type === "collection-content" && component.state.nextCursor ? component.loadMore.bind(component) : void 0
+  });
+};
+
 // src/renderers/mappers/buttonComponentToProps.ts
 var buttonComponentToProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({
@@ -8245,6 +8510,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return boxComponentToProps(component, rendererMapperProps);
     case "button":
       return buttonComponentToProps(component, rendererMapperProps);
+    case "collection":
+      return collectionComponentToProps(component, rendererMapperProps);
     case "columns":
       return columnsComponentToProps(component, rendererMapperProps);
     case "container":