@wise/dynamic-flow-client 3.6.0 → 3.6.2

package/build/main.mjs

@@ -2497,7 +2497,7 @@ function ControlFeedback(props) {
   const validationMessages = __spreadValues(__spreadValues(__spreadValues({}, defaultValidationMessages), props.validationMessages), props.schema.validationMessages);
   const isErrorVisible = (props.submitted || !props.changed) && Boolean(props.errors);
   const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && Boolean((_a = props.validations) == null ? void 0 : _a.length);
-  const isDescriptionVisible = props.schema.description && !isErrorVisible && !isValidationVisible;
+  const isDescriptionVisible = props.schema.type !== "boolean" && props.schema.description && !isErrorVisible && !isValidationVisible;
   const hasInfoMessage = Boolean(props.infoMessage);
   return /* @__PURE__ */ jsxs4("div", { id: props.id, children: [
     isErrorVisible ? /* @__PURE__ */ jsx18(InlineAlert, { type: "error", children: props.errors }) : null,
@@ -3863,6 +3863,7 @@ var _FormControl = class _FormControl extends PureComponent {
       size,
       uploadProps,
       label,
+      description,
       monthFormat,
       // FIXME pass id to all components that accept it
       id,
@@ -3890,6 +3891,7 @@ var _FormControl = class _FormControl extends PureComponent {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
             label,
+            secondary: description,
             required,
             readOnly,
             onChange: this.handleOnChange,
@@ -4288,6 +4290,7 @@ function SchemaFormControl(props) {
     id,
     name: id,
     label: schema.title,
+    description: schema.description,
     options: options || [],
     placeholder: schema.placeholder,
     autoComplete: !schema.help,
@@ -5583,7 +5586,7 @@ var addQueryParameter = (url, key, value) => {
 
 // src/legacy/layout/search/DynamicSearch.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { Typeahead } from "@transferwise/components";
+import { Markdown as Markdown3, Typeahead } from "@transferwise/components";
 import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var DEBOUNCE_TIME = 400;
 function DynamicSearch({ component, onAction }) {
@@ -5629,7 +5632,15 @@ function DynamicSearch({ component, onAction }) {
           name: "typeahead-input-name",
           size: "md",
           maxHeight: 100,
-          footer: /* @__PURE__ */ jsx55(TypeaheadFooter, { state: status, results, onRetrySearch }),
+          footer: /* @__PURE__ */ jsx55(
+            TypeaheadFooter,
+            {
+              state: status,
+              results,
+              emptyMessage,
+              onRetrySearch
+            }
+          ),
           multiple: false,
           clearable: false,
           addon: /* @__PURE__ */ jsx55(Search, { size: 24 }),
@@ -5666,10 +5677,11 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({
   results,
   state,
-  onRetrySearch
+  onRetrySearch,
+  emptyMessage
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ jsx55("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ jsx55(Markdown3, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
     return /* @__PURE__ */ jsx55("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx55(ErrorResult, { onRetrySearch }) });
@@ -8517,7 +8529,7 @@ var Field = ({
 };
 
 // src/revamp/wise/renderers/components/Help.tsx
-import { Info as Info2, Markdown as Markdown3 } from "@transferwise/components";
+import { Info as Info2, Markdown as Markdown4 } from "@transferwise/components";
 import { useIntl as useIntl19 } from "react-intl";
 import { jsx as jsx76 } from "react/jsx-runtime";
 function Help2({ help }) {
@@ -8526,7 +8538,7 @@ function Help2({ help }) {
     Info2,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ jsx76(Markdown3, { config: { link: { target: "_blank" } }, children: help }),
+      content: /* @__PURE__ */ jsx76(Markdown4, { config: { link: { target: "_blank" } }, children: help }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default.helpAria)
@@ -8559,8 +8571,8 @@ var BooleanInputRenderer = {
   canRenderType: "input-boolean",
   render: (props) => {
     const _a = props, { id, control, label = "", description, help, error, type, value } = _a, rest = __objRest(_a, ["id", "control", "label", "description", "help", "error", "type", "value"]);
-    const checkboxProps = __spreadProps(__spreadValues({}, rest), { label, checked: value });
-    return /* @__PURE__ */ jsx79(FieldInput_default, { id, label: "", description, error, help, children: /* @__PURE__ */ jsx79(Checkbox3, __spreadValues({ id }, checkboxProps)) });
+    const checkboxProps = __spreadProps(__spreadValues({}, rest), { label, secondary: description, checked: value });
+    return /* @__PURE__ */ jsx79(FieldInput_default, { id, label: "", description: "", error, help, children: /* @__PURE__ */ jsx79(Checkbox3, __spreadValues({ id }, checkboxProps)) });
   }
 };
 var BooleanInputRenderer_default = BooleanInputRenderer;
@@ -9279,11 +9291,11 @@ var LoadingIndicatorRenderer = {
 var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // src/revamp/wise/renderers/MarkdownRenderer.tsx
-import { Markdown as Markdown4 } from "@transferwise/components";
+import { Markdown as Markdown5 } from "@transferwise/components";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ jsx98("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ jsx98(Markdown4, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ jsx98("div", { className: getTextAlignmentAndMargin2({ align, margin }), children: /* @__PURE__ */ jsx98(Markdown5, { config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
@@ -9616,7 +9628,7 @@ function ItemSummaryOption2({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // src/revamp/wise/renderers/SearchRenderer/BlockSearchRendererComponent.tsx
-import { Input as Input6, NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
+import { Input as Input6, Markdown as Markdown6, NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
 
 // src/revamp/wise/renderers/SearchRenderer/ErrorResult.tsx
 import { useIntl as useIntl22 } from "react-intl";
@@ -9692,7 +9704,7 @@ function SearchResultContent({
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ jsx106("p", { className: "m-t-2", children: state.message });
+  return /* @__PURE__ */ jsx106(Markdown6, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults2({
   state
@@ -9719,7 +9731,7 @@ function SearchResults2({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // src/revamp/wise/renderers/SearchRenderer/InlineSearchRendererComponent.tsx
-import { Typeahead as Typeahead2 } from "@transferwise/components";
+import { Markdown as Markdown7, Typeahead as Typeahead2 } from "@transferwise/components";
 import { Search as Search2 } from "@transferwise/icons";
 import { useState as useState32 } from "react";
 import { jsx as jsx107, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -9782,7 +9794,7 @@ function mapResultToTypeaheadOption2(result) {
 }
 function TypeaheadFooter2({ state, isLoading }) {
   if (state.type === "noResults") {
-    return /* @__PURE__ */ jsx107("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ jsx107(Markdown7, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
     return /* @__PURE__ */ jsx107("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ jsx107(ErrorResult2, { state }) });
@@ -17945,10 +17957,17 @@ var mapStepToComponent = (_a) => {
     "displayStepTitle",
     "trackEvent"
   ]);
-  var _a2;
+  var _a2, _b2;
   const { httpClient, step, updateComponent } = restProps;
-  const { id, external, key, layout = [], polling } = step;
-  const refreshUrl = (_a2 = step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
+  const { id, navigation, external, key, layout = [], polling } = step;
+  const backNavigation = (_a2 = navigation == null ? void 0 : navigation.back) != null ? _a2 : navigation == null ? void 0 : navigation.backButton;
+  const back = backNavigation ? {
+    title: backNavigation.title,
+    onClick: () => {
+      void restProps.onAction(__spreadProps(__spreadValues({}, backNavigation.action), { skipValidation: true }));
+    }
+  } : void 0;
+  const refreshUrl = (_b2 = step.refreshUrl) != null ? _b2 : step.refreshFormUrl;
   const stepId = id || key;
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
@@ -17981,6 +18000,7 @@ var mapStepToComponent = (_a) => {
   const stepComponent = createStepComponent({
     uid,
     components: [...additionalComponents, ...layoutComponents],
+    back,
     external,
     loadingState,
     stepPolling,
@@ -18083,9 +18103,17 @@ var executeSubmission = async (props) => {
       return { type: "complete", result };
     }
     try {
+      const makeRequestBody = () => {
+        var _a;
+        if (method === "GET") {
+          return void 0;
+        }
+        const payload = mergeModels(model, (_a = action.data) != null ? _a : null);
+        return payload !== null ? JSON.stringify(payload) : null;
+      };
       const response = await httpClient(url != null ? url : "", {
         method,
-        body: method === "GET" ? void 0 : JSON.stringify(model),
+        body: makeRequestBody(),
         headers: { "Content-Type": "application/json" }
       });
       if (!response.ok) {
@@ -18144,8 +18172,9 @@ var CoreContainerRenderer = {
 };
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({ external, loadingState, trackEvent }, children) => ({
+var stepComponentToProps = ({ back, external, loadingState, trackEvent }, children) => ({
   type: "step",
+  back,
   external,
   loadingState,
   trackEvent,
@@ -18782,7 +18811,7 @@ import { useMemo as useMemo18 } from "react";
 
 // src/revamp/renderers/step/ExternalConfirmationDialog.tsx
 import { useIntl as useIntl23 } from "react-intl";
-import { Button as Button11, Markdown as Markdown5 } from "@transferwise/components";
+import { Button as Button11, Markdown as Markdown8 } from "@transferwise/components";
 import { jsx as jsx122, jsxs as jsxs49 } from "react/jsx-runtime";
 function ExternalConfirmationDialog({
   external,
@@ -18791,7 +18820,7 @@ function ExternalConfirmationDialog({
   const { formatMessage } = useIntl23();
   return /* @__PURE__ */ jsx122("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs49("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ jsx122("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ jsx122(Markdown5, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin2(external.url) }) }),
+    /* @__PURE__ */ jsx122(Markdown8, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin2(external.url) }) }),
     /* @__PURE__ */ jsx122("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ jsxs49("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ jsx122(
         Button11,
@@ -18835,20 +18864,47 @@ function useExternal2(url) {
   return { requiresUserConfirmation, dismissConfirmation };
 }
 
+// src/revamp/renderers/step/BackButton.tsx
+import { Avatar as Avatar7 } from "@transferwise/components";
+import { ArrowLeft as ArrowLeft2 } from "@transferwise/icons";
+import { jsx as jsx123, jsxs as jsxs50 } from "react/jsx-runtime";
+function BackButton2({ title, onClick }) {
+  return /* @__PURE__ */ jsxs50(
+    "a",
+    {
+      href: "/",
+      className: "df-back-btn",
+      "aria-label": title,
+      onClick: (event) => {
+        event.preventDefault();
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ jsx123("span", { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx123(Avatar7, { type: "icon", children: /* @__PURE__ */ jsx123(ArrowLeft2, { size: "24" }) })
+      ]
+    }
+  );
+}
+var BackButton_default2 = BackButton2;
+
 // src/revamp/renderers/step/StepRenderer.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs51 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { loadingState, external, trackEvent, children } = props;
+  const { back, loadingState, external, trackEvent, children } = props;
   const value = useMemo18(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal2(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ jsx123(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+    return /* @__PURE__ */ jsx124(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
   }
-  return /* @__PURE__ */ jsx123(StepRendererContextProvider, { value, children });
+  return /* @__PURE__ */ jsxs51(StepRendererContextProvider, { value, children: [
+    back ? /* @__PURE__ */ jsx124(BackButton_default2, __spreadValues({}, back)) : null,
+    children
+  ] });
 }
 
 // src/revamp/utils/findComponent.ts
@@ -18881,7 +18937,7 @@ function useStableCallback(handler) {
 }
 
 // src/revamp/DynamicFlowCore.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 function DynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, renderers: renderers2, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "renderers", "displayStepTitle"]);
   const httpClient = useStableCallback(rest.httpClient);
@@ -18907,7 +18963,7 @@ function DynamicFlowCore(props) {
   useEffect25(() => {
     trackCoreEvent("Initiated");
     if (!initialStep && initialAction) {
-      void onAction(initialAction);
+      void onAction(__spreadValues({ method: "GET" }, initialAction));
     }
     if (initialStep && !initialAction) {
       initialiseWithStep(initialStep, null);
@@ -19000,14 +19056,13 @@ function DynamicFlowCore(props) {
     []
   );
   const onAction = useCallback11(async (action) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c;
     try {
       (_a2 = stepComponentRef.current) == null ? void 0 : _a2.setLoadingState("loading");
       const model = (_c = await ((_b = stepComponentRef.current) == null ? void 0 : _b.getSubmittableValue())) != null ? _c : null;
-      const payload = mergeModels(model, (_d = action.data) != null ? _d : null);
       const command = await executeSubmission({
         action,
-        model: payload,
+        model,
         isInitial: stepRef.current === null,
         httpClient,
         trackEvent: trackCoreEvent
@@ -19085,11 +19140,11 @@ function DynamicFlowCore(props) {
     () => getRenderFunction([CoreContainerRenderer, ...renderers2, StepRenderer]),
     [renderers2]
   );
-  return /* @__PURE__ */ jsx124(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
+  return /* @__PURE__ */ jsx125(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
 }
 
 // src/revamp/DynamicFlowWise.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var renderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient } = props;
@@ -19098,7 +19153,7 @@ function DynamicFlowWise(props) {
     () => makeWiseHttpClient(httpClient, locale),
     [httpClient, locale]
   );
-  return /* @__PURE__ */ jsx125(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx125(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
+  return /* @__PURE__ */ jsx126(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ jsx126(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(

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

@@ -114,6 +114,7 @@ type FormControlProps = {
     displayPattern?: string;
     id: string;
     label?: string;
+    description?: string;
     max?: number;
     maxDate?: Date;
     maxLength?: number;

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

@@ -4,6 +4,7 @@ import type { AnalyticsEventDispatcher } from '../features/events';
 import type { StepPolling } from '../features/polling/getStepPolling';
 export type StepDomainComponent = BaseComponent & {
     type: 'step';
+    back?: BackNavigation;
     components: DomainComponent[];
     external?: Step['external'];
     loadingState: LoadingState;
@@ -13,7 +14,12 @@ export type StepDomainComponent = BaseComponent & {
     stop: () => void;
     trackEvent: AnalyticsEventDispatcher<string>;
 };
-export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "external" | "components" | "loadingState" | "uid" | "trackEvent"> & {
+type BackNavigation = {
+    title?: string;
+    onClick: () => void;
+};
+export declare const createStepComponent: (stepProps: Pick<StepDomainComponent, "external" | "components" | "back" | "loadingState" | "uid" | "trackEvent"> & {
     stepPolling?: StepPolling | undefined;
     updateComponent: UpdateComponent;
 }) => StepDomainComponent;
+export {};

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

@@ -0,0 +1,3 @@
+import type { StepRendererProps } from '../types';
+declare function BackButton({ title, onClick }: NonNullable<StepRendererProps['back']>): JSX.Element;
+export default BackButton;

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: ({ external, loadingState, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;
+export declare const stepComponentToProps: ({ back, external, loadingState, trackEvent }: StepDomainComponent, children: ReactNode) => StepRendererProps;

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

@@ -25,6 +25,10 @@ export type RendererProps = StepRendererProps | CoreContainerRendererProps | Ale
 export type StepRendererProps = {
     type: 'step';
     control?: string;
+    back?: {
+        title?: string;
+        onClick: () => void;
+    };
     external?: {
         url: string;
     };
@@ -148,7 +152,6 @@ export type SearchRendererProps = {
     type: 'search';
     control?: string;
     id: string;
-    emptyMessage?: string;
     isLoading: boolean;
     margin: Margin;
     query: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -92,7 +92,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.13.0"
+    "@wise/dynamic-flow-types": "2.14.0"
   },
   "scripts": {
     "dev": "storybook dev -p 3003",