@wise/dynamic-flow-client-internal 5.13.3 → 5.13.5

package/build/main.js

@@ -138,6 +138,12 @@ var import_dynamic_flow_client6 = require("@wise/dynamic-flow-client");
 // src/dynamicFlow/DynamicFlow.tsx
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
+// src/dynamicFlow/telemetry/app-version.ts
+var appVersion = (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  typeof process !== "undefined" ? "5.13.5" : "0.0.0"
+);
+
 // src/dynamicFlow/context-menu/useContextMenu.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -190,16 +196,20 @@ var useMenuPosition = () => {
 
 // src/dynamicFlow/context-menu/useDFContextMenu.tsx
 var useDFContextMenu = (controller) => {
+  const getCurrentStep = () => {
+    const step = controller.getCurrentStep();
+    return step ? recursivelyRemoveNullish(step) : null;
+  };
   const getCurrentStepWithModel = async () => {
     const step = controller.getCurrentStep();
     if (!step) {
       return null;
     }
     const model = await controller.getSubmittableValue();
-    return __spreadProps(__spreadValues({}, step), { model });
+    return recursivelyRemoveNullish(__spreadProps(__spreadValues({}, step), { model }));
   };
   const getEncodedCurrentStep = () => {
-    const step = controller.getCurrentStep();
+    const step = getCurrentStep();
     return step ? toBase64(JSON.stringify(step, null, 2)) : null;
   };
   const getEncodedCurrentStepWithModel = async () => {
@@ -209,6 +219,12 @@ var useDFContextMenu = (controller) => {
   return useContextMenu({
     title: "DynamicFlow Menu (Dev/Staging only)",
     items: isDevOrStaging() ? [
+      {
+        label: `DF client version: ${appVersion}`,
+        onClick: () => {
+          openVersionPage(appVersion);
+        }
+      },
       {
         label: "Open in Sandbox",
         onClick: () => {
@@ -224,7 +240,7 @@ var useDFContextMenu = (controller) => {
       {
         label: "Copy step JSON",
         onClick: () => {
-          copyToClipboard(controller.getCurrentStep());
+          copyToClipboard(getCurrentStep());
         }
       },
       {
@@ -243,12 +259,35 @@ var toBase64 = (str) => {
 };
 var openInSandbox = (base64Step) => {
   if (base64Step) {
-    window.open(`https://df.wise.com/sandbox#${base64Step}`, "_blank");
+    window.open(`https://df.wise.com/sandbox#${base64Step}`, "_blank", "noopener,noreferrer");
   }
 };
-var copyToClipboard = (step) => {
-  if (step) {
-    void navigator.clipboard.writeText(JSON.stringify(step, null, 2));
+var openVersionPage = (version) => {
+  const changelogUrl = getGitHubChangelogUrl(version);
+  if (changelogUrl) {
+    window.open(changelogUrl, "_blank", "noopener,noreferrer");
+  } else {
+    window.open(getNpmPackageUrl(version), "_blank", "noopener,noreferrer");
+  }
+};
+var getGitHubChangelogUrl = (version) => {
+  const semverRegex = /^\d+\.\d+\.\d+$/;
+  if (semverRegex.test(version)) {
+    const hash = version.replace(/\./g, "");
+    return `https://github.com/transferwise/dynamic-flow/blob/main/web/wise/CHANGELOG.md#${hash}`;
+  }
+  return void 0;
+};
+var getNpmPackageUrl = (version) => {
+  return `https://www.npmjs.com/package/@wise/dynamic-flow-client-internal/v/${version}`;
+};
+var copyToClipboard = (value) => {
+  if (typeof value === "string") {
+    void navigator.clipboard.writeText(value);
+    return;
+  }
+  if (value) {
+    void navigator.clipboard.writeText(JSON.stringify(value, null, 2));
   }
 };
 var isDevOrStaging = () => {
@@ -268,16 +307,24 @@ var isDevOrStaging = () => {
     return false;
   }
 };
+var recursivelyRemoveNullish = (element) => {
+  if (Array.isArray(element)) {
+    return element.map(recursivelyRemoveNullish);
+  }
+  if (element !== null && typeof element === "object") {
+    return Object.entries(element).reduce((acc, [key, value]) => {
+      if (value !== null && value !== void 0) {
+        acc[key] = recursivelyRemoveNullish(value);
+      }
+      return acc;
+    }, {});
+  }
+  return element;
+};
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
 var import_react24 = require("react");
 
-// src/dynamicFlow/telemetry/app-version.ts
-var appVersion = (
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.13.3" : "0.0.0"
-);
-
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
   const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
@@ -453,7 +500,7 @@ function AddressValidationButtonComponent(props) {
         block: true,
         disabled,
         priority: "primary",
-        size: "md",
+        size: "lg",
         loading: spinny,
         onClick: () => {
           setSpinny(true);
@@ -3575,14 +3622,103 @@ var useCustomTheme = (theme, trackEvent) => {
   }, []);
 };
 
-// ../renderers/src/step/topbar/BackButton.tsx
+// ../renderers/src/step/StepFooter.tsx
 var import_components53 = require("@transferwise/components");
-var import_icons5 = require("@transferwise/icons");
+var import_react19 = require("react");
 var import_react_intl25 = require("react-intl");
 
-// ../renderers/src/messages/back.messages.ts
+// ../renderers/src/messages/step.messages.ts
 var import_react_intl24 = require("react-intl");
-var back_messages_default = (0, import_react_intl24.defineMessages)({
+var step_messages_default = (0, import_react_intl24.defineMessages)({
+  scrollToBottom: {
+    id: "df.wise.step.scrollToBottom",
+    defaultMessage: "Scroll to bottom",
+    description: "Label for a button that appears when the content of a step is too long and the user needs to scroll to the bottom to see all the content."
+  }
+});
+
+// ../renderers/src/step/StepFooter.tsx
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var SCROLL_TO_BOTTOM = "scroll-to-bottom";
+var StepFooter = ({ footer, tags }) => {
+  if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(FooterWithScrollButton, { footer });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DefaultFooter, { footer });
+};
+var DefaultFooter = ({ footer }) => {
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
+};
+var FooterWithScrollButton = ({ footer }) => {
+  const { formatMessage } = (0, import_react_intl25.useIntl)();
+  const endOfLayoutRef = (0, import_react19.useRef)(null);
+  const isElementVisible = useIsElementVisible(endOfLayoutRef);
+  const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    import_components53.Button,
+    {
+      className: "m-b-1",
+      v2: true,
+      block: true,
+      priority: "tertiary",
+      onClick: () => {
+        var _a;
+        (_a = endOfLayoutRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+      },
+      children: formatMessage(step_messages_default.scrollToBottom)
+    }
+  );
+  const hasStepFooterContent = footer && Array.isArray(footer) && footer.length > 0;
+  if (isElementVisible && !hasStepFooterContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "df-step-fixed__footer", children: [
+      !isElementVisible && scrollButton,
+      footer
+    ] })
+  ] });
+};
+var useIsElementVisible = (elementRef) => {
+  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [elementRef]);
+  return isVisible;
+};
+
+// ../renderers/src/step/StepHeader.tsx
+var import_components54 = require("@transferwise/components");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var StepHeader = ({ title, description, tags }) => {
+  const { titleType, alignmentClassName } = getHeaderStyle(tags);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components54.Title, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
+  ] });
+};
+var getHeaderStyle = (tags) => {
+  if (tags == null ? void 0 : tags.includes("root-screen")) {
+    return { titleType: "title-screen", alignmentClassName: "text-xs-left" };
+  }
+  return { titleType: "title-section", alignmentClassName: "text-xs-center" };
+};
+
+// ../renderers/src/step/topbar/BackButton.tsx
+var import_components55 = require("@transferwise/components");
+var import_icons5 = require("@transferwise/icons");
+var import_react_intl27 = require("react-intl");
+
+// ../renderers/src/messages/back.messages.ts
+var import_react_intl26 = require("react-intl");
+var back_messages_default = (0, import_react_intl26.defineMessages)({
   back: {
     id: "df.wise.back.label",
     defaultMessage: "Back",
@@ -3591,31 +3727,31 @@ var back_messages_default = (0, import_react_intl24.defineMessages)({
 });
 
 // ../renderers/src/step/topbar/BackButton.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
-  const { formatMessage } = (0, import_react_intl25.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_components53.IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons5.ArrowLeft, {})
+  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_components55.IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_icons5.ArrowLeft, {})
   ] });
 }
 
 // ../renderers/src/step/topbar/Toolbar.tsx
-var import_components54 = require("@transferwise/components");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_components56 = require("@transferwise/components");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var Toolbar = ({ items }) => {
-  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
+  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
 };
 function ToolbarButton(props) {
-  return prefersMedia(props.control) ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TextToolbarButton, __spreadValues({}, props));
+  return prefersMedia(props.control) ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextToolbarButton, __spreadValues({}, props));
 }
 function MediaToolbarButton(props) {
   var _a;
   const { context, control, media, accessibilityDescription, disabled, onClick } = props;
   const priority = getIconButtonPriority(control);
   const type = getSentiment2(context);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
-    import_components54.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    import_components56.IconButton,
     {
       className: "df-toolbar-button",
       disabled,
@@ -3624,7 +3760,7 @@ function MediaToolbarButton(props) {
       type,
       onClick,
       children: [
-        accessibilityDescription ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "sr-only", children: accessibilityDescription }) : null,
+        accessibilityDescription ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "sr-only", children: accessibilityDescription }) : null,
         media ? (_a = getAddonStartMedia(media)) == null ? void 0 : _a.value : null
       ]
     }
