feature(3DS): Implement show method and return response with enriched nonce

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     __HOST__: true,
     __PATH__: true,
     __COMPONENTS__: true,
+    $Shape: true,
   },
 
   rules: {

__sdk__.js

@@ -94,6 +94,8 @@ module.exports = {
     entry: "./src/shopper-insights/interface",
   },
   "three-domain-secure": {
+    globals,
+    automatic: true,
     entry: "./src/three-domain-secure/interface",
   },
 };

src/lib/security.js

@@ -39,3 +39,6 @@ export const devEnvOnlyExport = (unprotectedExport) => {
     return undefined;
   }
 };
+// TODO: Remove after testing
+// $FlowIssue
+export const payPayDomainRegEx = /\.paypal\.(com|cn)(:\d+)?$/; // eslint-disable-line security/detect-unsafe-regex

src/three-domain-secure/api.js

@@ -0,0 +1,114 @@
+/* @flow */
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import { request } from "@krakenjs/belter/src";
+import { getSessionID, getPartnerAttributionID } from "@paypal/sdk-client/src";
+
+import { callRestAPI } from "../lib";
+import { HEADERS } from "../constants/api";
+
+type HTTPRequestOptions = {|
+  // eslint-disable-next-line flowtype/no-weak-types
+  data: any,
+  baseURL?: string,
+  accessToken?: string,
+  method?: string, // TODO do we have an available type for this in Flow?
+|};
+
+interface HTTPClientType {
+  accessToken: ?string;
+  baseURL: ?string;
+}
+
+type HTTPClientOptions = {|
+  accessToken: ?string,
+  baseURL: ?string,
+|};
+
+export class HTTPClient implements HTTPClientType {
+  accessToken: ?string;
+  baseURL: ?string;
+
+  constructor(options?: $Shape<HTTPClientOptions> = {}) {
+    this.accessToken = options.accessToken;
+    this.baseURL = options.baseURL;
+  }
+
+  setAccessToken(token: string) {
+    this.accessToken = token;
+  }
+}
+
+export class RestClient extends HTTPClient {
+  request({ baseURL, ...rest }: HTTPRequestOptions): ZalgoPromise<{ ... }> {
+    return callRestAPI({
+      url: baseURL ?? this.baseURL ?? "",
+      accessToken: this.accessToken,
+      ...rest,
+    });
+  }
+}
+
+const GRAPHQL_URI = "/graphql";
+
+type GQLQuery = {|
+  query: string,
+  variables: { ... },
+|};
+
+export function callGraphQLAPI({
+  accessToken,
+  baseURL,
+  data: query,
+  headers,
+}: {|
+  accessToken: ?string,
+  baseURL: string,
+  data: GQLQuery,
+  headers: Object, // TODO fix
+  // eslint-disable-next-line flowtype/no-weak-types
+|}): ZalgoPromise<any> {
+  if (!accessToken) {
+    throw new Error(
+      `No access token passed to GraphQL request ${baseURL}${GRAPHQL_URI}`
+    );
+  }
+
+  const requestHeaders = {
+    ...headers,
+    [HEADERS.AUTHORIZATION]: `Bearer ${accessToken}`,
+    [HEADERS.CONTENT_TYPE]: "application/json",
+    [HEADERS.PARTNER_ATTRIBUTION_ID]: getPartnerAttributionID() ?? "",
+    [HEADERS.CLIENT_METADATA_ID]: getSessionID(),
+  };
+
+  return request({
+    method: "post",
+    url: `${baseURL}${GRAPHQL_URI}`,
+    headers: requestHeaders,
+    json: query,
+  }).then(({ status, body }) => {
+    // TODO handle body.errors
+    if (status !== 200) {
+      throw new Error(`${baseURL}${GRAPHQL_URI} returned status ${status}`);
+    }
+
+    return body;
+  });
+}
+
+export class GraphQLClient extends HTTPClient {
+  request({
+    baseURL,
+    data,
+    accessToken,
+    headers,
+  }: // eslint-disable-next-line flowtype/no-weak-types
+  any): ZalgoPromise<any> {
+    return callGraphQLAPI({
+      accessToken: accessToken ?? this.accessToken,
+      data,
+      baseURL: baseURL ?? this.baseURL ?? "",
+      headers,
+    });
+  }
+}

src/three-domain-secure/api.test.js

