@evervault/react-native 2.0.0

package/src/Card/Root.test.tsx

@@ -0,0 +1,260 @@
+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",
+      },
+    });
+  });
+});

package/src/Card/Root.tsx

@@ -0,0 +1,118 @@
+import {
+  forwardRef,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} 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";
+
+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;
+
+  /**
+   * 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,
+    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,
+  });
+
+  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 () => {
+        const payload = await formatPayload(values, {
+          encrypt: evervault.encrypt,
+          form: methods,
+        });
+        if (signal.aborted) return;
+        onChange?.(payload);
+      });
+    }
+
+    handleChange(methods.getValues());
+    const subscription = methods.watch(handleChange);
+    return () => subscription.unsubscribe();
+  }, [evervault.encrypt, onChange]);
+
+  useImperativeHandle(
+    ref,
+    useCallback(
+      () => ({
+        reset() {
+          methods.reset();
+        },
+      }),
+      []
+    )
+  );
+
+  return <FormProvider {...methods}>{children}</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,51 @@
+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",
+        }),
+
+      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",
+        }),
+    })
+    .superRefine((value, ctx) => {
+      const validation = validateNumber(value.number);
+      if (!validation.isValid) return;
+
+      const isAccepted = isAcceptedBrand(acceptedBrands, validation);
+      if (!isAccepted) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Brand not accepted",
+          path: ["number"],
+        });
+      }
+    });
+}
+
+export type CardFormValues = z.infer<ReturnType<typeof getCardFormSchema>>;

package/src/Card/types.ts

@@ -0,0 +1,50 @@
+export const CARD_BRAND_NAMES = [
+  "american-express",
+  "visa",
+  "mastercard",
+  "discover",
+  "jcb",
+  "diners-club",
+  "unionpay",
+  "maestro",
+  "mir",
+  "elo",
+  "hipercard",
+  "hiper",
+  "szep",
+  "uatp",
+] as const;
+
+export type CardBrandName = (typeof CARD_BRAND_NAMES)[number];
+
+export interface CardConfig {
+  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;
+  };
+}