@evervault/react-native 2.6.0 → 2.6.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@evervault/react-native",
   "description": "Evervault SDK for React Native",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "source": "./src/index.ts",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
   "types": "./build/esm/index.d.ts",
   "files": [
+    "src",
     "build",
     "ios",
     "android",
@@ -61,7 +62,7 @@
     "react-hook-form": "^7.54.2",
     "react-native-mask-input": "^1.2.3",
     "zod": "^3.24.2",
-    "@evervault/card-validator": "1.5.0"
+    "@evervault/card-validator": "1.5.1"
   },
   "scripts": {
     "prebuild": "pnpm codegen",

package/src/Card/Cvc.test.tsx

@@ -0,0 +1,41 @@
+import { render, userEvent } from "@testing-library/react-native";
+import { PropsWithChildren } from "react";
+import { Card } from "./Root";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { CardCvc } from "./Cvc";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("uses 3 digits for mask by default", async () => {
+  const { getByTestId } = render(
+    <Card>
+      <CardCvc testID="cvc" />
+    </Card>,
+    { wrapper }
+  );
+  const cvc = getByTestId("cvc");
+
+  const user = userEvent.setup();
+  await user.type(cvc, "12345");
+  expect(cvc).toHaveProp("value", "123");
+});
+
+it("uses 4 digits for mask for american express", async () => {
+  const { getByTestId } = render(
+    <Card defaultValues={{ number: "378282246310005" }}>
+      <CardCvc testID="cvc" />
+    </Card>,
+    { wrapper }
+  );
+  const cvc = getByTestId("cvc");
+
+  const user = userEvent.setup();
+  await user.type(cvc, "12345");
+  expect(cvc).toHaveProp("value", "1234");
+});

package/src/Card/Cvc.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, useMemo } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+import { Mask } from "react-native-mask-input";
+import { validateNumber } from "@evervault/card-validator";
+import { useFormContext } from "react-hook-form";
+import { CardBrandName } from "./types";
+
+const DEFAULT_CARD_CVC_MASK = mask("[999]");
+
+const CARD_CVC_MASKS: Partial<Record<CardBrandName, Mask>> = {
+  "american-express": mask("[9999]"),
+};
+
+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;
+
+export const CardCvc = forwardRef<CardCvc, CardCvcProps>(function CardCvc(
+  props,
+  ref
+) {
+  const methods = useFormContext<CardFormValues>();
+
+  const number = methods.watch("number");
+  const mask = useMemo<Mask>(() => {
+    if (!number) {
+      return DEFAULT_CARD_CVC_MASK;
+    }
+
+    const brand = validateNumber(number).brand;
+    if (brand && CARD_CVC_MASKS[brand]) {
+      return CARD_CVC_MASKS[brand];
+    }
+
+    return DEFAULT_CARD_CVC_MASK;
+  }, [number]);
+
+  return (
+    <EvervaultInput<CardFormValues>
+      placeholder="CVC"
+      {...props}
+      ref={ref}
+      name="cvc"
+      mask={mask}
+      inputMode="numeric"
+      autoComplete="cc-csc"
+      keyboardType="number-pad"
+    />
+  );
+});

package/src/Card/Expiry.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+
+const CARD_EXPIRY_MASK = mask("99 / 99");
+
+export type CardExpiryProps = BaseEvervaultInputProps;
+
+export type CardExpiry = EvervaultInput;
+
+export const CardExpiry = forwardRef<CardExpiry, CardExpiryProps>(
+  function CardExpiry(props, ref) {
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="MM / YY"
+        {...props}
+        ref={ref}
+        name="expiry"
+        mask={CARD_EXPIRY_MASK}
+        inputMode="numeric"
+        autoComplete="cc-exp"
+        keyboardType="number-pad"
+      />
+    );
+  }
+);

package/src/Card/Holder.tsx

@@ -0,0 +1,27 @@
+import { Platform } from "react-native";
+import { forwardRef } from "react";
+import { BaseEvervaultInputProps, EvervaultInput } from "../Input";
+import { CardFormValues } from "./schema";
+
+export type CardHolderProps = BaseEvervaultInputProps;
+
+export type CardHolder = EvervaultInput;
+
+export const CardHolder = forwardRef<CardHolder, CardHolderProps>(
+  function CardHolder(props, ref) {
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="Johnny Appleseed"
+        {...props}
+        ref={ref}
+        name="name"
+        inputMode="text"
+        autoComplete={Platform.select({
+          ios: "cc-name",
+          default: "name",
+        })}
+        keyboardType="default"
+      />
+    );
+  }
+);

package/src/Card/Number.test.tsx

