@wise/dynamic-flow-client 5.22.2 → 5.24.0

package/build/main.js

@@ -1204,6 +1204,15 @@ var createRootDomainComponent = (onComponentUpdate, scrollToTop, backConfig, req
       const navigation = (_a = component.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
       return component.backConfig.isFlowCancellable || component.stepStack.length > 1 && component.backConfig.isNativeBackEnabled || stepHasBehavior;
+    },
+    startDelay(delay) {
+      var _a, _b;
+      return (_b = (_a = component.getStep()) == null ? void 0 : _a.startDelay(delay)) != null ? _b : { abort: () => {
+      } };
+    },
+    setExternalConfirmation(external) {
+      var _a;
+      (_a = component.getStep()) == null ? void 0 : _a.setExternalConfirmation(external);
     }
   };
   return component;
@@ -1346,10 +1355,10 @@ var normaliseBehavior = (behavior, stepActions) => {
       });
     }
     if (behavior.type === "delay") {
-      return {
-        type: "none",
+      return __spreadProps(__spreadValues({}, behavior), {
+        behavior: normaliseBehavior(behavior.behavior, stepActions),
         track: false
-      };
+      });
     }
     if (behavior.type === "dispatch-event") {
       return {
@@ -1545,11 +1554,36 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   )
 });
 
+// src/domain/mappers/utils/image.ts
+var mapSpecImage = (image) => {
+  var _a, _b, _c;
+  return image ? {
+    uri: (_b = (_a = image.uri) != null ? _a : image.url) != null ? _b : "",
+    accessibilityDescription: (_c = image.accessibilityDescription) != null ? _c : image.text
+  } : void 0;
+};
+
+// src/domain/mappers/utils/media-utils.ts
+var getDomainLayerMedia = ({ icon, image, media }) => {
+  if (media) {
+    return media;
+  }
+  if (icon || image) {
+    return {
+      type: "legacy",
+      icon,
+      image: mapSpecImage(image)
+    };
+  }
+  return void 0;
+};
+
 // src/domain/mappers/utils/utils.ts
 var mapInlineAlert = (alert) => {
   return alert ? {
     content: alert.content,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral",
+    media: getDomainLayerMedia({ media: alert.media })
   } : void 0;
 };
 var mapAdditionalInfo = (info, mapperProps) => {
@@ -1576,7 +1610,8 @@ var mapAdditionalInfo = (info, mapperProps) => {
 var mapSchemaAlert = (alert) => {
   return alert ? {
     content: alert.markdown,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral",
+    media: getDomainLayerMedia({ media: alert.media })
   } : void 0;
 };
 
@@ -1654,13 +1689,17 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction) => {
       });
     }).catch(() => {
       if (!signal.aborted) {
+        const retry = () => {
+          update(component, (draft) => {
+            draft.status = { type: "loading", reason: mode };
+          });
+          query(mode);
+        };
         update(component, (draft) => {
-          draft.state = {
-            filters: component.state.filters,
-            search: component.state.search,
-            sections: []
-          };
-          draft.status = { type: "error", reason: mode, retry: () => query(mode) };
+          if (mode === "search") {
+            draft.state.sections = [];
+          }
+          draft.status = { type: "error", reason: mode, retry };
         });
       }
     });
@@ -1746,13 +1785,15 @@ 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) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const match = incoming.find((s) => s.id === section.id);
     if (!match) return section;
     return {
       id: match.id,
       title: (_a = match.title) != null ? _a : section.title,
       callToAction: (_b = match.callToAction) != null ? _b : section.callToAction,
+      help: (_c = match.help) != null ? _c : section.help,
+      inlineAlert: (_d = match.inlineAlert) != null ? _d : section.inlineAlert,
       items: [...section.items, ...match.items]
     };
   });
@@ -1871,13 +1912,14 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
   return component;
 };
 var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
