@wise/dynamic-flow-client-internal 5.13.3 → 5.14.0-experimental-context-menu-version-6a043b0

package/build/main.mjs

@@ -120,6 +120,12 @@ import { makeHttpClient } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/DynamicFlow.tsx
 import { useDynamicFlow } from "@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.4" : "0.0.0"
+);
+
 // src/dynamicFlow/context-menu/useContextMenu.tsx
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -182,15 +188,21 @@ var useDFContextMenu = (controller) => {
   };
   const getEncodedCurrentStep = () => {
     const step = controller.getCurrentStep();
-    return step ? toBase64(JSON.stringify(step, null, 2)) : null;
+    return step ? toBase64(JSON.stringify(recursivelyRemoveNullUndefined(step), null, 2)) : null;
   };
   const getEncodedCurrentStepWithModel = async () => {
     const step = await getCurrentStepWithModel();
-    return step ? toBase64(JSON.stringify(step, null, 2)) : null;
+    return step ? toBase64(JSON.stringify(recursivelyRemoveNullUndefined(step), null, 2)) : null;
   };
   return useContextMenu({
     title: "DynamicFlow Menu (Dev/Staging only)",
     items: isDevOrStaging() ? [
+      {
+        label: `DF client version: ${appVersion}`,
+        onClick: () => {
+          copyToClipboard(`@wise/dynamic-flow-client-internal@${appVersion}`);
+        }
+      },
       {
         label: "Open in Sandbox",
         onClick: () => {
@@ -228,9 +240,13 @@ var openInSandbox = (base64Step) => {
     window.open(`https://df.wise.com/sandbox#${base64Step}`, "_blank");
   }
 };
-var copyToClipboard = (step) => {
-  if (step) {
-    void navigator.clipboard.writeText(JSON.stringify(step, null, 2));
+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 = () => {
@@ -250,16 +266,22 @@ var isDevOrStaging = () => {
     return false;
   }
 };
+var recursivelyRemoveNullUndefined = (element) => {
+  if (Array.isArray(element)) {
+    return element.map(recursivelyRemoveNullUndefined);
+  }
+  if (element !== null && typeof element === "object") {
+    return Object.entries(element).reduce(
+      (acc, [key, value]) => value !== null && value !== void 0 ? __spreadProps(__spreadValues({}, acc), { [key]: recursivelyRemoveNullUndefined(value) }) : acc,
+      {}
+    );
+  }
+  return element;
+};
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
 import { useMemo as useMemo2 } from "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), {
@@ -435,7 +457,7 @@ function AddressValidationButtonComponent(props) {
         block: true,
         disabled,
         priority: "primary",
-        size: "md",
+        size: "lg",
         loading: spinny,
         onClick: () => {
           setSpinny(true);
@@ -3560,14 +3582,103 @@ var useCustomTheme = (theme, trackEvent) => {
   }, []);
 };
 
+// ../renderers/src/step/StepFooter.tsx
+import { Button as Button7 } from "@transferwise/components";
+import { useEffect as useEffect10, useRef, useState as useState12 } from "react";
+import { useIntl as useIntl14 } from "react-intl";
+
+// ../renderers/src/messages/step.messages.ts
+import { defineMessages as defineMessages11 } from "react-intl";
+var step_messages_default = defineMessages11({
+  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
+import { Fragment as Fragment13, jsx as jsx76, jsxs as jsxs26 } from "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__ */ jsx76(FooterWithScrollButton, { footer });
+  }
+  return /* @__PURE__ */ jsx76(DefaultFooter, { footer });
+};
+var DefaultFooter = ({ footer }) => {
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return hasFooter ? /* @__PURE__ */ jsx76("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
+};
+var FooterWithScrollButton = ({ footer }) => {
+  const { formatMessage } = useIntl14();
+  const endOfLayoutRef = useRef(null);
+  const isElementVisible = useIsElementVisible(endOfLayoutRef);
+  const scrollButton = /* @__PURE__ */ jsx76(
+    Button7,
+    {
+      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__ */ jsx76("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+    /* @__PURE__ */ jsx76("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs26("div", { className: "df-step-fixed__footer", children: [
+      !isElementVisible && scrollButton,
+      footer
+    ] })
+  ] });
+};
+var useIsElementVisible = (elementRef) => {
+  const [isVisible, setIsVisible] = useState12(false);
+  useEffect10(() => {
+    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
+import { Title as Title2 } from "@transferwise/components";
+import { Fragment as Fragment14, jsx as jsx77, jsxs as jsxs27 } from "react/jsx-runtime";
+var StepHeader = ({ title, description, tags }) => {
+  const { titleType, alignmentClassName } = getHeaderStyle(tags);
+  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
+    title ? /* @__PURE__ */ jsx77(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ jsx77("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
 import { IconButton } from "@transferwise/components";
 import { ArrowLeft } from "@transferwise/icons";
-import { useIntl as useIntl14 } from "react-intl";
+import { useIntl as useIntl15 } from "react-intl";
 
 // ../renderers/src/messages/back.messages.ts
-import { defineMessages as defineMessages11 } from "react-intl";
-var back_messages_default = defineMessages11({
+import { defineMessages as defineMessages12 } from "react-intl";
+var back_messages_default = defineMessages12({
   back: {
     id: "df.wise.back.label",
     defaultMessage: "Back",
@@ -3576,30 +3687,30 @@ var back_messages_default = defineMessages11({
 });
 
 // ../renderers/src/step/topbar/BackButton.tsx
-import { jsx as jsx76, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
-  const { formatMessage } = useIntl14();
-  return /* @__PURE__ */ jsxs26(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
-    /* @__PURE__ */ jsx76("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
-    /* @__PURE__ */ jsx76(ArrowLeft, {})
+  const { formatMessage } = useIntl15();
+  return /* @__PURE__ */ jsxs28(IconButton, { className: "df-back-button", priority: "tertiary", onClick, children: [
+    /* @__PURE__ */ jsx78("span", { className: "sr-only", children: title != null ? title : formatMessage(back_messages_default.back) }),
+    /* @__PURE__ */ jsx78(ArrowLeft, {})
   ] });
 }
 
 // ../renderers/src/step/topbar/Toolbar.tsx
-import { Button as Button7, IconButton as IconButton2 } from "@transferwise/components";
-import { jsx as jsx77, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Button as Button8, IconButton as IconButton2 } from "@transferwise/components";
+import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
 var Toolbar = ({ items }) => {
-  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ jsx77("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ jsx77(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
+  return (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ jsx79("div", { className: "df-toolbar", children: items.map((item, index) => /* @__PURE__ */ jsx79(ToolbarButton, __spreadValues({}, item), `${item.type}-${index}-${item.title}`)) }) : null;
 };
 function ToolbarButton(props) {
-  return prefersMedia(props.control) ? /* @__PURE__ */ jsx77(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ jsx77(TextToolbarButton, __spreadValues({}, props));
+  return prefersMedia(props.control) ? /* @__PURE__ */ jsx79(MediaToolbarButton, __spreadValues({}, props)) : /* @__PURE__ */ jsx79(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__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     IconButton2,
     {
       className: "df-toolbar-button",
@@ -3609,7 +3720,7 @@ function MediaToolbarButton(props) {
       type,
       onClick,
       children: [
-        accessibilityDescription ? /* @__PURE__ */ jsx77("span", { className: "sr-only", children: accessibilityDescription }) : null,
+        accessibilityDescription ? /* @__PURE__ */ jsx79("span", { className: "sr-only", children: accessibilityDescription }) : null,
         media ? (_a = getAddonStartMedia(media)) == null ? void 0 : _a.value : null
       ]
     }
@@ -3620,8 +3731,8 @@ function TextToolbarButton(props) {
   const addonStart = media ? getAddonStartMedia(media) : void 0;
   const priority = getPriority2(control);
   const sentiment = getSentiment2(context);
-  return /* @__PURE__ */ jsx77(
-    Button7,
+  return /* @__PURE__ */ jsx79(
+    Button8,
     {
       v2: true,
       size: "sm",
@@ -3650,140 +3761,51 @@ var getIconButtonPriority = (control) => {
 };
 
 // ../renderers/src/step/topbar/TopBar.tsx
-import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
 function TopBar({ back, toolbar }) {
-  return back || toolbar ? /* @__PURE__ */ jsxs28("div", { className: "d-flex m-b-2", children: [
-    back ? /* @__PURE__ */ jsx78(BackButton, __spreadValues({}, back)) : null,
-    toolbar ? /* @__PURE__ */ jsx78(Toolbar, __spreadValues({}, toolbar)) : null
+  return back || toolbar ? /* @__PURE__ */ jsxs30("div", { className: "d-flex m-b-2", children: [
+    back ? /* @__PURE__ */ jsx80(BackButton, __spreadValues({}, back)) : null,
+    toolbar ? /* @__PURE__ */ jsx80(Toolbar, __spreadValues({}, toolbar)) : null
   ] }) : null;
 }
 
-// ../renderers/src/step/StepFooter.tsx
-import { Button as Button8 } from "@transferwise/components";
-import { useEffect as useEffect10, useRef, useState as useState12 } from "react";
-import { useIntl as useIntl15 } from "react-intl";
-
-// ../renderers/src/messages/step.messages.ts
-import { defineMessages as defineMessages12 } from "react-intl";
-var step_messages_default = defineMessages12({
-  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
-import { Fragment as Fragment13, jsx as jsx79, jsxs as jsxs29 } from "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__ */ jsx79(FooterWithScrollButton, { footer });
-  }
-  return /* @__PURE__ */ jsx79(DefaultFooter, { footer });
-};
-var DefaultFooter = ({ footer }) => {
-  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
-  return hasFooter ? /* @__PURE__ */ jsx79("div", { className: "df-step-fixed__footer", children: footer }) : void 0;
-};
-var FooterWithScrollButton = ({ footer }) => {
-  const { formatMessage } = useIntl15();
-  const endOfLayoutRef = useRef(null);
-  const isElementVisible = useIsElementVisible(endOfLayoutRef);
-  const scrollButton = /* @__PURE__ */ jsx79(
-    Button8,
-    {
-      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__ */ jsx79("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
-  }
-  return /* @__PURE__ */ jsxs29(Fragment13, { children: [
-    /* @__PURE__ */ jsx79("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs29("div", { className: "df-step-fixed__footer", children: [
-      !isElementVisible && scrollButton,
-      footer
-    ] })
-  ] });
-};
-var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = useState12(false);
-  useEffect10(() => {
-    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
-import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs31 } from "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__ */ jsxs30("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx80(TopBar, { back, toolbar }),
+  return /* @__PURE__ */ jsxs31("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ jsx81(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ jsx81("div", { className: "m-b-4", children: /* @__PURE__ */ jsx81(StepHeader, { title, description, tags }) }) : void 0,
     children,
-    /* @__PURE__ */ jsx80(StepFooter, { footer, tags })
+    /* @__PURE__ */ jsx81(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-import { jsx as jsx81, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs32 } from "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__ */ jsxs31("div", { className: "splash-screen m-t-5", children: [
-    /* @__PURE__ */ jsx81(TopBar, { back, toolbar }),
+  const { back, title, description, toolbar, children, footer, tags } = props;
+  return /* @__PURE__ */ jsxs32("div", { className: "splash-screen m-t-5", children: [
+    /* @__PURE__ */ jsx82(TopBar, { back, toolbar }),
+    title || description ? /* @__PURE__ */ jsx82("div", { className: "m-b-4", children: /* @__PURE__ */ jsx82(StepHeader, { title, description, tags }) }) : void 0,
     children,
-    /* @__PURE__ */ jsx81(StepFooter, { footer, tags })
+    /* @__PURE__ */ jsx82(StepFooter, { footer, tags })
   ] });
 }
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2 } from "@transferwise/components";
-
-// ../renderers/src/step/StepHeader.tsx
-import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
-var StepHeader = ({ title, description, tags }) => {
-  const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs32(Fragment14, { children: [
-    title ? /* @__PURE__ */ jsx82(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
-    description ? /* @__PURE__ */ jsx82("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
 import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",