@evervault/react-native 2.6.0 → 2.6.2

package/src/Card/Root.tsx

@@ -0,0 +1,150 @@
+import {
+  forwardRef,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { CardBrandName, CardConfig, CardPayload } from "./types";
+import { DeepPartial, FormProvider, useForm } from "react-hook-form";
+import { CardFormValues, getCardFormSchema } from "./schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEvervault } from "../useEvervault";
+import { formatPayload } from "./utils";
+import { EvervaultInputContext, EvervaultInputContextValue } from "../Input";
+import { EvervaultContextValue } from "../context";
+
+const DEFAULT_ACCEPTED_BRANDS: CardBrandName[] = [];
+
+export interface CardProps extends PropsWithChildren, CardConfig {
+  /**
+   * The default values to use for the form.
+   */
+  defaultValues?: {
+    name?: string;
+    number?: string;
+    expiry?: string;
+    cvc?: string;
+  };
+
+  /**
+   * Triggered whenever the component's state is updated.
+   */
+  onChange?(payload: CardPayload): void;
+
+  /**
+   * Triggered when a native error occurs.
+   */
+  onError?(error: Error): void;
+
+  /**
+   * The validation mode to use for the form.
+   *
+   * - `onChange`: Validate the form when the user changes a field.
+   * - `onBlur`: Validate the form when the user leaves a field.
+   * - `onTouched`: Validate the form when the user touches a field.
+   * - `all`: Validate the form when the user changes or leaves a field.
+   *
+   * @default "all"
+   */
+  validationMode?: "onChange" | "onBlur" | "onTouched" | "all";
+}
+
+export interface Card {
+  /**
+   * Resets the form to its default values and state.
+   */
+  reset(): void;
+}
+
+export const Card = forwardRef<Card, CardProps>(function Card(
+  {
+    children,
+    defaultValues,
+    onChange,
+    onError,
+    acceptedBrands = DEFAULT_ACCEPTED_BRANDS,
+    validationMode = "all",
+  },
+  ref
+) {
+  const evervault = useEvervault();
+
+  const resolver = useMemo(() => {
+    const schema = getCardFormSchema(acceptedBrands);
+    return zodResolver(schema);
+  }, [acceptedBrands]);
+
+  const methods = useForm<CardFormValues>({
+    defaultValues,
+    resolver,
+    mode: validationMode,
+    shouldUseNativeValidation: false,
+  });
+
+  const inputContext = useMemo<EvervaultInputContextValue>(
+    () => ({
+      validationMode,
+    }),
+    [validationMode]
+  );
+
+  // Use refs to prevent closures from being captured
+  const onChangeRef = useRef<typeof onChange>(onChange);
+  onChangeRef.current = onChange;
+  const onErrorRef = useRef<typeof onError>(onError);
+  onErrorRef.current = onError;
+
+  useEffect(() => {
+    if (!onChange) return;
+
+    let abortController: AbortController | undefined;
+    function handleChange(values: DeepPartial<CardFormValues>) {
+      if (abortController) {
+        abortController.abort();
+      }
+
+      abortController = new AbortController();
+      const signal = abortController.signal;
+
+      requestAnimationFrame(async () => {
+        try {
+          const payload = await formatPayload(values, {
+            encrypt: evervault.encrypt,
+            form: methods,
+          });
+          if (signal.aborted) return;
+          onChangeRef.current?.(payload);
+        } catch (error) {
+          onErrorRef.current?.(error as Error);
+        }
+      });
+    }
+
+    handleChange(methods.getValues());
+    const subscription = methods.watch(handleChange);
+    return () => subscription.unsubscribe();
+  }, [evervault.encrypt]);
+
+  useImperativeHandle(
+    ref,
+    useCallback(
+      () => ({
+        reset() {
+          methods.reset();
+        },
+      }),
+      []
+    )
+  );
+
+  return (
+    <FormProvider {...methods}>
+      <EvervaultInputContext.Provider value={inputContext}>
+        {children}
+      </EvervaultInputContext.Provider>
+    </FormProvider>
+  );
+});

package/src/Card/index.ts

@@ -0,0 +1,28 @@
+import { Card as CardRoot, type Card as CardRef } from "./Root";
+import { CardHolder } from "./Holder";
+import { CardExpiry } from "./Expiry";
+import { CardCvc } from "./Cvc";
+import { CardNumber } from "./Number";
+
+export type { CardProps } from "./Root";
+export type Card = CardRef;
+export const Card = Object.assign(CardRoot, {
+  Holder: CardHolder,
+  Expiry: CardExpiry,
+  Cvc: CardCvc,
+  Number: CardNumber,
+});
+
+export type { CardHolderProps } from "./Holder";
+export { CardHolder };
+
+export type { CardExpiryProps } from "./Expiry";
+export { CardExpiry };
+
+export type { CardCvcProps } from "./Cvc";
+export { CardCvc };
+
+export type { CardNumberProps } from "./Number";
+export { CardNumber };
+
+export type { CardPayload, CardBrandName } from "./types";

package/src/Card/schema.ts

@@ -0,0 +1,41 @@
+import { z } from "zod";
+import {
+  validateNumber,
+  validateCVC,
+  validateExpiry,
+} from "@evervault/card-validator";
+import { CardBrandName } from "./types";
+import { isAcceptedBrand } from "./utils";
+
+export function getCardFormSchema(acceptedBrands: CardBrandName[]) {
+  return z.object({
+    name: z.string().min(1, "Missing name"),
+
+    number: z
+      .string()
+      .min(1, "Required")
+      .refine((value) => validateNumber(value).isValid, {
+        message: "Invalid card number",
+      })
+      .refine(
+        (value) => isAcceptedBrand(acceptedBrands, validateNumber(value)),
+        { message: "Brand not accepted" }
+      ),
+
+    expiry: z
+      .string()
+      .min(1, "Required")
+      .refine((value) => validateExpiry(value).isValid, {
+        message: "Invalid expiry",
+      }),
+
+    cvc: z
+      .string()
+      .min(1, "Required")
+      .refine((value) => validateCVC(value).isValid, {
+        message: "Invalid CVC",
+      }),
+  });
+}
+
+export type CardFormValues = z.infer<ReturnType<typeof getCardFormSchema>>;

package/src/Card/types.ts

@@ -0,0 +1,57 @@
+export const CARD_BRAND_NAMES = [
+  "american-express",
+  "visa",
+  "mastercard",
+  "discover",
+  "jcb",
+  "diners-club",
+  "unionpay",
+  "maestro",
+  "mir",
+  "elo",
+  "hipercard",
+  "hiper",
+  "szep",
+  "uatp",
+  "rupay",
+] as const;
+
+export type CardBrandName = (typeof CARD_BRAND_NAMES)[number];
+
+export interface CardConfig {
+  /**
+   * The brands that are accepted by the card form.
+   * Pass an empty array to accept all brands.
+   *
+   * @default []
+   */
+  acceptedBrands?: CardBrandName[];
+}
+
+export type CardField = "name" | "number" | "expiry" | "cvc";
+
+export interface CardExpiry {
+  month: string;
+  year: string;
+}
+
+export interface CardPayload {
+  card: {
+    name: string | null;
+    brand: CardBrandName | null;
+    localBrands: CardBrandName[];
+    number: string | null;
+    lastFour: string | null;
+    bin: string | null;
+    expiry: CardExpiry | null;
+    cvc: string | null;
+  };
+  isValid: boolean;
+  isComplete: boolean;
+  errors: {
+    name?: string;
+    number?: string;
+    expiry?: string;
+    cvc?: string;
+  };
+}

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,129 @@
+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;
+
+  if (!cardNumberValidationResult.isValid) return false;
+  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));
+});