@wise/dynamic-flow-client-internal 5.30.0 → 5.30.1-experimental-1e1196b

package/build/main.mjs

@@ -6777,7 +6777,98 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { Eye, EyeShut } from "@transferwise/icons";
+import { useIntl as useIntl21 } from "react-intl";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState20 } from "react";
+
+// ../renderers/src/messages/ssn-input.messages.ts
+import { defineMessages as defineMessages15 } from "react-intl";
+var ssn_input_messages_default = defineMessages15({
+  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);
+  }
+  return 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;
+}
+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, maxDigits) {
+  const startOffset = getRawOffset(displayValue, start, rawValue.length);
+  const endOffset = getRawOffset(displayValue, end, rawValue.length);
+  const selectedLength = endOffset - startOffset;
+  const availableCapacity = Math.max(0, maxDigits - (rawValue.length - selectedLength));
+  const acceptedInsertedValue = insertedValue.slice(0, availableCapacity);
+  if (!acceptedInsertedValue) {
+    return void 0;
+  }
+  return {
+    value: `${rawValue.slice(0, startOffset)}${acceptedInsertedValue}${rawValue.slice(endOffset)}`,
+    caret: startOffset + acceptedInsertedValue.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
+import { jsx as jsx100, jsxs as jsxs40 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
   "autoCapitalize",
@@ -6794,6 +6885,9 @@ var commonKeys = [
 function VariableTextInput(inputProps) {
   const { id, value, control, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
+  if (control === "ssn-input") {
+    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { maxLength: inputProps.maxLength, onChange }));
+  }
   switch (control) {
     case "email":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
@@ -6819,10 +6913,142 @@ function VariableTextInput(inputProps) {
   }
 }
 function TextInput(props) {
-  const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
+  const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
   const InputWithPattern = control === "textarea" ? TextareaWithDisplayFormat : InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? TextArea : Input6;
-  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
+}
+function SsnInput(props) {
+  const _a = props, {
+    displayFormat = "",
+    maxLength,
+    onChange,
+    type: _type,
+    value = ""
+  } = _a, commonProps = __objRest(_a, [
+    "displayFormat",
+    "maxLength",
+    "onChange",
+    "type",
+    "value"
+  ]);
+  const { formatMessage } = useIntl21();
+  const [isVisible, setIsVisible] = useState20(false);
+  const [editVersion, setEditVersion] = useState20(0);
+  const inputRef = useRef5(null);
+  const selection = useRef5({ start: 0, end: 0 });
+  const pendingCaret = useRef5(null);
+  const maxDigits = displayFormat.split("").filter((character) => character === "*").length || maxLength || Infinity;
+  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,
+      maxDigits
+    );
+    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);
+  };
+  useLayoutEffect3(() => {
+    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__ */ jsxs40("div", { className: "df-ssn-input-wrapper", children: [
+    /* @__PURE__ */ jsx100(
+      "input",
+      __spreadProps(__spreadValues({
+        ref: inputRef
+      }, commonProps), {
+        className: "form-control np-form-control np-input np-input--shape-rectangle df-ssn-input",
+        type: "text",
+        inputMode: "numeric",
+        maxLength: displayFormat.length || maxLength,
+        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, "").slice(0, maxDigits);
+            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);
+        }
+      })
+    ),
+    /* @__PURE__ */ jsx100(
+      "button",
+      {
+        type: "button",
+        className: "df-ssn-input-toggle",
+        "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
+        "aria-pressed": isVisible,
+        onClick: () => setIsVisible((visible) => !visible),
+        children: isVisible ? /* @__PURE__ */ jsx100(EyeShut, { size: 24 }) : /* @__PURE__ */ jsx100(Eye, { size: 24 })
+      }
+    )
+  ] });
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -7034,7 +7260,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7042,7 +7268,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState20(true);
+  const [isVisible, setIsVisible] = useState21(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {
@@ -7272,11 +7498,11 @@ var customEventsToAnalytics = {
 
 // src/dynamicFlow/useOnCopy.tsx
 import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl21 } from "react-intl";
+import { useIntl as useIntl22 } from "react-intl";
 
 // src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages15 } from "react-intl";
-var messages_default = defineMessages15({
+import { defineMessages as defineMessages16 } from "react-intl";
+var messages_default = defineMessages16({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -7291,7 +7517,7 @@ var messages_default = defineMessages15({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = useIntl21();
+  const { formatMessage } = useIntl22();
   const createSnackBar = useSnackBarIfAvailable();
   return useCallback2(
     (copiedContent) => {
@@ -7307,9 +7533,9 @@ var useOnCopy = () => {
 
 // src/dynamicFlow/useWiseHttpClient.tsx
 import { useCallback as useCallback3 } from "react";
-import { useIntl as useIntl22 } from "react-intl";
+import { useIntl as useIntl23 } from "react-intl";
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl22();
+  const { locale } = useIntl23();
   return useCallback3(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -7389,13 +7615,13 @@ var openLinkInNewTab = (url) => {
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsxs as jsxs41 } from "react/jsx-runtime";
 function DynamicFlow(props) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = useDynamicFlow(dfProps);
   const { onContextMenu, contextMenu } = useDFContextMenu(df.controller);
-  return /* @__PURE__ */ jsxs40("div", { className, onContextMenu, children: [
+  return /* @__PURE__ */ jsxs41("div", { className, onContextMenu, children: [
     df.view,
     contextMenu
   ] });