@paypal/checkout-components 5.0.256 → 5.0.257

package/src/zoid/buttons/container.jsx

@@ -1,109 +1,138 @@
 /* @flow */
 /** @jsx node */
 
-import { values, destroyElement, toCSS } from '@krakenjs/belter/src';
-import { node, dom } from '@krakenjs/jsx-pragmatic/src';
-import { EVENT, type RenderOptionsType } from '@krakenjs/zoid/src';
-import { getVersion } from '@paypal/sdk-client/src';
-
-import { BUTTON_SIZE, ATTRIBUTE, MENU_PLACEMENT } from '../../constants';
-import { BUTTON_SIZE_STYLE, MINIMUM_SIZE, MAXIMUM_SIZE } from '../../ui/buttons/config';
-import { type ButtonProps } from '../../ui/buttons/props';
+import { values, destroyElement, toCSS } from "@krakenjs/belter/src";
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import { EVENT, type RenderOptionsType } from "@krakenjs/zoid/src";
+import { getVersion } from "@paypal/sdk-client/src";
+
+import { BUTTON_SIZE, ATTRIBUTE, MENU_PLACEMENT } from "../../constants";
+import {
+  BUTTON_SIZE_STYLE,
+  MINIMUM_SIZE,
+  MAXIMUM_SIZE,
+} from "../../ui/buttons/config";
+import { type ButtonProps } from "../../ui/buttons/props";
 
 const CLASS = {
-    VISIBLE:            'visible',
-    INVISIBLE:          'invisible',
-    COMPONENT_FRAME:    'component-frame',
-    PRERENDER_FRAME:    'prerender-frame',
-    SMART_MENU:         'smart-menu',
-    INSTALLMENTS_MODAL: 'installments-modal'
+  VISIBLE: "visible",
+  INVISIBLE: "invisible",
+  COMPONENT_FRAME: "component-frame",
+  PRERENDER_FRAME: "prerender-frame",
+  SMART_MENU: "smart-menu",
+  INSTALLMENTS_MODAL: "installments-modal",
 };
 
 const ID = {
-    SMART_MENU:         'smart-menu',
-    INSTALLMENTS_MODAL: 'installments-modal'
+  SMART_MENU: "smart-menu",
+  INSTALLMENTS_MODAL: "installments-modal",
 };
 
