@wise/dynamic-flow-client-internal 4.7.0-experimental-5923da0 → 4.7.0

package/build/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.0";
+
+// 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/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.0";
+
+// 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-5923da0",
+  "version": "4.7.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -16,12 +16,7 @@
       "import": "./build/main.mjs",
       "require": "./build/main.js"
     },
-    "./build/main.css": "./build/main.css",
-    "./build/renderers": {
-      "types": "./build/types/renderers.d.ts",
-      "import": "./build/renderers/index.mjs",
-      "require": "./build/renderers/index.js"
-    }
+    "./build/main.css": "./build/main.css"
   },
   "sideEffects": [
     "*.css"
@@ -105,7 +100,7 @@
   "dependencies": {
     "classnames": "2.5.1",
     "@wise/dynamic-flow-types": "3.1.2",
-    "@wise/dynamic-flow-client": "4.3.2"
+    "@wise/dynamic-flow-client": "4.3.4"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",