@evervault/react-native 2.3.0 → 2.4.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) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evervault/react-native",
   "description": "Evervault SDK for React Native",
-  "version": "2.3.0",
+  "version": "2.4.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");
+  });
 });

package/src/Input.tsx

@@ -8,11 +8,13 @@ import {
   useCallback,
   useContext,
   useImperativeHandle,
+  useMemo,
   useRef,
+  useState,
 } from "react";
 import { TextInput, TextInputProps } from "react-native";
 import { mergeRefs } from "./utils";
-import { Controller, useFormContext } from "react-hook-form";
+import { Controller, useController, useFormContext } from "react-hook-form";
 import MaskInput, { Mask, MaskArray } from "react-native-mask-input";
 
 export interface EvervaultInputContextValue {
@@ -82,73 +84,97 @@ export type BaseEvervaultInputProps = Omit<
 >;
 
 export function mask(format: string): MaskArray {
-  return format.split("").map((char) => {
+  const maskArray: MaskArray = [];
+
+  let isObfuscated = false;
+  format.split("").forEach((char) => {
+    if (char === "[") {
+      isObfuscated = true;
+      return;
+    } else if (char === "]") {
+      isObfuscated = false;
+      return;
+    }
+
+    let value: string | RegExp | [RegExp] = char;
     if (char === "9") {
-      return /\d/;
+      value = isObfuscated ? [/\d/] : /\d/;
     }
-    return char;
+    maskArray.push(value);
   });
+
+  return maskArray;
 }
 
 export interface EvervaultInputProps<Values extends Record<string, unknown>>
   extends BaseEvervaultInputProps {
   name: keyof Values;
   mask?: Mask;
+  obfuscateValue?: boolean | string;
 }
 
 export const EvervaultInput = forwardRef<
   EvervaultInput,
   EvervaultInputProps<Record<string, unknown>>
->(function EvervaultInput({ name, mask, ...props }, ref) {
+>(function EvervaultInput({ name, mask, obfuscateValue, ...props }, ref) {
   const { validationMode } = useContext(EvervaultInputContext);
 
   const inputRef = useForwardedInputRef(ref);
 
   const methods = useFormContext();
 
+  const { field, fieldState } = useController({
+    control: methods.control,
+    name,
+    shouldUnregister: true,
+  });
+
+  const obfuscationCharacter = useMemo(() => {
+    if (typeof obfuscateValue === "string") {
+      return obfuscateValue;
+    } else {
+      return "•";
+    }
+  }, [obfuscateValue]);
+
   return (
-    <Controller
-      control={methods.control}
-      name={name}
-      shouldUnregister
-      render={({ field, fieldState }) => (
-        <MaskInput
-          // 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}
-        />
-      )}
+    <MaskInput
+      // 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}
+      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}
     />
   );
 }) as <Values extends Record<string, unknown>>(