@wise/dynamic-flow-client 4.10.0 → 4.11.0-experimental-1c8f72d

package/build/main.css

@@ -361,5 +361,5 @@ button.df-back-btn {
   flex-direction: column;
 }
 .chips-container {
-  overflow-x: scroll;
+  overflow-x: auto;
 }

package/build/main.js

@@ -2148,6 +2148,7 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
   switch (behavior.type) {
     case "action":
     case "modal":
+    case "copy":
     case "dismiss": {
       return {
         type: behavior.type,
@@ -6558,6 +6559,7 @@ function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCompletion = useStableCallback(rest.onCompletion);
+  const onCopy = useStableCallback(props.onCopy);
   const onValueChange = useStableCallback(props.onValueChange);
   const onLink = useStableCallback(props.onLink);
   const onError = useStableCallback(rest.onError);
@@ -6678,6 +6680,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.setLoadingState("submitting");
         rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
@@ -6686,11 +6689,18 @@ function useDynamicFlowCore(props) {
           const canSubmit = skipValidation || rootComponentRef.current.validate();
           if (canSubmit) {
             void onAction(action, model);
+          } else {
+            rootComponentRef.current.setLoadingState("idle");
           }
         } catch (e) {
+          rootComponentRef.current.setLoadingState("idle");
         }
         break;
       }
+      case "copy": {
+        navigator.clipboard.writeText(behavior.content).then(() => onCopy(behavior.content)).catch(() => onCopy(null));
+        break;
+      }
       case "non-merging-action": {
         rootComponentRef.current.dismissAllModals();
         const { action } = behavior;
@@ -6743,6 +6753,7 @@ function useDynamicFlowCore(props) {
       });
       switch (command.type) {
         case "complete": {
+          rootComponentRef.current.setLoadingState("idle");
           onCompletion(command.result);
           rootComponentRef.current.stop();
           trackCoreEvent("Succeeded");
@@ -6755,6 +6766,7 @@ function useDynamicFlowCore(props) {
           break;
         }
         case "error": {
+          rootComponentRef.current.setLoadingState("idle");
           const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
           const errors = (_b = (_a2 = command.body) == null ? void 0 : _a2.errors) != null ? _b : { error: genericErrorMessage };
           if (stepRef.current) {

package/build/main.mjs

@@ -2105,6 +2105,7 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
   switch (behavior.type) {
     case "action":
     case "modal":
+    case "copy":
     case "dismiss": {
       return {
         type: behavior.type,
@@ -6515,6 +6516,7 @@ function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCompletion = useStableCallback(rest.onCompletion);
+  const onCopy = useStableCallback(props.onCopy);
   const onValueChange = useStableCallback(props.onValueChange);
   const onLink = useStableCallback(props.onLink);
   const onError = useStableCallback(rest.onError);
@@ -6635,6 +6637,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = useCallback2(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.setLoadingState("submitting");
         rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
@@ -6643,11 +6646,18 @@ function useDynamicFlowCore(props) {
           const canSubmit = skipValidation || rootComponentRef.current.validate();
           if (canSubmit) {
             void onAction(action, model);
+          } else {
+            rootComponentRef.current.setLoadingState("idle");
           }
         } catch (e) {
+          rootComponentRef.current.setLoadingState("idle");
         }
         break;
       }
+      case "copy": {
+        navigator.clipboard.writeText(behavior.content).then(() => onCopy(behavior.content)).catch(() => onCopy(null));
+        break;
+      }
       case "non-merging-action": {
         rootComponentRef.current.dismissAllModals();
         const { action } = behavior;
@@ -6700,6 +6710,7 @@ function useDynamicFlowCore(props) {
       });
       switch (command.type) {
         case "complete": {
+          rootComponentRef.current.setLoadingState("idle");
           onCompletion(command.result);
           rootComponentRef.current.stop();
           trackCoreEvent("Succeeded");
@@ -6712,6 +6723,7 @@ function useDynamicFlowCore(props) {
           break;
         }
         case "error": {
+          rootComponentRef.current.setLoadingState("idle");
           const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
           const errors = (_b = (_a2 = command.body) == null ? void 0 : _a2.errors) != null ? _b : { error: genericErrorMessage };
           if (stepRef.current) {

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

@@ -1,4 +1,4 @@
-import type { Action, ActionBehavior, DismissBehavior, Icon, JsonElement, LinkBehavior, Margin, ModalBehavior, Model } from '@wise/dynamic-flow-types/build/next';
+import type { ActionBehavior, CopyBehavior, DismissBehavior, Icon, JsonElement, LinkBehavior, Margin, ModalBehavior, Model } 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';
@@ -53,7 +53,7 @@ export interface LocalValueObject extends Record<string, LocalValuePrimitive | L
 export interface LocalValueArray extends Array<LocalValuePrimitive | LocalValueObject | LocalValueArray> {
 }
 export type CallToAction = {
-    type: 'action' | 'modal' | 'dismiss';
+    type: 'action' | 'modal' | 'dismiss' | 'copy';
     title: string;
     accessibilityDescription?: string;
     onClick: () => void;
@@ -64,7 +64,7 @@ export type CallToAction = {
     href: string;
     onClick: () => void;
 };
-export type Behavior = (ActionBehavior | RefreshBehavior | LinkBehavior | ModalBehavior | DismissBehavior | NonMergingActionBehaviour | NullAction) & {
+export type Behavior = (ActionBehavior | CopyBehavior | DismissBehavior | LinkBehavior | ModalBehavior | NonMergingActionBehaviour | NullAction | RefreshBehavior) & {
     analytics?: Record<string, unknown>;
 };
 type NonMergingActionBehaviour = Omit<ActionBehavior, 'type'> & {
@@ -127,7 +127,6 @@ export type BaseInputComponent<LV extends LocalValue> = BaseSchemaComponent<LV>
 };
 export type UpdateComponent = () => void;
 export type OnBehavior = (behavior: Behavior) => Promise<void>;
-export type OnAction = (action: Action) => Promise<void>;
 export type OnPoll = (url: string, errorBehavior: Behavior, signal: AbortSignal) => Promise<boolean>;
 export type OnLink = (url: string) => boolean;
 export type OnValueChange = () => void;

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

@@ -7,6 +7,7 @@ type DynamicFlowCorePropsBasic = {
     httpClient: HttpClient;
     renderers: Renderers;
     onCompletion: (result: Model) => void;
+    onCopy?: (copiedString: string | null) => void;
     onError: (error: unknown, status?: number) => void;
     onEvent?: AnalyticsEventHandler;
     onLog?: LoggingEventHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.10.0",
+  "version": "4.11.0-experimental-1c8f72d",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -42,8 +42,8 @@
     "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-links": "^9.0.18",
     "@storybook/react-vite": "9.0.18",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@transferwise/components": "46.100.1",
@@ -64,7 +64,7 @@
     "jest-environment-jsdom": "30.0.5",
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^3.0.1",
-    "npm-run-all2": "7.0.2",
+    "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
@@ -78,8 +78,8 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -95,7 +95,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.8.1"
+    "@wise/dynamic-flow-types": "3.9.0-experimental-1c8f72d"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",