@paypal/checkout-components 5.0.409-alpha-cc8673c.0 → 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-alpha-cc8673c.0",
+  "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/types.js

@@ -70,7 +70,6 @@ export type Experiment = {|
   paypalCreditButtonCreateVaultSetupTokenExists?: boolean,
   isPaylaterCobrandedLabelEnabled?: boolean,
   isPaylaterCobrandedLabelRandomizationEnabled?: boolean,
-  isBfcacheEnabled?: boolean,
 |};
 
 export type Requires = {|

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,
 |};
 
@@ -589,7 +589,9 @@ export type ButtonProps = {|
   hashChangeHandler: (event: any) => void,
   listenForVisibilityChange: () => void,
   removeListenerForVisibilityChanges: () => void,
+  // Not passed to child iframe
   visibilityChangeHandler: () => void,
+
   showPayPalAppSwitchOverlay: (args: ShowPayPalAppSwitchOverlay) => void,
   hidePayPalAppSwitchOverlay: (args: HidePayPalAppSwitchOverlay) => 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

@@ -107,8 +107,8 @@ import {
   getButtonSize,
   getButtonExperiments,
   getModal,
-  isEagerOrderCreationEnabled,
   sendPostRobotMessageToButtonIframe,
+  isEagerOrderCreationEnabled,
 } from "./util";
 
 export type ButtonsComponent = ZoidComponent<
@@ -128,8 +128,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     url: () => `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__BUTTONS__}`,
 
     domain: getPayPalDomainRegex(),
-    enableBfcache: Boolean(getButtonExperiments()?.isBfcacheEnabled),
-
     getExtensions: (parent) => {
       return {
         hasReturned: () => {
@@ -192,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",
@@ -460,20 +461,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           },
       },
 
-      onBfcacheRestore: {
-        type: "function",
-        sendToChild: false,
-        queryParam: false,
-        value:
-          () =>
-          ({ cachedDurationMs } = {}) => {
-            sendPostRobotMessageToButtonIframe({
-              eventName: "bfcache_restore",
-              payload: { cachedDurationMs },
-            });
-          },
-      },
-
       // allowBillingPayments prop is used by Honey Extension to render the one-click button
       // with payment methods & to use the payment methods instead of the Billing Agreement
       allowBillingPayments: {

package/src/zoid/buttons/util.js

@@ -410,7 +410,6 @@ export const sendPostRobotMessageToButtonIframe = ({
     if (iframes[i].name.includes("zoid__paypal_buttons")) {
       postRobotSend(iframes[i].contentWindow, eventName, payload, {
         domain: getPayPalDomain(),
-        fireAndForget: true,
       });
     }
   }

package/src/zoid/checkout/component.jsx

@@ -55,8 +55,6 @@ export function getCheckoutComponent(): CheckoutComponent {
         },
       },
 
-      enableBfcache: false,
-
       defaultContext: supportsPopups() ? CONTEXT.POPUP : CONTEXT.IFRAME,
 
       domain: getPayPalDomainRegex(),