@paypal/checkout-components 5.0.256 → 5.0.258

package/src/zoid/payment-fields/props.js

@@ -1,12 +1,12 @@
 /* @flow */
 
-import type { LocaleType } from '@paypal/sdk-constants/src';
+import type { LocaleType } from "@paypal/sdk-constants/src";
 
-import type { StateGetSet } from '../../lib';
+import type { StateGetSet } from "../../lib";
 
 export type PaymentFieldsProps = {|
-    nonce : ?string,
-    locale : LocaleType,
-    storageState : StateGetSet,
-    sessionState : StateGetSet
+  nonce: ?string,
+  locale: LocaleType,
+  storageState: StateGetSet,
+  sessionState: StateGetSet,
 |};

package/src/zoid/qr-code/component.jsx

@@ -1,125 +1,141 @@
 /* @flow */
 /** @jsx node */
 
-import { inlineMemoize, uniqueID } from '@krakenjs/belter/src';
-import { create, type ZoidComponent } from '@krakenjs/zoid/src';
-import { getLogger, getPayPalDomainRegex, getPayPalDomain, getCSPNonce, getSDKMeta, getDebug, getEnv, getSessionID, getLocale, getClientID, getCorrelationID, getBuyerCountry } from '@paypal/sdk-client/src';
+import { inlineMemoize, uniqueID } from "@krakenjs/belter/src";
+import { create, type ZoidComponent } from "@krakenjs/zoid/src";
+import {
+  getLogger,
+  getPayPalDomainRegex,
+  getPayPalDomain,
+  getCSPNonce,
+  getSDKMeta,
+  getDebug,
+  getEnv,
+  getSessionID,
+  getLocale,
+  getClientID,
+  getCorrelationID,
+  getBuyerCountry,
+} from "@paypal/sdk-client/src";
 
-import { containerTemplate } from './container';
-import { prerenderTemplate } from './prerender';
-import { type QRCodeProps } from './types';
+import { containerTemplate } from "./container";
+import { prerenderTemplate } from "./prerender";
+import { type QRCodeProps } from "./types";
 
 export type QRCodeComponent = ZoidComponent<QRCodeProps>;
 
