@wise/dynamic-flow-client-internal 4.7.0-experimental-33a9fbb → 4.7.1

package/build/i18n/cs.json

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

package/build/{index.js → main.js}

@@ -665,7 +665,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react14 = require("react");
+var import_react12 = require("react");
 var import_react_intl16 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
@@ -3162,33 +3162,52 @@ var getWiseRenderers = () => [
   StepRenderer
 ];
 
-// src/dynamicFlow/filters/useFilteredOnEvent.ts
-var import_react12 = require("react");
-var import_components_theming2 = require("@wise/components-theming");
-var useFilteredOnEvent = (onEvent, onAnalytics, onThemeChange) => (0, import_react12.useMemo)(
-  () => (name, properties) => {
-    onEvent == null ? void 0 : onEvent(name, properties);
-    if (name.includes(ThemeRequiredEventName)) {
-      const { theme } = properties != null ? properties : { theme: "personal" };
-      if (theme && (0, import_components_theming2.isThemeModern)(theme)) {
-        onThemeChange == null ? void 0 : onThemeChange(theme);
-      }
+// src/dynamicFlow/telemetry/app-version.ts
+var appVersion = "4.7.1";
+
+// src/dynamicFlow/telemetry/getLogEvent.ts
+var getLogEvent = (onLog) => (level, message, extra) => {
+  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
+    dfWiseVersion: appVersion
+  });
+  if (level !== "info" && onLog) {
+    if (onLog) {
+      onLog(level, message, extraWithVersion);
     } else {
-      onAnalytics == null ? void 0 : onAnalytics(name, properties);
+      logToRollbar(level, message, extraWithVersion);
     }
-  },
-  [onEvent, onAnalytics, onThemeChange]
-);
+  }
+};
+var logToRollbar = (level, message, extra) => {
+  try {
+    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
+    rollbar == null ? void 0 : rollbar[level](message, extra);
+  } catch (error) {
+    console.error("Failed to log to Rollbar", error);
+  }
+};
 
-// src/dynamicFlow/filters/useFilteredOnLog.ts
-var import_react13 = require("react");
-var useFilteredOnLog = (onLog) => (0, import_react13.useMemo)(() => {
-  return (level, message, extra) => {
-    if (level !== "info") {
-      onLog == null ? void 0 : onLog(level, message, extra);
+// src/dynamicFlow/telemetry/getTrackEvent.ts
+var import_components_theming2 = require("@wise/components-theming");
+var getTrackEvent = (onEvent, onAnalytics, onThemeChange, onLog) => (name, properties) => {
+  onEvent == null ? void 0 : onEvent(name, properties);
+  if (name.includes(ThemeRequiredEventName)) {
+    const { theme } = properties != null ? properties : { theme: "personal" };
+    if (theme && (0, import_components_theming2.isThemeModern)(theme)) {
+      onThemeChange == null ? void 0 : onThemeChange(theme);
     }
-  };
-}, [onLog]);
+  } else {
+    onAnalytics == null ? void 0 : onAnalytics(name, properties);
+  }
+  if (name !== "DynamicFlow - Initiated") {
+    if ((properties == null ? void 0 : properties.stepId) === void 0) {
+      onLog == null ? void 0 : onLog("warning", "DynamicFlow warning. `stepId` is not defined in the event properties", {
+        eventName: name,
+        properties: Object.keys(properties != null ? properties : {})
+      });
+    }
+  }
+};
 
 // src/dynamicFlow/DynamicFlow.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -3209,19 +3228,22 @@ function DynamicFlowRevamp(props) {
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react14.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const filteredOnLog = useFilteredOnLog(onLog);
-  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
+  const mergedRenderers = (0, import_react12.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react12.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react12.useMemo)(
+    () => getTrackEvent(onEvent, onAnalytics, onThemeChange, logEvent),
+    [onEvent, onAnalytics, onThemeChange, logEvent]
+  );
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
-    onEvent: filteredOnEvent,
-    onLink,
-    onLog: filteredOnLog
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink
   });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
