@paypal/checkout-components 5.0.252-alpha.2 → 5.0.252-alpha.3

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/interface/card-fields.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import { destroy as zoidDestroy } from '@krakenjs/zoid/src';
+
 import type { LazyExport } from '../types';
 import { getCardFieldsComponent, type CardFieldsComponent } from '../zoid/card-fields/component';
 import { protectedExport } from '../lib';
@@ -7,3 +9,7 @@ import { protectedExport } from '../lib';
 export const CardFields : LazyExport<CardFieldsComponent> = {
     __get__: () => protectedExport(getCardFieldsComponent())
 };
+
+export function destroy(err? : mixed) {
+    zoidDestroy(err);
+}

package/src/lib/getLogoCDNExperiment.js

@@ -2,11 +2,24 @@
 
 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", 100);
 }
 
-export function getPrefetchCDNExperiment(): Experiment {
-  return createExperiment("enable_prefetch_cdn", 50);
+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/prerender.jsx

@@ -13,7 +13,6 @@ import { DEFAULT_POPUP_SIZE } from '../checkout';
 import { EXPERIENCE } from '../../constants';
 import { Buttons } from '../../ui';
 import { type ButtonProps } from '../../ui/buttons/props';
-import { getPrefetchCDNExperiment } from '../../lib/getLogoCDNExperiment';
 
 type PrerenderedButtonsProps = {|
     nonce : ?string,
@@ -25,22 +24,8 @@ type PrerenderedButtonsProps = {|
     |}) => void
 |};
 
-function prefetchImage(src: string): void {
-  const link = document.createElement("link");
-  link.rel = "prefetch";
-  link.as = "image";
-  link.href = src;
-  document.head?.append(link);
-}
-
 export function PrerenderedButtons({ nonce, onRenderCheckout, props } : PrerenderedButtonsProps) : ChildType {
     let win;
-
-    if (getPrefetchCDNExperiment().isEnabled()) {
-      prefetchImage('https://www.paypalobjects.com/js-sdk-logos/2.1.1/ideal-default.svg'
-      )
-    }
-    
     const handleClick = (
         // eslint-disable-next-line no-undef
         event : SyntheticInputEvent<HTMLInputElement>,