@wise/dynamic-flow-client 4.3.3 → 4.3.5

package/build/i18n/cs.json

@@ -1,6 +1,6 @@
 {
   "dynamicFlows.ArraySchema.addItem": "Uložit",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "Přidat položku",
   "dynamicFlows.ArraySchema.editItem": "Uložit",
   "dynamicFlows.ArraySchema.maxItemsError": "Přidejte {maxItems} nebo méně.",
   "dynamicFlows.ArraySchema.minItemsError": "Přidejte alespoň {minItems}.",
@@ -34,11 +34,11 @@
   "dynamicFlows.ErrorBoundary.errorAlert": "Něco se pokazilo.",
   "dynamicFlows.ErrorBoundary.retry": "Zkusit znovu",
   "dynamicFlows.ExternalConfirmation.cancel": "Zrušit",
-  "dynamicFlows.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
-  "dynamicFlows.ExternalConfirmation.open": "Open in new tab",
-  "dynamicFlows.ExternalConfirmation.title": "Please confirm",
+  "dynamicFlows.ExternalConfirmation.description": "Potvrďte, že chcete otevřít **{origin}** v nové kartě prohlížeče.",
+  "dynamicFlows.ExternalConfirmation.open": "Otevřít v nové kartě",
+  "dynamicFlows.ExternalConfirmation.title": "Potvrďte",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Pardon, tento soubor je příliš velký. Nahrajte prosím menší soubor.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Je nám líto, tento formát souboru není podporován. Nahrajte jiný soubor.",
   "dynamicFlows.Help.ariaLabel": "Pro více informací klikněte sem.",
   "dynamicFlows.MultiSelect.summary": "{first} a {count} více",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Pardon, tento soubor je příliš velký. Nahrajte prosím menší soubor.",

package/build/main.js

@@ -6090,9 +6090,14 @@ var executePoll = async (props) => {
   }
 };
 
+// src/revamp/flow/getErrorMessage.ts
+var getErrorMessage = (error) => {
+  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
+};
+
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
-  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent } = props;
+  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent, logEvent } = props;
   trackEvent("Refresh Triggered", { schema: schemaId });
   try {
     const response = await httpClient(url != null ? url : "", {
@@ -6114,6 +6119,7 @@ var executeRefresh = async (props) => {
         schema: schemaId,
         statusCode: response.status
       }));
+      logEvent("error", "Dynamic Flow - Refresh Failed", { schemaId, statusCode: response.status });
       return { type: "error", body: body2, statusCode: response.status };
     }
     const newEtag = response.headers.get("etag") || null;
@@ -6127,13 +6133,17 @@ var executeRefresh = async (props) => {
       return { type: "noop" };
     }
     trackEvent("Refresh Failed", { schema: schemaId });
+    logEvent("error", "Dynamic Flow - Refresh Failed", {
+      schemaId,
+      errorMessage: getErrorMessage(error)
+    });
     return { type: "error", body: {} };
   }
 };
 
 // src/revamp/flow/executeSubmission.ts
 var executeSubmission = async (props) => {
-  const { httpClient, trackEvent } = props;
+  const { httpClient, trackEvent, logEvent } = props;
   const triggerAction = async (action, model, isInitial) => {
     const { exit, url, method = "POST", result = null, id: actionId } = action;
     const trackSubmissionEvent = !isInitial ? trackEvent : () => {
@@ -6157,7 +6167,9 @@ var executeSubmission = async (props) => {
       headers: { "Content-Type": "application/json" }
     });
     if (!response) {
-      trackEvent("Action Failed", { actionId });
+      const extra = { actionId, errorMessage: "Network Error" };
+      trackEvent("Action Failed", extra);
+      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
       return { type: "error", body: {} };
     }
     if (!response.ok) {
@@ -6190,7 +6202,9 @@ var executeSubmission = async (props) => {
         }
       }
     } catch (error) {
-      trackSubmissionEvent("Action Failed", { actionId });
+      const errorMessage = getErrorMessage(error);
+      trackSubmissionEvent("Action Failed", { actionId, errorMessage });
+      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", { actionId, errorMessage });
       throw error;
     }
   };
