@paypal/checkout-components 5.0.241 → 5.0.243

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.241",
+  "version": "5.0.243",
   "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.33",
-    "@paypal/funding-components": "^1.0.27",
+    "@paypal/common-components": "^1.0.34",
+    "@paypal/funding-components": "^1.0.30",
     "@paypal/sdk-client": "^4.0.166",
-    "@paypal/sdk-constants": "^1.0.123",
-    "@paypal/sdk-logos": "^2.0.0"
+    "@paypal/sdk-constants": "^1.0.127",
+    "@paypal/sdk-logos": "^2.0.2"
   },
   "lint-staged": {
     "*.sh": "prettier --write"

package/src/funding/config.js

@@ -30,6 +30,7 @@ import { getBoletoConfig } from './boleto';
 import { getMaximaConfig } from './maxima';
 import { getMercadopagoConfig } from './mercadopago';
 import { getMultibancoConfig } from './multibanco';
+import { getSatispayConfig } from './satispay';
 
 export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourceConfig } {
     return inlineMemoize(getFundingConfig, () => {
@@ -60,7 +61,8 @@ export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourc
             [ FUNDING.BOLETOBANCARIO ]: (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.boletobancario !== 'undefined' && __FUNDING_ELIGIBILITY__.boletobancario.eligible)) ? getBoletoConfig() : null,
             [ FUNDING.MAXIMA ]:         (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.maxima !== 'undefined'         && __FUNDING_ELIGIBILITY__.maxima.eligible)) ? getMaximaConfig() : null,
             [ FUNDING.MERCADOPAGO ]:    (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.mercadopago !== 'undefined'    && __FUNDING_ELIGIBILITY__.mercadopago.eligible)) ? getMercadopagoConfig() : null,
-            [ FUNDING.MULTIBANCO ]:     (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.multibanco !== 'undefined'     && __FUNDING_ELIGIBILITY__.multibanco.eligible)) ? getMultibancoConfig() : null
+            [ FUNDING.MULTIBANCO ]:     (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.multibanco !== 'undefined'     && __FUNDING_ELIGIBILITY__.multibanco.eligible)) ? getMultibancoConfig() : null,
+            [ FUNDING.SATISPAY ]:       (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.satispay !== 'undefined'       && __FUNDING_ELIGIBILITY__.satispay.eligible)) ? getSatispayConfig() : null
         };
     });
 }

package/src/funding/payu/config.jsx

@@ -2,13 +2,17 @@
 /** @jsx node */
 
 import { PayuLogo } 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 getPayuConfig() : FundingSourceConfig {
     return {
-        ...DEFAULT_FUNDING_CONFIG,
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
+        automatic: false,
 
         layouts: [
             BUTTON_LAYOUT.VERTICAL
@@ -16,6 +20,23 @@ export function getPayuConfig() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => PayuLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => PayuLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>PayU</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
     };
 }

package/src/funding/satispay/config.jsx

@@ -0,0 +1,42 @@
+/* @flow */
+/** @jsx node */
+
+import { SatispayLogo } from '@paypal/sdk-logos/src';
+import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
+
+import { BUTTON_LAYOUT } from '../../constants';
+import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
+import { Text, Space } from '../../ui/text';
+
+export function getSatispayConfig() : FundingSourceConfig {
+    return {
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
+        automatic: false,
+
+        shippingChange: false,
+    
+        layouts: [
+            BUTTON_LAYOUT.VERTICAL
+        ],
+    
+        Logo: ({ logoColor, optional }) => SatispayLogo({ logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Satispay</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
+    };
+}

package/src/funding/satispay/index.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+export * from './config';

package/src/ui/buttons/props.js

@@ -429,6 +429,7 @@ export type ButtonProps = {|
     remember : ($ReadOnlyArray<$Values<typeof FUNDING>>) => void,
     clientID : string,
     sessionID : string,
+    buttonLocation : string,
     buttonSessionID : string,
     onShippingChange : ?OnShippingChange,
     onShippingAddressChange : ?OnShippingAddressChange,

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

@@ -127,6 +127,14 @@ export const buttonColorStyle = `
         background: #4D4D4D;
     }
 
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #002124;
+    }
+
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: #E62601;
+    }
+
     /* APM button hover actions */
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BANCONTACT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BLIK }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
@@ -143,6 +151,8 @@ export const buttonColorStyle = `
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover {
         filter: brightness(1.2);
     }
@@ -163,6 +173,8 @@ export const buttonColorStyle = `
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus {
         outline: none;
     }
@@ -183,6 +195,8 @@ export const buttonColorStyle = `
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SOFORT }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.TRUSTLY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VERKKOPANKKI }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAYU }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.SATISPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after {
         content: '';
         position: absolute;

package/src/zoid/buttons/component.jsx

@@ -386,6 +386,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 queryParam: true
             },
 
+            buttonLocation: {
+                type: 'string',
+                value: () => window.location.hostname,
+                queryParam: false
+            },
+
             buttonSessionID: {
                 type:       'string',
                 value:      uniqueID,