@paypal/checkout-components 5.0.285 → 5.0.286-alpha.0

package/__sdk__.js

@@ -62,6 +62,10 @@ module.exports = {
     entry: "./src/interface/wallet",
     globals,
   },
+  connect: {
+    entry: "./src/connect/interface",
+    globals
+  },
   // @deprecated - renamed to payment-fields to be removed
   fields: {
     entry: "./src/interface/fields",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.285",
+  "version": "5.0.286-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -109,6 +109,7 @@
     "@krakenjs/zoid": "^10.3.1",
     "@paypal/common-components": "^1.0.35",
     "@paypal/funding-components": "^1.0.31",
+    "@paypal/connect-loader-component": "^1.1.0",
     "@paypal/sdk-client": "^4.0.176",
     "@paypal/sdk-constants": "^1.0.133",
     "@paypal/sdk-logos": "^2.2.6"

package/src/connect/component.jsx

@@ -0,0 +1,46 @@
+/* @flow */
+import { loadAxo } from "@paypal/connect-loader-component";
+import {
+  getClientID,
+  getClientMetadataID,
+  getUserIDToken,
+} from "@paypal/sdk-client/src";
+
+// eslint-disable-next-line flowtype/no-weak-types
+export type ConnectComponent = any;
+// TODO: What's the expected structure/approach for this interface. It's not a zoid
+// scenario, so what do we return?
+// -> Looks like it returns a function that accepts the props
+// How do we define the input of merchant params here?
+// $FlowFixMe
+export const getConnectComponent = async (merchantProps) => {
+  const cmid = getClientMetadataID();
+  const clientID = getClientID();
+  const userIdToken = getUserIDToken();
+  // TODO: Sort out integration specifics for inputs
+  try {
+    const loadResult = await loadAxo({
+      platform: "PPCP",
+      btSdkVersion: "3.97.3-connect-alpha.6.1",
+      minified: false,
+    });
+
+    // FPTI: sdkversion, fraudnet info
+    return await window.braintree.connect.create({
+      ...loadResult.metadata, // returns a localeURL for assets
+      ...merchantProps, // AXO specific props
+      platformOptions: {
+        platform: "PPCP",
+        userIdToken, // <merchant-specified-via-data-user-id-token>
+        clientID, // <merchant-specified-to-SDK-on-query-param>
+        clientMetadataID: cmid, // <merchant-specified-via-data-client-metadata-id>
+        fraudnet: () => {
+          return "";
+        }, // Pattern TBD
+      },
+    });
+  } catch (error) {
+    // FPTI Log here
+    return new Error(error);
+  }
+};

package/src/connect/component.test.js

@@ -0,0 +1,74 @@
+/* @flow */
+
+import {
+  getClientID,
+  getClientMetadataID,
+  getUserIDToken,
+} from "@paypal/sdk-client/src";
+import { loadAxo } from "@paypal/connect-loader-component";
+import { describe, expect, test, vi } from "vitest";
+
+import { getConnectComponent } from "./component";
+
+describe("getConnectComponent: returns ConnectComponent", () => {
+  const mockAxoMetadata = { someData: "data" };
+  const mockProps = { someProp: "value" };
+  beforeEach(() => {
+    window.braintree = {
+      connect: {
+        create: vi.fn(),
+      },
+    };
+
+    vi.mock("@paypal/sdk-client/src", () => {
+      return {
+        getClientID: vi.fn(() => "mock-client-id"),
+        getClientMetadataID: vi.fn(() => "mock-cmid"),
+        getUserIDToken: vi.fn(() => "mock-uid"),
+      };
+    });
+
+    vi.mock("@paypal/connect-loader-component", () => {
+      return {
+        loadAxo: vi.fn(),
+      };
+    });
+
+    loadAxo.mockResolvedValue({ metadata: mockAxoMetadata });
+
+    // getClientID.mockReturnValue("mock-client-id");
+    // getClientMetadataID.mockReturnValue("mock-cmid");
+    // getUserIDToken.mockReturnValue("mock-uid");
+  });
+
+  test("loadAxo and window.braintree.connect.create are called with proper data", async () => {
+    await getConnectComponent(mockProps);
+
+    expect(getClientID).toHaveBeenCalled();
+    expect(getClientMetadataID).toHaveBeenCalled();
+    expect(getUserIDToken).toHaveBeenCalled();
+    expect(loadAxo).toHaveBeenCalled();
+
+    expect(window.braintree.connect.create).toHaveBeenCalledWith({
+      ...mockAxoMetadata,
+      ...mockProps,
+      platformOptions: {
+        platform: "PPCP",
+        clientID: "mock-client-id",
+        clientMetadataID: "mock-cmid",
+        userIdToken: "mock-uid",
+        fraudnet: expect.any(Function),
+      },
+    });
+  });
+
+  test("loadAxo failure is handled", async () => {
+    const errorMessage = "Something went wrong";
+    loadAxo.mockRejectedValue(errorMessage);
+
+    const error = await getConnectComponent(mockProps);
+
+    expect(error).toBeInstanceOf(Error);
+    expect(error.message).toEqual(errorMessage);
+  });
+});

package/src/connect/interface.js

@@ -0,0 +1,16 @@
+/* eslint-disable flowtype/no-weak-types */
+/* @flow */
+// flow-disable
+
+import { getConnectComponent, type ConnectComponent } from "./component";
+
+type ConnectThing = (merchantProps: any) => ConnectComponent;
+// $FlowFixMe
+export const Connect: ConnectThing = async (
+  merchantProps: any
+): ConnectComponent => {
+  // $FlowFixMe
+  return await getConnectComponent(merchantProps);
+};
+
+/* eslint-enable flowtype/no-weak-types */

package/src/connect/interface.test.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import { describe, expect, vi } from "vitest";
+
+import { getConnectComponent } from "./component";
+import { Connect } from "./interface";
+
+describe("interface.js", () => {
+  vi.mock("./component", () => {
+    return {
+      getConnectComponent: vi.fn(),
+    };
+  });
+  it("should call getConnectComponent with merchant props", async () => {
+    const merchantProps = { props: "someProps" };
+    await Connect(merchantProps);
+    expect(getConnectComponent).toBeCalledWith(merchantProps);
+  });
+});