@wise/dynamic-flow-client 3.19.6 → 3.20.0

package/build/main.mjs

@@ -6990,25 +6990,89 @@ var getActionByReference = ($ref, actions = []) => {
 };
 
 // src/revamp/domain/mappers/layout/buttonLayoutToComponent.ts
-var buttonLayoutToComponent = (uid, button, { onAction, step }) => {
+var buttonLayoutToComponent = (uid, button, mapperProps) => {
+  if (button.behavior) {
+    return buttonLayoutToComponentWithBehavior(
+      uid,
+      __spreadProps(__spreadValues({}, button), { behavior: button.behavior }),
+      mapperProps
+    );
+  }
+  if (button.action) {
+    return buttonLayoutToComponentWithAction(
+      uid,
+      __spreadProps(__spreadValues({}, button), { action: button.action }),
+      mapperProps
+    );
+  }
+  return buttonLayoutToComponentWithNoop(uid, button);
+};
+var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
+  const { onAction, onLink, step } = mapperProps;
+  const { context, control, disabled, margin = "md", pinOrder, size, title, behavior } = button;
+  const { action, link } = behavior;
+  const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : null;
+  const onClick = (() => {
+    if (inlinedAction) {
+      return () => {
+        void onAction(inlinedAction);
+      };
+    }
+    if (link) {
+      return () => {
+        onLink(link.url);
+      };
+    }
+    return () => {
+    };
+  })();
+  return createButtonComponent({
+    uid,
+    context: mapLegacyContext(context != null ? context : "neutral"),
+    control,
+    disabled: disabled != null ? disabled : false,
+    margin,
+    pinOrder,
+    size,
+    title: title != null ? title : "",
+    onClick
+  });
+};
+var buttonLayoutToComponentWithAction = (uid, button, mapperProps) => {
+  const { onAction, step } = mapperProps;
   const { context, control, disabled, margin = "md", pinOrder, size, title } = button;
-  const action = button.action ? inlineAction(button.action, step == null ? void 0 : step.actions) : {};
-  const onClick = button.action ? () => {
-    void onAction(action);
-  } : () => {
+  const { action } = button;
+  const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : {};
+  const onClick = () => {
+    void onAction(inlinedAction);
   };
   return createButtonComponent({
     uid,
-    context: getButtonContext({ context, action }),
-    control: getButtonControl({ control, action }),
-    disabled: getButtonDisabled({ disabled, action }),
+    context: getButtonContext({ context, action: inlinedAction }),
+    control: getButtonControl({ control, action: inlinedAction }),
+    disabled: getButtonDisabled({ disabled, action: inlinedAction }),
     margin,
     pinOrder,
     size,
-    title: getButtonTitle({ title, action }),
+    title: getButtonTitle({ title, action: inlinedAction }),
     onClick
   });
 };
+var buttonLayoutToComponentWithNoop = (uid, button) => {
+  const { context, control, disabled, margin = "md", pinOrder, size, title } = button;
+  return createButtonComponent({
+    uid,
+    context: mapLegacyContext(context != null ? context : "neutral"),
+    control,
+    disabled: disabled != null ? disabled : false,
+    margin,
+    pinOrder,
+    size,
+    title: title != null ? title : "",
+    onClick: () => {
+    }
+  });
+};
 var getButtonTitle = ({ title, action }) => {
   var _a;
   return (_a = title != null ? title : action == null ? void 0 : action.title) != null ? _a : "";
@@ -10707,6 +10771,7 @@ function useDynamicFlowCore(props) {
   const httpClient = useStableCallback(rest.httpClient);
   const onCompletion = useStableCallback(rest.onCompletion);
   const onValueChange = useStableCallback(props.onValueChange);
+  const onLink = useStableCallback(props.onLink);
   const onError = useStableCallback(rest.onError);
   const onEvent = useStableCallback(rest.onEvent);
   const onLog = useStableCallback(rest.onLog);
@@ -10770,6 +10835,7 @@ function useDynamicFlowCore(props) {
           onAction,
           onRefresh,
           onPoll,
+          onLink,
           onValueChange
         });
         setStepComponent(() => {
@@ -10948,14 +11014,7 @@ function DynamicFlowCore(props) {
         onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
         onError == null ? void 0 : onError(error);
       },
-      children: /* @__PURE__ */ jsx5(
-        "div",
-        {
-          id: (_b = (_a = stepComponentRef.current) == null ? void 0 : _a.step) == null ? void 0 : _b.id,
-          className: "dynamic-flow",
-          children: stepComponentRef.current ? render(stepComponentRef.current) : null
-        }
-      )
+      children: /* @__PURE__ */ jsx5("div", { id: (_b = (_a = stepComponentRef.current) == null ? void 0 : _a.step) == null ? void 0 : _b.id, className: "dynamic-flow", children: stepComponentRef.current ? render(stepComponentRef.current) : null })
     }
   );
 }
@@ -13021,13 +13080,24 @@ var getWiseRenderers = () => [
   StepRenderer
 ];
 
+// src/revamp/utils/openLinkInNewTab.tsx
+var openLinkInNewTab = (url) => {
+  var _a;
+  try {
+    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
+    return Boolean(w);
+  } catch (e) {
+    return false;
+  }
+};
+
 // src/revamp/DynamicFlowWise.tsx
 import { jsx as jsx58 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowWise(props) {
-  const { httpClient, renderers } = props;
+  const { httpClient, renderers, onLink = openLinkInNewTab } = props;
   const mergedRenderers = useMemo4(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  return /* @__PURE__ */ jsx58(RendererHttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx58(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers: mergedRenderers })) });
+  return /* @__PURE__ */ jsx58(RendererHttpClientProvider, { httpClient, children: /* @__PURE__ */ jsx58(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers: mergedRenderers, onLink })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 
@@ -13058,10 +13128,17 @@ var useHasHttpClientProvider = () => {
 import { jsx as jsx60 } from "react/jsx-runtime";
 var wiseRenderers2 = getWiseRenderers();
 var DynamicFragmentWise = forwardRef2(function DynamicFragmentWise2(props, ref) {
-  const { httpClient, onCompletion = () => {
-  }, onEvent, onError, renderers } = props;
+  const {
+    httpClient,
+    onCompletion = () => {
+    },
+    onEvent,
+    onError,
+    renderers,
+    onLink = openLinkInNewTab
+  } = props;
   const mergedRenderers = useMemo6(() => [...renderers != null ? renderers : [], ...wiseRenderers2], [renderers]);
-  const { stepComponentRef } = useDynamicFlowCore(__spreadValues({ onCompletion }, props));
+  const { stepComponentRef } = useDynamicFlowCore(__spreadProps(__spreadValues({ onCompletion }, props), { onLink }));
   useImperativeHandle(
     ref,
     () => ({
@@ -13099,8 +13176,8 @@ import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle2,
 import { jsx as jsx61 } from "react/jsx-runtime";
 var DynamicFragmentCore = forwardRef3(function DynamicFragmentCore2(props, ref) {
   const { onCompletion = () => {
-  }, onEvent, onError, renderers } = props;
-  const { stepComponentRef } = useDynamicFlowCore(__spreadValues({ onCompletion }, props));
+  }, onEvent, onError, onLink = openLinkInNewTab, renderers } = props;
+  const { stepComponentRef } = useDynamicFlowCore(__spreadProps(__spreadValues({ onCompletion }, props), { onLink }));
   useImperativeHandle2(
     ref,
     () => ({

package/build/types/revamp/domain/mappers/layout/buttonLayoutToComponent.d.ts

@@ -1,3 +1,6 @@
 import type { ButtonLayout } from '@wise/dynamic-flow-types/build/next';
+import type { Behavior } from '@wise/dynamic-flow-types/build/next/feature/Behavior';
 import type { MapperProps } from '../schema/types';
-export declare const buttonLayoutToComponent: (uid: string, button: ButtonLayout, { onAction, step }: MapperProps) => import("../../components/ButtonComponent").ButtonComponent;
+export declare const buttonLayoutToComponent: (uid: string, button: ButtonLayout & {
+    behavior?: Behavior;
+}, mapperProps: MapperProps) => import("../../components/ButtonComponent").ButtonComponent;

package/build/types/revamp/domain/mappers/schema/tests/test-utils.d.ts

@@ -6,6 +6,7 @@ export declare const getMockMapperProps: (mapperProps?: Partial<MapperProps>) =>
     step: Step;
     getErrorMessageFunctions: import("../../types").GetErrorMessageFunctions | jest.Mock<any, any, any>;
     httpClient: typeof fetch | jest.Mock<any, any, any>;
+    onLink: import("../../../types").OnLink | jest.Mock<any, any, any>;
     onAction: import("../../../types").OnAction | jest.Mock<any, any, any>;
     onRefresh: import("../../../types").OnRefresh | jest.Mock<any, any, any>;
     onValueChange: import("../../../types").OnValueChange | jest.Mock<any, any, any>;

package/build/types/revamp/domain/mappers/schema/types.d.ts

@@ -1,13 +1,14 @@
 import type { Step as DFStep, Model, Schema, ValidationError } from '@wise/dynamic-flow-types/build/next';
 import type { HttpClient } from '../../../types';
 import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../../features/events';
-import type { LocalValue, OnAction, OnRefresh, OnValueChange, UpdateComponent } from '../../types';
+import type { LocalValue, OnAction, OnLink, OnRefresh, OnValueChange, UpdateComponent } from '../../types';
 import type { GetErrorMessageFunctions, PersistAsyncConfig } from '../types';
 export type MapperProps = {
     stepLocalValue: LocalValue;
     step: DFStep;
     getErrorMessageFunctions: GetErrorMessageFunctions;
     httpClient: HttpClient;
+    onLink: OnLink;
     onAction: OnAction;
     onRefresh: OnRefresh;
     onValueChange: OnValueChange;

package/build/types/revamp/domain/types.d.ts

@@ -76,8 +76,9 @@ export type InputComponent<V extends LocalValue> = ComponentWithTitle & {
 };
 export type UpdateComponent = (id: string, update: (component: DomainComponent) => void) => void;
 export type OnAction = (action: Action) => Promise<void>;
-export type OnPoll = (url: string, errorAction: Action, signal: AbortSignal) => Promise<boolean>;
 export type OnRefresh = (schemaId: string | undefined, url?: string) => Promise<void> | void;
+export type OnPoll = (url: string, errorAction: Action, signal: AbortSignal) => Promise<boolean>;
+export type OnLink = (url: string) => boolean;
 export type OnValueChange = () => void;
 export type Align = 'start' | 'center' | 'end';
 export type Bias = 'none' | 'start' | 'end';

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

@@ -11,8 +11,8 @@ export type DynamicFlowCorePropsWithInitialStep = DynamicFlowCorePropsBasic & {
     initialStep: Step;
 };
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-export type DynamicFlowWisePropsWithInitialAction = MakeOptional<DynamicFlowCorePropsWithInitialAction, 'renderers'>;
-export type DynamicFlowWisePropsWithInitialStep = MakeOptional<DynamicFlowCorePropsWithInitialStep, 'renderers'>;
+export type DynamicFlowWisePropsWithInitialAction = MakeOptional<DynamicFlowCorePropsWithInitialAction, 'renderers' | 'onLink'>;
+export type DynamicFlowWisePropsWithInitialStep = MakeOptional<DynamicFlowCorePropsWithInitialStep, 'renderers' | 'onLink'>;
 export type DynamicFlowWiseProps = DynamicFlowWisePropsWithInitialAction | DynamicFlowWisePropsWithInitialStep;
 export type DynamicFragmentController = {
     /**
@@ -45,6 +45,7 @@ type DynamicFlowCorePropsBasic = {
     onError: (error: unknown, status?: number) => void;
     onEvent?: AnalyticsEventHandler;
     onLog?: LoggingEventHandler;
+    onLink: (url: string) => boolean;
 };
 export type HttpClient = typeof fetch;
 type Feature = {

package/build/types/revamp/useDynamicFlowCore.d.ts

@@ -3,6 +3,7 @@ import type { OnValueChange } from './domain/types';
 import type { DynamicFlowCoreProps } from './types';
 type UseDynamicFlowCoreProps = Omit<DynamicFlowCoreProps, 'renderers'> & {
     onValueChange?: OnValueChange;
+    onLink: (url: string) => boolean;
 };
 export declare function useDynamicFlowCore(props: UseDynamicFlowCoreProps): {
     stepComponentRef: import("react").MutableRefObject<StepDomainComponent | null>;

package/build/types/revamp/utils/openLinkInNewTab.d.ts

@@ -0,0 +1 @@
+export declare const openLinkInNewTab: (url: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.19.6",
+  "version": "3.20.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -52,12 +52,12 @@
     "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.70.2",
+    "@transferwise/components": "46.70.3",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
     "@transferwise/neptune-css": "14.18.0",
     "@types/enzyme": "^3.10.18",
-    "@types/jest": "29.5.12",
+    "@types/jest": "29.5.13",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@types/react-intl": "3.0.0",
@@ -71,8 +71,8 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "nanoid": "5.0.7",
-    "npm-run-all2": "6.2.2",
-    "postcss": "^8.4.45",
+    "npm-run-all2": "6.2.3",
+    "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
     "react": "18.3.1",
@@ -83,8 +83,8 @@
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.1",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.19.0",
-    "typescript": "5.5.4",
+    "tsx": "4.19.1",
+    "typescript": "5.6.2",
     "webpack": "5.94.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0"
@@ -104,7 +104,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.22.3"
+    "@wise/dynamic-flow-types": "2.22.4"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",