@paypal/checkout-components 5.0.409 → 5.0.411

package/globals.js

@@ -23,6 +23,7 @@ module.exports = {
     __URI__: {
       __CHECKOUT__: "/checkoutnow",
       __BUTTONS__: "/smart/buttons",
+      __SAVED_PAYMENT_METHODS__: "/smart/saved-payment-methods",
       __PIXEL__: "/smart/pixel",
       __MENU__: "/smart/menu",
       __QRCODE__: "/smart/qrcode",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.409",
+  "version": "5.0.411",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/declarations.js

@@ -20,6 +20,7 @@ declare var __PAYPAL_CHECKOUT__: {|
     __WALLET__: string,
     __PAYMENT_FIELDS__: string,
     __MESSAGE_MODAL__: string,
+    __SAVED_PAYMENT_METHODS__: string,
   |},
 |};
 

package/src/interface/saved-payment-methods.js

@@ -0,0 +1,15 @@
+/* @flow */
+
+import type { LazyExport } from "../types";
+import {
+  getSavedPaymentMethodsComponent,
+  type SavedPaymentMethodsComponent,
+} from "../zoid/saved-payment-methods";
+
+export const SavedPaymentMethods: LazyExport<SavedPaymentMethodsComponent> = {
+  __get__: () => getSavedPaymentMethodsComponent(),
+};
+
+export function setup() {
+  getSavedPaymentMethodsComponent();
+}

package/src/lib/perceived-latency-instrumentation.js

@@ -57,16 +57,17 @@ export const logLatencyInstrumentationPhase = ({
 };
 
 export const prepareInstrumentationPayload = (
-  buttonSessionID: string
+  buttonSessionID: string,
+  component: "buttons" | "saved-payment-methods"
 ): InstrumentationPayload => {
   const timeOrigin = getNavigationTimeOrigin();
   const renderStartTime = getStartTimeFromMark({
     buttonSessionID,
-    phase: "buttons-first-render",
+    phase: `${component}-first-render`,
   });
   const renderEndTime = getStartTimeFromMark({
     buttonSessionID,
-    phase: "buttons-first-render-end",
+    phase: `${component}-first-render-end`,
   });
   return {
     comp: {

package/src/three-domain-secure/interface.js

@@ -31,25 +31,34 @@ export function destroy(err?: mixed) {
 export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInterface> =
   {
     __get__: () => {
-      const accessToken = getSDKToken() || getUserIDToken();
-      const threeDomainSecureInstance = new ThreeDomainSecureComponent({
-        logger: getLogger(),
-        restClient: new RestClient({ accessToken }),
-        graphQLClient: new GraphQLClient({
-          baseURL:
-            getEnv() === "production" ? BRAINTREE_PROD : BRAINTREE_SANDBOX,
-          accessToken,
-        }),
-        // $FlowIssue ZalgoPromise vs Promise
-        sdkConfig: {
-          authenticationToken: accessToken,
-          paypalApiDomain: getPayPalAPIDomain(),
-          clientID: getClientID(),
-        },
-      });
+      let threeDomainSecureInstance;
+      const getThreeDomainSecureInstance = () => {
+        if (!threeDomainSecureInstance) {
+          const accessToken = getSDKToken() || getUserIDToken();
+          threeDomainSecureInstance = new ThreeDomainSecureComponent({
+            logger: getLogger(),
+            restClient: new RestClient({ accessToken }),
+            graphQLClient: new GraphQLClient({
+              baseURL:
+                getEnv() === "production" ? BRAINTREE_PROD : BRAINTREE_SANDBOX,
+              accessToken,
+            }),
+            // $FlowIssue ZalgoPromise vs Promise
+            sdkConfig: {
+              authenticationToken: accessToken,
+              paypalApiDomain: getPayPalAPIDomain(),
+              clientID: getClientID(),
+            },
+          });
+        }
+
+        return threeDomainSecureInstance;
+      };
+
       return {
-        isEligible: (payload) => threeDomainSecureInstance.isEligible(payload),
-        show: () => threeDomainSecureInstance.show(),
+        isEligible: (payload) =>
+          getThreeDomainSecureInstance().isEligible(payload),
+        show: () => getThreeDomainSecureInstance().show(),
       };
     },
   };

package/src/three-domain-secure/interface.test.js

@@ -4,9 +4,10 @@ import {
   getLogger,
   getPayPalAPIDomain,
   getSDKToken,
+  getUserIDToken,
   getClientID,
 } from "@paypal/sdk-client/src";
-import { describe, expect, vi } from "vitest";
+import { beforeEach, describe, expect, vi } from "vitest";
 import { destroy as zoidDestroy } from "@krakenjs/zoid/src";
 
 import { ThreeDomainSecureComponent } from "./component";
@@ -21,6 +22,10 @@ vi.mock("./api");
 vi.mock("./utils");
 
 describe("ThreeDomainSecure interface", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it("should setup and destroy", () => {
     setup();
     expect(getThreeDS).toHaveBeenCalledTimes(1);
@@ -34,6 +39,7 @@ describe("ThreeDomainSecure interface", () => {
   it("should create and return instance of ThreeDomainSecureClient only on dev environment", async () => {
     vi.mocked(getEnv).mockReturnValue("stage");
     vi.mocked(getSDKToken).mockReturnValue("test-token");
+    vi.mocked(getUserIDToken).mockReturnValue(undefined);
     vi.mocked(getPayPalAPIDomain).mockReturnValue("test-domain");
     vi.mocked(getClientID).mockReturnValue("test-client-id");
 
@@ -85,4 +91,15 @@ describe("ThreeDomainSecure interface", () => {
       },
     });
   });
+
+  it("should not throw during __get__ when sdk token is missing", () => {
+    vi.mocked(getEnv).mockReturnValue("stage");
+    vi.mocked(getSDKToken).mockReturnValue(undefined);
+    vi.mocked(getUserIDToken).mockReturnValue(undefined);
+    vi.mocked(getPayPalAPIDomain).mockReturnValue("test-domain");
+    vi.mocked(getClientID).mockReturnValue("test-client-id");
+
+    expect(() => ThreeDomainSecureClient.__get__()).not.toThrow();
+    expect(ThreeDomainSecureComponent).not.toHaveBeenCalled();
+  });
 });

package/src/ui/buttons/props.js

@@ -513,12 +513,12 @@ export type ButtonExtensions = {|
   resume: () => void,
 |};
 
-type ShowPayPalAppSwitchOverlay = {|
+export type ShowPayPalAppSwitchOverlay = {|
   focus: () => void,
   close: () => void,
 |};
 
-type HidePayPalAppSwitchOverlay = {|
+export type HidePayPalAppSwitchOverlay = {|
   close: () => void,
 |};
 

package/src/ui/buttons/styles/responsive.js

@@ -497,8 +497,8 @@ const generateRebrandedDisableMaxHeightStyles = (): string => {
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
             font-size: ${fontSize}px;
-            position: relative;
           }
+        }
       `;
     })
     .join("\n");
@@ -572,7 +572,6 @@ const generateRebrandedButtonSizeStyles = ({
         BUTTON_NUMBER.MULTIPLE
       } .${CLASS.SPACE} {
               font-size: ${fontSize}px;
-              position: relative; 
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
@@ -681,7 +680,6 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, 
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
               font-size: ${fontSize}px;
-              position: relative; 
           }
 
           .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {

package/src/zoid/buttons/component.jsx

@@ -190,7 +190,10 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           phase: "buttons-first-render-end",
         });
         try {
-          const cplPhases = prepareInstrumentationPayload(buttonSessionID);
+          const cplPhases = prepareInstrumentationPayload(
+            buttonSessionID,
+            "buttons"
+          );
           const cplLatencyMetrics = {
             [FPTI_KEY.STATE]: "CPL_LATENCY_METRICS",
             [FPTI_KEY.TRANSITION]: "process_client_metrics",