@paypal/checkout-components 5.0.236 → 5.0.238-kitty

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.236",
+  "version": "5.0.238-kitty",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -91,11 +91,11 @@
     "@krakenjs/post-robot": "^11.0.0",
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.0.0",
-    "@paypal/common-components": "^1.0.27",
+    "@paypal/common-components": "^1.0.33",
     "@paypal/funding-components": "^1.0.27",
     "@paypal/sdk-client": "^4.0.166",
-    "@paypal/sdk-constants": "^1.0.119",
-    "@paypal/sdk-logos": "^1.0.45"
+    "@paypal/sdk-constants": "1.0.124-kitty-2",
+    "@paypal/sdk-logos": "^2.0.0"
   },
   "lint-staged": {
     "*.sh": "prettier --write"

package/src/constants/misc.js

@@ -1,16 +1,17 @@
 /* @flow */
 
 export const ATTRIBUTE = {
-    BUTTON:            ('data-button' : 'data-button'),
-    FUNDING_SOURCE:    ('data-funding-source' : 'data-funding-source'),
-    PAYMENT_METHOD_ID: ('data-payment-method-id' : 'data-payment-method-id'),
-    INSTRUMENT_ID:     ('data-instrument-id' : 'data-instrument-id'),
-    INSTRUMENT_TYPE:   ('data-instrument-type' : 'data-instrument-type'),
-    VERSION:           ('data-paypal-smart-button-version' : 'data-paypal-smart-button-version'),
-    CARD:              ('data-card' : 'data-card'),
-    MENU:              ('data-menu' : 'data-menu'),
-    OPTIONAL:          ('optional' : 'optional'),
-    PAY_NOW:           ('data-pay-now' : 'data-pay-now')
+    BUTTON:                    ('data-button' : 'data-button'),
+    FUNDING_SOURCE:            ('data-funding-source' : 'data-funding-source'),
+    PAYMENT_METHOD_ID:         ('data-payment-method-id' : 'data-payment-method-id'),
+    INSTRUMENT_ID:             ('data-instrument-id' : 'data-instrument-id'),
+    INSTRUMENT_TYPE:           ('data-instrument-type' : 'data-instrument-type'),
+    SECONDARY_INSTRUMENT_TYPE: ('data-secondary-instrument-type' : 'data-secondary-instrument-type'),
+    VERSION:                   ('data-paypal-smart-button-version' : 'data-paypal-smart-button-version'),
+    CARD:                      ('data-card' : 'data-card'),
+    MENU:                      ('data-menu' : 'data-menu'),
+    OPTIONAL:                  ('optional' : 'optional'),
+    PAY_NOW:                   ('data-pay-now' : 'data-pay-now')
 };
 
 export const DEFAULT = ('default' : 'default');

package/src/funding/bancontact/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BancontactLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBancontactConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getBancontactConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BancontactLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BancontactLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Bancontact</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/blik/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BlikLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBlikConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getBlikConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BlikLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BlikLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>BLIK</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/boleto/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { BoletoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getBoletoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         automatic: false,
 
@@ -18,6 +20,23 @@ export function getBoletoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => BoletoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => BoletoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Boleto Bancário</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/common.jsx

@@ -81,7 +81,8 @@ export type WalletLabelOptions = {|
     vault : boolean,
     nonce? : ?string,
     textColor : $Values<typeof TEXT_COLOR>,
-    fundingSource : $Values<typeof FUNDING>
+    fundingSource : $Values<typeof FUNDING>,
+    showPayLabel : boolean
 |};
 
 export type TagOptions = {|
@@ -218,3 +219,36 @@ export const DEFAULT_FUNDING_CONFIG : FundingSourceConfig = {
         return true;
     }
 };
+
+export const DEFAULT_APM_FUNDING_CONFIG : FundingSourceConfig = {
+
+    ...DEFAULT_FUNDING_CONFIG,
+
+    colors: [
+        BUTTON_COLOR.DEFAULT,
+        BUTTON_COLOR.SILVER,
+        BUTTON_COLOR.WHITE,
+        BUTTON_COLOR.BLACK
+    ],
+
+    logoColors: {
+        [ BUTTON_COLOR.DEFAULT ]:   LOGO_COLOR.DEFAULT,
+        [ BUTTON_COLOR.SILVER ]:    LOGO_COLOR.BLACK,
+        [ BUTTON_COLOR.WHITE ]:     LOGO_COLOR.BLACK,
+        [ BUTTON_COLOR.BLACK ]:     LOGO_COLOR.WHITE
+    },
+
+    textColors: {
+        [ BUTTON_COLOR.DEFAULT ]:   TEXT_COLOR.WHITE,
+        [ BUTTON_COLOR.BLACK ]:     TEXT_COLOR.WHITE,
+        [ BUTTON_COLOR.SILVER ]:    TEXT_COLOR.BLACK,
+        [ BUTTON_COLOR.WHITE ]:     TEXT_COLOR.BLACK
+    },
+
+    secondaryColors: {
+        [ DEFAULT ]:                BUTTON_COLOR.DEFAULT,
+        [ BUTTON_COLOR.SILVER ]:    BUTTON_COLOR.SILVER,
+        [ BUTTON_COLOR.WHITE ]:     BUTTON_COLOR.WHITE,
+        [ BUTTON_COLOR.BLACK ]:     BUTTON_COLOR.BLACK
+    }
+};

package/src/funding/eps/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { EpsLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getEpsConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getEpsConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>eps</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/giropay/config.jsx

@@ -2,13 +2,16 @@
 /** @jsx node */
 
 import { GiropayLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
+
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getGiropayConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +19,23 @@ export function getGiropayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>giropay</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/ideal/config.jsx

@@ -5,12 +5,12 @@ import { IdealLogo } from '@paypal/sdk-logos/src';
 import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
 
 export function getIdealConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -25,15 +25,15 @@ export function getIdealConfig() : FundingSourceConfig {
                 return logo;
             }
 
-            const idealLogo = (
+            const apmLogo = (
                 <Fragment>
-                    { logo }<Space /><Text>Online betalen</Text>
+                    { logo }<Space /><Text animate optional>iDEAL</Text>
                 </Fragment>
             );
 
             return (<BasicLabel
                 { ...opts }
-                logo={ idealLogo }
+                logo={ apmLogo }
             />);
         }
     };

package/src/funding/maxima/config.jsx

@@ -3,7 +3,7 @@
 
 import { MaximaLogo } from '@paypal/sdk-logos/src';
 
-import { BUTTON_LAYOUT } from '../../constants';
+import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getMaximaConfig() : FundingSourceConfig {
@@ -16,6 +16,13 @@ export function getMaximaConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional }),
+
+        colors: [
+            BUTTON_COLOR.DEFAULT,
+            BUTTON_COLOR.SILVER,
+            BUTTON_COLOR.WHITE,
+            BUTTON_COLOR.BLACK
+        ]
     };
 }

