@paypal/checkout-components 5.0.253-alpha.1 → 5.0.253

package/src/funding/payu/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel} from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getPayuConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getPayuConfig() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => PayuLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(PayuLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/satispay/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getSatispayConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getSatispayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SatispayLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SatispayLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/sepa/config.jsx

@@ -4,6 +4,7 @@
 import { SepaLogo } from '@paypal/sdk-logos/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getSepaConfig() : FundingSourceConfig {
@@ -14,6 +15,6 @@ export function getSepaConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SepaLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SepaLogo, { logoColor, optional })
     };
 }

package/src/funding/sofort/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getSofortConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getSofortConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => SofortLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(SofortLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/trustly/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getTrustlyConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getTrustlyConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => TrustlyLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(TrustlyLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/venmo/config.jsx

@@ -6,9 +6,11 @@ import { PLATFORM } from '@paypal/sdk-constants/src';
 
 import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import { WalletLabel, Label, AppLabel } from './template';
 
+
 export function getVenmoConfig() : FundingSourceConfig {
     return {
         ...DEFAULT_FUNDING_CONFIG,
@@ -39,7 +41,7 @@ export function getVenmoConfig() : FundingSourceConfig {
             return {};
         },
 
-        Logo:  ({ logoColor, optional }) => VenmoLogo({ logoColor, optional }),
+        Logo:  ({ logoColor, optional }) => enableLogoCDNExperiment(VenmoLogo, { logoColor, optional }),
         
         Label: ({ ...props }) => {
             if (props.experiment && props.experiment.enableVenmoAppLabel) {

package/src/funding/venmo/template.jsx

@@ -9,6 +9,7 @@ import {
     BasicLabel
 } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import css from './style.scoped.scss';
  
@@ -17,7 +18,7 @@ export function AppLabel(opts : LabelOptions) : ChildType {
 
     const AppLogo : ChildType = (
         <Style css={ css }>
-            <VenmoLogo logoColor={ logoColor } />
+            {enableLogoCDNExperiment(VenmoLogo, { logoColor })}
             <Text className={ [ 'app-label' ] }>
                 App
             </Text>
@@ -38,7 +39,7 @@ export function Label(opts : LabelOptions) : ChildType {
 export function  WalletLabel({ ...props } : WalletLabelOptions) : ChildType {
     const { instrument, logoColor } = props;
     let label;
-    const logo =  <VenmoLogo logoColor={ logoColor } />;
+    const logo =  enableLogoCDNExperiment(VenmoLogo, { logoColor });
 
     if (instrument && instrument.label) {
         label = instrument.label;

package/src/funding/verkkopankki/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getVerkkopankkiConfig() : FundingSourceConfig {
     return {
@@ -20,7 +21,7 @@ export function getVerkkopankkiConfig() : FundingSourceConfig {
 
         shippingChange: false,
     
-        Logo: ({ logoColor, optional }) => VerkkopankkiLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(VerkkopankkiLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/wechatpay/config.jsx

@@ -7,6 +7,7 @@ import { Fragment, node } from '@krakenjs/jsx-pragmatic/src';
 import { BUTTON_LAYOUT } from '../../constants';
 import { DEFAULT_APM_FUNDING_CONFIG, type FundingSourceConfig, BasicLabel } from '../common';
 import { Text, Space } from '../../ui/text';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 export function getWechatpayConfig() : FundingSourceConfig {
     return {
@@ -18,7 +19,7 @@ export function getWechatpayConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
     
-        Logo: ({ logoColor, optional }) => WechatpayLogo({ logoColor, optional }),
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(WechatpayLogo, { logoColor, optional }),
 
         Label: ({ logo, ...opts }) => {
             if (__WEB__) {

package/src/funding/zimpler/config.jsx

@@ -4,6 +4,7 @@
 import { ZimplerLogo } from '@paypal/sdk-logos/src';
 
 import { BUTTON_LAYOUT } from '../../constants';
+import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
 
 export function getZimplerConfig() : FundingSourceConfig {
@@ -16,6 +17,6 @@ export function getZimplerConfig() : FundingSourceConfig {
             BUTTON_LAYOUT.VERTICAL
         ],
 
-        Logo: ({ logoColor, optional }) => ZimplerLogo({ logoColor, optional })
+        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(ZimplerLogo, { logoColor, optional })
     };
 }

package/src/lib/getLogoCDNExperiment.js

@@ -0,0 +1,25 @@
+/* @flow */
+
+import { createExperiment } from "@paypal/sdk-client/src";
+import type { Experiment } from "@krakenjs/belter/src";
+import type { ChildType } from "@krakenjs/jsx-pragmatic/src";
+
+export function getLogoCDNExperiment(): Experiment {
+  return createExperiment("enable_logo_cdn_experiment", 5);
+}
+
+export function enableLogoCDNExperiment<T>(
+  logo: (T) => ChildType,
+  logoOptions: T
+): ChildType {
+  // enable logo CDN experiment for first render only
+  if (__WEB__) {
+    const logoCDNExperiment = getLogoCDNExperiment();
+    const loadFromCDN = logoCDNExperiment.isEnabled();
+
+    return logo({ ...logoOptions, loadFromCDN });
+  }
+
+  // continue using inline svg for second render
+  return logo(logoOptions);
+}

package/src/zoid/buttons/component.jsx

@@ -25,6 +25,7 @@ import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
 import { EXPERIENCE } from '../../constants';
 import { type InlineXOEligibilityType } from '../../types';
+import { getLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
@@ -325,6 +326,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                             venmoExperiment.logStart({ [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID });
                         }
 
+                        const logoCDNExperiment = getLogoCDNExperiment();
+
+                        if (logoCDNExperiment) {
+                          logoCDNExperiment.logStart({ [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID });
+                        }
+
                         return value(...args);
                     };
                 }
@@ -686,15 +693,6 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                         vault
                     } });
 
-                    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/card-fields/component.jsx

@@ -8,7 +8,7 @@ import { create, type ZoidComponent } from '@krakenjs/zoid/src';
 import type { CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
 import { memoize, uniqueID } from '@krakenjs/belter/src';
 import { getLocale, getEnv, getSDKMeta, getDisableCard, getPayPalDomain, getClientID, getDebug, getCurrency, getIntent,
-    getCommit, getVault, getUserIDToken } from '@paypal/sdk-client/src';
+    getCommit, getVault, getCorrelationID, getPartnerAttributionID, getMerchantID, getUserIDToken } from '@paypal/sdk-client/src';
 import { getRefinedFundingEligibility } from '@paypal/funding-components/src';
 import { CARD, CURRENCY, INTENT, type FundingEligibilityType } from '@paypal/sdk-constants/src';
 
@@ -58,7 +58,15 @@ type CardFieldsProps = {|
     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>,
-    action: Object
+    action: Object,
+    sdkCorrelationID: string,
+    hcfSessionID: string,
+    partnerAttributionID: string,
+    merchantID: $ReadOnlyArray<string>,
+    save: {|
+        createVaultSetupToken: () => ZalgoPromise<string>,
+        onApprove: ({|vaultSetupToken: string|}) => ?ZalgoPromise<void>
+    |}
 |};
 
 type CardFieldProps = {|
@@ -151,13 +159,13 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
             },
 
             props: {
-                action: {
+                save: {
                     type: 'object',
                     value: ({props}) => {
-                        if (props.action) {
-                            return props.action
+                        if (props.save) {
+                            return props.save
                         } else {
-                            return props.parent.props.action
+                            return props.parent.props.save
                         }
                     }
                 },
@@ -329,7 +337,27 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                     required:   false,
                     value:      ({ props }) => props.parent.props.branded
                 },
-
+                sdkCorrelationID: {
+                    type:       'string',
+                    required:   false,
+                    value:      ({ props }) => props.parent.props.sdkCorrelationID,
+                    queryParam: true
+                },
+                hcfSessionID : {
+                    type:       'string',
+                    required: false,
+                    value: ({ props }) => props.parent.props.hcfSessionID
+                },
+                partnerAttributionID: {
+                    type:       'string',
+                    required:   false,
+                    value:      ({ props }) => props.parent.props.partnerAttributionID
+                },
+                merchantID: {
+                    type:       'array',
+                    queryParam: true,
+                    value:      ({ props }) => props.parent.props.merchantID
+                },
                 userIDToken: {
                     type:       'string',
                     default:    getUserIDToken,
@@ -418,7 +446,7 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
         },
 
         props: {
-            action: {
+            save: {
                 type:       'object',
             },
 
@@ -437,7 +465,7 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
             sessionID: {
                 type:       'string',
                 required:   false,
-                default:    getSessionID,
+                value:    getSessionID,
                 queryParam: true
             },
 
@@ -564,7 +592,27 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                 queryParam: true,
                 required:   false
             },
-
+            sdkCorrelationID: {
+                type:       'string',
+                required:   false,
+                value:      getCorrelationID,
+                queryParam: true
+            },
+            hcfSessionID : {
+                type:       'string',
+                required:   false,
+                value:      uniqueID
+            },
+            partnerAttributionID: {
+                type:       'string',
+                required:   false,
+                value:      getPartnerAttributionID
+            },
+            merchantID: {
+                type:       'array',
+                queryParam: true,
+                value:      getMerchantID
+            },
             userIDToken: {
                 type:       'string',
                 default:    getUserIDToken,