@wise/dynamic-flow-client 3.24.1 → 3.25.1

package/build/main.mjs

@@ -6965,12 +6965,18 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
     control,
     markdown,
     margin,
-    callToAction: callToAction ? getComponentCallToAction(callToAction, onAction) : void 0,
+    callToAction: getComponentCallToAction(callToAction, onAction),
     context: mapLegacyContext(context)
   });
 };
 var getComponentCallToAction = (callToAction, onAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
   const { accessibilityDescription, behavior, title } = callToAction;
+  if ("type" in behavior) {
+    return void 0;
+  }
   if (behavior.link) {
     const { url } = behavior.link;
     return {
@@ -7071,9 +7077,13 @@ var buttonLayoutToComponent = (uid, button, mapperProps) => {
 var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
   const { onAction, onLink, step } = mapperProps;
   const { context, control, disabled, margin = "md", pinOrder, size, title, behavior } = button;
-  const { action, link } = behavior;
-  const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : null;
-  const onClick = (() => {
+  const getOnClick = () => {
+    if ("type" in behavior) {
+      return () => {
+      };
+    }
+    const { action, link } = behavior;
+    const inlinedAction = action ? inlineAction(action, step == null ? void 0 : step.actions) : null;
     if (inlinedAction) {
       return () => {
         void onAction(inlinedAction);
@@ -7086,7 +7096,7 @@ var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
     }
     return () => {
     };
-  })();
+  };
   return createButtonComponent({
     uid,
     context: mapLegacyContext(context != null ? context : "neutral"),
@@ -7096,7 +7106,7 @@ var buttonLayoutToComponentWithBehavior = (uid, button, mapperProps) => {
     pinOrder,
     size,
     title: title != null ? title : "",
-    onClick
+    onClick: getOnClick()
   });
 };
 var buttonLayoutToComponentWithAction = (uid, button, mapperProps) => {
@@ -10109,23 +10119,57 @@ var createReviewComponent = (reviewProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/reviewLayoutToComponent.ts
-var reviewLayoutToComponent = (uid, { fields, title, callToAction, control, margin = "md", orientation, action }, { onAction }) => createReviewComponent({
+var reviewLayoutToComponent = (uid, { fields, title, callToAction, control, margin = "md", orientation, action }, { onAction, onLink }) => createReviewComponent({
   uid,
-  callToAction: getReviewAction(onAction, callToAction, action),
+  callToAction: getReviewAction({ onAction, onLink, callToAction, action }),
   control: getOrientationControl({ control, orientation }),
-  fields: fields.map((field) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, field), { help: (_a = field.help) == null ? void 0 : _a.markdown });
-  }),
+  fields: fields.map(({ label, value, rawValue, help }) => ({
+    label,
+    value,
+    rawValue,
+    help: help == null ? void 0 : help.markdown
+  })),
   margin,
   title
 });
-var getReviewAction = (onAction, callToAction, action) => {
+var getReviewAction = ({ onAction, onLink, callToAction, action }) => {
   if (callToAction) {
+    const { action: ctaAction, behavior, title } = callToAction;
+    if (behavior) {
+      if ("type" in behavior) {
+        return void 0;
+      }
+      const { accessibilityDescription, action: behaviorAction, link } = behavior;
+      const onClick = () => {
+        if (behaviorAction) {
+          return () => {
+            void onAction(behaviorAction);
+          };
+        }
+        if (link) {
+          return () => {
+            onLink(link.url);
+          };
+        }
+      };
+      return {
+        accessibilityDescription,
+        href: link == null ? void 0 : link.url,
+        title,
+        onClick
+      };
+    }
+    if (ctaAction) {
+      return {
+        title,
+        onClick: () => {
+          void onAction(ctaAction);
+        }
+      };
+    }
     return {
-      title: callToAction.title,
+      title,
       onClick: () => {
-        void onAction(callToAction.action);
       }
     };
   }
@@ -10299,18 +10343,32 @@ var createStatusListComponent = (statusListProps) => __spreadProps(__spreadValue
 var statusListLayoutToComponent = (uid, { control, items, margin = "md", title }, { onAction, onLink }) => createStatusListComponent({
   uid,
   control,
-  items: items.map((item) => {
-    var _a, _b, _c;
-    return __spreadProps(__spreadValues({}, item), {
-      href: (_c = (_b = (_a = item == null ? void 0 : item.callToAction) == null ? void 0 : _a.behavior) == null ? void 0 : _b.link) == null ? void 0 : _c.url,
-      callToAction: item.callToAction ? getItemCallToAction(item.callToAction, onAction, onLink) : void 0
-    });
-  }),
+  items: items.map((item) => __spreadProps(__spreadValues({}, item), {
+    href: getItemHref(item.callToAction),
+    callToAction: getItemCallToAction(item.callToAction, onAction, onLink)
+  })),
   margin,
   title
 });
+var getItemHref = (callToAction) => {
+  var _a;
+  if (!callToAction) {
+    return void 0;
+  }
+  const { behavior } = callToAction;
+  if ("type" in behavior) {
+    return void 0;
+  }
+  return (_a = behavior == null ? void 0 : behavior.link) == null ? void 0 : _a.url;
+};
 var getItemCallToAction = (callToAction, onAction, onLink) => {
+  if (!callToAction) {
+    return void 0;
+  }
   const { accessibilityDescription, behavior, title } = callToAction;
+  if ("type" in behavior) {
+    return void 0;
+  }
   if (behavior.link) {
     const { url } = behavior.link;
     return {
@@ -13220,15 +13278,8 @@ var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    const action = callToAction ? {
-      text: callToAction.title,
-      onClick: (event) => {
-        event.preventDefault();
-        callToAction.onClick();
-      }
-    } : void 0;
     return /* @__PURE__ */ jsxs19("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ jsx54(Header6, { title: title != null ? title : "", action }),
+      (title || callToAction) && /* @__PURE__ */ jsx54(Header6, { title: title != null ? title : "", action: getReviewAction2(callToAction) }),
       /* @__PURE__ */ jsx54("div", { className: margin, children: /* @__PURE__ */ jsx54(
         DefinitionList,
         {
@@ -13273,6 +13324,27 @@ var getFieldValue = (value, help, orientation) => {
   }
   return value;
 };
+var getReviewAction2 = (callToAction) => {
+  if (!callToAction) {
+    return void 0;
+  }
+  const { accessibilityDescription, href, title, onClick } = callToAction;
+  if (href) {
+    return {
+      "aria-label": accessibilityDescription,
+      href,
+      text: title
+    };
+  }
+  return {
+    "aria-label": accessibilityDescription,
+    text: title,
+    onClick: (event) => {
+      event.preventDefault();
+      onClick();
+    }
+  };
+};
 
 // ../renderers/src/step/StepRenderer.tsx
 import { useMemo as useMemo3 } from "react";
@@ -18337,21 +18409,42 @@ var getDefinitionListLayout = (review) => {
   }
 };
 function DynamicReview(props) {
+  var _a;
   const review = props.component;
   const margin = getMargin2(review.margin || "xs");
-  const getReviewAction2 = (title, action) => ({
-    text: title != null ? title : "",
-    href: action.url,
-    onClick: (event) => {
+  const getReviewAction3 = (callToAction2) => {
+    const { title, action, behavior } = callToAction2;
+    if (behavior) {
+      const { action: behaviorAction, link } = behavior;
+      if (link) {
+        return {
+          text: title != null ? title : "",
+          href: link == null ? void 0 : link.url
+        };
+      }
+      if (behaviorAction) {
+        return {
+          text: title != null ? title : "",
+          onClick: behaviorAction ? getOnClick(behaviorAction) : void 0
+        };
+      }
+    }
+    return {
+      text: title != null ? title : "",
+      onClick: action ? getOnClick(action) : void 0
+    };
+  };
+  const getOnClick = (action) => {
+    return (event) => {
       event.preventDefault();
       if (action) {
         props.onAction(action);
       }
-    }
-  });
+    };
+  };
   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;
+  const callToAction = review.callToAction ? getReviewAction3(review.callToAction) : null;
+  const legacyCallToAction = !callToAction && review.action ? { text: (_a = review.action.title) != null ? _a : "", onClick: getOnClick(review.action) } : null;
   return /* @__PURE__ */ jsxs40("div", { className: margin, children: [
     review.title && /* @__PURE__ */ jsx111(Header14, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
     /* @__PURE__ */ jsx111("div", { className: margin, children: /* @__PURE__ */ jsx111(DefinitionList3, { layout: orientation, definitions: getDefinitions(orientation, review) }) })

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

@@ -9,8 +9,11 @@ export type ReviewField = {
     help?: string;
     label: string;
     value: string;
+    rawValue?: string;
 };
 export type ReviewCallToAction = {
+    accessibilityDescription?: string;
+    href?: string;
     title: string;
     onClick: () => void;
 };

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

@@ -1,3 +1,3 @@
 import type { ReviewLayout } from '@wise/dynamic-flow-types/build/next';
 import type { MapperProps } from '../schema/types';
-export declare const reviewLayoutToComponent: (uid: string, { fields, title, callToAction, control, margin, orientation, action }: ReviewLayout, { onAction }: MapperProps) => import("../../components/ReviewComponent").ReviewComponent;
+export declare const reviewLayoutToComponent: (uid: string, { fields, title, callToAction, control, margin, orientation, action }: ReviewLayout, { onAction, onLink }: MapperProps) => import("../../components/ReviewComponent").ReviewComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.24.1",
+  "version": "3.25.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -83,8 +83,8 @@
     "tsx": "4.19.1",
     "typescript": "5.6.3",
     "webpack": "5.95.0",
-    "@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.31",
@@ -101,7 +101,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.26.1"
+    "@wise/dynamic-flow-types": "2.27.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",