@paypal/checkout-components - npm Package Compare versions

Comparing version 5.0.44 to 5.0.46

package.json

 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.44",
+  "version": "5.0.46",
   "description": "PayPal Checkout components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/buttons/props.js

@@ -141,2 +141,8 @@ /* @flow */
 
+export type Personalization = {|
+    tagline? : {|
+        text : string
+    |}
+|};
+
 export type RenderButtonProps = {|
@@ -157,3 +163,5 @@ style : ButtonStyle,
     components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    onShippingChange : ?OnShippingChange
+    onShippingChange : ?OnShippingChange,
+    personalization : ?Personalization,
+    clientAccessToken : ?string
 |};
@@ -192,2 +200,3 @@
     onShippingChange : ?OnShippingChange,
+    clientAccessToken : ?string,
     nonce : string
@@ -214,2 +223,4 @@ |};
     onShippingChange : ?Function,
+    personalization? : Personalization,
+    clientAccessToken? : string,
     csp? : {
@@ -325,3 +336,5 @@ nonce? : string
         nonce = '',
-        onShippingChange
+        onShippingChange,
+        personalization,
+        clientAccessToken
     } = props;
@@ -361,3 +374,4 @@
 
-    return { clientID, style, locale, remembered, env, fundingEligibility, platform, buttonSessionID, commit, sessionID, nonce, components, onShippingChange };
+    return { clientID, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
+        buttonSessionID, commit, sessionID, nonce, components, onShippingChange, personalization };
 }

src/buttons/template/button.jsx

@@ -25,6 +25,7 @@ /* @flow */
     i : number,
-    nonce : string
+    nonce : string,
+    clientAccessToken : ?string
 |};
 
-export function BasicButton({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, onClick = noop } : BasicButtonProps) : ElementNode {
+export function BasicButton({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, clientAccessToken, onClick = noop } : BasicButtonProps) : ElementNode {
 
@@ -98,5 +99,7 @@ let { color, period, label } = style;
                 period={ period }
+                layout={ layout }
                 multiple={ multiple }
                 fundingEligibility={ fundingEligibility }
                 onClick={ clickHandler }
+                clientAccessToken={ clientAccessToken }
             />
@@ -103,0 +106,0 @@

src/buttons/template/buttons.jsx

@@ -24,3 +24,4 @@ /* @flow */
     const { onClick } = props;
-    const { style, locale, remembered, env, fundingEligibility, platform, nonce, components, onShippingChange } = normalizeButtonProps(props);
+    const { style, locale, remembered, env, fundingEligibility, platform,
+        nonce, components, onShippingChange, personalization, clientAccessToken } = normalizeButtonProps(props);
     const { layout, shape, tagline } = style;
@@ -69,2 +70,3 @@ const { lang } = locale;
                         onClick={ onClick }
+                        clientAccessToken={ clientAccessToken }
                     />
@@ -82,2 +84,3 @@ ))
                         nonce={ nonce }
+                        personalization={ personalization }
                     /> : null
@@ -84,0 +87,0 @@ }

src/buttons/template/poweredByPayPal.jsx

 /* @flow */
 /** @jsx node */
 
-import { node, type ElementNode } from 'jsx-pragmatic/src';
+import { node, type ChildType } from 'jsx-pragmatic/src';
 import { type LocaleType } from '@paypal/sdk-constants/src';
@@ -9,2 +9,3 @@ import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 import { CLASS } from '../../constants';
+import { LoadingDots, Text } from '../../ui';
 
@@ -32,3 +33,3 @@ import { buttonContent } from './content';
 
-export function PoweredByPayPal({ locale: { lang } } : PoweredByPayPalProps) : ElementNode {
+export function PoweredByPayPal({ locale: { lang } } : PoweredByPayPalProps) : ChildType {
     const { PoweredBy } = buttonContent[lang];
@@ -38,5 +39,8 @@
         <div class={ CLASS.POWERED_BY } style={ POWERED_BY_PAYPAL_STYLE }>
-            <PoweredBy logoColor={ LOGO_COLOR.BLUE } />
+            { __WEB__
+                ? <Text><LoadingDots /></Text>
+                : <PoweredBy logoColor={ LOGO_COLOR.BLUE } />
+            }
         </div>
     );
 }

