@evervault/evervault-react-native 1.0.1 → 1.2.0

package/src/components/3DS/types.ts

@@ -0,0 +1,46 @@
+
+export interface ThreeDSecureCallbacks {
+  onError: (error: Error) => void;
+  onFailure: (error: Error) => void;
+  onSuccess: () => void;
+}
+
+export interface ThreeDSecureInitialState {
+  session: ThreeDSecureSession | null;
+  isVisible: boolean;
+}
+
+export interface ThreeDSecureProviderProps {
+  children: React.ReactNode;
+  state: ThreeDSecureState;
+}
+
+export interface ThreeDSecureSession {
+  cancel: () => Promise<void>;
+  get: () => Promise<ThreeDSecureSessionResponse>;
+  sessionId: string;
+}
+
+export interface ThreeDSecureSessionResponse {
+  nextAction: {
+    creq?: string;
+    type: string;
+    url?: string;
+  };
+  status: SessionStatus;
+}
+
+export interface ThreeDSecureSessionsParams {
+  appId: string;
+  callbacks: ThreeDSecureCallbacks;
+  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>;
+  sessionId: string;
+  setIsVisible: (show: boolean) => void;
+}
+
+export interface ThreeDSecureState extends ThreeDSecureInitialState {
+  cancel: () => Promise<void>;
+  start: (sessionId: string, callbacks: ThreeDSecureCallbacks) => void;
+}
+
+type SessionStatus = "action-required" | "failure" | "success";

