Files

File: src/main/resources/static/js/checkout.js

Back to file list | View History | Compare Versions
      
      const API_BASE = '/api';
    
      function getOrCreateSessionId() {
    
        let sessionId = localStorage.getItem('cart_session_id');
    
        if (!sessionId) {
    
          sessionId = 'sess_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
    
          localStorage.setItem('cart_session_id', sessionId);
    
        }
    
        return sessionId;
    
      }
    
      function getSelectedRegion() {
    
        const stored = localStorage.getItem('selectedRegion');
    
        return stored ? JSON.parse(stored) : null;
    
      }
    
      async function getExchangeRate(fromCurrency, toCurrency) {
    
        if (fromCurrency === toCurrency) {
    
          return 1.0;
    
        }
    
        try {
    
          const response = await fetch(`${API_BASE}/currency/rate/${fromCurrency}/${toCurrency}`);
    
          const data = await response.json();
    
          if (data.success && data.rate) {
    
            return data.rate;
    
          }
    
        } catch (err) {
    
          console.error('Failed to get exchange rate:', err);
    
        }
    
        return 1.0; // Fallback
    
      }
    
      // Get cart from localStorage
    
      function getCart() {
    
        try {
    
          return JSON.parse(localStorage.getItem('cart') || '[]');
    
        } catch {
    
          return [];
    
        }
    
      }
    
      // Store form data between steps
    
      let checkoutData = {
    
        customerInfo: {},
    
        shippingInfo: {},
    
        items: []
    
      };
    
      let currentStep = 1;
    
      let itemsWithCurrentPrices = [];
    
      let currency = 'USD';
    
      // Load saved checkout data from localStorage
    
      function loadCheckoutData() {
    
        try {
    
          const saved = localStorage.getItem('checkoutData');
    
          if (saved) {
    
            const parsed = JSON.parse(saved);
    
            checkoutData.customerInfo = parsed.customerInfo || {};
    
            checkoutData.shippingInfo = parsed.shippingInfo || {};
    
            if (parsed.currentStep) {
    
              currentStep = parsed.currentStep;
    
            }
    
          }
    
        } catch (error) {
    
          console.error('Error loading checkout data:', error);
    
        }
    
      }
    
      // Save checkout data to localStorage
    
      function saveCheckoutData() {
    
        try {
    
          localStorage.setItem('checkoutData', JSON.stringify({
    
            customerInfo: checkoutData.customerInfo,
    
            shippingInfo: checkoutData.shippingInfo,
    
            currentStep: currentStep
    
          }));
    
        } catch (error) {
    
          console.error('Error saving checkout data:', error);
    
        }
    
      }
    
      // Clear saved checkout data
    
      function clearCheckoutData() {
    
        localStorage.removeItem('checkoutData');
    
      }
    
      // Step management
    
      function setStep(step) {
    
        currentStep = step;
    
        saveCheckoutData();
    
        updateStepIndicator();
    
        renderStepContent();
    
      }
    
      function updateStepIndicator() {
    
        document.querySelectorAll('.step').forEach((stepEl, index) => {
    
          const stepNum = index + 1;
    
          stepEl.classList.remove('active', 'completed');
    
          if (stepNum < currentStep) {
    
            stepEl.classList.add('completed');
    
            stepEl.querySelector('.step-number').textContent = '✓';
    
          } else if (stepNum === currentStep) {
    
            stepEl.classList.add('active');
    
            stepEl.querySelector('.step-number').textContent = stepNum;
    
          } else {
    
            stepEl.querySelector('.step-number').textContent = stepNum;
    
          }
    
        });
    
      }
    
      async function renderCheckout() {
    
        const items = getCart();
    
        if (items.length === 0) {
    
          document.getElementById('checkoutContent').innerHTML = `
    
            <div style="text-align: center; padding: 4rem 2rem;">
    
              <h3>Your cart is empty</h3>
    
              <p style="color: #666; margin: 1rem 0;">Add some products to checkout!</p>
    
              <a href="/" class="btn">Continue Shopping</a>
    
            </div>
    
          `;
    
          return;
    
        }
    
        // Get user's selected region for currency
    
        const selectedRegion = getSelectedRegion();
    
        const targetCurrency = selectedRegion ? selectedRegion.currency : 'USD';
    
        currency = targetCurrency;
    
        // Get exchange rate once for all products
    
        const exchangeRate = await getExchangeRate('USD', targetCurrency);
    
        // Fetch current prices from API
    
        let subtotal = 0;
    
        itemsWithCurrentPrices = [];
    
        for (const item of items) {
    
          try {
    
            const headers = {};
    
            if (selectedRegion) {
    
              headers['X-User-Region'] = selectedRegion.code;
    
            }
    
            const response = await fetch(`${API_BASE}/products/${item.productId}`, { headers });
    
            const data = await response.json();
    
            if (data.success) {
    
              const product = data.product;
    
              // Convert price to target currency
    
              const currentPriceUSD = product.price; // In cents
    
              const currentPrice = Math.round(currentPriceUSD * exchangeRate); // Converted
    
              const itemTotal = currentPrice * item.quantity;
    
              subtotal += itemTotal;
    
              itemsWithCurrentPrices.push({
    
                ...item,
    
                currentPrice,
    
                productName: product.name,
    
                currency: targetCurrency,
    
                taxIncluded: product.taxIncluded || false
    
              });
    
            }
    
          } catch (error) {
    
            console.error('Error loading product:', error);
    
          }
    
        }
    
        checkoutData.items = itemsWithCurrentPrices;
    
        loadCheckoutData(); // Load saved form data
    
        renderOrderSummary();
    
        setStep(currentStep);
    
      }
    
      function renderOrderSummary() {
    
        const summaryContent = document.getElementById('summaryContent');
    
        const items = checkoutData.items;
    
        if (items.length === 0) {
    
          summaryContent.innerHTML = '<div class="loading">Loading...</div>';
    
          return;
    
        }
    
        const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
    
        const shipping = checkoutData.shippingInfo?.cost || 0;
    
        const tax = checkoutData.shippingInfo?.tax || 0;
    
        const adjustedSubtotal = checkoutData.shippingInfo?.adjustedSubtotal || subtotal;
    
        const total = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);
    
        summaryContent.innerHTML = `
    
          <div style="margin-bottom: 1.5rem;">
    
            ${items.map(item => `
    
              <div class="summary-item product">
    
                <span class="product-name">${escapeHtml(item.productName)} x${item.quantity}</span>
    
                <span>${item.currency} ${((item.currentPrice * item.quantity) / 100).toFixed(2)}</span>
    
              </div>
    
            `).join('')}
    
          </div>
    
          <div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
    
            <div class="summary-item">
    
              <span>Subtotal:</span>
    
              <span id="summary-subtotal">${currency} ${(subtotal / 100).toFixed(2)}</span>
    
            </div>
    
            <div class="summary-item">
    
              <span>Shipping:</span>
    
              <span id="summary-shipping">${currency} ${(shipping / 100).toFixed(2)}</span>
    
            </div>
    
            <div id="summary-tax-row" class="summary-item">
    
              <span>Tax <small id="summary-tax-rate" style="color: #666;"></small>:</span>
    
              <span id="summary-tax">${checkoutData.shippingInfo?.country ? `${currency} ${(tax / 100).toFixed(2)}` : 'Uncalculated'}</span>
    
            </div>
    
            <div class="summary-item summary-total">
    
              <span>Total:</span>
    
              <span id="summary-total">${currency} ${(total / 100).toFixed(2)}</span>
    
            </div>
    
          </div>
    
        `;
    
      }
    
      function renderStepContent() {
    
        const content = document.getElementById('checkoutContent');
    
        if (currentStep === 1) {
    
          renderStep1(content);
    
        } else if (currentStep === 2) {
    
          renderStep2(content);
    
        } else if (currentStep === 3) {
    
          renderStep3(content);
    
        }
    
      }
    
      function renderStep1(container) {
    
        const data = checkoutData.customerInfo;
    
        container.innerHTML = `
    
          <div class="step-content active">
    
            <h3 style="margin-bottom: 1.5rem;">Customer Information</h3>
    
            <form id="step1Form" onsubmit="handleStep1(event)">
    
              <div class="form-group">
    
                <label>Email *</label>
    
                <input type="email" name="email" required placeholder="customer@example.com" value="${data.email || ''}">
    
              </div>
    
              <div class="form-row">
    
                <div class="form-group">
    
                  <label>First Name *</label>
    
                  <input type="text" name="firstName" required value="${data.firstName || ''}">
    
                </div>
    
                <div class="form-group">
    
                  <label>Last Name *</label>
    
                  <input type="text" name="lastName" required value="${data.lastName || ''}">
    
                </div>
    
              </div>
    
              <div class="form-group">
    
                <label>Phone</label>
    
                <input type="tel" name="phone" placeholder="+1234567890" value="${data.phone || ''}">
    
              </div>
    
              <div class="step-actions">
    
                <div></div>
    
                <button type="submit" class="btn btn-success">Continue to Shipping</button>
    
              </div>
    
            </form>
    
          </div>
    
        `;
    
      }
    
      async function renderStep2(container) {
    
        const data = checkoutData.shippingInfo;
    
        // Fetch countries
    
        let countries = [{ code: 'US', name: 'United States' }];
    
        try {
    
          const countriesResponse = await fetch(`${API_BASE}/countries`);
    
          const countriesData = await countriesResponse.json();
    
          if (countriesData.success) {
    
            countries = countriesData.countries;
    
          }
    
        } catch (error) {
    
          console.error('Error fetching countries:', error);
    
        }
    
        const countriesOptions = countries.map(c =>
    
          `<option value="${c.code}" ${(data.country === c.code) ? 'selected' : (c.code === 'US' && !data.country) ? 'selected' : ''}>${escapeHtml(c.name)}</option>`
    
        ).join('');
    
        container.innerHTML = `
    
          <div class="step-content active">
    
            <h3 style="margin-bottom: 1.5rem;">Shipping Address</h3>
    
            <form id="step2Form" onsubmit="handleStep2(event)">
    
              <div class="form-group">
    
                <label>Street Address *</label>
    
                <input type="text" name="address" required value="${data.address || ''}">
    
              </div>
    
              <div class="form-row">
    
                <div class="form-group">
    
                  <label>City *</label>
    
                  <input type="text" name="city" required value="${data.city || ''}">
    
                </div>
    
                <div class="form-group">
    
                  <label>State/Province *</label>
    
                  <input type="text" name="state" id="stateInput" required value="${data.state || ''}" onchange="handleStateChange()" oninput="handleStateChange()">
    
                </div>
    
              </div>
    
              <div class="form-row">
    
                <div class="form-group">
    
                  <label>ZIP/Postal Code *</label>
    
                  <input type="text" name="zip" required value="${data.zip || ''}">
    
                </div>
    
                <div class="form-group">
    
                  <label>Country *</label>
    
                  <select name="country" id="countryInput" required onchange="handleCountryChange()">
    
                    ${countriesOptions}
    
                  </select>
    
                </div>
    
              </div>
    
              <div class="form-section" style="margin-top: 2rem;">
    
                <h3>Shipping Method</h3>
    
                <div class="form-group">
    
                  <label>Shipping Method</label>
    
                  <select name="shippingMethod" id="shippingMethod" onchange="updateShipping()">
    
                    <option value="standard" data-cost="0" ${data.shippingMethod === 'standard' ? 'selected' : ''}>Standard (Free)</option>
    
                    <option value="express" data-cost="10" ${data.shippingMethod === 'express' ? 'selected' : ''}>Express ($10.00)</option>
    
                    <option value="overnight" data-cost="25" ${data.shippingMethod === 'overnight' ? 'selected' : ''}>Overnight ($25.00)</option>
    
                  </select>
    
                </div>
    
              </div>
    
              <div class="step-actions" style="gap: 1rem;display: grid;">
    
                <button type="submit" class="btn btn-success">Continue to Review</button>
    
                <button type="button" class="btn" onclick="setStep(1)">Back</button>
    
              </div>
    
            </form>
    
          </div>
    
        `;
    
        // Update tax if country is already selected
    
        if (data.country) {
    
          setTimeout(() => updateTaxFromAddress(), 100);
    
        } else {
    
          // Update summary to show "Uncalculated" for tax
    
          updateOrderSummary();
    
        }
    
      }
    
      function renderStep3(container) {
    
        const customer = checkoutData.customerInfo;
    
        const shipping = checkoutData.shippingInfo;
    
        const items = checkoutData.items;
    
        const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
    
        const shippingCost = shipping.cost || 0;
    
        const tax = shipping.tax || 0;
    
        const total = (shipping.adjustedSubtotal || subtotal) + shippingCost + tax;
    
        container.innerHTML = `
    
          <div class="step-content active">
    
            <h3 style="margin-bottom: 1.5rem;">Review Your Order</h3>
    
            <div class="form-section">
    
              <h4 style="margin-bottom: 1rem;">Customer Information</h4>
    
              <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
    
                <p><strong>Name:</strong> ${escapeHtml(customer.firstName || '')} ${escapeHtml(customer.lastName || '')}</p>
    
                <p><strong>Email:</strong> ${escapeHtml(customer.email || '')}</p>
    
                ${customer.phone ? `<p><strong>Phone:</strong> ${escapeHtml(customer.phone)}</p>` : ''}
    
              </div>
    
            </div>
    
            <div class="form-section">
    
              <h4 style="margin-bottom: 1rem;">Shipping Address</h4>
    
              <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
    
                <p>${escapeHtml(shipping.address || '')}</p>
    
                <p>${escapeHtml(shipping.city || '')}, ${escapeHtml(shipping.state || '')} ${escapeHtml(shipping.zip || '')}</p>
    
                <p>${escapeHtml(shipping.country || '')}</p>
    
              </div>
    
            </div>
    
            <div class="form-section">
    
              <h4 style="margin-bottom: 1rem;">Shipping Method</h4>
    
              <div style="background: var(--bg-color); padding: 1rem; border-radius: 8px;">
    
                <p>${shipping.shippingMethod === 'express' ? 'Express' : shipping.shippingMethod === '	overnight' ? 'Overnight' : 'Standard'} Shipping</p>
    
                <p style="color: #666; font-size: 0.9rem;">${currency} ${(shippingCost / 100).toFixed(2)}</p>
    
              </div>
    
            </div>
    
            <div class="form-section">
    
              <h4 style="margin-bottom: 1rem;">Order Summary</h4>
    
              <div style="background: var(--bg-color); padding: 1.5rem; border-radius: 8px;">
    
                ${items.map(item => `
    
                  <div style="display: flex; justify-content: space-between; margin-bottom: 0.75rem;">
    
                    <span>${escapeHtml(item.productName)} x${item.quantity}</span>
    
                    <span>${item.currency} ${((item.currentPrice * item.quantity) / 100).toFixed(2)}</span>
    
                  </div>
    
                `).join('')}
    
                <div style="border-top: 1px solid var(--border-color); margin-top: 1rem; padding-top: 1rem;">
    
                  <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
    
                    <span style="color: #666;">Subtotal</span>
    
                    <span>${currency} ${((shipping.adjustedSubtotal || subtotal) / 100).toFixed(2)}</span>
    
                  </div>
    
                  <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
    
                    <span style="color: #666;">Shipping</span>
    
                    <span>${currency} ${(shippingCost / 100).toFixed(2)}</span>
    
                  </div>
    
                  <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
    
                    <span style="color: #666;">Tax</span>
    
                    <span>${currency} ${(tax / 100).toFixed(2)}</span>
    
                  </div>
    
                  <div style="display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); font-weight: 700; font-size: 1.1rem;">
    
                    <span>Total</span>
    
                    <span>${currency} ${(total / 100).toFixed(2)}</span>
    
                  </div>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="step-actions" style="gap: 1rem;display: grid;">
    
              <button type="button" class="btn btn-success" onclick="handleStep3()">Continue to Payment</button>
    
              <button type="button" class="btn" onclick="setStep(2)">Back</button>
    
            </div>
    
          </div>
    
        `;
    
      }
    
      function handleStep1(event) {
    
        event.preventDefault();
    
        const form = event.target;
    
        const formData = new FormData(form);
    
        checkoutData.customerInfo = {
    
          email: formData.get('email'),
    
          firstName: formData.get('firstName'),
    
          lastName: formData.get('lastName'),
    
          phone: formData.get('phone') || ''
    
        };
    
        saveCheckoutData();
    
        setStep(2);
    
      }
    
      async function handleStep2(event) {
    
        event.preventDefault();
    
        const form = event.target;
    
        const formData = new FormData(form);
    
        const shippingMethod = formData.get('shippingMethod');
    
        const shippingCost = Math.round(parseFloat(document.getElementById('shippingMethod').options[document.getElementById('shippingMethod').selectedIndex].dataset.cost) * 100) || 0;
    
        checkoutData.shippingInfo = {
    
          name: `${checkoutData.customerInfo.firstName} ${checkoutData.customerInfo.lastName}`,
    
          address: formData.get('address'),
    
          city: formData.get('city'),
    
          state: formData.get('state'),
    
          zip: formData.get('zip'),
    
          country: formData.get('country'),
    
          shippingMethod,
    
          cost: shippingCost
    
        };
    
        saveCheckoutData();
    
        // Calculate tax if country is selected (AWAIT the async function!)
    
        if (checkoutData.shippingInfo.country) {
    
          await updateTaxFromAddress();
    
        }
    
        setStep(3);
    
      }
    
      async function handleStep3() {
    
        const submitBtn = event.target;
    
        submitBtn.disabled = true;
    
        submitBtn.textContent = 'Creating...';
    
        try {
    
          // Prepare cart items
    
          const cartItems = checkoutData.items.map(item => ({
    
            productId: item.productId,
    
            quantity: item.quantity
    
          }));
    
          const requestData = {
    
            items: cartItems,
    
            customerInfo: checkoutData.customerInfo,
    
            shippingInfo: {
    
              ...checkoutData.shippingInfo,
    
              taxRate: checkoutData.shippingInfo.taxRate || 0
    
            }
    
          };
    
          const response = await fetchWithCsrf(`${API_BASE}/payment-links/create`, {
    
            method: 'POST',
    
            headers: {
    
              'Content-Type': 'application/json',
    
              'x-session-id': getOrCreateSessionId()
    
            },
    
            body: JSON.stringify(requestData)
    
          });
    
          const data = await response.json();
    
          if (!data.success) {
    
            throw new Error(data.error || 'Failed to create payment link');
    
          }
    
          // Clear cart and checkout data, then redirect to payment page
    
          localStorage.removeItem('cart');
    
          clearCheckoutData();
    
          showNotification('Payment link created successfully!', 'success', 2000);
    
          setTimeout(() => {
    
            window.location.href = data.paymentLink.url;
    
          }, 2000);
    
        } catch (err) {
    
          showNotification(`Error: ${err.message}`, 'error');
    
          submitBtn.disabled = false;
    
          submitBtn.textContent = 'Create Payment Link';
    
        }
    
      }
    
      async function updateShipping() {
    
        const select = document.getElementById('shippingMethod');
    
        const option = select.options[select.selectedIndex];
    
        const shippingCost = Math.round(parseFloat(option.dataset.cost) * 100) || 0;
    
        checkoutData.shippingInfo.cost = shippingCost;
    
        await updateTaxFromAddress();
    
      }
    
      async function updateTaxFromAddress() {
    
        const countryInput = document.getElementById('countryInput');
    
        const stateInput = document.getElementById('stateInput');
    
        const country = countryInput?.value?.trim() || checkoutData.shippingInfo?.country || '';
    
        const state = stateInput?.value?.trim() || checkoutData.shippingInfo?.state || '';
    
        // Always update summary, even if no country (to show "Uncalculated")
    
        if (!country) {
    
          checkoutData.shippingInfo.tax = 0;
    
          checkoutData.shippingInfo.taxRate = 0;
    
          checkoutData.shippingInfo.adjustedSubtotal = checkoutData.items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
    
          saveCheckoutData();
    
          updateOrderSummary();
    
          return;
    
        }
    
        const items = checkoutData.items;
    
        let currency = 'USD';
    
        // Fetch tax rate
    
        let taxRate = 0.08;
    
        try {
    
          const taxParams = new URLSearchParams();
    
          if (country) taxParams.append('country', country);
    
          if (state) taxParams.append('state', state);
    
          const taxResponse = await fetch(`${API_BASE}/tax/rate?${taxParams.toString()}`);
    
          const taxData = await taxResponse.json();
    
          if (taxData.success) {
    
            taxRate = taxData.taxRate;
    
          }
    
        } catch (error) {
    
          console.error('Error fetching tax rate:', error);
    
        }
    
        // Calculate tax based on tax-included/excluded products
    
        let tax = 0;
    
        let adjustedSubtotal = 0;
    
        for (const item of items) {
    
          if (item.taxIncluded) {
    
            const itemBasePrice = Math.round((item.currentPrice * item.quantity) / (1 + taxRate));
    
            const itemTax = (item.currentPrice * item.quantity) - itemBasePrice;
    
            tax += itemTax;
    
            adjustedSubtotal += itemBasePrice;
    
          } else {
    
            const itemTax = Math.round((item.currentPrice * item.quantity) * taxRate);
    
            tax += itemTax;
    
            adjustedSubtotal += (item.currentPrice * item.quantity);
    
          }
    
        }
    
        const shippingCost = checkoutData.shippingInfo?.cost || 0;
    
        const total = adjustedSubtotal + shippingCost + tax;
    
        // Update checkout data
    
        checkoutData.shippingInfo.taxRate = taxRate;
    
        checkoutData.shippingInfo.tax = tax;
    
        checkoutData.shippingInfo.adjustedSubtotal = adjustedSubtotal;
    
        checkoutData.shippingInfo.total = total;
    
        saveCheckoutData();
    
        updateOrderSummary();
    
      }
    
      function updateOrderSummary() {
    
        const items = checkoutData.items;
    
        const subtotal = items.reduce((sum, item) => sum + (item.currentPrice * item.quantity), 0);
    
        const shipping = checkoutData.shippingInfo?.cost || 0;
    
        const tax = checkoutData.shippingInfo?.tax || 0;
    
        const taxRate = checkoutData.shippingInfo?.taxRate || 0;
    
        const adjustedSubtotal = checkoutData.shippingInfo?.adjustedSubtotal || subtotal;
    
        // Calculate total - include tax only if country is known
    
        const total = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);
    
        const summarySubtotal = document.getElementById('summary-subtotal');
    
        const summaryShipping = document.getElementById('summary-shipping');
    
        const summaryTaxRow = document.getElementById('summary-tax-row');
    
        const summaryTax = document.getElementById('summary-tax');
    
        const summaryTaxRate = document.getElementById('summary-tax-rate');
    
        const summaryTotal = document.getElementById('summary-total');
    
        if (summarySubtotal) summarySubtotal.textContent = `${currency} ${(adjustedSubtotal / 100).toFixed(2)}`;
    
        if (summaryShipping) summaryShipping.textContent = `${currency} ${(shipping / 100).toFixed(2)}`;
    
        // Always show tax - show "Uncalculated" if country not selected
    
        if (summaryTaxRow && summaryTax && summaryTaxRate) {
    
          if (checkoutData.shippingInfo?.country) {
    
            summaryTax.textContent = `${currency} ${(tax / 100).toFixed(2)}`;
    
            summaryTaxRate.textContent = `(${(taxRate * 100).toFixed(2)}%)`;
    
          } else {
    
            summaryTax.textContent = 'Uncalculated';
    
            summaryTaxRate.textContent = '';
    
          }
    
          summaryTaxRow.style.display = 'flex';
    
        }
    
        // Calculate total - include tax only if country is known
    
        const finalTotal = adjustedSubtotal + shipping + (checkoutData.shippingInfo?.country ? tax : 0);
    
        if (summaryTotal) summaryTotal.textContent = `${currency} ${(finalTotal / 100).toFixed(2)}`;
    
      }
    
      function escapeHtml(text) {
    
        const div = document.createElement('div');
    
        div.textContent = text;
    
        return div.innerHTML;
    
      }
    
      // Initialize
    
      document.addEventListener('DOMContentLoaded', () => {
    
        renderCheckout();
    
      });
    
      // Handle country change - update shipping info and recalculate tax
    
      async function handleCountryChange() {
    
        const countryInput = document.getElementById('countryInput');
    
        const country = countryInput?.value?.trim() || '';
    
        // Update checkout data with new country
    
        if (checkoutData.shippingInfo) {
    
          checkoutData.shippingInfo.country = country;
    
          saveCheckoutData();
    
        }
    
        // Recalculate tax immediately
    
        await updateTaxFromAddress();
    
      }
    
      // Handle state change - update shipping info and recalculate tax
    
      async function handleStateChange() {
    
        const stateInput = document.getElementById('stateInput');
    
        const state = stateInput?.value?.trim() || '';
    
        // Update checkout data with new state
    
        if (checkoutData.shippingInfo) {
    
          checkoutData.shippingInfo.state = state;
    
          saveCheckoutData();
    
        }
    
        // Recalculate tax immediately
    
        await updateTaxFromAddress();
    
      }
    
      // Make functions global
    
      window.setStep = setStep;
    
      window.handleStep1 = handleStep1;
    
      window.handleStep2 = handleStep2;
    
      window.handleStep3 = handleStep3;
    
      window.updateShipping = updateShipping;
    
      window.updateTaxFromAddress = updateTaxFromAddress;
    
      window.updateOrderSummary = updateOrderSummary;
    
      window.handleCountryChange = handleCountryChange;
    
      window.handleStateChange = handleStateChange;
backend

Files

File: src/main/resources/static/js/checkout.js