src/buttons/template/tagline.jsx

@@ -9,6 +9,7 @@ /* @flow */
 import { getFundingConfig } from '../../funding';
-import { type ButtonStyle } from '../props';
+import { type ButtonStyle, type Personalization } from '../props';
+import { LoadingDots } from '../../ui';
 
-export function TagLine({ fundingSource, style, locale, multiple, nonce } :
-    {| fundingSource : $Values<typeof FUNDING>, style : ButtonStyle, locale : LocaleType, multiple : boolean, nonce : string |}) : ?ElementNode {
+export function TagLine({ fundingSource, style, locale, multiple, nonce, personalization } :
+    {| fundingSource : $Values<typeof FUNDING>, style : ButtonStyle, locale : LocaleType, multiple : boolean, nonce : string, personalization : ?Personalization |}) : ?ElementNode {
 
@@ -29,12 +30,24 @@ const { label } = style;
 
+    if (__WEB__) {
+        return (
+            <div class={ CLASS.TAGLINE }>
+                <LoadingDots />
+            </div>
+        );
+    }
+
     return (
         <div class={ CLASS.TAGLINE }>
-            <Tag
-                label={ label }
-                nonce={ nonce }
-                locale={ locale }
-                multiple={ multiple }
-            />
+            {
+                (personalization && personalization.tagline)
+                    ? <span>{ personalization.tagline.text }</span>
+                    : <Tag
+                        label={ label }
+                        nonce={ nonce }
+                        locale={ locale }
+                        multiple={ multiple }
+                    />
+            }
         </div>
     );
 }

src/funding/common.jsx

@@ -5,4 +5,4 @@ /* @flow */
 
-import { PLATFORM, type LocaleType, COUNTRY, CARD, COMPONENTS, LANG } from '@paypal/sdk-constants/src';
-import { node, type ChildType } from 'jsx-pragmatic/src';
+import { PLATFORM, type LocaleType, COUNTRY, CARD, COMPONENTS } from '@paypal/sdk-constants/src';
+import { node, Fragment, type ChildType } from 'jsx-pragmatic/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
@@ -12,2 +12,3 @@
 import type { FundingEligibilityType } from '../types';
+import { LoadingDots, Text } from '../ui';
 
@@ -46,3 +47,5 @@ import { componentContent } from './content';
         optional? : boolean,
-        onClick : (event : Event, ...args: $ReadOnlyArray<mixed>) => void
+        onClick : (event : Event, ...args: $ReadOnlyArray<mixed>) => void,
+        layout : $Values<typeof BUTTON_LAYOUT>,
+        clientAccessToken : ?string
     |}) => ChildType,
