@evervault/react-native 2.3.0 → 2.5.0

package/build/index.esm.js

@@ -588,50 +588,6 @@ function useController(props) {
     }), [field, formState, fieldState]);
 }
 
-/**
- * Component based on `useController` hook to work with controlled component.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
- *
- * @param props - the path name to the form field value, and validation rules.
- *
- * @returns provide field handler functions, field and form state.
- *
- * @example
- * ```tsx
- * function App() {
- *   const { control } = useForm<FormValues>({
- *     defaultValues: {
- *       test: ""
- *     }
- *   });
- *
- *   return (
- *     <form>
- *       <Controller
- *         control={control}
- *         name="test"
- *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
- *           <>
- *             <input
- *               onChange={onChange} // send value to hook form
- *               onBlur={onBlur} // notify when input is touched
- *               value={value} // return updated value
- *               ref={ref} // set ref for focus management
- *             />
- *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
- *             <p>{fieldState.isTouched ? "touched" : ""}</p>
- *           </>
- *         )}
- *       />
- *     </form>
- *   );
- * }
- * ```
- */
-const Controller = (props) => props.render(useController(props));
-
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
     ? {
         ...errors[name],
@@ -7408,44 +7364,69 @@ function useForwardedInputRef(ref) {
     return inputRef;
 }
 function mask(format) {
-    return format.split("").map((char) => {
+    const maskArray = [];
+    let isObfuscated = false;
+    format.split("").forEach((char) => {
+        if (char === "[") {
+            isObfuscated = true;
+            return;
+        }
+        else if (char === "]") {
+            isObfuscated = false;
+            return;
+        }
+        let value = char;
         if (char === "9") {
-            return /\d/;
+            value = isObfuscated ? [/\d/] : /\d/;
         }
-        return char;
+        maskArray.push(value);
     });
+    return maskArray;
 }
-const EvervaultInput = forwardRef(function EvervaultInput({ name, mask, ...props }, ref) {
+const EvervaultInput = forwardRef(function EvervaultInput({ name, mask, obfuscateValue, ...props }, ref) {
     const { validationMode } = useContext(EvervaultInputContext);
     const inputRef = useForwardedInputRef(ref);
     const methods = useFormContext();
-    return (jsx(Controller, { control: methods.control, name: name, shouldUnregister: true, render: ({ field, fieldState }) => (jsx(MaskInput
+    const { field, fieldState } = useController({
+        control: methods.control,
+        name,
+        shouldUnregister: true,
+    });
+    const obfuscationCharacter = useMemo(() => {
+        if (typeof obfuscateValue === "string") {
+            return obfuscateValue;
+        }
+        else {
+            return "•";
+        }
+    }, [obfuscateValue]);
+    return (jsx(MaskInput
+    // Overridable props
+    , { 
         // Overridable props
-        , { 
-            // Overridable props
-            id: field.name, ...props, 
-            // Strict props
-            ref: mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
-                const shouldValidate = validationMode === "onBlur" ||
-                    validationMode === "onTouched" ||
-                    validationMode === "all";
-                methods.setValue(field.name, field.value, {
-                    shouldDirty: true,
-                    shouldTouch: true,
-                    shouldValidate,
-                });
-                props.onBlur?.(evt);
-            }, mask: mask, maskAutoComplete: !!mask, value: field.value, onChangeText: (masked, unmasked) => {
-                const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
-                    ((validationMode === "onChange" || validationMode === "all") &&
-                        (!!fieldState.error || fieldState.isTouched));
-                methods.setValue(field.name, unmasked, {
-                    shouldDirty: true,
-                    shouldValidate,
-                });
-            }, 
-            // Remove unwanted props
-            defaultValue: undefined, onChange: undefined })) }));
+        id: field.name, ...props, 
+        // Strict props
+        ref: mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
+            const shouldValidate = validationMode === "onBlur" ||
+                validationMode === "onTouched" ||
+                validationMode === "all";
+            methods.setValue(field.name, field.value, {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate,
+            });
+            props.onBlur?.(evt);
+        }, mask: mask, maskAutoComplete: !!mask, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: !!obfuscateValue, value: field.value, onChangeText: (masked, unmasked) => {
+            const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
+                ((validationMode === "onChange" || validationMode === "all") &&
+                    (!!fieldState.error || fieldState.isTouched));
+            methods.setValue(field.name, unmasked, {
+                shouldDirty: true,
+                shouldValidate,
+            });
+        }, 
+        // Remove unwanted props
+        defaultValue: undefined, onChange: undefined }));
 });
 
 const DEFAULT_ACCEPTED_BRANDS = [];
@@ -7518,9 +7499,9 @@ const CardExpiry = forwardRef(function CardExpiry(props, ref) {
     return (jsx(EvervaultInput, { placeholder: "MM / YY", ...props, ref: ref, name: "expiry", mask: CARD_EXPIRY_MASK, inputMode: "numeric", autoComplete: "cc-exp", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_CVC_MASK = mask("999");
+const DEFAULT_CARD_CVC_MASK = mask("[999]");
 const CARD_CVC_MASKS = {
-    "american-express": mask("9999"),
+    "american-express": mask("[9999]"),
 };
 const CardCvc = forwardRef(function CardCvc(props, ref) {
     const methods = useFormContext();
@@ -7538,10 +7519,10 @@ const CardCvc = forwardRef(function CardCvc(props, ref) {
     return (jsx(EvervaultInput, { placeholder: "CVC", ...props, ref: ref, name: "cvc", mask: mask, inputMode: "numeric", autoComplete: "cc-csc", keyboardType: "number-pad" }));
 });
 
-const DEFAULT_CARD_NUMBER_MASK = mask("9999 9999 9999 9999");
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 99[99 9999 9999]");
 const CARD_NUMBER_MASKS = {
-    unionpay: mask("9999 9999 9999 9999 999"),
-    "american-express": mask("9999 999999 99999"),
+    unionpay: mask("9999 99[99 9999 9999 999]"),
+    "american-express": mask("9999 99[9999 99999]"),
 };
 const CardNumber = forwardRef(function CardNumber(props, ref) {
     const mask = useCallback((text) => {
@@ -7602,6 +7583,23 @@ const defaultStyles = StyleSheet.create({
     },
 });
 
+class ThreeDSecureEvent {
+    type;
+    session;
+    _defaultPrevented;
+    constructor(type, session, _defaultPrevented = false) {
+        this.type = type;
+        this.session = session;
+        this._defaultPrevented = _defaultPrevented;
+    }
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+}
+
 function stopPolling(intervalRef, setIsVisible) {
     setIsVisible(false);
     if (intervalRef.current) {
@@ -7609,55 +7607,91 @@ function stopPolling(intervalRef, setIsVisible) {
         intervalRef.current = null;
     }
 }
-async function startSession(session, callbacks, intervalRef, setIsVisible) {
+async function startSession(session, options, intervalRef, setIsVisible) {
     try {
         const sessionState = await session.get();
+        function fail() {
+            stopPolling(intervalRef, setIsVisible);
+            options?.onFailure?.(new Error("3DS session failed"));
+        }
         switch (sessionState.status) {
-            case "success":
+            case "success": {
                 stopPolling(intervalRef, setIsVisible);
-                callbacks?.onSuccess?.();
+                options?.onSuccess?.();
                 break;
-            case "failure":
-                stopPolling(intervalRef, setIsVisible);
-                callbacks?.onFailure?.(new Error("3DS session failed"));
+            }
+            case "failure": {
+                fail();
                 break;
-            case "action-required":
+            }
+            case "action-required": {
+                const failOnChallenge = typeof options?.failOnChallenge === "function"
+                    ? await options.failOnChallenge()
+                    : options?.failOnChallenge ?? false;
+                if (failOnChallenge) {
+                    fail();
+                    break;
+                }
+                const event = new ThreeDSecureEvent("requestChallenge", session);
+                options?.onRequestChallenge?.(event);
+                if (event.defaultPrevented) {
+                    fail();
+                    break;
+                }
                 setIsVisible(true);
-                pollSession(session, callbacks, intervalRef, setIsVisible);
-                break;
-            default:
-                break;
+                pollSession(session, options, intervalRef, setIsVisible);
+            }
         }
     }
     catch (error) {
         console.error("Error checking session state", error);
-        callbacks?.onError?.(new Error("Failed to check 3DS session state"));
+        options?.onError?.(new Error("Failed to check 3DS session state"));
     }
 }
-function pollSession(session, callbacks, intervalRef, setIsVisible, interval = 3000) {
+function pollSession(session, options, intervalRef, setIsVisible, interval = 3000) {
+    function fail() {
+        stopPolling(intervalRef, setIsVisible);
+        options?.onFailure?.(new Error("3DS session failed"));
+    }
     intervalRef.current = setInterval(async () => {
         try {
             const pollResponse = await session.get();
-            if (pollResponse.status === "success") {
-                stopPolling(intervalRef, setIsVisible);
-                callbacks?.onSuccess?.();
-            }
-            else if (pollResponse.status === "failure") {
-                stopPolling(intervalRef, setIsVisible);
-                callbacks?.onFailure?.(new Error("3DS session failed"));
-            }
-            else {
-                setIsVisible(true);
+            switch (pollResponse.status) {
+                case "success": {
+                    stopPolling(intervalRef, setIsVisible);
+                    options?.onSuccess?.();
+                    break;
+                }
+                case "failure": {
+                    fail();
+                    break;
+                }
+                case "action-required": {
+                    const failOnChallenge = typeof options?.failOnChallenge === "function"
+                        ? await options.failOnChallenge()
+                        : options?.failOnChallenge ?? false;
+                    if (failOnChallenge) {
+                        fail();
+                        break;
+                    }
+                    const event = new ThreeDSecureEvent("requestChallenge", session);
+                    options?.onRequestChallenge?.(event);
+                    if (event.defaultPrevented) {
+                        fail();
+                        break;
+                    }
+                    setIsVisible(true);
+                }
             }
         }
         catch (error) {
             stopPolling(intervalRef, setIsVisible);
             console.error("Error polling session", error);
-            callbacks?.onError?.(new Error("Error polling 3DS session"));
+            options?.onError?.(new Error("Error polling 3DS session"));
         }
     }, interval);
 }
-function threeDSecureSession({ sessionId, appId, callbacks, intervalRef, setIsVisible, }) {
+function threeDSecureSession({ sessionId, appId, options, intervalRef, setIsVisible, }) {
     async function get() {
         try {
             const response = await fetch(`https://${EV_API_DOMAIN}/frontend/3ds/browser-sessions/${sessionId}`, {
@@ -7683,7 +7717,7 @@ function threeDSecureSession({ sessionId, appId, callbacks, intervalRef, setIsVi
                 },
                 body: JSON.stringify({ outcome: "cancelled" }),
             });
-            callbacks?.onFailure?.(new Error("3DS session cancelled by user"));
+            options?.onFailure?.(new Error("3DS session cancelled by user"));
             stopPolling(intervalRef, setIsVisible);
         }
         catch (error) {
@@ -7698,22 +7732,27 @@ function threeDSecureSession({ sessionId, appId, callbacks, intervalRef, setIsVi
     };
 }
 
-function useThreeDSecure() {
+function useThreeDSecure(options) {
     const { appId } = useEvervault();
     const intervalRef = useRef(null);
     const [session, setSession] = useState(null);
     const [isVisible, setIsVisible] = useState(false);
-    const start = useCallback((sessionId, callbacks) => {
+    const failOnChallenge = options?.failOnChallenge ?? false;
+    const start = useCallback((sessionId, options) => {
+        const startOptions = {
+            ...options,
+            failOnChallenge: options?.failOnChallenge ?? failOnChallenge,
+        };
         const session = threeDSecureSession({
             sessionId,
             appId,
-            callbacks,
+            options: startOptions,
             intervalRef,
             setIsVisible,
         });
         setSession(session);
-        startSession(session, callbacks, intervalRef, setIsVisible);
-    }, [appId]);
+        startSession(session, startOptions, intervalRef, setIsVisible);
+    }, [appId, failOnChallenge]);
     const cancel = useCallback(async () => {
         if (session) {
             await session.cancel();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evervault/react-native",
   "description": "Evervault SDK for React Native",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "source": "./src/index.ts",
   "main": "./build/index.cjs.js",
   "module": "./build/index.esm.js",

package/src/Card/Cvc.tsx

@@ -6,13 +6,20 @@ import { validateNumber } from "@evervault/card-validator";
 import { useFormContext } from "react-hook-form";
 import { CardBrandName } from "./types";
 
-const DEFAULT_CARD_CVC_MASK = mask("999");
+const DEFAULT_CARD_CVC_MASK = mask("[999]");
 
 const CARD_CVC_MASKS: Partial<Record<CardBrandName, Mask>> = {
-  "american-express": mask("9999"),
+  "american-express": mask("[9999]"),
 };
 
-export type CardCvcProps = BaseEvervaultInputProps;
+export interface CardCvcProps extends BaseEvervaultInputProps {
+  /**
+   * Whether to obfuscate the entire CVC value.
+   *
+   * If a string is provided, it will be used to obfuscate the value.
+   */
+  obfuscateValue?: boolean | string;
+}
 
 export type CardCvc = EvervaultInput;
 

package/src/Card/Number.test.tsx

@@ -13,7 +13,7 @@ function wrapper({ children }: PropsWithChildren) {
 }
 
 it("uses 16 digits for mask by default", async () => {
-  const { getByTestId } = render(
+  const { rerender, getByTestId } = render(
     <Card>
       <CardNumber testID="number" />
     </Card>,
@@ -24,10 +24,17 @@ it("uses 16 digits for mask by default", async () => {
   const user = userEvent.setup();
   await user.type(number, "4242424242424242");
   expect(number).toHaveProp("value", "4242 4242 4242 4242");
+
+  rerender(
+    <Card>
+      <CardNumber testID="number" obfuscateValue />
+    </Card>
+  );
+  expect(number).toHaveProp("value", "4242 42•• •••• ••••");
 });
 
 it("uses 19 digits for mask for unionpay", async () => {
-  const { getByTestId } = render(
+  const { rerender, getByTestId } = render(
     <Card>
       <CardNumber testID="number" />
     </Card>,
@@ -38,10 +45,17 @@ it("uses 19 digits for mask for unionpay", async () => {
   const user = userEvent.setup();
   await user.type(number, "6205500000000000004");
   expect(number).toHaveProp("value", "6205 5000 0000 0000 004");
+
+  rerender(
+    <Card>
+      <CardNumber testID="number" obfuscateValue />
+    </Card>
+  );
+  expect(number).toHaveProp("value", "6205 50•• •••• •••• •••");
 });
 
 it("uses 15 digits for mask for american express", async () => {
-  const { getByTestId } = render(
+  const { rerender, getByTestId } = render(
     <Card>
       <CardNumber testID="number" />
     </Card>,
@@ -52,4 +66,11 @@ it("uses 15 digits for mask for american express", async () => {
   const user = userEvent.setup();
   await user.type(number, "371449635398431");
   expect(number).toHaveProp("value", "3714 496353 98431");
+
+  rerender(
+    <Card>
+      <CardNumber testID="number" obfuscateValue />
+    </Card>
+  );
+  expect(number).toHaveProp("value", "3714 49•••• •••••");
 });

package/src/Card/Number.tsx

@@ -5,14 +5,21 @@ import { MaskArray } from "react-native-mask-input";
 import { validateNumber } from "@evervault/card-validator";
 import { CardBrandName } from "./types";
 
-const DEFAULT_CARD_NUMBER_MASK = mask("9999 9999 9999 9999");
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 99[99 9999 9999]");
 
 const CARD_NUMBER_MASKS: Partial<Record<CardBrandName, MaskArray>> = {
-  unionpay: mask("9999 9999 9999 9999 999"),
-  "american-express": mask("9999 999999 99999"),
+  unionpay: mask("9999 99[99 9999 9999 999]"),
+  "american-express": mask("9999 99[9999 99999]"),
 };
 
-export type CardNumberProps = BaseEvervaultInputProps;
+export interface CardNumberProps extends BaseEvervaultInputProps {
+  /**
+   * Whether to obfuscate the card number value (excluding the last 4 digits).
+   *
+   * If a string is provided, it will be used to obfuscate the value.
+   */
+  obfuscateValue?: boolean | string;
+}
 
 export type CardNumber = EvervaultInput;
 

package/src/Input.test.tsx

@@ -27,6 +27,25 @@ describe("mask", () => {
       /\d/,
     ]);
   });
+
+  it("should account for obfuscation", () => {
+    expect(mask("[9999 9999] 9999")).toEqual([
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      " ",
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      [/\d/],
+      " ",
+      /\d/,
+      /\d/,
+      /\d/,
+      /\d/,
+    ]);
+  });
 });
 
 describe("EvervaultInput", () => {
@@ -333,4 +352,69 @@ describe("EvervaultInput", () => {
       { shouldDirty: true, shouldValidate: true }
     );
   });
+
+  it("should obfuscate the value when obfuscateValue=true", async () => {
+    const phoneMask = mask("[(999) 999]-9999");
+    const { rerender } = render(
+      <EvervaultInput testID="phone" mask={phoneMask} name="phone" />,
+      {
+        wrapper: Form,
+      }
+    );
+
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(123) 456-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(•••) •••-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue="#"
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(###) ###-7890");
+
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={phoneMask}
+        name="phone"
+        obfuscateValue="🤔"
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(🤔🤔🤔) 🤔🤔🤔-7890");
+
+    const unobfuscatedMask = mask("(999) 999-9999");
+    rerender(
+      <EvervaultInput
+        testID="phone"
+        mask={unobfuscatedMask}
+        name="phone"
+        obfuscateValue
+      />
+    );
+
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "(123) 456-7890");
+  });
 });