@paypal/checkout-components 5.0.217 → 5.0.220

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.217",
+    "version": "5.0.220",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "engines": {
@@ -86,17 +86,17 @@
         "serve": "^13.0.0"
     },
     "dependencies": {
-        "@paypal/common-components": "^1.0.27",
-        "@paypal/funding-components": "^1.0.27",
-        "@paypal/sdk-client": "^4.0.166",
-        "@paypal/sdk-constants": "^1.0.107",
-        "@paypal/sdk-logos": "^1.0.45",
         "@krakenjs/belter": "^2.0.0",
         "@krakenjs/cross-domain-utils": "^3.0.0",
         "@krakenjs/jsx-pragmatic": "^3",
         "@krakenjs/post-robot": "^11.0.0",
         "@krakenjs/zalgo-promise": "^2.0.0",
-        "@krakenjs/zoid": "^10.0.0"
+        "@krakenjs/zoid": "^10.0.0",
+        "@paypal/common-components": "^1.0.27",
+        "@paypal/funding-components": "^1.0.27",
+        "@paypal/sdk-client": "^4.0.166",
+        "@paypal/sdk-constants": "^1.0.119",
+        "@paypal/sdk-logos": "^1.0.45"
     },
     "lint-staged": {
         "*.sh": "prettier --write"

package/src/funding/card/config.jsx

@@ -122,15 +122,16 @@ export function getCardConfig() : FundingSourceConfig {
         },
 
         Label: ({ logo, locale, content, custom }) => {
-            if (custom) {
+            if (custom && custom.label && custom.label.length) {
                 const validLabels = {
                     checkout: 'Checkout'
                 };
 
                 let label = validLabels.checkout;
 
-                if (custom.label && typeof custom.label === 'string' && validLabels[custom.label.toLowerCase()]) {
-                    label = validLabels[custom.label.toLowerCase()];
+                const lowerCaseLabel = custom.label.toLowerCase();
+                if (validLabels[lowerCaseLabel]) {
+                    label = validLabels[lowerCaseLabel];
                 }
 
                 return (

package/src/lib/index.js

@@ -4,3 +4,4 @@ export * from './errors';
 export * from './isRTLLanguage';
 export * from './security';
 export * from './session';
+export * from './perceived-latency-instrumentation';

package/src/lib/perceived-latency-instrumentation.js

@@ -0,0 +1,61 @@
+/* @flow */
+
+type LogLatencyInstrumentationPhaseParams = {|
+    buttonSessionID : string,
+    phase : string
+|};
+
+type InstrumentationPayload = {|
+    comp? : Object,
+    chunk? : Object,
+    query? : Object
+|};
+
+function getNavigationTimeOrigin() : number {
+    if (window.performance) {
+        const hrSyncPoint = performance.now();
+        const unixSyncPoint = new Date().getTime();
+        return window.performance.timeOrigin || window.performance.timing.navigationStart || (unixSyncPoint - hrSyncPoint);
+    } else {
+        throw new Error('window.performance not supported');
+    }
+}
+
+function getStartTimeFromMark({ buttonSessionID, phase } : LogLatencyInstrumentationPhaseParams) : number {
+    if (window.performance) {
+        return performance.getEntriesByName(`${ buttonSessionID }_${ phase }`).pop().startTime;
+    } else {
+        throw new Error('window.performance not supported');
+    }
+}
+
+/* To Track time spent in each phase(cdn download, chunks download, etc)
+    logLatencyInstrumentationPhase({
+        buttonID: buttonId,
+        phase: 'html_body'
+    })
+    logLatencyInstrumentationPhase({
+        buttonID: buttonId,
+        phase: 'html_body'
+    })
+*/
+export const logLatencyInstrumentationPhase = ({ buttonSessionID, phase } : LogLatencyInstrumentationPhaseParams) => {
+    if (window.performance && window.performance.mark) {
+        window.performance.mark(`${ buttonSessionID }_${ phase }`);
+    }
+};
+
+export const prepareInstrumentationPayload = (buttonSessionID : string) : InstrumentationPayload => {
+    const timeOrigin = getNavigationTimeOrigin();
+    const renderStartTime = getStartTimeFromMark({ buttonSessionID, phase: 'buttons-first-render' });
+    const renderEndTime = getStartTimeFromMark({ buttonSessionID, phase: 'buttons-first-render-end' });
+    return {
+        comp: {
+            'first-render': {
+                start: timeOrigin + renderStartTime,
+                tt:    renderEndTime - renderStartTime
+            }
+        }
+    };
+};
+

package/src/types.js

@@ -54,10 +54,10 @@ export type Requires = {|
 |};
 
 export type CustomStyle = {|
-    css : {|
+    css? : {|
         [string] : string
     |},
-    label : string
+    label? : string
 |};
 
 export type LazyExport<T> = {|

package/src/ui/buttons/button.jsx

@@ -46,7 +46,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
     userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
     
     const { custom, layout, shape } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
     const fundingConfig = getFundingConfig()[fundingSource];
 
     if (!fundingConfig) {
@@ -130,7 +130,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             personalization={ personalization }
             tagline={ tagline }
             content={ content }
-            custom={ inlineExperience ? custom : null }
+            custom={ inlineExperience ? custom : undefined }
             experiment={ experiment }
         />
     );

package/src/ui/buttons/buttons.jsx

@@ -102,7 +102,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
         nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
         supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
-    const inlineExperience = experience === EXPERIENCE.INLINE && custom;
+    const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
 
     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

@@ -138,7 +138,7 @@ export type ButtonStyle = {|
     menuPlacement : $Values<typeof MENU_PLACEMENT>,
     period? : number,
     height? : number,
-    custom? : CustomStyle
+    custom? : ?CustomStyle
 |};
 
 export type ButtonStyleInputs = {|
@@ -149,7 +149,7 @@ export type ButtonStyleInputs = {|
     layout? : $Values<typeof BUTTON_LAYOUT> | void,
     period? : number | void,
     height? : number | void,
-    custom? : CustomStyle
+    custom? : ?CustomStyle
 |};
 
 type PersonalizationComponentProps = {|
@@ -454,6 +454,28 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         }
     }
 
+    if (custom) {
+        if (custom.label && typeof custom.label !== 'string') {
+            throw new Error(`style.custom.label is expected to be a String.`);
+        }
+
+        if (custom.css && typeof custom.css !== 'object') {
+            throw new Error(`style.custom.css is expected to be JSON.`);
+        }
+
+        if (custom.css && custom.label && custom.label.length === 0) {
+            throw new Error(`Expected style.custom.label to be used with style.custom.css`);
+        }
+
+        if (custom.label && custom.label.length > 0 && !custom.css) {
+            custom.css = {
+                'background-color': 'black',
+                'height': '48px',
+                'margin-bottom': '15px'
+            }
+        }
+    }
+
     return { custom, label, layout, color, shape, tagline, height, period, menuPlacement };
 }
 

package/src/ui/buttons/style.jsx

@@ -15,7 +15,7 @@ type StyleProps = {|
 
 export function Style({ style, nonce, fundingEligibility } : StyleProps) : ElementNode {
 
-    const { custom, height } = style;
+    const { custom = { label: undefined, css: undefined }, height } = style;
     const css = componentStyle({ custom, height, fundingEligibility });
 
     return (

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

@@ -11,7 +11,7 @@ import { buttonResponsiveStyle } from './responsive';
 import { buttonColorStyle } from './color';
 import { customStyle } from './custom';
 
-export function componentStyle({ custom, height, fundingEligibility } : {| custom? : CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
+export function componentStyle({ custom, height, fundingEligibility } : {| custom? : ?CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
     return `
         ${ pageStyle }
         ${ buttonStyle }

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

@@ -3,7 +3,7 @@
 import type { CustomStyle } from '../../../types';
 import { CLASS } from '../../../constants';
 
-export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string => {
+export const customStyle = ({ custom } : {| custom? : ?CustomStyle |}) : string => {
     const { css } = custom || {};
     
     if (!css) {

package/src/zoid/buttons/component.jsx

@@ -8,12 +8,18 @@ import { getLogger, getLocale, getClientID, getEnv, getIntent, getCommit, getVau
     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';
+import { create, EVENT, type ZoidComponent } from '@krakenjs/zoid/src';
 import { uniqueID, memoize, isApplePaySupported, supportsPopups as userAgentSupportsPopups, noop, isLocalStorageEnabled } from '@krakenjs/belter/src';
 import { FUNDING, FUNDING_BRAND_LABEL, QUERY_BOOL, ENV, FPTI_KEY } from '@paypal/sdk-constants/src';
 import { node, dom } from '@krakenjs/jsx-pragmatic/src';
 
-import { getSessionID, storageState, sessionState } from '../../lib';
+import {
+    getSessionID,
+    storageState,
+    sessionState,
+    logLatencyInstrumentationPhase,
+    prepareInstrumentationPayload
+} from '../../lib';
 import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
 import { EXPERIENCE } from '../../constants';
@@ -44,7 +50,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
 
         logger: getLogger(),
 
-        prerenderTemplate: ({ state, props, doc }) => {
+        prerenderTemplate: ({ state, props, doc, event }) => {
             const { buttonSessionID } = props;
             
             if (!isLocalStorageEnabled()) {
@@ -56,6 +62,28 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 });
             }
 
+            event.on(EVENT.PRERENDERED, () => {
+                // CPL stands for Consumer Perceived Latency
+                logLatencyInstrumentationPhase({ buttonSessionID, phase: 'buttons-first-render-end' });
+                try {
+                    const cplPhases = prepareInstrumentationPayload(buttonSessionID);
+                    const cplLatencyMetrics = {
+                        [FPTI_KEY.STATE]:                 'CPL_LATENCY_METRICS',
+                        [FPTI_KEY.TRANSITION]:            'process_client_metrics',
+                        [FPTI_KEY.CONTEXT_ID]:            buttonSessionID,
+                        [FPTI_KEY.PAGE]:                  'main:xo:paypal-components:smart-payment-buttons',
+                        [FPTI_KEY.CPL_COMP_METRICS]:      JSON.stringify(cplPhases?.comp || {})
+                    };
+                    getLogger().info('CPL_LATENCY_METRICS_FIRST_RENDER').track(cplLatencyMetrics);
+                } catch (err) {
+                    getLogger().info('button_render_CPL_instrumentation_log_error').track({
+                        err:      err.message || 'CPL_LOG_PHASE_ERROR',
+                        details:  err.details,
+                        stack:    JSON.stringify(err.stack || err)
+                    });
+                }
+            });
+
             return (
                 <PrerenderedButtons
                     nonce={ props.nonce }
@@ -275,6 +303,8 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required: false,
                 default:  () => noop,
                 decorate: ({ props, value = noop }) => {
+                    logLatencyInstrumentationPhase({ buttonSessionID: props.buttonSessionID, phase: 'buttons-first-render' });
+
                     return (...args) => {
                         const { fundingSource } = props;
                         const venmoExperiment = createVenmoExperiment();