@wise/dynamic-flow-client 3.15.3 → 3.16.1

package/build/main.mjs

@@ -1428,11 +1428,19 @@ var stepComponentToProps = ({
 
 // src/revamp/renderers/mappers/alertComponentToProps.ts
 var alertComponentToProps = ({
+  callToAction,
+  context,
+  control,
+  margin,
+  markdown
+}) => ({
+  type: "alert",
+  callToAction,
   context,
   control,
   margin,
   markdown
-}) => ({ type: "alert", context, control, margin, markdown });
+});
 
 // src/revamp/renderers/mappers/allOfComponentToProps.ts
 var allOfComponentToProps = ({ control, description, help, title }, children) => ({
@@ -5927,13 +5935,6 @@ var loadingIndicatorLayoutSchema = z.object({
   control: z.string().optional(),
   margin: sizeSchema.optional()
 });
-var alertLayoutSchema = z.object({
-  type: z.literal("alert"),
-  markdown: z.string(),
-  context: contextSchema.optional(),
-  control: z.string().optional(),
-  margin: sizeSchema.optional()
-});
 var paragraphLayoutSchema = z.object({
   type: z.literal("paragraph"),
   text: z.string(),
@@ -6088,6 +6089,9 @@ var actionTypeSchema = z.union([
   z.literal("negative")
 ]);
 var summarySchema = z.union([summaryProviderSchema, summarySummariserSchema]);
+var linkSchema = z.object({
+  url: z.string()
+});
 var actionSchema = z.object({
   title: z.string().optional(),
   type: actionTypeSchema.optional(),
@@ -6146,6 +6150,10 @@ var reviewLayoutFieldSchema = z.object({
   value: z.string(),
   help: helpSchema.optional()
 });
+var behaviorSchema = z.object({
+  action: actionSchema.optional(),
+  link: linkSchema.optional()
+});
 var searchResultSearchSchema = z.object({
   type: z.literal("search"),
   title: z.string(),
@@ -6176,44 +6184,6 @@ var linkHandlerSchema = z.object({
   regexPattern: z.string(),
   action: actionSchema
 });
-var blobSchemaSchema = z.object({
-  type: z.literal("blob"),
-  promoted: z.boolean().optional(),
-  $id: z.string().optional(),
-  title: z.string().optional(),
-  description: z.string().optional(),
-  control: z.string().optional(),
-  hidden: z.boolean().optional(),
-  icon: iconSchema.optional(),
-  image: imageSchema.optional(),
-  keywords: z.array(z.string()).optional(),
-  summary: summaryProviderSchema.optional(),
-  analyticsId: z.string().optional(),
-  validationAsync: validateAsyncSchema.optional(),
-  validationMessages: z.record(z.string()).optional(),
-  alert: alertLayoutSchema.optional(),
-  cameraConfig: jsonElementSchema.optional(),
-  accepts: z.array(z.string()).optional(),
-  maxSize: z.number().optional(),
-  source: uploadSourceSchema.optional(),
-  disabled: z.boolean().optional()
-});
-var constSchemaSchema = z.object({
-  hidden: z.boolean().optional(),
-  alert: alertLayoutSchema.optional(),
-  control: z.string().optional(),
-  promoted: z.boolean().optional(),
-  $id: z.string().optional(),
-  const: jsonElementSchema,
-  title: z.string().optional(),
-  description: z.string().optional(),
-  icon: iconSchema.optional(),
-  image: imageSchema.optional(),
-  keywords: z.array(z.string()).optional(),
-  summary: summaryProviderSchema.optional(),
-  analyticsId: z.string().optional(),
-  disabled: z.boolean().optional()
-});
 var pollingOnErrorSchema = z.object({
   action: actionSchema
 });
@@ -6225,6 +6195,11 @@ var reviewLayoutCallToActionSchema = z.object({
   title: z.string(),
   action: actionSchema
 });
+var alertLayoutCallToActionSchema = z.object({
+  title: z.string(),
+  accessibilityDescription: z.string().optional(),
+  behavior: behaviorSchema
+});
 var listLayoutSchema = z.object({
   type: z.literal("list"),
   items: z.array(listLayoutItemSchema),
@@ -6268,9 +6243,55 @@ var navigationSchema = z.object({
   back: navigationBackBehaviourSchema.optional(),
   stackBehavior: navigationStackBehaviorSchema.optional()
 });
+var alertLayoutSchema = z.object({
+  type: z.literal("alert"),
+  markdown: z.string(),
+  context: contextSchema.optional(),
+  control: z.string().optional(),
+  margin: sizeSchema.optional(),
+  callToAction: alertLayoutCallToActionSchema.optional()
+});
 var searchResponseBodySchema = z.object({
   results: z.array(searchResultSchema)
 });
+var blobSchemaSchema = z.object({
+  type: z.literal("blob"),
+  promoted: z.boolean().optional(),
+  $id: z.string().optional(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  control: z.string().optional(),
+  hidden: z.boolean().optional(),
+  icon: iconSchema.optional(),
+  image: imageSchema.optional(),
+  keywords: z.array(z.string()).optional(),
+  summary: summaryProviderSchema.optional(),
+  analyticsId: z.string().optional(),
+  validationAsync: validateAsyncSchema.optional(),
+  validationMessages: z.record(z.string()).optional(),
+  alert: alertLayoutSchema.optional(),
+  cameraConfig: jsonElementSchema.optional(),
+  accepts: z.array(z.string()).optional(),
+  maxSize: z.number().optional(),
+  source: uploadSourceSchema.optional(),
+  disabled: z.boolean().optional()
+});
+var constSchemaSchema = z.object({
+  hidden: z.boolean().optional(),
+  alert: alertLayoutSchema.optional(),
+  control: z.string().optional(),
+  promoted: z.boolean().optional(),
+  $id: z.string().optional(),
+  const: jsonElementSchema,
+  title: z.string().optional(),
+  description: z.string().optional(),
+  icon: iconSchema.optional(),
+  image: imageSchema.optional(),
+  keywords: z.array(z.string()).optional(),
+  summary: summaryProviderSchema.optional(),
+  analyticsId: z.string().optional(),
+  disabled: z.boolean().optional()
+});
 var layoutSchema = z.lazy(
   () => z.union([
     alertLayoutSchema,
@@ -6915,13 +6936,39 @@ var legacyActionTypeToControl = {
 var mapLegacyActionTypeToControl = (type) => type && type in legacyActionTypeToControl ? legacyActionTypeToControl[type] : "secondary";
 
 // src/revamp/domain/mappers/layout/alertLayoutToComponent.ts
-var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context = "neutral" }) => createAlertComponent({
-  uid,
-  control,
-  markdown,
-  margin,
-  context: mapLegacyContext(context)
-});
+var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context = "neutral", callToAction }, { onAction }) => {
+  return createAlertComponent({
+    uid,
+    control,
+    markdown,
+    margin,
+    callToAction: callToAction ? getComponentCallToAction(callToAction, onAction) : void 0,
+    context: mapLegacyContext(context)
+  });
+};
+var getComponentCallToAction = (callToAction, onAction) => {
+  const { accessibilityDescription, behavior, title } = callToAction;
+  if (behavior.link) {
+    const { url } = behavior.link;
+    return {
+      type: "link",
+      accessibilityDescription,
+      href: url,
+      title
+    };
+  }
+  if (behavior.action) {
+    const { action } = behavior;
+    return {
+      type: "action",
+      accessibilityDescription,
+      title,
+      onClick: () => {
+        void onAction(action);
+      }
+    };
+  }
+};
 
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
@@ -9605,7 +9652,7 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return createContainerComponent({
       uid,
       components: [
-        alertLayoutToComponent(`${uid}.container.alert`, alert),
+        alertLayoutToComponent(`${uid}.container.alert`, alert, mapperProps),
         getSchemaComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { uid: `${uid}.container` }), mapperProps)
       ]
     });
@@ -9901,13 +9948,17 @@ var getReviewAction = (onAction, callToAction, action) => {
   if (callToAction) {
     return {
       title: callToAction.title,
-      onClick: () => onAction(callToAction.action)
+      onClick: () => {
+        void onAction(callToAction.action);
+      }
     };
   }
   if (action == null ? void 0 : action.title) {
     return {
       title: action.title,
-      onClick: () => onAction(action)
+      onClick: () => {
+        void onAction(action);
+      }
     };
   }
   return void 0;
@@ -10104,7 +10155,7 @@ var mapLegacyStatus = (status) => {
 var mapLayoutToComponent = (uid, layout, mapperProps) => {
   switch (layout.type) {
     case "alert":
-      return alertLayoutToComponent(uid, layout);
+      return alertLayoutToComponent(uid, layout, mapperProps);
     case "box":
       return boxLayoutToComponent(uid, layout, mapperProps);
     case "button":
@@ -10877,7 +10928,20 @@ var getTextAlignmentAndMargin = (component) => `${getTextAlignment(component.ali
 import { jsx as jsx7 } from "react/jsx-runtime";
 var AlertRenderer = {
   canRenderType: "alert",
-  render: ({ context, markdown, margin }) => /* @__PURE__ */ jsx7(Alert2, { type: context, className: getMargin(margin), message: markdown })
+  render: ({ context, markdown, margin, callToAction }) => /* @__PURE__ */ jsx7(
+    Alert2,
+    {
+      type: context,
+      className: getMargin(margin),
+      message: markdown,
+      action: (callToAction == null ? void 0 : callToAction.type) === "link" ? {
+        text: callToAction.title,
+        "aria-label": callToAction.accessibilityDescription,
+        href: callToAction.href,
+        target: "_blank"
+      } : void 0
+    }
+  )
 };
 var AlertRenderer_default = AlertRenderer;
 
@@ -12099,23 +12163,26 @@ function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ jsx41(NavigationOptionsList2, { children: state.results.map((result) => /* @__PURE__ */ jsx41(
-    NavigationOption3,
-    {
-      title: result.title,
-      content: result.description,
-      media: /* @__PURE__ */ jsx41(NavigationOptionMedia, __spreadValues({}, result)),
-      showMediaCircle: false,
-      showMediaAtAllSizes: true,
-      onClick: () => {
-        trackEvent("Search Result Selected", __spreadValues({
-          type: result.type
-        }, result.type === "action" ? { actionId: result.id } : {}));
-        result.onClick();
-      }
-    },
-    JSON.stringify(result)
-  )) });
+  return /* @__PURE__ */ jsx41(NavigationOptionsList2, { children: state.results.map((result) => {
+    const { icon, image } = result;
+    return /* @__PURE__ */ jsx41(
+      NavigationOption3,
+      {
+        title: result.title,
+        content: result.description,
+        media: NavigationOptionMedia({ icon, image }),
+        showMediaCircle: false,
+        showMediaAtAllSizes: true,
+        onClick: () => {
+          trackEvent("Search Result Selected", __spreadValues({
+            type: result.type
+          }, result.type === "action" ? { actionId: result.id } : {}));
+          result.onClick();
+        }
+      },
+      JSON.stringify(result)
+    );
+  }) });
 }
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
@@ -12804,7 +12871,7 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // ../renderers/src/step/StepRenderer.tsx
-import { Alert as Alert3 } from "@transferwise/components";
+import { Alert as Alert3, Title } from "@transferwise/components";
 import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
@@ -12819,7 +12886,7 @@ function StepRendererComponent(props) {
   }
   return /* @__PURE__ */ jsxs22(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ jsx57(BackButton_default, __spreadValues({}, back)) : null,
-    title ? /* @__PURE__ */ jsx57("h2", { className: "text-xs-center m-b-2", children: title }) : void 0,
+    title ? /* @__PURE__ */ jsx57(Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
     description ? /* @__PURE__ */ jsx57("p", { className: "text-xs-center m-b-2", children: description }) : void 0,
     error ? /* @__PURE__ */ jsx57(Alert3, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
@@ -14349,17 +14416,36 @@ var getTextAlignmentAndMargin2 = (component) => `${getTextAlignment2(component.a
 
 // src/legacy/layout/alert/DynamicAlert.tsx
 import { jsx as jsx70 } from "react/jsx-runtime";
-var DynamicAlert = (props) => {
-  const alert = props.component;
+var DynamicAlert = ({ component: alert }) => {
+  const { context, markdown, margin } = alert;
   return /* @__PURE__ */ jsx70(
     Alert4,
     {
-      type: mapContextToAlertType(legacy_mapContext(alert.context)),
-      className: getMargin2(alert.margin),
-      message: alert.markdown
+      type: mapContextToAlertType(legacy_mapContext(context)),
+      className: getMargin2(margin),
+      message: markdown,
+      action: getAlertAction(alert)
     }
   );
 };
+var isAlertLayout = (layout) => {
+  return Object.hasOwnProperty.call(layout, "type") && layout.type === "alert";
+};
+var getAlertAction = (component) => {
+  if (!isAlertLayout(component) || !component.callToAction) {
+    return void 0;
+  }
+  const { title, accessibilityDescription, behavior } = component.callToAction;
+  if (!behavior.link) {
+    return void 0;
+  }
+  return {
+    text: title,
+    "aria-label": accessibilityDescription,
+    href: behavior.link.url,
+    target: "_blank"
+  };
+};
 var legacy_mapContext = (context) => {
   switch (context) {
     case "success":
@@ -16062,7 +16148,8 @@ var _FormControl = class _FormControl extends PureComponent {
       maxDate,
       value,
       mode,
-      describedBy
+      describedBy,
+      labelledBy
     } = this.props;
     switch (type) {
       case FormControlType.RADIO:
@@ -16227,6 +16314,7 @@ var _FormControl = class _FormControl extends PureComponent {
         return /* @__PURE__ */ jsx89(
           DateInput2,
           {
+            "aria-labelledby": labelledBy,
             dayAutoComplete: this.getAutocompleteValue({ suffix: "-day" }),
             yearAutoComplete: this.getAutocompleteValue({ suffix: "-year" }),
             disabled,
@@ -16477,7 +16565,8 @@ function SchemaFormControl(props) {
     onFocus,
     onBlur,
     onSearchChange,
-    describedBy
+    describedBy,
+    labelledBy
   } = props;
   const log = useLogger();
   const intl = useIntl16();
@@ -16514,6 +16603,7 @@ function SchemaFormControl(props) {
       intl
     }, mapSchemaToUploadOptions(schema)),
     describedBy,
+    labelledBy,
     required
   };
   return /* @__PURE__ */ jsx90("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ jsx90(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
@@ -18038,11 +18128,12 @@ var BasicTypeSchema = (props) => {
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
   const feedbackId = `${id}-feedback`;
+  const labelId = `${id}-label`;
   return !isHidden ? /* @__PURE__ */ jsxs45(Fragment22, { children: [
     props.schema.alert && /* @__PURE__ */ jsx116(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ jsxs45("div", { className: (0, import_classnames15.default)(formGroupClasses), children: [
       showLabel && /* @__PURE__ */ jsxs45("div", { className: "d-inline-block m-b-1", children: [
-        /* @__PURE__ */ jsx116("label", { className: "control-label d-inline", htmlFor: id, children: props.schema.title }),
+        /* @__PURE__ */ jsx116("label", { className: "control-label d-inline", htmlFor: id, id: labelId, children: props.schema.title }),
         !!schemaHelp && /* @__PURE__ */ jsx116(Help_default2, { help: schemaHelp })
       ] }),
       !showLabel && !!schemaHelp && /* @__PURE__ */ jsx116(Help_default2, { help: schemaHelp }),
@@ -18056,7 +18147,8 @@ var BasicTypeSchema = (props) => {
           onChange,
           onFocus,
           onBlur,
-          describedBy: feedbackId
+          describedBy: feedbackId,
+          labelledBy: labelId
         }
       ),
       /* @__PURE__ */ jsx116(

package/build/types/legacy/formControl/FormControl.d.ts

@@ -141,6 +141,7 @@ type FormControlProps = {
     uploadProps: UploadProps;
     value: Date | string | number | boolean | null;
     describedBy: string | undefined;
+    labelledBy: string | undefined;
 };
 type FormControlState = {
     prevValue: FormControlProps['value'];

package/build/types/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.d.ts

@@ -24,6 +24,7 @@ export type SchemaFormControlProps = {
     disabled?: boolean;
     describedBy?: string | undefined;
     invalid?: boolean;
+    labelledBy?: string | undefined;
     required?: boolean;
 };
 export default SchemaFormControl;

package/build/types/legacy/layout/alert/DynamicAlert.d.ts

@@ -1,5 +1,6 @@
-import { Alert as AlertType } from '@wise/dynamic-flow-types';
-declare const DynamicAlert: (props: {
-    component: AlertType;
-}) => import("react/jsx-runtime").JSX.Element;
+import { AlertLayout, Alert as AlertType } from '@wise/dynamic-flow-types';
+type DynamicAlertProps = {
+    component: AlertType | AlertLayout;
+};
+declare const DynamicAlert: ({ component: alert }: DynamicAlertProps) => import("react/jsx-runtime").JSX.Element;
 export default DynamicAlert;

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

@@ -3,5 +3,18 @@ export type AlertComponent = LayoutComponent & {
     type: 'alert';
     markdown: string;
     context: Context;
+    callToAction?: AlertCallToActionLink | AlertCallToAction;
 };
-export declare const createAlertComponent: (alertProps: Pick<AlertComponent, 'uid' | 'context' | 'control' | 'margin' | 'markdown'>) => AlertComponent;
+export type AlertCallToActionLink = {
+    type: 'link';
+    accessibilityDescription?: string;
+    href: string;
+    title: string;
+};
+export type AlertCallToAction = {
+    type: 'action';
+    accessibilityDescription?: string;
+    title: string;
+    onClick: () => void;
+};
+export declare const createAlertComponent: (alertProps: Pick<AlertComponent, 'uid' | 'callToAction' | 'context' | 'control' | 'margin' | 'markdown'>) => AlertComponent;

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

@@ -1,2 +1,4 @@
 import type { AlertLayout } from '@wise/dynamic-flow-types/build/next';
-export declare const alertLayoutToComponent: (uid: string, { control, markdown, margin, context }: AlertLayout) => import("../../components/AlertComponent").AlertComponent;
+import { AlertComponent } from '../../components/AlertComponent';
+import { MapperProps } from '../schema/types';
+export declare const alertLayoutToComponent: (uid: string, { control, markdown, margin, context, callToAction }: AlertLayout, { onAction }: MapperProps) => AlertComponent;

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

@@ -1,3 +1,3 @@
 import type { AlertComponent } from '../../domain/components/AlertComponent';
 import type { AlertRendererProps } from '@wise/dynamic-flow-renderers';
-export declare const alertComponentToProps: ({ context, control, margin, markdown, }: AlertComponent) => AlertRendererProps;
+export declare const alertComponentToProps: ({ callToAction, context, control, margin, markdown, }: AlertComponent) => AlertRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.15.3",
+  "version": "3.16.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -86,8 +86,8 @@
     "tsx": "4.15.6",
     "typescript": "5.4.5",
     "webpack": "5.92.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",
@@ -104,7 +104,7 @@
     "nanoid": "5.0.7",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.17.0"
+    "@wise/dynamic-flow-types": "2.18.1"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",