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

Solid components for Microbits paywalls

import { Match, Switch } from 'solid-js';
import { assert } from './assert';
const containerStyle = (visible) => ({
    visibility: visible ? 'visible' : 'hidden',
    position: 'fixed',
    border: '1px solid red',
    padding: '1rem',
    bottom: '0',
    width: '100%',
    'background-color': 'white',
});
const buttonStyle = {
    border: '1px solid red',
    padding: '1rem',
};
export const PaywallPopoverContent = (props) => {
    const handleLoginOnly = () => {
        assert(props.onLogin && props.contentUrl);
        props.onLogin(props.contentUrl, false);
    };
    const handleLoginAndPurchase = () => {
        assert(props.onLogin && props.contentUrl);
        props.onLogin(props.contentUrl, true);
    };
    const handlePurchase = () => {
        assert(props.onPurchase && props.contentUrl);
        props.onPurchase(props.contentUrl);
    };
    return (<div style={containerStyle(props.visible)}>
            <div style={{ display: 'flex', 'flex-direction': 'column', gap: '16px' }}>
                <Switch>
                    <Match when={props.mode === 'no-session'}>
                        <div>
                            ${props.paywallPrice} {props.contentUrl}
                        </div>

                        <div style={{ display: 'flex', gap: '1rem' }}>
                            <button style={buttonStyle} onClick={handleLoginOnly}>
                                Login
                            </button>

                            <button style={buttonStyle} onClick={handleLoginAndPurchase}>
                                Purchase
                            </button>

                            <button style={buttonStyle} onClick={props.onCancel}>
                                Cancel
                            </button>
                        </div>
                    </Match>

                    <Match when={props.mode === 'not-authorized'}>
                        <div>
                            ${props.paywallPrice} {props.contentUrl}
                        </div>

                        <div style={{ display: 'flex', gap: '1rem' }}>
                            <button style={buttonStyle} onClick={handlePurchase}>
                                Purchase
                            </button>

                            <button style={buttonStyle} onClick={props.onCancel}>
                                Cancel
                            </button>
                        </div>
                    </Match>
                </Switch>
            </div>
        </div>);
};