-export function containerTemplate({ uid, props, tag, context, frame, prerenderFrame, doc, container, event } : RenderOptionsType<ButtonProps>) : ?HTMLElement {
-
-    if (!frame || !prerenderFrame) {
-        return;
-    }
-
-    if (container && container.tagName.toLowerCase() === 'button') {
-        throw new Error(`Do not render the PayPal button into a button element`);
-    }
-
-    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 containerTemplate({
+  uid,
+  props,
+  tag,
+  context,
+  frame,
+  prerenderFrame,
+  doc,
+  container,
+  event,
+}: RenderOptionsType<ButtonProps>): ?HTMLElement {
+  if (!frame || !prerenderFrame) {
+    return;
+  }
+
+  if (container && container.tagName.toLowerCase() === "button") {
+    throw new Error(`Do not render the PayPal button into a button element`);
+  }
+
+  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);
+  });
+
+  // $FlowFixMe
+  const { style, nonce } = props;
+  const { label, layout, height: buttonHeight, menuPlacement } = style;
+
+  let minimumSize = MINIMUM_SIZE[layout];
+  const maximumSize = MAXIMUM_SIZE[layout];
+
+  if (buttonHeight) {
+    const possibleSizes = values(BUTTON_SIZE).filter((possibleSize) => {
+      return (
+        BUTTON_SIZE_STYLE[possibleSize] &&
+        buttonHeight &&
+        BUTTON_SIZE_STYLE[possibleSize].minHeight <= buttonHeight &&
+        BUTTON_SIZE_STYLE[possibleSize].maxHeight >= buttonHeight
+      );
     });
 
-    // $FlowFixMe
-    const { style, nonce } = props;
-    const { label, layout, height: buttonHeight, menuPlacement } = style;
-
-    let minimumSize = MINIMUM_SIZE[layout];
-    const maximumSize = MAXIMUM_SIZE[layout];
-
-    if (buttonHeight) {
-        const possibleSizes = values(BUTTON_SIZE).filter(possibleSize => {
-            return BUTTON_SIZE_STYLE[possibleSize] && buttonHeight &&
-                BUTTON_SIZE_STYLE[possibleSize].minHeight <= buttonHeight && BUTTON_SIZE_STYLE[possibleSize].maxHeight >= buttonHeight;
-        });
-
-        possibleSizes.sort((sizeA : $Values<typeof BUTTON_SIZE>, sizeB : $Values<typeof BUTTON_SIZE>) : number => {
-            return BUTTON_SIZE_STYLE[sizeA].defaultWidth - BUTTON_SIZE_STYLE[sizeB].defaultWidth;
-        });
-
-        minimumSize = possibleSizes[0];
-    }
-
-    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 }
-            class={ `${ tag } ${ tag }-context-${ context } ${ tag }-label-${ label || 'unknown' } ${ tag }-layout-${ layout }` }
-            { ...({ [ATTRIBUTE.VERSION]: `${ getVersion() }` }) }
-            onRender={ setupAutoResize } >
-
-            <style nonce={ nonce }>
-                {`
-                    #${ uid } {
+    possibleSizes.sort(
+      (
+        sizeA: $Values<typeof BUTTON_SIZE>,
+        sizeB: $Values<typeof BUTTON_SIZE>
+      ): number => {
+        return (
+          BUTTON_SIZE_STYLE[sizeA].defaultWidth -
+          BUTTON_SIZE_STYLE[sizeB].defaultWidth
+        );
+      }
+    );
+
+    minimumSize = possibleSizes[0];
+  }
+
+  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}
+      class={`${tag} ${tag}-context-${context} ${tag}-label-${
+        label || "unknown"
+      } ${tag}-layout-${layout}`}
+      {...{ [ATTRIBUTE.VERSION]: `${getVersion()}` }}
+      onRender={setupAutoResize}
+    >
+      <style nonce={nonce}>
+        {`
+                    #${uid} {
                         position: relative;
                         display: inline-block;
                         width: 100%;
-                        min-height: ${ BUTTON_SIZE_STYLE[minimumSize].minHeight }px;
-                        min-width: ${ BUTTON_SIZE_STYLE[minimumSize].minWidth }px;
-                        max-width: ${ BUTTON_SIZE_STYLE[maximumSize].maxWidth }px;
+                        min-height: ${
+                          BUTTON_SIZE_STYLE[minimumSize].minHeight
+                        }px;
+                        min-width: ${BUTTON_SIZE_STYLE[minimumSize].minWidth}px;
+                        max-width: ${BUTTON_SIZE_STYLE[maximumSize].maxWidth}px;
                         font-size: 0;
                     }
 
-                    #${ uid } > iframe {
+                    #${uid} > iframe {
                         position: absolute;
                         top: 0;
                         left: 0;
