@wise/dynamic-flow-client 4.7.0 → 4.8.0

package/build/main.css

@@ -287,39 +287,63 @@ button.df-back-btn {
   height: auto;
   width: 100%;
 }
-/* narrow screens */
+/* wide screens (or default) */
 .df-image.xs img {
-  width: 50px;
+  width: 100px;
 }
 .df-image.sm img {
-  width: 100px;
+  width: 200px;
 }
 .df-image.md img {
-  width: 200px;
+  width: 300px;
 }
 .df-image.lg img {
-  width: 300px;
+  width: 500px;
 }
-/* wide screens */
-@media (width >=576px) {
+.df-image.xl img {
+  max-width: 600px;
+}
+/* narrow screens */
+@media (width <576px) {
   .df-image.xs img {
-    width: 100px;
+    width: 50px;
   }
 
   .df-image.sm img {
-    width: 200px;
+    width: 100px;
   }
 
   .df-image.md img {
-    width: 300px;
+    width: 200px;
   }
 
   .df-image.lg img {
-    width: 500px;
+    width: 300px;
+  }
+}
+/**
+  * This speficies the container for container queries about width.
+  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
+/* narrow container */
+@container (max-width: 576px) {
+  .df-image.xs img {
+    width: 50px;
   }
 
-  .df-image.xl img {
-    max-width: 600px;
+  .df-image.sm img {
+    width: 100px;
+  }
+
+  .df-image.md img {
+    width: 200px;
+  }
+
+  .df-image.lg img {
+    width: 300px;
   }
 }
 .df-back-btn .tw-avatar__content {

package/build/main.js

@@ -1100,6 +1100,8 @@ function getChildren(node) {
       return node.editableItemProps ? [node.editableItemProps] : [];
     case "input-select":
       return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
     case "input-checkbox":
@@ -1791,6 +1793,22 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1881,6 +1899,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
       return statusListComponentToProps(component, rendererMapperProps);
+    case "tabs":
+      return tabsComponentToProps(component, rendererMapperProps);
     case "text":
       return textInputComponentToProps(component, rendererMapperProps);
     case "tuple":
@@ -2868,6 +2888,30 @@ var sectionLayoutToComponent = (uid, { control, title, components, callToAction,
   });
 };
 
+// src/revamp/domain/components/TabsComponent.ts
+var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
+  type: "tabs"
+});
+
+// src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
+var tabsLayoutToComponent = (uid, { control, margin = "md", tabs }, mapperProps, schemaComponents) => createTabsComponent({
+  uid,
+  control,
+  margin,
+  tabs: tabs.map(({ components, tag, title }, tabIndex) => ({
+    tag,
+    title,
+    components: components.map(
+      (c, componentIndex) => mapLayoutToComponent(
+        `${uid}.tabs-${tabIndex}-${componentIndex}`,
+        c,
+        mapperProps,
+        schemaComponents
+      )
+    )
+  }))
+});
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2911,6 +2955,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
+    case "tabs":
+      return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -3542,6 +3588,13 @@ var parseResponseBodyAsJsonElement = async (response) => {
     return null;
   }
 };
+var parseResponseBodyAsText = async (response) => {
+  try {
+    return await response.text();
+  } catch (e) {
+    return null;
+  }
+};
 function isActionResponseBody(body) {
   return (0, import_dynamic_flow_types.validateActionResponse)(body).valid;
 }
@@ -6019,7 +6072,7 @@ var executeSubmission = async (props) => {
       const extra = { actionId, errorMessage: "Network Error" };
       trackEvent("Action Failed", extra);
       logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
-      return { type: "error", body: {} };
+      return { type: "error" };
     }
     if (!response.ok) {
       return handleErrorResponse(response, actionId);
@@ -6062,16 +6115,27 @@ var executeSubmission = async (props) => {
     }
   };
   const handleErrorResponse = async (response, actionId) => {
-    const body = await parseResponseBodyAsJsonElement(response);
+    const body = await parseResponseBodyAsJsonElement(response.clone());
     if (isErrorResponseBody(body)) {
       const refreshUrl = body.refreshUrl || body.refreshFormUrl;
       const { error, validation, analytics } = body;
       trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
       const errors = { error, validation };
-      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : { type: "error", body: { errors, analytics }, statusCode: response.status };
+      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
+        type: "error",
+        body: { errors, analytics },
+        httpError: { statusCode: response.status }
+      };
     }
     trackEvent("Action Failed", { actionId, statusCode: response.status });
-    return { type: "error", body: {}, statusCode: response.status };
+    const errorMessage = await parseResponseBodyAsText(response);
+    return {
+      type: "error",
+      httpError: {
+        message: errorMessage || void 0,
+        statusCode: response.status
+      }
+    };
   };
   return triggerAction(props.action, props.model, props.isInitial);
 };
