@wise/dynamic-flow-client 4.16.1 → 4.17.1

package/build/main.css

@@ -358,6 +358,21 @@ button.df-back-btn {
   display: flex;
   flex-direction: column;
 }
+.df-step-fixed__footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--size-8) 0;
+  background-color: var(--color-background-screen);
+}
+/* If we're in a drawer, we need to account for the bottom padding on the drawer content */
+.np-drawer-content .df-step-fixed__footer {
+  bottom: -16px;
+}
+.tw-modal-body--scrollable .df-step-fixed__footer {
+  bottom: -24px;
+}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -1322,6 +1322,9 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     onBehavior
   } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  const footerProps = component.footerComponents.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1337,6 +1340,8 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     title,
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps,
+    footer: footerProps.map(rendererMapperProps.render),
+    footerProps,
     onAction: (action) => {
       void onBehavior({ type: "action", action });
     }
@@ -2008,9 +2013,9 @@ var componentToRendererProps = (component, mapperProps) => {
   if (isHiddenComponent(component)) {
     return hiddenComponentToProps(component);
   }
-  const trackEventWithLayoutId = (eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
+  const trackEventWithLayoutId = ((eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
     layoutId: component.analyticsId
-  }, properties));
+  }, properties)));
   const rendererMapperProps = component.kind === "layout" ? __spreadProps(__spreadValues({}, mapperProps), { trackEvent: trackEventWithLayoutId }) : mapperProps;
   const componentProps = getComponentProps(component, rendererMapperProps);
   const alertProps = getComponentAlertProps(component, rendererMapperProps);
@@ -6213,12 +6218,63 @@ var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
   });
 };
 
