@paypal/checkout-components 5.0.349-alpha-4a3a827.0 → 5.0.349

package/package.json

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

package/src/constants/button.js

@@ -12,8 +12,6 @@ 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"),

package/src/funding/paypal/config.jsx

@@ -33,8 +33,6 @@ 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: {
@@ -43,8 +41,6 @@ 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.DARK_BLUE,
     },
 
     labelText: ({ content, label, period }) => {

package/src/funding/paypal/template.jsx

@@ -12,7 +12,6 @@ import {
   PPLogoInlineSVG,
   PayPalLogoExternalImage,
   PayPalLogoInlineSVG,
-  PayPalRebrandLogoInlineSVG,
   CreditLogoExternalImage,
   CreditLogoInlineSVG,
   CreditMarkExternalImage,
@@ -47,22 +46,12 @@ import {
 
 import css from "./style.scoped.scss";
 
-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} />
-    );
-  }
-
-  return <PayPalRebrandLogoInlineSVG logoColor={logoColor} />;
+export function Logo({ logoColor }: LogoOptions): ChildType {
+  return __WEB__ ? (
+    <PayPalLogoExternalImage logoColor={logoColor} />
+  ) : (
+    <PayPalLogoInlineSVG logoColor={logoColor} />
+  );
 }
 
 function getPersonalizationText({

package/src/types.js

@@ -62,8 +62,6 @@ export type Experiment = {|
   venmoWebEnabled?: boolean,
   // first render experiments
   venmoVaultWithoutPurchase?: boolean,
-  isPaypalRebrandEnabled?: boolean,
-  defaultBlueButtonColor?: string,
   venmoEnableWebOnNonNativeBrowser?: boolean,
 |};
 

package/src/ui/buttons/button.jsx

@@ -97,7 +97,6 @@ export function Button({
   vault,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
 
   const fundingConfig = getFundingConfig()[fundingSource];
 
@@ -127,9 +126,6 @@ export function Button({
     color = colors[0];
   }
 
-  if (isPaypalRebrandEnabled) {
-    color = defaultBlueButtonColor;
-  }
   // 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) {

package/src/ui/buttons/buttons.jsx

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

package/src/ui/buttons/props.js

@@ -648,8 +648,7 @@ export function normalizeButtonStyle(
   }
 
   props = props || getDefaultButtonPropsInput();
-  const { fundingSource, experiment } = props;
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+  const { fundingSource } = props;
 
   const FUNDING_CONFIG = getFundingConfig();
   const fundingConfig =
@@ -678,12 +677,6 @@ export function normalizeButtonStyle(
     borderRadius,
   } = style;
 
-  const isColorUnset = color === "" || color === undefined;
-
-  if (isPaypalRebrandEnabled && isColorUnset) {
-    color = defaultBlueButtonColor;
-  }
-
   // $FlowFixMe
   if (tagline === "false") {
     // $FlowFixMe

package/src/ui/buttons/style.jsx

@@ -4,8 +4,6 @@
 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";
 
@@ -13,14 +11,12 @@ 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({
@@ -29,7 +25,6 @@ export function Style({
     disableMaxWidth,
     disableMaxHeight,
     borderRadius,
-    experiment,
   });
 
   return <style nonce={nonce} innerHTML={css} />;

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

@@ -2,8 +2,6 @@
 
 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";
@@ -16,14 +14,12 @@ export function componentStyle({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
-  experiment: Experiment,
 |}): string {
   return `
         ${pageStyle}
@@ -36,7 +32,6 @@ export function componentStyle({
           disableMaxWidth,
           disableMaxHeight,
           borderRadius,
-          experiment,
         })}
     `;
 }

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

@@ -25,44 +25,6 @@ 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;

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

@@ -15,7 +15,6 @@ import {
 } from "../../../constants";
 import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from "../config";
 import { isBorderRadiusNumber } from "../util";
-import type { Experiment } from "../../../types";
 
 const BUTTON_MIN_ASPECT_RATIO = 2.2;
 const MIN_SPLIT_BUTTON_WIDTH = 300;
@@ -29,20 +28,13 @@ export function buttonResponsiveStyle({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment = {},
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
-  experiment: Experiment,
 |}): string {
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
-  const color = defaultBlueButtonColor;
-
-  const shouldApplyRebrandedStyles = isPaypalRebrandEnabled && color !== "gold";
-
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
       const style = BUTTON_SIZE_STYLE[size];
@@ -63,18 +55,12 @@ export function buttonResponsiveStyle({
 
       const textPercPercentage = shouldResizeLabel ? 32 : 36;
       const labelPercPercentage = shouldResizeLabel ? 32 : 35;
-      let smallerLabelHeight = max(
+      const smallerLabelHeight = max(
         roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
         12
       );
-      let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
-
-      if (shouldApplyRebrandedStyles) {
-        labelHeight = roundUp(perc(buttonHeight, 76));
-        // smallerLabelHeight gets triggered at widths < 320px
-        // We will need to investigate why the labels need to get significantly smaller at this breakpoint
-        smallerLabelHeight = labelHeight;
-      }
+
+      const labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
 
       const pillBorderRadius = Math.ceil(buttonHeight / 2);
 

package/src/zoid/buttons/component.jsx

@@ -108,11 +108,9 @@ export type ButtonsComponent = ZoidComponent<
   ButtonExtensions
 >;
 
-// $FlowIssue
 export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
   const queriedEligibleFunding = [];
 
-  // $FlowIssue
   return create({
     tag: "paypal-buttons",
     url: () => `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__BUTTONS__}`,