@@ -66,28 +69,2 @@ VaultLabel? : ({|
 
-export const LogoLabel = ({ label, logo, lang, period } : { label : ?$Values<typeof BUTTON_LABEL>, logo : ChildType, lang : $Values<typeof LANG>, period : ?number }) : ChildType => {
-    if (!label || label === BUTTON_LABEL.PAYPAL) {
-        return logo;
-    }
-    
-    const { Checkout, Pay, BuyNow, Installment } = componentContent[lang];
-
-    if (label === BUTTON_LABEL.CHECKOUT) {
-        return <Checkout logo={ logo } />;
-    }
-
-    if (label === BUTTON_LABEL.PAY) {
-        return <Pay logo={ logo } />;
-    }
-
-    if (label === BUTTON_LABEL.BUYNOW) {
-        return <BuyNow logo={ logo } />;
-    }
-
-    if (label === BUTTON_LABEL.INSTALLMENT && Installment) {
-        return <Installment logo={ logo } period={ period } />;
-    }
-
-    throw new Error(`Label ${ label } not supported`);
-};
-
 export const DEFAULT_FUNDING_CONFIG : FundingSourceConfig = {
@@ -137,5 +114,44 @@
 
-    Label: ({ logo }) => {
-        return logo;
+    Label: ({ logo, label, locale: { lang }, period, layout, multiple, clientAccessToken }) => {
+        if (__WEB__) {
+            if (!label && !clientAccessToken) {
+                return logo;
+            }
+
+            if (layout === BUTTON_LAYOUT.HORIZONTAL && multiple) {
+                return logo;
+            }
+
+            return (
+                <Fragment>
+                    { logo }
+                    <Text> <LoadingDots /></Text>
+                </Fragment>
+            );
+        }
+        
+        if (!label || label === BUTTON_LABEL.PAYPAL) {
+            return logo;
+        }
+        
+        const { Checkout, Pay, BuyNow, Installment } = componentContent[lang];
+    
+        if (label === BUTTON_LABEL.CHECKOUT) {
+            return <Checkout logo={ logo } />;
+        }
+    
+        if (label === BUTTON_LABEL.PAY) {
+            return <Pay logo={ logo } />;
+        }
+    
+        if (label === BUTTON_LABEL.BUYNOW) {
+            return <BuyNow logo={ logo } />;
+        }
+    
+        if (label === BUTTON_LABEL.INSTALLMENT && Installment) {
+            return <Installment logo={ logo } period={ period } />;
+        }
+    
+        throw new Error(`Label ${ label } not supported`);
     }
 };

src/funding/itau/config.jsx

@@ -7,3 +7,3 @@ /* @flow */
 
-import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
+import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from '../../constants';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
@@ -23,13 +23,11 @@
         colors: [
+            BUTTON_COLOR.DARKBLUE,
             BUTTON_COLOR.BLUE,
-            BUTTON_COLOR.SILVER,
-            BUTTON_COLOR.BLACK,
-            BUTTON_COLOR.WHITE
+            BUTTON_COLOR.BLACK
         ],
 
         logoColors:  {
-            [ BUTTON_COLOR.BLUE ]:   LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.SILVER ]: LOGO_COLOR.BLUE,
-            [ BUTTON_COLOR.BLACK ]:  LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.WHITE ]:  LOGO_COLOR.BLUE
+            [ BUTTON_COLOR.DARKBLUE ]:   LOGO_COLOR.WHITE,
+            [ BUTTON_COLOR.BLUE ]:     LOGO_COLOR.WHITE,
+            [ BUTTON_COLOR.BLACK ]:    LOGO_COLOR.WHITE
         },
@@ -40,7 +38,10 @@
 
-            [ BUTTON_COLOR.GOLD ]:   BUTTON_COLOR.BLUE,
-            [ BUTTON_COLOR.BLUE ]:   BUTTON_COLOR.SILVER,
-            [ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.BLUE
+            [ DEFAULT ]:             BUTTON_COLOR.DARKBLUE,
+            [ BUTTON_COLOR.GOLD ]:   BUTTON_COLOR.DARKBLUE,
+            [ BUTTON_COLOR.BLUE ]:   BUTTON_COLOR.BLUE,
+            [ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.DARKBLUE,
+            [ BUTTON_COLOR.WHITE ]:   BUTTON_COLOR.DARKBLUE
+
         }
     };
 }

src/funding/paypal/config.jsx

@@ -9,3 +9,3 @@ /* @flow */
 import { BUTTON_LABEL, BUTTON_COLOR, BUTTON_LAYOUT, CLASS } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig, LogoLabel } from '../common';
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 import { componentContent } from '../content';
@@ -48,6 +48,2 @@ import { Text, Space } from '../../ui';
         },
-
-        Label: ({ logo, label, locale: { lang }, period }) => {
-            return <LogoLabel label={ label } logo={ logo } lang={ lang } period={ period } />;
-        },
     
@@ -54,0 +50,0 @@ Tag: ({ multiple, locale: { lang } } : { locale : LocaleType, multiple : boolean }) => {

src/ui/index.js

 /* @flow */
 
 export * from './text';
+export * from './loading';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

619858

increased by0.74%

Number of package files

107

increased by0.94%

Lines of code

3833

increased by2.82%

No dependency changes