@evervault/react-native 2.0.0

package/src/Card/utils.test.ts

@@ -0,0 +1,271 @@
+import { encryptedValue } from "../__mocks__/NativeEvervault";
+import { EncryptFn } from "../context";
+import {
+  areValuesComplete,
+  formatExpiry,
+  formatPayload,
+  isAcceptedBrand,
+} from "./utils";
+
+describe("formatPayload", () => {
+  const setValue = vi.fn();
+
+  const encrypt = vi.fn<EncryptFn>(
+    () => Promise.resolve(encryptedValue) as any
+  );
+
+  it("should format the payload", async () => {
+    const result = await formatPayload(
+      {
+        name: "John Doe",
+        number: "4242424242424242",
+        expiry: "1234",
+        cvc: "123",
+      },
+      {
+        encrypt,
+        form: {
+          setValue,
+          formState: {
+            errors: {},
+          },
+        } as any,
+      }
+    );
+
+    expect(result).toEqual({
+      card: {
+        name: "John Doe",
+        brand: "visa",
+        localBrands: [],
+        bin: "42424242",
+        lastFour: "4242",
+        expiry: {
+          month: "12",
+          year: "34",
+        },
+        number: encryptedValue,
+        cvc: encryptedValue,
+      },
+      isComplete: true,
+      isValid: true,
+      errors: {},
+    });
+  });
+
+  it("should slice the CVC to 3 characters if brand isn't American Express", async () => {
+    await formatPayload(
+      {
+        name: "John Doe",
+        number: "4242424242424242",
+        expiry: "1234",
+        cvc: "1234",
+      },
+      {
+        encrypt,
+        form: {
+          setValue,
+          formState: {
+            errors: {},
+          },
+        } as any,
+      }
+    );
+
+    expect(setValue).toHaveBeenCalledWith("cvc", "123");
+  });
+
+  it("should return isValid=false if any errors are present", async () => {
+    const result = await formatPayload(
+      {
+        name: "",
+      },
+      {
+        encrypt,
+        form: {
+          setValue,
+          formState: {
+            errors: {
+              name: {
+                message: "Required",
+              },
+            },
+          },
+        } as any,
+      }
+    );
+
+    expect(result).toEqual({
+      card: {
+        name: "",
+        brand: null,
+        localBrands: [],
+        bin: null,
+        lastFour: null,
+        expiry: null,
+        number: null,
+        cvc: null,
+      },
+      isComplete: false,
+      isValid: false,
+      errors: {
+        name: "Required",
+      },
+    });
+  });
+
+  it("should ignore values if they are not provided", async () => {
+    const result = await formatPayload(
+      {
+        name: "John Doe",
+      },
+      {
+        encrypt,
+        form: {
+          setValue,
+          formState: {
+            errors: {},
+          },
+        } as any,
+      }
+    );
+
+    expect(result).toEqual({
+      card: {
+        name: "John Doe",
+        brand: null,
+        localBrands: [],
+        bin: null,
+        lastFour: null,
+        expiry: null,
+        number: null,
+        cvc: null,
+      },
+      isComplete: true,
+      isValid: true,
+      errors: {},
+    });
+  });
+});
+
+describe("areValuesComplete", () => {
+  it("should return true if all values are complete and valid", () => {
+    const result = areValuesComplete({
+      name: "John Doe",
+      number: "4242424242424242",
+      expiry: "1234",
+      cvc: "123",
+    });
+    expect(result).toBe(true);
+  });
+
+  it("should return true if all _provided_ values are complete", () => {
+    const result = areValuesComplete({
+      name: "John Doe",
+    });
+    expect(result).toBe(true);
+
+    const result2 = areValuesComplete({
+      number: "4242424242424242",
+      expiry: "1234",
+      cvc: "123",
+    });
+    expect(result2).toBe(true);
+  });
+
+  it("should return false if any value is missing", () => {
+    const result = areValuesComplete({
+      name: "John Doe",
+      number: "",
+      expiry: "",
+      cvc: "",
+    });
+    expect(result).toBe(false);
+  });
+
+  it("should return false if any value is invalid", () => {
+    const result = areValuesComplete({
+      number: "1234567890",
+    });
+    expect(result).toBe(false);
+
+    const result2 = areValuesComplete({
+      expiry: "123",
+    });
+    expect(result2).toBe(false);
+
+    const result3 = areValuesComplete({
+      cvc: "1",
+    });
+    expect(result3).toBe(false);
+  });
+});
+
+describe("isAcceptedBrand", () => {
+  it("should return true if no accepted brands are provided", () => {
+    const undef = isAcceptedBrand(undefined, {
+      brand: "visa",
+      bin: "123456",
+      lastFour: "1234",
+      localBrands: [],
+      isValid: true,
+    });
+    expect(undef).toBe(true);
+
+    const emptyArr = isAcceptedBrand([], {
+      brand: "visa",
+      bin: "123456",
+      lastFour: "1234",
+      localBrands: [],
+      isValid: true,
+    });
+    expect(emptyArr).toBe(true);
+  });
+
+  it("should return true if the brand is accepted", () => {
+    const result = isAcceptedBrand(["visa"], {
+      brand: "visa",
+      bin: "123456",
+      lastFour: "1234",
+      localBrands: [],
+      isValid: true,
+    });
+    expect(result).toBe(true);
+  });
+
+  it("should return true if the local brand is accepted", () => {
+    const result = isAcceptedBrand(["hiper"], {
+      brand: "visa",
+      bin: "123456",
+      lastFour: "1234",
+      localBrands: ["hiper"],
+      isValid: true,
+    });
+    expect(result).toBe(true);
+  });
+
+  it("should return false if the brand is not accepted", () => {
+    const result = isAcceptedBrand(["visa"], {
+      brand: "mastercard",
+      bin: "123456",
+      lastFour: "1234",
+      localBrands: [],
+      isValid: true,
+    });
+    expect(result).toBe(false);
+  });
+});
+
+describe("formatExpiry", () => {
+  it("should return null if the expiry date is invalid", () => {
+    const expiry = "123";
+    const formatted = formatExpiry(expiry);
+    expect(formatted).toBeNull();
+  });
+
+  it("should format the expiry date", () => {
+    const expiry = "1234";
+    const formatted = formatExpiry(expiry);
+    expect(formatted).toEqual({ month: "12", year: "34" });
+  });
+});

