@paypal/checkout-components 5.0.227 → 5.0.230

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## <small>5.0.230 (2022-07-06)</small>
+
+* chore: update minimum height for single name field (#1962) ([92d81aa](https://github.com/paypal/paypal-checkout-components/commit/92d81aa)), closes [#1962](https://github.com/paypal/paypal-checkout-components/issues/1962)
+
+
+
+## <small>5.0.229 (2022-06-23)</small>
+
+* chore: remove Inline XO experiment (#1956) ([edc220d](https://github.com/paypal/paypal-checkout-components/commit/edc220d)), closes [#1956](https://github.com/paypal/paypal-checkout-components/issues/1956)
+
+
+
+## <small>5.0.228 (2022-06-22)</small>
+
+* Inline XO: Experiment (#1955) ([86f0b47](https://github.com/paypal/paypal-checkout-components/commit/86f0b47)), closes [#1955](https://github.com/paypal/paypal-checkout-components/issues/1955)
+
+
+
 ## <small>5.0.227 (2022-06-10)</small>
 
 * chore: log screen information for SFVC path (#1951) ([6eb2270](https://github.com/paypal/paypal-checkout-components/commit/6eb2270)), closes [#1951](https://github.com/paypal/paypal-checkout-components/issues/1951)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.227",
+    "version": "5.0.230",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {

package/src/zoid/buttons/component.jsx

@@ -5,7 +5,8 @@
 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, getVersion } 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, EVENT, type ZoidComponent } from '@krakenjs/zoid/src';
@@ -28,8 +29,8 @@ import { type InlineXOEligibilityType } from '../../types';
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
 import { applePaySession, determineFlow, isSupportedNativeBrowser, createVenmoExperiment,
-    createNoPaylaterExperiment, getRenderedButtons, getButtonSize, getButtonExperiments, isInlineXOEligible } from './util';
-    
+    getRenderedButtons, getButtonSize, getButtonExperiments, isInlineXOEligible } from './util';
+
 
 export type ButtonsComponent = ZoidComponent<ButtonProps>;
 
@@ -52,7 +53,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
 
         prerenderTemplate: ({ state, props, doc, event }) => {
             const { buttonSessionID } = props;
-            
+
             if (!isLocalStorageEnabled()) {
                 getLogger().info('localstorage_inaccessible_possible_private_browsing').track({
                     [ FPTI_KEY.BUTTON_SESSION_UID ]: buttonSessionID,
@@ -113,7 +114,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 fundingEligibility = getRefinedFundingEligibility(),
                 supportsPopups = userAgentSupportsPopups(),
                 supportedNativeBrowser = isSupportedNativeBrowser(),
-                experiment = getButtonExperiments(fundingSource),
+                experiment = getButtonExperiments(),
                 createBillingAgreement, createSubscription
             } = props;
 
@@ -263,19 +264,11 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             onShippingAddressChange: {
                 type:     'function',
                 required: false,
-                queryParam: true,
-                queryValue: ({ value }) => {
-                    return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
-                }
             },
 
             onShippingOptionsChange: {
                 type:     'function',
                 required: false,
-                queryParam: true,
-                queryValue: ({ value }) => {
-                    return value ? QUERY_BOOL.TRUE : QUERY_BOOL.FALSE;
-                }
             },
 
             onCancel: {
@@ -326,23 +319,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                     logLatencyInstrumentationPhase({ buttonSessionID: props.buttonSessionID, phase: 'buttons-first-render' });
 
                     return (...args) => {
-                        const { fundingSource } = props;
                         const venmoExperiment = createVenmoExperiment();
 
                         if (venmoExperiment) {
                             venmoExperiment.logStart({ [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID });
                         }
 
-                        const enableNoPaylaterExperiment = createNoPaylaterExperiment(fundingSource);
-
-                        if (enableNoPaylaterExperiment) {
-                            enableNoPaylaterExperiment.logStart({
-                                [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
-                                [ FPTI_KEY.CONTEXT_ID ]:         props.buttonSessionID,
-                                [ FPTI_KEY.CONTEXT_TYPE ]:       'button_session_id'
-                            });
-                        }
-
                         return value(...args);
                     };
                 }
@@ -473,9 +455,8 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             experiment: {
                 type:       'object',
                 queryParam: true,
-                value:      ({ props }) => {
-                    const { fundingSource } = props;
-                    const experiments = getButtonExperiments(fundingSource);
+                value:      () => {
+                    const experiments = getButtonExperiments();
                     return experiments;
                 }
             },
@@ -711,7 +692,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                         }
                     }
 
-                    return inlineCheckoutEligibility &&  inlineCheckoutEligibility.eligible && alphaEligible && isInlineXOEligible({ props: {
+                    const eligible = inlineCheckoutEligibility && inlineCheckoutEligibility.eligible && alphaEligible && isInlineXOEligible({ props: {
                         commit,
                         createBillingAgreement,
                         currency,
@@ -720,7 +701,18 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                         layout,
                         locale,
                         vault
-                    } }) ? EXPERIENCE.INLINE : '';
+                    } });
+
+                    const logger = getLogger();
+
+                    logger
+                        .info('isInlineXOEligible props', { props: JSON.stringify(props) })
+                        .info('isInlineXOEligible eligible', { eligible: String(eligible) })
+                        .track({
+                            [ FPTI_KEY.TRANSITION ]: `inline_xo_eligibility_${ String(eligible) }`
+                        }).flush();
+
+                    return eligible ? EXPERIENCE.INLINE : '';
                 }
             },
 

package/src/zoid/buttons/util.js

@@ -1,7 +1,7 @@
 /* @flow */
-import { supportsPopups as userAgentSupportsPopups, isAndroid, isChrome, isIos, isIOS14, isSafari, isSFVC, type Experiment, isDevice, isTablet, getElement, isLocalStorageEnabled, isStandAlone } from '@krakenjs/belter/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 { supportsPopups as userAgentSupportsPopups, isAndroid, isChrome, isIos, isIOS14, isSafari, isSFVC, type Experiment, isDevice, isTablet, getElement, isLocalStorageEnabled, isStandAlone, once } from '@krakenjs/belter/src';
+import { COUNTRY, CURRENCY, ENV, FUNDING, type LocaleType } from '@paypal/sdk-constants/src';
+import { getEnableFunding, 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';
@@ -20,7 +20,7 @@ type DetermineFlowOptions = {|
  *
  * @param {string} key for logging
  */
-function logNativeScreenInformation(key = 'screenInformation') {
+const logNativeScreenInformation = once((key = 'screenInformation') => {
   if (window) {
     const height = window.innerHeight;
     const outerHeight = window.outerHeight;
@@ -35,7 +35,7 @@ function logNativeScreenInformation(key = 'screenInformation') {
       // $FlowFixMe - object is mixed values when this expects all of the same value types
       .info(key, screenInformation)
   }
-}
+});
 
 export function determineFlow(props : DetermineFlowOptions) : $Values<typeof BUTTON_FLOW> {
 
@@ -126,39 +126,6 @@ export function getVenmoExperiment() : EligibilityExperiment {
     }
 }
 
-export function createNoPaylaterExperiment(fundingSource : ?$Values<typeof FUNDING>) : Experiment | void {
-    const disableFunding = getDisableFunding();
-    const isDisableFundingPaylater = disableFunding && disableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-    const enableFunding = getEnableFunding();
-    const isEnableFundingPaylater = enableFunding && enableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-
-    const { paylater } = getFundingEligibility();
-    const isEligibleForPaylater = paylater?.eligible;
-    const isExperimentable = paylater?.products?.paylater?.variant === 'experimentable' || paylater?.products?.payIn4?.variant === 'experimentable';
-    // No experiment because ineligible, already forced on or off
-    if (!isEligibleForPaylater
-        || !isExperimentable
-        || isDisableFundingPaylater
-        || isEnableFundingPaylater
-        || fundingSource
-    ) {
-        return;
-    }
-
-    return createExperiment('disable_paylater', 0);
-}
-
-export function getNoPaylaterExperiment(fundingSource : ?$Values<typeof FUNDING>) : EligibilityExperiment {
-    const experiment = createNoPaylaterExperiment(fundingSource);
-
-    const disableFunding = getDisableFunding();
-    const isDisableFundingPaylater = disableFunding && disableFunding.indexOf(FUNDING.PAYLATER) !== -1;
-    const isExperimentEnabled = experiment && experiment.isEnabled();
-    return {
-        disablePaylater: Boolean((isExperimentEnabled || isDisableFundingPaylater))
-    };
-}
-
 export function getVenmoAppLabelExperiment() : EligibilityExperiment  {
     const isEnvForTest = getEnv() === ENV.LOCAL || getEnv() === ENV.TEST || getEnv() === ENV.STAGE;
 
@@ -259,10 +226,9 @@ export function applePaySession() : ?ApplePaySessionConfigRequest {
     }
 }
 
-export function getButtonExperiments (fundingSource : ?$Values<typeof FUNDING>) : EligibilityExperiment {
+export function getButtonExperiments () : EligibilityExperiment {
     return {
         ...getVenmoExperiment(),
-        ...getNoPaylaterExperiment(fundingSource),
         ...getVenmoAppLabelExperiment()
     };
 }
@@ -347,12 +313,5 @@ export function isInlineXOEligible({ props } : {| props : InlineCheckoutEligibil
         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;
 }

package/src/zoid/payment-fields/container.jsx

@@ -67,20 +67,20 @@ export function PaymentFieldsContainer({ uid, frame, prerenderFrame, event, nonc
                         min-width: 250px;
                         max-width: 100%;
                         font-size: 0;
-                        height: 150px;
-                        min-height: 150px;
+                        height: 91px;
+                        min-height: 91px;
                         transition: all 0.5s ease-in-out;
                     }
 
                     @media only screen and (min-width: 0px) {
                         #${ uid } {
-                            min-height: 150px;
+                            min-height: 91px;
                         }
                     }
 
                     @media only screen and (min-width: 600px) {
                         #${ uid } {
-                            min-height: 150px;
+                            min-height: 91px;
                         }
                     }