package/src/components/3DS/useThreeDSecure.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useRef } from "react";
+import { useEvervault } from "../EvervaultProvider";
+import { startSession, threeDSecureSession } from "./threeDSSession";
+import {
+  ThreeDSecureCallbacks,
+  ThreeDSecureSession,
+  ThreeDSecureState
+} from "./types";
+
+export const useThreeDSecure = (): ThreeDSecureState => {
+  const { appUuid } = useEvervault();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [session, setSession] = useState<ThreeDSecureSession | null>(null)  
+  const [isVisible, setIsVisible] = useState(false); 
+
+  if (!appUuid) {
+    throw new Error(
+      "useThreeDSecure must be used within an Evervault Provider"
+    );
+  }
+
+  const start = (sessionId: string, callbacks: ThreeDSecureCallbacks) => {
+    const session = threeDSecureSession({
+      sessionId,
+      appId: appUuid,
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    setSession(session);
+
+    startSession(session, callbacks, intervalRef, setIsVisible);
+  };
+
+  const cancel = async () => {
+    if (session) {
+      await session.cancel();
+    } else {
+      console.warn("No 3DS session to cancel");
+    }
+  };
+
+  return {
+    start,
+    cancel,
+    session,
+    isVisible: isVisible,
+  };
+};

package/src/components/Card/Card.tsx

@@ -2,24 +2,24 @@ import {
   validateNumber,
   validateCVC,
   validateExpiry,
-} from '@evervault/card-validator';
-import * as React from 'react';
-import { ReactNode, useEffect, useState } from 'react';
-import { useForm } from '../useForm';
-import { changePayload, isAcceptedBrand, isComplete } from './utilities';
-import type { CardForm, CardConfig, CardField, CardPayload } from './types';
-import { CardNumber } from './CardNumber';
-import { CardContext } from './context';
-import { encrypt } from '../../sdk';
-import { CardCVC } from './CardCVC';
-import { CardHolder } from './CardHolder';
-import { CardExpiry } from './CardExpiry';
-import { StyleProp, TextInputProps, TextStyle, View } from 'react-native';
+} from "@evervault/card-validator";
+import * as React from "react";
+import { ReactNode, useState } from "react";
+import { useForm } from "../useForm";
+import { changePayload, isAcceptedBrand, isComplete } from "./utilities";
+import type { CardForm, CardConfig, CardField, CardPayload } from "./types";
+import { CardNumber } from "./CardNumber";
+import { CardContext } from "./context";
+import { encrypt } from "../../sdk";
+import { CardCVC } from "./CardCVC";
+import { CardHolder } from "./CardHolder";
+import { CardExpiry } from "./CardExpiry";
+import { StyleProp, TextInputProps, TextStyle, View } from "react-native";
 
 export interface BaseProps
   extends Omit<
     TextInputProps,
-    'onChange' | 'onChangeText' | 'inputMode' | 'autoComplete' | 'value'
+    "onChange" | "onChangeText" | "inputMode" | "autoComplete" | "value"
   > {}
 
 export interface CardProps {
@@ -37,56 +37,56 @@ function Card({ initialValue, config, children, onChange, style }: CardProps) {
 
   const form = useForm<CardForm>({
     initialValues: initialValue ?? {
-      cvc: '',
-      expiry: '',
-      number: '',
-      name: '',
+      cvc: "",
+      expiry: "",
+      number: "",
+      name: "",
     },
     validate: {
       name: (values) => {
-        if (!registeredFields.has('name')) {
+        if (!registeredFields.has("name")) {
           return undefined;
         }
 
         if (values.name.length === 0) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;
       },
       number: (values) => {
-        if (!registeredFields.has('number')) {
+        if (!registeredFields.has("number")) {
           return undefined;
         }
         const cardValidation = validateNumber(values.number);
         if (!cardValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         if (!isAcceptedBrand(config?.acceptedBrands, cardValidation)) {
-          return 'unsupportedBrand';
+          return "unsupportedBrand";
         }
 
         return undefined;
       },
       expiry: (values) => {
-        if (!registeredFields.has('expiry')) {
+        if (!registeredFields.has("expiry")) {
           return undefined;
         }
         const expiryValidation = validateExpiry(values.expiry);
         if (!expiryValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;
       },
       cvc: (values) => {
-        if (!registeredFields.has('cvc')) {
+        if (!registeredFields.has("cvc")) {
           return undefined;
         }
         const cvcValidation = validateCVC(values.cvc, values.number);
         if (!cvcValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;

package/src/components/Card/CardCVC.tsx

@@ -1,9 +1,9 @@
-import { validateNumber } from '@evervault/card-validator';
-import * as React from 'react';
-import { useEffect, useMemo } from 'react';
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { validateNumber } from "@evervault/card-validator";
+import * as React from "react";
+import { useEffect, useMemo } from "react";
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 export interface CVCProps extends BaseProps {}
 
@@ -11,21 +11,21 @@ export const CardCVC = (props: CVCProps) => {
   const context = useCardContext();
   const mask = useMemo(() => {
     if (!context.values.number) {
-      return '9999';
+      return "9999";
     }
     const type = validateNumber(context.values.number).brand;
-    if (type === 'american-express') {
-      return '9999';
+    if (type === "american-express") {
+      return "9999";
     }
-    return '999';
+    return "999";
   }, [context.values.number]);
 
-  const { onChange, onBlur } = context.register('cvc');
+  const { onChange, onBlur } = context.register("cvc");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('cvc'));
+    context.setRegisteredFields((prev) => new Set(prev).add("cvc"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'cvc'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "cvc"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/components/Card/CardExpiry.tsx

@@ -1,20 +1,20 @@
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { BaseProps } from './Card';
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import * as React from "react";
+import { useEffect } from "react";
+import { BaseProps } from "./Card";
 
 export interface CardExpiryProps extends BaseProps {}
 
 export function CardExpiry(props: CardExpiryProps) {
   const context = useCardContext();
 
-  const { onBlur, onChange } = context.register('expiry');
+  const { onBlur, onChange } = context.register("expiry");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('expiry'));
+    context.setRegisteredFields((prev) => new Set(prev).add("expiry"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'expiry'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "expiry"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -24,16 +24,16 @@ export function CardExpiry(props: CardExpiryProps) {
       type="datetime"
       value={context.values.expiry}
       // store the expiry as MMYY not MM / YY
-      onChangeText={(rawExpiry) => onChange(rawExpiry.replace(' / ', ''))}
+      onChangeText={(rawExpiry) => onChange(rawExpiry.replace(" / ", ""))}
       options={{
-        format: '99 / 99',
+        format: "99 / 99",
       }}
       id="expiry"
       onBlur={(e) => {
         onBlur(e);
         props.onBlur?.(e);
       }}
-      placeholder={props.placeholder ?? 'MM / YY'}
+      placeholder={props.placeholder ?? "MM / YY"}
       inputMode="numeric"
       autoComplete="cc-exp"
     />

package/src/components/Card/CardHolder.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
-import * as React from 'react';
-import { Platform, TextInput } from 'react-native';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { useEffect } from "react";
+import * as React from "react";
+import { Platform, TextInput } from "react-native";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 export interface CardHolderProps extends BaseProps {}
 
 export function CardHolder(props: CardHolderProps) {
   const context = useCardContext();
 
-  const { onBlur, onChange } = context.register('name');
+  const { onBlur, onChange } = context.register("name");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('name'));
+    context.setRegisteredFields((prev) => new Set(prev).add("name"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'name'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "name"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -28,8 +28,8 @@ export function CardHolder(props: CardHolderProps) {
         props.onBlur?.(e);
       }}
       autoComplete={Platform.select({
-        ios: 'cc-name',
-        android: 'name',
+        ios: "cc-name",
+        android: "name",
       })}
       onChangeText={(v) => onChange(v)}
     />

package/src/components/Card/CardNumber.tsx

@@ -1,9 +1,9 @@
-import { validateNumber } from '@evervault/card-validator';
-import * as React from 'react';
-import { useEffect, useMemo, useRef } from 'react';
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { validateNumber } from "@evervault/card-validator";
+import * as React from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 interface CardNumberProps extends BaseProps {}
 
@@ -17,9 +17,9 @@ export function CardNumber(props: CardNumberProps) {
     const { brand } = validateNumber(value);
 
     const masks = {
-      'default': '9999 9999 9999 9999',
-      'unionpay': '9999 9999 9999 9999 999',
-      'american-express': '9999 999999 99999',
+      default: "9999 9999 9999 9999",
+      unionpay: "9999 9999 9999 9999 999",
+      "american-express": "9999 999999 99999",
     } as Record<string, string>;
 
     if (brand && !!masks[brand]) {
@@ -28,13 +28,13 @@ export function CardNumber(props: CardNumberProps) {
     return [value, masks.default];
   }, [context.values.number]);
 
-  const { onBlur, onChange } = context.register('number');
+  const { onBlur, onChange } = context.register("number");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('number'));
+    context.setRegisteredFields((prev) => new Set(prev).add("number"));
 
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'number'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "number"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/components/Card/context.tsx

@@ -1,25 +1,25 @@
-import { UseFormReturn } from '../useForm';
-import { Dispatch, SetStateAction, createContext, useContext } from 'react';
-import { CardForm, CardField } from './types';
+import { UseFormReturn } from "../useForm";
+import { Dispatch, SetStateAction, createContext, useContext } from "react";
+import { CardForm, CardField } from "./types";
 
 type Context<T> = {
   values: CardForm;
-  register: UseFormReturn<T>['register'];
+  register: UseFormReturn<T>["register"];
   setRegisteredFields: Dispatch<SetStateAction<Set<CardField>>>;
 };
 
 export const removeFieldFromSet = (prev: Set<CardField>, field: CardField) => {
   const next = new Set(prev);
-  next.delete('name');
+  next.delete("name");
   return next;
 };
 
 export const CardContext = createContext<Context<CardForm>>({
   values: {
-    name: '',
-    number: '',
-    cvc: '',
-    expiry: '',
+    name: "",
+    number: "",
+    cvc: "",
+    expiry: "",
   },
   register: () => ({
     onChange: () => {},

package/src/components/Card/index.ts

@@ -1 +1 @@
-export { Card, type CardProps } from './Card';
+export { Card, type CardProps } from "./Card";

package/src/components/Card/types.ts

@@ -1,17 +1,18 @@
 export type CardBrandName =
-  | 'american-express'
-  | 'visa'
-  | 'mastercard'
-  | 'discover'
-  | 'jcb'
-  | 'diners-club'
-  | 'unionpay'
-  | 'maestro'
-  | 'mir'
-  | 'elo'
-  | 'hipercard'
-  | 'hiper'
-  | 'szep';
+  | "american-express"
+  | "visa"
+  | "mastercard"
+  | "discover"
+  | "jcb"
+  | "diners-club"
+  | "unionpay"
+  | "maestro"
+  | "mir"
+  | "elo"
+  | "hipercard"
+  | "hiper"
+  | "szep"
+  | "uatp";
 
 export interface CardConfig {
   acceptedBrands?: CardBrandName[];
@@ -24,7 +25,7 @@ export interface CardForm {
   expiry: string;
 }
 
-export type CardField = 'name' | 'number' | 'expiry' | 'cvc';
+export type CardField = "name" | "number" | "expiry" | "cvc";
 
 export interface CardExpiry {
   month: string | null;

package/src/components/Card/utilities.ts

@@ -3,9 +3,9 @@ import {
   validateExpiry,
   validateCVC,
   CardNumberValidationResult,
-} from '@evervault/card-validator';
-import type { CardForm, CardBrandName, CardField, CardPayload } from './types';
-import { UseFormReturn } from '../useForm';
+} from "@evervault/card-validator";
+import type { CardForm, CardBrandName, CardField, CardPayload } from "./types";
+import { UseFormReturn } from "../useForm";
 
 export async function changePayload(
   encrypt: (value: string) => Promise<string>,
@@ -14,7 +14,7 @@ export async function changePayload(
 ): Promise<CardPayload> {
   const { name, number: rawNumber, expiry, cvc } = form.values;
 
-  const number = rawNumber.replace(/\s/g, '');
+  const number = rawNumber.replace(/\s/g, "");
 
   const {
     brand,
@@ -41,21 +41,21 @@ export async function changePayload(
 }
 
 export function isComplete(form: UseFormReturn<CardForm>, fields: CardField[]) {
-  if (fields.includes('name')) {
+  if (fields.includes("name")) {
     if (form.values.name.length === 0) return false;
   }
 
-  if (fields.includes('number')) {
+  if (fields.includes("number")) {
     const cardValidation = validateNumber(form.values.number);
     if (!cardValidation.isValid) return false;
   }
 
-  if (fields.includes('expiry')) {
+  if (fields.includes("expiry")) {
     const expiryValidation = validateExpiry(form.values.expiry);
     if (!expiryValidation.isValid) return false;
   }
 
-  if (fields.includes('cvc')) {
+  if (fields.includes("cvc")) {
     const cvcValidation = validateCVC(form.values.cvc, form.values.number);
     if (!cvcValidation.isValid) return false;
   }

package/src/components/EvervaultProvider.tsx

@@ -0,0 +1,64 @@
+import { ReactNode, createContext, useContext, useEffect } from "react";
+import * as React from "react";
+import { EvervaultSdk } from "../native";
+
+export interface EvervaultContext {
+  teamUuid?: string;
+  appUuid?: string;
+}
+
+const Ctx = createContext<EvervaultContext>({
+  teamUuid: undefined,
+  appUuid: undefined,
+});
+
+// this isn't publicly exposed
+export const useEvervault = () => useContext(Ctx);
+
+interface EvervaultProps {
+  appId: string;
+  teamId: string;
+  children: ReactNode;
+}
+
+/**
+ * @example
+ * ```tsx
+ * function App() {
+ *  return (
+ *    <EvervaultProvider teamId="team_123" appId="app_123">
+ *      <Card onChange={(card) => console.log(card)}>
+ *        <Card.Number />
+ *      </Card>
+ *    </EvervaultProvider>
+ *  );
+ * }
+ * ```
+ */
+const EvervaultProvider = ({ teamId, appId, children }: EvervaultProps) => {
+  useEffect(() => {
+    async function initEvervault() {
+      try {
+        if (!teamId || !appId) {
+          return;
+        }
+
+        return EvervaultSdk.initialize(teamId, appId);
+      } catch (error) {
+        throw new Error(`Failed to initialize the Evervault SDK ${error}`);
+      }
+    }
+
+    if (teamId || appId) {
+      initEvervault();
+    }
+  }, [teamId, appId]);
+
+  return (
+    <Ctx.Provider value={{ teamUuid: teamId, appUuid: appId }}>
+      {children}
+    </Ctx.Provider>
+  );
+};
+
+export default EvervaultProvider;

package/src/index.tsx

@@ -1,5 +1,6 @@
-export { type CardProps, Card } from './components/Card';
-export { init, encrypt } from './sdk';
+export { type CardProps, Card } from "./components/Card";
+export { ThreeDSecure, useThreeDSecure } from "./components/3DS";
+export { init, encrypt } from "./sdk";
 export type {
   CardPayload,
   CardExpiry,
@@ -7,4 +8,5 @@ export type {
   CardConfig,
   CardForm,
   CardField,
-} from './components/Card/types';
+} from "./components/Card/types";
+export { default as EvervaultProvider } from "./components/EvervaultProvider";

package/src/native.ts

@@ -1,10 +1,10 @@
-import { NativeModules, Platform } from 'react-native';
+import { NativeModules, Platform } from "react-native";
 
 const LINKING_ERROR =
   `The package '@evervault/evervault-react-native' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
+  Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
+  "- You rebuilt the app after installing the package\n" +
+  "- You are not using Expo Go\n";
 
 export const EvervaultSdk = NativeModules.EvervaultSdk
   ? NativeModules.EvervaultSdk

package/src/sdk.ts

@@ -1,12 +1,19 @@
-import { Platform } from 'react-native';
-import { EvervaultSdk } from './native';
+import { Platform } from "react-native";
+import { EvervaultSdk } from "./native";
 
+/**
+ * @deprecated Deprecated since version 1.1.0. Use `EvervaultProvider` instead.
+ * @see `EvervaultProvider` instead
+ * ```tsx
+ * import { EvervaultProvider } from "@evervault/evervault-react-native";
+ * ```
+ */
 export async function init(teamUuid: string, appUuid: string): Promise<void> {
-  if (!teamUuid.startsWith('team_')) {
+  if (!teamUuid?.startsWith("team_")) {
     throw new Error("Invalid Evervault Team UUID");
   }
 
-  if (!appUuid.startsWith('app_')) {
+  if (!appUuid?.startsWith("app_")) {
     throw new Error("Invalid Evervault App UUID");
   }
 
@@ -14,7 +21,7 @@ export async function init(teamUuid: string, appUuid: string): Promise<void> {
 }
 
 export async function encrypt(data: any): Promise<string> {
-  if (Platform.OS === 'android' && typeof data !== 'string') {
+  if (Platform.OS === "android" && typeof data !== "string") {
     throw new Error(`The Evervault SDK does not currently support encrypting non-string data on Android.
       If this is required for your use case, please get in touch with us at support@evervault.com. Please do not
       serialize other data types to strings and pass them to this method as this will result in the data