@paypal/common-components - npm Package Compare versions

Comparing version 1.0.40 to 1.0.41

package.json

 {
   "name": "@paypal/common-components",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "PayPal common components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "dist/ui.js",

src/overlay/style.js

@@ -375,1 +375,355 @@ /* @flow */
 }
+
+export function getVenmoSandboxStyle({ uid }: {| uid: string |}): string {
+  return `
+        #${uid}.venmo-checkout-sandbox {
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+            width: 100vw;
+            height: 100vh;
+            max-width: 100%;
+            max-height: 100%;
+            min-width: 100%;
+            min-height: 100%;
+
+            z-index: 2147483647;
+
+            animation-duration: 0.3s;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards !important;
+            opacity: 0;
+        }
+
+        #${uid}.venmo-checkout-sandbox .venmo-checkout-sandbox-iframe {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #${uid}.venmo-checkout-sandbox .venmo-checkout-sandbox-iframe-full {
+            border: 0;
+            height: 100%;
+            width: 100vw;
+        }
+
+        @keyframes show-container {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes hide-container {
+            from {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 1;
+            }
+
+            to {
+                opacity: 0;
+            }
+        }
+    `;
+}
+
+export function getVenmoContainerStyle({ uid }: {| uid: string |}): string {
+  return `
+        #${uid} {
+            position: absolute;
+            z-index: 2147483647;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            transform: translate3d(0, 0, 0);
+
+            background-color: black;
+            background-color: rgba(0, 0, 0, 0.4);
+            background: radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.8) 100%);
+
+            color: #fff;
+        }
+
+        #${uid} a {
+            color: #fff;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.POPUP} {
+            cursor: pointer;
+        }
+
+        #${uid} a {
+            text-decoration: none;
+        }
+
+        #${uid} .venmo-checkout-modal {
+            box-sizing: border-box;
+            max-width: 400px;
+            min-width: 300px;
+            max-height: 100%;
+            top: 50%;
+            left: 50%;
+            position: absolute;
+            transform: translateX(-50%) translateY(-50%);
+            cursor: pointer;
+            text-align: center;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-interrogative-message {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-style: normal;
+            font-size: 24px;
+            line-height: 32px;
+            text-align: center;
+            color: #FFFFFF;
+            margin-top: 32px;
+        }
+
+        #${uid}.venmo-overlay-loading .venmo-checkout-message, #${uid}.venmo-overlay-loading .venmo-checkout-continue {
+            display: none;
+        }
+
+        .venmo-checkout-loader {
+            display: none;
+        }
+
+        #${uid}.venmo-overlay-loading .venmo-checkout-loader {
+            display: block;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-checkout-logo {
+            cursor: pointer;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-checkout-logo img {
+            height: 46px;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-checkout-message {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 20px;
+            text-align: center;
+            color: #FFFFFF;
+            margin-top: 16px;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-message, #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-continue {
+            display: none;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-checkout-continue {
+            background: #0074DE;
+            border-radius: 24px;
+            border: none;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 18px;
+            color: #FFFFFF;
+            margin-top: 44px;
+        }
+
+        #${uid} .venmo-checkout-modal .venmo-checkout-continue a {
+            line-height: 50px;
+        }
+
+        #${uid} .venmo-checkout-close {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 18px;
+            line-height: 24px;
+            text-align: center;
+            background-color: transparent;
+            border: none;
+            color: #FFFFFF;
+            margin-top: 28px;
+        }
+
+        #${uid}.venmo-overlay-loading .venmo-checkout-close {
+            display: none;
+        }
+
+        #${uid} .venmo-checkout-iframe-container {
+            display: none;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container,
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container > .${CLASS.OUTLET},
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container > .${CLASS.OUTLET} > iframe {
+            max-height: 95vh;
+            max-width: 95vw;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full,
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full > .${CLASS.OUTLET},
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full > .${CLASS.OUTLET} > iframe {
+            height: 100vh;
+            max-width: 100vw;
+            width: 100vw;
+        }
+
+        @media screen and (max-width: 470px) {
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container,
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container > .${CLASS.OUTLET},
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container > .${CLASS.OUTLET} > iframe {
+                max-height: 85vh;
+            }
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full,
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full > .${CLASS.OUTLET},
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container-full > .${CLASS.OUTLET} > iframe {
+                height: 100vh;
+            }
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container {
+
+            display: block;
+
+            position: absolute;
+
+            top: 50%;
+            left: 50%;
+
+            min-width: 450px;
+
+            transform: translate(-50%, -50%);
+            transform: translate3d(-50%, -50%, 0);
+
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} {
+
+            position: relative;
+
+            transition: all 0.3s ease;
+            animation-duration: 0.3s;
+            animation-fill-mode: forwards !important;
+
+            min-width: 450px;
+            max-width: 450px;
+            width: 450px;
+            height: 535px;
+
+            background-color: white;
+
+            overflow: auto;
+
+            opacity: 0;
+            transform: scale3d(.3, .3, .3);
+
+            -webkit-overflow-scrolling: touch;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            transition: opacity .4s ease-in-out;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.COMPONENT_FRAME} {
+            z-index: 100;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.PRERENDER_FRAME} {
+            z-index: 200;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.VISIBLE} {
+            opacity: 1;
+            z-index: 200;
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.INVISIBLE} {
+            opacity: 0;
+            z-index: 100;
+        }
+
+        @media screen and (max-width: 470px) {
+
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .venmo-checkout-iframe-container,
+            #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} {
+                min-width: 100%;
+                min-width: calc(100% - 20px);
+
+                max-width: 100%;
+                max-width: calc(100% - 20px);
+            }
+        }
+
+        #${uid}.venmo-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} iframe {
+            width: 1px;
+            min-width: 100%;
+            height: 100%;
+        }
+
+        @keyframes show-component {
+            from {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+            }
+        }
+
+        @keyframes hide-component {
+            from {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+            }
+
+            to {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+            }
+        }
+
+        .venmo-spinner {
+            height: 30px;
+            width: 30px;
+            display: inline-block;
+            box-sizing: content-box;
+            opacity: 1;
+            filter: alpha(opacity=100);
+            animation: rotation .7s infinite linear;
+            border-left: 8px solid rgba(0, 0, 0, .2);
+            border-right: 8px solid rgba(0, 0, 0, .2);
+            border-bottom: 8px solid rgba(0, 0, 0, .2);
+            border-top: 8px solid #fff;
+            border-radius: 100%
+        }
+
+        @keyframes rotation {
+            from {
+                transform: rotate(0deg)
+            }
+            to {
+                transform: rotate(359deg)
+            }
+        }
+    `;
+}

