rbox/static/js/components/cookie-consent.js

// static/js/components/cookie-consent.js
import app from '../app.js';

const COOKIE_CONSENT_KEY = 'rbox_cookie_consent';

export class CookieConsent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.hasConsented = this.checkConsent();
    }

    connectedCallback() {
        if (!this.hasConsented) {
            this.render();
        }
    }

    checkConsent() {
        const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
        if (consent) {
            // In a real application, you'd parse this and apply preferences
            // For now, just checking if it exists
            return true;
        }
        return false;
    }

    setConsent(status) {
        // In a real application, 'status' would be a detailed object
        // For now, a simple string 'accepted' or 'declined'
        localStorage.setItem(COOKIE_CONSENT_KEY, status);
        this.hasConsented = true;
        this.remove(); // Remove the banner after consent
        app.getLogger().info(`Cookie consent: ${status}`);
        // Trigger an event for other parts of the app to react to consent change
        document.dispatchEvent(new CustomEvent('cookie-consent-changed', { detail: { status } }));
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background-color: var(--accent-color, #333);
                    color: var(--text-color-light, #eee);
                    padding: 15px 20px;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
                    z-index: 10000;
                    font-family: var(--font-family, sans-serif);
                    font-size: 0.9rem;
                    line-height: 1.4;
                }
                .consent-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    gap: 15px;
                }
                .consent-message {
                    flex: 1;
                    min-width: 250px;
                    color: var(--text-color, #333);
                }
                .consent-message a {
                    color: var(--primary-color, #007bff);
                    text-decoration: underline;
                }
                .consent-buttons {
                    display: flex;
                    gap: 10px;
                    flex-wrap: wrap;
                }
                .consent-button {
                    background-color: var(--primary-color, #007bff);
                    color: var(--accent-color, #fff);
                    border: none;
                    padding: 8px 15px;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 0.9rem;
                    transition: background-color 0.2s ease;
                }
                .consent-button:hover {
                    background-color: var(--secondary-color, #0056b3);
                }
                .consent-button.decline {
                    background-color: #6c757d;
                }
                .consent-button.decline:hover {
                    background-color: #5a6268;
                }
                .consent-button.customize {
                    background-color: transparent;
                    border: 1px solid var(--primary-color, #007bff);
                    color: var(--primary-color, #007bff);
                }
                .consent-button.customize:hover {
                    background-color: var(--primary-color, #007bff);
                    color: var(--accent-color, #fff);
                }
                @media (max-width: 768px) {
                    .consent-container {
                        flex-direction: column;
                        align-items: flex-start;
                    }
                    .consent-buttons {
                        width: 100%;
                        justify-content: stretch;
                    }
                    .consent-button {
                        flex: 1;
                    }
                }
            </style>
            <div class="consent-container">
                <p class="consent-message">
                    We use cookies to ensure you get the best experience on our website. For more details, please read our
                    <a href="/static/legal/cookie_policy.md" target="_blank" rel="noopener noreferrer">Cookie Policy</a>.
                </p>
                <div class="consent-buttons">
                    <button class="consent-button accept">Accept All</button>
                    <button class="consent-button decline">Decline All</button>
                    <button class="consent-button customize">Customize</button>
                </div>
            </div>
        `;

        this.shadowRoot.querySelector('.consent-button.accept').addEventListener('click', () => this.setConsent('accepted'));
        this.shadowRoot.querySelector('.consent-button.decline').addEventListener('click', () => this.setConsent('declined'));
        this.shadowRoot.querySelector('.consent-button.customize').addEventListener('click', () => {
            // For now, customize acts like accept. In a real app, this would open a modal.
            app.getLogger().info('Customize cookie consent clicked. (Placeholder: acting as accept)');
            this.setConsent('accepted');
        });
    }
}

customElements.define('cookie-consent', CookieConsent);