vpn-btcpay-provisioner/app/static/js/pricing.js

// Utility functions for duration formatting
function formatDuration(hours) {
    if (hours < 24) {
        return `${hours} hour${hours === 1 ? '' : 's'}`;
    }
    if (hours < 168) {
        return `${hours / 24} day${hours === 24 ? '' : 's'}`;
    }
    if (hours < 720) {
        return `${Math.floor(hours / 168)} week${hours === 168 ? '' : 's'}`;
    }
    return `${Math.floor(hours / 720)} month${hours === 720 ? '' : 's'}`;
}

// Price calculation with volume discounts
async function calculatePrice(hours) {
    try {
        const response = await fetch('/api/calculate-price', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ hours: parseInt(hours) })
        });

        if (!response.ok) {
            throw new Error('Failed to calculate price');
        }

        const data = await response.json();
        return {
            price: data.price,
            formattedDuration: formatDuration(hours)
        };
    } catch (error) {
        console.error('Price calculation failed:', error);
        throw error;
    }
}

// Form initialization and event handling
function initializeForm(config) {
    const {
        formId = 'subscription-form',
        sliderId = 'duration-slider',
        priceDisplayId = 'price-display',
        durationDisplayId = 'duration-display',
        presetButtonClass = 'duration-preset'
    } = config;

    const form = document.getElementById(formId);
    const slider = document.getElementById(sliderId);
    const priceDisplay = document.getElementById(priceDisplayId);
    const durationDisplay = document.getElementById(durationDisplayId);
    const presetButtons = document.querySelectorAll(`.${presetButtonClass}`);

    if (!form || !slider || !priceDisplay || !durationDisplay) {
        throw new Error('Required elements not found');
    }

    return {
        form,
        slider,
        priceDisplay,
        durationDisplay,
        presetButtons
    };
}

// Main pricing interface
export const Pricing = {
    async init(config = {}) {
        try {
            const elements = initializeForm(config);
            const { form, slider, priceDisplay, durationDisplay, presetButtons } = elements;

            // Update price when duration changes
            const updateDisplay = async (hours) => {
                try {
                    const { price, formattedDuration } = await calculatePrice(hours);
                    priceDisplay.textContent = price;
                    durationDisplay.textContent = formattedDuration;
                } catch (error) {
                    console.error('Failed to update price display:', error);
                    priceDisplay.textContent = 'Error';
                    durationDisplay.textContent = 'Error calculating duration';
                }
            };

            // Set up event listeners
            slider.addEventListener('input', () => updateDisplay(slider.value));

            presetButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    const hours = e.target.dataset.hours;
                    slider.value = hours;
                    updateDisplay(hours);
                });
            });

            // Initial price calculation
            await updateDisplay(slider.value);

            return {
                updatePrice: updateDisplay,
                getCurrentDuration: () => parseInt(slider.value)
            };
        } catch (error) {
            console.error('Failed to initialize pricing:', error);
            throw error;
        }
    },

    formatDuration,
    calculatePrice
};

export default Pricing;