@paypal/checkout-components 5.0.208 → 5.0.209

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.208",
+    "version": "5.0.209",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {
-        "node": ">=14.13.1",
+        "node": ">=14.13.1 <16",
         "npm": ">=6"
     },
     "scripts": {
@@ -62,13 +62,13 @@
     "license": "Apache-2.0",
     "readmeFilename": "README.md",
     "devDependencies": {
+        "@krakenjs/grumbler-scripts": "^6.0.2",
         "@krakenjs/sync-browser-mocks": "^3.0.0",
         "babel-core": "^7.0.0-bridge.0",
         "bundlemon": "^1.1.0",
         "conventional-changelog-cli": "^2.0.34",
         "flow-bin": "0.155.0",
         "fs-extra": "^10.0.0",
-        "grumbler-scripts": "^5.0.1",
         "husky": "^7.0.4",
         "imagemagick": "^0.1.3",
         "imgur": "^0.3.1",
@@ -81,7 +81,7 @@
         "pixelmatch": "^5.2.1",
         "pngjs": "^6.0.0",
         "prettier": "^2.5.1",
-        "prettier-plugin-sh": "^0.8.1",
+        "prettier-plugin-sh": "^0.10.0",
         "puppeteer": "^1.20.0",
         "serve": "^13.0.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/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;

package/src/ui/buttons/props.js

@@ -184,18 +184,15 @@ export type Personalization = {|
     |}
 |};
 
-export type ApplePayErrorCode = 'shippingContactInvalid' | 'billingContactInvalid' | 'addressUnserviceable' | 'unknown';
-export type ApplePayContactField = 'phoneNumber' | 'emailAddress' | 'givenName' | 'familyName' | 'phoneticGivenName' | 'phoneticFamilyName' | 'addressLines' | 'subLocality' | 'locality' | 'postalCode' | 'subAdministrativeArea' | 'administrativeArea' | 'country' | 'countryCode';
-
+// https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerror/2970147-applepayerror
 export type ApplePayError = {|
-    code : ApplePayErrorCode,
-    contactField : ApplePayContactField,
-    message : string
+    code : string, // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerrorcode
+    contactField : string, // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerrorcontactfield
+    message : string // custom error message
 |};
 
-export type ApplePayLineItemType = 'final' | 'pending';
 export type ApplePayLineItem = {|
-    type? : ApplePayLineItemType,
+    type? : string, // 'final' | 'pending'
     label? : string,
     amount? : string
 |};
@@ -208,7 +205,7 @@ export type ApplePayShippingMethod = {|
 |};
 
 export type ApplePayShippingContactUpdate = {|
-    errors? : $ReadOnlyArray<ApplePayErrorCode>,
+    errors? : $ReadOnlyArray<ApplePayError>,
     newShippingMethods? : $ReadOnlyArray<ApplePayShippingMethod>,
     newTotal : ApplePayLineItem,
     newLineItems? : $ReadOnlyArray<ApplePayLineItem>
@@ -288,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,
@@ -309,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/zoid/buttons/component.jsx

@@ -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>;
 
@@ -608,10 +610,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 &&  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';
@@ -172,12 +172,10 @@ export function applePaySession() : ?ApplePaySessionConfigRequest {
         }
 
         const convertErrorsFromUpdate = (update) => {
-            if (update.errors && update.errors.length) {
-                // $FlowFixMe
-                return update.errors.map(error => new window.ApplePayError(error.code, error.contactField, error.message));
-            }
-
-            return update;
+            return {
+                ...update,
+                errors: (update.errors || []).map(error => new window.ApplePayError(error.code, error.contactField, error.message))
+            };
         };
 
         return (version, request) => {
@@ -298,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;
+}