@paypal/checkout-components 5.0.256 → 5.0.257

package/src/zoid/wallet/container.jsx

@@ -1,66 +1,75 @@
 /* @flow */
 /** @jsx node */
 
-import { destroyElement, toCSS, type EventEmitterType } from '@krakenjs/belter/src';
-import { node, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { EVENT } from '@krakenjs/zoid/src';
+import {
+  destroyElement,
+  toCSS,
+  type EventEmitterType,
+} from "@krakenjs/belter/src";
+import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import { EVENT } from "@krakenjs/zoid/src";
 
 const CLASS = {
-    VISIBLE:         'visible',
-    INVISIBLE:       'invisible',
-    COMPONENT_FRAME: 'component-frame',
-    PRERENDER_FRAME: 'prerender-frame'
+  VISIBLE: "visible",
+  INVISIBLE: "invisible",
+  COMPONENT_FRAME: "component-frame",
+  PRERENDER_FRAME: "prerender-frame",
 };
 
 type WalletContainerOptions = {|
-    uid : string,
-    frame : ?HTMLIFrameElement,
-    prerenderFrame : ?HTMLIFrameElement,
-    event : EventEmitterType,
-    nonce? : ?string
+  uid: string,
+  frame: ?HTMLIFrameElement,
+  prerenderFrame: ?HTMLIFrameElement,
+  event: EventEmitterType,
+  nonce?: ?string,
 |};
 
-export function WalletContainer({ uid, frame, prerenderFrame, event, nonce } : WalletContainerOptions) : ?ChildType {
-
-    if (!frame || !prerenderFrame) {
-        throw new Error(`Expected frame and prerenderframe`);
-    }
-
-    frame.classList.add(CLASS.COMPONENT_FRAME);
-    prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
-
-    frame.classList.add(CLASS.INVISIBLE);
-    prerenderFrame.classList.add(CLASS.VISIBLE);
-
-    event.on(EVENT.RENDERED, () => {
-        prerenderFrame.classList.remove(CLASS.VISIBLE);
-        prerenderFrame.classList.add(CLASS.INVISIBLE);
-
-        frame.classList.remove(CLASS.INVISIBLE);
-        frame.classList.add(CLASS.VISIBLE);
-
-        setTimeout(() => {
-            destroyElement(prerenderFrame);
-        }, 1000);
+export function WalletContainer({
+  uid,
+  frame,
+  prerenderFrame,
+  event,
+  nonce,
+}: WalletContainerOptions): ?ChildType {
+  if (!frame || !prerenderFrame) {
+    throw new Error(`Expected frame and prerenderframe`);
+  }
+
+  frame.classList.add(CLASS.COMPONENT_FRAME);
+  prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
+
+  frame.classList.add(CLASS.INVISIBLE);
+  prerenderFrame.classList.add(CLASS.VISIBLE);
+
+  event.on(EVENT.RENDERED, () => {
+    prerenderFrame.classList.remove(CLASS.VISIBLE);
+    prerenderFrame.classList.add(CLASS.INVISIBLE);
+
+    frame.classList.remove(CLASS.INVISIBLE);
+    frame.classList.add(CLASS.VISIBLE);
+
+    setTimeout(() => {
+      destroyElement(prerenderFrame);
+    }, 1000);
+  });
+
+  const setupAutoResize = (el) => {
+    event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
+      if (typeof newWidth === "number") {
+        el.style.width = toCSS(newWidth);
+      }
+
+      if (typeof newHeight === "number") {
+        el.style.height = toCSS(newHeight);
+      }
     });
+  };
 
-    const setupAutoResize = (el) => {
-        event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
-            if (typeof newWidth === 'number') {
-                el.style.width = toCSS(newWidth);
-            }
-
-            if (typeof newHeight === 'number') {
-                el.style.height = toCSS(newHeight);
-            }
-        });
-    };
-
-    const element = (
-        <div id={ uid } onRender={ setupAutoResize }>
-            <style nonce={ nonce }>
-                {`
-                    #${ uid } {
+  const element = (
+    <div id={uid} onRender={setupAutoResize}>
+      <style nonce={nonce}>
+        {`
+                    #${uid} {
                         position: relative;
                         display: inline-block;
                         width: 100%;
@@ -73,18 +82,18 @@ export function WalletContainer({ uid, frame, prerenderFrame, event, nonce } : W
                     }
 
                     @media only screen and (min-width: 0px) {
-                        #${ uid } {
+                        #${uid} {
                             min-height: 50px;
                         }
                     }
 
                     @media only screen and (min-width: 600px) {
-                        #${ uid } {
+                        #${uid} {
                             min-height: 60px;
                         }
                     }
 
-                    #${ uid } > iframe {
+                    #${uid} > iframe {
                         position: absolute;
                         top: 0;
                         left: 0;
@@ -92,30 +101,30 @@ export function WalletContainer({ uid, frame, prerenderFrame, event, nonce } : W
                         height: 100%;
                     }
 
-                    #${ uid } > iframe.${ CLASS.COMPONENT_FRAME } {
+                    #${uid} > iframe.${CLASS.COMPONENT_FRAME} {
                         z-index: 100;
                     }
 
