@wise/dynamic-flow-client 4.3.14 → 4.5.0

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

@@ -1,20 +1,8 @@
-import type { Context, LayoutComponent } from '../types';
+import type { CallToAction, Context, LayoutComponent } from '../types';
 export type AlertComponent = LayoutComponent & {
     type: 'alert';
     markdown: string;
     context: Context;
-    callToAction?: AlertCallToActionLink | AlertCallToAction;
-};
-export type AlertCallToActionLink = {
-    type: 'link';
-    accessibilityDescription?: string;
-    href: string;
-    title: string;
-};
-export type AlertCallToAction = {
-    type: 'action';
-    accessibilityDescription?: string;
-    title: string;
-    onClick: () => void;
+    callToAction?: CallToAction;
 };
 export declare const createAlertComponent: (alertProps: Pick<AlertComponent, "uid" | "callToAction" | "context" | "control" | "margin" | "markdown">) => AlertComponent;

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

@@ -1,5 +1,5 @@
 import type { Icon } from '@wise/dynamic-flow-types/build/next';
-import type { Image, LayoutComponent } from '../types';
+import type { Image, InlineAlert, LayoutComponent, SupportingValues } from '../types';
 export type DecisionComponent = LayoutComponent & {
     type: 'decision';
     options: DecisionOption[];
@@ -13,6 +13,9 @@ export type DecisionOption = {
     image?: Image;
     title: string;
     tag?: string;
+    additionalText?: string;
+    supportingValues?: SupportingValues;
+    inlineAlert?: InlineAlert;
     onClick: () => void;
 };
 export declare const createDecisionComponent: (decisionProps: Pick<DecisionComponent, "uid" | "control" | "margin" | "options" | "title">) => DecisionComponent;

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

@@ -1,31 +1,19 @@
-import { Icon } from "@wise/dynamic-flow-types/build/next";
-import { Image, LayoutComponent } from "../types";
+import { Icon } from '@wise/dynamic-flow-types/build/next';
+import { AdditionalInfo, CallToAction, Image, InlineAlert, LayoutComponent, SupportingValues } from '../types';
 export type ListComponent = LayoutComponent & {
     type: 'list';
     items: ListItem[];
     title?: string;
-    callToAction?: ListCallToActionAction | ListCallToActionLink;
-};
-export type ListCallToActionLink = {
-    type: 'link';
-    accessibilityDescription?: string;
-    href: string;
-    title: string;
-    onClick: () => void;
-};
-export type ListCallToActionAction = {
-    type: 'action';
-    accessibilityDescription?: string;
-    title: string;
-    onClick: () => void;
+    callToAction?: CallToAction;
 };
 export type ListItem = {
     icon?: Icon;
     image?: Image;
     title?: string;
-    subtitle?: string;
-    value?: string;
-    subvalue?: string;
+    description?: string;
     tag?: string;
+    supportingValues?: SupportingValues;
+    additionalInfo?: AdditionalInfo;
+    inlineAlert?: InlineAlert;
 };
 export declare const createListComponent: (listProps: Pick<ListComponent, "uid" | "callToAction" | "control" | "items" | "margin" | "title">) => ListComponent;

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

@@ -0,0 +1,11 @@
+import type { DomainComponent, BaseComponent, LocalValue, UpdateComponent } from '../types';
+export type ModalContentComponent = BaseComponent & {
+    type: 'modal-content';
+    components: DomainComponent[];
+    open: boolean;
+    title?: string;
+    getChildren: () => DomainComponent[];
+    getLocalValue: () => LocalValue;
+    close: () => void;
+};
+export declare const createModalContentComponent: (modalProps: Pick<ModalContentComponent, "uid" | "components" | "title">, updateComponent: UpdateComponent) => ModalContentComponent;

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

@@ -1,9 +1,10 @@
-import type { LayoutComponent } from '../types';
+import { Icon } from '@wise/dynamic-flow-types/build/next';
+import type { AdditionalInfo, CallToAction, Image, InlineAlert, LayoutComponent } from '../types';
 export type ReviewComponent = LayoutComponent & {
     type: 'review';
     fields: ReviewField[];
     title?: string;
-    callToAction?: ReviewCallToAction;
+    callToAction?: CallToAction;
 };
 export type ReviewField = {
     help?: string;
@@ -11,11 +12,10 @@ export type ReviewField = {
     value: string;
     rawValue?: string;
     tag?: string;
-};
-export type ReviewCallToAction = {
-    accessibilityDescription?: string;
-    href?: string;
-    title: string;
-    onClick: () => void;
+    inlineAlert?: InlineAlert;
+    additionalInfo?: AdditionalInfo;
+    callToAction?: CallToAction;
+    icon?: Icon;
+    image?: Image;
 };
 export declare const createReviewComponent: (reviewProps: Pick<ReviewComponent, "uid" | "callToAction" | "control" | "fields" | "margin" | "title">) => ReviewComponent;

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

@@ -1,9 +1,13 @@
 import { AnalyticsEventDispatcher } from '../features/events';
 import { BaseComponent, DomainComponent, LoadingState, LocalValue, UpdateComponent } from '../types';
-import { StepDomainComponent } from './StepDomainComponent';
+import { StepDomainComponent } from './step/StepDomainComponent';
+import { ModalContentComponent } from './ModalContentComponent';
 export type RootDomainComponent = BaseComponent & {
     type: 'root';
     stepComponent: StepDomainComponent | null;
+    dismissAllModals: () => void;
+    dismissModal: () => void;
+    showModal: (modal: ModalContentComponent) => void;
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValue;
     getLoadingState: () => LoadingState;

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

@@ -0,0 +1,12 @@
+import { BaseComponent, LocalValue, UpdateComponent } from '../../types';
+export type ExternalConfirmationComponent = BaseComponent & {
+    type: 'external-confirmation';
+    uid: string;
+    status: 'initial' | 'success' | 'failure' | 'dismissed';
+    url: string;
+    onSuccess: () => void;
+    onFailure: () => void;
+    onCancel: () => void;
+    getLocalValue: () => LocalValue;
+};
+export declare const createExternalConfirmation: (uid: string, url: string, updateComponent: UpdateComponent) => ExternalConfirmationComponent;

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

@@ -1,8 +1,10 @@
-import type { BaseComponent, DomainComponent, LoadingState, LocalValue, OnBehavior, UpdateComponent } from '../types';
+import type { BaseComponent, DomainComponent, LoadingState, LocalValue, OnBehavior, UpdateComponent } from '../../types';
 import type { Step } from '@wise/dynamic-flow-types/build/next';
-import type { AnalyticsEventDispatcher } from '../features/events';
-import type { StepPolling } from '../features/polling/getStepPolling';
-import { StepRefreshAfter } from '../features/refreshAfter/getStepRefreshAfter';
+import type { AnalyticsEventDispatcher } from '../../features/events';
+import type { StepPolling } from '../../features/polling/getStepPolling';
+import { StepRefreshAfter } from '../../features/refreshAfter/getStepRefreshAfter';
+import { ModalContentComponent } from '../ModalContentComponent';
+import { ExternalConfirmationComponent } from './ExternalConfirmationComponent';
 export type StepDomainComponent = BaseComponent & {
     type: 'step';
     back?: BackNavigation;
@@ -10,11 +12,16 @@ export type StepDomainComponent = BaseComponent & {
     control?: string;
     description?: string;
     error?: string;
-    external?: Step['external'];
+    externalConfirmation?: ExternalConfirmationComponent;
     loadingState: LoadingState;
     step: Step;
     title?: string;
+    modals: ModalContentComponent[];
+    dismissModal: () => void;
+    dismissAllModals: () => void;
+    showModal: (modal: ModalContentComponent) => void;
     getChildren: () => DomainComponent[];
+    getModals: () => ModalContentComponent[];
     getLocalValue: () => LocalValue;
     setLoadingState: (loadingState: LoadingState) => void;
     onBehavior: OnBehavior;
@@ -25,7 +32,7 @@ type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "components" | "control" | "description" | "error" | "external" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "back" | "components" | "control" | "description" | "error" | "externalConfirmation" | "loadingState" | "step" | "title" | "trackEvent" | "onBehavior"> & {
     stepPolling?: StepPolling;
     stepRefreshAfter?: StepRefreshAfter;
     updateComponent: UpdateComponent;

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

@@ -0,0 +1,4 @@
+import { ModalBehavior } from '@wise/dynamic-flow-types/build/next';
+import { MapperProps } from '../schema/types';
+import { ModalContentComponent } from '../../components/ModalContentComponent';
+export declare const modalToContent: (uid: string, { content, title }: ModalBehavior, mapperProps: MapperProps) => ModalContentComponent;

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

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

package/build/types/revamp/domain/mappers/utils/call-to-action-utils.d.ts

@@ -1,17 +1,5 @@
 import { Action, Behavior as SpecBehavior } from '@wise/dynamic-flow-types/build/next';
-import { OnBehavior } from '../../types';
-type CallToAction = {
-    type: 'action';
-    title: string;
-    accessibilityDescription?: string;
-    onClick: () => void;
-} | {
-    type: 'link';
-    title: string;
-    accessibilityDescription?: string;
-    href: string;
-    onClick: () => void;
-};
+import { CallToAction, OnBehavior } from '../../types';
 type SpecCallToAction = {
     title?: string;
     accessibilityDescription?: string;

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

@@ -1,7 +1,7 @@
-import type { Context as DFContext, Align as DFAlign, Action } from '@wise/dynamic-flow-types/build/next';
+import type { Context as SpecContext, Align as SpecAlign, Action } from '@wise/dynamic-flow-types/build/next';
 import type { Align, Bias, Context } from '../../types';
-export declare const mapLegacyContext: (context: DFContext) => Context;
+export declare const mapLegacyContext: (context: SpecContext) => Context;
 export declare const mapLegacyBias: (bias: "left" | "right" | "none") => Bias;
-export declare const mapLegacyAlign: (align: DFAlign) => Align;
+export declare const mapLegacyAlign: (align: SpecAlign) => Align;
 export declare const mapLegacyActionTypeToContext: (type: Action["type"]) => Context;
 export declare const mapLegacyActionTypeToControl: (type: Action["type"]) => "primary" | "secondary" | "tertiary";

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

@@ -0,0 +1,4 @@
+import type { AdditionalInfo as SpecAdditionalInfo, InlineAlert as SpecInlineAlert } from '@wise/dynamic-flow-types/build/next';
+import { AdditionalInfo, InlineAlert, OnBehavior } from '../../types';
+export declare const mapInlineAlert: (alert: SpecInlineAlert | undefined) => InlineAlert | undefined;
+export declare const mapAdditionalInfo: (info: SpecAdditionalInfo | undefined, onBehavior: OnBehavior) => AdditionalInfo | undefined;

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

@@ -1,6 +1,4 @@
-import type { Action, Icon, JsonElement, Margin, Model } from '@wise/dynamic-flow-types/build/next';
-import type { ActionBehavior } from '@wise/dynamic-flow-types/build/next/feature/ActionBehavior';
-import type { LinkBehavior } from '@wise/dynamic-flow-types/build/next/feature/LinkBehavior';
+import type { Action, Icon, JsonElement, Margin, Model, ActionBehavior, LinkBehavior, DismissBehavior, ModalBehavior } from '@wise/dynamic-flow-types/build/next';
 import type { AlertComponent } from './components/AlertComponent';
 import type { AllOfComponent } from './components/AllOfComponent';
 import type { BooleanInputComponent } from './components/BooleanInputComponent';
@@ -32,18 +30,32 @@ import type { RootDomainComponent } from './components/RootDomainComponent';
 import type { SearchComponent } from './components/searchComponent/SearchComponent';
 import type { SelectInputComponent } from './components/SelectInputComponent';
 import type { StatusListComponent } from './components/StatusListComponent';
-import type { StepDomainComponent } from './components/StepDomainComponent';
+import type { StepDomainComponent } from './components/step/StepDomainComponent';
 import type { TextInputComponent } from './components/TextInputComponent';
 import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
-export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
+import { ModalContentComponent } from './components/ModalContentComponent';
+import { ExternalConfirmationComponent } from './components/step/ExternalConfirmationComponent';
+export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {
 }
 export interface LocalValueArray extends Array<LocalValuePrimitive | LocalValueObject | LocalValueArray> {
 }
-export type Behavior = ActionBehavior | LinkBehavior | {
+export type CallToAction = {
+    type: 'action' | 'modal' | 'dismiss';
+    title: string;
+    accessibilityDescription?: string;
+    onClick: () => void;
+} | {
+    type: 'link';
+    title: string;
+    accessibilityDescription?: string;
+    href: string;
+    onClick: () => void;
+};
+export type Behavior = ActionBehavior | LinkBehavior | ModalBehavior | DismissBehavior | {
     type: 'none';
 };
 export type BaseComponent = {
@@ -132,3 +144,16 @@ export type ValidationAsyncState = {
     };
 };
 export type LoadingState = 'idle' | 'initial' | 'submitting' | 'refreshing';
+export type AdditionalInfo = {
+    text: string;
+    accessibilityDescription?: string;
+    onClick?: () => void;
+};
+export type InlineAlert = {
+    content: string;
+    context?: Context;
+};
+export type SupportingValues = {
+    value?: string;
+    subvalue?: string;
+};

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

@@ -1,5 +1,6 @@
 import type { Action, ErrorResponseBody, Model, Step } from '@wise/dynamic-flow-types/build/next';
 import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../domain/features/events';
+import type { Behavior } from '../domain/types';
 type Command = {
     type: 'complete';
     result: Model;
@@ -20,6 +21,9 @@ type Command = {
         refreshUrl: string;
         errors?: Step['errors'];
     };
+} | {
+    type: 'behavior';
+    behavior: Behavior;
 };
 export declare const executeSubmission: (props: {
     action: Action;

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

@@ -1,4 +1,4 @@
-declare const responseTypes: readonly ["step", "action", "exit"];
+declare const responseTypes: readonly ["step", "action", "exit", "modal"];
 export type ResponseType = (typeof responseTypes)[number];
 /**
  * Returns either 'step', 'action', or 'exit' based on the response headers and body.

package/build/types/revamp/flow/response-utils.d.ts

@@ -1,8 +1,9 @@
-import type { ActionResponseBody, ErrorResponseBody, JsonElement, Step } from '@wise/dynamic-flow-types/build/next';
+import type { ActionResponseBody, ErrorResponseBody, JsonElement, ModalBehavior, Step } from '@wise/dynamic-flow-types/build/next';
 export declare const assertResponseIsValid: (response: unknown) => void;
 export declare const parseResponseBodyAsJsonElement: (response: Response) => Promise<JsonElement>;
 export declare function isActionResponseBody(body: unknown): body is ActionResponseBody;
 export declare function assertActionResponseBody(body: unknown): asserts body is ActionResponseBody;
+export declare function assertModalResponseBody(body: unknown): asserts body is Omit<ModalBehavior, 'type'>;
 export declare function isErrorResponseBody(body: unknown): body is ErrorResponseBody;
 export declare function assertErrorResponseBody(body: unknown): asserts body is ErrorResponseBody;
 export declare function assertStepResponseBody(body: unknown): asserts body is Step;

package/build/types/revamp/renderers/mappers/externalComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import { ExternalConfirmationRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { ExternalConfirmationComponent } from '../../domain/components/step/ExternalConfirmationComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const externalComponentToProps: (component: ExternalConfirmationComponent, rendererMapperProps: RendererMapperProps) => ExternalConfirmationRendererProps;

package/build/types/revamp/renderers/mappers/modalContentComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import type { ModalContentRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { ModalContentComponent } from '../../domain/components/ModalContentComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const modalContentComponentToProps: (component: ModalContentComponent, rendererMapperProps: RendererMapperProps) => ModalContentRendererProps;

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

@@ -1,4 +1,4 @@
 import type { StepRendererProps } from '@wise/dynamic-flow-types/build/renderers';
-import type { StepDomainComponent } from '../domain/components/StepDomainComponent';
+import type { StepDomainComponent } from '../domain/components/step/StepDomainComponent';
 import { type RendererMapperProps } from './mappers/componentToRendererProps';
-export declare const stepComponentToProps: ({ uid, back, control, description, error, external, loadingState, step, title, components, onBehavior, }: StepDomainComponent, rendererMapperProps: RendererMapperProps) => StepRendererProps;
+export declare const stepComponentToProps: (component: StepDomainComponent, rendererMapperProps: RendererMapperProps) => StepRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.3.14",
+  "version": "4.5.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -53,11 +53,11 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.95.1",
+    "@transferwise/components": "46.96.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.19.1",
-    "@transferwise/neptune-css": "14.24.0",
-    "@types/node": "22.14.1",
+    "@transferwise/icons": "3.21.0",
+    "@transferwise/neptune-css": "14.24.3",
+    "@types/node": "22.15.3",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
@@ -65,7 +65,7 @@
     "@wise/art": "2.20.0",
     "@wise/components-theming": "^1.6.2",
     "babel-jest": "29.7.0",
-    "esbuild": "0.25.2",
+    "esbuild": "0.25.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -78,13 +78,13 @@
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
     "storybook": "^8.6.12",
-    "stylelint": "16.18.0",
+    "stylelint": "16.19.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.19.3",
     "typescript": "5.8.3",
-    "webpack": "5.99.6",
+    "webpack": "5.99.7",
     "@wise/dynamic-flow-renderers": "0.0.0",
     "@wise/dynamic-flow-fixtures": "0.0.1"
   },
@@ -102,7 +102,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.1.4"
+    "@wise/dynamic-flow-types": "3.3.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",