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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.286-alpha.0",
+  "version": "5.0.286",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -109,7 +109,6 @@
     "@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/ui/buttons/styles/color.js

@@ -33,6 +33,7 @@ export const buttonColorStyle = `
     @media (hover:hover) {
         .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD}:hover {
             filter: brightness(0.95);
+            overflow: inherit;
         }
     }
 
@@ -156,6 +157,7 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
+        overflow: inherit;
     }
 
     /* APM button on focus actions */
@@ -214,6 +216,7 @@ export const buttonColorStyle = `
     @media (hover:hover) {
         .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:hover {
             filter: brightness(0.95);
+            overflow: inherit;
         }
     }
 
@@ -241,6 +244,7 @@ export const buttonColorStyle = `
     @media (hover:hover) {
         .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.SILVER}:hover {
             filter: brightness(0.95);
+            overflow: inherit;
         }
     }
 
@@ -267,6 +271,7 @@ export const buttonColorStyle = `
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:hover {
         filter: brightness(1.2);
+        overflow: inherit;
     }
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:focus {
@@ -294,6 +299,7 @@ export const buttonColorStyle = `
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:hover {
         filter: brightness(1.2);
+        overflow: inherit;
     }
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:focus {
@@ -321,6 +327,7 @@ export const buttonColorStyle = `
     @media (hover:hover) {
         .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:hover {
             filter: brightness(0.95);
+            overflow: inherit;
         }
     }
     
@@ -357,6 +364,7 @@ export const buttonColorStyle = `
 
     .${CLASS.BUTTON} .${CLASS.CARD}:hover {
         filter: brightness(1.2);
+        overflow: inherit;
     }
 
     .${CLASS.BUTTON} .${CLASS.CARD}:focus {

package/src/connect/component.jsx

@@ -1,46 +0,0 @@
-/* @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

@@ -1,74 +0,0 @@
-/* @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

@@ -1,16 +0,0 @@
-/* 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

@@ -1,19 +0,0 @@
-/* @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);
-  });
-});