@evervault/react-native 2.1.0 → 2.2.1

package/build/index.esm.js

@@ -7105,6 +7105,8 @@ function areValuesComplete(values) {
 function isAcceptedBrand(acceptedBrands, cardNumberValidationResult) {
     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);
@@ -7123,15 +7125,15 @@ function formatExpiry(expiry) {
 }
 
 function getCardFormSchema(acceptedBrands) {
-    return z
-        .object({
+    return z.object({
         name: z.string().min(1, "Missing name"),
         number: z
             .string()
             .min(1, "Required")
             .refine((value) => f(value).isValid, {
             message: "Invalid card number",
-        }),
+        })
+            .refine((value) => isAcceptedBrand(acceptedBrands, f(value)), { message: "Brand not accepted" }),
         expiry: z
             .string()
             .min(1, "Required")
@@ -7144,19 +7146,6 @@ function getCardFormSchema(acceptedBrands) {
             .refine((value) => C(value).isValid, {
             message: "Invalid CVC",
         }),
-    })
-        .superRefine((value, ctx) => {
-        const validation = f(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"],
-            });
-        }
     });
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@evervault/react-native",
   "description": "Evervault SDK for React Native",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "source": "./src/index.ts",
   "main": "./build/index.cjs.js",
   "module": "./build/index.esm.js",

package/src/Card/Root.test.tsx

@@ -258,3 +258,84 @@ it("adds Invalid error when input is blurred with an invalid value", async () =>
     });
   });
 });
+
+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: {},
+    });
+  });
+});

package/src/Card/schema.ts

@@ -8,44 +8,34 @@ import { CardBrandName } from "./types";
 import { isAcceptedBrand } from "./utils";
 
 export function getCardFormSchema(acceptedBrands: CardBrandName[]) {
-  return z
-    .object({
-      name: z.string().min(1, "Missing name"),
+  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",
-        }),
+    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",
-        }),
+    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"],
-        });
-      }
-    });
+    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

@@ -18,6 +18,12 @@ export const CARD_BRAND_NAMES = [
 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[];
 }
 

package/src/Card/utils.ts

@@ -101,6 +101,8 @@ export function isAcceptedBrand(
   cardNumberValidationResult: CardNumberValidationResult
 ): boolean {
   if (!acceptedBrands?.length) return true;
+
+  if (!cardNumberValidationResult.isValid) return false;
   const { brand, localBrands } = cardNumberValidationResult;
 
   const acceptedBrandsSet = new Set(acceptedBrands);