@@ -0,0 +1,76 @@
+import { render, userEvent } from "@testing-library/react-native";
+import { PropsWithChildren } from "react";
+import { Card } from "./Root";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { CardNumber } from "./Number";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("uses 16 digits for mask by default", async () => {
+  const { rerender, getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  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 { rerender, getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  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 { rerender, getByTestId } = render(
+    <Card>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+  const number = getByTestId("number");
+
+  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

@@ -0,0 +1,54 @@
+import { forwardRef, useCallback } from "react";
+import { BaseEvervaultInputProps, EvervaultInput, mask } from "../Input";
+import { CardFormValues } from "./schema";
+import { MaskArray } from "react-native-mask-input";
+import { validateNumber } from "@evervault/card-validator";
+import { CardBrandName } from "./types";
+
+const DEFAULT_CARD_NUMBER_MASK = mask("9999 99[99 9999 9999]");
+
+const CARD_NUMBER_MASKS: Partial<Record<CardBrandName, MaskArray>> = {
+  unionpay: mask("9999 99[99 9999 9999 999]"),
+  "american-express": mask("9999 99[9999 99999]"),
+};
+
+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;
+
+export const CardNumber = forwardRef<CardNumber, CardNumberProps>(
+  function CardNumber(props, ref) {
+    const mask = useCallback((text?: string): MaskArray => {
+      if (!text) {
+        return DEFAULT_CARD_NUMBER_MASK;
+      }
+
+      const brand = validateNumber(text).brand;
+      if (brand && CARD_NUMBER_MASKS[brand]) {
+        return CARD_NUMBER_MASKS[brand];
+      }
+
+      return DEFAULT_CARD_NUMBER_MASK;
+    }, []);
+
+    return (
+      <EvervaultInput<CardFormValues>
+        placeholder="1234 1234 1234 1234"
+        {...props}
+        ref={ref}
+        name="number"
+        mask={mask}
+        inputMode="numeric"
+        autoComplete="cc-number"
+        keyboardType="number-pad"
+      />
+    );
+  }
+);

package/src/Card/Root.test.tsx

@@ -0,0 +1,341 @@
+import { PropsWithChildren } from "react";
+import { EvervaultProvider } from "../EvervaultProvider";
+import {
+  act,
+  fireEvent,
+  render,
+  userEvent,
+  waitFor,
+} from "@testing-library/react-native";
+import { Card } from "./Root";
+import { ErrorBoundary } from "../utils";
+import { CardHolder } from "./Holder";
+import { CardNumber } from "./Number";
+import { CardExpiry } from "./Expiry";
+import { CardCvc } from "./Cvc";
+import { encryptedValue } from "../__mocks__/NativeEvervault";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("fails if not wrapped in an EvervaultProvider", () => {
+  const onError = vi.fn();
+  render(
+    <ErrorBoundary onError={onError}>
+      <Card />
+    </ErrorBoundary>
+  );
+
+  expect(onError).toHaveBeenCalledWith(
+    new Error("`useEvervault` must be used within an `EvervaultProvider`.")
+  );
+});
+
+it("calls onChange when mounted", async () => {
+  const onChange = vi.fn();
+  render(<Card onChange={onChange} />, { wrapper });
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenCalledWith({
+      card: {
+        name: null,
+        brand: null,
+        localBrands: [],
+        number: null,
+        lastFour: null,
+        bin: null,
+        expiry: null,
+        cvc: null,
+      },
+      isValid: true,
+      isComplete: true,
+      errors: {},
+    });
+  });
+});
+
+it("renders card components", async () => {
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card onChange={onChange}>
+      <CardHolder testID="holder" />
+    </Card>,
+    { wrapper }
+  );
+
+  const holder = getByTestId("holder");
+  expect(holder).toBeOnTheScreen();
+  expect(holder).toHaveProp("placeholder", "Johnny Appleseed");
+
+  const user = userEvent.setup();
+  await user.type(holder, "John Doe");
+  expect(holder).toHaveProp("value", "John Doe");
+
+  expect(onChange).toHaveBeenLastCalledWith({
+    card: {
+      name: "John Doe",
+      brand: null,
+      localBrands: [],
+      number: null,
+      lastFour: null,
+      bin: null,
+      expiry: null,
+      cvc: null,
+    },
+    isValid: true,
+    isComplete: true,
+    errors: {},
+  });
+});
+
+it("calls onChange when the user types", async () => {
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card onChange={onChange}>
+      <CardHolder testID="holder" />
+      <CardNumber testID="number" />
+      <CardExpiry testID="expiry" />
+      <CardCvc testID="cvc" />
+    </Card>,
+    { wrapper }
+  );
+
+  const holder = getByTestId("holder");
+  const number = getByTestId("number");
+  const expiry = getByTestId("expiry");
+  const cvc = getByTestId("cvc");
+
+  const user = userEvent.setup();
+  await user.type(holder, "John Doe");
+  await user.type(number, "4242 4242 4242 4242");
+  await user.type(expiry, "12 / 34");
+  await user.type(cvc, "123");
+
+  expect(onChange).toHaveBeenLastCalledWith({
+    card: {
+      name: "John Doe",
+      brand: "visa",
+      localBrands: [],
+      number: encryptedValue,
+      lastFour: "4242",
+      bin: "42424242",
+      expiry: {
+        month: "12",
+        year: "34",
+      },
+      cvc: encryptedValue,
+    },
+    isValid: true,
+    isComplete: true,
+    errors: {},
+  });
+});
+
+it("resets all fields when reset is called", async () => {
+  const ref = { current: null as any };
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card ref={ref} onChange={onChange}>
+      <CardHolder testID="holder" />
+    </Card>,
+    { wrapper }
+  );
+
+  const holder = getByTestId("holder");
+  const user = userEvent.setup();
+
+  await user.type(holder, "John Doe");
+  expect(holder).toHaveProp("value", "John Doe");
+  expect(onChange).toHaveBeenLastCalledWith({
+    card: {
+      name: "John Doe",
+      brand: null,
+      localBrands: [],
+      number: null,
+      lastFour: null,
+      bin: null,
+      expiry: null,
+      cvc: null,
+    },
+    isValid: true,
+    isComplete: true,
+    errors: {},
+  });
+
+  await act(() => ref.current?.reset());
+
+  expect(holder).toHaveProp("value", "");
+  expect(onChange).toHaveBeenCalledWith({
+    card: {
+      name: null,
+      brand: null,
+      localBrands: [],
+      number: null,
+      lastFour: null,
+      bin: null,
+      expiry: null,
+      cvc: null,
+    },
+    isValid: false,
+    isComplete: false,
+    errors: {},
+  });
+});
+
+it("adds Required error when input is blurred without a value", async () => {
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card onChange={onChange}>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "");
+  fireEvent(number, "blur");
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenLastCalledWith({
+      card: {
+        name: null,
+        brand: null,
+        localBrands: [],
+        number: null,
+        lastFour: null,
+        bin: null,
+        expiry: null,
+        cvc: null,
+      },
+      isValid: false,
+      isComplete: false,
+      errors: {
+        number: "Required",
+      },
+    });
+  });
+});
+
+it("adds Invalid error when input is blurred with an invalid value", async () => {
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card onChange={onChange}>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "4242");
+  fireEvent(number, "blur");
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenLastCalledWith({
+      card: {
+        name: null,
+        brand: "visa",
+        localBrands: [],
+        number: null,
+        lastFour: null,
+        bin: null,
+        expiry: null,
+        cvc: null,
+      },
+      isValid: false,
+      isComplete: false,
+      errors: {
+        number: "Invalid card number",
+      },
+    });
+  });
+});
+
+it("adds 'Brand not accepted' error when brand is not accepted", async () => {
+  const onChange = vi.fn();
+  const { getByTestId } = render(
+    <Card onChange={onChange} acceptedBrands={["american-express"]}>
+      <CardNumber testID="number" />
+    </Card>,
+    { wrapper }
+  );
+
+  const number = getByTestId("number");
+
+  const user = userEvent.setup();
+  await user.type(number, "4242");
+  fireEvent(number, "blur");
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenLastCalledWith({
+      card: {
+        name: null,
+        brand: "visa",
+        localBrands: [],
+        number: null,
+        lastFour: null,
+        bin: null,
+        expiry: null,
+        cvc: null,
+      },
+      isValid: false,
+      isComplete: false,
+      errors: {
+        number: "Invalid card number",
+      },
+    });
+  });
+
+  await user.type(number, "4242 4242 4242");
+  fireEvent(number, "blur");
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenLastCalledWith({
+      card: {
+        name: null,
+        brand: "visa",
+        localBrands: [],
+        number: expect.any(String),
+        lastFour: "4242",
+        bin: "42424242",
+        expiry: null,
+        cvc: null,
+      },
+      isValid: false,
+      isComplete: true,
+      errors: {
+        number: "Brand not accepted",
+      },
+    });
+  });
+
+  await user.clear(number);
+  await user.type(number, "3782 822463 10005");
+  fireEvent(number, "blur");
+
+  await waitFor(() => {
+    expect(onChange).toHaveBeenLastCalledWith({
+      card: {
+        name: null,
+        brand: "american-express",
+        localBrands: [],
+        number: expect.any(String),
+        lastFour: "0005",
+        bin: "378282",
+        expiry: null,
+        cvc: null,
+      },
+      isValid: true,
+      isComplete: true,
+      errors: {},
+    });
+  });
+});