+// src/revamp/domain/mappers/utils/groupLayoutByPinned.ts
+var groupLayoutByPinned = (layouts) => {
+  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
+};
+var groupLayout = (acc, layout) => {
+  if (layout.type === "button" && layout.pinOrder !== void 0) {
+    return {
+      pinned: [...acc.pinned, layout],
+      nonPinned: acc.nonPinned
+    };
+  }
+  if (hasColumns(layout)) {
+    const leftChildren = groupLayoutByPinned(layout.left);
+    const rightChildren = groupLayoutByPinned(layout.right);
+    return {
+      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          left: leftChildren.nonPinned,
+          right: rightChildren.nonPinned
+        })
+      ]
+    };
+  }
+  if (hasChildren(layout)) {
+    const childComponents = groupLayoutByPinned(layout.components);
+    return {
+      pinned: [...acc.pinned, ...childComponents.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          components: childComponents.nonPinned
+        })
+      ]
+    };
+  }
+  return {
+    pinned: [...acc.pinned],
+    nonPinned: [...acc.nonPinned, layout]
+  };
+};
+var hasChildren = (component) => "components" in component;
+var hasColumns = (component) => "right" in component && "left" in component;
+
+// src/revamp/domain/mappers/utils/feature-utils.ts
+var isFeatureEnabled = (features, featureName) => {
+  return features[featureName] !== void 0 && features[featureName] !== false;
+};
+
 // src/revamp/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
   var _b = _a, {
     uid: rootUid,
     loadingState,
     displayStepTitle,
+    features,
     trackEvent,
     onPoll,
     onBehavior
@@ -6226,6 +6282,7 @@ var mapStepToComponent = (_a) => {
     "uid",
     "loadingState",
     "displayStepTitle",
+    "features",
     "trackEvent",
     "onPoll",
     "onBehavior"
@@ -6272,9 +6329,26 @@ var mapStepToComponent = (_a) => {
     mapperProps,
     referencedSchemaIds
   );
-  const layoutComponents = layout.map(
+  const shouldPinButtons = isFeatureEnabled(features, "pinnedButtons");
+  const { pinned, nonPinned } = shouldPinButtons ? groupLayoutByPinned(layout) : { pinned: [], nonPinned: layout };
+  const layoutComponents = nonPinned.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
+  const footerComponents = pinned.map((footerComponent, index) => {
+    if (index === pinned.length - 1 && footerComponent.margin === void 0) {
+      return __spreadProps(__spreadValues({}, footerComponent), {
+        margin: "xs"
+      });
+    }
+    return footerComponent;
+  }).map(
+    (footerComponent, index) => mapLayoutToComponent(
+      `${uid}.footer-${index}`,
+      footerComponent,
+      mapperProps,
+      schemaComponents
+    )
+  );
   const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
     uid,
@@ -6282,6 +6356,7 @@ var mapStepToComponent = (_a) => {
     toolbar,
     layoutComponents,
     schemaComponents,
+    footerComponents,
     control,
     description,
     error: errors == null ? void 0 : errors.error,
@@ -6765,7 +6840,19 @@ function useStableCallback(handler) {
 
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
-  const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
+  const _a = props, {
+    flowId,
+    initialAction,
+    initialStep,
+    displayStepTitle = true,
+    features = {}
+  } = _a, rest = __objRest(_a, [
+    "flowId",
+    "initialAction",
+    "initialStep",
+    "displayStepTitle",
+    "features"
+  ]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCompletion = useStableCallback(rest.onCompletion);
   const onCopy = useStableCallback(props.onCopy);
@@ -6821,6 +6908,7 @@ function useDynamicFlowCore(props) {
     getErrorMessageFunctions,
     trackEvent,
     logEvent,
+    features,
     httpClient,
     onBehavior,
     onPoll,
@@ -7111,8 +7199,8 @@ function DynamicFlowCore(props) {
   const tree = componentToRendererProps(rootComponent, {
     render,
     httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : () => {
-    },
+    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
+    }),
     stepLoadingState: rootComponent.getLoadingState()
   });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -7175,8 +7263,8 @@ var DynamicFormCore = (0, import_react5.forwardRef)(function DynamicFormCore2(pr
   const tree = componentToRendererProps(rootComponent, {
     render,
     httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : () => {
-    },
+    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
+    }),
     stepLoadingState: rootComponent.getLoadingState()
   });
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

package/build/main.mjs

@@ -1279,6 +1279,9 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     onBehavior
   } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  const footerProps = component.footerComponents.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1294,6 +1297,8 @@ var stepComponentToProps = (component, rendererMapperProps) => {
     title,
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps,
+    footer: footerProps.map(rendererMapperProps.render),
+    footerProps,
     onAction: (action) => {
       void onBehavior({ type: "action", action });
     }
@@ -1965,9 +1970,9 @@ var componentToRendererProps = (component, mapperProps) => {
   if (isHiddenComponent(component)) {
     return hiddenComponentToProps(component);
   }
-  const trackEventWithLayoutId = (eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
+  const trackEventWithLayoutId = ((eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
     layoutId: component.analyticsId
-  }, properties));
+  }, properties)));
   const rendererMapperProps = component.kind === "layout" ? __spreadProps(__spreadValues({}, mapperProps), { trackEvent: trackEventWithLayoutId }) : mapperProps;
   const componentProps = getComponentProps(component, rendererMapperProps);
   const alertProps = getComponentAlertProps(component, rendererMapperProps);
@@ -6170,12 +6175,63 @@ var mapToolbarToComponent = (uid, toolbar, mapperProps) => {
   });
 };
 
+// src/revamp/domain/mappers/utils/groupLayoutByPinned.ts
+var groupLayoutByPinned = (layouts) => {
+  return layouts.reduce(groupLayout, { pinned: [], nonPinned: [] });
+};
+var groupLayout = (acc, layout) => {
+  if (layout.type === "button" && layout.pinOrder !== void 0) {
+    return {
+      pinned: [...acc.pinned, layout],
+      nonPinned: acc.nonPinned
+    };
+  }
+  if (hasColumns(layout)) {
+    const leftChildren = groupLayoutByPinned(layout.left);
+    const rightChildren = groupLayoutByPinned(layout.right);
+    return {
+      pinned: [...acc.pinned, ...leftChildren.pinned, ...rightChildren.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          left: leftChildren.nonPinned,
+          right: rightChildren.nonPinned
+        })
+      ]
+    };
+  }
+  if (hasChildren(layout)) {
+    const childComponents = groupLayoutByPinned(layout.components);
+    return {
+      pinned: [...acc.pinned, ...childComponents.pinned],
+      nonPinned: [
+        ...acc.nonPinned,
+        __spreadProps(__spreadValues({}, layout), {
+          components: childComponents.nonPinned
+        })
+      ]
+    };
+  }
+  return {
+    pinned: [...acc.pinned],
+    nonPinned: [...acc.nonPinned, layout]
+  };
+};
+var hasChildren = (component) => "components" in component;
+var hasColumns = (component) => "right" in component && "left" in component;
+
+// src/revamp/domain/mappers/utils/feature-utils.ts
+var isFeatureEnabled = (features, featureName) => {
+  return features[featureName] !== void 0 && features[featureName] !== false;
+};
+
 // src/revamp/domain/mappers/mapStepToComponent.ts
 var mapStepToComponent = (_a) => {
   var _b = _a, {
     uid: rootUid,
     loadingState,
     displayStepTitle,
+    features,
     trackEvent,
     onPoll,
     onBehavior
@@ -6183,6 +6239,7 @@ var mapStepToComponent = (_a) => {
     "uid",
     "loadingState",
     "displayStepTitle",
+    "features",
     "trackEvent",
     "onPoll",
     "onBehavior"
@@ -6229,9 +6286,26 @@ var mapStepToComponent = (_a) => {
     mapperProps,
     referencedSchemaIds
   );
-  const layoutComponents = layout.map(
+  const shouldPinButtons = isFeatureEnabled(features, "pinnedButtons");
+  const { pinned, nonPinned } = shouldPinButtons ? groupLayoutByPinned(layout) : { pinned: [], nonPinned: layout };
+  const layoutComponents = nonPinned.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
+  const footerComponents = pinned.map((footerComponent, index) => {
+    if (index === pinned.length - 1 && footerComponent.margin === void 0) {
+      return __spreadProps(__spreadValues({}, footerComponent), {
+        margin: "xs"
+      });
+    }
+    return footerComponent;
+  }).map(
+    (footerComponent, index) => mapLayoutToComponent(
+      `${uid}.footer-${index}`,
+      footerComponent,
+      mapperProps,
+      schemaComponents
+    )
+  );
   const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
     uid,
@@ -6239,6 +6313,7 @@ var mapStepToComponent = (_a) => {
     toolbar,
     layoutComponents,
     schemaComponents,
+    footerComponents,
     control,
     description,
     error: errors == null ? void 0 : errors.error,
@@ -6722,7 +6797,19 @@ function useStableCallback(handler) {
 
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
-  const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
+  const _a = props, {
+    flowId,
+    initialAction,
+    initialStep,
+    displayStepTitle = true,
+    features = {}
+  } = _a, rest = __objRest(_a, [
+    "flowId",
+    "initialAction",
+    "initialStep",
+    "displayStepTitle",
+    "features"
+  ]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCompletion = useStableCallback(rest.onCompletion);
   const onCopy = useStableCallback(props.onCopy);
@@ -6778,6 +6865,7 @@ function useDynamicFlowCore(props) {
     getErrorMessageFunctions,
     trackEvent,
     logEvent,
+    features,
     httpClient,
     onBehavior,
     onPoll,
@@ -7068,8 +7156,8 @@ function DynamicFlowCore(props) {
   const tree = componentToRendererProps(rootComponent, {
     render,
     httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : () => {
-    },
+    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
+    }),
     stepLoadingState: rootComponent.getLoadingState()
   });
   return /* @__PURE__ */ jsx6(
@@ -7132,8 +7220,8 @@ var DynamicFormCore = forwardRef(function DynamicFormCore2(props, ref) {
   const tree = componentToRendererProps(rootComponent, {
     render,
     httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : () => {
-    },
+    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
+    }),
     stepLoadingState: rootComponent.getLoadingState()
   });
   return /* @__PURE__ */ jsx7(

package/build/types/revamp/domain/components/step/StepDomainComponent.d.ts

@@ -14,6 +14,7 @@ export type StepDomainComponent = BaseComponent & {
     toolbar?: ToolbarComponent;
     layoutComponents: LayoutComponent[];
     schemaComponents: SchemaComponent[];
+    footerComponents: LayoutComponent[];
     control?: string;
     description?: string;
     error?: string;
@@ -40,7 +41,7 @@ type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "toolbar" | "layoutComponents" | "schemaComponents" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "toolbar" | "layoutComponents" | "schemaComponents" | "footerComponents" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
     stepPolling?: StepPolling;
     stepRefreshAfter?: StepRefreshAfter;
     updateComponent: UpdateComponent;

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

@@ -7,5 +7,6 @@ export type StepMapperProps = Omit<MapperProps, 'trackEvent'> & {
     loadingState: LoadingState;
     trackEvent: AnalyticsEventDispatcher<string>;
     onPoll: OnPoll;
+    features: Record<string, unknown>;
 };
-export declare const mapStepToComponent: ({ uid: rootUid, loadingState, displayStepTitle, trackEvent, onPoll, onBehavior, ...restProps }: StepMapperProps) => import("../components/step/StepDomainComponent").StepDomainComponent;
+export declare const mapStepToComponent: ({ uid: rootUid, loadingState, displayStepTitle, features, trackEvent, onPoll, onBehavior, ...restProps }: StepMapperProps) => import("../components/step/StepDomainComponent").StepDomainComponent;

package/build/types/revamp/domain/mappers/utils/feature-utils.d.ts

@@ -0,0 +1,3 @@
+type Feature = 'pinnedButtons';
+export declare const isFeatureEnabled: (features: Record<string, unknown>, featureName: Feature) => boolean;
+export {};

package/build/types/revamp/domain/mappers/utils/groupLayoutByPinned.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonLayout, Layout } from '@wise/dynamic-flow-types/build/next';
+export declare const groupLayoutByPinned: (layouts: Layout[]) => {
+    pinned: ButtonLayout[];
+    nonPinned: Layout[];
+};

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

@@ -6,6 +6,7 @@ type DynamicFlowCorePropsBasic = {
     displayStepTitle?: boolean;
     httpClient: HttpClient;
     renderers: Renderers;
+    features?: Record<string, unknown>;
     onCompletion: (result: Model) => void;
     onCopy?: (copiedString: string | null) => void;
     onError: (error: unknown, status?: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.16.1",
+  "version": "4.17.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -46,22 +46,22 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.105.5",
+    "@transferwise/components": "46.106.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "3.22.4",
     "@transferwise/neptune-css": "14.24.5",
     "@types/jest": "30.0.0",
-    "@types/node": "22.17.2",
+    "@types/node": "22.18.0",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
-    "@wise/art": "2.24.4",
+    "@wise/art": "2.24.5",
     "@wise/components-theming": "^1.6.4",
-    "babel-jest": "30.0.5",
-    "esbuild": "0.25.8",
+    "babel-jest": "30.1.2",
+    "esbuild": "0.25.9",
     "eslint-plugin-storybook": "9.1.3",
-    "jest": "30.0.5",
-    "jest-environment-jsdom": "30.0.5",
+    "jest": "30.1.2",
+    "jest-environment-jsdom": "30.1.2",
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^3.0.1",
     "npm-run-all2": "8.0.4",
@@ -78,8 +78,8 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -95,7 +95,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.13.0"
+    "@wise/dynamic-flow-types": "3.14.1"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",