@evervault/react-native 2.6.0 → 2.6.2

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/event.ts

@@ -0,0 +1,19 @@
+import { ThreeDSecureSession } from "./types";
+
+export type ThreeDSecureEventType = "requestChallenge";
+
+export class ThreeDSecureEvent {
+  constructor(
+    public readonly type: ThreeDSecureEventType,
+    public readonly session: ThreeDSecureSession,
+    private _defaultPrevented: boolean = false
+  ) {}
+
+  public preventDefault() {
+    this._defaultPrevented = true;
+  }
+
+  public get defaultPrevented() {
+    return this._defaultPrevented;
+  }
+}

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";