@@ -111,48 +140,52 @@ export function containerTemplate({ uid, props, tag, context, frame, prerenderFr
                         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;
                     }
 
-                    #${ uid } > .${ CLASS.SMART_MENU } {
+                    #${uid} > .${CLASS.SMART_MENU} {
                         position: absolute;
                         z-index: 300;
-                        ${ menuPlacement === MENU_PLACEMENT.ABOVE ? 'bottom: 100%;' : 'top: 0;' }
+                        ${
+                          menuPlacement === MENU_PLACEMENT.ABOVE
+                            ? "bottom: 100%;"
+                            : "top: 0;"
+                        }
                         left: 0;
                         width: 100%;
                     }
                 `}
-            </style>
+      </style>
 
-            <node el={ frame } />
-            <node el={ prerenderFrame } />
+      <node el={frame} />
+      <node el={prerenderFrame} />
 
-            <div id={ ID.SMART_MENU } class={ CLASS.SMART_MENU } />
+      <div id={ID.SMART_MENU} class={CLASS.SMART_MENU} />
 
-            <div id={ ID.INSTALLMENTS_MODAL } class={ CLASS.INSTALLMENTS_MODAL } />
-        </div>
-    ).render(dom({ doc }));
+      <div id={ID.INSTALLMENTS_MODAL} class={CLASS.INSTALLMENTS_MODAL} />
+    </div>
+  ).render(dom({ doc }));
 
-    event.on(EVENT.RENDERED, () => {
-        setTimeout(() => {
-            element.style.transition = 'all 0.2s ease-in-out';
-        }, 1000);
-    });
+  event.on(EVENT.RENDERED, () => {
+    setTimeout(() => {
+      element.style.transition = "all 0.2s ease-in-out";
+    }, 1000);
+  });
 
-    return element;
+  return element;
 }

package/src/zoid/buttons/index.js

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

package/src/zoid/buttons/prerender.jsx

@@ -1,79 +1,99 @@
 /* @flow */
 /** @jsx node */
 
-import { node, dom, type ChildType } from '@krakenjs/jsx-pragmatic/src';
-import { FUNDING, CARD, FPTI_KEY } from '@paypal/sdk-constants/src';
-import { popup, supportsPopups, writeElementToWindow } from '@krakenjs/belter/src';
-import { assertSameDomain, type CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
-import { SpinnerPage } from '@paypal/common-components/src';
-import { getLogger } from '@paypal/sdk-client/src';
-import type { ZoidProps } from '@krakenjs/zoid/src';
+import { node, dom, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import { FUNDING, CARD, FPTI_KEY } from "@paypal/sdk-constants/src";
+import {
+  popup,
+  supportsPopups,
+  writeElementToWindow,
+} from "@krakenjs/belter/src";
+import {
+  assertSameDomain,
+  type CrossDomainWindowType,
+} from "@krakenjs/cross-domain-utils/src";
+import { SpinnerPage } from "@paypal/common-components/src";
+import { getLogger } from "@paypal/sdk-client/src";
+import type { ZoidProps } from "@krakenjs/zoid/src";
 
-import { DEFAULT_POPUP_SIZE } from '../checkout';
-import { EXPERIENCE } from '../../constants';
-import { Buttons } from '../../ui';
-import { type ButtonProps } from '../../ui/buttons/props';
+import { DEFAULT_POPUP_SIZE } from "../checkout";
+import { EXPERIENCE } from "../../constants";
+import { Buttons } from "../../ui";
+import { type ButtonProps } from "../../ui/buttons/props";
 
 type PrerenderedButtonsProps = {|
-    nonce : ?string,
-    props : ZoidProps<ButtonProps>,
-    onRenderCheckout : ({|
-        win? : CrossDomainWindowType,
-        fundingSource : $Values<typeof FUNDING>,
-        card : ?$Values<typeof CARD>
-    |}) => void
+  nonce: ?string,
+  props: ZoidProps<ButtonProps>,
+  onRenderCheckout: ({|
+    win?: CrossDomainWindowType,
+    fundingSource: $Values<typeof FUNDING>,
+    card: ?$Values<typeof CARD>,
+  |}) => void,
 |};
 
-export function PrerenderedButtons({ nonce, onRenderCheckout, props } : PrerenderedButtonsProps) : ChildType {
-    let win;
-    const handleClick = (
-        // eslint-disable-next-line no-undef
-        event : SyntheticInputEvent<HTMLInputElement>,
-        { fundingSource, card } : {|
-            fundingSource : $Values<typeof FUNDING>,
-            card : ?$Values<typeof CARD>
-        |}
-    ) => {
-        getLogger().info('button_prerender_click').track({
-            [ FPTI_KEY.BUTTON_SESSION_UID ]: props.buttonSessionID,
-            [ FPTI_KEY.CONTEXT_TYPE ]:       'button_session_id',
-            [ FPTI_KEY.CONTEXT_ID ]:         props.buttonSessionID,
-            [ FPTI_KEY.TRANSITION ]:         'process_button_prerender_click',
-            [ FPTI_KEY.CHOSEN_FUNDING]:      fundingSource
-        }).flush();
+export function PrerenderedButtons({
+  nonce,
+  onRenderCheckout,
+  props,
+}: PrerenderedButtonsProps): ChildType {
+  let win;
+  const handleClick = (
+    // eslint-disable-next-line no-undef
+    event: SyntheticInputEvent<HTMLInputElement>,
+    {
+      fundingSource,
+      card,
+    }: {|
+      fundingSource: $Values<typeof FUNDING>,
+      card: ?$Values<typeof CARD>,
+    |}
+  ) => {
+    getLogger()
+      .info("button_prerender_click")
+      .track({
+        [FPTI_KEY.BUTTON_SESSION_UID]: props.buttonSessionID,
+        [FPTI_KEY.CONTEXT_TYPE]: "button_session_id",
+        [FPTI_KEY.CONTEXT_ID]: props.buttonSessionID,
+        [FPTI_KEY.TRANSITION]: "process_button_prerender_click",
+        [FPTI_KEY.CHOSEN_FUNDING]: fundingSource,
+      })
+      .flush();
 
-        if (fundingSource === FUNDING.VENMO || fundingSource === FUNDING.APPLEPAY || (fundingSource === FUNDING.CARD && props.experience === EXPERIENCE.INLINE)) {
-            // wait for button to load
-        } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
-            // remember the popup window to prevent showing a new popup window on every click in the prerender state
-            if (!win || win.closed) {
-                win = assertSameDomain(popup('', {
-                    width:  DEFAULT_POPUP_SIZE.WIDTH,
-                    height: DEFAULT_POPUP_SIZE.HEIGHT
-                }));
-            }
+    if (
+      fundingSource === FUNDING.VENMO ||
+      fundingSource === FUNDING.APPLEPAY ||
+      (fundingSource === FUNDING.CARD && props.experience === EXPERIENCE.INLINE)
+    ) {
+      // wait for button to load
+    } else if (supportsPopups() && !props.merchantRequestedPopupsDisabled) {
+      // remember the popup window to prevent showing a new popup window on every click in the prerender state
+      if (!win || win.closed) {
+        win = assertSameDomain(
+          popup("", {
+            width: DEFAULT_POPUP_SIZE.WIDTH,
+            height: DEFAULT_POPUP_SIZE.HEIGHT,
+          })
+        );
+      }
 
-            const doc = window.document;
+      const doc = window.document;
 
-            const spinner = (
-                <SpinnerPage nonce={ nonce } />
-            ).render(dom({ doc }));
+      const spinner = (<SpinnerPage nonce={nonce} />).render(dom({ doc }));
 
-            writeElementToWindow(win, spinner);
+      writeElementToWindow(win, spinner);
 
-            onRenderCheckout({ win, fundingSource, card });
+      onRenderCheckout({ win, fundingSource, card });
+    } else {
+      onRenderCheckout({ fundingSource, card });
+    }
+  };
 
-        } else {
-            onRenderCheckout({ fundingSource, card });
-        }
-    };
-
-    return (
-        <html>
-            <body>
-                {/* $FlowFixMe */}
-                <Buttons { ...props } onClick={ handleClick } />
-            </body>
-        </html>
-    );
+  return (
+    <html>
+      <body>
+        {/* $FlowFixMe */}
+        <Buttons {...props} onClick={handleClick} />
+      </body>
+    </html>
+  );
 }