@paypal/checkout-components 5.0.256-alpha.1 → 5.0.257

package/src/funding/credit/config.jsx

@@ -1,66 +1,86 @@
 /* @flow */
 /** @jsx node */
 
-import { COUNTRY, FUNDING_BRAND_LABEL } from '@paypal/sdk-constants/src';
-import { node, Fragment } from '@krakenjs/jsx-pragmatic/src';
-import { CreditLogo, PPLogo, PayPalLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
+import { COUNTRY, FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src";
+import { node, Fragment } from "@krakenjs/jsx-pragmatic/src";
+import {
+  CreditLogoExternalImage,
+  CreditLogoInlineSVG,
+  PPLogoExternalImage,
+  PPLogoInlineSVG,
+  PayPalLogoExternalImage,
+  PayPalLogoInlineSVG,
+  LOGO_COLOR,
+} from "@paypal/sdk-logos/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT, BUTTON_FLOW } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
-import { Space } from '../../ui/text';
-import { WalletLabel } from '../paypal/template';
+import {
+  BUTTON_COLOR,
+  BUTTON_LAYOUT,
+  DEFAULT,
+  BUTTON_FLOW,
+} from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+import { Space } from "../../ui/text";
+import { WalletLabel } from "../paypal/template";
 
-export function getCreditConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
+export function getCreditConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
 
-        flows: [
-            BUTTON_FLOW.PURCHASE,
-            BUTTON_FLOW.BILLING_SETUP,
-            BUTTON_FLOW.SUBSCRIPTION_SETUP
-        ],
+    flows: [
+      BUTTON_FLOW.PURCHASE,
+      BUTTON_FLOW.BILLING_SETUP,
+      BUTTON_FLOW.SUBSCRIPTION_SETUP,
+    ],
 
-        layouts: [
-            BUTTON_LAYOUT.HORIZONTAL,
-            BUTTON_LAYOUT.VERTICAL
-        ],
+    layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
 
-        Logo: ({ locale, logoColor }) => {
-            if (locale.country === COUNTRY.DE) {
-                return <CreditLogo logoColor={ logoColor } locale={ locale } loadFromCDN={ __WEB__ } />;
-            }
-    
-            return (
-                <Fragment>
-                    <PPLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-                    <Space />
-                    <span optional>
-                        <PayPalLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-                        <Space />
-                    </span>
-                    <CreditLogo logoColor={ logoColor } locale={ locale } loadFromCDN={ __WEB__ } />
-                </Fragment>
-            );
-        },
+    Logo: ({ locale, logoColor }) => {
+      if (locale.country === COUNTRY.DE) {
+        return __WEB__ ? (
+          <CreditLogoExternalImage locale={locale} logoColor={logoColor} />
+        ) : (
+          <CreditLogoInlineSVG locale={locale} logoColor={logoColor} />
+        );
+      }
 
-        WalletLabel,
-    
-        colors: [
-            BUTTON_COLOR.DARKBLUE,
-            BUTTON_COLOR.BLACK,
-            BUTTON_COLOR.WHITE
-        ],
+      return __WEB__ ? (
+        <Fragment>
+          <PPLogoExternalImage logoColor={logoColor} />
+          <Space />
+          <span optional>
+            <PayPalLogoExternalImage logoColor={logoColor} />
+            <Space />
+          </span>
+          <CreditLogoExternalImage locale={locale} logoColor={logoColor} />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <PPLogoInlineSVG logoColor={logoColor} />
+          <Space />
+          <span optional>
+            <PayPalLogoInlineSVG logoColor={logoColor} />
+            <Space />
+          </span>
+          <CreditLogoInlineSVG locale={locale} logoColor={logoColor} />
+        </Fragment>
+      );
+    },
 
-        secondaryColors: {
-            ...DEFAULT_FUNDING_CONFIG.secondaryColors,
-            [ DEFAULT ]: BUTTON_COLOR.DARKBLUE
-        },
+    WalletLabel,
 
-        logoColors: {
-            [ DEFAULT ]:            LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.WHITE ]: LOGO_COLOR.BLUE
-        },
-        
-        labelText: FUNDING_BRAND_LABEL.CREDIT
-    };
+    colors: [BUTTON_COLOR.DARKBLUE, BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
+
+    secondaryColors: {
+      ...DEFAULT_FUNDING_CONFIG.secondaryColors,
+      [DEFAULT]: BUTTON_COLOR.DARKBLUE,
+    },
+
+    logoColors: {
+      [DEFAULT]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
+    },
+
+    labelText: FUNDING_BRAND_LABEL.CREDIT,
+  };
 }

