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

package/src/funding/venmo/style.scoped.scss

@@ -1,45 +1,43 @@
-
 .app-label {
-    margin-left: 0.25rem;
+  margin-left: 0.25rem;
 }
 
 .wallet-label-venmo {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+
+  .divider {
+    margin: 0 5px;
+    opacity: 0.2;
+  }
+
+  * {
+    display: inline-block;
+    vertical-align: top;
     height: 100%;
-    width: 100%;
-    text-align: center;
+  }
 
-    .divider {
-      margin: 0 5px;
-      opacity: 0.2;
-    }
+  .logo {
+    margin-left: auto;
+  }
 
-    * {
-        display: inline-block;
-        vertical-align: top;
-        height: 100%;
-    }
+  .label {
+    max-width: 40%;
 
-    .logo {
-        margin-left: auto;
+    .limit {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
 
-    .label {
-      max-width: 40%;
-
-      .limit {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-      }
-    }
-
-    @media only screen and (max-width: 150px) {
-        text-align: center;
-        display: inline-block;
+  @media only screen and (max-width: 150px) {
+    text-align: center;
+    display: inline-block;
 
-        .logo {
-            display: none;
-        }
+    .logo {
+      display: none;
     }
+  }
 }
-

package/src/funding/venmo/template.jsx

@@ -1,70 +1,70 @@
 /* @flow */
 /** @jsx node */
-import { node, Style, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { VenmoLogo } from '@paypal/sdk-logos/src';
+import { node, Style, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import {
+  VenmoLogoExternalImage,
+  VenmoLogoInlineSVG,
+} from "@paypal/sdk-logos/src";
 
 import {
-    type WalletLabelOptions,
-    type LabelOptions,
-    BasicLabel
-} from '../common';
-import { Text, Space } from '../../ui/text';
+  type WalletLabelOptions,
+  type LabelOptions,
+  BasicLabel,
+} from "../common";
+import { Text, Space } from "../../ui/text";
+
+import css from "./style.scoped.scss";
 
-import css from './style.scoped.scss';
- 
-export function AppLabel(opts : LabelOptions) : ChildType {
-    const { logoColor } = opts;
+export function AppLabel(opts: LabelOptions): ChildType {
+  const { logoColor } = opts;
 
-    const AppLogo : ChildType = (
-        <Style css={ css }>
-            <VenmoLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />
-            <Text className={ [ 'app-label' ] }>
-                App
-            </Text>
-        </Style>
-    );
+  const AppLogo: ChildType = (
+    <Style css={css}>
+      {__WEB__ ? (
+        <VenmoLogoExternalImage logoColor={logoColor} />
+      ) : (
+        <VenmoLogoInlineSVG logoColor={logoColor} />
+      )}
+      <Text className={["app-label"]}>App</Text>
+    </Style>
+  );
 
-    return (
-        <BasicLabel { ...opts } logo={ AppLogo } />
-    );
+  return <BasicLabel {...opts} logo={AppLogo} />;
 }
 
-export function Label(opts : LabelOptions) : ChildType {
-    return (
-        <BasicLabel { ...opts } />
-    );
+export function Label(opts: LabelOptions): ChildType {
+  return <BasicLabel {...opts} />;
 }
 
-export function  WalletLabel({ ...props } : WalletLabelOptions) : ChildType {
-    const { instrument, logoColor } = props;
-    let label;
-    const logo =  <VenmoLogo logoColor={ logoColor } loadFromCDN={ __WEB__ } />;
+export function WalletLabel({ ...props }: WalletLabelOptions): ChildType {
+  const { instrument, logoColor } = props;
+  let label;
+  const logo = __WEB__ ? (
+    <VenmoLogoExternalImage logoColor={logoColor} />
+  ) : (
+    <VenmoLogoInlineSVG logoColor={logoColor} />
+  );
 
-    if (instrument && instrument.label) {
-        label = instrument.label;
-    }
-    
+  if (instrument && instrument.label) {
+    label = instrument.label;
+  }
 
-    return (
-        <Style css={ css }>
-            <div class='wallet-label-venmo'>
-                <div class='divider'>|</div>
-                {
-                    logo &&
-                        <div class='logo' optional>
-                            { logo }
-                            <Space />
-                        </div>
-                }
-                {
-                    label &&
-                    <div class='label'>
-                        <Text className={ [ 'limit' ] }>
-                            { label }
-                        </Text>
-                    </div>
-                }
-            </div>
-        </Style>
-    );
+  return (
+    <Style css={css}>
+      <div class="wallet-label-venmo">
+        <div class="divider">|</div>
+        {logo && (
+          <div class="logo" optional>
+            {logo}
+            <Space />
+          </div>
+        )}
+        {label && (
+          <div class="label">
+            <Text className={["limit"]}>{label}</Text>
+          </div>
+        )}
+      </div>
+    </Style>
+  );
 }

package/src/funding/verkkopankki/config.jsx

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

package/src/funding/verkkopankki/index.js

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

package/src/funding/wechatpay/config.jsx

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

package/src/funding/wechatpay/index.js

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

package/src/funding/zimpler/config.jsx

@@ -1,21 +1,28 @@
 /* @flow */
 /** @jsx node */
 
-import { ZimplerLogo } from '@paypal/sdk-logos/src';
+import {
+  ZimplerLogoInlineSVG,
+  ZimplerLogoExternalImage,
+} from "@paypal/sdk-logos/src";
 
-import { BUTTON_LAYOUT } from '../../constants';
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+import { BUTTON_LAYOUT } from "../../constants";
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
-export function getZimplerConfig() : FundingSourceConfig {
-    return {
-        ...DEFAULT_FUNDING_CONFIG,
+export function getZimplerConfig(): FundingSourceConfig {
+  return {
+    ...DEFAULT_FUNDING_CONFIG,
 
-        shippingChange: false,
+    shippingChange: false,
 
-        layouts: [
-            BUTTON_LAYOUT.VERTICAL
-        ],
+    layouts: [BUTTON_LAYOUT.VERTICAL],
 
-        Logo: ({ logoColor, optional }) => ZimplerLogo({ logoColor, optional, loadFromCDN: __WEB__ })
-    };
+    Logo: ({ logoColor, optional }) => {
+      if (__WEB__) {
+        return ZimplerLogoExternalImage({ logoColor, optional });
+      }
+
+      return ZimplerLogoInlineSVG({ logoColor, optional });
+    },
+  };
 }

package/src/funding/zimpler/index.js

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

package/src/interface/actions.js

@@ -2,7 +2,7 @@
 
 import type { LazyProtectedExport } from "../types";
 import { createSaveAction, type CreateSaveAction } from "../actions/save";
-import {protectedExport} from '../lib'
+import { protectedExport } from "../lib";
 
 export const actions: LazyProtectedExport<{|
   Save: CreateSaveAction,

package/src/interface/button.js

@@ -1,76 +1,92 @@
 /* @flow */
 
-import { PopupOpenError as _PopupOpenError, destroy as zoidDestroy, destroyComponents } from '@krakenjs/zoid/src';
-
-import type { LazyExport, LazyProtectedExport } from '../types';
-import { allowIframe as _allowIframe, protectedExport } from '../lib';
-import { getCheckoutComponent, type CheckoutComponent } from '../zoid/checkout';
-import { getButtonsComponent, type ButtonsComponent } from '../zoid/buttons';
-import { getCardFormComponent, type CardFormComponent } from '../zoid/card-form';
-import { getPaymentFieldsComponent, type PaymentFieldsComponent } from '../zoid/payment-fields';
-import { getMenuComponent, type MenuComponent } from '../zoid/menu';
-import { getInstallmentsComponent, type InstallmentsComponent } from '../zoid/installments';
-import { Buttons as _ButtonsTemplate } from '../ui/buttons';
-import { getQRCodeComponent, type QRCodeComponent } from '../zoid/qr-code';
-import { getModalComponent, type ModalComponent } from '../zoid/modal/component';
-
-export const Buttons : LazyExport<ButtonsComponent> = {
-    __get__: () => getButtonsComponent()
+import {
+  PopupOpenError as _PopupOpenError,
+  destroy as zoidDestroy,
+  destroyComponents,
+} from "@krakenjs/zoid/src";
+
+import type { LazyExport, LazyProtectedExport } from "../types";
+import { allowIframe as _allowIframe, protectedExport } from "../lib";
+import { getCheckoutComponent, type CheckoutComponent } from "../zoid/checkout";
+import { getButtonsComponent, type ButtonsComponent } from "../zoid/buttons";
+import {
+  getCardFormComponent,
+  type CardFormComponent,
+} from "../zoid/card-form";
+import {
+  getPaymentFieldsComponent,
+  type PaymentFieldsComponent,
+} from "../zoid/payment-fields";
+import { getMenuComponent, type MenuComponent } from "../zoid/menu";
+import {
+  getInstallmentsComponent,
+  type InstallmentsComponent,
+} from "../zoid/installments";
+import { Buttons as _ButtonsTemplate } from "../ui/buttons";
+import { getQRCodeComponent, type QRCodeComponent } from "../zoid/qr-code";
+import {
+  getModalComponent,
+  type ModalComponent,
+} from "../zoid/modal/component";
+
+export const Buttons: LazyExport<ButtonsComponent> = {
+  __get__: () => getButtonsComponent(),
 };
 
-export const Checkout : LazyProtectedExport<CheckoutComponent> = {
-    __get__: () => protectedExport(getCheckoutComponent())
+export const Checkout: LazyProtectedExport<CheckoutComponent> = {
+  __get__: () => protectedExport(getCheckoutComponent()),
 };
 
-export const CardForm : LazyProtectedExport<CardFormComponent> = {
-    __get__: () => protectedExport(getCardFormComponent())
+export const CardForm: LazyProtectedExport<CardFormComponent> = {
+  __get__: () => protectedExport(getCardFormComponent()),
 };
 
-export const PaymentFields : LazyProtectedExport<PaymentFieldsComponent> = {
-    __get__: () => protectedExport(getPaymentFieldsComponent())
+export const PaymentFields: LazyProtectedExport<PaymentFieldsComponent> = {
+  __get__: () => protectedExport(getPaymentFieldsComponent()),
 };
 
-export const Menu : LazyProtectedExport<MenuComponent> = {
-    __get__: () => protectedExport(getMenuComponent())
+export const Menu: LazyProtectedExport<MenuComponent> = {
+  __get__: () => protectedExport(getMenuComponent()),
 };
 
-export const Modal : LazyProtectedExport<ModalComponent> = {
-    __get__: () => protectedExport(getModalComponent())
+export const Modal: LazyProtectedExport<ModalComponent> = {
+  __get__: () => protectedExport(getModalComponent()),
 };
 
-export const Installments : LazyProtectedExport<InstallmentsComponent> =  {
-    __get__: () => protectedExport(getInstallmentsComponent())
+export const Installments: LazyProtectedExport<InstallmentsComponent> = {
+  __get__: () => protectedExport(getInstallmentsComponent()),
 };
 
-export const QRCode : LazyProtectedExport<QRCodeComponent> = {
-    __get__: () => protectedExport(getQRCodeComponent())
+export const QRCode: LazyProtectedExport<QRCodeComponent> = {
+  __get__: () => protectedExport(getQRCodeComponent()),
 };
 
-export const ButtonsTemplate : LazyProtectedExport<typeof _ButtonsTemplate> = {
-    __get__: () => protectedExport(_ButtonsTemplate)
+export const ButtonsTemplate: LazyProtectedExport<typeof _ButtonsTemplate> = {
+  __get__: () => protectedExport(_ButtonsTemplate),
 };
 
-export const PopupOpenError : LazyProtectedExport<typeof _PopupOpenError> = {
-    __get__: () => protectedExport(_PopupOpenError)
+export const PopupOpenError: LazyProtectedExport<typeof _PopupOpenError> = {
+  __get__: () => protectedExport(_PopupOpenError),
 };
 
-export const allowIframe : LazyProtectedExport<typeof _allowIframe> = {
-    __get__: () => protectedExport(_allowIframe)
+export const allowIframe: LazyProtectedExport<typeof _allowIframe> = {
+  __get__: () => protectedExport(_allowIframe),
 };
 
-export const forceIframe : LazyProtectedExport<typeof _allowIframe> = {
-    __get__: () => protectedExport(_allowIframe)
+export const forceIframe: LazyProtectedExport<typeof _allowIframe> = {
+  __get__: () => protectedExport(_allowIframe),
 };
 
-export const destroyAll : LazyProtectedExport<typeof destroyComponents> = {
-    __get__: () => protectedExport(destroyComponents)
+export const destroyAll: LazyProtectedExport<typeof destroyComponents> = {
+  __get__: () => protectedExport(destroyComponents),
 };
 
 export function setup() {
-    getButtonsComponent();
-    getCheckoutComponent();
+  getButtonsComponent();
+  getCheckoutComponent();
 }
 
-export function destroy(err? : mixed) {
-    zoidDestroy(err);
+export function destroy(err?: mixed) {
+  zoidDestroy(err);
 }

package/src/interface/card-fields.js

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

package/src/interface/fields.js

@@ -1,9 +1,12 @@
 /* @flow */
 /* eslint import/no-deprecated: 0 */
 
-import type { LazyExport } from '../types';
-import { getPaymentFieldsComponent, type PaymentFieldsComponent } from '../zoid/payment-fields/component';
+import type { LazyExport } from "../types";
+import {
+  getPaymentFieldsComponent,
+  type PaymentFieldsComponent,
+} from "../zoid/payment-fields/component";
 
-export const Fields : LazyExport<PaymentFieldsComponent> = {
-    __get__: () => getPaymentFieldsComponent()
+export const Fields: LazyExport<PaymentFieldsComponent> = {
+  __get__: () => getPaymentFieldsComponent(),
 };

package/src/interface/marks.js

@@ -1,8 +1,8 @@
 /* @flow */
 
-import type { LazyExport } from '../types';
-import { getMarksComponent, type MarksComponent } from '../marks/component';
+import type { LazyExport } from "../types";
+import { getMarksComponent, type MarksComponent } from "../marks/component";
 
-export const Marks : LazyExport<MarksComponent> = {
-    __get__: () => getMarksComponent()
+export const Marks: LazyExport<MarksComponent> = {
+  __get__: () => getMarksComponent(),
 };