@paypal/checkout-components 5.0.256 → 5.0.258

package/src/funding/p24/config.jsx

@@ -1,41 +1,49 @@
 /* @flow */
 /** @jsx node */
 
-import { P24Logo } from '@paypal/sdk-logos/src';
-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 getP24Config() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        shippingChange: false,
-    
-        Logo: ({ logoColor, optional }) => enableLogoCDNExperiment(P24Logo, { logoColor, optional }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>Przelewy24</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import { P24LogoInlineSVG, P24LogoExternalImage } from "@paypal/sdk-logos/src";
+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";
+
+export function getP24Config(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    shippingChange: false,
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return P24LogoExternalImage({ logoColor, optional });
+      }
+
+      return P24LogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            Przelewy24
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/p24/index.js

@@ -1,4 +1,3 @@
 /* @flow */
 
-export * from './config';
-
+export * from "./config";

package/src/funding/paidy/config.jsx

@@ -1,43 +1,54 @@
 /* @flow */
 /** @jsx node */
 
-import { PaidyLogo } from '@paypal/sdk-logos/src';
-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 getPaidyConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        automatic: false,
-
-        shippingChange: false,
-    
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-    
-        Logo: ({ logoColor, optional }) =>  enableLogoCDNExperiment(PaidyLogo, { logoColor, optional }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>Paidy</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import {
+  PaidyLogoInlineSVG,
+  PaidyLogoExternalImage,
+} from "@paypal/sdk-logos/src";
+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";
+
+export function getPaidyConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    automatic: false,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return PaidyLogoExternalImage({ logoColor, optional });
+      }
+
+      return PaidyLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            Paidy
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/paidy/index.js

@@ -1,3 +1,3 @@
 /* @flow */
 
-export * from './config';
+export * from "./config";

package/src/funding/paylater/config.jsx

@@ -1,117 +1,124 @@
 /* @flow */
 /** @jsx node */
 
-import type { FundingEligibilityType } from '@paypal/sdk-client/src';
-import { FUNDING } from '@paypal/sdk-constants/src';
-import { node, Style } from '@krakenjs/jsx-pragmatic/src';
-import { PPLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
-
-import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
-import { Text, Space } from '../../ui/text';
-import { enableLogoCDNExperiment } from '../../lib/getLogoCDNExperiment';
-
-import css from './style.scoped.scss';
-
-function getLabelText(fundingEligibility : FundingEligibilityType) : ?string {
-    const { paylater } = fundingEligibility;
-
-    let labelText;
-
-    if (
-        paylater?.products?.paylater?.eligible &&
-        paylater?.products?.paylater?.variant === 'DE'
-    ) {
-        labelText = 'Später Bezahlen';
-    }
-
-    if (
-        paylater?.products?.payIn3?.eligible &&
-        paylater?.products?.payIn3?.variant === 'ES'
-    ) {
-        labelText = 'Paga en 3 plazos';
-    }
-
-    if (
-        paylater?.products?.payIn3?.eligible &&
-        paylater?.products?.payIn3?.variant === 'IT'
-    ) {
-        labelText = 'Paga in 3 rate';
-    }
-
-    if (paylater?.products?.payIn4?.eligible) {
-        labelText = 'Pay in 4';
-    }
-
-    if (
-        paylater?.products?.payIn4?.eligible &&
-        paylater?.products?.payIn4?.variant === 'FR'
-    ) {
-        labelText = '4X PayPal';
-    }
-
-    return labelText;
+import type { FundingEligibilityType } from "@paypal/sdk-client/src";
+import { FUNDING } from "@paypal/sdk-constants/src";
+import { node, Style } from "@krakenjs/jsx-pragmatic/src";
+import {
+  PPLogoExternalImage,
+  PPLogoInlineSVG,
+  LOGO_COLOR,
+} from "@paypal/sdk-logos/src";
+
+import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+import { Text, Space } from "../../ui/text";
+
+import css from "./style.scoped.scss";
+
+function getLabelText(fundingEligibility: FundingEligibilityType): ?string {
+  const { paylater } = fundingEligibility;
+
+  let labelText;
+
+  if (
+    paylater?.products?.paylater?.eligible &&
+    paylater?.products?.paylater?.variant === "DE"
+  ) {
+    labelText = "Später Bezahlen";
+  }
+
+  if (
+    paylater?.products?.payIn3?.eligible &&
+    paylater?.products?.payIn3?.variant === "ES"
+  ) {
+    labelText = "Paga en 3 plazos";
+  }
+
+  if (
+    paylater?.products?.payIn3?.eligible &&
+    paylater?.products?.payIn3?.variant === "IT"
+  ) {
+    labelText = "Paga in 3 rate";
+  }
+
+  if (paylater?.products?.payIn4?.eligible) {
+    labelText = "Pay in 4";
+  }
+
+  if (
+    paylater?.products?.payIn4?.eligible &&
+    paylater?.products?.payIn4?.variant === "FR"
+  ) {
+    labelText = "4X PayPal";
+  }
+
+  return labelText;
 }
 
-export function getPaylaterConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
-
-        layouts: [
-            BUTTON_LAYOUT.HORIZONTAL,
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        eligible: ({ experiment, fundingSource }) => {
-            if (
-                experiment
-                && experiment.disablePaylater
-                && !fundingSource  // Exclude standalone buttons
-            ) {
-                return false;
-            }
-            return true;
-        },
-
-        Label: ({ logo }) => logo,
-
-        Logo: ({ logoColor, nonce, fundingEligibility }) => {
-            return (
-                <Style css={ css } nonce={ nonce }>
-                    {enableLogoCDNExperiment(PPLogo, { logoColor })}
-                    <Space />
-                    <Text>{ getLabelText(fundingEligibility) || 'Pay Later' }</Text>
-                </Style>
-            );
-        },
-    
-        colors: [
-            BUTTON_COLOR.WHITE,
-            BUTTON_COLOR.BLACK,
-            BUTTON_COLOR.GOLD,
-            BUTTON_COLOR.BLUE,
-            BUTTON_COLOR.SILVER
-        ],
-
-        secondaryColors: {
-            [ DEFAULT ]:             BUTTON_COLOR.WHITE,
-            [ BUTTON_COLOR.GOLD ]:   BUTTON_COLOR.GOLD,
-            [ BUTTON_COLOR.BLUE ]:   BUTTON_COLOR.BLUE,
-            [ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.SILVER,
-            [ BUTTON_COLOR.BLACK ]:  BUTTON_COLOR.BLACK,
-            [ BUTTON_COLOR.WHITE ]:  BUTTON_COLOR.WHITE
-        },
-
-        logoColors: {
-            [BUTTON_COLOR.GOLD]:   LOGO_COLOR.BLUE,
-            [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLUE,
-            [BUTTON_COLOR.BLUE]:   LOGO_COLOR.WHITE,
-            [BUTTON_COLOR.BLACK]:  LOGO_COLOR.WHITE,
-            [BUTTON_COLOR.WHITE]:  LOGO_COLOR.BLUE
-        },
-        
-        labelText: ({ fundingEligibility }) => {
-            return (fundingEligibility && getLabelText(fundingEligibility)) || `${ FUNDING.PAYPAL } ${ FUNDING.PAYLATER }`;
-        }
-    };
+export function getPaylaterConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
+
+    layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
+
+    eligible: ({ experiment, fundingSource }) => {
+      if (
+        experiment &&
+        experiment.disablePaylater &&
+        !fundingSource // Exclude standalone buttons
+      ) {
+        return false;
+      }
+      return true;
+    },
+
+    Label: ({ logo }) => logo,
+
+    Logo: ({ logoColor, nonce, fundingEligibility }) => {
+      return (
+        <Style css={css} nonce={nonce}>
+          {__WEB__ ? (
+            <PPLogoExternalImage logoColor={logoColor} />
+          ) : (
+            <PPLogoInlineSVG logoColor={logoColor} />
+          )}
+          <Space />
+          <Text>{getLabelText(fundingEligibility) || "Pay Later"}</Text>
+        </Style>
+      );
+    },
+
+    colors: [
+      BUTTON_COLOR.WHITE,
+      BUTTON_COLOR.BLACK,
+      BUTTON_COLOR.GOLD,
+      BUTTON_COLOR.BLUE,
+      BUTTON_COLOR.SILVER,
+    ],
+
+    secondaryColors: {
+      [DEFAULT]: BUTTON_COLOR.WHITE,
+      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.GOLD,
+      [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
+      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.SILVER,
+      [BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
+      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
+    },
+
+    logoColors: {
+      [BUTTON_COLOR.GOLD]: LOGO_COLOR.BLUE,
+      [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLUE,
+      [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
+    },
+
+    labelText: ({ fundingEligibility }) => {
+      return (
+        (fundingEligibility && getLabelText(fundingEligibility)) ||
+        `${FUNDING.PAYPAL} ${FUNDING.PAYLATER}`
+      );
+    },
+  };
 }

package/src/funding/paylater/index.js

@@ -1,4 +1,3 @@
 /* @flow */
 
-export * from './config';
-
+export * from "./config";

package/src/funding/paypal/config.jsx

@@ -1,50 +1,48 @@
 /* @flow */
 /** @jsx node */
 
-import { LOGO_COLOR } from '@paypal/sdk-logos/src';
-import { FUNDING_BRAND_LABEL } from '@paypal/sdk-constants/src';
-
-import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
-
-import { Logo, Label, WalletLabel, Tag } from './template';
-
-export function getPayPalConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
-
-        flows: [
-            BUTTON_FLOW.PURCHASE,
-            BUTTON_FLOW.BILLING_SETUP,
-            BUTTON_FLOW.SUBSCRIPTION_SETUP
-        ],
-
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL,
-            BUTTON_LAYOUT.HORIZONTAL
-        ],
-
-        colors: [
-            BUTTON_COLOR.GOLD,
-            BUTTON_COLOR.BLUE,
-            BUTTON_COLOR.SILVER,
-            BUTTON_COLOR.BLACK,
-            BUTTON_COLOR.WHITE
-        ],
-    
-        logoColors: {
-            [BUTTON_COLOR.GOLD]:   LOGO_COLOR.BLUE,
-            [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLUE,
-            [BUTTON_COLOR.BLUE]:   LOGO_COLOR.WHITE,
-            [BUTTON_COLOR.BLACK]:  LOGO_COLOR.WHITE,
-            [BUTTON_COLOR.WHITE]:  LOGO_COLOR.BLUE
-        },
-    
-        labelText: `${ FUNDING_BRAND_LABEL.PAYPAL }`,
-
-        Logo,
-        Label,
-        WalletLabel,
-        Tag
-    };
+import { LOGO_COLOR } from "@paypal/sdk-logos/src";
+import { FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src";
+
+import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+
+import { Logo, Label, WalletLabel, Tag } from "./template";
+
+export function getPayPalConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
+
+    flows: [
+      BUTTON_FLOW.PURCHASE,
+      BUTTON_FLOW.BILLING_SETUP,
+      BUTTON_FLOW.SUBSCRIPTION_SETUP,
+      BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
+    ],
+
+    layouts: [BUTTON_LAYOUT.VERTICAL, BUTTON_LAYOUT.HORIZONTAL],
+
+    colors: [
+      BUTTON_COLOR.GOLD,
+      BUTTON_COLOR.BLUE,
+      BUTTON_COLOR.SILVER,
+      BUTTON_COLOR.BLACK,
+      BUTTON_COLOR.WHITE,
+    ],
+
+    logoColors: {
+      [BUTTON_COLOR.GOLD]: LOGO_COLOR.BLUE,
+      [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLUE,
+      [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
+    },
+
+    labelText: `${FUNDING_BRAND_LABEL.PAYPAL}`,
+
+    Logo,
+    Label,
+    WalletLabel,
+    Tag,
+  };
 }

package/src/funding/paypal/index.js

@@ -1,4 +1,3 @@
 /* @flow */
 
-export * from './config';
-
+export * from "./config";