@paypal/checkout-components 5.0.386 → 5.0.388

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

@@ -3,9 +3,7 @@
 import { ENV } from "@paypal/sdk-constants/src";
 import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
-import { CLASS, ATTRIBUTE } from "../../../constants";
-
-import { HIDDEN, VISIBLE } from "./labels";
+import { CLASS } from "../../../constants";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -210,29 +208,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}
-        }
-    }
 `;

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

@@ -481,6 +481,29 @@ const generateDisableMaxHeightStyles = ({
     .join("\n");
 };
 
+const generateRebrandedDisableMaxHeightStyles = (): string => {
+  return Object.keys(BUTTON_REDESIGN_STYLE)
+    .map((redesign_size) => {
+      const { gap, fontSize, minHeight, maxHeight } =
+        getResponsiveRebrandedStyleVariables({
+          redesign_size,
+        });
+
+      return `
+        @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+          .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
+            gap: ${gap}px;
+          }
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+            font-size: ${fontSize}px;
+            position: relative;
+          }
+      `;
+    })
+    .join("\n");
+};
+
 const generateRebrandedButtonSizeStyles = ({
   height,
   disableMaxWidth,
@@ -506,6 +529,7 @@ const generateRebrandedButtonSizeStyles = ({
         maxHeight,
         minWidth,
         maxWidth,
+        minDualWidth,
       } = getResponsiveRebrandedStyleVariables({
         height,
         redesign_size,
@@ -520,7 +544,11 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON_ROW} {
-              ${disableMaxHeight ? "" : `height: ${height || defaultHeight}px;`}
+              ${
+                disableMaxHeight
+                  ? "height: 100%;"
+                  : `height: ${height || defaultHeight}px;`
+              }
               vertical-align: top;
               ${disableMaxHeight ? "" : `max-height: ${height || maxHeight}px;`}
           }
@@ -563,37 +591,86 @@ const generateRebrandedButtonSizeStyles = ({
               )}px;
           }
 
-          //  TO:DO no margin on last-child not getting applied
+          /*  TO:DO no margin on last-child not getting applied */
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
         CLASS.NUMBER
       }-${BUTTON_NUMBER.MULTIPLE}:last-child {
               margin-bottom: 0;
           }
-        }`;
+        }
+      
+        @media only screen and (min-width: ${minWidth}px) and (max-width: ${minDualWidth}px) {
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+            width: 100%;
+            margin-right: 0;
+          }
 
-      const disableMaxHeightStyles = `
-        @media only screen and (min-width: ${minWidth}px) {
-          .${CLASS.CONTAINER} {
-              min-width: ${minWidth}px;
-              ${disableMaxWidth ? "" : `max-width: ${maxWidth}px;`};
-              ${disableMaxHeight ? "height: 100%;" : ""};
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+            display: none;
+          }
+
+          .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+            display: none;
           }
         }
         
-        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
-          .${CLASS.BUTTON_ROW} {
-              height: ${height || minHeight}px;
-              vertical-align: top;
-              min-height: ${height || minHeight}px;
-              max-height: ${height || maxHeight}px;
+        @media only screen and (min-width: ${max(minWidth, minDualWidth)}px) {
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+            display: inline-block;
+            width: calc(${FIRST_BUTTON_PERC}% - ${perc(buttonHeight, 7)}px);
+            margin-right: ${perc(buttonHeight, 7) * 2}px;
           }
 
-          .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
-              margin: 0px 4vw;
-              box-sizing: border-box;
-              height: ${buttonHeight * 0.76}px;
+          .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+            display: inline-block;
+            width: calc(${100 - FIRST_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
           }
-        }`;
+
+          .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}.${
+        CLASS.WALLET
+      }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } {
+            width: calc(${WALLET_BUTTON_PERC}% - ${perc(buttonHeight, 7)}px);
+          }
+
+          .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}:not(.${
+        CLASS.WALLET
+      }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+        BUTTON_NUMBER.MULTIPLE
+      } {
+            width: calc(${100 - WALLET_BUTTON_PERC}% - ${perc(
+        buttonHeight,
+        7
+      )}px);
+          }
+
+          .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+            display: block;
+          }
+
+          .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
+        CLASS.NUMBER
+      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} .${CLASS.TEXT} {
+            display: block;
+          }
+        }
+       `;
 
       const heightBasedStyles = `
         @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
