@paypal/checkout-components 5.0.363 → 5.0.365

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,23 +11,27 @@ 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 {
+    height,
+    disableMaxWidth,
+    disableMaxHeight,
+    borderRadius,
+    shouldApplyRebrandedStyles,
+  } = style;
   const css = componentStyle({
     height,
     fundingEligibility,
     disableMaxWidth,
     disableMaxHeight,
     borderRadius,
-    experiment,
+    shouldApplyRebrandedStyles,
   });
 
   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,14 @@ export function componentStyle({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment,
+  shouldApplyRebrandedStyles,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
 |}): string {
   return `
         ${pageStyle}
@@ -36,7 +34,7 @@ export function componentStyle({
           disableMaxWidth,
           disableMaxHeight,
           borderRadius,
-          experiment,
+          shouldApplyRebrandedStyles,
         })}
     `;
 }

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

@@ -15,9 +15,7 @@ export const buttonStyle = `
         margin: 0;
         background: 0;
         border: 0;
-        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         text-transform: none;
-        font-weight: 500;
         font-smoothing: antialiased;
         z-index: 0;
         font-size: 0;

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

@@ -25,39 +25,39 @@ 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 {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE} .menu-button {
         background: #60CDFF;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE}:hover {
-            background: #008CFF;
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:hover {
+            background: #54B4E0;
             overflow: inherit;
         }
     }
     
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE}:active {
-            background: #E3F7FF;
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:active {
+            background: #3DB5FF;
             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 {
+    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE} .menu-button {
         background: #002991;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE}:hover {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE}:hover {
             background: #0038BA;
             overflow: inherit;
         }
     }
     
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT_BLUE_DARK_BLUE}:active {
+        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE}:active {
             background: #0057D9;
             overflow: inherit;
         }

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

@@ -55,4 +55,19 @@ export const labelStyle = `
         0% { ${COMPRESSED} }
         100% { ${EXPANDED} }
     }
