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

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", 0);
+}
+
+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);
+}