@wise/dynamic-flow-client 3.6.0 → 3.6.2

package/build/main.js

@@ -2515,7 +2515,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__ */ (0, import_jsx_runtime18.jsxs)("div", { id: props.id, children: [
     isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.InlineAlert, { type: "error", children: props.errors }) : null,
@@ -3869,6 +3869,7 @@ var _FormControl = class _FormControl extends import_react19.PureComponent {
       size,
       uploadProps,
       label,
+      description,
       monthFormat,
       // FIXME pass id to all components that accept it
       id,
@@ -3896,6 +3897,7 @@ var _FormControl = class _FormControl extends import_react19.PureComponent {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
             label,
+            secondary: description,
             required,
             readOnly,
             onChange: this.handleOnChange,
@@ -4294,6 +4296,7 @@ function SchemaFormControl(props) {
     id,
     name: id,
     label: schema.title,
+    description: schema.description,
     options: options || [],
     placeholder: schema.placeholder,
     autoComplete: !schema.help,
@@ -5635,7 +5638,15 @@ function DynamicSearch({ component, onAction }) {
           name: "typeahead-input-name",
           size: "md",
           maxHeight: 100,
-          footer: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TypeaheadFooter, { state: status, results, onRetrySearch }),
+          footer: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            TypeaheadFooter,
+            {
+              state: status,
+              results,
+              emptyMessage,
+              onRetrySearch
+            }
+          ),
           multiple: false,
           clearable: false,
           addon: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons2.Search, { size: 24 }),
@@ -5672,10 +5683,11 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({
   results,
   state,
-  onRetrySearch
+  onRetrySearch,
+  emptyMessage
 }) {
   if (state === "success" && results.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components32.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: emptyMessage });
   }
   if (state === "error" && results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorResult, { onRetrySearch }) });
@@ -8565,8 +8577,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__ */ (0, import_jsx_runtime80.jsx)(FieldInput_default, { id, label: "", description, error, help, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components43.Checkbox, __spreadValues({ id }, checkboxProps)) });
+    const checkboxProps = __spreadProps(__spreadValues({}, rest), { label, secondary: description, checked: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FieldInput_default, { id, label: "", description: "", error, help, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_components43.Checkbox, __spreadValues({ id }, checkboxProps)) });
   }
 };
 var BooleanInputRenderer_default = BooleanInputRenderer;
@@ -9698,7 +9710,7 @@ function SearchResultContent({
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "m-t-2", children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components62.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults2({
   state
@@ -9788,7 +9800,7 @@ function mapResultToTypeaheadOption2(result) {
 }
 function TypeaheadFooter2({ state, isLoading }) {
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "m-t-2 m-x-2", children: "No results found" });
+    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_components63.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(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,
@@ -18835,20 +18864,47 @@ function useExternal2(url) {
   return { requiresUserConfirmation, dismissConfirmation };
 }
 
-// src/revamp/renderers/step/StepRenderer.tsx
+// src/revamp/renderers/step/BackButton.tsx
+var import_components74 = require("@transferwise/components");
+var import_icons6 = require("@transferwise/icons");
 var import_jsx_runtime124 = require("react/jsx-runtime");
+function BackButton2({ title, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "a",
+    {
+      href: "/",
+      className: "df-back-btn",
+      "aria-label": title,
+      onClick: (event) => {
+        event.preventDefault();
+        onClick();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "sr-only", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_components74.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_icons6.ArrowLeft, { size: "24" }) })
+      ]
+    }
+  );
+}
+var BackButton_default2 = BackButton2;
+
+// src/revamp/renderers/step/StepRenderer.tsx
+var import_jsx_runtime125 = require("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 = (0, import_react60.useMemo)(() => ({ loadingState, trackEvent }), [loadingState, trackEvent]);
   const { requiresUserConfirmation, dismissConfirmation } = useExternal2(external == null ? void 0 : external.url);
   if ((external == null ? void 0 : external.url) && requiresUserConfirmation) {
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
+    return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ExternalConfirmationDialog, { external, onClose: dismissConfirmation });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StepRendererContextProvider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(StepRendererContextProvider, { value, children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(BackButton_default2, __spreadValues({}, back)) : null,
+    children
+  ] });
 }
 
 // src/revamp/utils/findComponent.ts
@@ -18881,7 +18937,7 @@ function useStableCallback(handler) {
 }
 
 // src/revamp/DynamicFlowCore.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("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) {
   (0, import_react62.useEffect)(() => {
     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 = (0, import_react62.useCallback)(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__ */ (0, import_jsx_runtime125.jsx)(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ErrorBoundary_default, { onError: closeWithError, children: stepComponent ? render(stepComponent) : null });
 }
 
 // src/revamp/DynamicFlowWise.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("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__ */ (0, import_jsx_runtime126.jsx)(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(