@paypal/checkout-components 5.0.207 → 5.0.209-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## <small>5.0.209-alpha.1 (2022-04-12)</small>
+
+* bump version for publishing ([02ed39d](https://github.com/paypal/paypal-checkout-components/commit/02ed39d))
+
+
+
+## <small>5.0.208 (2022-04-06)</small>
+
+* onComplete (#1906) ([426178d](https://github.com/paypal/paypal-checkout-components/commit/426178d)), closes [#1906](https://github.com/paypal/paypal-checkout-components/issues/1906)
+
+
+
 ## <small>5.0.207 (2022-04-05)</small>
 
 * chore: update packages to krakenjs scope (#1885) ([fd1bb83](https://github.com/paypal/paypal-checkout-components/commit/fd1bb83)), closes [#1885](https://github.com/paypal/paypal-checkout-components/issues/1885)

package/README.md

@@ -73,7 +73,7 @@ npm run lint -- --fix
 # attempt to automatically fix any problems
 ```
 
-Runs [eslint](https://eslint.org/) using [definitions](./.eslinter.js) extended from [Grumbler-Scripts](https://github.com/krakenjs/grumbler-scripts/blob/main/config/.eslintrc-browser.js).
+Runs [eslint](https://eslint.org/) using [definitions](./.eslinter.js) extended from [Grumbler-Scripts](https://github.com/krakenjs/@krakenjs/grumbler-scripts/blob/main/config/.eslintrc-browser.js).
 
 ### flow
 

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.207",
+    "version": "5.0.209-alpha.1",
     "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,6 +62,7 @@
     "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",

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,97 @@
+/* @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_KEY.CONTEXT_ID]:            buttonId,
+        [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/ui/buttons/props.js

@@ -36,6 +36,8 @@ export type OnApproveData = {|
     paymentID? : string
 |};
 
+export type OnCompleteData = {||};
+
 export type CreateBillingAgreement = () => ZalgoPromise<string> | string;
 
 export type CreateSubscriptionRequest = {||};
@@ -65,7 +67,12 @@ export type OnApproveActions = {|
     |}
 |};
 
+export type OnCompleteActions = {|
+    redirect : (string, CrossDomainWindowType) => ZalgoPromise<void>
+|};
+
 export type OnApprove = (data : OnApproveData, actions : OnApproveActions) => ZalgoPromise<void> | void;
+export type OnComplete = (data : OnCompleteData, actions : OnCompleteActions) => ZalgoPromise<void> | void;
 
 type OnShippingChangeAddress = {|
     city : string,
@@ -201,7 +208,7 @@ export type ApplePayShippingMethod = {|
 |};
 
 export type ApplePayShippingContactUpdate = {|
-    errors? : $ReadOnlyArray<ApplePayErrorCode>,
+    errors? : $ReadOnlyArray<ApplePayError>,
     newShippingMethods? : $ReadOnlyArray<ApplePayShippingMethod>,
     newTotal : ApplePayLineItem,
     newLineItems? : $ReadOnlyArray<ApplePayLineItem>
@@ -283,6 +290,7 @@ export type ButtonProps = {|
     createSubscription : CreateSubscription,
     oncancel : OnCancel,
     onApprove : OnApprove,
+    onComplete : OnComplete,
     onClick : OnClick,
     getPrerenderDetails : GetPrerenderDetails,
     style : ButtonStyle,

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 '@krakenjs/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';
 import { EXPERIENCE } from '../../constants';
@@ -203,6 +203,11 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 required: false
             },
 
+            onComplete: {
+                type:     'function',
+                required: false
+            },
+
             onShippingChange: {
                 type:       'function',
                 required:   false,
@@ -257,6 +262,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 '@krakenjs/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>

package/src/zoid/buttons/util.js

@@ -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) => {

package/src/zoid/card-fields/component.jsx

@@ -47,6 +47,7 @@ type CardFieldsProps = {|
 
     createOrder : () => ZalgoPromise<string> | string,
     onApprove : ({| returnUrl : string |}, {| redirect : (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>,
+    onComplete : ({| returnUrl : string |}, {| redirect : (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>,
     onCancel ? : ({| cancelUrl : string |}, {| redirect : (? CrossDomainWindowType, ? string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>
 |};
 
@@ -165,6 +166,12 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                     value:      ({ props }) => props.parent.props.onApprove
                 },
 
+                onComplete: {
+                    type:     'function',
+                    required: false,
+                    value:      ({ props }) => props.parent.props.onComplete
+                },
+
                 onCancel: {
                     type:     'function',
                     required: false,
@@ -336,6 +343,11 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                 required: false
             },
 
+            onComplete: {
+                type:     'function',
+                required: false
+            },
+
             onCancel: {
                 type:     'function',
                 required: false

package/src/zoid/card-form/component.js

@@ -103,6 +103,11 @@ export function getCardFormComponent() : CardFormComponent {
                     alias: 'onAuthorize'
                 },
 
+                onComplete: {
+                    type:     'function',
+                    required: false
+                },
+
                 onAuth: {
                     type:       'function',
                     required:   false,

package/src/zoid/checkout/component.jsx

@@ -191,6 +191,11 @@ export function getCheckoutComponent() : CheckoutComponent {
                     type:     'function',
                     alias:    'onAuthorize'
                 },
+                
+                onComplete: {
+                    type:     'function',
+                    required: false
+                },
         
                 onShippingChange: {
                     type:     'function',

package/src/zoid/checkout/props.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 import type { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
+import type { CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { FUNDING, ENV, type LocaleType } from '@paypal/sdk-constants/src';
 
 export type OnApproveData = {|
@@ -13,6 +14,10 @@ export type OnApproveActions = {|
     
 |};
 
+export type OnCompleteData = {||};
+export type OnCompleteActions = {|
+    redirect : (string, CrossDomainWindowType) => ZalgoPromise<void>
+|};
 export type OnCancelData = {|
     orderID : string,
     paymentID? : string
@@ -26,6 +31,7 @@ export type CheckoutPropsType = {|
     createOrder : () => ZalgoPromise<string>,
     createAuthCode : () => ZalgoPromise<string>,
     onApprove : (OnApproveData, OnApproveActions) => ?ZalgoPromise<void>,
+    onComplete : (OnCompleteData, OnCompleteActions) => ?ZalgoPromise<void>,
     onCancel? : (OnCancelData, OnCancelActions) => ?ZalgoPromise<void>,
     fundingSource : $Values<typeof FUNDING>,
     env : $Values<typeof ENV>,