@paypal/checkout-components 5.0.416-alpha-620789e.0 → 5.0.420

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.416-alpha-620789e.0",
+  "version": "5.0.420",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/funding/funding.js

@@ -119,11 +119,7 @@ export function isFundingEligible(
     return false;
   }
 
-  if (
-    !fundingConfig.automatic &&
-    source !== fundingSource &&
-    !experiment?.forceAllFundingAutomatic
-  ) {
+  if (!fundingConfig.automatic && source !== fundingSource) {
     return false;
   }
 

package/src/funding/util.test.js

@@ -20,7 +20,11 @@ import {
   isFirefox,
 } from "@krakenjs/belter/src";
 
-import { supportsVenmoPopups, isSupportedNativeVenmoBrowser } from "./util";
+import {
+  getFundingSourceColors,
+  supportsVenmoPopups,
+  isSupportedNativeVenmoBrowser,
+} from "./util";
 
 // Mock all the browser detection functions from belter
 vi.mock("@krakenjs/belter/src", () => ({
@@ -76,6 +80,85 @@ describe("funding/util", () => {
     vi.resetAllMocks();
   });
 
+  describe("getFundingSourceColors", () => {
+    const mockFundingConfig = {
+      colors: ["gold", "blue", "silver"],
+      colorsRebrand: ["blue", "black", "white"],
+      logoColors: { default: "blue", white: "blue" },
+      logoColorsRebrand: { blue: "black", black: "white", white: "black" },
+      secondaryColors: { default: "silver", black: "black" },
+      secondaryColorsRebrand: { default: "white", black: "black" },
+      textColors: { gold: "black", blue: "white" },
+      textColorsRebrand: { default: "black", blue: "black", black: "white" },
+    };
+
+    it("should return legacy color fields when shouldApplyRebrandedStyles is false", () => {
+      const result = getFundingSourceColors({
+        // $FlowFixMe
+        fundingConfig: mockFundingConfig,
+        shouldApplyRebrandedStyles: false,
+      });
+
+      expect(result.colors).toBe(mockFundingConfig.colors);
+      expect(result.logoColors).toBe(mockFundingConfig.logoColors);
+      expect(result.secondaryColors).toBe(mockFundingConfig.secondaryColors);
+      expect(result.textColors).toBe(mockFundingConfig.textColors);
+    });
+
+    it("should return rebrand color fields when shouldApplyRebrandedStyles is true", () => {
+      const result = getFundingSourceColors({
+        // $FlowFixMe
+        fundingConfig: mockFundingConfig,
+        shouldApplyRebrandedStyles: true,
+      });
+
+      expect(result.colors).toBe(mockFundingConfig.colorsRebrand);
+      expect(result.logoColors).toBe(mockFundingConfig.logoColorsRebrand);
+      expect(result.secondaryColors).toBe(
+        mockFundingConfig.secondaryColorsRebrand
+      );
+      expect(result.textColors).toBe(mockFundingConfig.textColorsRebrand);
+    });
+
+    it("should fall back to legacy colors array when shouldApplyRebrandedStyles is true but colorsRebrand is not defined", () => {
+      const configWithoutColorsRebrand = {
+        ...mockFundingConfig,
+        colorsRebrand: undefined,
+      };
+
+      const result = getFundingSourceColors({
+        // $FlowFixMe
+        fundingConfig: configWithoutColorsRebrand,
+        shouldApplyRebrandedStyles: true,
+      });
+
+      expect(result.colors).toBe(configWithoutColorsRebrand.colors);
+    });
+
+    it("should still return rebrand logo/secondary/text colors even when colorsRebrand is not defined", () => {
+      const configWithoutColorsRebrand = {
+        ...mockFundingConfig,
+        colorsRebrand: undefined,
+      };
+
+      const result = getFundingSourceColors({
+        // $FlowFixMe
+        fundingConfig: configWithoutColorsRebrand,
+        shouldApplyRebrandedStyles: true,
+      });
+
+      expect(result.logoColors).toBe(
+        configWithoutColorsRebrand.logoColorsRebrand
+      );
+      expect(result.secondaryColors).toBe(
+        configWithoutColorsRebrand.secondaryColorsRebrand
+      );
+      expect(result.textColors).toBe(
+        configWithoutColorsRebrand.textColorsRebrand
+      );
+    });
+  });
+
   describe("supportsVenmoPopups", () => {
     describe("when in supported webview", () => {
       beforeEach(() => {

package/src/types.js

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

package/src/ui/buttons/props.test.js

@@ -2,7 +2,7 @@
 import { describe, expect, it, beforeEach, vi } from "vitest";
 import { FUNDING } from "@paypal/sdk-constants";
 
-import { BUTTON_COLOR } from "../../constants";
+import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_SHAPE } from "../../constants";
 
 import {
   getButtonColor,
@@ -14,6 +14,7 @@ import {
   determineRandomButtonColor,
   getColorABTestFromStorage,
   getBrandVersion,
+  normalizeButtonStyle,
 } from "./props";
 
 describe("getBrandVersion", () => {
@@ -182,7 +183,25 @@ describe("getDefaultColorForFundingSource", () => {
         ...actual,
         getFundingConfig: () => ({
           [FUNDING.PAYPAL]: {
-            colors: [BUTTON_COLOR.GOLD, BUTTON_COLOR.BLUE, BUTTON_COLOR.WHITE],
+            colors: [
+              BUTTON_COLOR.GOLD,
+              BUTTON_COLOR.BLUE,
+              BUTTON_COLOR.SILVER,
+              BUTTON_COLOR.WHITE,
+            ],
+            colorsRebrand: [
+              BUTTON_COLOR.BLUE,
+              BUTTON_COLOR.BLACK,
+              BUTTON_COLOR.WHITE,
+            ],
+            layouts: [BUTTON_LAYOUT.VERTICAL, BUTTON_LAYOUT.HORIZONTAL],
+            shapes: [BUTTON_SHAPE.RECT, BUTTON_SHAPE.PILL, BUTTON_SHAPE.SHARP],
+            logoColors: {},
+            logoColorsRebrand: {},
+            textColors: {},
+            textColorsRebrand: {},
+            secondaryColors: {},
+            secondaryColorsRebrand: {},
           },
           [FUNDING.VENMO]: {
             colors: [BUTTON_COLOR.BLUE],
@@ -469,6 +488,21 @@ describe("getColorForFullRedesign", () => {
     });
   });
 
+  it("should map SILVER to WHITE", () => {
+    const result = getColorForFullRedesign({
+      // $FlowFixMe
+      style: { color: BUTTON_COLOR.SILVER },
+      fundingSource: FUNDING.PAYPAL,
+    });
+
+    expect(result).toEqual({
+      color: BUTTON_COLOR.WHITE,
+      shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
+    });
+  });
+
   it("should handle unspecified style.color by determining an appropriate color", () => {
     const result = getColorForFullRedesign({
       // $FlowFixMe
@@ -802,3 +836,51 @@ describe("HideSubmitButtonProps type validation", () => {
     expect(validButtonProps.hideSubmitButtonForCardForm).toBe(false);
   });
 });
+
+describe("normalizeButtonStyle requestedButtonColor", () => {
+  it("should preserve the merchant-provided color as requestedButtonColor when rebrand maps it to a different color", () => {
+    const result = normalizeButtonStyle(
+      // $FlowFixMe
+      {
+        fundingSource: FUNDING.PAYPAL,
+        buttonColor: {
+          color: BUTTON_COLOR.BLUE,
+          shouldApplyRebrandedStyles: true,
+          brandVersion: "v2",
+          isButtonColorABTestMerchant: false,
+        },
+      },
+      // $FlowFixMe
+      { color: BUTTON_COLOR.GOLD }
+    );
+
+    // Merchant configured gold — rebrand maps it to blue
+    expect(result.requestedButtonColor).toBe(BUTTON_COLOR.GOLD);
+    expect(result.color).toBe(BUTTON_COLOR.BLUE);
+    expect(result.shouldApplyRebrandedStyles).toBe(true);
+    expect(result.brandVersion).toBe("v2");
+  });
+
+  it("should preserve merchant silver as requestedButtonColor when rebrand maps it to white", () => {
+    const result = normalizeButtonStyle(
+      // $FlowFixMe
+      {
+        fundingSource: FUNDING.PAYPAL,
+        buttonColor: {
+          color: BUTTON_COLOR.WHITE,
+          shouldApplyRebrandedStyles: true,
+          brandVersion: "v2",
+          isButtonColorABTestMerchant: false,
+        },
+      },
+      // $FlowFixMe
+      { color: BUTTON_COLOR.SILVER }
+    );
+
+    // Merchant configured silver — rebrand maps it to white
+    expect(result.requestedButtonColor).toBe(BUTTON_COLOR.SILVER);
+    expect(result.color).toBe(BUTTON_COLOR.WHITE);
+    expect(result.shouldApplyRebrandedStyles).toBe(true);
+    expect(result.brandVersion).toBe("v2");
+  });
+});

package/src/zoid/buttons/component.jsx

@@ -244,6 +244,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     eligible: ({ props }) => {
+      const buttonExperiments = props.experiment ?? getButtonExperiments();
       const {
         fundingSource,
         onShippingChange,
@@ -256,15 +257,15 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         supportsPopups = userAgentSupportsPopups(),
         supportedNativeBrowser = isSupportedNativeBrowser(),
         supportsVenmoPopups = supportsVenmoPopupsUtil(
-          props.experiment,
+          buttonExperiments,
           userAgentSupportsPopups(),
           getUserAgent()
         ),
         supportedNativeVenmoBrowser = isSupportedNativeVenmoBrowser(
-          props.experiment,
+          buttonExperiments,
           getUserAgent()
         ),
-        experiment = getButtonExperiments(),
+        experiment = buttonExperiments,
         createBillingAgreement,
         createSubscription,
         createVaultSetupToken,
@@ -803,6 +804,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
 
             return {
               nativeUrl: window.popupBridge.getReturnUrlPrefix(),
+              deepLinkReturnUrlPrefix:
+                typeof window.popupBridge.getDeepLinkReturnUrlPrefix ===
+                "function"
+                  ? window.popupBridge.getDeepLinkReturnUrlPrefix()
+                  : null,
+              isPayPalInstalled: Boolean(window.popupBridge.isPayPalInstalled),
               start: (url) => {
                 return new ZalgoPromise((resolve, reject) => {
                   window.popupBridge.onComplete = (err, result) => {
@@ -813,11 +820,41 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
                     }
                     const queryItems =
                       result && result.queryItems ? result.queryItems : {};
-                    return err ? reject(err) : resolve(queryItems);
+                    const payload = result
+                      ? {
+                          ...queryItems,
+                          path: result.path,
+                          hash: result.hash,
+                        }
+                      : queryItems;
+                    return err ? reject(err) : resolve(payload);
                   };
                   window.popupBridge.open(url);
                 });
               },
+              launchApp: (url) => {
+                return new ZalgoPromise((resolve, reject) => {
+                  window.popupBridge.onComplete = (err, result) => {
+                    if (!err && !result) {
+                      resolve({
+                        opType: "user_closed_window",
+                      });
+                    }
+                    const queryItems =
+                      result && result.queryItems ? result.queryItems : {};
+                    const payload = result
+                      ? {
+                          ...queryItems,
+                          queryItems,
+                          path: result.path,
+                          hash: result.hash,
+                        }
+                      : queryItems;
+                    return err ? reject(err) : resolve(payload);
+                  };
+                  window.popupBridge.launchApp(url);
+                });
+              },
             };
           };
         },