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

package/src/interface/payment-fields.js

@@ -1,8 +1,11 @@
 /* @flow */
 
-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 PaymentFields : LazyExport<PaymentFieldsComponent> = {
-    __get__: () => getPaymentFieldsComponent()
+export const PaymentFields: LazyExport<PaymentFieldsComponent> = {
+  __get__: () => getPaymentFieldsComponent(),
 };

package/src/interface/wallet.js

@@ -1,8 +1,8 @@
 /* @flow */
 
-import type { LazyExport } from '../types';
-import { getWalletComponent, type WalletComponent } from '../zoid/wallet';
+import type { LazyExport } from "../types";
+import { getWalletComponent, type WalletComponent } from "../zoid/wallet";
 
-export const Wallet : LazyExport<WalletComponent> = {
-    __get__: () => getWalletComponent()
+export const Wallet: LazyExport<WalletComponent> = {
+  __get__: () => getWalletComponent(),
 };

package/src/lib/errors.js

@@ -1,13 +1,13 @@
 /* @flow */
 
-import { ERROR_CODE } from '@paypal/sdk-constants/src';
+import { ERROR_CODE } from "@paypal/sdk-constants/src";
 
 export class ValidationError extends Error {
-    code : string;
+  code: string;
 
-    constructor(message : string) {
-        super(message);
-        this.name = 'ValidationError';
-        this.code = ERROR_CODE.VALIDATION_ERROR;
-    }
+  constructor(message: string) {
+    super(message);
+    this.name = "ValidationError";
+    this.code = ERROR_CODE.VALIDATION_ERROR;
+  }
 }

package/src/lib/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
-export * from './errors';
-export * from './isRTLLanguage';
-export * from './security';
-export * from './session';
-export * from './perceived-latency-instrumentation';
+export * from "./errors";
+export * from "./isRTLLanguage";
+export * from "./security";
+export * from "./session";
+export * from "./perceived-latency-instrumentation";

package/src/lib/isRTLLanguage.js

@@ -1,6 +1,6 @@
 /* @flow */
-import { LANG } from '@paypal/sdk-constants/src';
+import { LANG } from "@paypal/sdk-constants/src";
 
-export const isRTLLanguage = (languageCode : $Values<typeof LANG>) : boolean => {
-    return languageCode === LANG.HE || languageCode === LANG.AR;
+export const isRTLLanguage = (languageCode: $Values<typeof LANG>): boolean => {
+  return languageCode === LANG.HE || languageCode === LANG.AR;
 };

package/src/lib/perceived-latency-instrumentation.js

@@ -1,32 +1,40 @@
 /* @flow */
 
 type LogLatencyInstrumentationPhaseParams = {|
-    buttonSessionID : string,
-    phase : string
+  buttonSessionID: string,
+  phase: string,
 |};
 
 type InstrumentationPayload = {|
-    comp? : Object,
-    chunk? : Object,
-    query? : Object
+  comp?: Object,
+  chunk?: Object,
+  query?: Object,
 |};
 
-function getNavigationTimeOrigin() : number {
-    if (window.performance) {
-        const hrSyncPoint = performance.now();
-        const unixSyncPoint = new Date().getTime();
-        return window.performance.timeOrigin || window.performance.timing.navigationStart || (unixSyncPoint - hrSyncPoint);
-    } else {
-        throw new Error('window.performance not supported');
-    }
+function getNavigationTimeOrigin(): number {
+  if (window.performance) {
+    const hrSyncPoint = performance.now();
+    const unixSyncPoint = new Date().getTime();
+    return (
+      window.performance.timeOrigin ||
+      window.performance.timing.navigationStart ||
+      unixSyncPoint - hrSyncPoint
+    );
+  } else {
+    throw new Error("window.performance not supported");
+  }
 }
 
-function getStartTimeFromMark({ buttonSessionID, phase } : LogLatencyInstrumentationPhaseParams) : number {
-    if (window.performance) {
-        return performance.getEntriesByName(`${ buttonSessionID }_${ phase }`).pop().startTime;
-    } else {
-        throw new Error('window.performance not supported');
-    }
+function getStartTimeFromMark({
+  buttonSessionID,
+  phase,
+}: LogLatencyInstrumentationPhaseParams): number {
+  if (window.performance) {
+    return performance.getEntriesByName(`${buttonSessionID}_${phase}`).pop()
+      .startTime;
+  } else {
+    throw new Error("window.performance not supported");
+  }
 }
 
 /* To Track time spent in each phase(cdn download, chunks download, etc)
@@ -39,23 +47,33 @@ function getStartTimeFromMark({ buttonSessionID, phase } : LogLatencyInstrumenta
         phase: 'html_body'
     })
 */
-export const logLatencyInstrumentationPhase = ({ buttonSessionID, phase } : LogLatencyInstrumentationPhaseParams) => {
-    if (window.performance && window.performance.mark) {
-        window.performance.mark(`${ buttonSessionID }_${ phase }`);
-    }
+export const logLatencyInstrumentationPhase = ({
+  buttonSessionID,
+  phase,
+}: LogLatencyInstrumentationPhaseParams) => {
+  if (window.performance && window.performance.mark) {
+    window.performance.mark(`${buttonSessionID}_${phase}`);
+  }
 };
 
-export const prepareInstrumentationPayload = (buttonSessionID : string) : InstrumentationPayload => {
-    const timeOrigin = getNavigationTimeOrigin();
-    const renderStartTime = getStartTimeFromMark({ buttonSessionID, phase: 'buttons-first-render' });
-    const renderEndTime = getStartTimeFromMark({ buttonSessionID, phase: 'buttons-first-render-end' });
-    return {
-        comp: {
-            'first-render': {
-                start: timeOrigin + renderStartTime,
-                tt:    renderEndTime - renderStartTime
-            }
-        }
-    };
+export const prepareInstrumentationPayload = (
+  buttonSessionID: string
+): InstrumentationPayload => {
+  const timeOrigin = getNavigationTimeOrigin();
+  const renderStartTime = getStartTimeFromMark({
+    buttonSessionID,
+    phase: "buttons-first-render",
+  });
+  const renderEndTime = getStartTimeFromMark({
+    buttonSessionID,
+    phase: "buttons-first-render-end",
+  });
+  return {
+    comp: {
+      "first-render": {
+        start: timeOrigin + renderStartTime,
+        tt: renderEndTime - renderStartTime,
+      },
+    },
+  };
 };
-

package/src/lib/security.js

@@ -1,26 +1,30 @@
 /* @flow */
 
-import { isSameDomain } from '@krakenjs/cross-domain-utils/src';
-import { supportsPopups } from '@krakenjs/belter/src';
-import { isPayPalDomain } from '@paypal/sdk-client/src';
+import { isSameDomain } from "@krakenjs/cross-domain-utils/src";
+import { supportsPopups } from "@krakenjs/belter/src";
+import { isPayPalDomain } from "@paypal/sdk-client/src";
 
-export function allowIframe() : boolean {
+export function allowIframe(): boolean {
+  if (!isPayPalDomain()) {
+    throw new Error(
+      `Can only determine if iframe rendering is allowed on paypal domain`
+    );
+  }
 
-    if (!isPayPalDomain()) {
-        throw new Error(`Can only determine if iframe rendering is allowed on paypal domain`);
-    }
+  if (!supportsPopups()) {
+    return true;
+  }
 
-    if (!supportsPopups()) {
-        return true;
-    }
+  const parentComponentWindow = window.xprops && window.xprops.getParent();
+  if (parentComponentWindow && isSameDomain(parentComponentWindow)) {
+    return true;
+  }
 
-    const parentComponentWindow = window.xprops && window.xprops.getParent();
-    if (parentComponentWindow && isSameDomain(parentComponentWindow)) {
-        return true;
-    }
-
-    return false;
+  return false;
 }
 
+/* eslint-disable no-confusing-arrow */
 // $FlowIssue
-export const protectedExport = (unprotectedExport) => (isPayPalDomain() ? unprotectedExport : undefined);
+export const protectedExport = (unprotectedExport) =>
+  isPayPalDomain() ? unprotectedExport : undefined;
+/* eslint-enable no-confusing-arrow */

package/src/lib/session.js

@@ -1,47 +1,51 @@
 /* @flow */
 
-import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
-import { getSessionID as getSDKSessionID, getStorageState, getSessionState } from '@paypal/sdk-client/src';
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import {
+  getSessionID as getSDKSessionID,
+  getStorageState,
+  getSessionState,
+} from "@paypal/sdk-client/src";
 
 export type StateGetSet = {|
-    // eslint-disable-next-line no-undef
-    get : <T>(string) => ZalgoPromise<T>,
-    // eslint-disable-next-line no-undef
-    set : <T>(string, T) => ZalgoPromise<T>
+  // eslint-disable-next-line no-undef
+  get: <T>(string) => ZalgoPromise<T>,
+  // eslint-disable-next-line no-undef
+  set: <T>(string, T) => ZalgoPromise<T>,
 |};
 
-export function getSessionID() : string {
-    if (window.xprops && window.xprops.sessionID) {
-        return window.xprops.sessionID;
-    }
+export function getSessionID(): string {
+  if (window.xprops && window.xprops.sessionID) {
+    return window.xprops.sessionID;
+  }
 
-    return getSDKSessionID();
+  return getSDKSessionID();
 }
 
-export const storageState : StateGetSet = {
-    get: <T>(key : string) : ZalgoPromise<T> => {
-        return getStorageState(state => {
-            return ZalgoPromise.resolve(state[key]);
-        });
-    },
-    set: <T>(key : string, value : T) : ZalgoPromise<T> => {
-        return getStorageState(state => {
-            state[key] = value;
-            return ZalgoPromise.resolve(value);
-        });
-    }
+export const storageState: StateGetSet = {
+  get: <T>(key: string): ZalgoPromise<T> => {
+    return getStorageState((state) => {
+      return ZalgoPromise.resolve(state[key]);
+    });
+  },
+  set: <T>(key: string, value: T): ZalgoPromise<T> => {
+    return getStorageState((state) => {
+      state[key] = value;
+      return ZalgoPromise.resolve(value);
+    });
+  },
 };
 
-export const sessionState : StateGetSet = {
-    get: <T>(key : string) : ZalgoPromise<T> => {
-        return getSessionState(state => {
-            return ZalgoPromise.resolve(state[key]);
-        });
-    },
-    set: <T>(key : string, value : T) : ZalgoPromise<T> => {
-        return getSessionState(state => {
-            state[key] = value;
-            return ZalgoPromise.resolve(value);
-        });
-    }
+export const sessionState: StateGetSet = {
+  get: <T>(key: string): ZalgoPromise<T> => {
+    return getSessionState((state) => {
+      return ZalgoPromise.resolve(state[key]);
+    });
+  },
+  set: <T>(key: string, value: T): ZalgoPromise<T> => {
+    return getSessionState((state) => {
+      state[key] = value;
+      return ZalgoPromise.resolve(value);
+    });
+  },
 };

package/src/marks/component.jsx

@@ -1,88 +1,137 @@
 /* @flow */
 /** @jsx node */
 
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
-import { getElement, isDevice, memoize, isApplePaySupported, supportsPopups as userAgentSupportsPopups } from '@krakenjs/belter/src';
-import { PLATFORM, FUNDING } from '@paypal/sdk-constants/src';
-import { getRememberedFunding } from '@paypal/funding-components/src';
-import { getComponents, getFundingEligibility, getEnv } from '@paypal/sdk-client/src';
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import {
+  getElement,
+  isDevice,
+  memoize,
+  isApplePaySupported,
+  supportsPopups as userAgentSupportsPopups,
+} from "@krakenjs/belter/src";
+import { PLATFORM, FUNDING } from "@paypal/sdk-constants/src";
+import { getRememberedFunding } from "@paypal/funding-components/src";
+import {
+  getComponents,
+  getFundingEligibility,
+  getEnv,
+} from "@paypal/sdk-client/src";
 
-import type { OnShippingChange, OnShippingAddressChange, OnShippingOptionsChange } from '../ui/buttons/props';
-import { BUTTON_LAYOUT, BUTTON_FLOW } from '../constants';
-import { determineEligibleFunding, isFundingEligible } from '../funding';
-import { isSupportedNativeBrowser, getVenmoExperiment } from '../zoid/buttons/util';
+import type {
+  OnShippingChange,
+  OnShippingAddressChange,
+  OnShippingOptionsChange,
+} from "../ui/buttons/props";
+import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
+import { determineEligibleFunding, isFundingEligible } from "../funding";
+import {
+  isSupportedNativeBrowser,
+  getVenmoExperiment,
+} from "../zoid/buttons/util";
 
-import { MarksElement } from './template';
+import { MarksElement } from "./template";
 
 const DEFAULT_HEIGHT = 20;
 
 type MarksInstance = {|
-    isEligible : () => boolean,
-    render : (string | HTMLElement) => ZalgoPromise<void>
+  isEligible: () => boolean,
+  render: (string | HTMLElement) => ZalgoPromise<void>,
 |};
 
 type MarksProps = {|
-    fundingSource? : ?$Values<typeof FUNDING>,
-    onShippingChange? : OnShippingChange,
-    onShippingAddressChange? : OnShippingAddressChange,
-    onShippingOptionsChange? : OnShippingOptionsChange
+  fundingSource?: ?$Values<typeof FUNDING>,
+  onShippingChange?: OnShippingChange,
+  onShippingAddressChange?: OnShippingAddressChange,
+  onShippingOptionsChange?: OnShippingOptionsChange,
 |};
 
 export type MarksComponent = (MarksProps) => MarksInstance;
 
-export const getMarksComponent : () => MarksComponent = memoize(() => {
-    function Marks({ fundingSource, onShippingChange, onShippingAddressChange, onShippingOptionsChange } : MarksProps = {}) : MarksInstance {
+export const getMarksComponent: () => MarksComponent = memoize(() => {
+  function Marks({
+    fundingSource,
+    onShippingChange,
+    onShippingAddressChange,
+    onShippingOptionsChange,
+  }: MarksProps = {}): MarksInstance {
+    const height = DEFAULT_HEIGHT;
+    const fundingEligibility = getFundingEligibility();
+    const platform = isDevice() ? PLATFORM.MOBILE : PLATFORM.DESKTOP;
+    const remembered = getRememberedFunding();
+    const layout = BUTTON_LAYOUT.VERTICAL;
+    const components = getComponents();
+    const flow = BUTTON_FLOW.PURCHASE;
+    const applePaySupport = fundingEligibility?.applepay?.eligible
+      ? isApplePaySupported()
+      : false;
+    const supportsPopups = userAgentSupportsPopups();
+    const supportedNativeBrowser = isSupportedNativeBrowser();
+    const experiment = getVenmoExperiment();
+    const fundingSources = determineEligibleFunding({
+      fundingSource,
+      fundingEligibility,
+      components,
+      platform,
+      remembered,
+      layout,
+      flow,
+      applePaySupport,
+      supportsPopups,
+      supportedNativeBrowser,
+      experiment,
+    });
+    const env = getEnv();
 
-        const height = DEFAULT_HEIGHT;
-        const fundingEligibility = getFundingEligibility();
-        const platform = isDevice() ? PLATFORM.MOBILE : PLATFORM.DESKTOP;
-        const remembered = getRememberedFunding();
-        const layout = BUTTON_LAYOUT.VERTICAL;
-        const components = getComponents();
-        const flow = BUTTON_FLOW.PURCHASE;
-        const applePaySupport = fundingEligibility?.applepay?.eligible ? isApplePaySupported() : false;
-        const supportsPopups = userAgentSupportsPopups();
-        const supportedNativeBrowser = isSupportedNativeBrowser();
-        const experiment = getVenmoExperiment();
-        const fundingSources = determineEligibleFunding({ fundingSource, fundingEligibility, components, platform, remembered, layout, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
-        const env = getEnv();
+    const isEligible = () => {
+      if (!fundingSource) {
+        return true;
+      }
 
-        const isEligible = () => {
-            if (!fundingSource) {
-                return true;
-            }
+      return isFundingEligible(fundingSource, {
+        layout,
+        platform,
+        fundingSource,
+        fundingEligibility,
+        components,
+        onShippingChange,
+        onShippingAddressChange,
+        onShippingOptionsChange,
+        flow,
+        applePaySupport,
+        supportsPopups,
+        supportedNativeBrowser,
+        experiment,
+      });
+    };
 
-            return isFundingEligible(fundingSource, { layout, platform, fundingSource, fundingEligibility, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, flow, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
-        };
+    const render = (container) => {
+      return ZalgoPromise.try(() => {
+        if (!isEligible()) {
+          throw new Error(`${fundingSource || "marks"} not eligible`);
+        }
 
-        const render = (container) => {
-            return ZalgoPromise.try(() => {
-                if (!isEligible()) {
-                    throw new Error(`${ fundingSource || 'marks' } not eligible`);
-                }
+        getElement(container).appendChild(
+          (
+            <div>
+              <MarksElement
+                fundingEligibility={fundingEligibility}
+                fundingSources={fundingSources}
+                height={height}
+                experiment={experiment}
+                env={env}
+              />
+            </div>
+          ).render(dom({ doc: document }))
+        );
+      });
+    };
 
-                getElement(container).appendChild(
-                    (
-                        <div>
-                            <MarksElement
-                                fundingEligibility={ fundingEligibility }
-                                fundingSources={ fundingSources }
-                                height={ height }
-                                experiment={ experiment }
-                                env={ env }
-                            />
-                        </div>
-                    ).render(dom({ doc: document }))
-                );
-            });
-        };
+    return {
+      render,
+      isEligible,
+    };
+  }
 
-        return {
-            render,
-            isEligible
-        };
-    }
-
-    return Marks;
+  return Marks;
 });

package/src/marks/index.js

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