diff --git a/src/overlay/style.js b/src/overlay/style.js index 39d941d5..70165c0f 100644 --- a/src/overlay/style.js +++ b/src/overlay/style.js @@ -212,12 +212,24 @@ export function getContainerStyle({ uid } : {| uid : string |}) : string { max-width: 95vw; } + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full, + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET }, + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET } > iframe { + height: 100vh; + width: 100vw; + } + @media screen and (max-width: 470px) { #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container, #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container > .${ CLASS.OUTLET }, #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container > .${ CLASS.OUTLET } > iframe { max-height: 85vh; } + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full, + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET }, + #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container-full > .${ CLASS.OUTLET } > iframe { + height: 100vh; + } } #${ uid }.paypal-overlay-context-${ CONTEXT.IFRAME } .paypal-checkout-iframe-container { diff --git a/src/overlay/template.jsx b/src/overlay/template.jsx index a70e1cbd..074212f8 100644 --- a/src/overlay/template.jsx +++ b/src/overlay/template.jsx @@ -23,10 +23,11 @@ export type OverlayProps = {| |}, autoResize? : boolean, hideCloseButton? : boolean, - nonce : string + nonce : string, + fullScreen? : boolean |}; -export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton, nonce } : OverlayProps) : ElementNode { +export function Overlay({ context, close, focus, event, frame, prerenderFrame, content = {}, autoResize, hideCloseButton, nonce, fullScreen = false } : OverlayProps) : ElementNode { const uid = `paypal-overlay-${ uniqueID() }`; function closeCheckout(e) { @@ -119,25 +120,25 @@ export function Overlay({ context, close, focus, event, frame, prerenderFrame, c
{ !hideCloseButton && } -
- - {content.windowMessage && -
- {content.windowMessage} -
} - {content.continueMessage && -
- {content.continueMessage} -
} -
- -
- -
+ { !fullScreen && +
+ + {content.windowMessage && +
+ {content.windowMessage} +
} + {content.continueMessage && +
+ {content.continueMessage} +
} +
+ +
} +
{ outlet }
diff --git a/test/integration/tests/index.js b/test/integration/tests/index.js index 95d3802b..24ab5f1d 100644 --- a/test/integration/tests/index.js +++ b/test/integration/tests/index.js @@ -2,4 +2,5 @@ import './three-domain-secure'; import './spinner-page'; +import './overlay'; import './post-robot'; diff --git a/test/integration/tests/overlay/happy.jsx b/test/integration/tests/overlay/happy.jsx new file mode 100644 index 00000000..407ec33f --- /dev/null +++ b/test/integration/tests/overlay/happy.jsx @@ -0,0 +1,147 @@ +/* @flow */ +/** @jsx node */ + +import { node, dom } from 'jsx-pragmatic/src'; +import { ZalgoPromise } from 'zalgo-promise/src'; + +import { Overlay } from '../../../../src/overlay'; + +describe(`paypal overlay component happy path`, () => { + const cancel = () => undefined; + + let context = 'popup'; + let focussed; + + const close = () => ZalgoPromise.resolve(); + const focus = () => { + focussed = true; + return ZalgoPromise.resolve(); + }; + const event = { + on: () => ({ cancel }), + once: () => ({ cancel }), + reset: () => undefined, + trigger: () => ZalgoPromise.resolve(), + triggerOnce: () => ZalgoPromise.resolve() + }; + const frame = null; + const prerenderFrame = null; + const content = { + windowMessage: 'window message', + continueMessage: 'continue message' + }; + const autoResize = true; + let hideCloseButton = false; + const nonce = 'abc123'; + let fullScreen = false; + + const getOverlay = () => + (); + + const addOverlayToDOM = (child) => { + // $FlowFixMe + document.body.appendChild(child); + }; + + const getOverlayContainer = (domNode) => { + // $FlowFixMe + return domNode.querySelector('iframe').contentWindow.document; + }; + + beforeEach(() => { + // $FlowFixMe + document.body.innerHTML = ''; + }); + + it('should render the overlay component', () => { + const domNode = getOverlay().render(dom()); + + if (domNode.ownerDocument !== document) { + throw new Error(`Expected overlay component to be rendered to current dom`); + } + }); + + it('should render the overlay component with popup', () => { + context = 'popup'; + + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + if (!getOverlayContainer(domNode).querySelector('.paypal-overlay-context-popup')) { + throw new Error(`Expected overlay to have popup`); + } + }); + + it('should render the overlay component with iframe', () => { + context = 'iframe'; + + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + if (!getOverlayContainer(domNode).querySelector('.paypal-overlay-context-iframe')) { + throw new Error(`Expected overlay to have iframe`); + } + + context = 'popup'; // reset + }); + + it('should render the overlay component fullscreen', () => { + fullScreen = true; + + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + if (!getOverlayContainer(domNode).querySelector('.paypal-checkout-iframe-container-full')) { + throw new Error(`Expected overlay to be full screen`); + } + }); + + it('should hide the overlay close button', () => { + hideCloseButton = true; + + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + if (getOverlayContainer(domNode).querySelector('.paypal-checkout-close')) { + throw new Error(`Expected close button to be hidden`); + } + + hideCloseButton = false; // reset + }); + + it('should be able to close the overlay using close button', () => { + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + getOverlayContainer(domNode).querySelector('.paypal-checkout-close').click(); + + if (getOverlayContainer(domNode).querySelector('.paypal-checkout-sandbox')) { + throw new Error(`Expected overlay to be removed after closing`); + } + }); + + it('should be able to focus on the overlay by clicking on it', () => { + const domNode = getOverlay().render(dom()); + addOverlayToDOM(domNode); + + getOverlayContainer(domNode).querySelector('.paypal-checkout-overlay').click(); + + if (!focussed) { + throw new Error(`Expected overlay to be focussed after clicking on it`); + } + + focussed = null; // reset + }); +}); diff --git a/test/integration/tests/overlay/index.js b/test/integration/tests/overlay/index.js new file mode 100644 index 00000000..f31927de --- /dev/null +++ b/test/integration/tests/overlay/index.js @@ -0,0 +1,3 @@ +/* @flow */ + +import './happy';