@@ -734,9 +811,8 @@ const generateRebrandedButtonSizeStyles = ({
               width: ${buttonHeight}px;
           }
         }`;
-      return disableMaxHeight
-        ? disableMaxHeightStyles + heightBasedStyles
-        : widthBasedStyles + heightBasedStyles;
+
+      return widthBasedStyles + heightBasedStyles;
     })
     .join("\n");
 };
@@ -780,6 +856,10 @@ export function buttonResponsiveStyle({
       })
     : "";
 
+  const disableMaxHeightRebrandedStyles =
+    disableMaxHeightStyles +
+    (disableMaxHeight ? generateRebrandedDisableMaxHeightStyles() : "");
+
   const baseStyles = `
     .${CLASS.BUTTON} {
         display: inline-block;
@@ -827,7 +907,7 @@ export function buttonResponsiveStyle({
     }`;
 
   const rebrandedStyles = shouldApplyRebrandedStyles
-    ? buttonRedesignSizeStyles
+    ? buttonRedesignSizeStyles + disableMaxHeightRebrandedStyles
     : buttonSizeStyles + disableMaxHeightStyles;
 
   return baseStyles + rebrandedStyles;

package/src/zoid/buttons/component.jsx

@@ -30,6 +30,7 @@ import {
   getAPIStageHost,
   getPayPalDomain,
   getUserIDToken,
+  getSDKIntegrationSource,
   getClientMetadataID,
   getAmount,
   getEnableFunding,
@@ -61,6 +62,7 @@ import {
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
   noop,
+  getUserAgent,
 } from "@krakenjs/belter/src";
 import {
   FUNDING,
@@ -89,6 +91,10 @@ import {
   type ButtonExtensions,
 } from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
+import {
+  supportsVenmoPopups,
+  isSupportedNativeVenmoBrowser,
+} from "../../funding/util";
 import { getPixelComponent } from "../pixel";
 import { CLASS } from "../../constants";
 import { PayPalAppSwitchOverlay } from "../../ui/overlay/paypal-app-switch/overlay";
@@ -251,6 +257,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         createSubscription,
         createVaultSetupToken,
         displayOnly,
+        userAgent,
       } = props;
 
       const flow = determineFlow({
@@ -294,6 +301,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           supportedNativeBrowser,
           experiment,
           displayOnly,
+          userAgent,
         })
       ) {
         return {
@@ -714,6 +722,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             createSubscription,
             createVaultSetupToken,
             displayOnly,
+            userAgent = getUserAgent(),
           } = props;
 
           const flow = determineFlow({
@@ -744,6 +753,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
               supportsPopups,
               supportedNativeBrowser,
               displayOnly,
+              userAgent,
             })
           ) {
             throw new Error(`${fundingSource} is not eligible`);
@@ -1266,13 +1276,32 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
 
       supportedNativeBrowser: {
         type: "boolean",
-        value: isSupportedNativeBrowser,
+        value: ({ props }) => {
+          if (props.fundingSource === FUNDING.VENMO) {
+            return isSupportedNativeVenmoBrowser(
+              props.experiment,
+              props.userAgent
+            );
+          }
+
+          return isSupportedNativeBrowser();
+        },
         queryParam: true,
       },
 
       supportsPopups: {
         type: "boolean",
-        value: () => userAgentSupportsPopups(),
+        value: ({ props }) => {
+          if (props.fundingSource === FUNDING.VENMO) {
+            return supportsVenmoPopups(
+              props.experiment,
+              userAgentSupportsPopups(),
+              props.userAgent
+            );
+          }
+
+          return userAgentSupportsPopups();
+        },
         queryParam: true,
       },
 
@@ -1299,6 +1328,14 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         bodyParam: getEnv() === ENV.LOCAL || getEnv() === ENV.STAGE,
       },
 
+      sdkSource: {
+        type: "string",
+        value: () => getSDKIntegrationSource(),
+        required: false,
+        queryParam: true,
+        bodyParam: true,
+      },
+
       vault: {
         type: "boolean",
         queryParam: true,
@@ -1316,6 +1353,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         queryParam: true,
       },
+
+      userAgent: {
+        type: "string",
+        required: false,
+        queryParam: true,
+        value: getUserAgent,
+      },
     },
 
     exports: {