@paypal/checkout-components 5.0.212 → 5.0.215

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.212",
+    "version": "5.0.215",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {
@@ -62,7 +62,7 @@
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
     "devDependencies": {
-        "@krakenjs/grumbler-scripts": "^6.0.2",
+        "@krakenjs/grumbler-scripts": "^7.0.0",
         "@krakenjs/sync-browser-mocks": "^3.0.0",
         "babel-core": "^7.0.0-bridge.0",
         "bundlemon": "^1.1.0",

package/src/declarations.js

@@ -19,3 +19,8 @@ declare var __PAYPAL_CHECKOUT__ : {|
         __PAYMENT_FIELDS__ : string
     |}
 |};
+
+declare var __INLINE_CHECKOUT_ELIGIBILITY__ : {|
+    eligible : boolean,
+    ineligibilityReason : string
+|};

package/src/funding/card/config.jsx

@@ -122,10 +122,20 @@ export function getCardConfig() : FundingSourceConfig {
         },
 
         Label: ({ logo, locale, content, custom }) => {
-            if (custom && custom.label) {
+            if (custom) {
+                const validLabels = {
+                    checkout: 'Checkout'
+                };
+
+                let label = 'Checkout';
+
+                if (custom.label && typeof custom.label === 'string' && validLabels[custom.label.toLowerCase()]) {
+                    label = validLabels[custom.label];
+                }
+
                 return (
                     <Fragment>
-                        <Text>{ custom.label }</Text>
+                        <Text>{ label }</Text>
                         <Space />
                     </Fragment>
                 );

package/src/types.js

@@ -67,3 +67,8 @@ export type LazyExport<T> = {|
 export type LazyProtectedExport<T> = {|
     __get__ : () => ?T
 |};
+
+export type InlineXOEligibilityType = {|
+    eligible : boolean,
+    ineligibilityReason : string
+|};

package/src/ui/buttons/button.jsx

@@ -44,8 +44,9 @@ type IndividualButtonProps = {|
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
     userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
-
-    const inlineExperience = experience === EXPERIENCE.INLINE;
+    
+    const { custom, layout, shape } = style;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
     const fundingConfig = getFundingConfig()[fundingSource];
 
     if (!fundingConfig) {
@@ -95,8 +96,6 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             preventClickFocus(el);
         }
     };
-
-    const { custom, layout, shape } = style;
     
     const labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
 

package/src/ui/buttons/buttons.jsx

@@ -101,8 +101,8 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
         nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
         supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
-    const { layout, shape, tagline } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE;
+    const { custom, layout, shape, tagline } = style;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
 
     let fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     const multiple = fundingSources.length > 1;
@@ -204,7 +204,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
             }
 
             {
-                (layout === BUTTON_LAYOUT.VERTICAL && fundingSources.indexOf(FUNDING.CARD) !== -1)
+                (layout === BUTTON_LAYOUT.VERTICAL && fundingSources.indexOf(FUNDING.CARD) !== -1 && !inlineExperience)
                     ? <PoweredByPayPal
                             locale={ locale }
                             nonce={ nonce }

package/src/ui/buttons/props.js

@@ -285,6 +285,8 @@ export type ButtonProps = {|
     createOrder : CreateOrder,
     createBillingAgreement : CreateBillingAgreement,
     createSubscription : CreateSubscription,
+    currency : string,
+    disableFunding? : $ReadOnlyArray<$Values<typeof FUNDING>>,
     oncancel : OnCancel,
     onApprove : OnApprove,
     onComplete : OnComplete,
@@ -306,6 +308,7 @@ export type ButtonProps = {|
     onShippingChange : ?OnShippingChange,
     clientAccessToken? : ?string,
     nonce : string,
+    merchantID? : $ReadOnlyArray<string>,
     merchantRequestedPopupsDisabled : ?boolean,
     userIDToken : ?string,
     flow : $Values<typeof BUTTON_FLOW>,

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

@@ -4,12 +4,12 @@ import type { CustomStyle } from '../../../types';
 import { CLASS } from '../../../constants';
 
 export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string => {
-    if (!custom) {
+    const { css } = custom || {};
+    
+    if (!css) {
         return '';
     }
 
-    const { css } = custom || {};
-
     let heightStyle = '';
     let marginStyle = '';
     let style = Object.keys(css).reduce((acc, key) => {

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, getMerchantRequestedPopupsDisabled } from '@paypal/sdk-client/src';
+    getUserIDToken, getClientMetadataID, getAmount, getEnableFunding, getStorageID, getUserExperienceFlow, getMerchantRequestedPopupsDisabled, getVersion } from '@paypal/sdk-client/src';
 import { rememberFunding, getRememberedFunding, getRefinedFundingEligibility } from '@paypal/funding-components/src';
 import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
 import { create, type ZoidComponent } from '@krakenjs/zoid/src';
@@ -17,11 +17,13 @@ import { getSessionID, storageState, sessionState } from '../../lib';
 import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
 import { EXPERIENCE } from '../../constants';
+import { type InlineXOEligibilityType } from '../../types';
 
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
 import { applePaySession, determineFlow, isSupportedNativeBrowser, createVenmoExperiment,
-    createNoPaylaterExperiment, getRenderedButtons, getButtonSize, getButtonExperiments } from './util';
+    createNoPaylaterExperiment, getRenderedButtons, getButtonSize, getButtonExperiments, isInlineXOEligible } from './util';
+    
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
 
@@ -116,6 +118,17 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
         },
 
         props: {
+            /**
+             * Version of the SDK used in first render.
+             * This is passed to the `/smart/buttons` endpoint in order for the second render
+             * to be aware of what sdk version to load during SSR of the buttons
+             */
+            sdkVersion: {
+                type:        'string',
+                queryParam:  true,
+                sendToChild: false,
+                value:       getVersion
+            },
             fundingSource: {
                 type:       'string',
                 queryParam: true,
@@ -608,10 +621,22 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required:   false,
                 type:       'string',
                 value:      ({ props }) => {
-                    const { style: { custom }, fundingEligibility } = props;
-                    const isInlineXO = (custom && (custom.label || custom.css)) && fundingEligibility[FUNDING.CARD]?.eligible;
+                    const { commit, createBillingAgreement, currency, disableFunding = [], fundingEligibility, locale, merchantID = [], style: { layout }, vault } = props || {};
 
-                    return isInlineXO ? EXPERIENCE.INLINE : '';
+                    const inlineCheckoutEligibility : InlineXOEligibilityType = __INLINE_CHECKOUT_ELIGIBILITY__ || {
+                        eligible: false
+                    };
+                    return inlineCheckoutEligibility &&  inlineCheckoutEligibility.eligible && isInlineXOEligible({ props: {
+                        commit,
+                        createBillingAgreement,
+                        currency,
+                        disableFunding,
+                        fundingEligibility,
+                        layout,
+                        locale,
+                        merchantID,
+                        vault
+                    } }) ? EXPERIENCE.INLINE : '';
                 }
             },
 

package/src/zoid/buttons/util.js

@@ -1,7 +1,7 @@
 /* @flow */
 import { supportsPopups as userAgentSupportsPopups, isAndroid, isChrome, isIos, isSafari, isSFVC, type Experiment, isDevice, isTablet, getElement, isLocalStorageEnabled } from '@krakenjs/belter/src';
-import { ENV, FUNDING } from '@paypal/sdk-constants/src';
-import { getEnableFunding, getDisableFunding, createExperiment, getFundingEligibility, getPlatform, getComponents, getEnv } from '@paypal/sdk-client/src';
+import { COUNTRY, CURRENCY, ENV, FPTI_KEY, FUNDING, type LocaleType } from '@paypal/sdk-constants/src';
+import { getEnableFunding, getDisableFunding, getLogger, createExperiment, getFundingEligibility, getPlatform, getComponents, getEnv, type FundingEligibilityType } from '@paypal/sdk-client/src';
 import { getRefinedFundingEligibility } from '@paypal/funding-components/src';
 
 import type { Experiment as EligibilityExperiment } from '../../types';
@@ -296,3 +296,40 @@ export function getButtonSize (props : ButtonProps, container : string | HTMLEle
         }
     }
 }
+
+type InlineCheckoutEligibilityProps = {|
+    commit : boolean,
+    createBillingAgreement? : Function,
+    currency : string,
+    disableFunding : $ReadOnlyArray<$Values<typeof FUNDING>>,
+    fundingEligibility : FundingEligibilityType,
+    layout : $Values<typeof BUTTON_LAYOUT>,
+    locale : LocaleType,
+    merchantID? : $ReadOnlyArray<string>,
+    vault : boolean
+|};
+
+export function isInlineXOEligible({ props } : {| props : InlineCheckoutEligibilityProps |}) : boolean {
+    const { commit, currency, createBillingAgreement, disableFunding, fundingEligibility, layout, locale, merchantID, vault } = props;
+
+    const isEligible = (
+        locale.country === COUNTRY.US &&
+        commit === true &&
+        !createBillingAgreement &&
+        currency === CURRENCY.USD &&
+        (disableFunding?.indexOf(FUNDING.CARD) === -1) &&
+        (fundingEligibility?.card?.eligible || false) &&
+        layout === BUTTON_LAYOUT.VERTICAL &&
+        merchantID?.length === 0 &&
+        vault === false
+    );
+
+    getLogger()
+        .info('isInlineXOEligible props', { props: JSON.stringify(props) })
+        .info('isInlineXOEligible eligible', { eligible: String(isEligible) })
+        .track({
+            [ FPTI_KEY.TRANSITION ]: `inline_xo_eligibility_${ String(isEligible) }`
+        }).flush();
+
+    return isEligible;
+}