@paypal/checkout-components 5.0.416 → 5.0.420

package/src/funding/venmo/config.jsx

@@ -10,7 +10,12 @@ import {
 } from "@paypal/sdk-logos/src";
 import { DISPLAY_ONLY_VALUES, PLATFORM } from "@paypal/sdk-constants/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants";
+import {
+  BUTTON_COLOR,
+  BUTTON_LAYOUT,
+  BUTTON_FLOW,
+  DEFAULT,
+} from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
 import { WalletLabel, Label } from "./template";
@@ -87,9 +92,6 @@ export function getVenmoConfig(): FundingSourceConfig {
       BUTTON_COLOR.SILVER,
       BUTTON_COLOR.BLACK,
       BUTTON_COLOR.WHITE,
-      BUTTON_COLOR.REBRAND_BLACK,
-      BUTTON_COLOR.REBRAND_BLUE,
-      BUTTON_COLOR.REBRAND_WHITE,
     ],
 
     logoColors: {
@@ -97,22 +99,30 @@ export function getVenmoConfig(): FundingSourceConfig {
       [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLUE,
       [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
-      [BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLUE,
-      [BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
-      [BUTTON_COLOR.REBRAND_BLUE]: LOGO_COLOR.WHITE,
     },
-    textColors: {
-      ...DEFAULT_FUNDING_CONFIG.textColors,
-      [BUTTON_COLOR.REBRAND_BLUE]: BUTTON_COLOR.WHITE,
+
+    logoColorsRebrand: {
+      [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
+    },
+
+    textColorsRebrand: {
+      ...DEFAULT_FUNDING_CONFIG.textColorsRebrand,
+      [BUTTON_COLOR.BLUE]: BUTTON_COLOR.WHITE,
     },
 
     secondaryColors: {
       ...DEFAULT_FUNDING_CONFIG.secondaryColors,
-
       [BUTTON_COLOR.GOLD]: BUTTON_COLOR.BLUE,
       [BUTTON_COLOR.BLUE]: BUTTON_COLOR.SILVER,
       [BUTTON_COLOR.SILVER]: BUTTON_COLOR.BLUE,
-      [BUTTON_COLOR.REBRAND_BLUE]: BUTTON_COLOR.REBRAND_BLUE,
+    },
+
+    secondaryColorsRebrand: {
+      ...DEFAULT_FUNDING_CONFIG.secondaryColorsRebrand,
+      [DEFAULT]: BUTTON_COLOR.BLUE,
+      [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
     },
   };
 }

package/src/ui/buttons/button.jsx

@@ -31,7 +31,7 @@ import {
   TEXT_COLOR,
   BUTTON_FLOW,
 } from "../../constants";
-import { getFundingConfig } from "../../funding";
+import { getFundingConfig, getFundingSourceColors } from "../../funding";
 
 import type {
   ButtonStyle,
@@ -106,9 +106,6 @@ export function Button({
     throw new Error(`Can not find funding config for ${fundingSource}`);
   }
 
-  const colors = fundingConfig.colors;
-  const secondaryColors = fundingConfig.secondaryColors || {};
-
   let {
     color,
     period,
@@ -117,9 +114,13 @@ export function Button({
     shouldApplyPayNowOrLaterLabel,
   } = style;
 
+  const { colors, logoColors, secondaryColors, textColors } =
+    getFundingSourceColors({ fundingConfig, shouldApplyRebrandedStyles });
+  const { logoColorsPP } = fundingConfig;
+
   // if no color option is passed in via style props
   if (color === "" || typeof color === "undefined") {
-    // if a single button is rendered, we set color to first option in the fundingSource config
+    // if a single button is rendered, we set color to first option in the valid color set
     color = colors[0];
 
     // if multiple buttons are being rendered (smart stack), we set default color as gold > first
@@ -137,20 +138,15 @@ export function Button({
   // 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) {
-    if (
-      secondaryColors[color] &&
-      colors.indexOf(secondaryColors[color] !== -1)
-    ) {
+    if (secondaryColors[color] && colors.includes(secondaryColors[color])) {
       color = secondaryColors[color];
-    } else if (colors.indexOf(secondaryColors[BUTTON_COLOR.DEFAULT]) !== -1) {
+    } else if (colors.includes(secondaryColors[BUTTON_COLOR.DEFAULT])) {
       color = secondaryColors[BUTTON_COLOR.DEFAULT];
     } else {
       color = colors[0];
     }
   }
 
-  const { logoColors, logoColorsPP, textColors } = fundingConfig;
-
   const logoColor =
     logoColors[color] || logoColors[LOGO_COLOR.DEFAULT] || LOGO_COLOR.DEFAULT;
   const logoColorPP = logoColorsPP
@@ -289,6 +285,7 @@ export function Button({
     <div
       class={[
         CLASS.BUTTON_ROW,
+        `${shouldApplyRebrandedStyles ? CLASS.BUTTON_REBRAND : ""}`,
         `${CLASS.NUMBER}-${i}`,
         `${CLASS.LAYOUT}-${layout}`,
         `${CLASS.NUMBER}-${

package/src/ui/buttons/poweredBy.jsx

@@ -5,7 +5,7 @@ import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 import { type LocaleType } from "@paypal/sdk-constants/src";
 import { LOGO_COLOR, LOGO_CLASS } from "@paypal/sdk-logos/src";
 
-import { CLASS, BUTTON_COLOR_REBRAND } from "../../constants";
+import { CLASS, BUTTON_COLOR } from "../../constants";
 import { Text } from "../text";
 
 import { buttonContent } from "./content";
@@ -50,15 +50,15 @@ function getPoweredByConfig(): {|
 |} {
   return {
     logoColors: {
-      [BUTTON_COLOR_REBRAND.REBRAND_BLUE]: LOGO_COLOR.BLACK,
-      [BUTTON_COLOR_REBRAND.REBRAND_BLACK]: LOGO_COLOR.BLACK,
-      [BUTTON_COLOR_REBRAND.REBRAND_WHITE]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
     },
 
     textColors: {
-      [BUTTON_COLOR_REBRAND.REBRAND_BLUE]: "#000000",
-      [BUTTON_COLOR_REBRAND.REBRAND_BLACK]: "#000000",
-      [BUTTON_COLOR_REBRAND.REBRAND_WHITE]: "#000000",
+      [BUTTON_COLOR.BLUE]: "#000000",
+      [BUTTON_COLOR.BLACK]: "#000000",
+      [BUTTON_COLOR.WHITE]: "#000000",
     },
   };
 }
@@ -66,7 +66,7 @@ function getPoweredByConfig(): {|
 export function PoweredByPayPal({
   locale: { lang },
   nonce,
-  buttonColor = BUTTON_COLOR_REBRAND.REBRAND_BLUE,
+  buttonColor = BUTTON_COLOR.BLUE,
   shouldApplyRebrandedStyles = false,
 }: PoweredByPayPalProps): ChildType {
   const { PoweredBy } = buttonContent[lang];

package/src/ui/buttons/props.js

@@ -26,6 +26,7 @@ import {
   CARD,
   COMPONENTS,
   DISPLAY_ONLY_VALUES,
+  type BrandVersion,
 } from "@paypal/sdk-constants/src";
 import { type CrossDomainWindowType } from "@krakenjs/cross-domain-utils/src";
 import { LOGO_COLOR } from "@paypal/sdk-logos/src";
@@ -36,7 +37,6 @@ import type { ContentType, Wallet, Experiment } from "../../types";
 import {
   BUTTON_LABEL,
   BUTTON_COLOR,
-  BUTTON_COLOR_REBRAND,
   BUTTON_LAYOUT,
   BUTTON_SHAPE,
   BUTTON_SIZE,
@@ -47,7 +47,11 @@ import {
   MESSAGE_POSITION,
   MESSAGE_ALIGN,
 } from "../../constants";
-import { getFundingConfig, isFundingEligible } from "../../funding";
+import {
+  getFundingConfig,
+  isFundingEligible,
+  getFundingSourceColors,
+} from "../../funding";
 import { componentContent } from "../../funding/content";
 import type { StateGetSet } from "../../lib/session";
 
@@ -334,6 +338,8 @@ export type ButtonStyle = {|
   isButtonColorABTestMerchant: boolean,
   isPayNowOrLaterLabelEligible: boolean,
   shouldApplyPayNowOrLaterLabel: boolean,
+  requestedButtonColor?: $Values<typeof BUTTON_COLOR>,
+  brandVersion: BrandVersion,
 |};
 
 export type ButtonStyleInputs = {|
@@ -527,6 +533,7 @@ type ButtonColor = {|
   shouldApplyRebrandedStyles: boolean,
   color: $Values<typeof BUTTON_COLOR>,
   isButtonColorABTestMerchant: boolean,
+  brandVersion: BrandVersion,
 |};
 
 type ColorABTestStorage = {|
@@ -561,6 +568,7 @@ type GetColorForFullRedesignArgs = {|
 type GetDefaultColorForFundingSourceArgs = {|
   fundingSource: ?$Values<typeof FUNDING>,
   style: ?ButtonStyle,
+  shouldApplyRebrandedStyles: boolean,
 |};
 
 type GetButtonColorExperienceArgs = {|
@@ -653,6 +661,7 @@ export type ButtonProps = {|
   messageMarkup?: string,
   hideSubmitButtonForCardForm?: boolean,
   userAgent: string,
+  buttonColor: ButtonColor,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -782,6 +791,14 @@ export function getBNPLLabelForABTest({
   return shouldApplyPayNowOrLaterLabel;
 }
 
+export function getBrandVersion({
+  shouldApplyRebrandedStyles,
+}: {|
+  shouldApplyRebrandedStyles: boolean,
+|}): BrandVersion {
+  return shouldApplyRebrandedStyles ? "v2" : "v1";
+}
+
 export function determineRandomButtonColor({
   buttonColorInput,
 }: {|
@@ -790,15 +807,11 @@ export function determineRandomButtonColor({
   let shouldApplyRebrandedStyles;
   let buttonColor;
 
-  const randomButtonColor = Math.floor(Math.random() * 3);
+  const randomButtonColor = Math.floor(Math.random() * 2);
 
   switch (randomButtonColor) {
     case 0:
-      buttonColor = BUTTON_COLOR.REBRAND_BLUE;
-      shouldApplyRebrandedStyles = true;
-      break;
-    case 1:
-      buttonColor = BUTTON_COLOR.REBRAND_DARKBLUE;
+      buttonColor = BUTTON_COLOR.BLUE;
       shouldApplyRebrandedStyles = true;
       break;
     default:
@@ -812,6 +825,7 @@ export function determineRandomButtonColor({
     shouldApplyRebrandedStyles,
     color: buttonColor,
     isButtonColorABTestMerchant: true,
+    brandVersion: getBrandVersion({ shouldApplyRebrandedStyles }),
   };
 }
 
@@ -820,29 +834,28 @@ export function throwErrorForInvalidButtonColor({
   fundingSourceColors,
   invalidButtonColor,
 }: ThrowErrorForInvalidButtonColorArgs) {
-  const rebrandedColors = Object.values(BUTTON_COLOR_REBRAND);
-  const filteredColors = fundingSourceColors.filter(
-    (fundingConfigColor) => !rebrandedColors.includes(fundingConfigColor)
-  );
-
   // Throw an error if color specified by merchant is not valid for the funding source
   throw new Error(
     `Unexpected style.color for ${
       fundingSource || FUNDING.PAYPAL
-    } button: ${invalidButtonColor}, expected ${filteredColors.join(", ")}`
+    } button: ${invalidButtonColor}, expected ${fundingSourceColors.join(", ")}`
   );
 }
 
 export function getDefaultColorForFundingSource({
   fundingSource,
   style,
+  shouldApplyRebrandedStyles,
 }: GetDefaultColorForFundingSourceArgs): $Values<typeof BUTTON_COLOR> {
   // $FlowFixMe this is handled if the fundingSource is undefined
   const fundingSourceConfig = getFundingConfig()[fundingSource];
   const { color: buttonColorInput } = style || {};
 
   if (fundingSourceConfig) {
-    const { colors } = fundingSourceConfig;
+    const { colors } = getFundingSourceColors({
+      fundingConfig: fundingSourceConfig,
+      shouldApplyRebrandedStyles,
+    });
 
     if (!buttonColorInput) {
       // return the default color for the funding source
@@ -896,20 +909,13 @@ export function getColorForFullRedesign({
   fundingSource,
 }: GetColorForFullRedesignArgs): ButtonColor {
   const rebrandColorMap = {
-    [BUTTON_COLOR.BLUE]: BUTTON_COLOR.REBRAND_BLUE,
-    [BUTTON_COLOR.DARKBLUE]: BUTTON_COLOR.REBRAND_BLUE,
-    [BUTTON_COLOR.GOLD]: BUTTON_COLOR.REBRAND_BLUE,
-    [BUTTON_COLOR.BLACK]: BUTTON_COLOR.REBRAND_BLACK,
-    [BUTTON_COLOR.WHITE]: BUTTON_COLOR.REBRAND_WHITE,
-    [BUTTON_COLOR.SILVER]: BUTTON_COLOR.REBRAND_WHITE,
+    [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
+    [BUTTON_COLOR.DARKBLUE]: BUTTON_COLOR.BLUE,
+    [BUTTON_COLOR.GOLD]: BUTTON_COLOR.BLUE,
+    [BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
+    [BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
+    [BUTTON_COLOR.SILVER]: BUTTON_COLOR.WHITE,
     [BUTTON_COLOR.DEFAULT]: BUTTON_COLOR.DEFAULT,
-
-    // normalizeButtonStyle gets called multiple times and
-    // it can be called after color is already be mapped to rebranded style
-    [BUTTON_COLOR.REBRAND_BLUE]: BUTTON_COLOR.REBRAND_BLUE,
-    [BUTTON_COLOR.REBRAND_DARKBLUE]: BUTTON_COLOR.REBRAND_DARKBLUE,
-    [BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.REBRAND_BLACK,
-    [BUTTON_COLOR.REBRAND_WHITE]: BUTTON_COLOR.REBRAND_WHITE,
   };
 
   // if color is invalid, buttonColor will be undefined
@@ -924,6 +930,7 @@ export function getColorForFullRedesign({
     const defaultButtonColor = getDefaultColorForFundingSource({
       fundingSource,
       style,
+      shouldApplyRebrandedStyles: true,
     });
 
     buttonColor = rebrandColorMap[defaultButtonColor] || defaultButtonColor;
@@ -933,6 +940,7 @@ export function getColorForFullRedesign({
     color: buttonColor,
     shouldApplyRebrandedStyles: true,
     isButtonColorABTestMerchant: false,
+    brandVersion: getBrandVersion({ shouldApplyRebrandedStyles: true }),
   };
 }
 
@@ -991,8 +999,10 @@ export function getButtonColor({
         color: getDefaultColorForFundingSource({
           fundingSource,
           style,
+          shouldApplyRebrandedStyles: false,
         }),
         isButtonColorABTestMerchant: false,
+        brandVersion: getBrandVersion({ shouldApplyRebrandedStyles: false }),
       };
   }
 }
@@ -1075,8 +1085,12 @@ export function normalizeButtonStyle(
 
   props = props || getDefaultButtonPropsInput();
   const { fundingSource, buttonColor } = props;
-  const { color, shouldApplyRebrandedStyles, isButtonColorABTestMerchant } =
-    buttonColor || {};
+  const {
+    color,
+    shouldApplyRebrandedStyles,
+    isButtonColorABTestMerchant,
+    brandVersion,
+  } = buttonColor || {};
 
   const FUNDING_CONFIG = getFundingConfig();
   const fundingConfig =
@@ -1102,10 +1116,9 @@ export function normalizeButtonStyle(
     disableMaxWidth,
     disableMaxHeight,
     borderRadius,
+    color: requestedButtonColor,
   } = style;
 
-  const rebrandedColors = Object.values(BUTTON_COLOR_REBRAND);
-
   // $FlowFixMe
   if (tagline === "false") {
     // $FlowFixMe
@@ -1120,16 +1133,16 @@ export function normalizeButtonStyle(
     throw new Error(`Invalid label: ${label}`);
   }
 
-  if (color && fundingConfig.colors.indexOf(color) === -1) {
-    // We don't want to include rebranded colors in the error message
-    const filteredColors = fundingConfig.colors.filter(
-      (fundingConfigColor) => !rebrandedColors.includes(fundingConfigColor)
-    );
+  const { colors: validColors } = getFundingSourceColors({
+    fundingConfig,
+    shouldApplyRebrandedStyles,
+  });
 
+  if (color && validColors.indexOf(color) === -1) {
     throw new Error(
-      `Unexpected style.color for ${
-        fundingSource || FUNDING.PAYPAL
-      } button: ${color}, expected ${filteredColors.join(", ")}`
+      `Unexpected style.color for ${fundingSource || FUNDING.PAYPAL} button: ${
+        requestedButtonColor || color
+      }, expected ${validColors.join(", ")}`
     );
   }
 
@@ -1229,6 +1242,8 @@ export function normalizeButtonStyle(
     isButtonColorABTestMerchant,
     isPayNowOrLaterLabelEligible,
     shouldApplyPayNowOrLaterLabel,
+    requestedButtonColor,
+    brandVersion,
   };
 }