@@ -0,0 +1,169 @@
+/* @flow */
+import { describe, expect, vi } from "vitest";
+import { request } from "@krakenjs/belter/src";
+
+import { callRestAPI } from "../lib";
+import { HEADERS } from "../constants/api";
+
+import { RestClient, GraphQLClient, callGraphQLAPI, HTTPClient } from "./api";
+
+vi.mock("@krakenjs/belter/src", async () => {
+  return {
+    ...(await vi.importActual("@krakenjs/belter/src")),
+    request: vi.fn(),
+  };
+});
+
+vi.mock("@paypal/sdk-client/src", async () => {
+  return {
+    ...(await vi.importActual("@paypal/sdk-client/src")),
+    getSessionID: () => "session_id_123",
+    getPartnerAttributionID: () => "partner_attr_123",
+  };
+});
+
+vi.mock("../lib", () => ({
+  callRestAPI: vi.fn(),
+}));
+
+describe("API", () => {
+  const accessToken = "access_token";
+  const baseURL = "http://localhost.paypal.com:8080";
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  describe("HTTPClient", () => {
+    it("should set access token and base url in constructor", () => {
+      const client = new HTTPClient({ accessToken, baseURL });
+      expect(client.accessToken).toBe(accessToken);
+      expect(client.baseURL).toBe(baseURL);
+    });
+
+    it("should set access token", () => {
+      const client = new HTTPClient();
+      client.setAccessToken(accessToken);
+      expect(client.accessToken).toBe(accessToken);
+    });
+  });
+
+  describe("RestClient", () => {
+    it("should make a REST API call with correct params", () => {
+      const data = { test: "data" };
+      const requestOptions = {
+        data,
+        baseURL,
+      };
+      const client = new RestClient({ accessToken });
+      client.request(requestOptions);
+      expect(callRestAPI).toHaveBeenCalledWith({
+        accessToken,
+        data,
+        url: baseURL,
+      });
+    });
+  });
+
+  describe("GraphQLClient", () => {
+    const query = { test: "data" };
+    const data = { query };
+    const headers = { "Content-Type": "application/json" };
+
+    it.skip("should make a GraphQL API call with correct params", () => {
+      vi.spyOn({ callGraphQLAPI }, "callGraphQLAPI").mockResolvedValue({
+        data: { test: "data" },
+      });
+      const client = new GraphQLClient({ accessToken, baseURL });
+      client.request({ data, headers }).then(() => {
+        expect(callGraphQLAPI).toHaveBeenCalledWith({
+          accessToken,
+          baseURL,
+          data,
+          headers,
+        });
+      });
+    });
+  });
+
+  describe("callGraphQLAPI", () => {
+    const query = '{ "test": "data" }';
+    const variables = { option: "param1" };
+    const gqlQuery = { query, variables };
+
+    const response = { data: { test: "data" } };
+
+    it("should throw error if no access token is provided", () => {
+      expect(() =>
+        callGraphQLAPI({
+          accessToken: null,
+          baseURL,
+          data: gqlQuery,
+          headers: {},
+        })
+      ).toThrowError(
+        new Error(
+          `No access token passed to GraphQL request ${baseURL}/graphql`
+        )
+      );
+    });
+
+    it("should make a GraphQL API call with correct params", () => {
+      vi.mocked(request).mockResolvedValue({
+        status: 200,
+        body: response,
+      });
+      callGraphQLAPI({
+        accessToken,
+        baseURL,
+        data: gqlQuery,
+        headers: {},
+      });
+      expect(request).toHaveBeenCalledWith({
+        method: "post",
+        url: `${baseURL}/graphql`,
+        headers: {
+          [HEADERS.AUTHORIZATION]: `Bearer ${accessToken}`,
+          [HEADERS.CONTENT_TYPE]: "application/json",
+          [HEADERS.PARTNER_ATTRIBUTION_ID]: "partner_attr_123",
+          [HEADERS.CLIENT_METADATA_ID]: "session_id_123",
+        },
+        json: gqlQuery,
+      });
+    });
+
+    it("should resolve with response body on success", async () => {
+      vi.mocked(request).mockResolvedValue({
+        status: 200,
+        body: response,
+      });
+      const resp = await callGraphQLAPI({
+        accessToken,
+        baseURL,
+        data: gqlQuery,
+        headers: {},
+      });
+      expect(resp).toEqual(response);
+    });
+
+    it("should throw error on error status", async () => {
+      const status = 400;
+      vi.mocked(request).mockResolvedValue({
+        status,
+        body: { message: "Something went wrong" },
+      });
+
+      try {
+        await callGraphQLAPI({
+          accessToken,
+          baseURL,
+          data: gqlQuery,
+          headers: {},
+        });
+      } catch (error) {
+        expect(error.message).toBe(
+          `${baseURL}/graphql returned status ${status}`
+        );
+      }
+    });
+  });
+});