src/overlay/template.jsx

@@ -18,6 +18,17 @@ /* @flow */
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
-import { LOGO_COLOR, PPLogo, PayPalLogo } from "@paypal/sdk-logos/src";
+import {
+  LOGO_COLOR,
+  PPLogo,
+  PayPalLogo,
+  VenmoLogo,
+} from "@paypal/sdk-logos/src";
 import type { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
-import { getContainerStyle, getSandboxStyle, CLASS } from "./style";
+import {
+  getContainerStyle,
+  getSandboxStyle,
+  getVenmoContainerStyle,
+  getVenmoSandboxStyle,
+  CLASS,
+} from "./style";
 
@@ -34,2 +45,4 @@ export type OverlayProps = {|
     continueMessage?: string,
+    cancelMessage?: string,
+    interrogativeMessage?: string,
   |},
@@ -211,1 +224,173 @@ autoResize?: boolean,
 }
+
+export function VenmoOverlay({
+  context,
+  close,
+  focus,
+  event,
+  frame,
+  prerenderFrame,
+  content = {},
+  autoResize,
+  hideCloseButton,
+  nonce,
+  fullScreen = false,
+}: OverlayProps): ElementNode {
+  const uid = `venmo-overlay-${uniqueID()}`;
+
+  function closeCheckout(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    close();
+  }
+
+  function focusCheckout(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!supportsPopups()) {
+      return;
+    }
+
+    if (isIos()) {
+      // eslint-disable-next-line no-alert
+      window.alert("Please switch tabs to reactivate the Venmo window");
+    } else if (isFirefox()) {
+      // eslint-disable-next-line no-alert
+      window.alert(
+        'Don\'t see the popup window?\n\nSelect "Window" in your toolbar to find "Log in to your Venmo account"'
+      );
+    } else {
+      focus();
+    }
+  }
+
+  const setupAnimations = (name) => {
+    return (el) => {
+      const showContainer = () => animate(el, `show-${name}`, noop);
+      const hideContainer = () => animate(el, `hide-${name}`, noop);
+      event.on(EVENT.DISPLAY, showContainer);
+      event.on(EVENT.CLOSE, hideContainer);
+    };
+  };
+
+  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 outletOnRender = (el) => {
+    setupAnimations("component")(el);
+    if (autoResize) {
+      setupAutoResize(el);
+    }
+  };
+
+  let outlet;
+
+  if (frame && prerenderFrame) {
+    frame.classList.add(CLASS.COMPONENT_FRAME);
+    prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
+
+    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);
+    });
+
+    outlet = (
+      <div class={CLASS.OUTLET} onRender={outletOnRender}>
+        <node el={frame} />
+        <node el={prerenderFrame} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={uid}
+      onRender={setupAnimations("container")}
+      class="venmo-checkout-sandbox"
+    >
+      <style nonce={nonce}>{getVenmoSandboxStyle({ uid })}</style>
+      <iframe
+        title="Venmo Checkout Overlay"
+        name={`__venmo_checkout_sandbox_${uid}__`}
+        scrolling="no"
+        class={`venmo-checkout-sandbox-iframe${fullScreen ? "-full" : ""}`}
+      >
+        <html>
+          <body>
+            <div
+              id={uid}
+              onClick={focusCheckout}
+              class={`venmo-overlay-context-${context} venmo-checkout-overlay`}
+            >
+              {!fullScreen && (
+                <div class="venmo-checkout-modal">
+                  <div class="venmo-checkout-logo">
+                    <VenmoLogo logoColor={LOGO_COLOR.WHITE} />
+                  </div>
+                  {content.interrogativeMessage && (
+                    <div class="venmo-interrogative-message">
+                      {content.interrogativeMessage}
+                    </div>
+                  )}
+                  {content.windowMessage && (
+                    <div class="venmo-checkout-message">
+                      {content.windowMessage}
+                    </div>
+                  )}
+                  {content.continueMessage && (
+                    <div class="venmo-checkout-continue">
+                      <a onClick={focus} href="#">
+                        {content.continueMessage}
+                      </a>
+                    </div>
+                  )}
+                  {content.cancelMessage && !hideCloseButton && (
+                    <div class="venmo-checkout-close">
+                      <a href="#" onClick={closeCheckout} aria-label="close">
+                        {content.cancelMessage}
+                      </a>
+                    </div>
+                  )}
+                  <div class="venmo-checkout-loader">
+                    <div class="venmo-spinner" />
+                  </div>
+                </div>
+              )}
+              <div
+                class={
+                  fullScreen
+                    ? "venmo-checkout-iframe-container-full"
+                    : "venmo-checkout-iframe-container"
+                }
+              >
+                {outlet}
+              </div>
+
+              <style nonce={nonce}>{getVenmoContainerStyle({ uid })}</style>
+            </div>
+          </body>
+        </html>
+      </iframe>
+    </div>
+  );
+}

src/three-domain-secure/component.jsx

@@ -33,2 +33,4 @@ /* @flow */
     continueMessage?: string,
+    cancelMessage?: string,
+    interrogativeMessage?: string,
   |},
@@ -35,0 +37,0 @@ userType: ?$Values<typeof USER_TYPE>,

No alert changes

Improved metrics

Total package byte prevSize

89034

increased by20.83%

Lines of code

1753

increased by35.37%

No dependency changes