@evervault/react-native 2.0.0

package/src/Input.tsx

@@ -0,0 +1,136 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  Ref,
+  RefObject,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { TextInput, TextInputProps } from "react-native";
+import { mergeRefs } from "./utils";
+import { Controller, useFormContext } from "react-hook-form";
+import MaskInput, { Mask, MaskArray } from "react-native-mask-input";
+
+export type EvervaultInput = Pick<
+  TextInput,
+  | "isFocused"
+  | "focus"
+  | "blur"
+  | "clear"
+  | "measure"
+  | "measureInWindow"
+  | "measureLayout"
+>;
+
+function useForwardedInputRef(
+  ref: ForwardedRef<EvervaultInput>
+): RefObject<TextInput> {
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle<EvervaultInput, EvervaultInput>(
+    ref,
+    useCallback(
+      () => ({
+        isFocused() {
+          return inputRef.current?.isFocused() ?? false;
+        },
+        focus() {
+          inputRef.current?.focus();
+        },
+        blur() {
+          inputRef.current?.blur();
+        },
+        clear() {
+          inputRef.current?.clear();
+        },
+        measure(callback) {
+          inputRef.current?.measure(callback);
+        },
+        measureInWindow(callback) {
+          inputRef.current?.measureInWindow(callback);
+        },
+        measureLayout(relativeToNativeComponentRef, onSuccess, onFail) {
+          inputRef.current?.measureLayout(
+            relativeToNativeComponentRef,
+            onSuccess,
+            onFail
+          );
+        },
+      }),
+      [inputRef]
+    )
+  );
+
+  return inputRef;
+}
+
+export type BaseEvervaultInputProps = Omit<
+  TextInputProps,
+  "onChange" | "onChangeText" | "value" | "defaultValue"
+>;
+
+export function mask(format: string): MaskArray {
+  return format.split("").map((char) => {
+    if (char === "9") {
+      return /\d/;
+    }
+    return char;
+  });
+}
+
+export interface EvervaultInputProps<Values extends Record<string, unknown>>
+  extends BaseEvervaultInputProps {
+  name: keyof Values;
+  mask?: Mask;
+}
+
+export const EvervaultInput = forwardRef<
+  EvervaultInput,
+  EvervaultInputProps<Record<string, unknown>>
+>(function EvervaultInput({ name, mask, ...props }, ref) {
+  const inputRef = useForwardedInputRef(ref);
+
+  const methods = useFormContext();
+
+  return (
+    <Controller
+      control={methods.control}
+      name={name}
+      shouldUnregister
+      render={({ field, fieldState }) => (
+        <MaskInput
+          // Overridable props
+          id={field.name}
+          {...props}
+          // Strict props
+          ref={mergeRefs(inputRef, field.ref)}
+          editable={!field.disabled && (props.editable ?? true)}
+          onBlur={(evt) => {
+            methods.setValue(field.name, field.value, {
+              shouldDirty: true,
+              shouldTouch: true,
+              shouldValidate: true,
+            });
+            props.onBlur?.(evt);
+          }}
+          mask={mask}
+          maskAutoComplete={!!mask}
+          value={field.value}
+          onChangeText={(masked, unmasked) => {
+            methods.setValue(field.name, unmasked, {
+              shouldDirty: true,
+              shouldValidate: !!fieldState.error || fieldState.isTouched,
+            });
+          }}
+          // Remove unwanted props
+          defaultValue={undefined}
+          onChange={undefined}
+        />
+      )}
+    />
+  );
+}) as <Values extends Record<string, unknown>>(
+  props: EvervaultInputProps<Values> & { ref?: Ref<EvervaultInput> }
+) => ReactNode;

package/src/ThreeDSecure/Frame.test.tsx