-export function getQRCodeComponent() : QRCodeComponent {
-    return inlineMemoize(getQRCodeComponent, () => {
-        return create({
-            tag:        'paypal-qr-modal',
-            url:        ({ props }) => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__QRCODE__ }?${ props.qrPath }`,
-            domain:     getPayPalDomainRegex(),
-            dimensions: {
-                width:  '100%',
-                height: '100%'
-            },
-            logger:     getLogger(),
-            prerenderTemplate,
+export function getQRCodeComponent(): QRCodeComponent {
+  return inlineMemoize(getQRCodeComponent, () => {
+    return create({
+      tag: "paypal-qr-modal",
+      url: ({ props }) =>
+        `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__QRCODE__}?${
+          props.qrPath
+        }`,
+      domain: getPayPalDomainRegex(),
+      dimensions: {
+        width: "100%",
+        height: "100%",
+      },
+      logger: getLogger(),
+      prerenderTemplate,
 
-            containerTemplate,
-            autoResize: {
-                width:  true,
-                height: true
-            },
-            attributes: {
-                iframe: {
-                    scrolling: 'no'
-                }
-            },
-            props: {
-                onEscapePath: {
-                    type:     'function',
-                    required: true
-                },
-                qrPath: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   true
-                },
-                cspNonce: {
-                    type:       'string',
-                    queryParam: false,
-                    required:   false,
-                    value:      getCSPNonce
-                },
-                debug: {
-                    type:       'boolean',
-                    value:      getDebug,
-                    queryParam: true,
-                    required:   false
-                },
-                state: {
-                    type:       'string',
-                    queryParam: false,
-                    required:   false
-                },
-                errorText: {
-                    type:       'string',
-                    queryParam: false,
-                    required:   false
-                },
-                sdkMeta: {
-                    type:        'string',
-                    queryParam:  true,
-                    sendToChild: false,
-                    value:       getSDKMeta
-                },
-                env: {
-                    type:        'string',
-                    queryParam:  true,
-                    required:    false,
-                    value:       getEnv
-                },
-                sessionID: {
-                    type:        'string',
-                    queryParam:  true,
-                    required:    false,
-                    value:       getSessionID
-                },
-                locale: {
-                    type:        'object',
-                    queryParam:  true,
-                    required:    false,
-                    value:       getLocale
-                },
-                clientID: {
-                    type:         'string',
-                    queryParam:   true,
-                    required:     false,
-                    value:        getClientID
-                },
-                orderID: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   false
-                },
-                sdkCorrelationID: {
-                    type:       'string',
-                    required:   false,
-                    value:      getCorrelationID,
-                    queryParam: true
-                },
-                buyerCountry: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   false,
-                    value:      getBuyerCountry
-                },
-                buttonSessionID: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   false,
-                    value:      uniqueID
-                }
-            }
-        });
+      containerTemplate,
+      autoResize: {
+        width: true,
+        height: true,
+      },
+      attributes: {
+        iframe: {
+          scrolling: "no",
+        },
+      },
+      props: {
+        onEscapePath: {
+          type: "function",
+          required: true,
+        },
+        qrPath: {
+          type: "string",
+          queryParam: true,
+          required: true,
+        },
+        cspNonce: {
+          type: "string",
+          queryParam: false,
+          required: false,
+          value: getCSPNonce,
+        },
+        debug: {
+          type: "boolean",
+          value: getDebug,
+          queryParam: true,
+          required: false,
+        },
+        state: {
+          type: "string",
+          queryParam: false,
+          required: false,
+        },
+        errorText: {
+          type: "string",
+          queryParam: false,
+          required: false,
+        },
+        sdkMeta: {
+          type: "string",
+          queryParam: true,
+          sendToChild: false,
+          value: getSDKMeta,
+        },
+        env: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          value: getEnv,
+        },
+        sessionID: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          value: getSessionID,
+        },
+        locale: {
+          type: "object",
+          queryParam: true,
+          required: false,
+          value: getLocale,
+        },
+        clientID: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          value: getClientID,
+        },
+        orderID: {
+          type: "string",
+          queryParam: true,
+          required: false,
+        },
+        sdkCorrelationID: {
+          type: "string",
+          required: false,
+          value: getCorrelationID,
+          queryParam: true,
+        },
+        buyerCountry: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          value: getBuyerCountry,
+        },
+        buttonSessionID: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          value: uniqueID,
+        },
+      },
     });
+  });
 }

package/src/zoid/qr-code/container.jsx

@@ -1,64 +1,64 @@
 /* @flow */
 /** @jsx node */
 
-import { destroyElement, type EventEmitterType } from '@krakenjs/belter/src';
-import { EVENT, type RenderOptionsType } from '@krakenjs/zoid/src';
-import { node, dom, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { destroyElement, type EventEmitterType } from "@krakenjs/belter/src";
+import { EVENT, type RenderOptionsType } from "@krakenjs/zoid/src";
+import { node, dom, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-import { type QRCodeProps } from './types';
+import { type QRCodeProps } from "./types";
 
 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",
 };
 
 export function QRCodeContainer({
-    uid,
-    frame,
-    prerenderFrame,
-    event,
-    cspNonce
-} : {|
-    uid : string,
-    frame : ?HTMLIFrameElement,
-    prerenderFrame : ?HTMLIFrameElement,
-    event : EventEmitterType,
-    cspNonce? : ?string
-|}) : ?ChildType {
-    if (!frame || !prerenderFrame) {
-        throw new Error(`Expected frame and prerenderframe`);
-    }
+  uid,
+  frame,
+  prerenderFrame,
+  event,
+  cspNonce,
+}: {|
+  uid: string,
+  frame: ?HTMLIFrameElement,
+  prerenderFrame: ?HTMLIFrameElement,
+  event: EventEmitterType,
+  cspNonce?: ?string,
+|}): ?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.COMPONENT_FRAME);
+  prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
 
-    frame.classList.add(CLASS.INVISIBLE);
-    prerenderFrame.classList.add(CLASS.VISIBLE);
+  frame.classList.add(CLASS.INVISIBLE);
+  prerenderFrame.classList.add(CLASS.VISIBLE);
 
-    event.on(EVENT.RENDERED, () => {
-        prerenderFrame.classList.remove(CLASS.VISIBLE);
-        prerenderFrame.classList.add(CLASS.INVISIBLE);
+  event.on(EVENT.RENDERED, () => {
+    prerenderFrame.classList.remove(CLASS.VISIBLE);
+    prerenderFrame.classList.add(CLASS.INVISIBLE);
 
-        frame.classList.remove(CLASS.INVISIBLE);
-        frame.classList.add(CLASS.VISIBLE);
+    frame.classList.remove(CLASS.INVISIBLE);
+    frame.classList.add(CLASS.VISIBLE);
 
-        setTimeout(() => {
-            destroyElement(prerenderFrame);
-        }, 1);
-    });
+    setTimeout(() => {
+      destroyElement(prerenderFrame);
+    }, 1);
+  });
 
-    return (
-        <div id={ uid }>
-            <style
-                nonce={ cspNonce }
-                innerHTML={ `
+  return (
+    <div id={uid}>
+      <style
+        nonce={cspNonce}
+        innerHTML={`
             * {
                 box-sizing: border-box;
             }
 
-            #${ uid } {
+            #${uid} {
                 display: flex;
                 position: fixed;
                 width: 100%;
@@ -70,7 +70,7 @@ export function QRCodeContainer({
                 justify-content: center;
                 background-color: rgba(0, 0, 0, 0.4); 
             }
-            #${ uid } iframe {
+            #${uid} iframe {
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -81,10 +81,10 @@ export function QRCodeContainer({
                 left: 0;
                 transition: opacity .2s ease-in-out;
             }
-            #${ uid } > iframe.${ CLASS.VISIBLE } {
+            #${uid} > iframe.${CLASS.VISIBLE} {
                 opacity: 1;
             }
-            #${ uid } > iframe.${ CLASS.INVISIBLE } {
+            #${uid} > iframe.${CLASS.INVISIBLE} {
                 opacity: 0;
                 pointer-events: none;
             }
@@ -100,31 +100,37 @@ export function QRCodeContainer({
                 flex-direction: column;
                 position: relative;
             }     
-            ` } />
-            <div id="qrModal">
-                <node el={ frame } />
-                <node el={ prerenderFrame } />
-            </div>
-                        
-        </div>
-    );
+            `}
+      />
+      <div id="qrModal">
+        <node el={frame} />
+        <node el={prerenderFrame} />
+      </div>
+    </div>
+  );
 }
 
-export function containerTemplate({ frame, prerenderFrame, props, doc, uid, event } : (RenderOptionsType<QRCodeProps>)) : ?HTMLElement {
-    if (!frame || !prerenderFrame) {
-        return;
-    }
+export function containerTemplate({
+  frame,
+  prerenderFrame,
+  props,
+  doc,
+  uid,
+  event,
+}: RenderOptionsType<QRCodeProps>): ?HTMLElement {
+  if (!frame || !prerenderFrame) {
+    return;
+  }
 
-    const { cspNonce } = props;
+  const { cspNonce } = props;
 
-    return (
-        <QRCodeContainer
-            uid={ uid }
-            cspNonce={ cspNonce }
-            event={ event }
-            frame={ frame }
-            prerenderFrame={ prerenderFrame }
-        />
-        
-    ).render(dom({ doc }));
+  return (
+    <QRCodeContainer
+      uid={uid}
+      cspNonce={cspNonce}
+      event={event}
+      frame={frame}
+      prerenderFrame={prerenderFrame}
+    />
+  ).render(dom({ doc }));
 }

package/src/zoid/qr-code/index.js

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

package/src/zoid/qr-code/prerender.jsx

@@ -1,14 +1,18 @@
 /* @flow */
 /** @jsx node */
 
-import { type RenderOptionsType } from '@krakenjs/zoid/src';
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-import { SpinnerPage } from '@paypal/common-components/src';
+import { type RenderOptionsType } from "@krakenjs/zoid/src";
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import { SpinnerPage } from "@paypal/common-components/src";
 
-import { type QRCodeProps } from './types';
+import { type QRCodeProps } from "./types";
 
-export function prerenderTemplate({ doc, props, close } : (RenderOptionsType<QRCodeProps>)) : ?HTMLElement {
-    const style = `
+export function prerenderTemplate({
+  doc,
+  props,
+  close,
+}: RenderOptionsType<QRCodeProps>): ?HTMLElement {
+  const style = `
     #close {
         position: absolute;
         right: 16px;
@@ -37,11 +41,12 @@ export function prerenderTemplate({ doc, props, close } : (RenderOptionsType<QRC
     }  
     `;
 
-    const children = [
-        <style nonce={ props.cspNonce } innerHTML={ style } />,
-        <a href="#" id="close" aria-label="close" role="button" onClick={ close } />
-    ];
+  const children = [
+    <style nonce={props.cspNonce} innerHTML={style} />,
+    <a href="#" id="close" aria-label="close" role="button" onClick={close} />,
+  ];
 
-    return new SpinnerPage({ nonce: props.cspNonce }, children)
-        .render(dom({ doc }));
+  return new SpinnerPage({ nonce: props.cspNonce }, children).render(
+    dom({ doc })
+  );
 }

package/src/zoid/qr-code/types.js

@@ -1,6 +1,6 @@
 /* @flow */
 
 export type QRCodeProps = {|
-    qrPath : string,
-    cspNonce : ?string
+  qrPath: string,
+  cspNonce: ?string,
 |};