@@ -3635,8 +3771,8 @@ function TextToolbarButton(props) {
   const addonStart = media ? getAddonStartMedia(media) : void 0;
   const priority = getPriority2(control);
   const sentiment = getSentiment2(context);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-    import_components54.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    import_components56.Button,
     {
       v2: true,
       size: "sm",
@@ -3665,140 +3801,51 @@ var getIconButtonPriority = (control) => {
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 function TopBar({ back, toolbar }) {
-  return back || toolbar ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "d-flex m-b-2", children: [
-    back ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(BackButton, __spreadValues({}, back)) : null,
-    toolbar ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Toolbar, __spreadValues({}, toolbar)) : null
+  return back || toolbar ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "d-flex m-b-2", children: [
+    back ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(BackButton, __spreadValues({}, back)) : null,
+    toolbar ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
 
-// ../renderers/src/step/StepFooter.tsx
-var import_components55 = require("@transferwise/components");
-var import_react19 = require("react");
-var import_react_intl27 = require("react-intl");
-
-// ../renderers/src/messages/step.messages.ts
-var import_react_intl26 = require("react-intl");
-var step_messages_default = (0, import_react_intl26.defineMessages)({
-  scrollToBottom: {
-    id: "df.wise.step.scrollToBottom",
-    defaultMessage: "Scroll to bottom",
-    description: "Label for a button that appears when the content of a step is too long and the user needs to scroll to the bottom to see all the content."
-  }
-});
-
-// ../renderers/src/step/StepFooter.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var SCROLL_TO_BOTTOM = "scroll-to-bottom";
-var StepFooter = ({ footer, tags }) => {
-  if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(FooterWithScrollButton, { footer });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DefaultFooter, { footer });
-};
-var DefaultFooter = ({ footer }) => {
-  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
-  return hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
-};
-var FooterWithScrollButton = ({ footer }) => {
-  const { formatMessage } = (0, import_react_intl27.useIntl)();
-  const endOfLayoutRef = (0, import_react19.useRef)(null);
-  const isElementVisible = useIsElementVisible(endOfLayoutRef);
-  const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-    import_components55.Button,
-    {
-      className: "m-b-1",
-      v2: true,
-      block: true,
-      priority: "tertiary",
-      onClick: () => {
-        var _a;
-        (_a = endOfLayoutRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-      },
-      children: formatMessage(step_messages_default.scrollToBottom)
-    }
-  );
-  const hasStepFooterContent = footer && Array.isArray(footer) && footer.length > 0;
-  if (isElementVisible && !hasStepFooterContent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "df-step-fixed__footer", children: [
-      !isElementVisible && scrollButton,
-      footer
-    ] })
-  ] });
-};
-var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
-    const element = elementRef.current;
-    if (!element) return;
-    const observer = new IntersectionObserver(([entry]) => {
-      setIsVisible(entry.isIntersecting);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [elementRef]);
-  return isVisible;
-};
-
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var SplashCelebrationStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash-celebration",
   render: SplashCelebrationStepRendererComponent
 };
 function SplashCelebrationStepRendererComponent(props) {
-  const { back, toolbar, children, footer, tags, trackEvent } = props;
+  const { back, title, description, toolbar, children, footer, tags, trackEvent } = props;
   useCustomTheme("forest-green", trackEvent);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(StepHeader, { title, description, tags }) }) : void 0,
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(StepFooter, { footer, tags })
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var SplashStepRenderer = {
   canRenderType: "step",
   canRender: ({ control }) => control === "splash",
   render: SplashStepRendererComponent
 };
 function SplashStepRendererComponent(props) {
-  const { back, toolbar, children, footer, tags } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TopBar, { back, toolbar }),
+  const { back, title, description, toolbar, children, footer, tags } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(StepHeader, { title, description, tags }) }) : void 0,
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(StepFooter, { footer, tags })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/StepRenderer.tsx
 var import_components57 = require("@transferwise/components");
-
-// ../renderers/src/step/StepHeader.tsx
-var import_components56 = require("@transferwise/components");
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var StepHeader = ({ title, description, tags }) => {
-  const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_components56.Title, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
-  ] });
-};
-var getHeaderStyle = (tags) => {
-  if (tags == null ? void 0 : tags.includes("root-screen")) {
-    return { titleType: "title-screen", alignmentClassName: "text-xs-left" };
-  }
-  return { titleType: "title-section", alignmentClassName: "text-xs-center" };
-};
-
-// ../renderers/src/step/StepRenderer.tsx
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",