@@ -0,0 +1,87 @@
+import { render } from "@testing-library/react-native";
+import { WebView } from "../__mocks__/react-native-webview";
+import { ThreeDSecureFrame } from "./Frame";
+import { ErrorBoundary } from "../utils";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { ThreeDSecure } from "./Root";
+import { CHALLENGE_DOMAIN_3DS } from "./config";
+
+vi.mock("react-native-webview", () => ({ WebView }));
+
+it("throws an error if used outside of an EvervaultProvider", () => {
+  const onError = vi.fn();
+  render(
+    <ErrorBoundary onError={onError}>
+      <ThreeDSecureFrame />
+    </ErrorBoundary>
+  );
+
+  expect(onError).toHaveBeenCalledWith(
+    new Error("`useEvervault` must be used within an `EvervaultProvider`.")
+  );
+});
+
+it("throws an error if used outside of a ThreeDSecure component", () => {
+  const onError = vi.fn();
+  render(
+    <ErrorBoundary onError={onError}>
+      <EvervaultProvider teamId="team_123" appId="app_123">
+        <ThreeDSecureFrame />
+      </EvervaultProvider>
+    </ErrorBoundary>
+  );
+
+  expect(onError).toHaveBeenCalledWith(
+    new Error(
+      "`ThreeDSecure.Frame` must be used within a `ThreeDSecure` component."
+    )
+  );
+});
+
+it("renders null if there is no session", () => {
+  const { queryByTestId } = render(
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      <ThreeDSecure
+        state={{
+          session: null,
+          isVisible: false,
+          cancel: vi.fn(),
+          start: vi.fn(),
+        }}
+      >
+        <ThreeDSecureFrame />
+      </ThreeDSecure>
+    </EvervaultProvider>
+  );
+
+  expect(queryByTestId("webview")).toBeNull();
+});
+
+it("renders a webview with the correct url", () => {
+  const { getByTestId } = render(
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      <ThreeDSecure
+        state={{
+          session: {
+            sessionId: "session_123",
+            cancel: vi.fn(),
+            get: vi.fn(),
+          },
+          isVisible: true,
+          cancel: vi.fn(),
+          start: vi.fn(),
+        }}
+      >
+        <ThreeDSecureFrame />
+      </ThreeDSecure>
+    </EvervaultProvider>
+  );
+
+  const webview = getByTestId("webview");
+  expect(webview).toBeOnTheScreen();
+  expect(webview).toHaveProp("source", {
+    uri: `https://${CHALLENGE_DOMAIN_3DS}/?session=session_123&app=app_123&team=team_123`,
+  });
+  expect(webview).toHaveProp("hideKeyboardAccessoryView", true);
+  expect(webview).toHaveProp("overScrollMode", "content");
+});

package/src/ThreeDSecure/Frame.tsx

@@ -0,0 +1,50 @@
+import { useContext, useMemo } from "react";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { useEvervault } from "../useEvervault";
+import { WebView } from "react-native-webview";
+import { CHALLENGE_DOMAIN_3DS } from "./config";
+import { ThreeDSecureContext } from "./context";
+
+export interface ThreeDSecureFrameProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ThreeDSecureFrame({ style }: ThreeDSecureFrameProps) {
+  const evervault = useEvervault();
+
+  const context = useContext(ThreeDSecureContext);
+  if (!context) {
+    throw new Error(
+      "`ThreeDSecure.Frame` must be used within a `ThreeDSecure` component."
+    );
+  }
+
+  const uri = useMemo(() => {
+    if (!context.session) return null;
+
+    const params = new URLSearchParams();
+    params.set("session", context.session.sessionId);
+    params.set("app", evervault.appId);
+    params.set("team", evervault.teamId);
+
+    return `https://${CHALLENGE_DOMAIN_3DS}/?${params.toString()}`;
+  }, [context.session, evervault.appId, evervault.teamId]);
+
+  if (!uri) return null;
+
+  return (
+    <WebView
+      containerStyle={[defaultStyles.webView, style]}
+      source={{ uri }}
+      hideKeyboardAccessoryView
+      overScrollMode="content"
+    />
+  );
+}
+
+const defaultStyles = StyleSheet.create({
+  webView: {
+    flex: 1,
+    width: "100%",
+  },
+});

