@wise/dynamic-flow-client 5.23.0 → 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 {
@@ -1903,13 +1912,13 @@ 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) => {
-      var _a2;
+    sections: sections.map((section) => {
+      var _a;
       return __spreadProps(__spreadValues({}, section), {
         callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
-        help: (_a2 = section.help) == null ? void 0 : _a2.markdown,
+        help: (_a = section.help) == null ? void 0 : _a.markdown,
         inlineAlert: mapInlineAlert(section.inlineAlert),
         items: section.items.map((item) => {
           const behavior = getDomainLayerBehavior(
@@ -1928,10 +1937,10 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
         })
       });
     }),
-    filters: (_a = specState.filters) == null ? void 0 : _a.map(mapFilter),
-    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) => {
@@ -3049,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, {
@@ -3071,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), {
@@ -3120,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;
@@ -3147,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;
@@ -7537,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);
@@ -7607,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": {
@@ -8307,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), {
@@ -8327,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)
     })
   });
 };
@@ -9195,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) => {
@@ -9311,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 : []
   );

package/build/main.mjs

@@ -1173,6 +1173,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;
@@ -1315,10 +1324,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 {
@@ -1872,13 +1881,13 @@ 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) => {
-      var _a2;
+    sections: sections.map((section) => {
+      var _a;
       return __spreadProps(__spreadValues({}, section), {
         callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
-        help: (_a2 = section.help) == null ? void 0 : _a2.markdown,
+        help: (_a = section.help) == null ? void 0 : _a.markdown,
         inlineAlert: mapInlineAlert(section.inlineAlert),
         items: section.items.map((item) => {
           const behavior = getDomainLayerBehavior(
@@ -1897,10 +1906,10 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
         })
       });
     }),
-    filters: (_a = specState.filters) == null ? void 0 : _a.map(mapFilter),
-    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) => {
@@ -3018,6 +3027,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, {
@@ -3040,6 +3088,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), {
@@ -3089,6 +3145,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;
@@ -3116,11 +3176,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;
@@ -7506,6 +7572,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);
@@ -7576,7 +7650,14 @@ var createFlowController = (props) => {
         };
       }
       case "link": {
-        onLink(behavior.url);
+        rootComponent.setExternalConfirmation(
+          createExternalConfirmation(
+            `${rootComponent.uid}-external-confirmation`,
+            behavior.url,
+            onLink,
+            onChange
+          )
+        );
         break;
       }
       case "modal": {
@@ -8276,17 +8357,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), {
@@ -8296,9 +8378,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)
     })
   });
 };
@@ -9164,6 +9246,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
 import { Fragment as Fragment6, jsx as jsx7 } from "react/jsx-runtime";
 var getNativeSubflowRenderer = (handlers) => {
@@ -9280,7 +9365,7 @@ function useDynamicFlow(props) {
       httpClient,
       trackEvent: (_b = rootComponent.getTrackEvent()) != null ? _b : (() => {
       }),
-      stepLoadingState: rootComponent.getLoadingState()
+      stepLoadingState: mapRendererLoadingState(rootComponent.getLoadingState())
     },
     (_c = props.nativeSubflowHandlers) != null ? _c : []
   );