@wise/dynamic-flow-client 5.14.0-experimental-a850677 → 5.14.0-experimental-2996a75

package/build/main.js

@@ -1447,28 +1447,32 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
             if (draft.state.type === "empty") {
               return;
             }
-            const updated = draft.state.sections.map((section) => {
+            const knownSections = draft.state.sections.map((section) => section.id);
+            const newSections = response.sections.filter(
+              (section) => !knownSections.includes(section.id)
+            );
+            draft.state.sections.forEach((section) => {
               const m = response.sections.find((s) => s.id === section.id);
               if (m) {
-                return __spreadProps(__spreadValues({}, section), {
-                  items: [...section.items, ...m.items]
-                });
+                section.items.push(...m.items);
               }
-              return section;
             });
-            draft.state.sections = updated;
+            draft.state.sections.push(...newSections);
             draft.state.nextCursor = response.nextCursor;
             draft.cursorStale = false;
+            draft.loading = false;
           });
         } else {
           update(component2, (draft) => {
             draft.state = __spreadValues({}, response);
             draft.cursorStale = false;
+            draft.loading = false;
           });
         }
       } else {
         update(component2, (draft) => {
           draft.state = response;
+          draft.loading = false;
         });
       }
     }).catch(() => {
@@ -1479,6 +1483,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
     type: "collection",
     kind: "layout",
     uid,
+    loading: false,
     analyticsId,
     control,
     cursorStale: false,
@@ -1491,6 +1496,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
       onChange(query) {
         component._update((draft) => {
           draft.search.query = query;
+          draft.loading = true;
         });
         debouncedSearch(component, query, component.filters);
       }
@@ -1507,10 +1513,12 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
               component._update((draft) => {
                 if (filter.multiSelection) {
                   draft.filters[i].options[j].selected = !currentValue;
+                  draft.loading = true;
                 } else {
                   draft.filters[i].options = draft.filters[i].options.map((option, k) => __spreadProps(__spreadValues({}, option), {
                     selected: k === j ? !currentValue : false
                   }));
+                  draft.loading = true;
                 }
               });
               searchFn(component, component.search.query, component.filters, void 0);
@@ -1529,6 +1537,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
       const cursor = this.state.nextCursor;
       this._update((draft) => {
         draft.cursorStale = true;
+        draft.loading = true;
       });
       searchFn(this, this.search.query, this.filters, cursor);
     }
@@ -1602,7 +1611,15 @@ var collectionLayoutToComponent = (uid, {
             id: section.id,
             title: section.title,
             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)
               });
@@ -1613,7 +1630,7 @@ var collectionLayoutToComponent = (uid, {
       },
       search: {
         query: null,
-        onChange(query) {
+        onChange() {
         }
       },
       filters: filters.filter((filter) => filter.options)
@@ -1654,10 +1671,21 @@ var getPerformCollectionSearchFunction = (httpClient, url, method, searchParam,
         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)
-            }))
+            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,
+                href: behavior.type === "link" ? behavior.url : void 0,
+                callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+                inlineAlert: mapInlineAlert(item.inlineAlert)
+              });
+            })
           }))
         ],
         nextCursor: results.nextCursor
@@ -7712,6 +7740,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
       query: (_a = component.search.query) != null ? _a : void 0
     }),
     filters: component.filters,
+    loading: component.loading,
     loadMore: !component.cursorStale && component.state.type === "collection-content" && component.state.nextCursor ? component.loadMore.bind(component) : void 0
   });
 };

package/build/main.mjs

@@ -1417,28 +1417,32 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
             if (draft.state.type === "empty") {
               return;
             }
-            const updated = draft.state.sections.map((section) => {
+            const knownSections = draft.state.sections.map((section) => section.id);
+            const newSections = response.sections.filter(
+              (section) => !knownSections.includes(section.id)
+            );
+            draft.state.sections.forEach((section) => {
               const m = response.sections.find((s) => s.id === section.id);
               if (m) {
-                return __spreadProps(__spreadValues({}, section), {
-                  items: [...section.items, ...m.items]
-                });
+                section.items.push(...m.items);
               }
-              return section;
             });
-            draft.state.sections = updated;
+            draft.state.sections.push(...newSections);
             draft.state.nextCursor = response.nextCursor;
             draft.cursorStale = false;
+            draft.loading = false;
           });
         } else {
           update(component2, (draft) => {
             draft.state = __spreadValues({}, response);
             draft.cursorStale = false;
+            draft.loading = false;
           });
         }
       } else {
         update(component2, (draft) => {
           draft.state = response;
+          draft.loading = false;
         });
       }
     }).catch(() => {
@@ -1449,6 +1453,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
     type: "collection",
     kind: "layout",
     uid,
+    loading: false,
     analyticsId,
     control,
     cursorStale: false,
@@ -1461,6 +1466,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
       onChange(query) {
         component._update((draft) => {
           draft.search.query = query;
+          draft.loading = true;
         });
         debouncedSearch(component, query, component.filters);
       }
@@ -1477,10 +1483,12 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
               component._update((draft) => {
                 if (filter.multiSelection) {
                   draft.filters[i].options[j].selected = !currentValue;
+                  draft.loading = true;
                 } else {
                   draft.filters[i].options = draft.filters[i].options.map((option, k) => __spreadProps(__spreadValues({}, option), {
                     selected: k === j ? !currentValue : false
                   }));
+                  draft.loading = true;
                 }
               });
               searchFn(component, component.search.query, component.filters, void 0);
@@ -1499,6 +1507,7 @@ var createCollectionComponent = (props, onComponentUpdate, searchFunction) => {
       const cursor = this.state.nextCursor;
       this._update((draft) => {
         draft.cursorStale = true;
+        draft.loading = true;
       });
       searchFn(this, this.search.query, this.filters, cursor);
     }
@@ -1572,7 +1581,15 @@ var collectionLayoutToComponent = (uid, {
             id: section.id,
             title: section.title,
             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)
               });
@@ -1583,7 +1600,7 @@ var collectionLayoutToComponent = (uid, {
       },
       search: {
         query: null,
-        onChange(query) {
+        onChange() {
         }
       },
       filters: filters.filter((filter) => filter.options)
@@ -1624,10 +1641,21 @@ var getPerformCollectionSearchFunction = (httpClient, url, method, searchParam,
         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)
-            }))
+            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,
+                href: behavior.type === "link" ? behavior.url : void 0,
+                callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+                inlineAlert: mapInlineAlert(item.inlineAlert)
+              });
+            })
           }))
         ],
         nextCursor: results.nextCursor
@@ -7682,6 +7710,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
       query: (_a = component.search.query) != null ? _a : void 0
     }),
     filters: component.filters,
+    loading: component.loading,
     loadMore: !component.cursorStale && component.state.type === "collection-content" && component.state.nextCursor ? component.loadMore.bind(component) : void 0
   });
 };