package/src/funding/mercadopago/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { MercadoPagoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMercadopagoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
         
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getMercadopagoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MercadoPagoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MercadoPagoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Mercado Pago</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/multibanco/config.jsx

@@ -2,14 +2,16 @@
 /** @jsx node */
 
 import { MultibancoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMultibancoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
-        
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
         automatic: false,
 
         shippingChange: false,
@@ -18,6 +20,23 @@ export function getMultibancoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Multibanco</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/mybank/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { MybankLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getMybankConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         shippingChange: false,
     
@@ -16,6 +18,23 @@ export function getMybankConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => MybankLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => MybankLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>MyBank</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/oxxo/config.jsx

@@ -2,14 +2,16 @@
 /** @jsx node */
 
 import { OxxoLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getOxxoConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
-        
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
         automatic: false,
 
         shippingChange: false,
@@ -18,6 +20,23 @@ export function getOxxoConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>OXXO</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/p24/config.jsx

@@ -2,13 +2,15 @@
 /** @jsx node */
 
 import { P24Logo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
 
 export function getP24Config() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
 
         layouts: [
             BUTTON_LAYOUT.VERTICAL
@@ -16,6 +18,23 @@ export function getP24Config() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => P24Logo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => P24Logo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Przelewy24</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/paypal/style.scoped.scss

@@ -68,6 +68,14 @@
         margin-left: auto;
     }
 
+    .show-pay-label {
+        all: inherit;
+    }
+
+    .no-pay-label {
+        margin: auto;
+    }
+
     @media only screen and (max-width: 150px) {
         text-align: center;
         display: inline-block;