+
+    .${CLASS.BUTTON_LABEL} {
+        font-family: system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+        font-weight: 500;
+    }
+
+    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} {
+        font-family: PayPal Pro Book, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+    }
+
+    .${CLASS.BUTTON_REBRAND} div[data-funding-source=venmo] .${
+  CLASS.BUTTON_LABEL
+} {
+        font-family: Scto Grotesk A, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+    }
 `;

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

@@ -4,7 +4,7 @@ import { CLASS } from "../../../constants";
 
 export const pageStyle = `
     html, body {
-        font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+        font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         padding: 0;
         margin: 0;
         width: 100%;

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

@@ -19,7 +19,6 @@ import {
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
 } from "../config";
 import { isBorderRadiusNumber } from "../util";
-import type { Experiment } from "../../../types";
 
 import {
   getResponsiveStyleVariables,
@@ -35,14 +34,14 @@ const generateButtonSizeStyles = ({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment,
+  shouldApplyRebrandedStyles,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
 |}): string => {
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
@@ -58,7 +57,7 @@ const generateButtonSizeStyles = ({
       } = getResponsiveStyleVariables({
         height,
         fundingEligibility,
-        experiment,
+        shouldApplyRebrandedStyles,
         size,
       });
 
@@ -362,10 +361,10 @@ const generateButtonSizeStyles = ({
 
 const generateDisableMaxHeightStyles = ({
   fundingEligibility,
-  experiment,
+  shouldApplyRebrandedStyles,
 }: {|
   fundingEligibility: FundingEligibilityType,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
 |}): string => {
   return Object.keys(BUTTON_DISABLE_MAX_HEIGHT_STYLE)
     .map((disableMaxHeightSize) => {
@@ -382,7 +381,7 @@ const generateDisableMaxHeightStyles = ({
         gap,
       } = getDisableMaxHeightResponsiveStyleVariables({
         fundingEligibility,
-        experiment,
+        shouldApplyRebrandedStyles,
         disableMaxHeightSize,
       });
 
@@ -477,14 +476,14 @@ export function buttonResponsiveStyle({
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment = {},
+  shouldApplyRebrandedStyles,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
 |}): string {
   const buttonSizeStyles = generateButtonSizeStyles({
     height,
@@ -492,13 +491,13 @@ export function buttonResponsiveStyle({
     disableMaxWidth,
     disableMaxHeight,
     borderRadius,
-    experiment,
+    shouldApplyRebrandedStyles,
   });
 
   const disableMaxHeightStyles = disableMaxHeight
     ? generateDisableMaxHeightStyles({
         fundingEligibility,
-        experiment,
+        shouldApplyRebrandedStyles,
       })
     : "";
 

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

@@ -3,7 +3,6 @@
 import { max, perc, roundUp } from "@krakenjs/belter/src";
 import type { FundingEligibilityType } from "@paypal/sdk-constants/src";
 
-import type { Experiment } from "../../../types";
 import { BUTTON_DISABLE_MAX_HEIGHT_STYLE, BUTTON_SIZE_STYLE } from "../config";
 import {
   BUTTON_SIZE,
@@ -98,18 +97,14 @@ function getApplePayButtonHeight({ height }: {| height: number |}): number {
 export function getResponsiveStyleVariables({
   height,
   fundingEligibility,
-  experiment = {},
+  shouldApplyRebrandedStyles,
   size,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
   size: $Values<typeof BUTTON_SIZE>,
 |}): Object {
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
-  const shouldApplyRebrandedStyles =
-    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
-
   const style = BUTTON_SIZE_STYLE[size];
 
   const buttonHeight = height || style.defaultHeight;
@@ -163,17 +158,13 @@ export function getResponsiveStyleVariables({
 
 export function getDisableMaxHeightResponsiveStyleVariables({
   fundingEligibility,
-  experiment,
+  shouldApplyRebrandedStyles,
   disableMaxHeightSize,
 }: {|
   fundingEligibility: FundingEligibilityType,
-  experiment: Experiment,
+  shouldApplyRebrandedStyles: boolean,
   disableMaxHeightSize: $Values<typeof BUTTON_DISABLE_MAX_HEIGHT_SIZE>,
 |}): Object {
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
-  const shouldApplyRebrandedStyles =
-    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
-
   const disableHeightStyle =
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[disableMaxHeightSize];
   const buttonHeight = disableHeightStyle.defaultHeight;

package/src/ui/buttons/styles/styleUtils.test.js

@@ -3,7 +3,6 @@
 import { describe, expect, test } from "vitest";
 
 import {
-  BUTTON_COLOR,
   BUTTON_SIZE,
   BUTTON_DISABLE_MAX_HEIGHT_SIZE,
 } from "../../../constants/button";
@@ -313,7 +312,7 @@ const expectedLegacyDisableMaxHeightStylesXXXL = {
   gap: 7,
 };
 
-// expected shouldResizeLabel = true style variables for disable max hieght
+// expected shouldResizeLabel = true style variables for disable max height
 const expectedResizeLabelDisableMaxHeightStylesTiny = {
   APMHeight: 18,
   applePayHeight: 25,
@@ -572,10 +571,8 @@ const expectedRebrandDisableMaxHeightStylesXXXL = {
 };
 
 describe("test responsive style variables for legacy", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: false,
-    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
-  };
+  const shouldApplyRebrandedStyles = false;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -597,7 +594,7 @@ describe("test responsive style variables for legacy", () => {
     ({ input, expected }) => {
       expect(
         getResponsiveStyleVariables({
-          experiment,
+          shouldApplyRebrandedStyles,
           fundingEligibility,
           size: input,
         })
@@ -607,10 +604,8 @@ describe("test responsive style variables for legacy", () => {
 });
 
 describe("test responsive style variables when shouldResizeLabel == true", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: false,
-    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
-  };
+  const shouldApplyRebrandedStyles = false;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -659,7 +654,7 @@ describe("test responsive style variables when shouldResizeLabel == true", () =>
       expect(
         getResponsiveStyleVariables({
           fundingEligibility,
-          experiment,
+          shouldApplyRebrandedStyles,
           size: input,
         })
       ).toEqual(expected);
@@ -667,11 +662,9 @@ describe("test responsive style variables when shouldResizeLabel == true", () =>
   );
 });
 
-describe("test responsive style variables for rebrand light blue button", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: true,
-    defaultBlueButtonColor: BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
-  };
+describe("test responsive style variables for rebranded buttons", () => {
+  const shouldApplyRebrandedStyles = true;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -705,7 +698,7 @@ describe("test responsive style variables for rebrand light blue button", () =>
     ({ input, expected }) => {
       expect(
         getResponsiveStyleVariables({
-          experiment,
+          shouldApplyRebrandedStyles,
           fundingEligibility,
           size: input,
         })
@@ -715,10 +708,8 @@ describe("test responsive style variables for rebrand light blue button", () =>
 });
 
 describe("test responsive style variables for legacy disable max height", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: false,
-    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
-  };
+  const shouldApplyRebrandedStyles = false;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -769,7 +760,7 @@ describe("test responsive style variables for legacy disable max height", () =>
       expect(
         getDisableMaxHeightResponsiveStyleVariables({
           fundingEligibility,
-          experiment,
+          shouldApplyRebrandedStyles,
           disableMaxHeightSize: input,
         })
       ).toEqual(expected);
@@ -777,11 +768,9 @@ describe("test responsive style variables for legacy disable max height", () =>
   );
 });
 
-describe("test responsive style variables when shouldResizeLable == true for disable max height", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: false,
-    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
-  };
+describe("test responsive style variables when shouldResizeLabel == true for disable max height", () => {
+  const shouldApplyRebrandedStyles = false;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -846,7 +835,7 @@ describe("test responsive style variables when shouldResizeLable == true for dis
       expect(
         getDisableMaxHeightResponsiveStyleVariables({
           fundingEligibility,
-          experiment,
+          shouldApplyRebrandedStyles,
           disableMaxHeightSize: input,
         })
       ).toEqual(expected);
@@ -855,10 +844,8 @@ describe("test responsive style variables when shouldResizeLable == true for dis
 });
 
 describe("test rebrand responsive style variables for disable max height", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: true,
-    defaultBlueButtonColor: BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
-  };
+  const shouldApplyRebrandedStyles = true;
+
   const fundingEligibility = {
     paypal: {
       eligible: true,
@@ -909,7 +896,7 @@ describe("test rebrand responsive style variables for disable max height", () =>
       expect(
         getDisableMaxHeightResponsiveStyleVariables({
           fundingEligibility,
-          experiment,
+          shouldApplyRebrandedStyles,
           disableMaxHeightSize: input,
         })
       ).toEqual(expected);

package/src/ui/overlay/paypal-app-switch/style.jsx

@@ -91,7 +91,7 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .paypal-checkout-modal {
-            font-family: PayPalPlain-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-size: 14px;
             text-align: center;
 

package/src/ui/overlay/three-domain-secure/style.jsx

@@ -113,7 +113,7 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
         }
 
         #${uid} .paypal-checkout-modal {
-            font-family: "HelveticaNeue", "HelveticaNeue-Light", "Helvetica Neue Light", helvetica, arial, sans-serif;
+            font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
             font-size: 14px;
             text-align: center;
 

package/src/zoid/buttons/component.jsx

@@ -82,6 +82,7 @@ import {
 import {
   normalizeButtonStyle,
   normalizeButtonMessage,
+  getButtonColor,
   type ButtonProps,
   type ButtonExtensions,
 } from "../../ui/buttons/props";
@@ -1226,6 +1227,26 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         default: () => ({}),
       },
 
+      buttonColor: {
+        type: "object",
+        default: () => ({
+          shouldApplyRebrandedStyles: false,
+          color: "gold",
+        }),
+        queryParam: true,
+        decorate: ({ props }) => {
+          const { experiment, style, sessionID, fundingSource } = props;
+
+          return getButtonColor({
+            experiment,
+            style,
+            sessionID,
+            storageState,
+            fundingSource,
+          });
+        },
+      },
+
       supportedNativeBrowser: {
         type: "boolean",
         value: isSupportedNativeBrowser,

package/src/zoid/checkout/component.jsx

@@ -283,6 +283,19 @@ export function getCheckoutComponent(): CheckoutComponent {
           required: false,
         },
 
+        hasShippingCallback: {
+          type: "boolean",
+          required: false,
+          queryParam: true,
+          value: ({ props }) => {
+            return Boolean(
+              props.onShippingChange ||
+                props.onShippingAddressChange ||
+                props.onShippingOptionsChange
+            );
+          },
+        },
+
         clientMetadataID: {
           type: "string",
           required: false,

package/src/zoid/checkout/props.js

@@ -4,6 +4,12 @@ import type { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import type { CrossDomainWindowType } from "@krakenjs/cross-domain-utils/src";
 import { FUNDING, ENV, type LocaleType } from "@paypal/sdk-constants/src";
 
+import type {
+  OnShippingAddressChange,
+  OnShippingChange,
+  OnShippingOptionsChange,
+} from "../../ui/buttons/props";
+
 export type OnApproveData = {|
   orderID: string,
   payerID: string,
@@ -33,6 +39,10 @@ export type CheckoutPropsType = {|
   env: $Values<typeof ENV>,
   stage?: string,
   stageUrl?: string,
+  onShippingChange: ?OnShippingChange,
+  onShippingAddressChange: ?OnShippingAddressChange,
+  onShippingOptionsChange: ?OnShippingOptionsChange,
+  hasShippingCallback: boolean,
   locale: LocaleType,
   style: {||},
   nonce: string,