@@ -6495,7 +6559,7 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onAction = (0, import_react3.useCallback)(async (action) => {
-    var _a2;
+    var _a2, _b, _c, _d, _e, _f, _g;
     try {
       rootComponentRef.current.setLoadingState("submitting");
       const model = (_a2 = await rootComponentRef.current.getSubmittableValue()) != null ? _a2 : null;
@@ -6522,7 +6586,7 @@ function useDynamicFlowCore(props) {
         }
         case "error": {
           const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-          const { errors = { error: genericErrorMessage } } = command.body;
+          const errors = (_c = (_b = command.body) == null ? void 0 : _b.errors) != null ? _c : { error: genericErrorMessage };
           if (stepRef.current) {
             updateStep(
               __spreadProps(__spreadValues({}, stepRef.current), {
@@ -6539,12 +6603,13 @@ function useDynamicFlowCore(props) {
               etagRef.current
             );
           } else {
+            const errorMessage = ((_e = (_d = command.body) == null ? void 0 : _d.errors) == null ? void 0 : _e.error) || ((_f = command.httpError) == null ? void 0 : _f.message) || "Initial request failed";
             closeWithError(
-              new Error("Initial request failed", {
+              new Error(errorMessage, {
                 cause: `method: ${action.method}, url: ${action.url}`
               }),
               {},
-              command.statusCode
+              (_g = command.httpError) == null ? void 0 : _g.statusCode
             );
           }
           break;

package/build/main.mjs

@@ -1057,6 +1057,8 @@ function getChildren(node) {
       return node.editableItemProps ? [node.editableItemProps] : [];
     case "input-select":
       return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
     case "input-checkbox":
@@ -1748,6 +1750,22 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1838,6 +1856,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
       return statusListComponentToProps(component, rendererMapperProps);
+    case "tabs":
+      return tabsComponentToProps(component, rendererMapperProps);
     case "text":
       return textInputComponentToProps(component, rendererMapperProps);
     case "tuple":
@@ -2825,6 +2845,30 @@ var sectionLayoutToComponent = (uid, { control, title, components, callToAction,
   });
 };
 
+// src/revamp/domain/components/TabsComponent.ts
+var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
+  type: "tabs"
+});
+
+// src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
+var tabsLayoutToComponent = (uid, { control, margin = "md", tabs }, mapperProps, schemaComponents) => createTabsComponent({
+  uid,
+  control,
+  margin,
+  tabs: tabs.map(({ components, tag, title }, tabIndex) => ({
+    tag,
+    title,
+    components: components.map(
+      (c, componentIndex) => mapLayoutToComponent(
+        `${uid}.tabs-${tabIndex}-${componentIndex}`,
+        c,
+        mapperProps,
+        schemaComponents
+      )
+    )
+  }))
+});
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2868,6 +2912,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
+    case "tabs":
+      return tabsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     default:
       throw new Error(`Invalid layout type in ${JSON.stringify(layout)}`);
   }
@@ -3499,6 +3545,13 @@ var parseResponseBodyAsJsonElement = async (response) => {
     return null;
   }
 };
+var parseResponseBodyAsText = async (response) => {
+  try {
+    return await response.text();
+  } catch (e) {
+    return null;
+  }
+};
 function isActionResponseBody(body) {
   return validateActionResponse(body).valid;
 }
@@ -5976,7 +6029,7 @@ var executeSubmission = async (props) => {
       const extra = { actionId, errorMessage: "Network Error" };
       trackEvent("Action Failed", extra);
       logEvent("error", "Dynamic Flow - Action Failed Unexpectedly", extra);
-      return { type: "error", body: {} };
+      return { type: "error" };
     }
     if (!response.ok) {
       return handleErrorResponse(response, actionId);
@@ -6019,16 +6072,27 @@ var executeSubmission = async (props) => {
     }
   };
   const handleErrorResponse = async (response, actionId) => {
-    const body = await parseResponseBodyAsJsonElement(response);
+    const body = await parseResponseBodyAsJsonElement(response.clone());
     if (isErrorResponseBody(body)) {
       const refreshUrl = body.refreshUrl || body.refreshFormUrl;
       const { error, validation, analytics } = body;
       trackEvent("Action Failed", __spreadProps(__spreadValues({}, analytics), { actionId, statusCode: response.status }));
       const errors = { error, validation };
-      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : { type: "error", body: { errors, analytics }, statusCode: response.status };
+      return refreshUrl ? { type: "refresh", body: { refreshUrl, errors } } : {
+        type: "error",
+        body: { errors, analytics },
+        httpError: { statusCode: response.status }
+      };
     }
     trackEvent("Action Failed", { actionId, statusCode: response.status });
-    return { type: "error", body: {}, statusCode: response.status };
+    const errorMessage = await parseResponseBodyAsText(response);
+    return {
+      type: "error",
+      httpError: {
+        message: errorMessage || void 0,
+        statusCode: response.status
+      }
+    };
   };
   return triggerAction(props.action, props.model, props.isInitial);
 };
@@ -6452,7 +6516,7 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onAction = useCallback2(async (action) => {
-    var _a2;
+    var _a2, _b, _c, _d, _e, _f, _g;
     try {
       rootComponentRef.current.setLoadingState("submitting");
       const model = (_a2 = await rootComponentRef.current.getSubmittableValue()) != null ? _a2 : null;
@@ -6479,7 +6543,7 @@ function useDynamicFlowCore(props) {
         }
         case "error": {
           const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
-          const { errors = { error: genericErrorMessage } } = command.body;
+          const errors = (_c = (_b = command.body) == null ? void 0 : _b.errors) != null ? _c : { error: genericErrorMessage };
           if (stepRef.current) {
             updateStep(
               __spreadProps(__spreadValues({}, stepRef.current), {
@@ -6496,12 +6560,13 @@ function useDynamicFlowCore(props) {
               etagRef.current
             );
           } else {
+            const errorMessage = ((_e = (_d = command.body) == null ? void 0 : _d.errors) == null ? void 0 : _e.error) || ((_f = command.httpError) == null ? void 0 : _f.message) || "Initial request failed";
             closeWithError(
-              new Error("Initial request failed", {
+              new Error(errorMessage, {
                 cause: `method: ${action.method}, url: ${action.url}`
               }),
               {},
-              command.statusCode
+              (_g = command.httpError) == null ? void 0 : _g.statusCode
             );
           }
           break;

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

@@ -0,0 +1,11 @@
+import { BaseLayoutComponent, DomainComponent } from '../types';
+export type TabsComponent = BaseLayoutComponent & {
+    type: 'tabs';
+    tabs: Tab[];
+};
+export type Tab = {
+    title: string;
+    components: DomainComponent[];
+    tag?: string;
+};
+export declare const createTabsComponent: (tabsProps: Pick<TabsComponent, "uid" | "control" | "margin" | "tabs">) => TabsComponent;

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

@@ -0,0 +1,5 @@
+import { TabsLayout } from '@wise/dynamic-flow-types/build/next';
+import { TabsComponent } from '../../components/TabsComponent';
+import { MapperProps } from '../schema/types';
+import { SchemaComponent } from '../../types';
+export declare const tabsLayoutToComponent: (uid: string, { control, margin, tabs }: TabsLayout, mapperProps: MapperProps, schemaComponents: SchemaComponent[]) => TabsComponent;

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

@@ -38,9 +38,10 @@ 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';
+import { TabsComponent } from './components/TabsComponent';
 export type DomainComponent = SchemaComponent | LayoutComponent | RootDomainComponent | StepDomainComponent;
 export type SchemaComponent = PersistAsyncComponent | AllOfComponent | BooleanInputComponent | ConstComponent | DateInputComponent | IntegerInputComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | RepeatableComponent | SelectInputComponent | TextInputComponent | TupleComponent | UploadInputComponent;
-export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent;
+export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent | TabsComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {

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

@@ -10,11 +10,14 @@ type Command = {
     etag: string | null;
 } | {
     type: 'error';
-    body: {
+    body?: {
         analytics?: ErrorResponseBody['analytics'];
         errors?: Step['errors'];
     };
-    statusCode?: number;
+    httpError?: {
+        message?: string;
+        statusCode?: number;
+    };
 } | {
     type: 'refresh';
     body: {

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

@@ -1,6 +1,7 @@
 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 const parseResponseBodyAsText: (response: Response) => Promise<string | null>;
 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'>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -46,7 +46,7 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.97.5",
+    "@transferwise/components": "46.98.1",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.22.0",
     "@transferwise/neptune-css": "14.24.4",
@@ -57,13 +57,13 @@
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.21.2",
     "@wise/components-theming": "^1.6.3",
-    "babel-jest": "29.7.0",
+    "babel-jest": "30.0.2",
     "esbuild": "0.25.5",
     "eslint-plugin-storybook": "9.0.10",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest": "30.0.2",
+    "jest-environment-jsdom": "30.0.2",
     "jest-fetch-mock": "^3.0.3",
-    "jest-watch-typeahead": "^2.2.2",
+    "jest-watch-typeahead": "^3.0.1",
     "npm-run-all2": "7.0.2",
     "postcss": "^8.5.5",
     "postcss-cli": "^11.0.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.5.0"
+    "@wise/dynamic-flow-types": "3.6.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",