-                    #${ uid } > iframe.${ CLASS.PRERENDER_FRAME } {
+                    #${uid} > iframe.${CLASS.PRERENDER_FRAME} {
                         transition: opacity .2s linear;
                         z-index: 200;
                     }
 
-                    #${ uid } > iframe.${ CLASS.VISIBLE } {
+                    #${uid} > iframe.${CLASS.VISIBLE} {
                         opacity: 1;
                     }
 
-                    #${ uid } > iframe.${ CLASS.INVISIBLE } {
+                    #${uid} > iframe.${CLASS.INVISIBLE} {
                         opacity: 0;
                         pointer-events: none;
                     }
                 `}
-            </style>
+      </style>
 
-            <node el={ frame } />
-            <node el={ prerenderFrame } />
-        </div>
-    );
+      <node el={frame} />
+      <node el={prerenderFrame} />
+    </div>
+  );
 
-    return element;
+  return element;
 }

package/src/zoid/wallet/index.js

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

package/src/zoid/wallet/prerender.jsx

@@ -1,19 +1,19 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
 type PrerenderedWalletProps = {|
-    nonce : ?string
+  nonce: ?string,
 |};
 
-export function WalletPrerender({ nonce } : PrerenderedWalletProps) : ChildType {
-    return (
-        <html>
-            <body>
-                <style
-                    nonce={ nonce }
-                    innerHTML={ `
+export function WalletPrerender({ nonce }: PrerenderedWalletProps): ChildType {
+  return (
+    <html>
+      <body>
+        <style
+          nonce={nonce}
+          innerHTML={`
                         html, body {
                             padding: 0;
                             margin: 0;
@@ -49,9 +49,9 @@ export function WalletPrerender({ nonce } : PrerenderedWalletProps) : ChildType
                                 transform: translateX(150%);
                             }
                         }
-                    ` }
-                />
-            </body>
-        </html>
-    );
+                    `}
+        />
+      </body>
+    </html>
+  );
 }

package/src/zoid/wallet/props.js

@@ -1,9 +1,9 @@
 /* @flow */
 
-import { FUNDING } from '@paypal/sdk-constants/src';
+import { FUNDING } from "@paypal/sdk-constants/src";
 
 export type WalletProps = {|
-    nonce : ?string,
-    fundingSource : $Values<typeof FUNDING>,
-    userIDToken : ?string
+  nonce: ?string,
+  fundingSource: $Values<typeof FUNDING>,
+  userIDToken: ?string,
 |};

package/src/lib/getLogoCDNExperiment.js

@@ -1,25 +0,0 @@
-/* @flow */
-
-import { createExperiment } from "@paypal/sdk-client/src";
-import type { Experiment } from "@krakenjs/belter/src";
-import type { ChildType } from "@krakenjs/jsx-pragmatic/src";
-
-export function getLogoCDNExperiment(): Experiment {
-  return createExperiment("enable_logo_cdn_experiment", 100);
-}
-
-export function enableLogoCDNExperiment<T>(
-  logo: (T) => ChildType,
-  logoOptions: T
-): ChildType {
-  // enable logo CDN experiment for first render only
-  if (__WEB__) {
-    const logoCDNExperiment = getLogoCDNExperiment();
-    const loadFromCDN = logoCDNExperiment.isEnabled();
-
-    return logo({ ...logoOptions, loadFromCDN });
-  }
-
-  // continue using inline svg for second render
-  return logo(logoOptions);
-}