@paypal/checkout-components 5.0.386 → 5.0.388

package/src/funding/util.test.js

@@ -0,0 +1,282 @@
+/* @flow */
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import {
+  isWebView,
+  isIosWebview,
+  isAndroidWebview,
+  isFacebookWebView,
+  isOperaMini,
+  isFirefoxIOS,
+  isEdgeIOS,
+  isQQBrowser,
+  isElectron,
+  supportsPopups,
+  isTablet,
+  isIos,
+  isSafari,
+  isAndroid,
+  isChrome,
+  isFirefox,
+} from "@krakenjs/belter/src";
+
+import { supportsVenmoPopups, isSupportedNativeVenmoBrowser } from "./util";
+
+// Mock all the browser detection functions from belter
+vi.mock("@krakenjs/belter/src", () => ({
+  isWebView: vi.fn(),
+  isIosWebview: vi.fn(),
+  isAndroidWebview: vi.fn(),
+  isFacebookWebView: vi.fn(),
+  isOperaMini: vi.fn(),
+  isFirefoxIOS: vi.fn(),
+  isEdgeIOS: vi.fn(),
+  isQQBrowser: vi.fn(),
+  isElectron: vi.fn(),
+  supportsPopups: vi.fn(),
+  isTablet: vi.fn(),
+  isIos: vi.fn(),
+  isSafari: vi.fn(),
+  isAndroid: vi.fn(),
+  isChrome: vi.fn(),
+  isFirefox: vi.fn(),
+}));
+
+describe("funding/util", () => {
+  const defaultUserAgent =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    vi.clearAllMocks();
+
+    // Reset window.popupBridge
+    delete window.popupBridge;
+
+    // Set default mock return values
+    vi.mocked(isWebView).mockReturnValue(false);
+    vi.mocked(isIosWebview).mockReturnValue(false);
+    vi.mocked(isAndroidWebview).mockReturnValue(false);
+    vi.mocked(isFacebookWebView).mockReturnValue(false);
+    vi.mocked(isOperaMini).mockReturnValue(false);
+    vi.mocked(isFirefoxIOS).mockReturnValue(false);
+    vi.mocked(isEdgeIOS).mockReturnValue(false);
+    vi.mocked(isQQBrowser).mockReturnValue(false);
+    vi.mocked(isElectron).mockReturnValue(false);
+    vi.mocked(supportsPopups).mockReturnValue(true);
+    vi.mocked(isTablet).mockReturnValue(false);
+    vi.mocked(isIos).mockReturnValue(false);
+    vi.mocked(isSafari).mockReturnValue(false);
+    vi.mocked(isAndroid).mockReturnValue(false);
+    vi.mocked(isChrome).mockReturnValue(false);
+    vi.mocked(isFirefox).mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe("supportsVenmoPopups", () => {
+    describe("when in supported webview", () => {
+      beforeEach(() => {
+        vi.mocked(isWebView).mockReturnValue(true);
+      });
+
+      it("should return true when popupBridge is available", () => {
+        window.popupBridge = {};
+
+        expect(supportsVenmoPopups({}, true, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false when popupBridge is not available", () => {
+        expect(supportsVenmoPopups({}, true, defaultUserAgent)).toBe(false);
+      });
+    });
+
+    describe("when not in supported webview", () => {
+      it("should return true when experiment flag is enabled and user agent supports popups", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, true, defaultUserAgent)).toBe(
+          true
+        );
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isOperaMini", () => {
+        vi.mocked(isOperaMini).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isFirefoxIOS", () => {
+        vi.mocked(isFirefoxIOS).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isEdgeIOS", () => {
+        vi.mocked(isEdgeIOS).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isQQBrowser", () => {
+        vi.mocked(isQQBrowser).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isElectron", () => {
+        vi.mocked(isElectron).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should fall back to supportsPopups when experiment flag is not enabled", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+        const experiment = {};
+
+        expect(supportsVenmoPopups(experiment, true, defaultUserAgent)).toBe(
+          true
+        );
+      });
+
+      it("should fall back to supportsPopups when experiment flag is false", () => {
+        vi.mocked(supportsPopups).mockReturnValue(false);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: false };
+
+        expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
+          false
+        );
+      });
+
+      it("should handle undefined experiment", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+
+        expect(supportsVenmoPopups(undefined, true, defaultUserAgent)).toBe(
+          true
+        );
+      });
+    });
+  });
+
+  describe("isSupportedNativeVenmoBrowser", () => {
+    describe("when in supported webview", () => {
+      beforeEach(() => {
+        vi.mocked(isWebView).mockReturnValue(true);
+      });
+
+      it("should return true when popupBridge is available", () => {
+        window.popupBridge = {};
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false when popupBridge is not available", () => {
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+    });
+
+    describe("when not in supported webview", () => {
+      it("should return false when on tablet", () => {
+        vi.mocked(isTablet).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for iOS Safari by default", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return true for Android Chrome by default", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false for iOS Chrome without experiment flag", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for iOS Chrome with experiment flag", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+        ).toBe(true);
+      });
+
+      it("should return false for Android Firefox without experiment flag", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for Android Firefox with experiment flag", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+        ).toBe(true);
+      });
+
+      it("should return false for unsupported browser combinations", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true); // iOS Firefox (not Chrome)
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false for desktop browsers", () => {
+        // No mobile flags set, simulating desktop
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should handle undefined experiment", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser(undefined, defaultUserAgent)).toBe(
+          true
+        );
+      });
+
+      it("should prioritize tablet check over browser checks", () => {
+        vi.mocked(isTablet).mockReturnValue(true);
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+    });
+  });
+});

