@paypal/checkout-components 5.0.256 → 5.0.258

package/src/zoid/payment-fields/component.jsx

@@ -2,199 +2,223 @@
 /** @jsx node */
 /* eslint max-lines: 0 */
 
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-import { getLogger, getPayPalDomainRegex, getSDKMeta, getPayPalDomain, getClientID,
-    getCorrelationID, getSessionID, getEnv, getBuyerCountry, getLocale, getPartnerAttributionID } from '@paypal/sdk-client/src';
-import { create, type ZoidComponent } from '@krakenjs/zoid/src';
-import { inlineMemoize, uniqueID } from '@krakenjs/belter/src';
-
-import { storageState, sessionState } from '../../lib';
-
-import { type PaymentFieldsProps } from './props';
-import { PaymentFieldsPrerender } from './prerender';
-import { PaymentFieldsContainer } from './container';
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import {
+  getLogger,
+  getPayPalDomainRegex,
+  getSDKMeta,
+  getPayPalDomain,
+  getClientID,
+  getCorrelationID,
+  getSessionID,
+  getEnv,
+  getBuyerCountry,
+  getLocale,
+  getPartnerAttributionID,
+} from "@paypal/sdk-client/src";
+import { create, type ZoidComponent } from "@krakenjs/zoid/src";
+import { inlineMemoize, uniqueID } from "@krakenjs/belter/src";
+
+import { storageState, sessionState } from "../../lib";
+
+import { type PaymentFieldsProps } from "./props";
+import { PaymentFieldsPrerender } from "./prerender";
+import { PaymentFieldsContainer } from "./container";
 
 export type PaymentFieldsComponent = ZoidComponent<PaymentFieldsProps>;
 
