@paypal/checkout-components 5.0.218 → 5.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.218",
+    "version": "5.0.221",
     "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/config.js

@@ -57,6 +57,7 @@ export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourc
             [ FUNDING.WECHATPAY ]:      (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.wechatpay !== 'undefined'      && __FUNDING_ELIGIBILITY__.wechatpay.eligible)) ? getWechatpayConfig() : null,
             [ FUNDING.OXXO ]:           (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.oxxo !== 'undefined'           && __FUNDING_ELIGIBILITY__.oxxo.eligible)) ? getOxxoConfig() : null,
             [ FUNDING.BOLETO ]:         (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.boleto !== 'undefined'         && __FUNDING_ELIGIBILITY__.boleto.eligible)) ? getBoletoConfig() : null,
+            [ FUNDING.BOLETOBANCARIO ]: (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.boletobancario !== 'undefined' && __FUNDING_ELIGIBILITY__.boletobancario.eligible)) ? getBoletoConfig() : null,
             [ FUNDING.MAXIMA ]:         (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.maxima !== 'undefined'         && __FUNDING_ELIGIBILITY__.maxima.eligible)) ? getMaximaConfig() : null,
             [ FUNDING.MERCADOPAGO ]:    (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.mercadopago !== 'undefined'    && __FUNDING_ELIGIBILITY__.mercadopago.eligible)) ? getMercadopagoConfig() : null,
             [ FUNDING.MULTIBANCO ]:     (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.multibanco !== 'undefined'     && __FUNDING_ELIGIBILITY__.multibanco.eligible)) ? getMultibancoConfig() : null

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/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();