Button Color A/B Test (#2469)

Author: nikrom17

Diff for: package.json

@@ -85,8 +85,10 @@
     "conventional-changelog-cli": "^2.0.34",
     "cross-env": "^7.0.3",
     "flow-bin": "0.155.0",
+    "flow-remove-types": "2.246.0",
     "flow-typed": "^3.8.0",
     "fs-extra": "^10.0.0",
+    "hermes-parser": "0.23.1",
     "husky": "^7.0.4",
     "imagemagick": "^0.1.3",
     "imgur": "^0.3.1",
@@ -105,9 +107,7 @@
     "puppeteer": "^1.20.0",
     "serve": "^14.0.0",
     "vite": "^3.2.4",
-    "vitest": "^1.3.1",
-    "flow-remove-types": "2.246.0",
-    "hermes-parser": "0.23.1"
+    "vitest": "^1.3.1"
   },
   "dependencies": {
     "@krakenjs/beaver-logger": "^5.7.0",
@@ -122,7 +122,7 @@
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.194",
     "@paypal/sdk-constants": "^1.0.146",
-    "@paypal/sdk-logos": "^2.2.6"
+    "@paypal/sdk-logos": "^2.2.8"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

Diff for: src/constants/button.js

@@ -12,6 +12,8 @@ export const BUTTON_LABEL = {
 
 export const BUTTON_COLOR = {
   DEFAULT: ("default": "default"),
+  DEFAULT_BLUE_LIGHT_BLUE: ("defaultBlue_lightBlue": "defaultBlue_lightBlue"),
+  DEFAULT_BLUE_DARK_BLUE: ("defaultBlue_darkBlue": "defaultBlue_darkBlue"),
   GOLD: ("gold": "gold"),
   BLUE: ("blue": "blue"),
   SILVER: ("silver": "silver"),

Diff for: src/funding/paypal/config.jsx

@@ -34,6 +34,8 @@ export function getPayPalConfig(): FundingSourceConfig {
       BUTTON_COLOR.SILVER,
       BUTTON_COLOR.BLACK,
       BUTTON_COLOR.WHITE,
+      BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
+      BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE,
     ],
 
     logoColors: {
@@ -42,6 +44,8 @@ export function getPayPalConfig(): FundingSourceConfig {
       [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
+      [BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE]: LOGO_COLOR.BLUE,
     },
 
     labelText: ({ content, label, period }) => {

Diff for: src/funding/paypal/template.jsx

@@ -11,7 +11,9 @@ import {
   PPLogoExternalImage,
   PPLogoInlineSVG,
   PayPalLogoExternalImage,
+  PayPalRebrandLogoExternalImage,
   PayPalLogoInlineSVG,
+  PayPalRebrandLogoInlineSVG,
   CreditLogoExternalImage,
   CreditLogoInlineSVG,
   CreditMarkExternalImage,
@@ -46,11 +48,29 @@ import {
 
 import css from "./style.scoped.scss";
 
-export function Logo({ logoColor }: LogoOptions): ChildType {
+export function Logo({ logoColor, experiment }: LogoOptions): ChildType {
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+
+  if (defaultBlueButtonColor === "gold" || !isPaypalRebrandEnabled) {
+    // csnw globals.js
+    return __WEB__ ? (
+      // helps reduce bundle size by fetching logos
+      <PayPalLogoExternalImage logoColor={logoColor} />
+    ) : (
+      // cdnx/sdk-logo/xxxx/paypal-gold.svg
+      // use for server side rendering
+      <PayPalLogoInlineSVG logoColor={logoColor} />
+    );
+  }
+
+  // csnw globals.js
   return __WEB__ ? (
-    <PayPalLogoExternalImage logoColor={logoColor} />
+    // helps reduce bundle size by fetching logos
+    <PayPalRebrandLogoExternalImage logoColor={logoColor} />
   ) : (
-    <PayPalLogoInlineSVG logoColor={logoColor} />
+    // cdnx/sdk-logo/xxxx/paypal-gold.svg
+    // use for server side rendering
+    <PayPalRebrandLogoInlineSVG logoColor={logoColor} />
   );
 }
 

Diff for: src/types.js

@@ -2,6 +2,8 @@
 
 import { CARD, WALLET_INSTRUMENT } from "@paypal/sdk-constants/src";
 
+import { BUTTON_COLOR } from "./constants";
+
 export type SecondaryInstruments = $ReadOnlyArray<{|
   type: string,
   label: string,
@@ -62,6 +64,8 @@ export type Experiment = {|
   venmoWebEnabled?: boolean,
   // first render experiments
   venmoVaultWithoutPurchase?: boolean,
+  isPaypalRebrandEnabled?: boolean,
+  defaultBlueButtonColor?: $Values<typeof BUTTON_COLOR>,
   venmoEnableWebOnNonNativeBrowser?: boolean,
 |};
 

Diff for: src/ui/buttons/button.jsx

@@ -97,6 +97,7 @@ export function Button({
   vault,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
 
   const fundingConfig = getFundingConfig()[fundingSource];
 
@@ -126,6 +127,12 @@ export function Button({
     color = colors[0];
   }
 
+  if (isPaypalRebrandEnabled) {
+    const shouldRenderButtonColorControl = defaultBlueButtonColor === "gold";
+    const experimentButtonColor = defaultBlueButtonColor || "gold";
+
+    color = shouldRenderButtonColorControl ? color : experimentButtonColor;
+  }
   // The secondary colors are used to render the smart stack (multiple buttons)
   // they keep track of the mapping of the color style prop to the
   if (multiple && i > 0) {

Diff for: src/ui/buttons/buttons.jsx

@@ -251,6 +251,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
       ].join(" ")}
     >
       <Style
+        experiment={experiment}
         nonce={nonce}
         style={style}
         fundingEligibility={fundingEligibility}

Diff for: src/ui/buttons/props.js

@@ -648,7 +648,8 @@ export function normalizeButtonStyle(
   }
 
   props = props || getDefaultButtonPropsInput();
-  const { fundingSource } = props;
+  const { fundingSource, experiment } = props;
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment || {};
 
   const FUNDING_CONFIG = getFundingConfig();
   const fundingConfig =
@@ -677,6 +678,14 @@ export function normalizeButtonStyle(
     borderRadius,
   } = style;
 
+  // This sets the button color so it gets passed to the query string parameter style.color to scnw
+  if (isPaypalRebrandEnabled) {
+    const shouldRenderButtonColorControl = defaultBlueButtonColor === "gold";
+    const experimentButtonColor = defaultBlueButtonColor || "gold";
+
+    color = shouldRenderButtonColorControl ? color : experimentButtonColor;
+  }
+
   // $FlowFixMe
   if (tagline === "false") {
     // $FlowFixMe

Diff for: src/ui/buttons/style.jsx

@@ -4,19 +4,23 @@
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
 import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
+import type { Experiment } from "../../types";
+
 import { type ButtonStyle } from "./props";
 import { componentStyle } from "./styles";
 
 type StyleProps = {|
   style: ButtonStyle,
   nonce: string,
   fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
 |};
 
 export function Style({
   style,
   nonce,
   fundingEligibility,
+  experiment,
 }: StyleProps): ElementNode {
   const { height, disableMaxWidth, disableMaxHeight, borderRadius } = style;
   const css = componentStyle({
@@ -25,6 +29,7 @@ export function Style({
     disableMaxWidth,
     disableMaxHeight,
     borderRadius,
+    experiment,
   });
 
   return <style nonce={nonce} innerHTML={css} />;

Diff for: src/ui/buttons/styles/base.js

@@ -2,6 +2,8 @@
 
 import { type FundingEligibilityType } from "@paypal/sdk-constants/src";
 
+import type { Experiment } from "../../../types";
+
 import { pageStyle } from "./page";
 import { buttonStyle } from "./button";
 import { labelStyle } from "./labels";
@@ -14,12 +16,14 @@ export function componentStyle({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
+  experiment,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
+  experiment: Experiment,
 |}): string {
   return `
         ${pageStyle}
@@ -32,6 +36,7 @@ export function componentStyle({
           disableMaxWidth,
           disableMaxHeight,
           borderRadius,
+          experiment,
         })}
     `;
 }

Diff for: src/ui/buttons/styles/color.js

@@ -25,6 +25,44 @@ export const buttonColorStyle = `
         border-top-color: rgba(255, 255, 255, .85);
     }
 
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE} .menu-button {
+        background: #60CDFF;
+    }
+
+    @media (hover:hover) {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE}:hover {
+            background: #008CFF;
+            overflow: inherit;
+        }
+    }
+    
+    @media (hover:hover) {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE}:active {
+            background: #E3F7FF;
+            overflow: inherit;
+        }
+    }
+
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE} .menu-button {
+        background: #002991;
+    }
+
+    @media (hover:hover) {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE}:hover {
+            background: #0038BA;
+            overflow: inherit;
+        }
+    }
+    
+    @media (hover:hover) {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE}:active {
+            background: #0057D9;
+            overflow: inherit;
+        }
+    }
+
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD},
     .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.GOLD} .menu-button {
         background: #ffc439;