/* @flow */ /** @jsx node */ import { animate, noop } from "@krakenjs/belter/src"; import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src"; import { LOGO_COLOR, PayPalRebrandLogo } from "@paypal/sdk-logos/src"; import { type ZalgoPromise } from "@krakenjs/zalgo-promise/src"; import { getContainerStyle, getSandboxStyle } from "./style"; type OverlayProps = {| buttonSessionID: string, close: () => ZalgoPromise, focus?: () => ZalgoPromise, |}; export function PayPalAppSwitchOverlay({ close, focus, buttonSessionID, }: OverlayProps): ElementNode { const uid = `paypal-overlay-${buttonSessionID}`; const overlayIframeName = `__paypal_checkout_sandbox_${uid}__`; const nonce = ""; const content = { windowMessage: "To finish, go back to the PayPal app.", continueMessage: "Return to PayPal", }; function closeCheckout(e) { e.preventDefault(); e.stopPropagation(); const overlay = document.getElementsByName(uid)?.[0]; animate(overlay, "hide-container", noop); close(); if (overlay) { // the delay is to allow the animation time to run setTimeout(() => { overlay.remove(); }, 300); } } function focusCheckout(e) { e.preventDefault(); e.stopPropagation(); if (focus) { focus(); } } const setupShowAnimation = () => (el) => { animate(el, "show-container", noop); }; return (

); }