@paypal/checkout-components 5.0.386 → 5.0.387

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

@@ -61,6 +61,7 @@ import {
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
   noop,
+  getUserAgent,
 } from "@krakenjs/belter/src";
 import {
   FUNDING,
@@ -89,6 +90,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 +256,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         createSubscription,
         createVaultSetupToken,
         displayOnly,
+        userAgent,
       } = props;
 
       const flow = determineFlow({
@@ -294,6 +300,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           supportedNativeBrowser,
           experiment,
           displayOnly,
+          userAgent,
         })
       ) {
         return {
@@ -714,6 +721,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             createSubscription,
             createVaultSetupToken,
             displayOnly,
+            userAgent = getUserAgent(),
           } = props;
 
           const flow = determineFlow({
@@ -744,6 +752,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
               supportsPopups,
               supportedNativeBrowser,
               displayOnly,
+              userAgent,
             })
           ) {
             throw new Error(`${fundingSource} is not eligible`);
@@ -1266,13 +1275,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,
       },
 
@@ -1316,6 +1344,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         queryParam: true,
       },
+
+      userAgent: {
+        type: "string",
+        required: false,
+        queryParam: true,
+        value: getUserAgent,
+      },
     },
 
     exports: {