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

package/src/marks/template.jsx

@@ -1,67 +1,83 @@
 /* @flow */
 /** @jsx node */
 
-import { FUNDING, ENV } from '@paypal/sdk-constants/src';
-import { node, type ChildNodeType, type ElementNode } from '@krakenjs/jsx-pragmatic/src';
-import { getLocale, type FundingEligibilityType } from '@paypal/sdk-client/src';
-import { toPx } from '@krakenjs/belter/src';
+import { FUNDING, ENV } from "@paypal/sdk-constants/src";
+import {
+  node,
+  type ChildNodeType,
+  type ElementNode,
+} from "@krakenjs/jsx-pragmatic/src";
+import { getLocale, type FundingEligibilityType } from "@paypal/sdk-client/src";
+import { toPx } from "@krakenjs/belter/src";
 
-import type { Experiment } from '../types';
-import { getFundingConfig } from '../funding';
-import { CLASS } from '../constants';
+import type { Experiment } from "../types";
+import { getFundingConfig } from "../funding";
+import { CLASS } from "../constants";
 
 type MarkOptions = {|
-    fundingSource : $Values<typeof FUNDING>,
-    fundingEligibility : FundingEligibilityType,
-    experiment : Experiment,
-    env : $Values<typeof ENV>
+  fundingSource: $Values<typeof FUNDING>,
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  env: $Values<typeof ENV>,
 |};
 