package/src/Card/utils.ts

@@ -0,0 +1,127 @@
+import {
+  validateNumber,
+  validateExpiry,
+  validateCVC,
+  CardNumberValidationResult,
+} from "@evervault/card-validator";
+import type { CardBrandName, CardPayload } from "./types";
+import { type CardFormValues } from "./schema";
+import { DeepPartial, UseFormReturn } from "react-hook-form";
+import { type Encrypted, sdk } from "../sdk";
+
+export interface FormatPayloadContext {
+  form: UseFormReturn<CardFormValues>;
+  encrypt<T>(data: T): Promise<Encrypted<T>>;
+}
+
+export async function formatPayload(
+  values: DeepPartial<CardFormValues>,
+  context: FormatPayloadContext
+): Promise<CardPayload> {
+  const number = values.number?.replace(/\s/g, "") || "";
+
+  const {
+    brand,
+    localBrands,
+    bin,
+    lastFour,
+    isValid: isNumberValid,
+  } = validateNumber(number);
+
+  if (
+    number.length > 0 &&
+    brand !== "american-express" &&
+    values.cvc?.length === 4
+  ) {
+    context.form.setValue("cvc", values.cvc?.slice(0, 3));
+  }
+
+  const { cvc, isValid: isCvcValid } = validateCVC(values.cvc ?? "", number);
+
+  const formErrors = context.form.formState.errors;
+  const isValid = !Object.keys(formErrors).length;
+  const isComplete = areValuesComplete(values);
+
+  const errors: Record<string, string> = {};
+  if (formErrors.name?.message) {
+    errors.name = formErrors.name.message;
+  }
+  if (formErrors.number?.message) {
+    errors.number = formErrors.number.message;
+  }
+  if (formErrors.expiry?.message) {
+    errors.expiry = formErrors.expiry.message;
+  }
+  if (formErrors.cvc?.message) {
+    errors.cvc = formErrors.cvc.message;
+  }
+
+  return {
+    card: {
+      name: values.name ?? null,
+      brand,
+      localBrands,
+      bin,
+      lastFour,
+      expiry: formatExpiry(values.expiry ?? ""),
+      number: isNumberValid ? await context.encrypt(number) : null,
+      cvc: isCvcValid ? await context.encrypt(cvc ?? "") : null,
+    },
+    isComplete,
+    isValid: isValid && isComplete,
+    errors,
+  };
+}
+
+export function areValuesComplete(values: DeepPartial<CardFormValues>) {
+  if ("name" in values && !values.name?.length) {
+    return false;
+  }
+
+  if ("number" in values && !validateNumber(values.number ?? "").isValid) {
+    return false;
+  }
+
+  if ("expiry" in values && !validateExpiry(values.expiry ?? "").isValid) {
+    return false;
+  }
+
+  if (
+    "cvc" in values &&
+    !validateCVC(values.cvc ?? "", values.number).isValid
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function isAcceptedBrand(
+  acceptedBrands: CardBrandName[] | undefined,
+  cardNumberValidationResult: CardNumberValidationResult
+): boolean {
+  if (!acceptedBrands?.length) return true;
+  const { brand, localBrands } = cardNumberValidationResult;
+
+  const acceptedBrandsSet = new Set(acceptedBrands);
+
+  const isBrandAccepted = brand !== null && acceptedBrandsSet.has(brand);
+  const isLocalBrandAccepted = localBrands.some((localBrand) =>
+    acceptedBrandsSet.has(localBrand)
+  );
+
+  return isBrandAccepted || isLocalBrandAccepted;
+}
+
+export function formatExpiry(expiry: string) {
+  const parsedExpiry = validateExpiry(expiry);
+
+  if (!parsedExpiry.isValid) {
+    return null;
+  }
+
+  return {
+    month: parsedExpiry.month!,
+    year: parsedExpiry.year!,
+  };
+}

package/src/EvervaultProvider.test.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren, useContext } from "react";
+import { EvervaultProvider } from "./EvervaultProvider";
+import { renderHook } from "@testing-library/react-native";
+import { EvervaultContext } from "./context";
+import { sdk } from "./sdk";
+
+it("renders context", () => {
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+
+  const initSpy = vi.spyOn(sdk, "initialize");
+  const { result } = renderHook(() => useContext(EvervaultContext), {
+    wrapper,
+  });
+
+  expect(initSpy).toHaveBeenCalledWith("team_123", "app_123");
+  expect(result.current).toBeDefined();
+  expect(result.current?.appId).toBe("app_123");
+  expect(result.current?.teamId).toBe("team_123");
+  expect(result.current?.encrypt).toStrictEqual(expect.any(Function));
+});

package/src/EvervaultProvider.tsx

@@ -0,0 +1,43 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { type EvervaultContextValue, EvervaultContext } from "./context";
+import { Encrypted, sdk } from "./sdk";
+
+export interface EvervaultProviderProps extends PropsWithChildren {
+  teamId: string;
+  appId: string;
+}
+
+export function EvervaultProvider({
+  teamId,
+  appId,
+  children,
+}: EvervaultProviderProps) {
+  const instanceId = useMemo(
+    () => sdk.initialize(teamId, appId),
+    [teamId, appId]
+  );
+
+  const encrypt = useCallback(
+    function <T>(data: T): Promise<Encrypted<T>> {
+      return sdk.encrypt(instanceId, data);
+    },
+    [instanceId]
+  );
+
+  const context = useMemo<EvervaultContextValue>(
+    () => ({ teamId, appId, encrypt }),
+    [teamId, appId, encrypt]
+  );
+
+  return (
+    <EvervaultContext.Provider value={context}>
+      {children}
+    </EvervaultContext.Provider>
+  );
+}

package/src/Input.test.tsx

@@ -0,0 +1,138 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  userEvent,
+} from "@testing-library/react-native";
+import { EvervaultInput, mask } from "./Input";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { PropsWithChildren } from "react";
+import { Text, View } from "react-native";
+
+describe("mask", () => {
+  it("should convert a mask to an array of regex", () => {
+    expect(mask("999-999-9999")).toEqual([
+      /\d/,
+      /\d/,
+      /\d/,
+      "-",
+      /\d/,
+      /\d/,
+      /\d/,
+      "-",
+      /\d/,
+      /\d/,
+      /\d/,
+      /\d/,
+    ]);
+  });
+});
+
+describe("EvervaultInput", () => {
+  const methodMocks = {
+    setValue: vi.fn(),
+  };
+
+  function Form({ children }: PropsWithChildren) {
+    const methods = useForm();
+    const setValue = (...args: Parameters<typeof methods.setValue>) => {
+      methodMocks.setValue(...args);
+      methods.setValue(...args);
+    };
+    return (
+      <FormProvider {...methods} setValue={setValue}>
+        {children}
+      </FormProvider>
+    );
+  }
+
+  it("should render", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+    expect(input).toBeOnTheScreen();
+    expect(input).toHaveProp("id", "phone");
+    expect(input).toHaveProp("value", "");
+    expect(input).toHaveProp("editable", true);
+  });
+
+  it("uses the mask if provided", async () => {
+    render(
+      <EvervaultInput
+        testID="phone"
+        name="phone"
+        mask={mask("999-999-9999")}
+      />,
+      {
+        wrapper: Form,
+      }
+    );
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    expect(input).toHaveProp("value", "");
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "123-456-7890");
+
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+  });
+
+  it("dirties the field when the user types", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+    const user = userEvent.setup();
+
+    await user.type(input, "1234567890");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: false,
+    });
+  });
+
+  it("dirties and validates the field when the user types if touched", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+
+    // Blur the input to trigger touch
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+
+    const user = userEvent.setup();
+    await user.type(input, "1234567890");
+    expect(input).toHaveProp("value", "1234567890");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", "1234567890", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  });
+
+  it("dirties, touches, and validates the field when blurred", async () => {
+    render(<EvervaultInput testID="phone" name="phone" />, {
+      wrapper: Form,
+    });
+
+    const input = screen.getByTestId("phone");
+
+    fireEvent(input, "blur");
+    expect(methodMocks.setValue).toHaveBeenCalledWith("phone", undefined, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+  });
+});