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

package/src/funding/ideal/config.jsx

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

package/src/funding/ideal/index.js

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

package/src/funding/index.js

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

package/src/funding/itau/config.jsx

@@ -1,44 +1,45 @@
 /* @flow */
 /** @jsx node */
 
-
-import { ItauLogo, LOGO_COLOR } from '@paypal/sdk-logos/src';
-
-import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
-
-export function getItauConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
-
-        layouts: [
-            BUTTON_LAYOUT.HORIZONTAL,
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => ItauLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
-
-        colors: [
-            BUTTON_COLOR.DARKBLUE,
-            BUTTON_COLOR.BLUE,
-            BUTTON_COLOR.BLACK
-        ],
-
-        logoColors:  {
-            [ BUTTON_COLOR.DARKBLUE ]:   LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.BLUE ]:     LOGO_COLOR.WHITE,
-            [ BUTTON_COLOR.BLACK ]:    LOGO_COLOR.WHITE
-        },
-
-        secondaryColors: {
-            ...DEFAULT_FUNDING_CONFIG.secondaryColors,
-
-            [ DEFAULT ]:             BUTTON_COLOR.DARKBLUE,
-            [ BUTTON_COLOR.GOLD ]:   BUTTON_COLOR.DARKBLUE,
-            [ BUTTON_COLOR.BLUE ]:   BUTTON_COLOR.BLUE,
-            [ BUTTON_COLOR.SILVER ]: BUTTON_COLOR.DARKBLUE,
-            [ BUTTON_COLOR.WHITE ]:   BUTTON_COLOR.DARKBLUE
-
-        }
-    };
+import {
+  ItauLogoExternalImage,
+  ItauLogoInlineSVG,
+  LOGO_COLOR,
+} from "@paypal/sdk-logos/src";
+
+import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+
+export function getItauConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
+
+    layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return ItauLogoExternalImage({ logoColor, optional });
+      }
+
+      return ItauLogoInlineSVG({ logoColor, optional });
+    },
+
+    colors: [BUTTON_COLOR.DARKBLUE, BUTTON_COLOR.BLUE, BUTTON_COLOR.BLACK],
+
+    logoColors: {
+      [BUTTON_COLOR.DARKBLUE]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+    },
+
+    secondaryColors: {
+      ...DEFAULT_FUNDING_CONFIG.secondaryColors,
+
+      [DEFAULT]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
+      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.DARKBLUE,
+    },
+  };
 }

package/src/funding/itau/index.js

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

package/src/funding/maxima/config.jsx

@@ -1,28 +1,35 @@
 /* @flow */
 /** @jsx node */
 
-import { MaximaLogo } from '@paypal/sdk-logos/src';
+import {
+  MaximaLogoInlineSVG,
+  MaximaLogoExternalImage,
+} from "@paypal/sdk-logos/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { BUTTON_COLOR, BUTTON_LAYOUT } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
-export function getMaximaConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
+export function getMaximaConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
 
-        shippingChange: false,
+    shippingChange: false,
 
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
+    layouts: [BUTTON_LAYOUT.VERTICAL],
 
-        Logo: ({ logoColor, optional }) => MaximaLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return MaximaLogoExternalImage({ logoColor, optional });
+      }
 
-        colors: [
-            BUTTON_COLOR.DEFAULT,
-            BUTTON_COLOR.SILVER,
-            BUTTON_COLOR.WHITE,
-            BUTTON_COLOR.BLACK
-        ]
-    };
+      return MaximaLogoInlineSVG({ logoColor, optional });
+    },
+
+    colors: [
+      BUTTON_COLOR.DEFAULT,
+      BUTTON_COLOR.SILVER,
+      BUTTON_COLOR.WHITE,
+      BUTTON_COLOR.BLACK,
+    ],
+  };
 }

package/src/funding/maxima/index.js

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

package/src/funding/mercadopago/config.jsx

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

package/src/funding/mercadopago/index.js

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

package/src/funding/multibanco/config.jsx

@@ -1,42 +1,54 @@
 /* @flow */
 /** @jsx node */
 
-import { MultibancoLogo } 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 getMultibancoConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        automatic: false,
-
-        shippingChange: false,
-
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => MultibancoLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>Multibanco</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import {
+  MultibancoLogoInlineSVG,
+  MultibancoLogoExternalImage,
+} 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 getMultibancoConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    automatic: false,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return MultibancoLogoExternalImage({ logoColor, optional });
+      }
+
+      return MultibancoLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            Multibanco
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/multibanco/index.js

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

package/src/funding/mybank/config.jsx

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

package/src/funding/mybank/index.js

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

package/src/funding/oxxo/config.jsx

@@ -1,42 +1,54 @@
 /* @flow */
 /** @jsx node */
 
-import { OxxoLogo } 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 getOxxoConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_APM_FUNDING_CONFIG,
-
-        automatic: false,
-
-        shippingChange: false,
-
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
-
-        Logo: ({ logoColor, optional }) => OxxoLogo({ logoColor, optional, loadFromCDN: __WEB__ }),
-
-        Label: ({ logo, ...opts }) => {
-            if (__WEB__) {
-                return logo;
-            }
-
-            const apmLogo = (
-                <Fragment>
-                    { logo }<Space /><Text animate optional>OXXO</Text>
-                </Fragment>
-            );
-
-            return (<BasicLabel
-                { ...opts }
-                logo={ apmLogo }
-            />);
-        }
-    };
+import {
+  OxxoLogoInlineSVG,
+  OxxoLogoExternalImage,
+} 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 getOxxoConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_APM_FUNDING_CONFIG,
+
+    automatic: false,
+
+    shippingChange: false,
+
+    layouts: [BUTTON_LAYOUT.VERTICAL],
+
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return OxxoLogoExternalImage({ logoColor, optional });
+      }
+
+      return OxxoLogoInlineSVG({ logoColor, optional });
+    },
+
+    Label: ({ logo, ...opts }) => {
+      if (__WEB__) {
+        return logo;
+      }
+
+      const apmLogo = (
+        <Fragment>
+          {logo}
+          <Space />
+          <Text animate optional>
+            OXXO
+          </Text>
+        </Fragment>
+      );
+
+      return <BasicLabel {...opts} logo={apmLogo} />;
+    },
+  };
 }

package/src/funding/oxxo/index.js

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