@paypal/checkout-components 5.0.194 → 5.0.197-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.194",
+    "version": "5.0.197-alpha.2",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "scripts": {
@@ -14,9 +14,6 @@
         "webpack-size": "babel-node $(npm bin)/webpack --progress --config webpack.config.size",
         "build": "npm run test && npm run webpack",
         "release": "./scripts/publish.sh",
-        "release:patch": "./scripts/publish.sh patch",
-        "release:minor": "./scripts/publish.sh minor",
-        "release:major": "./scripts/publish.sh major",
         "preversion": "./scripts/preversion.sh",
         "version": "./scripts/version.sh",
         "postversion": "./scripts/postversion.sh",
@@ -80,13 +77,13 @@
         "sync-browser-mocks": "^2.0.8"
     },
     "dependencies": {
+        "@krakenjs/cross-domain-utils": "^3.0.2",
         "@paypal/common-components": "^1.0.16",
         "@paypal/funding-components": "^1.0.17",
         "@paypal/sdk-client": "^4.0.156",
         "@paypal/sdk-constants": "^1.0.107",
         "@paypal/sdk-logos": "^1.0.26",
         "belter": "^1.0.2",
-        "cross-domain-utils": "^2.0.1",
         "jsx-pragmatic": "^2",
         "post-robot": "^10.0.0",
         "zalgo-promise": "^1.0.10",

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/lib/security.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { isSameDomain } from 'cross-domain-utils/src';
+import { isSameDomain } from '@krakenjs/cross-domain-utils/src';
 import { supportsPopups } from 'belter/src';
 import { isPayPalDomain } from '@paypal/sdk-client/src';
 

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/props.js

@@ -7,7 +7,7 @@ import { type OrderCreateRequest, type FundingEligibilityType,
     type OrderGetResponse, type OrderCaptureResponse, type OrderAuthorizeResponse } from '@paypal/sdk-client/src';
 import { FUNDING, PLATFORM, INTENT, COMMIT, VAULT,
     ENV, COUNTRY, LANG, COUNTRY_LANGS, type LocaleType, CARD, COMPONENTS } from '@paypal/sdk-constants/src';
-import { type CrossDomainWindowType } from 'cross-domain-utils/src';
+import { type CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
 import type { ComponentFunctionType } from 'jsx-pragmatic/src';
@@ -298,6 +298,7 @@ export type ButtonProps = {|
     onShippingChange : ?OnShippingChange,
     clientAccessToken? : ?string,
     nonce : string,
+    merchantRequestedPopupsDisabled : ?boolean,
     userIDToken : ?string,
     flow : $Values<typeof BUTTON_FLOW>,
     experiment : Experiment,

package/src/zoid/buttons/component.jsx

@@ -5,7 +5,7 @@
 import { getLogger, getLocale, getClientID, getEnv, getIntent, getCommit, getVault, getDisableFunding, getDisableCard,
     getMerchantID, getPayPalDomainRegex, getCurrency, getSDKMeta, getCSPNonce, getBuyerCountry, getClientAccessToken, getPlatform,
     getPartnerAttributionID, getCorrelationID, getEnableThreeDomainSecure, getDebug, getComponents, getStageHost, getAPIStageHost, getPayPalDomain,
-    getUserIDToken, getClientMetadataID, getAmount, getEnableFunding, getStorageID, getUserExperienceFlow } from '@paypal/sdk-client/src';
+    getUserIDToken, getClientMetadataID, getAmount, getEnableFunding, getStorageID, getUserExperienceFlow, getMerchantRequestedPopupsDisabled } from '@paypal/sdk-client/src';
 import { rememberFunding, getRememberedFunding, getRefinedFundingEligibility } from '@paypal/funding-components/src';
 import { ZalgoPromise } from 'zalgo-promise/src';
 import { create, type ZoidComponent } from 'zoid/src';
@@ -268,6 +268,26 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 }
             },
 
