diff --git a/src/ui/overlay/paypal-on-approve-processing-overlay/index.jsx b/src/ui/overlay/paypal-on-approve-processing-overlay/index.jsx new file mode 100644 index 000000000..34d9db853 --- /dev/null +++ b/src/ui/overlay/paypal-on-approve-processing-overlay/index.jsx @@ -0,0 +1,3 @@ +/* @flow */ + +export * from "./overlay"; diff --git a/src/ui/overlay/paypal-on-approve-processing-overlay/overlay.jsx b/src/ui/overlay/paypal-on-approve-processing-overlay/overlay.jsx new file mode 100644 index 000000000..f17ae9c69 --- /dev/null +++ b/src/ui/overlay/paypal-on-approve-processing-overlay/overlay.jsx @@ -0,0 +1,82 @@ +/* @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 "../paypal-app-switch/style"; + +type OverlayProps = {| + buttonSessionID: string, + close: () => ZalgoPromise, + focus: () => ZalgoPromise, +|}; + +export function PayPalOnApproveOverlay({ + buttonSessionID, +}: OverlayProps): ElementNode { + const uid = `paypal-onapprove-overlay-${buttonSessionID}`; + const overlayIframeName = `__paypal_checkout_sandbox_${uid}__`; + const nonce = ""; + function closeOverlay(e) { + e.preventDefault(); + e.stopPropagation(); + const overlay = document.getElementsByName(uid)?.[0]; + + animate(overlay, "hide-container", noop); + + if (overlay) { + // the delay is to allow the animation time to run + setTimeout(() => { + overlay.remove(); + }, 300); + } + } + + const setupShowAnimation = () => (el) => { + animate(el, "show-container", noop); + }; + + return ( +
+ + +
+ ); +} diff --git a/src/zoid/buttons/component.jsx b/src/zoid/buttons/component.jsx index 9bafd9407..163fb581a 100644 --- a/src/zoid/buttons/component.jsx +++ b/src/zoid/buttons/component.jsx @@ -105,6 +105,7 @@ import { sendPostRobotMessageToButtonIframe, isEagerOrderCreationEnabled, } from "./util"; +import { PayPalOnApproveOverlay } from "../../ui/overlay/paypal-on-approve-processing-overlay"; export type ButtonsComponent = ZoidComponent< ButtonProps, @@ -348,6 +349,38 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => { }, }, + showOnApproveOverlay: { + type: "function", + queryParam: false, + value: + ({ props: { buttonSessionID } }) => + () => { + const overlay = ( + + ).render(dom({ doc: document })); + + document.body?.appendChild(overlay); + }, + }, + + hideOnApproveOverlay: { + type: "function", + queryParam: false, + value: + ({ props: { buttonSessionID } }) => + () => { + const overlay = document.getElementsByName( + `paypal-onapprove-overlay-${buttonSessionID}` + )?.[0]; + + if (overlay) { + overlay.remove(); + } + }, + }, + redirect: { type: "function", sendToChild: true,