@paypal/checkout-components 5.0.386 → 5.0.387

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/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;
 

package/src/ui/buttons/props.js

@@ -491,6 +491,7 @@ export type RenderButtonProps = {|
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
   message?: ButtonMessage,
   messageMarkup?: string,
+  userAgent: string,
 |};
 
 export type PrerenderDetails = {|
@@ -633,6 +634,7 @@ export type ButtonProps = {|
   message?: ButtonMessage,
   messageMarkup?: string,
   hideSubmitButtonForCardForm?: boolean,
+  userAgent: string,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -683,6 +685,7 @@ export type ButtonPropsInputs = {
   messageMarkup?: string | void,
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
   buttonColor: ButtonColor,
+  userAgent: string,
 };
 
 export const DEFAULT_STYLE = {
@@ -754,6 +757,7 @@ export function hasInvalidScriptOptionsForFullRedesign({
   fundingSource?: ?$Values<typeof FUNDING>,
 |}): boolean {
   const validFundingSourcesForRedesign = [
+    undefined,
     FUNDING.PAYPAL,
     FUNDING.VENMO,
     FUNDING.PAYLATER,
@@ -882,7 +886,7 @@ export function getColorForFullRedesign({
       style,
     });
 
-    buttonColor = rebrandColorMap[defaultButtonColor];
+    buttonColor = rebrandColorMap[defaultButtonColor] || defaultButtonColor;
   }
 
   return {
@@ -1262,6 +1266,7 @@ export function normalizeButtonProps(
     messageMarkup,
     renderedButtons,
     shopperSessionId,
+    userAgent,
   } = props;
 
   const { country, lang } = locale;
@@ -1315,6 +1320,7 @@ export function normalizeButtonProps(
         supportsPopups,
         supportedNativeBrowser,
         displayOnly,
+        userAgent,
       })
     ) {
       throw new Error(`Funding Source not eligible: ${fundingSource}`);
@@ -1366,5 +1372,6 @@ export function normalizeButtonProps(
     displayOnly,
     message,
     messageMarkup,
+    userAgent,
   };
 }

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

@@ -160,12 +160,6 @@ describe("hasInvalidScriptOptionsForFullRedesign", () => {
     });
   });
 
-  it("should return true when no funding source is provided", () => {
-    const result = hasInvalidScriptOptionsForFullRedesign({});
-
-    expect(result).toBe(true);
-  });
-
   it("should return true when funding source is null", () => {
     const result = hasInvalidScriptOptionsForFullRedesign({
       fundingSource: null,
@@ -681,7 +675,7 @@ describe("getButtonColorExperience", () => {
     expect(result).toBe("fullRebrand");
   });
 
-  it("should return legacy for smart stack (fundingSource is undefined)", () => {
+  it("should return fullRebrand for smart stack (fundingSource is undefined)", () => {
     const result = getButtonColorExperience({
       experiment: {
         isPaypalRebrandEnabled: true,
@@ -692,7 +686,7 @@ describe("getButtonColorExperience", () => {
       style: { color: BUTTON_COLOR.GOLD },
     });
 
-    expect(result).toBe("legacy");
+    expect(result).toBe("fullRebrand");
   });
 });
 

package/src/ui/buttons/script.jsx

@@ -199,10 +199,59 @@ export function getComponentScript(): () => void {
       }
     }
 
+    function toggleLogos() {
+      const LOGO_CLASS = {
+        PAYPAL_LOGO: ".paypal-logo-paypal-rebrand",
+        PP_LOGO: ".paypal-logo-pp-rebrand",
+        PAYPAL_BUTTON: ".paypal-button-rebrand",
+        BUTTON_LABEL: ".paypal-button-label-container",
+      };
+
+      const paylaterButtons = getElements(LOGO_CLASS.PAYPAL_BUTTON);
+
+      for (const button of paylaterButtons) {
+        const paypalLogo = button.querySelector(LOGO_CLASS.PAYPAL_LOGO);
+        const ppLogo = button.querySelector(LOGO_CLASS.PP_LOGO);
+        const buttonLabel = button.querySelector(LOGO_CLASS.BUTTON_LABEL);
+
+        if (!buttonLabel || !paypalLogo || !ppLogo) {
+          continue;
+        }
+
+        const buttonWidth = buttonLabel.offsetWidth;
+        const gap = calculateGap(buttonLabel);
+
+        // temporarily hide PayPal logos
+        hideElement(paypalLogo);
+        hideElement(ppLogo);
+
+        const allElements = getAllChildren(buttonLabel);
+        const textElements = allElements.filter(
+          (el) => !el.classList.contains("paypal-logo-pp-rebrand")
+        );
+
+        const totalWidth = getElementsTotalWidth(textElements) + gap;
+
+        if (totalWidth > buttonWidth) {
+          hideElement(paypalLogo);
+          showElement(ppLogo);
+        } else {
+          showElement(paypalLogo);
+          hideElement(ppLogo);
+        }
+      }
+    }
+
     const setDomReady = once(
       debounce(() => {
-        window.addEventListener("resize", toggleOptionals);
-        setTimeout(toggleOptionals);
+        window.addEventListener("resize", () => {
+          toggleOptionals();
+          toggleLogos();
+        });
+        setTimeout(() => {
+          toggleOptionals();
+          toggleLogos();
+        });
         if (document.body) {
           document.body.classList.add(CLASS.DOM_READY);
         }
@@ -211,10 +260,12 @@ export function getComponentScript(): () => void {
 
     const load = () => {
       toggleOptionals();
+      toggleLogos();
       setDomReady();
     };
 
     toggleOptionals();
+    toggleLogos();
     document.addEventListener("DOMContentLoaded", load);
     window.addEventListener("load", load);
     window.addEventListener("resize", load);

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

@@ -5,7 +5,7 @@ import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
 import { CLASS, ATTRIBUTE } from "../../../constants";
 
-import { HIDDEN, VISIBLE } from "./labels";
+import { HIDDEN } from "./labels";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -210,29 +210,4 @@ export const buttonRebrandStyle = `
         text-align: center;
         width: auto;
     }
-
-    /* Hide/show credit/paylater logos based on button width */
-    @media only screen and (min-width: 0px) and (max-width: 150px) {
-        [${ATTRIBUTE.FUNDING_SOURCE}="credit"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND},
-        [${ATTRIBUTE.FUNDING_SOURCE}="paylater"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND} {
-            ${HIDDEN}
-        }
-
-        [${ATTRIBUTE.FUNDING_SOURCE}="credit"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_PP_REBRAND},
-        [${ATTRIBUTE.FUNDING_SOURCE}="paylater"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_PP_REBRAND} {
-            ${VISIBLE}
-        }
-    }
-
-    @media only screen and (min-width: 150px) {
-        [${ATTRIBUTE.FUNDING_SOURCE}="credit"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND},
-        [${ATTRIBUTE.FUNDING_SOURCE}="paylater"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND} {
-            ${VISIBLE}
-        }
-
-        [${ATTRIBUTE.FUNDING_SOURCE}="credit"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_PP_REBRAND},
-        [${ATTRIBUTE.FUNDING_SOURCE}="paylater"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_PP_REBRAND} {
-            ${HIDDEN}
-        }
-    }
 `;