@paypal/checkout-components 5.0.254 → 5.0.256-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.254",
+  "version": "5.0.256-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -105,10 +105,10 @@
     "@krakenjs/post-robot": "^11.0.0",
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.0.0",
-    "@paypal/common-components": "^1.0.34",
-    "@paypal/funding-components": "^1.0.30",
+    "@paypal/common-components": "^1.0.35",
+    "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.166",
-    "@paypal/sdk-constants": "^1.0.127",
+    "@paypal/sdk-constants": "^1.0.128",
     "@paypal/sdk-logos": "^2.2.3"
   },
   "lint-staged": {

package/src/funding/config.js

@@ -31,6 +31,7 @@ import { getMaximaConfig } from './maxima';
 import { getMercadopagoConfig } from './mercadopago';
 import { getMultibancoConfig } from './multibanco';
 import { getSatispayConfig } from './satispay';
+import { getPaidyConfig } from './paidy';
 
 export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourceConfig } {
     return inlineMemoize(getFundingConfig, () => {
@@ -62,7 +63,8 @@ export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourc
             [ 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.SATISPAY ]:       (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.satispay !== 'undefined'       && __FUNDING_ELIGIBILITY__.satispay.eligible)) ? getSatispayConfig() : null
+            [ FUNDING.SATISPAY ]:       (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.satispay !== 'undefined'       && __FUNDING_ELIGIBILITY__.satispay.eligible)) ? getSatispayConfig() : null,
+            [ FUNDING.PAIDY ]:          (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.paidy !== 'undefined'          && __FUNDING_ELIGIBILITY__.paidy.eligible)) ? getPaidyConfig() : null
         };
     });
 }

package/src/funding/paidy/config.jsx

@@ -0,0 +1,43 @@
+/* @flow */
+/** @jsx node */
+
+import { PaidyLogo } 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';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
+
+export function getPaidyConfig() : FundingSourceConfig {
+    return {
+        ...DEFAULT_APM_FUNDING_CONFIG,
+
+        automatic: false,
+
+        shippingChange: false,
+    
+        layouts: [
+            BUTTON_LAYOUT.VERTICAL
+        ],
+    
+        Logo: ({ logoColor, optional }) =>  enableLogoCDNExperiment(PaidyLogo, { logoColor, optional }),
+
+        Label: ({ logo, ...opts }) => {
+            if (__WEB__) {
+                return logo;
+            }
+
+            const apmLogo = (
+                <Fragment>
+                    { logo }<Space /><Text animate optional>Paidy</Text>
+                </Fragment>
+            );
+
+            return (<BasicLabel
+                { ...opts }
+                logo={ apmLogo }
+            />);
+        }
+    };
+}

package/src/funding/paidy/index.js

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

package/src/lib/getLogoCDNExperiment.js

@@ -5,7 +5,7 @@ import type { Experiment } from "@krakenjs/belter/src";
 import type { ChildType } from "@krakenjs/jsx-pragmatic/src";
 
 export function getLogoCDNExperiment(): Experiment {
-  return createExperiment("enable_logo_cdn_experiment", 5);
+  return createExperiment("enable_logo_cdn_experiment", 25);
 }
 
 export function enableLogoCDNExperiment<T>(

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

@@ -71,6 +71,10 @@ export const buttonColorStyle = `
         background: linear-gradient(to right, #1E3764, #005AB9);
     }
 
+    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
+        background: linear-gradient(to right, #FF009C, #A6009C);
+    }
+
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.BOLETO }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT } {
         background: #2C2E2F;
     }
@@ -153,6 +157,7 @@ export const buttonColorStyle = `
     .${ 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.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:hover {
         filter: brightness(1.2);
     }
@@ -175,6 +180,7 @@ export const buttonColorStyle = `
     .${ 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.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus {
         outline: none;
     }
@@ -197,6 +203,7 @@ export const buttonColorStyle = `
     .${ 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.PAIDY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after,
     .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.WECHATPAY }].${ CLASS.COLOR }-${ BUTTON_COLOR.DEFAULT }:focus::after {
         content: '';
         position: absolute;