@wise/dynamic-flow-client 5.5.1 → 5.6.0

package/build/main.js

@@ -1337,9 +1337,10 @@ var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps
 });
 
 // src/domain/mappers/utils/layout-utils.ts
-var removeMarginFromLayout = (component) => {
-  return __spreadProps(__spreadValues({}, component), {
-    margin: "xs"
+var normaliseMarginInLastComponent = (container) => {
+  return container.map((component, index) => {
+    const shouldRemoveMargin = index === container.length - 1 && component.margin === void 0;
+    return shouldRemoveMargin ? __spreadProps(__spreadValues({}, component), { margin: "xs" }) : component;
   });
 };
 
@@ -1352,16 +1353,9 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   margin: margin != null ? margin : "md",
   width: width != null ? width : "xl",
   tags,
-  components: components.map((component, index) => {
-    const shouldRemoveMargin = index === components.length - 1 && component.margin === void 0;
-    const componentWithAdjustedMargin = shouldRemoveMargin ? removeMarginFromLayout(component) : component;
-    return mapLayoutToComponent(
-      `${uid}.box-${index}`,
-      componentWithAdjustedMargin,
-      mapperProps,
-      schemaComponents
-    );
-  })
+  components: normaliseMarginInLastComponent(components).map(
+    (component, index) => mapLayoutToComponent(`${uid}.box-${index}`, component, mapperProps, schemaComponents)
+  )
 });
 
 // src/domain/components/ButtonComponent.ts
@@ -6091,7 +6085,6 @@ var mapStepToComponent = (_a) => {
     errors,
     external,
     key,
-    layout = [],
     navigation,
     polling,
     refreshAfter,
@@ -6132,21 +6125,12 @@ var mapStepToComponent = (_a) => {
     mapperProps,
     referencedSchemaIds
   );
-  const shouldPinButtons = features.isEnabled("pinnedButtons");
-  const { pinned, nonPinned } = shouldPinButtons ? groupLayoutByPinned(layout) : { pinned: [], nonPinned: layout };
-  const layoutComponents = nonPinned.map(
+  const { layout, footer } = getLayoutAndFooter(step, features);
+  const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
-  const footerComponents = pinned.map((footerComponent, index) => {
-    const shouldRemoveMargin = index === pinned.length - 1 && footerComponent.margin === void 0;
-    return shouldRemoveMargin ? removeMarginFromLayout(footerComponent) : footerComponent;
-  }).map(
-    (footerComponent, index) => mapLayoutToComponent(
-      `${uid}.footer-${index}`,
-      footerComponent,
-      mapperProps,
-      schemaComponents
-    )
+  const footerComponents = normaliseMarginInLastComponent(footer).map(
+    (footerComponent, index) => mapLayoutToComponent(`${uid}.footer-${index}`, footerComponent, mapperProps, schemaComponents)
   );
   const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
@@ -6218,6 +6202,19 @@ var executePrefetch = (props) => {
     }
   });
 };
+var getLayoutAndFooter = (step, features) => {
+  var _a;
+  if (step.footer) {
+    const { layout: layout2 = [], footer = [] } = step;
+    return { layout: layout2, footer };
+  }
+  if (features.isEnabled("pinnedButtons")) {
+    const { pinned: footer, nonPinned: layout2 } = groupLayoutByPinned((_a = step.layout) != null ? _a : []);
+    return { layout: layout2, footer };
+  }
+  const { layout = [] } = step;
+  return { layout, footer: [] };
+};
 
 // src/getSubflowCallbacks.ts
 var getSubflowCallbacks = ({
@@ -6810,17 +6807,25 @@ var createFlowController = (props) => {
         return false;
     }
   };
-  trackEvent("Initiated");
+  let isInitialised = false;
   if (initialStep) {
+    isInitialised = true;
+    trackEvent("Initiated");
     createStep(initialStep, null);
     trackEvent("Step Shown", { isFirstStep: true });
-  } else if (initialAction) {
-    rootComponent.setLoadingState("submitting");
-    void onAction(__spreadValues({ method: "GET" }, initialAction), null);
   }
-  rootComponent.start();
+  const start = () => {
+    if (!isInitialised && initialAction) {
+      isInitialised = true;
+      trackEvent("Initiated");
+      rootComponent.setLoadingState("submitting");
+      void onAction(__spreadValues({ method: "GET" }, initialAction), null);
+    }
+    rootComponent.start();
+  };
   return {
     rootComponent,
+    start,
     cancel: closeWithCancellation
   };
 };
@@ -8218,7 +8223,10 @@ var useRerender = () => {
 };
 var useFlowController = (props) => {
   const df = (0, import_react3.useMemo)(() => createFlowController(props), []);
-  (0, import_react3.useEffect)(() => () => df.rootComponent.stop(), []);
+  (0, import_react3.useEffect)(() => {
+    df.start();
+    return () => df.rootComponent.stop();
+  }, []);
   return df;
 };
 

package/build/main.mjs

@@ -1307,9 +1307,10 @@ var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps
 });
 
 // src/domain/mappers/utils/layout-utils.ts
