@wise/dynamic-flow-client 3.10.0 → 3.11.0

package/build/main.mjs

@@ -1269,11 +1269,14 @@ var isStringSchemaWithUpload = (schema) => isStringSchema(schema) && schema.form
 var isSchemaWithPersistAsync = (schema) => "persistAsync" in schema && !isNullish(schema.persistAsync);
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({ back, external, loadingState, trackEvent }, children) => ({
+var stepComponentToProps = ({ back, description, error, external, loadingState, title, trackEvent }, children) => ({
   type: "step",
   back,
+  description,
+  error,
   external,
   loadingState,
+  title,
   trackEvent,
   children
 });
@@ -6497,27 +6500,6 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
   context: mapLegacyContext(context)
 });
 
-// src/revamp/domain/components/HeadingComponent.ts
-var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
-  type: "heading"
-}, headingProps), {
-  getSubmittableValue: async () => null,
-  getSummary: () => ({}),
-  // Noop
-  getLocalValue: () => null,
-  validate: () => true
-});
-
-// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
-var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
-  uid,
-  align: mapLegacyAlign(align),
-  control,
-  margin,
-  size,
-  text
-});
-
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
@@ -9228,6 +9210,27 @@ var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin
   });
 };
 
+// src/revamp/domain/components/HeadingComponent.ts
+var createHeadingComponent = (headingProps) => __spreadProps(__spreadValues({
+  type: "heading"
+}, headingProps), {
+  getSubmittableValue: async () => null,
+  getSummary: () => ({}),
+  // Noop
+  getLocalValue: () => null,
+  validate: () => true
+});
+
+// src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
+var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md", control, text }) => createHeadingComponent({
+  uid,
+  align: mapLegacyAlign(align),
+  control,
+  margin,
+  size,
+  text
+});
+
 // src/revamp/domain/components/ImageComponent.ts
 var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
   type: "image"
@@ -9700,7 +9703,7 @@ var mapStepToComponent = (_a) => {
   ]);
   var _a2, _b2;
   const { httpClient, step, updateComponent } = restProps;
-  const { id, navigation, external, key, layout = [], polling } = step;
+  const { id, description, errors, external, key, layout = [], navigation, polling, title } = step;
   const backNavigation = (_a2 = navigation == null ? void 0 : navigation.back) != null ? _a2 : navigation == null ? void 0 : navigation.backButton;
   const back = backNavigation ? {
     title: backNavigation.title,
@@ -9737,34 +9740,21 @@ var mapStepToComponent = (_a) => {
       onRefresh
     }))
   );
-  const additionalComponents = makeAdditionalComponents(step, uid, displayStepTitle);
   const stepComponent = createStepComponent({
     uid,
-    components: [...additionalComponents, ...layoutComponents],
     back,
+    components: layoutComponents,
+    description,
+    error: errors == null ? void 0 : errors.error,
     external,
     loadingState,
     stepPolling,
     updateComponent,
+    title: displayStepTitle ? title : void 0,
     trackEvent
   });
   return stepComponent;
 };