package/src/funding/credit/index.js

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

package/src/funding/eps/config.jsx

@@ -1,40 +1,49 @@
 /* @flow */
 /** @jsx node */
 
-import { EpsLogo } 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 getEpsConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        shippingChange: false,
-    
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => EpsLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>eps</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import { EpsLogoInlineSVG, EpsLogoExternalImage } 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 getEpsConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return EpsLogoExternalImage({ logoColor, optional });
+      }
+
+      return EpsLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            eps
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/eps/index.js

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

package/src/funding/funding.js

@@ -1,125 +1,218 @@
 /* @flow */
 
-import type { FundingEligibilityType } from '@paypal/sdk-client/src';
-import { PLATFORM, FUNDING, COMPONENTS } from '@paypal/sdk-constants/src';
-import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
+import type { FundingEligibilityType } from "@paypal/sdk-client/src";
+import { PLATFORM, FUNDING, COMPONENTS } from "@paypal/sdk-constants/src";
+import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
 
-import type { Wallet, Experiment } from '../types';
-import { BUTTON_LAYOUT, BUTTON_FLOW } from '../constants';
-import type { OnShippingChange, OnShippingAddressChange, OnShippingOptionsChange } from '../ui/buttons/props';
+import type { Wallet, Experiment } from "../types";
+import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
+import type {
+  OnShippingChange,
+  OnShippingAddressChange,
+  OnShippingOptionsChange,
+} from "../ui/buttons/props";
 
-import { getFundingConfig } from './config';
+import { getFundingConfig } from "./config";
 
 type IsFundingEligibleOptions = {|
-    layout? : $Values<typeof BUTTON_LAYOUT>,
-    platform : $Values<typeof PLATFORM>,
-    fundingSource : ?$Values<typeof FUNDING>,
-    flow : $Values<typeof BUTTON_FLOW>,
-    fundingEligibility : FundingEligibilityType,
-    components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    onShippingChange : ?Function,
-    onShippingAddressChange : ?Function,
-    onShippingOptionsChange : ?Function,
-    wallet? : ?Wallet,
-    applePaySupport : boolean,
-    supportsPopups : boolean,
-    supportedNativeBrowser : boolean,
-    experiment? : Experiment
+  layout?: $Values<typeof BUTTON_LAYOUT>,
+  platform: $Values<typeof PLATFORM>,
+  fundingSource: ?$Values<typeof FUNDING>,
+  flow: $Values<typeof BUTTON_FLOW>,
+  fundingEligibility: FundingEligibilityType,
+  components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
+  onShippingChange: ?Function,
+  onShippingAddressChange: ?Function,
+  onShippingOptionsChange: ?Function,
+  wallet?: ?Wallet,
+  applePaySupport: boolean,
+  supportsPopups: boolean,
+  supportedNativeBrowser: boolean,
+  experiment?: Experiment,
 |};
 
