@microbitsclub/paywall-solid/dist/src/paywall-popover-container.jsx

Solid components for Microbits paywalls

import { createEffect, Show } from 'solid-js';
import { isServer, Portal } from 'solid-js/web';
import { PaywallPopoverContent } from './paywall-popover-content';
import { usePaywallPopover } from './use-paywall-popover';
export const PaywallPopoverContainer = (props) => {
    const paywallPopover = usePaywallPopover();
    const popoverElement = isServer ? undefined : document.body;
    let preserveBodyStyle;
    createEffect(() => {
        if (paywallPopover.popover !== undefined) {
            preserveBodyStyle = {
                height: document.body.style.height,
                overflow: document.body.style.overflow,
            };
            document.body.style.height = '100%';
            document.body.style.overflow = 'hidden';
        }
        else if (preserveBodyStyle !== undefined) {
            document.body.style.height = preserveBodyStyle.height;
            document.body.style.overflow = preserveBodyStyle.overflow;
            preserveBodyStyle = undefined;
        }
    });
    const handleLogin = (contentUrl, shouldPurchase) => {
        paywallPopover.navigateToGetUserSession(contentUrl, shouldPurchase);
    };
    const handlePurchase = (contentUrl) => {
        paywallPopover.navigateToPurchaseThenViewContent(contentUrl);
    };
    const handleCancel = () => {
        paywallPopover.hidePopoverPaywall();
    };
    return (<>
            {props.children}

            <Portal mount={popoverElement}>
                <Show when={paywallPopover.popover !== undefined}>
                    <div style={{
            position: 'fixed',
            'box-sizing': 'border',
            top: 0,
            left: 0,
            width: '100vw',
            height: '100vh',
            opacity: 0.5,
            'background-color': '#eee',
        }}/>
                </Show>

                <PaywallPopoverContent mode={paywallPopover.popover?.mode} visible={paywallPopover.popover !== undefined} paywallId={paywallPopover.popover?.paywall.id} paywallPrice={paywallPopover.popover?.paywall.price} contentUrl={paywallPopover.popover?.contentUrl} onLogin={handleLogin} onPurchase={handlePurchase} onCancel={handleCancel}/>
            </Portal>
        </>);
};