@paypal/checkout-components 5.0.365 → 5.0.366

package/package.json

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

package/src/ui/buttons/props.js

@@ -330,6 +330,7 @@ export type ButtonStyle = {|
   disableMaxHeight?: boolean,
   borderRadius?: number,
   shouldApplyRebrandedStyles: boolean,
+  isButtonColorABTestMerchant: boolean,
 |};
 
 export type ButtonStyleInputs = {|
@@ -516,6 +517,7 @@ type HidePayPalAppSwitchOverlay = {|
 type ButtonColor = {|
   shouldApplyRebrandedStyles: boolean,
   color: $Values<typeof BUTTON_COLOR>,
+  isButtonColorABTestMerchant: boolean,
 |};
 
 type ColorABTestStorage = {|
@@ -738,6 +740,7 @@ export function determineRandomButtonColor({
   return {
     shouldApplyRebrandedStyles,
     color: buttonColor,
+    isButtonColorABTestMerchant: true,
   };
 }
 
@@ -876,6 +879,7 @@ export function getColorForFullRedesign({
   return {
     color: buttonColor,
     shouldApplyRebrandedStyles: true,
+    isButtonColorABTestMerchant: false,
   };
 }
 
@@ -953,6 +957,7 @@ export function getButtonColor({
           fundingSource,
           style,
         }),
+        isButtonColorABTestMerchant: false,
       };
   }
 }
@@ -971,7 +976,8 @@ export function normalizeButtonStyle(
 
   props = props || getDefaultButtonPropsInput();
   const { fundingSource, buttonColor } = props;
-  const { color, shouldApplyRebrandedStyles } = buttonColor || {};
+  const { color, shouldApplyRebrandedStyles, isButtonColorABTestMerchant } =
+    buttonColor || {};
 
   const FUNDING_CONFIG = getFundingConfig();
   const fundingConfig =
@@ -1118,6 +1124,7 @@ export function normalizeButtonStyle(
     disableMaxHeight,
     borderRadius,
     shouldApplyRebrandedStyles,
+    isButtonColorABTestMerchant,
   };
 }
 

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

@@ -81,6 +81,7 @@ describe("determineRandomButtonColor", () => {
     expect(result).toEqual({
       shouldApplyRebrandedStyles: true,
       color: BUTTON_COLOR.REBRAND_BLUE,
+      isButtonColorABTestMerchant: true,
     });
   });
 
@@ -94,6 +95,7 @@ describe("determineRandomButtonColor", () => {
     expect(result).toEqual({
       shouldApplyRebrandedStyles: true,
       color: BUTTON_COLOR.REBRAND_DARKBLUE,
+      isButtonColorABTestMerchant: true,
     });
   });
 
@@ -107,6 +109,7 @@ describe("determineRandomButtonColor", () => {
     expect(result).toEqual({
       shouldApplyRebrandedStyles: false,
       color: BUTTON_COLOR.BLACK,
+      isButtonColorABTestMerchant: true,
     });
   });
 
@@ -120,6 +123,7 @@ describe("determineRandomButtonColor", () => {
     expect(result).toEqual({
       shouldApplyRebrandedStyles: false,
       color: BUTTON_COLOR.GOLD,
+      isButtonColorABTestMerchant: true,
     });
   });
 });
@@ -494,6 +498,7 @@ describe("getColorForFullRedesign", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_BLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -507,6 +512,7 @@ describe("getColorForFullRedesign", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_DARKBLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -520,6 +526,7 @@ describe("getColorForFullRedesign", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_BLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -533,6 +540,7 @@ describe("getColorForFullRedesign", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_DARKBLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -577,6 +585,7 @@ describe("getColorForFullRedesign", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_BLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -740,6 +749,7 @@ describe("getButtonColor", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.GOLD,
       shouldApplyRebrandedStyles: false,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -765,9 +775,36 @@ describe("getButtonColor", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.REBRAND_BLUE,
       shouldApplyRebrandedStyles: true,
+      isButtonColorABTestMerchant: false,
     });
   });
 
+  it("should return isButtonColorABTestMerchant === true for eligible AB Test Merchants and SDK configurations", () => {
+    const style = { color: BUTTON_COLOR.BLUE };
+    const storageState = { get: vi.fn(), set: vi.fn() };
+    const sessionID = "test-session";
+    const fundingSource = FUNDING.PAYPAL;
+    const experiment = {
+      isPaypalRebrandEnabled: true,
+      isPaypalRebrandABTestEnabled: true,
+    };
+
+    const result = getButtonColor({
+      experiment,
+      // $FlowFixMe
+      style,
+      sessionID,
+      storageState,
+      fundingSource,
+    });
+
+    expect(result).toEqual(
+      expect.objectContaining({
+        isButtonColorABTestMerchant: true,
+      })
+    );
+  });
+
   it("should return the default color for non-PayPal funding sources", () => {
     const style = { color: BUTTON_COLOR.BLUE };
     const storageState = { get: vi.fn(), set: vi.fn() };
@@ -790,6 +827,7 @@ describe("getButtonColor", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: false,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -814,6 +852,7 @@ describe("getButtonColor", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.WHITE,
       shouldApplyRebrandedStyles: false,
+      isButtonColorABTestMerchant: false,
     });
   });
 
@@ -825,6 +864,7 @@ describe("getButtonColor", () => {
     expect(result).toEqual({
       color: BUTTON_COLOR.GOLD,
       shouldApplyRebrandedStyles: false,
+      isButtonColorABTestMerchant: false,
     });
   });
 });

package/src/ui/buttons/script.jsx

@@ -115,6 +115,13 @@ export function getComponentScript(): () => void {
     }
 
     function calculateGap(optionalParent: HTMLElement): number {
+      const isTagline = optionalParent?.classList.contains(
+        "paypal-button-tagline" || false
+      );
+
+      if (isTagline) {
+        return 0;
+      }
       // Get the button element
       const parentElement = optionalParent.parentElement;