@wise/dynamic-flow-client-internal 5.31.0-experimental-a2135d6 → 5.31.0

package/build/main.js

@@ -146,7 +146,7 @@ var import_dynamic_flow_client4 = 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.30.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.31.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -336,7 +336,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react32 = require("react");
+var import_react30 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -6779,101 +6779,9 @@ function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
 
 // ../renderers/src/TextInputRenderer.tsx
 var import_components69 = require("@transferwise/components");
-var import_react28 = require("react");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
-var import_icons7 = require("@transferwise/icons");
-var import_react_intl36 = require("react-intl");
-var import_react27 = require("react");
-
-// ../renderers/src/messages/ssn-input.messages.ts
-var import_react_intl35 = require("react-intl");
-var ssn_input_messages_default = (0, import_react_intl35.defineMessages)({
-  showValue: {
-    id: "df.wise.ssnInput.showValue",
-    defaultMessage: "Show value",
-    description: "Accessible label for showing a masked SSN or SIN value"
-  },
-  hideValue: {
-    id: "df.wise.ssnInput.hideValue",
-    defaultMessage: "Hide value",
-    description: "Accessible label for hiding an SSN or SIN value"
-  }
-});
-
-// ../renderers/src/components/ssnInputUtils.ts
-function formatSsnValue(rawValue, displayFormat, isVisible) {
-  if (!displayFormat) {
-    return isVisible ? rawValue : "\u2022".repeat(rawValue.length);
-  }
-  const formattedValue = displayFormat.split("").reduce(
-    ({ display, digitsUsed }, character) => {
-      if (character === "*") {
-        return digitsUsed < rawValue.length ? {
-          display: `${display}${isVisible ? rawValue[digitsUsed] : "\u2022"}`,
-          digitsUsed: digitsUsed + 1
-        } : { display, digitsUsed };
-      }
-      return digitsUsed > 0 && digitsUsed < rawValue.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
-    },
-    { display: "", digitsUsed: 0 }
-  ).display;
-  const displayFormatDigitCount = displayFormat.split("").filter((character) => character === "*").length;
-  const extraValue = rawValue.slice(displayFormatDigitCount);
-  return `${formattedValue}${isVisible ? extraValue : "\u2022".repeat(extraValue.length)}`;
-}
-function getRawOffset(displayValue, displayOffset, rawValueLength) {
-  return Math.min(
-    displayValue.slice(0, displayOffset).split("").filter((character) => character === "\u2022" || /\d/.test(character)).length,
-    rawValueLength
-  );
-}
-function replaceSsnSelection(rawValue, displayValue, insertedValue, start, end) {
-  const startOffset = getRawOffset(displayValue, start, rawValue.length);
-  const endOffset = getRawOffset(displayValue, end, rawValue.length);
-  if (!insertedValue) {
-    return void 0;
-  }
-  return {
-    value: `${rawValue.slice(0, startOffset)}${insertedValue}${rawValue.slice(endOffset)}`,
-    caret: startOffset + insertedValue.length
-  };
-}
-function deleteSsnSelection(rawValue, displayValue, start, end, backward) {
-  let startOffset = getRawOffset(displayValue, start, rawValue.length);
-  let endOffset = getRawOffset(displayValue, end, rawValue.length);
-  if (startOffset === endOffset) {
-    if (backward) {
-      startOffset = Math.max(0, startOffset - 1);
-    } else {
-      endOffset = Math.min(rawValue.length, endOffset + 1);
-    }
-  }
-  return {
-    value: `${rawValue.slice(0, startOffset)}${rawValue.slice(endOffset)}`,
-    caret: startOffset
-  };
-}
-function getDisplayOffset(displayValue, rawOffset) {
-  if (rawOffset === 0) {
-    return 0;
-  }
-  let displayOffset = 0;
-  let digitsSeen = 0;
-  for (const character of displayValue) {
-    if (character === "\u2022" || /\d/.test(character)) {
-      digitsSeen += 1;
-      if (digitsSeen === rawOffset) {
-        return displayOffset + 1;
-      }
-    }
-    displayOffset += 1;
-  }
-  return displayOffset;
-}
-
-// ../renderers/src/components/VariableTextInput.tsx
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6889,15 +6797,13 @@ var commonKeys = [
   "value"
 ];
 function VariableTextInput(inputProps) {
-  const { id, value, control, onChange, isSsnVisible } = inputProps;
+  const { id, value, control, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
   switch (control) {
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
-    case "ssn-input":
-      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { isVisible: isSsnVisible, onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -6917,198 +6823,65 @@ function VariableTextInput(inputProps) {
     }
   }
 }
-function SsnInputToggle({
-  isVisible,
-  onClick
-}) {
-  const { formatMessage } = (0, import_react_intl36.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-    import_components68.IconButton,
-    {
-      priority: "minimal",
-      size: 24,
-      "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
-      "aria-pressed": isVisible,
-      onClick,
-      children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.EyeShut, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.Eye, { size: 24 })
-    }
-  );
-}
 function TextInput(props) {
-  const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
+  const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
   const InputWithPattern = control === "textarea" ? import_components68.TextareaWithDisplayFormat : import_components68.InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? import_components68.TextArea : import_components68.Input;
-  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
-}
-function SsnInput(props) {
-  const _a = props, { displayFormat = "", isVisible = false, onChange, value = "" } = _a, commonProps = __objRest(_a, ["displayFormat", "isVisible", "onChange", "value"]);
-  const [editVersion, setEditVersion] = (0, import_react27.useState)(0);
-  const inputRef = (0, import_react27.useRef)(null);
-  const selection = (0, import_react27.useRef)({ start: 0, end: 0 });
-  const pendingCaret = (0, import_react27.useRef)(null);
-  const rawValue = value.replace(/\D/g, "");
-  const formattedValue = formatSsnValue(rawValue, displayFormat, isVisible);
-  const scheduleCaret = (rawOffset) => {
-    pendingCaret.current = rawOffset;
-    setEditVersion((version) => version + 1);
-  };
-  const replaceSelection = (insertedValue, start, end) => {
-    const result = replaceSsnSelection(rawValue, formattedValue, insertedValue, start, end);
-    if (!result) {
-      return;
-    }
-    scheduleCaret(result.caret);
-    onChange(result.value);
-  };
-  const deleteSelection = (start, end, backward) => {
-    const result = deleteSsnSelection(rawValue, formattedValue, start, end, backward);
-    scheduleCaret(result.caret);
-    onChange(result.value);
-  };
-  (0, import_react27.useLayoutEffect)(() => {
-    if (pendingCaret.current === null || !inputRef.current) {
-      return;
-    }
-    inputRef.current.setSelectionRange(
-      getDisplayOffset(formattedValue, pendingCaret.current),
-      getDisplayOffset(formattedValue, pendingCaret.current)
-    );
-    pendingCaret.current = null;
-  }, [editVersion, formattedValue, rawValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-    "input",
-    __spreadProps(__spreadValues({
-      ref: inputRef
-    }, commonProps), {
-      className: "form-control np-form-control np-input np-input--shape-rectangle",
-      type: "text",
-      inputMode: "numeric",
-      value: formattedValue,
-      onChange: (event) => {
-        const nextValue = event.currentTarget.value;
-        const inputType = event.nativeEvent.inputType;
-        const start = selection.current.start;
-        const end = selection.current.end;
-        if (isVisible || /^\d+$/.test(nextValue)) {
-          const nextRawValue = nextValue.replace(/\D/g, "");
-          scheduleCaret(nextRawValue.length);
-          onChange(nextRawValue);
-        } else if ((inputType == null ? void 0 : inputType.startsWith("delete")) || nextValue.length < formattedValue.length) {
-          deleteSelection(start, end, inputType === "deleteContentBackward");
-        } else {
-          replaceSelection(nextValue.replace(/\D/g, ""), start, end);
-        }
-      },
-      onSelect: (event) => {
-        var _a2, _b;
-        selection.current = {
-          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-        };
-      },
-      onKeyDown: (event) => {
-        var _a2, _b;
-        selection.current = {
-          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-        };
-        if (/^\d$/.test(event.key)) {
-          event.preventDefault();
-          replaceSelection(event.key, selection.current.start, selection.current.end);
-        } else if (event.key === "Backspace") {
-          event.preventDefault();
-          deleteSelection(selection.current.start, selection.current.end, true);
-        } else if (event.key === "Delete") {
-          event.preventDefault();
-          deleteSelection(selection.current.start, selection.current.end, false);
-        }
-      },
-      onPaste: (event) => {
-        var _a2, _b;
-        event.preventDefault();
-        selection.current = {
-          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
-          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
-        };
-        const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
-        replaceSelection(pastedValue, selection.current.start, selection.current.end);
-      }
-    })
-  );
+  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
 }
 
 // ../renderers/src/TextInputRenderer.tsx
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var TextInputRenderer = {
   canRenderType: "input-text",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TextInputRendererComponent, __spreadValues({}, props))
-};
-function TextInputRendererComponent(props) {
-  const [isSsnVisible, setIsSsnVisible] = (0, import_react28.useState)(false);
-  const _a = props, {
-    id,
-    title,
-    description,
-    help,
-    media,
-    validationState,
-    value: initialValue,
-    onChange
-  } = _a, rest = __objRest(_a, [
-    "id",
-    "title",
-    "description",
-    "help",
-    "media",
-    "validationState",
-    "value",
-    "onChange"
-  ]);
-  const value = initialValue != null ? initialValue : "";
-  const isSsnInput = props.control === "ssn-input";
-  const inputProps = __spreadProps(__spreadValues({}, rest), {
-    value,
-    id,
-    isSsnVisible,
-    onChange: (newValue) => {
-      if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
-        onChange(newValue);
-      }
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-    FieldInput_default,
-    {
+  render: (props) => {
+    const _a = props, {
       id,
-      label: title,
+      title,
       description,
-      validation: validationState,
-      inlineAlert: props.inlineAlert,
-      loadingState: props.fieldLoadingState,
       help,
-      features: props.features,
-      control: props.control,
-      tags: props.tags,
-      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-        import_components69.InputGroup,
-        {
-          addonStart: getInputGroupAddonStart(media),
-          addonEnd: isSsnInput ? {
-            interactive: true,
-            content: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-              SsnInputToggle,
-              {
-                isVisible: isSsnVisible,
-                onClick: () => setIsSsnVisible((visible) => !visible)
-              }
-            )
-          } : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VariableTextInput, __spreadValues({}, inputProps))
+      media,
+      validationState,
+      value: initialValue,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "title",
+      "description",
+      "help",
+      "media",
+      "validationState",
+      "value",
+      "onChange"
+    ]);
+    const value = initialValue != null ? initialValue : "";
+    const inputProps = __spreadProps(__spreadValues({}, rest), {
+      value,
+      id,
+      onChange: (newValue) => {
+        if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
+          onChange(newValue);
         }
-      )
-    }
-  );
-}
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+      FieldInput_default,
+      {
+        id,
+        label: title,
+        description,
+        validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
+        help,
+        features: props.features,
+        control: props.control,
+        tags: props.tags,
+        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_components69.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
+      }
+    );
+  }
+};
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UpdatableRenderer.tsx
@@ -7266,7 +7039,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_components71 = require("@transferwise/components");
 var import_classnames35 = __toESM(require_classnames());
