@wise/dynamic-flow-client 4.21.0 → 4.21.2

package/build/main.js

@@ -4684,7 +4684,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
 // src/revamp/domain/mappers/schema/booleanSchemaToComponent.ts
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model, onPersistAsync } = schemaMapperProps;
-  const { default: defaultValue } = schema;
+  const { default: defaultValue, additionalText, inlineAlert, supportingValues } = schema;
   const { updateComponent, onBehavior, onValueChange } = mapperProps;
   const schemaOnChange = getSchemaOnChange(schema, onBehavior);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
@@ -4696,9 +4696,12 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const value = onPersistAsync ? validLocalValue : validModel;
   return createBooleanInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
-      value: value != null ? value : false,
-      validationAsyncState,
+      additionalText,
+      inlineAlert: mapInlineAlert(inlineAlert),
       schemaOnChange,
+      supportingValues,
+      validationAsyncState,
+      value: value != null ? value : false,
       performValidationAsync,
       onValueChange
     }),
@@ -5332,15 +5335,29 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
   }
   const options = schema.oneOf.map((childSchema, index) => {
     var _a2;
-    const { title = "", description, image, icon, media, keywords = [], tags } = childSchema;
+    const {
+      title = "",
+      description,
+      image,
+      icon,
+      media,
+      keywords = [],
+      tags,
+      additionalText,
+      inlineAlert,
+      supportingValues
+    } = childSchema;
     return {
       title,
       description,
-      media: getDomainLayerMedia({ icon, image, media }),
+      additionalText,
+      analyticsId: (_a2 = childSchema.analyticsId) != null ? _a2 : childSchema.$id,
+      disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
+      inlineAlert: mapInlineAlert(inlineAlert),
       keywords,
+      media: getDomainLayerMedia({ icon, image, media }),
+      supportingValues,
       tags,
-      disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
-      analyticsId: (_a2 = childSchema.analyticsId) != null ? _a2 : childSchema.$id,
       component: mapSchemaToComponent(
         {
           uid: `${uid}.oneOf-${index}`,
@@ -6296,6 +6313,7 @@ var executeSubmission = async (props) => {
         }
         case "modal": {
           assertModalResponseBody(body);
+          trackSubmissionEvent("Action Succeeded", { actionId });
           return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
         }
         default: {
@@ -6926,6 +6944,9 @@ function useDynamicFlowCore(props) {
               updateStep(__spreadProps(__spreadValues({}, command.step), { errors }), command.etag);
             }
             break;
+          case "noop":
+            rootComponentRef.current.setLoadingState("idle");
+            break;
           case "error": {
             closeWithError(
               new Error("Failed to refresh"),
@@ -6934,9 +6955,6 @@ function useDynamicFlowCore(props) {
             );
             break;
           }
-          case "noop":
-            rootComponentRef.current.setLoadingState("idle");
-            break;
         }
       } catch (error) {
         closeWithError(error, void 0);
@@ -6971,9 +6989,11 @@ function useDynamicFlowCore(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  if (!rootComponentRef.current.hasStep() && initialStep && !initialAction) {
+  const hasMappedInitialStep = (0, import_react3.useRef)(false);
+  if (!hasMappedInitialStep.current && initialStep && !initialAction) {
     createStep(initialStep, null);
     trackCoreEvent("Step Shown", { isFirstStep: true });
+    hasMappedInitialStep.current = true;
   }
   return { rootComponent: rootComponentRef.current };
 }
@@ -7112,6 +7132,9 @@ var inputComponentToProps = (component, type) => {
 var booleanInputComponentToProps = (component, rendererMapperProps) => {
   var _a;
   return __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-checkbox")), rendererMapperProps), {
+    additionalText: component.additionalText,
+    supportingValues: component.supportingValues,
+    inlineAlert: component.inlineAlert,
     value: (_a = component.value) != null ? _a : false,
     onChange: component.onChange.bind(component)
   });
@@ -7995,7 +8018,14 @@ function DynamicFlowCore(props) {
     scrollToTop: (behavior) => {
       var _a2;
       const element = document.querySelector(`div#${normalisedFlowId}.${className}`);
-      (_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+      if (!element || !window) {
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const isInView = rect.top >= 0 && rect.top <= window.innerHeight;
+      if (!isInView) {
+        (_a2 = element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+      }
     }
   }));
   const render = (0, import_react4.useMemo)(

package/build/main.mjs

@@ -4641,7 +4641,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
 // src/revamp/domain/mappers/schema/booleanSchemaToComponent.ts
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model, onPersistAsync } = schemaMapperProps;
-  const { default: defaultValue } = schema;
+  const { default: defaultValue, additionalText, inlineAlert, supportingValues } = schema;
   const { updateComponent, onBehavior, onValueChange } = mapperProps;
   const schemaOnChange = getSchemaOnChange(schema, onBehavior);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
@@ -4653,9 +4653,12 @@ var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const value = onPersistAsync ? validLocalValue : validModel;
   return createBooleanInputComponent(
     __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
-      value: value != null ? value : false,
-      validationAsyncState,
+      additionalText,
+      inlineAlert: mapInlineAlert(inlineAlert),
       schemaOnChange,
+      supportingValues,
+      validationAsyncState,
+      value: value != null ? value : false,
       performValidationAsync,
       onValueChange
     }),
@@ -5289,15 +5292,29 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
   }
   const options = schema.oneOf.map((childSchema, index) => {
     var _a2;
-    const { title = "", description, image, icon, media, keywords = [], tags } = childSchema;
+    const {
+      title = "",
+      description,
+      image,
+      icon,
+      media,
+      keywords = [],
+      tags,
+      additionalText,
+      inlineAlert,
+      supportingValues
+    } = childSchema;
     return {
       title,
       description,
-      media: getDomainLayerMedia({ icon, image, media }),
+      additionalText,
+      analyticsId: (_a2 = childSchema.analyticsId) != null ? _a2 : childSchema.$id,
+      disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
+      inlineAlert: mapInlineAlert(inlineAlert),
       keywords,
+      media: getDomainLayerMedia({ icon, image, media }),
+      supportingValues,
       tags,
-      disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
-      analyticsId: (_a2 = childSchema.analyticsId) != null ? _a2 : childSchema.$id,
       component: mapSchemaToComponent(
         {
           uid: `${uid}.oneOf-${index}`,
@@ -6253,6 +6270,7 @@ var executeSubmission = async (props) => {
         }
         case "modal": {
           assertModalResponseBody(body);
+          trackSubmissionEvent("Action Succeeded", { actionId });
           return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
         }
         default: {
@@ -6883,6 +6901,9 @@ function useDynamicFlowCore(props) {
               updateStep(__spreadProps(__spreadValues({}, command.step), { errors }), command.etag);
             }
             break;
+          case "noop":
+            rootComponentRef.current.setLoadingState("idle");
+            break;
           case "error": {
             closeWithError(
               new Error("Failed to refresh"),
@@ -6891,9 +6912,6 @@ function useDynamicFlowCore(props) {
             );
             break;
           }
-          case "noop":
-            rootComponentRef.current.setLoadingState("idle");
-            break;
         }
       } catch (error) {
         closeWithError(error, void 0);
@@ -6928,9 +6946,11 @@ function useDynamicFlowCore(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  if (!rootComponentRef.current.hasStep() && initialStep && !initialAction) {
+  const hasMappedInitialStep = useRef2(false);
+  if (!hasMappedInitialStep.current && initialStep && !initialAction) {
     createStep(initialStep, null);
     trackCoreEvent("Step Shown", { isFirstStep: true });
+    hasMappedInitialStep.current = true;
   }
   return { rootComponent: rootComponentRef.current };
 }
@@ -7069,6 +7089,9 @@ var inputComponentToProps = (component, type) => {
 var booleanInputComponentToProps = (component, rendererMapperProps) => {
   var _a;
   return __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-checkbox")), rendererMapperProps), {
+    additionalText: component.additionalText,
+    supportingValues: component.supportingValues,
+    inlineAlert: component.inlineAlert,
     value: (_a = component.value) != null ? _a : false,
     onChange: component.onChange.bind(component)
   });
@@ -7952,7 +7975,14 @@ function DynamicFlowCore(props) {
     scrollToTop: (behavior) => {
       var _a2;
       const element = document.querySelector(`div#${normalisedFlowId}.${className}`);
-      (_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+      if (!element || !window) {
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      const isInView = rect.top >= 0 && rect.top <= window.innerHeight;
+      if (!isInView) {
+        (_a2 = element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+      }
     }
   }));
   const render = useMemo2(

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

@@ -1,13 +1,16 @@
 import type { SchemaOnChange } from '../features/schema-on-change/getSchemaOnChange';
 import type { PerformValidationAsync } from '../features/validationAsync/getPerformValidationAsync';
-import type { BaseInputComponent, OnPersistAsync, OnValueChange, RepeatableSummary, UpdateComponent, ValidationAsyncState } from '../types';
+import type { BaseInputComponent, InlineAlert, OnPersistAsync, OnValueChange, RepeatableSummary, UpdateComponent, ValidationAsyncState, SupportingValues } from '../types';
 export type BooleanInputComponent = BaseInputComponent<boolean> & {
     type: 'boolean';
     kind: 'input';
+    additionalText?: string;
+    inlineAlert?: InlineAlert;
+    supportingValues?: SupportingValues;
     validationAsyncState: ValidationAsyncState;
     onChange: (value: boolean) => void;
 };
-export declare const createBooleanInputComponent: (booleanInputProps: Pick<BooleanInputComponent, "uid" | "id" | "analyticsId" | "alert" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "media" | "required" | "title" | "tags" | "value" | "validationAsyncState"> & {
+export declare const createBooleanInputComponent: (booleanInputProps: Pick<BooleanInputComponent, "uid" | "id" | "additionalText" | "analyticsId" | "alert" | "control" | "description" | "disabled" | "errors" | "help" | "hidden" | "inlineAlert" | "media" | "required" | "supportingValues" | "title" | "tags" | "value" | "validationAsyncState"> & {
     schemaOnChange: SchemaOnChange | undefined;
     performValidationAsync: PerformValidationAsync | undefined;
     summariser: (value: boolean) => RepeatableSummary;

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

@@ -1,6 +1,7 @@
 import type { Model } from '@wise/dynamic-flow-types/build/next';
 import type { AnalyticsEventDispatcher } from '../features/events';
 import type { SchemaOnChange } from '../features/schema-on-change/getSchemaOnChange';
+import type { InlineAlert, SupportingValues } from '../types';
 import type { IsInvalidCheck } from '../features/validation/value-checks';
 import type { BaseInputComponent, LocalValue, Media, OnValueChange, RepeatableSummary, SchemaComponent, UpdateComponent } from '../types';
 export type SelectInputComponent = BaseInputComponent<LocalValue | null> & {
@@ -15,13 +16,16 @@ export type SelectInputComponent = BaseInputComponent<LocalValue | null> & {
     getSelectedChild: () => SchemaComponent | null;
 };
 export type SelectInputOption = {
+    additionalText?: string;
     analyticsId?: string;
-    title: string;
     description?: string;
-    media?: Media;
-    keywords: string[];
     disabled: boolean;
+    inlineAlert?: InlineAlert;
+    keywords: string[];
+    media?: Media;
+    supportingValues?: SupportingValues;
     tags?: string[];
+    title: string;
 };
 export declare const createSelectInputComponent: (selectProps: Pick<SelectInputComponent, "uid" | "id" | "analyticsId" | "alert" | "autoComplete" | "control" | "errors" | "description" | "disabled" | "help" | "hidden" | "placeholder" | "required" | "title" | "tags"> & {
     initialModel: Model;

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

@@ -82,6 +82,9 @@ export declare const oneOfSchemaToComponent: (schemaMapperProps: SchemaMapperPro
 } & {
     type: "boolean";
     kind: "input";
+    additionalText?: string;
+    inlineAlert?: import("../../../types").InlineAlert;
+    supportingValues?: import("../../../types").SupportingValues;
     validationAsyncState: import("../../../types").ValidationAsyncState;
     onChange: (value: boolean) => void;
 } & {

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

@@ -56,6 +56,9 @@ export declare const persistAsyncSchemaToComponent: (schemaMapperProps: SchemaMa
 } & {
     type: "boolean";
     kind: "input";
+    additionalText?: string;
+    inlineAlert?: import("../../types").InlineAlert;
+    supportingValues?: import("../../types").SupportingValues;
     validationAsyncState: import("../../types").ValidationAsyncState;
     onChange: (value: boolean) => void;
 } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.21.0",
+  "version": "4.21.2",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -52,7 +52,7 @@
     "@transferwise/navigation-ui": "4.40.0",
     "@transferwise/neptune-css": "14.25.1",
     "@types/jest": "30.0.0",
-    "@types/node": "22.18.13",
+    "@types/node": "22.19.1",
     "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
@@ -97,7 +97,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.18.0"
+    "@wise/dynamic-flow-types": "3.19.0"
   },
   "scripts": {
     "dev": "EXCLUDE_VISUAL_TESTS=true pnpm storybook dev -p 3003",