-function Mark({ fundingSource, fundingEligibility, experiment, env } : MarkOptions) : ChildNodeType {
-    const fundingConfig = getFundingConfig()[fundingSource];
+function Mark({
+  fundingSource,
+  fundingEligibility,
+  experiment,
+  env,
+}: MarkOptions): ChildNodeType {
+  const fundingConfig = getFundingConfig()[fundingSource];
 
-    if (!fundingConfig) {
-        throw new Error(`Can not find funding config for ${ fundingSource }`);
-    }
+  if (!fundingConfig) {
+    throw new Error(`Can not find funding config for ${fundingSource}`);
+  }
 
-    const { Logo } = fundingConfig;
-    const MarkLogo = fundingConfig.Mark;
-    const marksDefined = typeof MarkLogo !== 'undefined';
+  const { Logo } = fundingConfig;
+  const MarkLogo = fundingConfig.Mark;
+  const marksDefined = typeof MarkLogo !== "undefined";
 
-    return (
-        <div class='paypal-mark'>
-            { marksDefined && MarkLogo
-                ? <MarkLogo
-                        fundingEligibility={ fundingEligibility }
-                        locale={ getLocale() }
-                        experiment={ experiment }
-                        env={ env }
-                />
-                : <Logo
-                        fundingEligibility={ fundingEligibility }
-                        locale={ getLocale() }
-                        experiment={ experiment }
-                        env={ env }
-                /> }
-
-        </div>
-    );
+  return (
+    <div class="paypal-mark">
+      {marksDefined && MarkLogo ? (
+        <MarkLogo
+          fundingEligibility={fundingEligibility}
+          locale={getLocale()}
+          experiment={experiment}
+          env={env}
+        />
+      ) : (
+        <Logo
+          fundingEligibility={fundingEligibility}
+          locale={getLocale()}
+          experiment={experiment}
+          env={env}
+        />
+      )}
+    </div>
+  );
 }
 
 type MarksElementOptions = {|
-    fundingEligibility : FundingEligibilityType,
-    fundingSources : $ReadOnlyArray<$Values<typeof FUNDING>>,
-    height : number,
-    experiment : Experiment,
-    env : $Values<typeof ENV>
+  fundingEligibility: FundingEligibilityType,
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  height: number,
+  experiment: Experiment,
+  env: $Values<typeof ENV>,
 |};
 
-export function MarksElement({ fundingEligibility, fundingSources, height, experiment, env } : MarksElementOptions) : ElementNode {
-    return (
-        <div class='paypal-marks'>
-            <style>
-                {`
-                    .${ CLASS.TEXT } {
+export function MarksElement({
+  fundingEligibility,
+  fundingSources,
+  height,
+  experiment,
+  env,
+}: MarksElementOptions): ElementNode {
+  return (
+    <div class="paypal-marks">
+      <style>
+        {`
+                    .${CLASS.TEXT} {
                         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                         font-size: 12px;
                         vertical-align: middle;
@@ -70,10 +86,10 @@ export function MarksElement({ fundingEligibility, fundingSources, height, exper
                     .paypal-mark {
                         display: inline-block;
                         line-height: 0;
-                        padding: ${ toPx(height / 4) } ${ toPx(height / 3) };
+                        padding: ${toPx(height / 4)} ${toPx(height / 3)};
                         background: #fff;
                         border-radius: 3px;
-                        margin: ${ toPx(height / 5) };
+                        margin: ${toPx(height / 5)};
                         white-space: nowrap;
                         position: relative;
                         background: #fff;
@@ -85,31 +101,29 @@ export function MarksElement({ fundingEligibility, fundingSources, height, exper
                     }
 
                     .paypal-mark img {
-                        height: ${ toPx(height) };
+                        height: ${toPx(height)};
                         display: inline-block;
                         vertical-align: middle;
                     }
 
                     .paypal-button-card {
                         display: inline-block;
-                        margin-right: ${ toPx(height / 4) };
+                        margin-right: ${toPx(height / 4)};
                     }
 
                     .paypal-button-card:last-child {
                         margin-right: 0px;
                     }
                 `}
-            </style>
-            {
-                fundingSources.map(fundingSource => (
-                    <Mark
-                        fundingEligibility={ fundingEligibility }
-                        fundingSource={ fundingSource }
-                        experiment={ experiment }
-                        env={ env }
-                    />
-                ))
-            }
-        </div>
-    );
+      </style>
+      {fundingSources.map((fundingSource) => (
+        <Mark
+          fundingEligibility={fundingEligibility}
+          fundingSource={fundingSource}
+          experiment={experiment}
+          env={env}
+        />
+      ))}
+    </div>
+  );
 }

package/src/types.js

@@ -1,83 +1,83 @@
 /* @flow */
 
-import { CARD, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
+import { CARD, WALLET_INSTRUMENT } from "@paypal/sdk-constants/src";
 
 export type SecondaryInstruments = $ReadOnlyArray<{|
-    type : string,
-    label : string,
-    instrumentID : string
+  type: string,
+  label: string,
+  instrumentID: string,
 |}>;
 
 export type WalletInstrument = {|
-    type? : $Values<typeof WALLET_INSTRUMENT>,
-    label? : string,
-    logoUrl? : string,
-    instrumentID? : string,
-    tokenID? : string,
-    vendor? : $Values<typeof CARD>,
-    oneClick : boolean,
-    branded : boolean,
-    secondaryInstruments? : SecondaryInstruments
+  type?: $Values<typeof WALLET_INSTRUMENT>,
+  label?: string,
+  logoUrl?: string,
+  instrumentID?: string,
+  tokenID?: string,
+  vendor?: $Values<typeof CARD>,
+  oneClick: boolean,
+  branded: boolean,
+  secondaryInstruments?: SecondaryInstruments,
 |};
 
 export type WalletPaymentType = {|
-    instruments : $ReadOnlyArray<WalletInstrument>
+  instruments: $ReadOnlyArray<WalletInstrument>,
 |};
 
 export type Wallet = {|
-    paypal : WalletPaymentType,
-    card : WalletPaymentType,
-    credit : WalletPaymentType,
-    venmo : WalletPaymentType
+  paypal: WalletPaymentType,
+  card: WalletPaymentType,
+  credit: WalletPaymentType,
+  venmo: WalletPaymentType,
 |};
 
 export type ContentType = {|
-    instantlyPayWith : string,
-    poweredBy : string,
-    chooseCardOrShipping : string,
-    useDifferentAccount : string,
-    deleteVaultedAccount : string,
-    deleteVaultedCard : string,
-    chooseCard : string,
-    balance : string,
-    payNow : string,
-    payWithDebitOrCreditCard : string,
-    credit : string,
-    payWith : string,
-    payLater : string,
-    flex : string,
-    payPalBalance: string,
-    moreOptions: string
+  instantlyPayWith: string,
+  poweredBy: string,
+  chooseCardOrShipping: string,
+  useDifferentAccount: string,
+  deleteVaultedAccount: string,
+  deleteVaultedCard: string,
+  chooseCard: string,
+  balance: string,
+  payNow: string,
+  payWithDebitOrCreditCard: string,
+  credit: string,
+  payWith: string,
+  payLater: string,
+  flex: string,
+  payPalBalance: string,
+  moreOptions: string,
 |};
 
 export type Experiment = {|
-    enableVenmo? : boolean,
-    disablePaylater? : boolean,
-    enableVenmoAppLabel? : boolean
+  enableVenmo?: boolean,
+  disablePaylater?: boolean,
+  enableVenmoAppLabel?: boolean,
 |};
 
 export type Requires = {|
-    applepay? : boolean,
-    popup? : boolean,
-    native? : boolean
+  applepay?: boolean,
+  popup?: boolean,
+  native?: boolean,
 |};
 
 export type CustomStyle = {|
-    css? : {|
-        [string] : string
-    |},
-    label? : string
+  css?: {|
+    [string]: string,
+  |},
+  label?: string,
 |};
 
 export type LazyExport<T> = {|
-    __get__ : () => T
+  __get__: () => T,
 |};
 
 export type LazyProtectedExport<T> = {|
-    __get__ : () => ?T
+  __get__: () => ?T,
 |};
 
 export type InlineXOEligibilityType = {|
-    eligible : boolean,
-    ineligibilityReason : string
+  eligible: boolean,
+  ineligibilityReason: string,
 |};