@paypal/checkout-components 5.0.199 → 5.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.199",
+    "version": "5.0.201",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "scripts": {

package/src/constants/class.js

@@ -5,6 +5,7 @@ export const CLASS = {
     BUTTON_ROW:   ('paypal-button-row' : 'paypal-button-row'),
     BUTTON:       ('paypal-button' : 'paypal-button'),
     BUTTON_LABEL: ('paypal-button-label-container' : 'paypal-button-label-container'),
+    LOGO_PP:      ('paypal-logo-pp' : 'paypal-logo-pp'),
 
     LABEL:       ('paypal-button-label' : 'paypal-button-label'),
     COLOR:       ('paypal-button-color' : 'paypal-button-color'),

package/src/funding/common.jsx

@@ -118,7 +118,7 @@ export type FundingSourceConfig = {|
     secondaryVaultColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof BUTTON_COLOR> },
     logoColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof LOGO_COLOR> },
     shapes : $ReadOnlyArray<$Values<typeof BUTTON_SHAPE>>,
-    labelText? : string | (({| content : ?ContentType |}) => string),
+    labelText? : string | (({| content : ?ContentType, fundingEligibility : ?FundingEligibilityType |}) => string),
     showWalletMenu : ({| instrument : WalletInstrument |}) => boolean
 |};
 

package/src/funding/paylater/config.jsx

@@ -1,6 +1,7 @@
 /* @flow */
 /** @jsx node */
 
