@wise/dynamic-flow-client 4.3.2 → 4.3.3

package/build/main.js

@@ -6624,6 +6624,7 @@ function useDynamicFlowCore(props) {
   );
   const closeWithError = (0, import_react3.useCallback)(
     (error, analytics, statusCode) => {
+      rootComponentRef.current.stop();
       trackCoreEvent("Failed", __spreadValues({}, analytics));
       onError(error, statusCode);
     },
@@ -6645,6 +6646,7 @@ function useDynamicFlowCore(props) {
       switch (command.type) {
         case "complete": {
           onCompletion(command.result);
+          rootComponentRef.current.stop();
           trackCoreEvent("Succeeded");
           break;
         }
@@ -6774,6 +6776,11 @@ function DynamicFlowCore(props) {
     },
     stepLoadingState: rootComponent.getLoadingState()
   });
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      rootComponent.stop();
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ErrorBoundary_default,
     {

package/build/main.mjs

@@ -925,7 +925,7 @@ var translations = {
 var i18n_default = translations;
 
 // src/revamp/DynamicFlowCore.tsx
-import { useMemo as useMemo2 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
 
 // src/common/errorBoundary/ErrorBoundary.tsx
 import { Component } from "react";
@@ -6581,6 +6581,7 @@ function useDynamicFlowCore(props) {
   );
   const closeWithError = useCallback2(
     (error, analytics, statusCode) => {
+      rootComponentRef.current.stop();
       trackCoreEvent("Failed", __spreadValues({}, analytics));
       onError(error, statusCode);
     },
@@ -6602,6 +6603,7 @@ function useDynamicFlowCore(props) {
       switch (command.type) {
         case "complete": {
           onCompletion(command.result);
+          rootComponentRef.current.stop();
           trackCoreEvent("Succeeded");
           break;
         }
@@ -6731,6 +6733,11 @@ function DynamicFlowCore(props) {
     },
     stepLoadingState: rootComponent.getLoadingState()
   });
+  useEffect2(() => {
+    return () => {
+      rootComponent.stop();
+    };
+  }, []);
   return /* @__PURE__ */ jsx6(
     ErrorBoundary_default,
     {
@@ -7111,7 +7118,7 @@ function isReference(block) {
 }
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
-import { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo21, useState as useState26 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect22, useMemo as useMemo21, useState as useState26 } from "react";
 import { useIntl as useIntl23 } from "react-intl";
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
@@ -7968,12 +7975,12 @@ function useDebouncedFunction(callback, waitMs) {
 }
 
 // src/legacy/common/hooks/useExternal/useExternal.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 function useExternal(url) {
   const [externalWindow, setExternalWindow] = useState3(null);
   const [hasManuallyTriggered, setHasManuallyTriggered] = useState3(false);
   const dismissConfirmation = () => setHasManuallyTriggered(true);
-  useEffect2(() => {
+  useEffect3(() => {
     if (url) {
       setHasManuallyTriggered(false);
       setExternalWindow(window.open(url, "_blank"));
@@ -8046,7 +8053,7 @@ import { useState as useState20 } from "react";
 import { useIntl as useIntl17 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
-import { useEffect as useEffect13, useState as useState19 } from "react";
+import { useEffect as useEffect14, useState as useState19 } from "react";
 import { useIntl as useIntl16 } from "react-intl";
 
 // src/legacy/common/constants/DateMode.ts
@@ -8095,7 +8102,7 @@ var Size = {
 
 // src/legacy/jsonSchemaForm/basicTypeSchema/BasicTypeSchema.tsx
 import classNames10 from "classnames";
-import { useEffect as useEffect12, useMemo as useMemo16, useState as useState18 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo16, useState as useState18 } from "react";
 
 // src/legacy/layout/alert/DynamicAlert.tsx
 import { Alert as Alert2 } from "@transferwise/components";
@@ -8562,7 +8569,7 @@ var DynamicDivider_default = DynamicDivider;
 
 // src/legacy/layout/external/DynamicExternal.tsx
 import { Button as Button2, Loader, Size as Size2 } from "@transferwise/components";
-import { useCallback as useCallback6, useEffect as useEffect3, useMemo as useMemo9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo9 } from "react";
 import { useIntl as useIntl3 } from "react-intl";
 
 // src/legacy/layout/external/DynamicExternal.messages.ts
@@ -8584,7 +8591,7 @@ var DynamicExternal = ({ component, onAction }) => {
     () => window.open(requestUrl, "df-external-window"),
     [requestUrl]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     openExternalUrl();
   }, [openExternalUrl]);
   const pollingConfiguration = useMemo9(() => {
@@ -8602,7 +8609,7 @@ var DynamicExternal = ({ component, onAction }) => {
 var DynamicExternal_default = DynamicExternal;
 
 // src/legacy/jsonSchemaForm/genericSchema/GenericSchema.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 
 // src/legacy/jsonSchemaForm/allOfSchema/AllOfSchema.tsx
 import { Header as Header2 } from "@transferwise/components";
@@ -8895,7 +8902,7 @@ function getValidationMessages(schema, required, defaultErrorMessages) {
 // src/legacy/jsonSchemaForm/arrayTypeSchema/arrayListSchema/multiSelectSchema/MultiSelectSchema.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
 import classNames3 from "classnames";
-import { useEffect as useEffect4, useMemo as useMemo11, useState as useState6 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo11, useState as useState6 } from "react";
 import { useIntl as useIntl6 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
@@ -9016,7 +9023,7 @@ function MultiSelectSchema({
   const id = useMemo11(() => schema.$id || generateRandomId(), [schema.$id]);
   const [changed, setChanged] = useState6(false);
   const [selected, setSelected] = useState6(getInitialModelIndices2(model, options));
-  useEffect4(
+  useEffect5(
     () => {
       if (selected) {
         broadcastModelChange(selected);
@@ -9604,7 +9611,7 @@ var ArraySchema_default = ArraySchema;
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
 import { Header as Header4 } from "@transferwise/components";
 import classNames5 from "classnames";
-import { useState as useState9, useEffect as useEffect5 } from "react";
+import { useState as useState9, useEffect as useEffect6 } from "react";
 import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs10 } from "react/jsx-runtime";
 var getSchemaColumnClasses2 = (width) => ({
   "col-xs-12": true,
@@ -9624,7 +9631,7 @@ function ObjectSchema(props) {
     props.onChange(__spreadProps(__spreadValues({}, onChangeProps), { model }));
   };
   const isRequired = (propertyName) => props.schema.required && props.schema.required.includes(propertyName);
-  useEffect5(() => {
+  useEffect6(() => {
     const newModel = getValidObjectModelParts(model, props.schema) || {};
     setModel(newModel);
     if (!isEqual(newModel, model)) {
@@ -9681,7 +9688,7 @@ var ObjectSchema_default = ObjectSchema;
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
 import { Header as Header5 } from "@transferwise/components";
 import classNames6 from "classnames";
-import { useEffect as useEffect7, useMemo as useMemo13, useState as useState10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo13, useState as useState10 } from "react";
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
 import { Markdown, Info } from "@transferwise/components";
@@ -9715,7 +9722,7 @@ function Help(props) {
 var Help_default = Help;
 
 // src/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { useIntl as useIntl10 } from "react-intl";
 
 // src/legacy/formControl/FormControl.tsx
@@ -10437,7 +10444,7 @@ function SchemaFormControl(props) {
     onChange(getValidBasicModelOrNull(value2, schema), type, metadata);
   };
   const controlType = getControlType(schema);
-  useEffect6(() => {
+  useEffect7(() => {
     warnIfInvalidSchema(schema, log, controlType);
   }, [JSON.stringify(schema), log, controlType]);
   const options = schema.values || getOptions(schema, controlType);
@@ -10509,7 +10516,7 @@ function OneOfSchema(props) {
       searchValueLength: searchValue.length
     });
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const modelIndex = getValidIndexFromValue(props.schema, props.model);
     const defaultIndex = getValidIndexFromValue(props.schema, props.schema.default);
     if (modelIndex === -1 && defaultIndex >= 0) {
@@ -10667,7 +10674,7 @@ var OneOfSchema_default = OneOfSchema;
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 import classNames7 from "classnames";
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 import { useIntl as useIntl11 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
@@ -10738,7 +10745,7 @@ function PersistAsyncBlobSchema(props) {
   const intl = useIntl11();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
-  useEffect8(() => {
+  useEffect9(() => {
     if (submitted) {
       setValidations(getValidationFailures(model, schema, Boolean(required)));
     } else {
@@ -11042,7 +11049,7 @@ function getValueFromOption(option) {
 }
 
 // src/legacy/jsonSchemaForm/validationAsyncSchema/ValidationAsyncSchema.tsx
-import { useEffect as useEffect9, useRef as useRef3, useState as useState13 } from "react";
+import { useEffect as useEffect10, useRef as useRef3, useState as useState13 } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
 function ValidationAsyncSchema(props) {
   const { schema, model, required = false, submitted, errors, onChange } = props;
@@ -11057,7 +11064,7 @@ function ValidationAsyncSchema(props) {
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const log = useLogger();
-  useEffect9(() => {
+  useEffect10(() => {
     if (!schema.validationAsync.method) {
       log.warning(
         "Invalid schema or model",
@@ -11139,7 +11146,7 @@ function GenericSchemaForm(props) {
   const schemaProps = __spreadProps(__spreadValues({}, props), { model, errors, hideTitle, disabled });
   const type = getSchemaType(schema);
   const log = useLogger();
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isValidGenericSchema(schema, model, errors)) {
       log.error(
         "Invalid schema or model",
@@ -11276,14 +11283,14 @@ var DynamicInfo = ({ component }) => {
 
 // src/legacy/layout/image/DynamicImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect11, useState as useState14 } from "react";
+import { useEffect as useEffect12, useState as useState14 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 function DynamicImage({ component: image }) {
   var _a, _b, _c;
   const { content, url, size, text, margin, accessibilityDescription } = image;
   const httpClient = useHttpClient();
   const [imageSource, setImageSource] = useState14("");
-  useEffect11(() => {
+  useEffect12(() => {
     if (content) {
       const { uri, url: contentUrl } = content;
       if (uri && !uri.startsWith("urn:")) {
@@ -12084,9 +12091,9 @@ var BasicTypeSchema = (props) => {
   };
   const isConst = props.schema.const;
   const isHidden = props.schema.hidden || isConst;
-  useEffect12(refreshValidations, [props.model, props.submitted]);
-  useEffect12(onSchemaChange, [props.schema]);
-  useEffect12(() => {
+  useEffect13(refreshValidations, [props.model, props.submitted]);
+  useEffect13(onSchemaChange, [props.schema]);
+  useEffect13(() => {
     var _a2;
     const newModel = (_a2 = props.model) != null ? _a2 : null;
     if (newModel !== model) {
@@ -12167,7 +12174,7 @@ function PersistAsyncBasicSchema(props) {
   const [persistAsyncError, setPersistAsyncError] = useState19(null);
   const [fieldSubmitted, setFieldSubmitted] = useState19(false);
   const [abortController, setAbortController] = useState19(null);
-  useEffect13(() => {
+  useEffect14(() => {
     if (controlTypesWithPersistOnChange.has(
       // TODO: LOW avoid type assertion below -- control type may be nullish. consider ?? ''
       getControlType(schema.persistAsync.schema)
@@ -12329,7 +12336,7 @@ function hasStringMessage(value) {
 }
 
 // src/legacy/common/hooks/usePolling/usePolling.tsx
-import { useEffect as useEffect14, useMemo as useMemo17, useRef as useRef5 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo17, useRef as useRef5 } from "react";
 function usePolling({
   asyncFn,
   delay,
@@ -12350,7 +12357,7 @@ function usePolling({
     ),
     [asyncFn, maxAttempts, maxConsecutiveFails]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     if (delay > 0) {
       poll();
       const intervalReference = setInterval(() => {
@@ -12359,7 +12366,7 @@ function usePolling({
       return () => clearInterval(intervalReference);
     }
   }, [poll, delay]);
-  useEffect14(() => {
+  useEffect15(() => {
     onPollingResponseReference.current = onPollingResponse;
     onFailureReference.current = onFailure;
   }, [onPollingResponse, onFailure]);
@@ -12390,10 +12397,10 @@ function createPollingClosure(asyncFn, maxAttempts, maxConsecutiveFails, onPolli
 }
 
 // src/legacy/common/hooks/usePrevious/usePrevious.js
-import { useEffect as useEffect15, useRef as useRef6 } from "react";
+import { useEffect as useEffect16, useRef as useRef6 } from "react";
 var usePrevious = (value) => {
   const reference = useRef6();
-  useEffect15(() => {
+  useEffect16(() => {
     reference.current = value;
   }, [value]);
   return reference.current;
@@ -12487,10 +12494,10 @@ var LayoutStep = (props) => {
 var LayoutStep_default = LayoutStep;
 
 // src/legacy/step/cameraStep/CameraStep.tsx
-import { useEffect as useEffect20, useState as useState23 } from "react";
+import { useEffect as useEffect21, useState as useState23 } from "react";
 
 // src/common/cameraCapture/CameraCapture.tsx
-import { useCallback as useCallback10, useEffect as useEffect19, useMemo as useMemo19, useRef as useRef8, useState as useState22 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo19, useRef as useRef8, useState as useState22 } from "react";
 import { useIntl as useIntl20 } from "react-intl";
 import Webcam from "react-webcam";
 
@@ -12635,7 +12642,7 @@ function OrientationLockOverlay() {
 var OrientationLockOverlay_default = OrientationLockOverlay;
 
 // src/common/cameraCapture/hooks/useFullScreenOrientationLock.ts
-import { useCallback as useCallback9, useEffect as useEffect16 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect17 } from "react";
 import screenfull from "screenfull";
 
 // src/common/cameraCapture/utils/index.ts
@@ -12752,7 +12759,7 @@ var useFullScreenOrientationLock = (shouldLockOrientation, onEvent) => {
     },
     [onEvent]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     var _a, _b;
     if (shouldLockOrientation) {
       (_b = (_a = window.screen) == null ? void 0 : _a.orientation) == null ? void 0 : _b.addEventListener(
@@ -12775,10 +12782,10 @@ var noop5 = () => {
 };
 
 // src/common/cameraCapture/hooks/useVideoConstraints.ts
-import { useEffect as useEffect17, useState as useState21 } from "react";
+import { useEffect as useEffect18, useState as useState21 } from "react";
 var useVideoConstraints = (direction) => {
   const [videoConstraints, setVideoConstraints] = useState21();
-  useEffect17(() => {
+  useEffect18(() => {
     void getVideoConstraints(direction).then(setVideoConstraints);
   }, [direction]);
   return { videoConstraints };
@@ -12803,7 +12810,7 @@ var getVideoConstraints = async (dir) => {
 };
 
 // src/common/cameraCapture/overlay/Overlay.tsx
-import { useEffect as useEffect18, useRef as useRef7 } from "react";
+import { useEffect as useEffect19, useRef as useRef7 } from "react";
 import { Fragment as Fragment16, jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
 var captureButtonHeight = 92;
 var reviewButtonsHeight = 120;
@@ -12814,7 +12821,7 @@ var reviewInstructionsHeight = 40;
 var overlayMaxWidth = 800;
 function Overlay({ overlay, outline, imageUrl, title, instructions, reviewInstructions }) {
   const svgReference = useRef7(null);
-  useEffect18(() => {
+  useEffect19(() => {
     const listener = debounce2(() => {
       var _a;
       if ((_a = svgReference.current) == null ? void 0 : _a.innerHTML) {
@@ -12983,7 +12990,7 @@ function CameraCapture({
     setReviewImage(void 0);
   };
   const handleRetryCameraAccess = () => setMode("CAPTURE" /* CAPTURE */);
-  useEffect19(() => {
+  useEffect20(() => {
     if (mode !== "CAPTURE" /* CAPTURE */) {
       exitFullScreen();
     }
@@ -13062,7 +13069,7 @@ function CameraStep(props) {
   const { overlay, outline } = assets || {};
   const { url: imageUrl } = image || {};
   const [captureClicked, setCaptureClicked] = useState23(false);
-  useEffect20(() => {
+  useEffect21(() => {
     if (captureClicked) {
       onAction(action);
     }
@@ -13669,10 +13676,10 @@ var DynamicFlowComponent = ({
     },
     [onCompletion, dispatchEvent]
   );
-  useEffect21(() => {
+  useEffect22(() => {
     dispatchEvent("Dynamic Flow - Flow Started", {});
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!initialStep) {
       const action = __spreadValues({
         id: "#initial-step-request",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",