-export function getPaymentFieldsComponent() : PaymentFieldsComponent {
-    return inlineMemoize(getPaymentFieldsComponent, () => {
-        return create({
-            tag: 'paypal-fields',
-            url: () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__PAYMENT_FIELDS__ }`,
-
-            domain: getPayPalDomainRegex(),
-            
-            autoResize: {
-                width:   false,
-                height:  true,
-                element: 'body'
-            },
-
-            dimensions: {
-                width:  '100%',
-                height: '300px'
-            },
-
-            logger: getLogger(),
-
-            containerTemplate: ({ props, doc, uid, frame, prerenderFrame, event }) => {
-                return (
-                    <PaymentFieldsContainer uid={ uid } frame={ frame } prerenderFrame={ prerenderFrame } event={ event } nonce={ props.nonce } />
-                ).render(dom({ doc }));
-            },
-
-            prerenderTemplate: ({ props, doc }) => {
-                return (
-                    <PaymentFieldsPrerender nonce={ props.nonce } />
-                ).render(dom({ doc }));
-            },
-
-            attributes: {
-                iframe: {
-                    scrolling: 'no'
-                }
-            },
-
-            props: {
-
-                fields: {
-                    type:       'object',
-                    queryParam: true,
-                    required:   false,
-                    decorate:   ({ value }) => value,
-                    default:    () => ({})
-                },
-
-                style: {
-                    type:       'object',
-                    queryParam: true,
-                    required:   false,
-                    decorate:   ({ value }) => value,
-                    default:    () => ({})
-                },
-
-                sdkMeta: {
-                    type:        'string',
-                    queryParam:  true,
-                    sendToChild: false,
-                    value:       getSDKMeta
-                },
-                
-                clientID: {
-                    type:       'string',
-                    queryParam: true,
-                    value:      getClientID
-                },
-                
-                fundingSource: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   true
-                },
-
-                correlationID: {
-                    type:       'string',
-                    required:   false,
-                    value:      getCorrelationID
-                },
-
-                sessionID: {
-                    type:       'string',
-                    value:      getSessionID,
-                    queryParam: true,
-                    required:   false
-                },
-
-                fieldsSessionID: {
-                    type:       'string',
-                    value:      uniqueID,
-                    queryParam: true
-                },
-
-                env: {
-                    type:       'string',
-                    queryParam: true,
-                    value:      getEnv
-                },
-
-                onInit: {
-                    type:     'function',
-                    required: false
-                },
-
-                onError: {
-                    type:     'function',
-                    required: false
-                },
-
-                onContinue: {
-                    type:     'function',
-                    required: false
-                },
-
-                onClose: {
-                    type:     'function',
-                    required: false
-                },
-
-                showActionButtons: {
-                    type:       'boolean',
-                    queryParam: true,
-                    required:   false
-                },
-
-                onFieldsClose: {
-                    type:     'function',
-                    required: false
-                },
-
-                buyerCountry: {
-                    type:       'string',
-                    queryParam: true,
-                    required:   false,
-                    default:    getBuyerCountry
-                },
-
-                locale: {
-                    type:          'object',
-                    queryParam:    'locale.x',
-                    allowDelegate: true,
-                    queryValue({ value }) : string {
-                        // $FlowFixMe
-                        const { lang, country } = value;
-                        return `${ lang }_${ country }`;
-                    },
-                    value: getLocale
-                },
-
-                country: {
-                    type:          'object',
-                    queryParam:    'country.x',
-                    allowDelegate: true,
-                    queryValue({ value }) : string {
-                        // $FlowFixMe
-                        const { country } = value;
-                        return country;
-                    },
-                    value: getLocale
-                },
-
-                storageState: {
-                    type:  'object',
-                    value: () => storageState
-                },
-
-                sessionState: {
-                    type:  'object',
-                    value: () => sessionState
-                },
-
-                partnerAttributionID: {
-                    type:       'string',
-                    required:   false,
-                    value:      getPartnerAttributionID
-                }
-            }
-        });
+export function getPaymentFieldsComponent(): PaymentFieldsComponent {
+  return inlineMemoize(getPaymentFieldsComponent, () => {
+    return create({
+      tag: "paypal-fields",
+      url: () =>
+        `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__PAYMENT_FIELDS__}`,
+
+      domain: getPayPalDomainRegex(),
+
+      autoResize: {
+        width: false,
+        height: true,
+        element: "body",
+      },
+
+      dimensions: {
+        width: "100%",
+        height: "300px",
+      },
+
+      logger: getLogger(),
+
+      containerTemplate: ({
+        props,
+        doc,
+        uid,
+        frame,
+        prerenderFrame,
+        event,
+      }) => {
+        return (
+          <PaymentFieldsContainer
+            uid={uid}
+            frame={frame}
+            prerenderFrame={prerenderFrame}
+            event={event}
+            nonce={props.nonce}
+          />
+        ).render(dom({ doc }));
+      },
+
+      prerenderTemplate: ({ props, doc }) => {
+        return (<PaymentFieldsPrerender nonce={props.nonce} />).render(
+          dom({ doc })
+        );
+      },
+
+      attributes: {
+        iframe: {
+          scrolling: "no",
+        },
+      },
+
+      props: {
+        fields: {
+          type: "object",
+          queryParam: true,
+          required: false,
+          decorate: ({ value }) => value,
+          default: () => ({}),
+        },
+
+        style: {
+          type: "object",
+          queryParam: true,
+          required: false,
+          decorate: ({ value }) => value,
+          default: () => ({}),
+        },
+
+        sdkMeta: {
+          type: "string",
+          queryParam: true,
+          sendToChild: false,
+          value: getSDKMeta,
+        },
+
+        clientID: {
+          type: "string",
+          queryParam: true,
+          value: getClientID,
+        },
+
+        fundingSource: {
+          type: "string",
+          queryParam: true,
+          required: true,
+        },
+
+        correlationID: {
+          type: "string",
+          required: false,
+          value: getCorrelationID,
+        },
+
+        sessionID: {
+          type: "string",
+          value: getSessionID,
+          queryParam: true,
+          required: false,
+        },
+
+        fieldsSessionID: {
+          type: "string",
+          value: uniqueID,
+          queryParam: true,
+        },
+
+        env: {
+          type: "string",
+          queryParam: true,
+          value: getEnv,
+        },
+
+        onInit: {
+          type: "function",
+          required: false,
+        },
+
+        onError: {
+          type: "function",
+          required: false,
+        },
+
+        onContinue: {
+          type: "function",
+          required: false,
+        },
+
+        onClose: {
+          type: "function",
+          required: false,
+        },
+
+        showActionButtons: {
+          type: "boolean",
+          queryParam: true,
+          required: false,
+        },
+
+        onFieldsClose: {
+          type: "function",
+          required: false,
+        },
+
+        buyerCountry: {
+          type: "string",
+          queryParam: true,
+          required: false,
+          default: getBuyerCountry,
+        },
+
+        locale: {
+          type: "object",
+          queryParam: "locale.x",
+          allowDelegate: true,
+          queryValue({ value }): string {
+            // $FlowFixMe
+            const { lang, country } = value;
+            return `${lang}_${country}`;
+          },
+          value: getLocale,
+        },
+
+        country: {
+          type: "object",
+          queryParam: "country.x",
+          allowDelegate: true,
+          queryValue({ value }): string {
+            // $FlowFixMe
+            const { country } = value;
+            return country;
+          },
+          value: getLocale,
+        },
+
+        storageState: {
+          type: "object",
+          value: () => storageState,
+        },
+
+        sessionState: {
+          type: "object",
+          value: () => sessionState,
+        },
+
+        partnerAttributionID: {
+          type: "string",
+          required: false,
+          value: getPartnerAttributionID,
+        },
+      },
     });
+  });
 }

package/src/zoid/payment-fields/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 PaymentFieldsContainerOptions = {|
-    uid : string,
-    frame : ?HTMLIFrameElement,
-    prerenderFrame : ?HTMLIFrameElement,
-    event : EventEmitterType,
-    nonce? : ?string
+  uid: string,
+  frame: ?HTMLIFrameElement,
+  prerenderFrame: ?HTMLIFrameElement,
+  event: EventEmitterType,
+  nonce?: ?string,
 |};
 
-export function PaymentFieldsContainer({ uid, frame, prerenderFrame, event, nonce } : PaymentFieldsContainerOptions) : ?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 PaymentFieldsContainer({
+  uid,
+  frame,
+  prerenderFrame,
+  event,
+  nonce,
+}: PaymentFieldsContainerOptions): ?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 PaymentFieldsContainer({ uid, frame, prerenderFrame, event, nonc
                     }
 
                     @media only screen and (min-width: 0px) {
-                        #${ uid } {
+                        #${uid} {
                             min-height: 91px;
                         }
                     }
 
                     @media only screen and (min-width: 600px) {
-                        #${ uid } {
+                        #${uid} {
                             min-height: 91px;
                         }
                     }
 
-                    #${ uid } > iframe {
+                    #${uid} > iframe {
                         position: absolute;
                         top: 0;
                         left: 0;
@@ -92,30 +101,30 @@ export function PaymentFieldsContainer({ uid, frame, prerenderFrame, event, nonc
                         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/payment-fields/index.js

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

package/src/zoid/payment-fields/prerender.jsx

@@ -1,19 +1,21 @@
 /* @flow */
 /** @jsx node */
 
-import { node, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
 type PrerenderedPaymentFieldsProps = {|
-    nonce : ?string
+  nonce: ?string,
 |};
 
-export function PaymentFieldsPrerender({ nonce } : PrerenderedPaymentFieldsProps) : ChildType {
-    return (
-        <html>
-            <body>
-                <style
-                    nonce={ nonce }
-                    innerHTML={ `
+export function PaymentFieldsPrerender({
+  nonce,
+}: PrerenderedPaymentFieldsProps): ChildType {
+  return (
+    <html>
+      <body>
+        <style
+          nonce={nonce}
+          innerHTML={`
                         html, body {
                             padding: 0;
                             margin: 0;
@@ -26,9 +28,9 @@ export function PaymentFieldsPrerender({ nonce } : PrerenderedPaymentFieldsProps
                             position: relative;
                             overflow: hidden;
                         }
-                    ` }
-                />
-            </body>
-        </html>
-    );
+                    `}
+        />
+      </body>
+    </html>
+  );
 }