-var removeMarginFromLayout = (component) => {
-  return __spreadProps(__spreadValues({}, component), {
-    margin: "xs"
+var normaliseMarginInLastComponent = (container) => {
+  return container.map((component, index) => {
+    const shouldRemoveMargin = index === container.length - 1 && component.margin === void 0;
+    return shouldRemoveMargin ? __spreadProps(__spreadValues({}, component), { margin: "xs" }) : component;
   });
 };
 
@@ -1322,16 +1323,9 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   margin: margin != null ? margin : "md",
   width: width != null ? width : "xl",
   tags,
-  components: components.map((component, index) => {
-    const shouldRemoveMargin = index === components.length - 1 && component.margin === void 0;
-    const componentWithAdjustedMargin = shouldRemoveMargin ? removeMarginFromLayout(component) : component;
-    return mapLayoutToComponent(
-      `${uid}.box-${index}`,
-      componentWithAdjustedMargin,
-      mapperProps,
-      schemaComponents
-    );
-  })
+  components: normaliseMarginInLastComponent(components).map(
+    (component, index) => mapLayoutToComponent(`${uid}.box-${index}`, component, mapperProps, schemaComponents)
+  )
 });
 
 // src/domain/components/ButtonComponent.ts
@@ -6061,7 +6055,6 @@ var mapStepToComponent = (_a) => {
     errors,
     external,
     key,
-    layout = [],
     navigation,
     polling,
     refreshAfter,
@@ -6102,21 +6095,12 @@ var mapStepToComponent = (_a) => {
     mapperProps,
     referencedSchemaIds
   );
-  const shouldPinButtons = features.isEnabled("pinnedButtons");
-  const { pinned, nonPinned } = shouldPinButtons ? groupLayoutByPinned(layout) : { pinned: [], nonPinned: layout };
-  const layoutComponents = nonPinned.map(
+  const { layout, footer } = getLayoutAndFooter(step, features);
+  const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps, schemaComponents)
   );
-  const footerComponents = pinned.map((footerComponent, index) => {
-    const shouldRemoveMargin = index === pinned.length - 1 && footerComponent.margin === void 0;
-    return shouldRemoveMargin ? removeMarginFromLayout(footerComponent) : footerComponent;
-  }).map(
-    (footerComponent, index) => mapLayoutToComponent(
-      `${uid}.footer-${index}`,
-      footerComponent,
-      mapperProps,
-      schemaComponents
-    )
+  const footerComponents = normaliseMarginInLastComponent(footer).map(
+    (footerComponent, index) => mapLayoutToComponent(`${uid}.footer-${index}`, footerComponent, mapperProps, schemaComponents)
   );
   const toolbar = mapToolbarToComponent(uid, step.toolbar, mapperProps);
   const stepComponent = createStepComponent({
@@ -6188,6 +6172,19 @@ var executePrefetch = (props) => {
     }
   });
 };
+var getLayoutAndFooter = (step, features) => {
+  var _a;
+  if (step.footer) {
+    const { layout: layout2 = [], footer = [] } = step;
+    return { layout: layout2, footer };
+  }
+  if (features.isEnabled("pinnedButtons")) {
+    const { pinned: footer, nonPinned: layout2 } = groupLayoutByPinned((_a = step.layout) != null ? _a : []);
+    return { layout: layout2, footer };
+  }
+  const { layout = [] } = step;
+  return { layout, footer: [] };
+};
 
 // src/getSubflowCallbacks.ts
 var getSubflowCallbacks = ({
@@ -6780,17 +6777,25 @@ var createFlowController = (props) => {
         return false;
     }
   };
-  trackEvent("Initiated");
+  let isInitialised = false;
   if (initialStep) {
+    isInitialised = true;
+    trackEvent("Initiated");
     createStep(initialStep, null);
     trackEvent("Step Shown", { isFirstStep: true });
-  } else if (initialAction) {
-    rootComponent.setLoadingState("submitting");
-    void onAction(__spreadValues({ method: "GET" }, initialAction), null);
   }
-  rootComponent.start();
+  const start = () => {
+    if (!isInitialised && initialAction) {
+      isInitialised = true;
+      trackEvent("Initiated");
+      rootComponent.setLoadingState("submitting");
+      void onAction(__spreadValues({ method: "GET" }, initialAction), null);
+    }
+    rootComponent.start();
+  };
   return {
     rootComponent,
+    start,
     cancel: closeWithCancellation
   };
 };
@@ -8188,7 +8193,10 @@ var useRerender = () => {
 };
 var useFlowController = (props) => {
   const df = useMemo(() => createFlowController(props), []);
-  useEffect2(() => () => df.rootComponent.stop(), []);
+  useEffect2(() => {
+    df.start();
+    return () => df.rootComponent.stop();
+  }, []);
   return df;
 };
 

package/build/types/controller/FlowController.d.ts

@@ -14,5 +14,6 @@ export type FlowControllerProps = Omit<DynamicFlowCoreProps, 'renderers' | 'feat
 };
 export declare const createFlowController: (props: FlowControllerProps) => {
     rootComponent: import("../domain/components/RootDomainComponent").RootDomainComponent;
+    start: () => void;
     cancel: () => void;
 };

package/build/types/domain/mappers/utils/layout-utils.d.ts

@@ -1,2 +1,7 @@
 import type { Layout } from '@wise/dynamic-flow-types/spec';
-export declare const removeMarginFromLayout: (component: Layout) => Layout;
+/**
+ * Normalizes the margin of the last layout component in the container by removing its margin if it is not explicitly set.
+ * @param container The array of layout components.
+ * @returns The array of layout components with the last component's margin normalized if needed.
+ */
+export declare const normaliseMarginInLastComponent: (container: Layout[]) => Layout[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -72,8 +72,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
-    "@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",
@@ -86,7 +86,7 @@
     "react-intl": "^6 || ^7"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "4.6.0"
+    "@wise/dynamic-flow-types": "4.7.0"
   },
   "scripts": {
     "dev": "EXCLUDE_VISUAL_TESTS=true pnpm storybook dev -p 3003",