+import type { FundingEligibilityType } from '@paypal/sdk-client/src';
 import { FUNDING } from '@paypal/sdk-constants/src';
 import { node, Style } from 'jsx-pragmatic/src';
 import { PPLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
@@ -11,6 +12,46 @@ import { Text, Space } from '../../ui/text';
 
 import css from './style.scoped.scss';
 
+function getLabelText(fundingEligibility : FundingEligibilityType) : ?string {
+    const { paylater } = fundingEligibility;
+
+    let labelText;
+
+    if (
+        paylater?.products?.paylater?.eligible &&
+        paylater?.products?.paylater?.variant === 'DE'
+    ) {
+        labelText = 'Später Bezahlen';
+    }
+
+    if (
+        paylater?.products?.payIn3?.eligible &&
+        paylater?.products?.payIn3?.variant === 'ES'
+    ) {
+        labelText = 'Paga en 3 plazos';
+    }
+
+    if (
+        paylater?.products?.payIn3?.eligible &&
+        paylater?.products?.payIn3?.variant === 'IT'
+    ) {
+        labelText = 'Paga in 3 rate';
+    }
+
+    if (paylater?.products?.payIn4?.eligible) {
+        labelText = 'Pay in 4';
+    }
+
+    if (
+        paylater?.products?.payIn4?.eligible &&
+        paylater?.products?.payIn4?.variant === 'FR'
+    ) {
+        labelText = '4X PayPal';
+    }
+
+    return labelText;
+}
+
 export function getPaylaterConfig() : FundingSourceConfig {
     return {
         ...DEFAULT_FUNDING_CONFIG,
@@ -34,47 +75,11 @@ export function getPaylaterConfig() : FundingSourceConfig {
         Label: ({ logo }) => logo,
 
         Logo: ({ logoColor, nonce, fundingEligibility }) => {
-            const { paylater } = fundingEligibility;
-
-            let label = <Text>Pay Later</Text>;
-
-            if (
-                paylater?.products?.paylater?.eligible &&
-                paylater?.products?.paylater?.variant === 'DE'
-            ) {
-                label = <Text>Später Bezahlen</Text>;
-            }
-
-            if (
-                paylater?.products?.payIn3?.eligible &&
-                paylater?.products?.payIn3?.variant === 'ES'
-            ) {
-                label = <Text>Paga en 3 plazos</Text>;
-            }
-
-            if (
-                paylater?.products?.payIn3?.eligible &&
-                paylater?.products?.payIn3?.variant === 'IT'
-            ) {
-                label = <Text>Paga in 3 rate</Text>;
-            }
-
-            if (paylater?.products?.payIn4?.eligible) {
-                label = <Text>Pay in 4</Text>;
-            }
-
-            if (
-                paylater?.products?.payIn4?.eligible &&
-                paylater?.products?.payIn4?.variant === 'FR'
-            ) {
-                label = <Text>4X PayPal</Text>;
-            }
-
             return (
                 <Style css={ css } nonce={ nonce }>
                     <PPLogo logoColor={ logoColor } />
                     <Space />
-                    { label }
+                    <Text>{ getLabelText(fundingEligibility) || 'Pay Later' }</Text>
                 </Style>
             );
         },
@@ -104,6 +109,8 @@ export function getPaylaterConfig() : FundingSourceConfig {
             [BUTTON_COLOR.WHITE]:  LOGO_COLOR.BLUE
         },
         
-        labelText: `${ FUNDING.PAYPAL } ${ FUNDING.PAYLATER }`
+        labelText: ({ fundingEligibility }) => {
+            return (fundingEligibility && getLabelText(fundingEligibility)) || `${ FUNDING.PAYPAL } ${ FUNDING.PAYLATER }`;
+        }
     };
 }

package/src/ui/buttons/button.jsx

@@ -96,7 +96,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
 
     const { layout, shape } = style;
     
-    const labelText =  typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content }) : (fundingConfig.labelText || fundingSource);
+    const labelText =  typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
 
     const logoNode = (
         <Logo

package/src/ui/buttons/buttonDesigns/divideLogoAnimation.jsx

@@ -21,13 +21,14 @@ export const DIVIDE_LOGO_CONFIG = {
     cssUtilClasses: {
         DOM_READY:                  CLASS.DOM_READY,
         PAYPAL_LOGO:                LOGO_CLASS.LOGO,
-        PAYPAL_BUTTON_LABEL:        CLASS.BUTTON_LABEL
+        PAYPAL_BUTTON_LABEL:        CLASS.BUTTON_LABEL,
+        PAYPAL_LOGO_PP:             CLASS.LOGO_PP
     }
 };
 
 // Returns props necessary to render the animation as long as they are valid
 export const getDivideLogoProps = function (document : Object, configuration : Object) : DivideLogoAnimationProps | null {
-    const { PAYPAL_BUTTON_LABEL, PAYPAL_LOGO } = configuration.cssUtilClasses;
+    const { PAYPAL_BUTTON_LABEL, PAYPAL_LOGO, PAYPAL_LOGO_PP } = configuration.cssUtilClasses;
 
     const designContainer = (document && document.querySelector('.personalized-design-container')) || null;
     if (!designContainer) {
@@ -47,7 +48,7 @@ export const getDivideLogoProps = function (document : Object, configuration : O
     }
 
     // get starting position for element so it doesn't flicker when animation begins
-    const paypalLogoElement = (paypalLabelContainerElement && paypalLabelContainerElement.querySelector(`.${ PAYPAL_LOGO }`)) || null;
+    const paypalLogoElement = (paypalLabelContainerElement && paypalLabelContainerElement.querySelector(`.${ PAYPAL_LOGO }.${ PAYPAL_LOGO_PP }`)) || null;
     if (!paypalLogoElement) {
         return null;
     }
@@ -66,7 +67,8 @@ export function getDivideLogoAnimation(designProps : DivideLogoAnimationProps, c
         max,
         cssUtilClasses: {
             DOM_READY,
-            PAYPAL_LOGO
+            PAYPAL_LOGO,
+            PAYPAL_LOGO_PP
         }
     } = configuration;
 
@@ -77,7 +79,7 @@ export function getDivideLogoAnimation(designProps : DivideLogoAnimationProps, c
     } = designProps;
 
     const designCss = `
-        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }{
+        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }.${ PAYPAL_LOGO_PP }{
             animation: 3s divide-logo-animation-left-side 2s infinite alternate;
         }
         

package/src/zoid/buttons/component.jsx

@@ -45,7 +45,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             const { buttonSessionID } = props;
             
             if (!isLocalStorageEnabled()) {
-                getLogger().info('localstoage_inaccessible_possible_private_browsing').track({
+                getLogger().info('localstorage_inaccessible_possible_private_browsing').track({
                     [ FPTI_KEY.BUTTON_SESSION_UID ]: buttonSessionID,
                     [ FPTI_KEY.CONTEXT_TYPE ]:       'button_session_id',
                     [ FPTI_KEY.CONTEXT_ID ]:         buttonSessionID,