-  var _a, _b, _c;
+  const { sections, filters, beforeSections, afterSections, nextCursor } = specState;
   return {
-    sections: specState.sections.map((section) => {
-      return {
-        id: section.id,
-        title: section.title,
+    sections: sections.map((section) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, section), {
         callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+        help: (_a = section.help) == null ? void 0 : _a.markdown,
+        inlineAlert: mapInlineAlert(section.inlineAlert),
         items: section.items.map((item) => {
           const behavior = getDomainLayerBehavior(
             { behavior: item.primaryBehavior },
@@ -1893,24 +1935,29 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
             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: () => {
-          }
-          // noop - this gets added during mapping
-        });
-      })
-    })),
-    beforeSections: (_b = specState.beforeSections) == null ? void 0 : _b.map(mapLayout),
-    afterSections: (_c = specState.afterSections) == null ? void 0 : _c.map(mapLayout),
-    nextCursor: specState.nextCursor
+    filters: filters == null ? void 0 : filters.map(mapFilter),
+    beforeSections: beforeSections == null ? void 0 : beforeSections.map(mapLayout),
+    afterSections: afterSections == null ? void 0 : afterSections.map(mapLayout),
+    nextCursor
   };
 };
+var mapFilter = (filter) => {
+  const anySelected = filter.options.some((option) => option.selected);
+  return __spreadProps(__spreadValues({}, filter), {
+    options: filter.options.map((option, index) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, option), {
+        // if a single select with no selection, we should default to selecting the first item
+        selected: filter.multiSelect || anySelected ? (_a = option.selected) != null ? _a : false : index === 0,
+        onSelect: () => {
+        }
+        // noop - this gets added during mapping in the component itself
+      });
+    })
+  });
+};
 
 // src/domain/components/ButtonComponent.ts
 var createButtonComponent = (props) => __spreadValues({
@@ -1918,30 +1965,6 @@ var createButtonComponent = (props) => __spreadValues({
   kind: "layout"
 }, props);
 
-// src/domain/mappers/utils/image.ts
-var mapSpecImage = (image) => {
-  var _a, _b, _c;
-  return image ? {
-    uri: (_b = (_a = image.uri) != null ? _a : image.url) != null ? _b : "",
-    accessibilityDescription: (_c = image.accessibilityDescription) != null ? _c : image.text
-  } : void 0;
-};
-
-// src/domain/mappers/utils/media-utils.ts
-var getDomainLayerMedia = ({ icon, image, media }) => {
-  if (media) {
-    return media;
-  }
-  if (icon || image) {
-    return {
-      type: "legacy",
-      icon,
-      image: mapSpecImage(image)
-    };
-  }
-  return void 0;
-};
-
 // src/domain/mappers/layout/buttonLayoutToComponent.ts
 var buttonLayoutToComponent = (uid, button, mapperProps) => {
   if (!button.behavior && !button.action && mapperProps.features.isEnabled("strictButtonOperations")) {
@@ -3035,6 +3058,45 @@ var getSubmittableData = async (components) => Promise.all(components.map(async
 var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => recursiveMerge(acc, value), null);
 var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => recursiveMerge(acc, value), null);
 
+// src/domain/features/delay/getStepDelays.ts
+var getStepDelays = (onEmpty) => {
+  let timeouts = [];
+  const remove = (timeout) => {
+    timeouts = timeouts.filter((pendingTimeout) => pendingTimeout !== timeout);
+  };
+  return {
+    start({ duration, execute }) {
+      const timeout = setTimeout(() => {
+        if (timeouts.includes(timeout)) {
+          remove(timeout);
+          execute();
+        }
+        if (timeouts.length === 0) {
+          onEmpty();
+        }
+      }, duration * 1e3);
+      timeouts = [...timeouts, timeout];
+      return {
+        abort: () => {
+          clearTimeout(timeout);
+          remove(timeout);
+          if (timeouts.length === 0) {
+            onEmpty();
+          }
+        }
+      };
+    },
+    stop() {
+      if (timeouts.length === 0) {
+        return;
+      }
+      timeouts.forEach(clearTimeout);
+      timeouts = [];
+      onEmpty();
+    }
+  };
+};
+
 // src/domain/components/step/StepDomainComponent.ts
 var createStepComponent = (props) => {
   const _a = props, {
@@ -3057,6 +3119,14 @@ var createStepComponent = (props) => {
     "onLoad"
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
+  const resetDelayState = () => {
+    if (component.loadingState === "delay-pending") {
+      update(component, (draft) => {
+        draft.loadingState = "idle";
+      });
+    }
+  };
+  const stepDelays = getStepDelays(resetDelayState);
   const component = __spreadProps(__spreadValues({
     uid
   }, rest), {
@@ -3106,6 +3176,10 @@ var createStepComponent = (props) => {
         draft.loadingState = loadingState;
       });
     },
+    startDelay(delay) {
+      component.setLoadingState("delay-pending");
+      return stepDelays.start(delay);
+    },
     addSubflow(subflow) {
       update(component, (draft) => {
         draft.subflow = subflow;
@@ -3133,11 +3207,17 @@ var createStepComponent = (props) => {
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      stepDelays.stop();
       stepPrefetch.stop();
       update(component, (draft) => {
         draft.state = "stopped";
         draft.modals = [];
       });
+    },
+    setExternalConfirmation(external) {
+      update(component, (draft) => {
+        draft.externalConfirmation = external;
+      });
     }
   });
   return component;
@@ -7523,6 +7603,14 @@ var createFlowController = (props) => {
     var _a;
     trackBehaviorTriggered(trackEvent, behavior);
     switch (behavior.type) {
+      case "delay": {
+        return rootComponent.startDelay({
+          duration: behavior.duration,
+          execute: () => {
+            void onBehavior(behavior.behavior);
+          }
+        });
+      }
       case "download": {
         try {
           await executeDownload(behavior.request, httpClient);
@@ -7593,7 +7681,14 @@ var createFlowController = (props) => {
         };
       }
       case "link": {
-        onLink(behavior.url);
+        rootComponent.setExternalConfirmation(
+          createExternalConfirmation(
+            `${rootComponent.uid}-external-confirmation`,
+            behavior.url,
+            onLink,
+            onChange
+          )
+        );
         break;
       }
       case "modal": {
@@ -8293,17 +8388,18 @@ var mapBoxControl = ({
 
 // src/renderers/mappers/collectionComponentToProps.ts
 var collectionComponentToProps = (component, rendererMapperProps) => {
-  var _a, _b, _c;
-  const beforeSectionsProps = (_a = component.state.beforeSections) == null ? void 0 : _a.map(
+  var _a, _b, _c, _d, _e;
+  const { render } = rendererMapperProps;
+  const beforeSectionsProps = (_b = (_a = component.state.beforeSections) == null ? void 0 : _a.map(
     (child) => componentToRendererProps(child, rendererMapperProps)
-  );
-  const afterSectionsProps = (_b = component.state.afterSections) == null ? void 0 : _b.map(
+  )) != null ? _b : [];
+  const afterSectionsProps = (_d = (_c = component.state.afterSections) == null ? void 0 : _c.map(
     (child) => componentToRendererProps(child, rendererMapperProps)
-  );
+  )) != null ? _d : [];
   return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
     status: component.status,
     state: __spreadProps(__spreadValues({}, component.state), {
-      filters: (_c = component.state.filters) != null ? _c : [],
+      filters: (_e = component.state.filters) != null ? _e : [],
       sections: component.state.sections.map((section) => __spreadProps(__spreadValues({}, section), {
         callToAction: mapCallToActionOptional(section.callToAction),
         items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
@@ -8313,9 +8409,9 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
         }))
       })),
       beforeSectionsProps,
-      beforeSections: beforeSectionsProps == null ? void 0 : beforeSectionsProps.map(rendererMapperProps.render),
+      beforeSections: beforeSectionsProps.map(render),
       afterSectionsProps,
-      afterSections: afterSectionsProps == null ? void 0 : afterSectionsProps.map(rendererMapperProps.render)
+      afterSections: afterSectionsProps.map(render)
     })
   });
 };
@@ -9181,6 +9277,9 @@ var rootComponentToProps = (rootComponent, rendererMapperProps, nativeSubflowHan
   }, rendererMapperProps);
 };
 
+// src/renderers/mappers/utils/mapRendererLoadingState.ts
+var mapRendererLoadingState = (loadingState) => loadingState === "delay-pending" ? "submitting" : loadingState;
+
 // src/renderers/subflow/getNativeSubflowRenderer.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var getNativeSubflowRenderer = (handlers) => {
@@ -9297,7 +9396,7 @@ function useDynamicFlow(props) {
       httpClient,
       trackEvent: (_b = rootComponent.getTrackEvent()) != null ? _b : (() => {
       }),
-      stepLoadingState: rootComponent.getLoadingState()
+      stepLoadingState: mapRendererLoadingState(rootComponent.getLoadingState())
     },
     (_c = props.nativeSubflowHandlers) != null ? _c : []
   );