-var DynamicForm = (0, import_react14.forwardRef)(function DynamicForm2(props, ref) {
+var DynamicForm = (0, import_react12.forwardRef)(function DynamicForm2(props, ref) {
   const {
     customFetch = globalThis.fetch,
     renderers,
@@ -3232,21 +3254,24 @@ var DynamicForm = (0, import_react14.forwardRef)(function DynamicForm2(props, re
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react14.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
-  const filteredOnLog = useFilteredOnLog(onLog);
+  const mergedRenderers = (0, import_react12.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react12.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react12.useMemo)(
+    () => getTrackEvent(onEvent, onAnalytics, onThemeChange, logEvent),
+    [onEvent, onAnalytics, onThemeChange, logEvent]
+  );
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
-    onEvent: filteredOnEvent,
-    onLink,
-    onLog: filteredOnLog
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink
   });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl16.useIntl)();
-  return (0, import_react14.useCallback)(
+  return (0, import_react12.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);

package/build/{index.mjs → main.mjs}

@@ -627,7 +627,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { forwardRef, useCallback, useMemo as useMemo4 } from "react";
+import { forwardRef, useCallback, useMemo as useMemo2 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
 import {
   DynamicFlow as DynamicFlowCoreLegacy,
@@ -3138,33 +3138,52 @@ var getWiseRenderers = () => [
   StepRenderer
 ];
 
-// src/dynamicFlow/filters/useFilteredOnEvent.ts
-import { useMemo as useMemo2 } from "react";
-import { isThemeModern } from "@wise/components-theming";
-var useFilteredOnEvent = (onEvent, onAnalytics, onThemeChange) => useMemo2(
-  () => (name, properties) => {
-    onEvent == null ? void 0 : onEvent(name, properties);
-    if (name.includes(ThemeRequiredEventName)) {
-      const { theme } = properties != null ? properties : { theme: "personal" };
-      if (theme && isThemeModern(theme)) {
-        onThemeChange == null ? void 0 : onThemeChange(theme);
-      }
+// src/dynamicFlow/telemetry/app-version.ts
+var appVersion = "4.7.1";
+
+// src/dynamicFlow/telemetry/getLogEvent.ts
+var getLogEvent = (onLog) => (level, message, extra) => {
+  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
+    dfWiseVersion: appVersion
+  });
+  if (level !== "info" && onLog) {
+    if (onLog) {
+      onLog(level, message, extraWithVersion);
     } else {
-      onAnalytics == null ? void 0 : onAnalytics(name, properties);
+      logToRollbar(level, message, extraWithVersion);
     }
-  },
-  [onEvent, onAnalytics, onThemeChange]
-);
+  }
+};
+var logToRollbar = (level, message, extra) => {
+  try {
+    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
+    rollbar == null ? void 0 : rollbar[level](message, extra);
+  } catch (error) {
+    console.error("Failed to log to Rollbar", error);
+  }
+};
 
-// src/dynamicFlow/filters/useFilteredOnLog.ts
-import { useMemo as useMemo3 } from "react";
-var useFilteredOnLog = (onLog) => useMemo3(() => {
-  return (level, message, extra) => {
-    if (level !== "info") {
-      onLog == null ? void 0 : onLog(level, message, extra);
+// src/dynamicFlow/telemetry/getTrackEvent.ts
+import { isThemeModern } from "@wise/components-theming";
+var getTrackEvent = (onEvent, onAnalytics, onThemeChange, onLog) => (name, properties) => {
+  onEvent == null ? void 0 : onEvent(name, properties);
+  if (name.includes(ThemeRequiredEventName)) {
+    const { theme } = properties != null ? properties : { theme: "personal" };
+    if (theme && isThemeModern(theme)) {
+      onThemeChange == null ? void 0 : onThemeChange(theme);
     }
-  };
-}, [onLog]);
+  } else {
+    onAnalytics == null ? void 0 : onAnalytics(name, properties);
+  }
+  if (name !== "DynamicFlow - Initiated") {
+    if ((properties == null ? void 0 : properties.stepId) === void 0) {
+      onLog == null ? void 0 : onLog("warning", "DynamicFlow warning. `stepId` is not defined in the event properties", {
+        eventName: name,
+        properties: Object.keys(properties != null ? properties : {})
+      });
+    }
+  }
+};
 
 // src/dynamicFlow/DynamicFlow.tsx
 import { jsx as jsx57 } from "react/jsx-runtime";
@@ -3185,15 +3204,18 @@ function DynamicFlowRevamp(props) {
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo4(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const filteredOnLog = useFilteredOnLog(onLog);
-  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
+  const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = useMemo2(
+    () => getTrackEvent(onEvent, onAnalytics, onThemeChange, logEvent),
+    [onEvent, onAnalytics, onThemeChange, logEvent]
+  );
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
-    onEvent: filteredOnEvent,
-    onLink,
-    onLog: filteredOnLog
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink
   });
   return /* @__PURE__ */ jsx57(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
@@ -3208,15 +3230,18 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = useMemo4(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const filteredOnEvent = useFilteredOnEvent(onEvent, onAnalytics, onThemeChange);
-  const filteredOnLog = useFilteredOnLog(onLog);
+  const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = useMemo2(
+    () => getTrackEvent(onEvent, onAnalytics, onThemeChange, logEvent),
+    [onEvent, onAnalytics, onThemeChange, logEvent]
+  );
   const coreProps = __spreadProps(__spreadValues({}, props), {
     httpClient,
     renderers: mergedRenderers,
-    onEvent: filteredOnEvent,
-    onLink,
-    onLog: filteredOnLog
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink
   });
   return /* @__PURE__ */ jsx57(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
 });

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicFlowProps as DynamicFlowCoreLegacyProps, DynamicFlowRevampProps as DynamicFlowCoreRevampProps, DynamicFlowRevampPropsWithInitialAction, DynamicFlowRevampPropsWithInitialStep, DynamicFormController, DynamicFlowLegacyPropsWithInitialAction, DynamicFlowLegacyPropsWithInitialStep } from '@wise/dynamic-flow-client';
+import type { DynamicFlowProps as DynamicFlowCoreLegacyProps, DynamicFlowRevampProps as DynamicFlowCoreRevampProps, DynamicFlowLegacyPropsWithInitialAction, DynamicFlowLegacyPropsWithInitialStep, DynamicFlowRevampPropsWithInitialAction, DynamicFlowRevampPropsWithInitialStep, DynamicFormController } from '@wise/dynamic-flow-client';
 import { Theming } from '@wise/components-theming';
 /**
  * @deprecated Use DynamicFlowRevampProps instead. See https://transferwise.atlassian.net/wiki/x/B0FJwg

package/build/types/dynamicFlow/telemetry/app-version.d.ts

@@ -0,0 +1 @@
+export declare const appVersion: string;

package/build/types/dynamicFlow/telemetry/getLogEvent.d.ts

@@ -0,0 +1,14 @@
+import { DynamicFlowRevampProps } from '@wise/dynamic-flow-client';
+declare global {
+    interface Window {
+        Rollbar?: Rollbar;
+    }
+}
+type Rollbar = {
+    info: (message: Error | string, extra: unknown) => void;
+    warning: (message: Error | string, extra: unknown) => void;
+    error: (message: Error | string, extra: unknown) => void;
+};
+type OnLog = DynamicFlowRevampProps['onLog'];
+export declare const getLogEvent: (onLog: OnLog) => OnLog;
+export {};

package/build/types/dynamicFlow/telemetry/getTrackEvent.d.ts

@@ -0,0 +1,6 @@
+import { DynamicFlowRevampProps } from '@wise/dynamic-flow-client';
+import { OnThemeChange } from '../DynamicFlow';
+type OnEvent = DynamicFlowRevampProps['onEvent'];
+type OnLog = DynamicFlowRevampProps['onLog'];
+export declare const getTrackEvent: (onEvent: OnEvent, onAnalytics: OnEvent, onThemeChange: OnThemeChange | undefined, onLog: OnLog) => OnEvent;
+export {};

package/build/types/dynamicFlow/telemetry/index.d.ts

@@ -0,0 +1,2 @@
+export { getLogEvent } from './getLogEvent';
+export { getTrackEvent } from './getTrackEvent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.7.0-experimental-33a9fbb",
+  "version": "4.7.1",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -13,15 +13,10 @@
   "exports": {
     ".": {
       "types": "./build/types/index.d.ts",
-      "import": "./build/index.mjs",
-      "require": "./build/index.js"
+      "import": "./build/main.mjs",
+      "require": "./build/main.js"
     },
-    "./build/main.css": "./build/main.css",
-    "./renderers": {
-      "types": "./build/types/renderers.d.ts",
-      "import": "./build/renderers.mjs",
-      "require": "./build/renderers.js"
-    }
+    "./build/main.css": "./build/main.css"
   },
   "sideEffects": [
     "*.css"
@@ -40,18 +35,18 @@
     "@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/react": "^8.6.8",
-    "@storybook/react-webpack5": "^8.6.8",
-    "@storybook/test": "^8.6.8",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-webpack5": "^8.6.11",
+    "@storybook/test": "^8.6.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -79,17 +74,17 @@
     "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",
     "tsx": "4.19.3",
     "typescript": "5.8.2",
     "webpack": "5.98.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.1.2"
+    "@wise/dynamic-flow-types": "3.1.2",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -104,7 +99,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.3.2",
+    "@wise/dynamic-flow-client": "4.3.5",
     "@wise/dynamic-flow-types": "3.1.2"
   },
   "scripts": {