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

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.4" : "0.0.0"
+);
+
 // src/dynamicFlow/context-menu/useContextMenu.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -200,15 +206,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: () => {
@@ -246,9 +258,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 = () => {
@@ -268,16 +284,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
 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 +475,7 @@ function AddressValidationButtonComponent(props) {
         block: true,
         disabled,
         priority: "primary",
-        size: "md",
+        size: "lg",
         loading: spinny,
         onClick: () => {
           setSpinny(true);
@@ -3575,14 +3597,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 +3702,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 +3735,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 +3746,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 +3776,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",