@paypal/checkout-components 5.0.202 → 5.0.203-alpha.0

package/package.json

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

package/src/constants/misc.js

@@ -13,4 +13,11 @@ export const ATTRIBUTE = {
     PAY_NOW:           ('data-pay-now' : 'data-pay-now')
 };
 
+export const FPTI_CPL_KEY = {
+    PAGE_NAME:              ('page_name' : 'page_name'),
+    CPL_COMP_METRICS:       ('cpl_comp_metrics' : 'cpl_comp_metrics'),
+    CPL_CHUNK_METRICS:      ('cpl_chunk_metrics' : 'cpl_chunk_metrics'),
+    CPL_QUERY_METRICS:      ('cpl_query_metrics' : 'cpl_query_metrics')
+};
+
 export const DEFAULT = ('default' : 'default');

package/src/lib/cpl.js

@@ -0,0 +1,96 @@
+/* @flow */
+import { getLogger } from '@paypal/sdk-client/src';
+import { FPTI_KEY } from '@paypal/sdk-constants/src';
+
+import { FPTI_CPL_KEY } from '../constants';
+
+/* To Track time spent in each phase(cdn download, chunks download, etc)
+    logCPLPhase('first_interactable_render')
+    logCPLPhase('html_body', 'comp', true);
+    logCPLPhase('html_body', 'comp');
+*/
+const cplPhases = {};
+export const logCPLPhase = (buttonID : string, phase : string, category : string, isStart : ?boolean) => {
+    try {
+        // to remove Query from phase
+        phase = phase.replace(/Query/g, '');
+        if (!cplPhases[buttonID]) {
+            cplPhases[buttonID] = {
+                query: {},
+                chunk: {},
+                comp:  {}
+            };
+        }
+        const epochNow = Date.now();
+        if (category && cplPhases[buttonID][category] && phase) {
+            if (isStart && !cplPhases[buttonID][category][phase]) {
+                cplPhases[buttonID][category][phase] = {
+                    start: epochNow
+                };
+            } else if (cplPhases[buttonID][category][phase]) {
+                if (
+                    cplPhases[buttonID][category][phase].start &&
+                    !cplPhases[buttonID][category][phase].tt
+                ) {
+                    cplPhases[buttonID][category][phase].tt =
+                        epochNow - cplPhases[buttonID][category][phase].start;
+                }
+            } else {
+                getLogger().info('CPL_LOG_PHASE_UNHANDLED_CONDITION').track({
+                    phase,
+                    category,
+                    isStart
+                }).flush();
+            }
+        } else if (phase && !cplPhases[buttonID][category][phase]) {
+            if (performance && performance.timing) {
+                cplPhases[buttonID][category][phase] = epochNow - performance.timing.fetchStart;
+            }
+        }
+    } catch (err) {
+        getLogger().info('CPL_LOG_PHASE_ERROR').track({
+            phase,
+            category,
+            isStart,
+            err:      err.message || 'CPL_LOG_PHASE_ERROR',
+            details:  err.details,
+            stack:    JSON.stringify(err.stack || err)
+        }).flush();
+    }
+};
+
+const _store = {
+    triggerInitialCPLEvent: true,
+    hasContingencies:       false
+};
+
+const triggerCPLLatencyMetricsFPTI = (buttonId : string) => {
+    const cplLatencyMetrics = {
+        [FPTI_KEY.STATE]:                 'CPL_LATENCY_METRICS',
+        [FPTI_KEY.TRANSITION]:            'process_client_metrics',
+        [FPTI_CPL_KEY.PAGE_NAME]:         `main:xo:paypal-components:smart-payment-buttons`,
+        [FPTI_CPL_KEY.CPL_COMP_METRICS]:  JSON.stringify(cplPhases?.[buttonId]?.comp || {}),
+        [FPTI_CPL_KEY.CPL_QUERY_METRICS]: JSON.stringify(cplPhases?.[buttonId]?.query || {}),
+        [FPTI_CPL_KEY.CPL_CHUNK_METRICS]: JSON.stringify(cplPhases?.[buttonId]?.chunk || {})
+    };
+
+    getLogger().info('CPL_LATENCY_METRICS_FIRST_RENDER').track(cplLatencyMetrics).flush();
+};
+
+export const updateTriggerInitialCPLEvent = (state : boolean) => {
+    getLogger().info(`CPL_UPDATE_TRIGGER_INITIAL_CPL_EVENT_TO_${ state.toString() }`).flush();
+    _store.triggerInitialCPLEvent = state;
+};
+
+export const shouldTriggerInitialCPLEvent = () : boolean => {
+    return _store.triggerInitialCPLEvent;
+};
+
+export const triggerInitialCPLEvent = (buttonId : string) => {
+    if (shouldTriggerInitialCPLEvent()) {
+        // Set the flag to false so that CPL call is not triggered again
+        updateTriggerInitialCPLEvent(false);
+        // Trigger FPTI event to capture the time spent on different phases.
+        triggerCPLLatencyMetricsFPTI(buttonId);
+    }
+};

package/src/lib/index.js

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

package/src/zoid/buttons/component.jsx

@@ -13,7 +13,7 @@ import { uniqueID, memoize, isApplePaySupported, supportsPopups as userAgentSupp
 import { FUNDING, FUNDING_BRAND_LABEL, QUERY_BOOL, ENV, FPTI_KEY } from '@paypal/sdk-constants/src';
 import { node, dom } from 'jsx-pragmatic/src';
 
-import { getSessionID, storageState, sessionState } from '../../lib';
+import { getSessionID, storageState, sessionState, logCPLPhase } from '../../lib';
 import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
 
@@ -256,6 +256,7 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required: false,
                 default:  () => noop,
                 decorate: ({ props, value = noop }) => {
+                    logCPLPhase(props.buttonSessionID, 'first_render', 'comp', true);
                     return (...args) => {
                         const { fundingSource } = props;
                         const venmoExperiment = createVenmoExperiment();

package/src/zoid/buttons/prerender.jsx

@@ -12,6 +12,7 @@ import type { ZoidProps } from 'zoid/src';
 import { DEFAULT_POPUP_SIZE } from '../checkout';
 import { Buttons } from '../../ui';
 import { type ButtonProps } from '../../ui/buttons/props';
+import { logCPLPhase, triggerInitialCPLEvent } from '../../lib';
 
 type PrerenderedButtonsProps = {|
     nonce : ?string,
@@ -66,7 +67,8 @@ export function PrerenderedButtons({ nonce, onRenderCheckout, props } : Prerende
             onRenderCheckout({ fundingSource, card });
         }
     };
-
+    logCPLPhase(props.buttonSessionID, 'first_render', 'comp');
+    triggerInitialCPLEvent(props.buttonSessionID);
     return (
         <html>
             <body>