-var import_react29 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7274,7 +7047,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = (0, import_react29.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_components71.Nudge,
     {
@@ -7503,12 +7276,12 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react30 = require("react");
-var import_react_intl38 = require("react-intl");
+var import_react28 = require("react");
+var import_react_intl36 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
-var import_react_intl37 = require("react-intl");
-var messages_default = (0, import_react_intl37.defineMessages)({
+var import_react_intl35 = require("react-intl");
+var messages_default = (0, import_react_intl35.defineMessages)({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -7523,9 +7296,9 @@ var messages_default = (0, import_react_intl37.defineMessages)({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl38.useIntl)();
+  const { formatMessage } = (0, import_react_intl36.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react30.useCallback)(
+  return (0, import_react28.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -7538,11 +7311,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react31 = require("react");
-var import_react_intl39 = require("react-intl");
+var import_react29 = require("react");
+var import_react_intl37 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl39.useIntl)();
-  return (0, import_react31.useCallback)(
+  const { locale } = (0, import_react_intl37.useIntl)();
+  return (0, import_react29.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -7583,10 +7356,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react32.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react30.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react32.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react32.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react30.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react30.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -7634,14 +7407,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react33 = require("react");
+var import_react31 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react33.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react31.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react33.useImperativeHandle)(
+  (0, import_react31.useImperativeHandle)(
     ref,
     () => ({
       getValue: () => {
@@ -7814,8 +7587,6 @@ var en_default = {
   "df.wise.group.currencies-with-account-details": "Currencies with account details",
   "df.wise.group.popular": "Popular",
   "df.wise.group.recent": "Recent",
-  "df.wise.ssnInput.hideValue": "Hide value",
-  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Scroll to bottom"
 };