-export function isFundingEligible(source : $Values<typeof FUNDING>,
-    { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } : IsFundingEligibleOptions) : boolean {
-
-    if (!fundingEligibility[source] || !fundingEligibility[source].eligible) {
-        return false;
-    }
-
-    const fundingConfig = getFundingConfig()[source];
-
-    if (!fundingConfig) {
-        return false;
+export function isFundingEligible(
+  source: $Values<typeof FUNDING>,
+  {
+    layout,
+    platform,
+    fundingSource,
+    fundingEligibility,
+    components,
+    onShippingChange,
+    onShippingAddressChange,
+    onShippingOptionsChange,
+    flow,
+    wallet,
+    applePaySupport,
+    supportsPopups,
+    supportedNativeBrowser,
+    experiment,
+  }: IsFundingEligibleOptions
+): boolean {
+  if (!fundingEligibility[source] || !fundingEligibility[source].eligible) {
+    return false;
+  }
+
+  const fundingConfig = getFundingConfig()[source];
+
+  if (!fundingConfig) {
+    return false;
+  }
+
+  if (!fundingConfig.enabled) {
+    return false;
+  }
+
+  if (!fundingConfig.automatic && source !== fundingSource) {
+    return false;
+  }
+
+  if (
+    fundingConfig.eligible &&
+    !fundingConfig.eligible({
+      components,
+      experiment,
+      fundingSource,
+      fundingEligibility,
+      layout,
+      wallet,
+    })
+  ) {
+    return false;
+  }
+
+  if (
+    layout &&
+    fundingConfig.layouts &&
+    fundingConfig.layouts.indexOf(layout) === -1
+  ) {
+    if (fundingSource && layout === BUTTON_LAYOUT.HORIZONTAL) {
+      // continue
+    } else {
+      return false;
     }
+  }
 
-    if (!fundingConfig.enabled) {
-        return false;
-    }
+  if (
+    fundingConfig.platforms &&
+    fundingConfig.platforms.indexOf(platform) === -1
+  ) {
+    return false;
+  }
 
-    if (!fundingConfig.automatic && source !== fundingSource) {
-        return false;
-    }
+  if (fundingConfig.requires) {
+    const required = fundingConfig.requires({ platform });
 
-    if (fundingConfig.eligible && !fundingConfig.eligible({ components, experiment, fundingSource, fundingEligibility, layout, wallet })) {
-        return false;
+    if (required.popup === true && supportsPopups === false) {
+      return false;
     }
 
-    if (layout && fundingConfig.layouts && fundingConfig.layouts.indexOf(layout) === -1) {
-        if (fundingSource && layout === BUTTON_LAYOUT.HORIZONTAL) {
-            // continue
-        } else {
-            return false;
-        }
+    if (required.applepay === true && applePaySupport === false) {
+      return false;
     }
 
-    if (fundingConfig.platforms && fundingConfig.platforms.indexOf(platform) === -1) {
-        return false;
+    if (required.native === true && supportedNativeBrowser === false) {
+      return false;
     }
+  }
 
-    if (fundingConfig.requires) {
-        const required = fundingConfig.requires({ platform });
+  if (
+    fundingConfig.shippingChange === false &&
+    (onShippingChange || onShippingAddressChange || onShippingOptionsChange)
+  ) {
+    return false;
+  }
 
-        if (required.popup === true && supportsPopups === false) {
-            return false;
-        }
+  if (fundingConfig.flows && flow && fundingConfig.flows.indexOf(flow) === -1) {
+    return false;
+  }
 
-        if (required.applepay === true && applePaySupport === false) {
-            return false;
-        }
-
-        if (required.native === true && supportedNativeBrowser === false) {
-            return false;
-        }
-    }
-
-    if (fundingConfig.shippingChange === false && (onShippingChange || onShippingAddressChange || onShippingOptionsChange)) {
-        return false;
-    }
-
-    if (fundingConfig.flows && flow && fundingConfig.flows.indexOf(flow) === -1) {
-        return false;
-    }
-
-    return true;
+  return true;
 }
 
-export function determineEligibleFunding({ fundingSource, layout, platform, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment } :
-    {| fundingSource : ?$Values<typeof FUNDING>, remembered : $ReadOnlyArray<$Values<typeof FUNDING>>, layout : $Values<typeof BUTTON_LAYOUT>,
-    platform : $Values<typeof PLATFORM>, fundingEligibility : FundingEligibilityType, components : $ReadOnlyArray<$Values<typeof COMPONENTS>>,
-    onShippingChange? : ?Function, onShippingAddressChange? : ?Function, onShippingOptionsChange? : ?Function, flow : $Values<typeof BUTTON_FLOW>, wallet? : ?Wallet, applePaySupport : boolean, supportsPopups : boolean, supportedNativeBrowser : boolean, experiment : Experiment |}) : $ReadOnlyArray<$Values<typeof FUNDING>> {
-
-    if (fundingSource) {
-        return [ fundingSource ];
-    }
-
-    let eligibleFunding = SUPPORTED_FUNDING_SOURCES.filter(source =>
-        isFundingEligible(source, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment }));
-
-    if (layout === BUTTON_LAYOUT.HORIZONTAL) {
-        eligibleFunding = eligibleFunding.slice(0, 2);
-    } else if (layout === BUTTON_LAYOUT.VERTICAL) {
-        eligibleFunding = eligibleFunding.slice(0, 6);
-    }
-
-    return eligibleFunding;
+export function determineEligibleFunding({
+  fundingSource,
+  layout,
+  platform,
+  fundingEligibility,
+  components,
+  onShippingChange,
+  onShippingAddressChange,
+  onShippingOptionsChange,
+  flow,
+  wallet,
+  applePaySupport,
+  supportsPopups,
+  supportedNativeBrowser,
+  experiment,
+}: {|
+  fundingSource: ?$Values<typeof FUNDING>,
+  remembered: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  layout: $Values<typeof BUTTON_LAYOUT>,
+  platform: $Values<typeof PLATFORM>,
+  fundingEligibility: FundingEligibilityType,
+  components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
+  onShippingChange?: ?Function,
+  onShippingAddressChange?: ?Function,
+  onShippingOptionsChange?: ?Function,
+  flow: $Values<typeof BUTTON_FLOW>,
+  wallet?: ?Wallet,
+  applePaySupport: boolean,
+  supportsPopups: boolean,
+  supportedNativeBrowser: boolean,
+  experiment: Experiment,
+|}): $ReadOnlyArray<$Values<typeof FUNDING>> {
+  if (fundingSource) {
+    return [fundingSource];
+  }
+
+  let eligibleFunding = SUPPORTED_FUNDING_SOURCES.filter((source) =>
+    isFundingEligible(source, {
+      layout,
+      platform,
+      fundingSource,
+      fundingEligibility,
+      components,
+      onShippingChange,
+      onShippingAddressChange,
+      onShippingOptionsChange,
+      flow,
+      wallet,
+      applePaySupport,
+      supportsPopups,
+      supportedNativeBrowser,
+      experiment,
+    })
+  );
+
+  if (layout === BUTTON_LAYOUT.HORIZONTAL) {
+    eligibleFunding = eligibleFunding.slice(0, 2);
+  } else if (layout === BUTTON_LAYOUT.VERTICAL) {
+    eligibleFunding = eligibleFunding.slice(0, 6);
+  }
+
+  return eligibleFunding;
 }
 
-export function isWalletFundingEligible({ wallet, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : {| wallet : ?Wallet, onShippingChange : ?OnShippingChange, onShippingAddressChange : ?OnShippingAddressChange, onShippingOptionsChange : ?OnShippingOptionsChange |}) : boolean {
-    if (!wallet) {
-        return false;
-    }
-
-    if (onShippingChange || onShippingAddressChange || onShippingOptionsChange) {
-        return false;
-    }
-
-    return true;
+export function isWalletFundingEligible({
+  wallet,
+  onShippingChange,
+  onShippingAddressChange,
+  onShippingOptionsChange,
+}: {|
+  wallet: ?Wallet,
+  onShippingChange: ?OnShippingChange,
+  onShippingAddressChange: ?OnShippingAddressChange,
+  onShippingOptionsChange: ?OnShippingOptionsChange,
+|}): boolean {
+  if (!wallet) {
+    return false;
+  }
+
+  if (onShippingChange || onShippingAddressChange || onShippingOptionsChange) {
+    return false;
+  }
+
+  return true;
 }

package/src/funding/giropay/config.jsx

@@ -1,41 +1,52 @@
 /* @flow */
 /** @jsx node */
 
-import { GiropayLogo } 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 getGiropayConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        shippingChange: false,
-    
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-    
-        Logo: ({ logoColor, optional }) => GiropayLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>giropay</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import {
+  GiropayLogoInlineSVG,
+  GiropayLogoExternalImage,
+} 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 getGiropayConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return GiropayLogoExternalImage({ logoColor, optional });
+      }
+
+      return GiropayLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            giropay
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/giropay/index.js

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