+            onRender: {
+                type:     'function',
+                required: false,
+                default:  () => noop,
+                decorate: ({ props, value = noop }) => {
+                    return (...args) => {
+                        getLogger().track({
+                            event_name:                      'testing',
+                            [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
+                            [ FPTI_KEY.CONTEXT_CORRID ]:     getCorrelationID(),
+                            [ FPTI_KEY.CONTEXT_ID ]:         props.buttonSessionID,
+                            [ FPTI_KEY.CONTEXT_TYPE ]:       'button_session_id',
+                            [ FPTI_KEY.FEED ]:               'payments_sdk'// ,
+                            // [ FPTI_KEY.SDK_LOAD_START ]:     (new Date()).toISOString()
+                        }).flush();
+                        return value(...args);
+                    };
+                }
+            },
+
             getQueriedEligibleFunding: {
                 type:  'function',
                 value: () => {
@@ -294,6 +314,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 value:      getPartnerAttributionID
             },
 
+            merchantRequestedPopupsDisabled: {
+                type:       'boolean',
+                required:   false,
+                value:      getMerchantRequestedPopupsDisabled
+            },
+
             enableThreeDomainSecure: {
                 type:  'boolean',
                 value: getEnableThreeDomainSecure

package/src/zoid/buttons/prerender.jsx

@@ -4,7 +4,7 @@
 import { node, dom, type ChildType } from 'jsx-pragmatic/src';
 import { FUNDING, CARD, FPTI_KEY } from '@paypal/sdk-constants/src';
 import { popup, supportsPopups, writeElementToWindow } from 'belter/src';
-import { assertSameDomain, type CrossDomainWindowType } from 'cross-domain-utils/src';
+import { assertSameDomain, type CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { SpinnerPage } from '@paypal/common-components/src';
 import { getLogger } from '@paypal/sdk-client/src';
 import type { ZoidProps } from 'zoid/src';
@@ -41,9 +41,9 @@ export function PrerenderedButtons({ nonce, onRenderCheckout, props } : Prerende
             [ FPTI_KEY.CHOSEN_FUNDING]:      fundingSource
         }).flush();
 
-        if (fundingSource === FUNDING.VENMO) {
+        if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY) {
             // wait for button to load
-        } else if (supportsPopups()) {
+        } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
             // remember the popup window to prevent showing a new popup window on every click in the prerender state
             if (!win || win.closed) {
                 win = assertSameDomain(popup('', {

package/src/zoid/card-fields/component.jsx

@@ -5,7 +5,7 @@
 import { node, dom } from 'jsx-pragmatic/src';
 import { ZalgoPromise } from 'zalgo-promise/src';
 import { create, type ZoidComponent } from 'zoid/src';
-import type { CrossDomainWindowType } from 'cross-domain-utils/src';
+import type { CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { memoize, uniqueID } from 'belter/src';
 import { getLocale, getEnv, getSDKMeta, getDisableCard, getPayPalDomain, getClientID, getDebug, getCurrency, getIntent,
     getCommit, getVault } from '@paypal/sdk-client/src';

package/src/zoid/card-form/component.js

@@ -5,7 +5,7 @@
 import { LANG } from '@paypal/sdk-constants/src';
 import { ZalgoPromise } from 'zalgo-promise/src';
 import { create, type ZoidComponent } from 'zoid/src';
-import type { CrossDomainWindowType } from 'cross-domain-utils/src';
+import type { CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { inlineMemoize } from 'belter/src';
 import { getLocale, getEnv, getCommit, getSDKMeta, getDisableCard, getPayPalDomain } from '@paypal/sdk-client/src';
 

package/src/zoid/wallet/component.jsx

@@ -3,10 +3,12 @@
 /* eslint max-lines: 0 */
 
 import { node, dom } from 'jsx-pragmatic/src';
-import { getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain, getClientID, getUserAccessToken,
+import {
+    getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain, getClientID, getUserAccessToken,
     getClientAccessToken, getUserIDToken, getLocale, getPartnerAttributionID, getCorrelationID, getSessionID,
     getEnv, getStageHost, getAPIStageHost, getPlatform, getCurrency, getIntent, getBuyerCountry, getCommit, getVault,
-    getMerchantID, getCSPNonce, getDebug } from '@paypal/sdk-client/src';
+    getMerchantID, getCSPNonce, getDebug, getMerchantRequestedPopupsDisabled
+} from '@paypal/sdk-client/src';
 import { create, type ZoidComponent } from 'zoid/src';
 import { inlineMemoize, memoize, uniqueID } from 'belter/src';
 import { ZalgoPromise } from 'zalgo-promise/src';
@@ -132,6 +134,12 @@ export function getWalletComponent() : WalletComponent {
                     value:     getPartnerAttributionID
                 },
 
+                merchantRequestedPopupsDisabled: {
+                    type:       'boolean',
+                    required:   false,
+                    value:      getMerchantRequestedPopupsDisabled
+                },
+
                 correlationID: {
                     type:       'string',
                     required:   false,