-var makeAdditionalComponents = (step, uid, displayStepTitle) => {
-  const { title, errors } = step;
-  const heading = title && displayStepTitle ? headingLayoutToComponent(`${uid}.title`, {
-    type: "heading",
-    text: title,
-    align: "center",
-    size: "lg"
-  }) : void 0;
-  const stepError = (errors == null ? void 0 : errors.error) ? alertLayoutToComponent(`${uid}.global-error`, {
-    type: "alert",
-    markdown: errors.error,
-    context: "negative"
-  }) : void 0;
-  return [...heading ? [heading] : [], ...stepError ? [stepError] : []];
-};
 
 // src/revamp/flow/executeRefresh.ts
 var executeRefresh = async (props) => {
@@ -12280,7 +12270,7 @@ import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs20 } from "react/jsx-
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
-    const orientation = control === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+    const orientation = mapControlToDefinitionListLayout(control);
     const action = callToAction ? {
       text: callToAction.title,
       onClick: (event) => {
@@ -12305,6 +12295,21 @@ var ReviewRenderer = {
   }
 };
 var ReviewRenderer_default = ReviewRenderer;
+var mapControlToDefinitionListLayout = (control) => {
+  switch (control) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
+};
 var getFieldValue = (value, help, orientation) => {
   if (help) {
     return orientation === "HORIZONTAL_RIGHT_ALIGNED" ? /* @__PURE__ */ jsxs20(Fragment10, { children: [
@@ -12430,13 +12435,14 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // src/revamp/wise/renderers/step/StepRenderer.tsx
+import { Alert as Alert3 } from "@transferwise/components";
 import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, loadingState, external, trackEvent, children } = props;
+  const { back, description, error, external, loadingState, title, trackEvent, children } = props;
   const value = useMemo4(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
@@ -12444,6 +12450,9 @@ function StepRendererComponent(props) {
   }
   return /* @__PURE__ */ jsxs23(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ jsx58(BackButton_default, __spreadValues({}, back)) : null,
+    title ? /* @__PURE__ */ jsx58("h2", { className: "text-xs-center m-b-2", children: title }) : void 0,
+    description ? /* @__PURE__ */ jsx58("p", { className: "text-xs-center m-b-2", children: description }) : void 0,
+    error ? /* @__PURE__ */ jsx58(Alert3, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }
@@ -13813,7 +13822,7 @@ var import_classnames16 = __toESM(require_classnames());
 import { useEffect as useEffect17, useMemo as useMemo17, useState as useState27 } from "react";
 
 // src/legacy/layout/alert/DynamicAlert.tsx
-import { Alert as Alert3 } from "@transferwise/components";
+import { Alert as Alert4 } from "@transferwise/components";
 
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 import { Avatar as Avatar5, AvatarType as AvatarType4 } from "@transferwise/components";
@@ -13914,7 +13923,7 @@ import { jsx as jsx69 } from "react/jsx-runtime";
 var DynamicAlert = (props) => {
   const alert = props.component;
   return /* @__PURE__ */ jsx69(
-    Alert3,
+    Alert4,
     {
       type: mapContextToAlertType(legacy_mapContext(alert.context)),
       className: getMargin2(alert.margin),
@@ -17127,9 +17136,21 @@ var getFieldValue2 = (value, help, orientation) => {
   }
   return value;
 };
-var getReviewLayout = (review) => {
+var getDefinitionListLayout = (review) => {
   const orientation = review.control || review.orientation;
-  return orientation === "horizontal" ? "HORIZONTAL_RIGHT_ALIGNED" : "VERTICAL_ONE_COLUMN";
+  switch (orientation) {
+    case "horizontal":
+    case "horizontal-end-aligned":
+      return "HORIZONTAL_RIGHT_ALIGNED";
+    case "horizontal-start-aligned":
+      return "HORIZONTAL_LEFT_ALIGNED";
+    case "vertical-two-column":
+      return "VERTICAL_TWO_COLUMN";
+    case "vertical":
+    case "vertical-one-column":
+    default:
+      return "VERTICAL_ONE_COLUMN";
+  }
 };
 function DynamicReview(props) {
   const review = props.component;
@@ -17144,7 +17165,7 @@ function DynamicReview(props) {
       }
     }
   });
-  const orientation = getReviewLayout(review);
+  const orientation = getDefinitionListLayout(review);
   const callToAction = review.callToAction ? getReviewAction2(review.callToAction.title, review.callToAction.action) : null;
   const legacyCallToAction = !callToAction && review.action ? getReviewAction2(review.action.title || "", review.action) : null;
   return /* @__PURE__ */ jsxs40("div", { className: margin, children: [

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

@@ -6,19 +6,22 @@ export type StepDomainComponent = BaseComponent & {
     type: 'step';
     back?: BackNavigation;
     components: DomainComponent[];
+    description?: string;
+    error?: string;
     external?: Step['external'];
     loadingState: LoadingState;
+    title?: string;
+    trackEvent: AnalyticsEventDispatcher<string>;
     setLoadingState: (loadingState: LoadingState) => void;
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValue;
     stop: () => void;
-    trackEvent: AnalyticsEventDispatcher<string>;
 };
 type BackNavigation = {
     title?: string;
     onClick: () => void;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "uid" | "components" | "external" | "trackEvent" | "back" | "loadingState"> & {
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "error" | "uid" | "title" | "components" | "description" | "external" | "trackEvent" | "back" | "loadingState"> & {
     stepPolling?: StepPolling | undefined;
     updateComponent: UpdateComponent;
 }) => StepDomainComponent;

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

@@ -1,4 +1,4 @@
 import type { ReactNode } from 'react';
 import type { StepDomainComponent } from '../domain/components/StepDomainComponent';
 import type { StepRendererProps } from './types';
-export declare const stepComponentToProps: ({ back, external, loadingState, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;
+export declare const stepComponentToProps: ({ back, description, error, external, loadingState, title, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;

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

@@ -29,10 +29,13 @@ export type StepRendererProps = {
         title?: string;
         onClick: () => void;
     };
+    description?: string;
+    error?: string;
     external?: {
         url: string;
     };
     loadingState: LoadingState;
+    title?: string;
     trackEvent: AnalyticsEventDispatcher<string>;
     children: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -44,7 +44,6 @@
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
     "@transferwise/neptune-css": "14.10.0",
-    "@transferwise/neptune-tokens": "8.9.2",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "29.5.12",
     "@types/react": "18",