@wise/dynamic-flow-client 5.19.0 → 5.20.0-experimental-2dcb025

package/build/main.js

@@ -883,6 +883,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":
@@ -1500,6 +1501,339 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   )
 });
 
+// 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, trackEvent, registerSubmissionBehavior } = mapperProps;
+  if (info) {
+    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+    const isLink = behavior.type === "link";
+    return {
+      text: info.text,
+      href: isLink ? behavior.url : void 0,
+      hrefWithTracking: getHrefWithTracking({
+        behavior,
+        onBehavior,
+        trackEvent
+      }),
+      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/components/utils/debounce.ts
+var debounce = (callback, waitMs) => {
+  let timeoutId = null;
+  let lastArgs = null;
+  const clearTimer = () => {
+    if (timeoutId !== null) {
+      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/applyCollectionResponse.ts
+var applyCollectionResponse = (currentState, response, isPaginated) => {
+  var _a, _b, _c, _d;
+  const sections = isPaginated ? mergeSections(currentState.sections, response.sections) : response.sections;
+  return {
+    sections,
+    nextCursor: response.nextCursor,
+    filters: (_a = response.filters) != null ? _a : currentState.filters,
+    search: (_b = response.search) != null ? _b : currentState.search,
+    beforeSections: (_c = response.beforeSections) != null ? _c : currentState.beforeSections,
+    afterSections: (_d = response.afterSections) != null ? _d : currentState.afterSections
+  };
+};
+var mergeSections = (existing, incoming) => {
+  const knownIds = new Set(existing.map((section) => section.id));
+  const newSections = incoming.filter((section) => !knownIds.has(section.id));
+  const merged = existing.map((section) => {
+    const match = incoming.find((s) => s.id === section.id);
+    if (!match) return section;
+    return __spreadProps(__spreadValues({}, section), { items: [...section.items, ...match.items] });
+  });
+  return [...merged, ...newSections];
+};
+
+// src/domain/components/collectionComponent/CollectionComponent.ts
+var DEBOUNCE_TIME = 800;
+var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
+  const { uid, analyticsId, control, margin, tags, url, method, state } = props;
+  const update = getInputUpdateFunction(onComponentUpdate);
+  let abortController = new AbortController();
+  const query = (component2, cursor) => {
+    var _a, _b;
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    searchFunction({
+      searchParam: (_a = component2.state.search) == null ? void 0 : _a.param,
+      query: (_b = component2.state.search) == null ? void 0 : _b.query,
+      cursor,
+      signal,
+      filters: component2.state.filters
+    }).then((response) => {
+      if (!response) {
+        return;
+      }
+      update(component2, (draft) => {
+        const newState = applyCollectionResponse(draft.state, response, !!cursor);
+        draft.state = __spreadProps(__spreadValues({}, newState), {
+          filters: mapFilters(newState.filters),
+          search: mapSearch(newState.search)
+        });
+        draft.status = {
+          type: "idle",
+          loadMore: newState.nextCursor ? () => query(component2, newState.nextCursor) : void 0
+        };
+      });
+    }).catch(() => {
+      if (!signal.aborted) {
+        update(component2, (draft) => {
+          draft.status = {
+            type: "error",
+            reason: cursor ? "pagination" : "search",
+            retry: () => query(component2, cursor)
+          };
+        });
+      }
+    });
+  };
+  const debouncedQuery = debounce(
+    (component2) => query(component2),
+    DEBOUNCE_TIME
+  );
+  const selectFilter = (filterIndex, optionIndex) => {
+    var _a;
+    const filter = (_a = component.state.filters) == null ? void 0 : _a[filterIndex];
+    if (!filter) {
+      return;
+    }
+    const currentValue = filter.options[optionIndex].selected;
+    update(component, (draft) => {
+      if (!draft.state.filters) {
+        return;
+      }
+      if (filter.multiSelect) {
+        draft.state.filters[filterIndex].options[optionIndex].selected = !currentValue;
+      } else {
+        draft.state.filters[filterIndex].options = draft.state.filters[filterIndex].options.map(
+          (option, index) => __spreadProps(__spreadValues({}, option), {
+            selected: index === optionIndex ? !currentValue : false
+          })
+        );
+      }
+      draft.status = { type: "loading", reason: "search" };
+    });
+    query(component);
+  };
+  const mapFilters = (filters) => filters == null ? void 0 : filters.map((filter, i) => {
+    var _a;
+    return __spreadProps(__spreadValues({}, filter), {
+      options: (_a = filter.options) == null ? void 0 : _a.map((option, j) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, option), {
+          selected: (_a2 = option.selected) != null ? _a2 : false,
+          onSelect: () => selectFilter(i, j)
+        });
+      })
+    });
+  });
+  const mapSearch = (search) => search ? __spreadProps(__spreadValues({}, search), {
+    onChange(value) {
+      update(component, (draft) => {
+        if (draft.state.search) {
+          draft.state.search.query = value;
+          draft.status = { type: "loading", reason: "search" };
+        }
+      });
+      debouncedQuery(component);
+    }
+  }) : void 0;
+  const component = {
+    type: "collection",
+    kind: "layout",
+    uid,
+    analyticsId,
+    control,
+    margin,
+    method,
+    url,
+    tags,
+    status: {
+      type: "idle",
+      loadMore: state.nextCursor ? () => query(component, state.nextCursor) : void 0
+    },
+    state: __spreadProps(__spreadValues({}, state), {
+      filters: mapFilters(state.filters),
+      search: mapSearch(props.search)
+    })
+  };
+  return component;
+};
+
+// src/domain/features/collection/getPerformCollectionQueryFunction.ts
+var getPerformCollectionQueryFunction = (httpClient, url, method, mapState) => {
+  return async ({ searchParam, query, cursor, signal, filters = [] }) => {
+    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.value];
+      }
+    );
+    const response = await (method === "GET" ? httpClient(
+      addQueryParameters(url, [
+        [searchParam, query != null ? query : void 0],
+        ["cursor", cursor],
+        ...filterValues
+      ]),
+      {
+        method,
+        headers,
+        signal
+      }
+    ) : httpClient(url, {
+      method,
+      headers,
+      signal,
+      body: JSON.stringify(__spreadValues(__spreadProps(__spreadValues({}, searchParam && query ? { [searchParam]: query } : {}), {
+        cursor
+      }), filterValues.reduce((acc, [k, v]) => __spreadProps(__spreadValues({}, acc), { [k]: v }), {})))
+    }));
+    const results = await parseResponse(response);
+    return mapState(results);
+  };
+};
+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]) => key && 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/mappers/layout/collectionLayoutToComponent.ts
+var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, method, search, tags, url }, mapperProps) => {
+  const { httpClient, onComponentUpdate } = mapperProps;
+  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-collection-response-${index}`, layout, mapperProps, []);
+  const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
+  const searchFunction = getPerformCollectionQueryFunction(httpClient, url, method, mapState);
+  const component = createCollectionComponent(
+    {
+      uid,
+      analyticsId,
+      control,
+      margin: margin != null ? margin : "md",
+      tags,
+      url,
+      method,
+      state: mapState(initialState),
+      search: search ? {
+        param: search == null ? void 0 : search.param,
+        query: "",
+        hint: search == null ? void 0 : search.hint
+      } : void 0
+    },
+    onComponentUpdate,
+    searchFunction
+  );
+  return component;
+};
+var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
+  var _a, _b, _c;
+  return {
+    sections: specState.sections.map((section) => {
+      return {
+        id: section.id,
+        title: section.title,
+        callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+        items: section.items.map((item) => {
+          const behavior = getDomainLayerBehavior(
+            { behavior: item.primaryBehavior },
+            [],
+            mapperProps.registerSubmissionBehavior
+          );
+          return __spreadProps(__spreadValues({}, item), {
+            onClick: item.primaryBehavior ? () => {
+              void mapperProps.onBehavior(behavior);
+            } : void 0,
+            callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+            inlineAlert: mapInlineAlert(item.inlineAlert)
+          });
+        })
+      };
+    }),
+    filters: (_a = specState.filters) == null ? void 0 : _a.map((filter) => __spreadProps(__spreadValues({}, filter), {
+      options: filter.options.map((option) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, option), {
+          selected: (_a2 = option.selected) != null ? _a2 : false,
+          onSelect: () => {
+          }
+          // todo: what goes here?
+        });
+      })
+    })),
+    beforeSections: (_b = specState.beforeSections) == null ? void 0 : _b.map(mapLayout),
+    afterSections: (_c = specState.afterSections) == null ? void 0 : _c.map(mapLayout),
+    nextCursor: specState.nextCursor
+  };
+};
+
 // src/domain/components/ButtonComponent.ts
 var createButtonComponent = (props) => __spreadValues({
   type: "button",
@@ -1668,41 +2002,6 @@ var createDecisionComponent = (props) => __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, trackEvent, registerSubmissionBehavior } = mapperProps;
-  if (info) {
-    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
-    const isLink = behavior.type === "link";
-    return {
-      text: info.text,
-      href: isLink ? behavior.url : void 0,
-      hrefWithTracking: getHrefWithTracking({
-        behavior,
-        onBehavior,
-        trackEvent
-      }),
-      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,
@@ -2178,44 +2477,8 @@ var mapReviewField = (field, mapperProps) => {
   });
 };
 
-// src/domain/components/utils/debounce.ts
-var debounce = (callback, waitMs) => {
-  let timeoutId = null;
-  let lastArgs = null;
-  const clearTimer = () => {
-    if (timeoutId !== null) {
-      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 DEBOUNCE_TIME2 = 400;
 var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate) => {
   const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = props;
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -2245,7 +2508,7 @@ var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate
       }
     });
   };
-  const debouncedSearch = debounce(search, DEBOUNCE_TIME);
+  const debouncedSearch = debounce(search, DEBOUNCE_TIME2);
   const component = {
     type: "search",
     kind: "layout",
@@ -2307,7 +2570,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
@@ -2317,7 +2580,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 = {
@@ -2333,7 +2596,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)) {
@@ -2350,7 +2613,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);
@@ -2556,6 +2819,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":
@@ -7929,6 +8194,26 @@ var mapBoxControl = ({
   return control;
 };
 
+// src/renderers/mappers/collectionComponentToProps.ts
+var collectionComponentToProps = (component, rendererMapperProps) => {
+  var _a, _b, _c;
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "url", "method")), rendererMapperProps), {
+    status: component.status,
+    state: __spreadProps(__spreadValues({}, component.state), {
+      filters: (_a = component.state.filters) != null ? _a : [],
+      sections: component.state.sections.map((section) => __spreadProps(__spreadValues({}, section), {
+        callToAction: mapCallToActionOptional(section.callToAction),
+        items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
+          callToAction: mapCallToActionOptional(item.callToAction),
+          additionalInfo: mapAdditionalInfo2(item.additionalInfo)
+        }))
+      })),
+      beforeSections: (_b = component.state.beforeSections) == null ? void 0 : _b.map((child) => componentToRendererProps(child, rendererMapperProps)).map(rendererMapperProps.render),
+      afterSections: (_c = component.state.afterSections) == null ? void 0 : _c.map((child) => componentToRendererProps(child, rendererMapperProps)).map(rendererMapperProps.render)
+    })
+  });
+};
+
 // src/renderers/mappers/buttonComponentToProps.ts
 var buttonComponentToProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({
@@ -8558,6 +8843,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":