package/src/ThreeDSecure/Root.test.tsx

@@ -0,0 +1,67 @@
+import { PropsWithChildren } from "react";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { render, screen } from "@testing-library/react-native";
+import { ThreeDSecure } from "./Root";
+import { Text } from "react-native";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+it("renders null when the session is null", () => {
+  render(
+    <ThreeDSecure
+      state={{
+        session: null,
+        isVisible: false,
+        cancel: vi.fn(),
+        start: vi.fn(),
+      }}
+    >
+      <Text testID="child">Hello</Text>
+    </ThreeDSecure>,
+    { wrapper }
+  );
+
+  expect(screen.queryByTestId("child")).toBeNull();
+});
+
+it("renders null when the session is not visible", () => {
+  render(
+    <ThreeDSecure
+      state={{
+        session: { sessionId: "session_123", cancel: vi.fn(), get: vi.fn() },
+        isVisible: false,
+        cancel: vi.fn(),
+        start: vi.fn(),
+      }}
+    >
+      <Text testID="child">Hello</Text>
+    </ThreeDSecure>,
+    { wrapper }
+  );
+
+  expect(screen.queryByTestId("child")).toBeNull();
+});
+
+it("renders the children when the session defined and visible", () => {
+  render(
+    <ThreeDSecure
+      state={{
+        session: { sessionId: "session_123", cancel: vi.fn(), get: vi.fn() },
+        isVisible: true,
+        cancel: vi.fn(),
+        start: vi.fn(),
+      }}
+    >
+      <Text testID="child">Hello</Text>
+    </ThreeDSecure>,
+    { wrapper }
+  );
+
+  expect(screen.getByTestId("child")).toBeOnTheScreen();
+});

package/src/ThreeDSecure/Root.tsx

@@ -0,0 +1,23 @@
+import { ThreeDSecureState } from "./types";
+import { useEvervault } from "../useEvervault";
+import { ThreeDSecureContext } from "./context";
+import { PropsWithChildren } from "react";
+
+export interface ThreeDSecureProps extends PropsWithChildren {
+  /**
+   * The 3DS session state returned from the `useThreeDSecure` hook.
+   */
+  state: ThreeDSecureState;
+}
+
+export function ThreeDSecure({ state, children }: ThreeDSecureProps) {
+  useEvervault();
+
+  if (!state.session) return null;
+
+  return (
+    <ThreeDSecureContext.Provider value={state}>
+      {state.isVisible && children}
+    </ThreeDSecureContext.Provider>
+  );
+}

package/src/ThreeDSecure/config.ts

@@ -0,0 +1,3 @@
+export const EV_API_DOMAIN = process.env.EV_API_DOMAIN || "api.evervault.com";
+export const CHALLENGE_DOMAIN_3DS =
+  process.env.CHALLENGE_DOMAIN_3DS || "3ds.evervault.com";

package/src/ThreeDSecure/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { ThreeDSecureState } from "./types";
+
+export const ThreeDSecureContext = createContext<ThreeDSecureState | null>(
+  null
+);

package/src/ThreeDSecure/index.ts

@@ -0,0 +1,17 @@
+import { ThreeDSecure as ThreeDSecureRoot } from "./Root";
+import { ThreeDSecureFrame } from "./Frame";
+
+export const ThreeDSecure = Object.assign(ThreeDSecureRoot, {
+  Frame: ThreeDSecureFrame,
+});
+
+export type { ThreeDSecureProps } from "./Root";
+export type { ThreeDSecureFrameProps } from "./Frame";
+
+export type {
+  ThreeDSecureState,
+  ThreeDSecureSession,
+  ThreeDSecureCallbacks,
+} from "./types";
+
+export { useThreeDSecure } from "./useThreeDSecure";