@paypal/checkout-components 5.0.256 → 5.0.258

package/src/zoid/installments/component.jsx

@@ -2,86 +2,99 @@
 /** @jsx node */
 /* eslint max-lines: 0 */
 
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-import { getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain, getLocale, getCSPNonce } from '@paypal/sdk-client/src';
-import { create, type ZoidComponent } from '@krakenjs/zoid/src';
-import { inlineMemoize } from '@krakenjs/belter/src';
-import { Overlay, SpinnerPage } from '@paypal/common-components/src';
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import {
+  getLogger,
+  getPayPalDomainRegex,
+  getSDKMeta,
+  getPayPalDomain,
+  getLocale,
+  getCSPNonce,
+} from "@paypal/sdk-client/src";
+import { create, type ZoidComponent } from "@krakenjs/zoid/src";
+import { inlineMemoize } from "@krakenjs/belter/src";
+import { Overlay, SpinnerPage } from "@paypal/common-components/src";
 
-import { type InstallmentsProps } from './props';
+import { type InstallmentsProps } from "./props";
 
 export type InstallmentsComponent = ZoidComponent<InstallmentsProps>;
 
-export function getInstallmentsComponent() : InstallmentsComponent {
-    return inlineMemoize(getInstallmentsComponent, () => {
-        return create({
-            tag: 'paypal-installments',
-            url: () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__INSTALLMENTS__ }`,
+export function getInstallmentsComponent(): InstallmentsComponent {
+  return inlineMemoize(getInstallmentsComponent, () => {
+    return create({
+      tag: "paypal-installments",
+      url: () =>
+        `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__INSTALLMENTS__}`,
 
-            domain: getPayPalDomainRegex(),
-            
-            autoResize: {
-                width:  false,
-                height: true
-            },
+      domain: getPayPalDomainRegex(),
 
-            dimensions: {
-                width:  '100%',
-                height: '100%'
-            },
+      autoResize: {
+        width: false,
+        height: true,
+      },
 
-            logger: getLogger(),
+      dimensions: {
+        width: "100%",
+        height: "100%",
+      },
 
-            prerenderTemplate: ({ doc, props }) => {
-                const nonce = props.nonce || getCSPNonce();
-                return (
-                    <SpinnerPage
-                        nonce={ nonce }
-                    />
-                ).render(dom({ doc }));
-            },
+      logger: getLogger(),
 
-            containerTemplate: ({ context, close, focus, doc, event, frame, prerenderFrame, props }) => {
-                const { nonce } = props;
-                return (
-                    <Overlay
-                        context={ context }
-                        close={ close }
-                        focus={ focus }
-                        event={ event }
-                        frame={ frame }
-                        prerenderFrame={ prerenderFrame }
-                        autoResize={ true }
-                        hideCloseButton={ true }
-                        nonce={ nonce }
-                    />
-                ).render(dom({ doc }));
-            },
+      prerenderTemplate: ({ doc, props }) => {
+        const nonce = props.nonce || getCSPNonce();
+        return (<SpinnerPage nonce={nonce} />).render(dom({ doc }));
+      },
 
-            props: {
-                sdkMeta: {
-                    type:        'string',
-                    queryParam:  true,
-                    sendToChild: false,
-                    value:       getSDKMeta
-                },
-                
-                clientID: {
-                    type:       'string',
-                    queryParam: true
-                },
+      containerTemplate: ({
+        context,
+        close,
+        focus,
+        doc,
+        event,
+        frame,
+        prerenderFrame,
+        props,
+      }) => {
+        const { nonce } = props;
+        return (
+          <Overlay
+            context={context}
+            close={close}
+            focus={focus}
+            event={event}
+            frame={frame}
+            prerenderFrame={prerenderFrame}
+            autoResize={true}
+            hideCloseButton={true}
+            nonce={nonce}
+          />
+        ).render(dom({ doc }));
+      },
 
-                locale: {
-                    type:       'object',
-                    queryParam: true,
-                    value:      getLocale
-                },
-                nonce: {
-                    type:     'string',
-                    default:  getCSPNonce,
-                    required: false
-                }
-            }
-        });
+      props: {
+        sdkMeta: {
+          type: "string",
+          queryParam: true,
+          sendToChild: false,
+          value: getSDKMeta,
+        },
+
+        clientID: {
+          type: "string",
+          queryParam: true,
+        },
+
+        locale: {
+          type: "object",
+          queryParam: true,
+          value: getLocale,
+        },
+        nonce: {
+          type: "string",
+          default: getCSPNonce,
+          required: false,
+        },
+      },
     });
+  });
 }

package/src/zoid/installments/index.js

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

package/src/zoid/installments/props.js

@@ -1,5 +1,5 @@
 /* @flow */
 
 export type InstallmentsProps = {|
-    nonce : string
+  nonce: string,
 |};

package/src/zoid/menu/component.jsx

@@ -2,57 +2,62 @@
 /** @jsx node */
 /* eslint max-lines: 0 */
 
-import { getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain } from '@paypal/sdk-client/src';
-import { create, type ZoidComponent } from '@krakenjs/zoid/src';
-import { inlineMemoize } from '@krakenjs/belter/src';
+import {
+  getLogger,
+  getPayPalDomainRegex,
+  getSDKMeta,
+  getPayPalDomain,
+} from "@paypal/sdk-client/src";
+import { create, type ZoidComponent } from "@krakenjs/zoid/src";
+import { inlineMemoize } from "@krakenjs/belter/src";
 
-import { type MenuProps } from './props';
+import { type MenuProps } from "./props";
 
 export type MenuComponent = ZoidComponent<MenuProps>;
 
-export function getMenuComponent() : MenuComponent {
-    return inlineMemoize(getMenuComponent, () => {
-        return create({
-            tag: 'paypal-menu',
-            url: () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__MENU__ }`,
-
-            domain: getPayPalDomainRegex(),
-            
-            autoResize: {
-                width:  false,
-                height: true
-            },
-
-            dimensions: {
-                width:  '100%',
-                height: '150px'
-            },
-
-            logger: getLogger(),
-
-            prerenderTemplate: () => {
-                return null;
-            },
-
-            attributes: {
-                iframe: {
-                    scrolling: 'no'
-                }
-            },
-
-            props: {
-                sdkMeta: {
-                    type:        'string',
-                    queryParam:  true,
-                    sendToChild: false,
-                    value:       getSDKMeta
-                },
-                
-                clientID: {
-                    type:       'string',
-                    queryParam: true
-                }
-            }
-        });
+export function getMenuComponent(): MenuComponent {
+  return inlineMemoize(getMenuComponent, () => {
+    return create({
+      tag: "paypal-menu",
+      url: () => `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__MENU__}`,
+
+      domain: getPayPalDomainRegex(),
+
+      autoResize: {
+        width: false,
+        height: true,
+      },
+
+      dimensions: {
+        width: "100%",
+        height: "150px",
+      },
+
+      logger: getLogger(),
+
+      prerenderTemplate: () => {
+        return null;
+      },
+
+      attributes: {
+        iframe: {
+          scrolling: "no",
+        },
+      },
+
+      props: {
+        sdkMeta: {
+          type: "string",
+          queryParam: true,
+          sendToChild: false,
+          value: getSDKMeta,
+        },
+
+        clientID: {
+          type: "string",
+          queryParam: true,
+        },
+      },
     });
+  });
 }

package/src/zoid/menu/index.js

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

package/src/zoid/menu/props.js

@@ -1,5 +1,3 @@
 /* @flow */
 
-export type MenuProps = {|
-    
-|};
+export type MenuProps = {||};

package/src/zoid/modal/component.jsx

@@ -2,74 +2,86 @@
 /** @jsx node */
 /* eslint max-lines: 0 */
 
-import { getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain } from '@paypal/sdk-client/src';
-import { create, EVENT, type ZoidComponent } from '@krakenjs/zoid/src';
-import { inlineMemoize, destroyElement, toCSS } from '@krakenjs/belter/src';
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-
-import { type ModalProps } from './props';
+import {
+  getLogger,
+  getPayPalDomainRegex,
+  getSDKMeta,
+  getPayPalDomain,
+} from "@paypal/sdk-client/src";
+import { create, EVENT, type ZoidComponent } from "@krakenjs/zoid/src";
+import { inlineMemoize, destroyElement, toCSS } from "@krakenjs/belter/src";
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+
+import { type ModalProps } from "./props";
 
 const CLASS = {
-    VISIBLE:   'visible',
-    INVISIBLE: 'invisible'
+  VISIBLE: "visible",
+  INVISIBLE: "invisible",
 };
 
 export type ModalComponent = ZoidComponent<ModalProps>;
 
-export function getModalComponent() : ModalComponent {
-    return inlineMemoize(getModalComponent, () => {
-        return create({
-            tag:    'paypal-modal',
-            url:    () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__MODAL__ }`,
-            domain: getPayPalDomainRegex(),
-
-            dimensions: {
-                width:  '100%',
-                height: '100%'
-            },
-
-            logger: getLogger(),
-
-            containerTemplate: ({ frame, prerenderFrame, props, doc, uid, event }) => {
-                if (!frame || !prerenderFrame) {
-                    return;
-                }
-
-                const { cspNonce } = props;
-
-                prerenderFrame.classList.add(CLASS.VISIBLE);
-                frame.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);
-    
-                    setTimeout(() => {
-                        destroyElement(prerenderFrame);
-                    }, 1);
-                });
-
-                const setupResize = (div) => {
-                    event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
-                        if (typeof newWidth === 'number') {
-                            div.style.width = toCSS(newWidth);
-                        }
-
-                        if (typeof newHeight === 'number') {
-                            div.style.height = toCSS(newHeight);
-                        }
-                    });
-                };
-
-                return (
-                    <div id={ uid } onRender={ setupResize }>
-                        <style
-                            nonce={ cspNonce }
-                            innerHTML={ `
-                                #${ uid } {
+export function getModalComponent(): ModalComponent {
+  return inlineMemoize(getModalComponent, () => {
+    return create({
+      tag: "paypal-modal",
+      url: () => `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__MODAL__}`,
+      domain: getPayPalDomainRegex(),
+
+      dimensions: {
+        width: "100%",
+        height: "100%",
+      },
+
+      logger: getLogger(),
+
+      containerTemplate: ({
+        frame,
+        prerenderFrame,
+        props,
+        doc,
+        uid,
+        event,
+      }) => {
+        if (!frame || !prerenderFrame) {
+          return;
+        }
+
+        const { cspNonce } = props;
+
+        prerenderFrame.classList.add(CLASS.VISIBLE);
+        frame.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);
+
+          setTimeout(() => {
+            destroyElement(prerenderFrame);
+          }, 1);
+        });
+
+        const setupResize = (div) => {
+          event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
+            if (typeof newWidth === "number") {
+              div.style.width = toCSS(newWidth);
+            }
+
+            if (typeof newHeight === "number") {
+              div.style.height = toCSS(newHeight);
+            }
+          });
+        };
+
+        return (
+          <div id={uid} onRender={setupResize}>
+            <style
+              nonce={cspNonce}
+              innerHTML={`
+                                #${uid} {
                                     display: block;
                                     position: fixed;
                                     width: 100%;
@@ -79,7 +91,7 @@ export function getModalComponent() : ModalComponent {
                                     z-index: 200000;
                                 }
 
-                                #${ uid } > iframe {
+                                #${uid} > iframe {
                                     display: inline-block;
                                     position: absolute;
                                     width: 100%;
@@ -88,52 +100,53 @@ export function getModalComponent() : ModalComponent {
                                     left: 0;
                                     transition: opacity .2s ease-in-out;
                                 }
-                                #${ uid } > iframe.${ CLASS.INVISIBLE } {
+                                #${uid} > iframe.${CLASS.INVISIBLE} {
                                     opacity: 0;
                                 }
-                                #${ uid } > iframe.${ CLASS.VISIBLE } {
+                                #${uid} > iframe.${CLASS.VISIBLE} {
                                     opacity: 1;
                                 }
-                            ` } />
-                        <node el={ frame } />
-                        <node el={ prerenderFrame } />
-                    </div>
-                ).render(dom({ doc }));
-            },
-
-            prerenderTemplate: () => {
-                return null;
-            },
-
-            attributes: {
-                iframe: {
-                    scrolling: 'no'
-                }
-            },
-
-            props: {
-                sdkMeta: {
-                    type:        'string',
-                    queryParam:  true,
-                    sendToChild: false,
-                    value:       getSDKMeta
-                },
-                
-                clientID: {
-                    type:       'string',
-                    queryParam: true
-                },
-                
-                orderID: {
-                    type:       'string',
-                    queryParam: true
-                },
-
-                customerID: {
-                    type:       'string',
-                    queryParam: true
-                }
-            }
-        });
+                            `}
+            />
+            <node el={frame} />
+            <node el={prerenderFrame} />
+          </div>
+        ).render(dom({ doc }));
+      },
+
+      prerenderTemplate: () => {
+        return null;
+      },
+
+      attributes: {
+        iframe: {
+          scrolling: "no",
+        },
+      },
+
+      props: {
+        sdkMeta: {
+          type: "string",
+          queryParam: true,
+          sendToChild: false,
+          value: getSDKMeta,
+        },
+
+        clientID: {
+          type: "string",
+          queryParam: true,
+        },
+
+        orderID: {
+          type: "string",
+          queryParam: true,
+        },
+
+        customerID: {
+          type: "string",
+          queryParam: true,
+        },
+      },
     });
+  });
 }

package/src/zoid/modal/index.js

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

package/src/zoid/modal/props.js

@@ -1,5 +1,3 @@
 /* @flow */
 
-export type ModalProps = {|
-    
-|};
+export type ModalProps = {||};