package/src/funding/venmo/config.jsx

@@ -48,19 +48,18 @@ export function getVenmoConfig(): FundingSourceConfig {
       return true;
     },
 
-    requires: ({ experiment, platform }) => {
-      const isNonNativeSupported =
-        experiment?.venmoEnableWebOnNonNativeBrowser === true ||
-        (__WEB__ && window.popupBridge);
-
+    requires: ({ platform }) => {
       if (platform === PLATFORM.MOBILE) {
         return {
-          native: isNonNativeSupported ? false : true,
-          popup: isNonNativeSupported ? false : true,
+          native: true,
+          popup: true,
         };
       }
 
-      return {};
+      return {
+        native: false,
+        popup: false,
+      };
     },
 
     Logo: ({ logoColor, optional, shouldApplyRebrandedStyles }) => {

package/src/funding/venmo/config.test.js

@@ -8,6 +8,9 @@ import { BUTTON_FLOW } from "../../constants";
 import { getVenmoConfig } from "./config";
 
 describe("Venmo eligibility", () => {
+  window.navigator.mockUserAgent =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+
   const baseEligibilityProps = {
     fundingSource: undefined,
     components: ["buttons"],
@@ -102,58 +105,35 @@ describe("Venmo eligibility", () => {
   });
 
   describe("requires", () => {
-    test("should not check for native or popup eligibility if platform is mobile and window.popupBridge is defined", () => {
-      window.popupBridge = {};
-
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: true,
-        },
+    test("should require native and popup support when platform is mobile", () => {
+      const venmoRequires = venmoConfig.requires?.({
         platform: PLATFORM.MOBILE,
       });
 
-      expect(isVenmoEligible).toEqual({
-        native: false,
-        popup: false,
+      expect(venmoRequires).toEqual({
+        native: true,
+        popup: true,
       });
-
-      window.popupBridge = undefined;
     });
 
-    test("should not check for native or popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is true", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: true,
-        },
-        platform: PLATFORM.MOBILE,
+    test("should not require native or popup support when platform is desktop", () => {
+      const venmoRequires = venmoConfig.requires?.({
+        platform: PLATFORM.DESKTOP,
       });
 
-      expect(isVenmoEligible).toEqual({
+      expect(venmoRequires).toEqual({
         native: false,
         popup: false,
       });
     });
 
-    test("should check for native and popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is false and window.popupBridge is not defined", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: false,
-        },
-        platform: PLATFORM.MOBILE,
-      });
+    test("should not require native or popup support when platform is not specified", () => {
+      const venmoRequires = venmoConfig.requires?.({});
 
-      expect(isVenmoEligible).toEqual({
-        native: true,
-        popup: true,
-      });
-    });
-
-    test("should not check for native and popup eligibility if platform is not mobile", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        platform: PLATFORM.DESKTOP,
+      expect(venmoRequires).toEqual({
+        native: false,
+        popup: false,
       });
-
-      expect(isVenmoEligible).toEqual({});
     });
   });
 });

package/src/hosted-buttons/types.js

@@ -77,6 +77,7 @@ export type HostedButtonStyles = {|
   label: string,
   height: ?number,
   tagline: boolean,
+  shouldApplyRebrandedStyles?: boolean,
 |};
 
 export type HostedButtonOptions = {|

package/src/hosted-buttons/utils.js

@@ -6,6 +6,7 @@ import {
   buildDPoPHeaders,
   getSDKHost,
   getClientID,
+  getFirstRenderExperiments,
   getLocale,
   getMerchantID as getSDKMerchantID,
 } from "@paypal/sdk-client/src";
@@ -14,6 +15,7 @@ import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import { getButtonsComponent, type ButtonsComponent } from "../zoid/buttons";
+import type { Experiment as EligibilityExperiment } from "../types";
 
 import type {
   ButtonVariables,
@@ -155,6 +157,12 @@ export const getButtonPreferences = ({
   };
 };
 
+function getButtonExperiments(): EligibilityExperiment {
+  return {
+    ...getFirstRenderExperiments(),
+  };
+}
+
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables?.find((variable) => variable.name === key)?.value ?? "";
 
@@ -185,6 +193,8 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
     getButtonVariable(variables, "tax_rate_preference") ===
     "tax_rate_from_profile";
 
+  const { isPaypalRebrandEnabled } = getButtonExperiments();
+
   return {
     style: {
       layout: getButtonVariable(variables, "layout"),
@@ -193,6 +203,7 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
       label: getButtonVariable(variables, "button_text"),
       tagline: getButtonVariable(variables, "tagline") === "true",
       height: parseInt(getButtonVariable(variables, "height"), 10) || undefined,
+      shouldApplyRebrandedStyles: isPaypalRebrandEnabled,
     },
     enableDPoP: getButtonVariable(variables, "enable_dpop") === "true",
     shouldIncludeShippingCallbacks: shippingFromProfile || taxRateFromProfile,
@@ -445,7 +456,8 @@ export const getFlexDirection = ({
 
 export const getButtonColor = (
   color: Color,
-  fundingSource: FundingSources
+  fundingSource: FundingSources,
+  shouldApplyRebrandedStyles?: boolean
 ): Color => {
   const colorMap = {
     gold: {
@@ -455,7 +467,7 @@ export const getButtonColor = (
     },
     blue: {
       paypal: "blue",
-      venmo: "silver",
+      venmo: shouldApplyRebrandedStyles ? "blue" : "silver",
       paylater: "blue",
     },
     black: {
@@ -470,7 +482,7 @@ export const getButtonColor = (
     },
     silver: {
       paypal: "silver",
-      venmo: "blue",
+      venmo: shouldApplyRebrandedStyles ? "silver" : "blue",
       paylater: "silver",
     },
   };
@@ -525,7 +537,11 @@ export const getButtons = ({
     style: {
       ...style,
       // $FlowFixMe
-      color: getButtonColor(style.color, fundingSource),
+      color: getButtonColor(
+        style.color,
+        fundingSource,
+        style.shouldApplyRebrandedStyles
+      ),
     },
   });
 };

package/src/hosted-buttons/utils.test.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-restricted-globals, promise/no-native, max-lines */
 import { test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { getLogger } from "@paypal/sdk-client/src";
+import { getFirstRenderExperiments, getLogger } from "@paypal/sdk-client/src";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
@@ -38,6 +38,9 @@ vi.mock("@paypal/sdk-client/src", async () => {
     getClientID: () => "client_id_123",
     getMerchantID: () => ["merchant_id_123"],
     getLocale: () => ({ lang: "en", country: "US" }),
+    getFirstRenderExperiments: vi.fn(() => ({
+      isPaypalRebrandEnabled: false,
+    })),
     getLogger: vi.fn(() => ({
       error: vi.fn(),
       track: vi.fn().mockImplementation(() => ({
@@ -149,6 +152,7 @@ describe("getHostedButtonDetails", () => {
         color: "gold",
         label: "paypal",
         tagline: true,
+        shouldApplyRebrandedStyles: false,
       });
     });
     expect.assertions(1);
@@ -176,6 +180,42 @@ describe("getHostedButtonDetails", () => {
     expect.assertions(5);
   });
 
+  describe("Returns appropriate rebrand styles flag", () => {
+    test("should handle when rebrand experiment returns false", async () => {
+      // $FlowIssue
+      request.mockImplementationOnce(() =>
+        // eslint-disable-next-line compat/compat
+        Promise.resolve(getHostedButtonDetailsResponse.v2)
+      );
+      await getHostedButtonDetails({
+        hostedButtonId,
+        fundingSources: [],
+      }).then(({ style }) => {
+        expect(style.shouldApplyRebrandedStyles).toBe(false);
+      });
+      expect.assertions(1);
+    });
+
+    test("should handle when rebrand experiment returns true", async () => {
+      vi.mocked(getFirstRenderExperiments).mockReturnValueOnce({
+        isPaypalRebrandEnabled: true,
+      });
+
+      // $FlowIssue
+      request.mockImplementationOnce(() =>
+        // eslint-disable-next-line compat/compat
+        Promise.resolve(getHostedButtonDetailsResponse.v2)
+      );
+      await getHostedButtonDetails({
+        hostedButtonId,
+        fundingSources: [],
+      }).then(({ style }) => {
+        expect(style.shouldApplyRebrandedStyles).toBe(true);
+      });
+      expect.assertions(1);
+    });
+  });
+
   test("handles false tagline values", async () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
@@ -778,10 +818,10 @@ test("getFlexDirection", () => {
   });
 });
 
-test("getButtonColor", () => {
+describe("getButtonColor", () => {
   const colors = ["gold", "blue", "silver", "white", "black"];
   const fundingSources = ["paypal", "venmo", "paylater"];
-  const colorMap = {
+  const colorMapLegacy = {
     gold: {
       paypal: "gold",
       venmo: "blue",
@@ -809,11 +849,51 @@ test("getButtonColor", () => {
     },
   };
 
-  colors.forEach((color) => {
-    fundingSources.forEach((fundingSource) => {
-      expect(getButtonColor(color, fundingSource)).toBe(
-        colorMap[color][fundingSource]
-      );
+  const colorMapRebrand = {
+    gold: {
+      paypal: "gold",
+      venmo: "blue",
+      paylater: "gold",
+    },
+    blue: {
+      paypal: "blue",
+      venmo: "blue",
+      paylater: "blue",
+    },
+    black: {
+      paypal: "black",
+      venmo: "black",
+      paylater: "black",
+    },
+    white: {
+      paypal: "white",
+      venmo: "white",
+      paylater: "white",
+    },
+    silver: {
+      paypal: "silver",
+      venmo: "silver",
+      paylater: "silver",
+    },
+  };
+
+  test("legacy button colors", () => {
+    colors.forEach((color) => {
+      fundingSources.forEach((fundingSource) => {
+        expect(getButtonColor(color, fundingSource)).toBe(
+          colorMapLegacy[color][fundingSource]
+        );
+      });
+    });
+  });
+
+  test("rebrand button colors", () => {
+    colors.forEach((color) => {
+      fundingSources.forEach((fundingSource) => {
+        expect(getButtonColor(color, fundingSource, true)).toBe(
+          colorMapRebrand[color][fundingSource]
+        );
+      });
     });
   });
 });

package/src/marks/component.jsx

@@ -9,6 +9,7 @@ import {
   memoize,
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
+  getUserAgent,
 } from "@krakenjs/belter/src";
 import {
   PLATFORM,
@@ -51,6 +52,7 @@ type MarksProps = {|
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  userAgent: string,
 |};
 
 export type MarksComponent = (MarksProps) => MarksInstance;
@@ -62,6 +64,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
     onShippingAddressChange,
     onShippingOptionsChange,
     displayOnly,
+    userAgent = getUserAgent(),
   }: MarksProps = {}): MarksInstance {
     const height = DEFAULT_HEIGHT;
     const fundingEligibility = getFundingEligibility();
@@ -99,6 +102,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
       supportedNativeBrowser,
       experiment,
       displayOnly,
+      userAgent,
     });
     const env = getEnv();
 
@@ -123,6 +127,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
         supportedNativeBrowser,
         experiment,
         displayOnly,
+        userAgent,
       });
     };
 

package/src/ui/buttons/buttons.jsx

@@ -168,6 +168,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     userIDToken,
     vault,
     wallet,
+    userAgent,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -190,6 +191,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     supportedNativeBrowser,
     experiment,
     displayOnly,
+    userAgent,
   });
   const multiple = fundingSources.length > 1;