@@ -6507,18 +6521,12 @@ function useDynamicFlowCore(props) {
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
-  const [rootComponent, setRootComponent] = (0, import_react3.useState)(
-    createRootDomainComponent()
-  );
-  const rootComponentRef = (0, import_react3.useRef)(rootComponent);
+  const rerender = useRerender();
+  const rootComponentRef = (0, import_react3.useRef)(createRootDomainComponent());
   const updateComponent = (0, import_react3.useCallback)(
     (id, update) => {
       update(findComponent([rootComponentRef.current], id, logEvent));
-      setRootComponent(() => {
-        const newRootDomainComponent = __spreadValues({}, rootComponentRef.current);
-        rootComponentRef.current = newRootDomainComponent;
-        return newRootDomainComponent;
-      });
+      rerender();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -6541,6 +6549,9 @@ function useDynamicFlowCore(props) {
       createStep(initialStep, null);
       trackCoreEvent("Step Shown", { isFirstStep: true });
     }
+    return () => {
+      rootComponentRef.current.stop();
+    };
   }, []);
   const createStep = (0, import_react3.useCallback)((newStep, etag) => {
     if (rootComponentRef.current.hasStep()) {
@@ -6626,6 +6637,7 @@ function useDynamicFlowCore(props) {
     (error, analytics, statusCode) => {
       rootComponentRef.current.stop();
       trackCoreEvent("Failed", __spreadValues({}, analytics));
+      logEvent("error", "Dynamic Flow failed", { errorMessage: getErrorMessage(error), analytics });
       onError(error, statusCode);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -6641,7 +6653,8 @@ function useDynamicFlowCore(props) {
         model,
         isInitial: stepRef.current === null,
         httpClient,
-        trackEvent: trackCoreEvent
+        trackEvent: trackCoreEvent,
+        logEvent
       });
       switch (command.type) {
         case "complete": {
@@ -6675,7 +6688,13 @@ function useDynamicFlowCore(props) {
               etagRef.current
             );
           } else {
-            closeWithError(new Error("Initial request failed"), {}, command.statusCode);
+            closeWithError(
+              new Error("Initial request failed", {
+                cause: `method: ${action.method}, url: ${action.url}`
+              }),
+              {},
+              command.statusCode
+            );
           }
           break;
         }
@@ -6702,7 +6721,8 @@ function useDynamicFlowCore(props) {
           schemaId,
           etag: etagRef.current,
           httpClient,
-          trackEvent: trackCoreEvent
+          trackEvent: trackCoreEvent,
+          logEvent
         });
         switch (command.type) {
           case "refresh-step":
@@ -6758,13 +6778,17 @@ function useDynamicFlowCore(props) {
   );
   return { rootComponent: rootComponentRef.current };
 }
+var useRerender = () => {
+  const [, setState] = (0, import_react3.useState)({});
+  return (0, import_react3.useCallback)(() => setState({}), []);
+};
 
 // src/revamp/DynamicFlowCore.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function DynamicFlowCore(props) {
   var _a;
   const { rootComponent } = useDynamicFlowCore(props);
-  const { renderers, httpClient, onEvent, onError } = props;
+  const { renderers, httpClient, onEvent, onError, onLog } = props;
   const render = (0, import_react4.useMemo)(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -6776,17 +6800,13 @@ function DynamicFlowCore(props) {
     },
     stepLoadingState: rootComponent.getLoadingState()
   });
-  (0, import_react4.useEffect)(() => {
-    return () => {
-      rootComponent.stop();
-    };
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ErrorBoundary_default,
     {
       onError: (error) => {
         onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
         onError == null ? void 0 : onError(error);
+        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
       },
       children: render(tree)
     }

package/build/main.mjs

@@ -925,7 +925,7 @@ var translations = {
 var i18n_default = translations;
 
 // src/revamp/DynamicFlowCore.tsx
-import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/common/errorBoundary/ErrorBoundary.tsx
 import { Component } from "react";
@@ -6047,9 +6047,14 @@ var executePoll = async (props) => {
   }
 };
 
+// src/revamp/flow/getErrorMessage.ts
+var getErrorMessage = (error) => {
+  return error instanceof Error ? error.message : typeof error === "string" ? error : `Unknown Error: type is ${typeof error}`;
+};
+
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
-  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent } = props;
+  const { abortSignal, url, model, schemaId, etag, httpClient, trackEvent, logEvent } = props;
   trackEvent("Refresh Triggered", { schema: schemaId });
   try {
     const response = await httpClient(url != null ? url : "", {
@@ -6071,6 +6076,7 @@ var executeRefresh = async (props) => {
         schema: schemaId,
         statusCode: response.status
       }));
+      logEvent("error", "Dynamic Flow - Refresh Failed", { schemaId, statusCode: response.status });
       return { type: "error", body: body2, statusCode: response.status };
     }
     const newEtag = response.headers.get("etag") || null;
@@ -6084,13 +6090,17 @@ var executeRefresh = async (props) => {
       return { type: "noop" };
     }
     trackEvent("Refresh Failed", { schema: schemaId });
+    logEvent("error", "Dynamic Flow - Refresh Failed", {
+      schemaId,
+      errorMessage: getErrorMessage(error)
+    });
     return { type: "error", body: {} };
   }
 };
 
 // src/revamp/flow/executeSubmission.ts
 var executeSubmission = async (props) => {
-  const { httpClient, trackEvent } = props;
+  const { httpClient, trackEvent, logEvent } = props;
   const triggerAction = async (action, model, isInitial) => {
     const { exit, url, method = "POST", result = null, id: actionId } = action;
     const trackSubmissionEvent = !isInitial ? trackEvent : () => {
@@ -6114,7 +6124,9 @@ var executeSubmission = async (props) => {
       headers: { "Content-Type": "application/json" }
     });
     if (!response) {
-      trackEvent("Action Failed", { actionId });
+      const extra = { actionId, errorMessage: "Network Error" };
+      trackEvent("Action Failed", extra);
+      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
       return { type: "error", body: {} };
     }
     if (!response.ok) {
@@ -6147,7 +6159,9 @@ var executeSubmission = async (props) => {
         }
       }
     } catch (error) {
-      trackSubmissionEvent("Action Failed", { actionId });
+      const errorMessage = getErrorMessage(error);
+      trackSubmissionEvent("Action Failed", { actionId, errorMessage });
+      logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", { actionId, errorMessage });
       throw error;
     }
   };
@@ -6464,18 +6478,12 @@ function useDynamicFlowCore(props) {
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
-  const [rootComponent, setRootComponent] = useState(
-    createRootDomainComponent()
-  );
-  const rootComponentRef = useRef2(rootComponent);
+  const rerender = useRerender();
+  const rootComponentRef = useRef2(createRootDomainComponent());
   const updateComponent = useCallback2(
     (id, update) => {
       update(findComponent([rootComponentRef.current], id, logEvent));
-      setRootComponent(() => {
-        const newRootDomainComponent = __spreadValues({}, rootComponentRef.current);
-        rootComponentRef.current = newRootDomainComponent;
-        return newRootDomainComponent;
-      });
+      rerender();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -6498,6 +6506,9 @@ function useDynamicFlowCore(props) {
       createStep(initialStep, null);
       trackCoreEvent("Step Shown", { isFirstStep: true });
     }
+    return () => {
+      rootComponentRef.current.stop();
+    };
   }, []);
   const createStep = useCallback2((newStep, etag) => {
     if (rootComponentRef.current.hasStep()) {
@@ -6583,6 +6594,7 @@ function useDynamicFlowCore(props) {
     (error, analytics, statusCode) => {
       rootComponentRef.current.stop();
       trackCoreEvent("Failed", __spreadValues({}, analytics));
+      logEvent("error", "Dynamic Flow failed", { errorMessage: getErrorMessage(error), analytics });
       onError(error, statusCode);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -6598,7 +6610,8 @@ function useDynamicFlowCore(props) {
         model,
         isInitial: stepRef.current === null,
         httpClient,
-        trackEvent: trackCoreEvent
+        trackEvent: trackCoreEvent,
+        logEvent
       });
       switch (command.type) {
         case "complete": {
@@ -6632,7 +6645,13 @@ function useDynamicFlowCore(props) {
               etagRef.current
             );
           } else {
-            closeWithError(new Error("Initial request failed"), {}, command.statusCode);
+            closeWithError(
+              new Error("Initial request failed", {
+                cause: `method: ${action.method}, url: ${action.url}`
+              }),
+              {},
+              command.statusCode
+            );
           }
           break;
         }
@@ -6659,7 +6678,8 @@ function useDynamicFlowCore(props) {
           schemaId,
           etag: etagRef.current,
           httpClient,
-          trackEvent: trackCoreEvent
+          trackEvent: trackCoreEvent,
+          logEvent
         });
         switch (command.type) {
           case "refresh-step":
@@ -6715,13 +6735,17 @@ function useDynamicFlowCore(props) {
   );
   return { rootComponent: rootComponentRef.current };
 }
+var useRerender = () => {
+  const [, setState] = useState({});
+  return useCallback2(() => setState({}), []);
+};
 
 // src/revamp/DynamicFlowCore.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 function DynamicFlowCore(props) {
   var _a;
   const { rootComponent } = useDynamicFlowCore(props);
-  const { renderers, httpClient, onEvent, onError } = props;
+  const { renderers, httpClient, onEvent, onError, onLog } = props;
   const render = useMemo2(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -6733,17 +6757,13 @@ function DynamicFlowCore(props) {
     },
     stepLoadingState: rootComponent.getLoadingState()
   });
-  useEffect2(() => {
-    return () => {
-      rootComponent.stop();
-    };
-  }, []);
   return /* @__PURE__ */ jsx6(
     ErrorBoundary_default,
     {
       onError: (error) => {
         onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
         onError == null ? void 0 : onError(error);
+        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
       },
       children: render(tree)
     }

package/build/types/revamp/flow/executeRefresh.d.ts

@@ -1,5 +1,5 @@
 import type { Model, Step, ErrorResponseBody } from '@wise/dynamic-flow-types/build/next';
-import type { AnalyticsEventDispatcher } from '../domain/features/events';
+import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../domain/features/events';
 type Command = {
     type: 'refresh-step';
     step: Step;
@@ -19,5 +19,6 @@ export declare const executeRefresh: (props: {
     etag: string | null;
     httpClient: typeof fetch;
     trackEvent: AnalyticsEventDispatcher;
+    logEvent: LoggingEventDispatcher;
 }) => Promise<Command>;
 export {};

package/build/types/revamp/flow/executeSubmission.d.ts

@@ -1,5 +1,5 @@
 import type { Action, ErrorResponseBody, Model, Step } from '@wise/dynamic-flow-types/build/next';
-import type { AnalyticsEventDispatcher } from '../domain/features/events';
+import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../domain/features/events';
 type Command = {
     type: 'complete';
     result: Model;
@@ -27,5 +27,6 @@ export declare const executeSubmission: (props: {
     isInitial: boolean;
     httpClient: typeof fetch;
     trackEvent: AnalyticsEventDispatcher;
+    logEvent: LoggingEventDispatcher;
 }) => Promise<Command>;
 export {};

package/build/types/revamp/flow/getErrorMessage.d.ts

@@ -0,0 +1 @@
+export declare const getErrorMessage: (error: unknown) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -35,20 +35,20 @@
     "@babel/plugin-transform-react-jsx": "7.25.9",
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
-    "@babel/preset-typescript": "7.26.0",
+    "@babel/preset-typescript": "7.27.0",
     "@chromatic-com/storybook": "3.2.6",
-    "@formatjs/cli": "^6.6.2",
-    "@storybook/addon-a11y": "^8.6.8",
-    "@storybook/addon-actions": "^8.6.8",
-    "@storybook/addon-essentials": "^8.6.8",
-    "@storybook/addon-interactions": "^8.6.8",
-    "@storybook/addon-links": "^8.6.8",
+    "@formatjs/cli": "^6.6.3",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-actions": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/manager-api": "^8.6.8",
-    "@storybook/react": "^8.6.8",
-    "@storybook/react-webpack5": "^8.6.8",
-    "@storybook/test": "^8.6.8",
-    "@storybook/types": "^8.6.8",
+    "@storybook/manager-api": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-webpack5": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/types": "^8.6.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -57,7 +57,7 @@
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.19.1",
     "@transferwise/neptune-css": "14.23.0",
-    "@types/node": "22.13.12",
+    "@types/node": "22.13.14",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
@@ -77,8 +77,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.6.8",
-    "stylelint": "16.16.0",
+    "storybook": "^8.6.11",
+    "stylelint": "16.17.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",