feat(3DS): Barebones for the new 3DS component (#2433)

* add threeDS component frame

* add entry point to the component

* rename component to avoid conflict

* add protected export

* initial framework for test

* update test, rename component

* fix lint

* fix typecheck

* add log

* remove 3ds entry path

* add sdk-client-token auth for 3DS comp

* fix lint/typecheck

---------

Co-authored-by: Mervin Choun <mchoun@paypal.com>

src/three-domain-secure/component.jsx

@@ -0,0 +1,30 @@
+/* @flow */
+import { getLogger, getSDKToken } from "@paypal/sdk-client/src";
+import { FPTI_KEY } from "@paypal/sdk-constants/src";
+
+import { ValidationError } from "../lib";
+
+export const getThreeDomainSecure = (): Function => {
+  const sdkToken = getSDKToken();
+  const ThreeDomainSecureAuth = () => {
+    if (sdkToken) {
+      // eslint-disable-next-line no-console
+      console.log("Three Domain Secure Called");
+      // Make a Zoid component and introduce methods here
+      // onSuccess
+      // onCancel
+      // onClose
+      getLogger()
+        .info("three domain secure v2 invoked")
+        .track({
+          [FPTI_KEY.TRANSITION]: "three_DS_auth_v2",
+        });
+    } else {
+      throw new ValidationError(
+        `script data attribute sdk-client-token is required but was not passed`
+      );
+    }
+  };
+
+  return ThreeDomainSecureAuth;
+};

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

@@ -0,0 +1,44 @@
+/* @flow */
+import { describe, expect, it, vi } from "vitest";
+import { getSDKToken } from "@paypal/sdk-client/src";
+
+import { ValidationError } from "../lib";
+
+import { getThreeDomainSecure } from "./component";
+
+vi.mock("@paypal/sdk-client/src", () => ({
+  getSDKToken: vi.fn(),
+  getLogger: vi.fn(() => ({
+    info: vi.fn().mockReturnThis(),
+    track: vi.fn().mockReturnThis(),
+    flush: vi.fn().mockReturnThis(),
+  })),
+}));
+vi.mock("../lib", () => ({
+  ValidationError: vi.fn(),
+}));
+describe("getThreeDomainSecure returns ThreeDomainSecureComponent", () => {
+  it("should throw an error if sdkToken is not present", () => {
+    // $FlowFixMe prop missing error
+    getSDKToken.mockReturnValue(undefined);
+    const ThreeDomainSecureComponent = getThreeDomainSecure();
+    expect(() => ThreeDomainSecureComponent()).toThrowError(ValidationError);
+    expect(ValidationError).toHaveBeenCalledWith(
+      `script data attribute sdk-client-token is required but was not passed`
+    );
+  });
+  it("should return the ThreeDomainSecure component and log the correct message", async () => {
+    // eslint-disable-next-line no-empty-function
+    const consoleSpy = vi.spyOn(console, "log").mockImplementation(() => {});
+    // $FlowFixMe prop missing error
+    getSDKToken.mockReturnValue("84ghb8984");
+    const ThreeDomainSecureComponent = getThreeDomainSecure();
+    expect(typeof ThreeDomainSecureComponent).toBe("function");
+
+    // Call the returned component and check the console log
+    await ThreeDomainSecureComponent();
+    expect(consoleSpy).toHaveBeenCalledWith("Three Domain Secure Called");
+
+    consoleSpy.mockRestore();
+  });
+});

src/three-domain-secure/interface.js

@@ -0,0 +1,13 @@
+/* @flow */
+import { type ZoidComponent } from "@krakenjs/zoid/src";
+
+import type { LazyExport } from "../types";
+import { protectedExport } from "../lib";
+
+import { getThreeDomainSecure } from "./component";
+
+type ThreeDomainSecureAuth = ZoidComponent<void>;
+
+export const ThreeDomainSecureComponent: LazyExport<ThreeDomainSecureAuth> = {
+  __get__: () => protectedExport(getThreeDomainSecure()),
+};