getnamingo-registry/cp/resources/views/admin/domains/renewDomain.twig

{% extends "layouts/app.twig" %}

{% block title %}{{ __('Renew Domain') }} {{ domain.name }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <div class="mb-1">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <a href="{{route('home')}}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" /><rect x="10" y="12" width="4" height="4" /></svg></a>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="{{route('listDomains')}}">{{ __('Domains') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                      {{ __('Renew Domain') }}
                    </li>
                  </ol>
                </div>
                <h2 class="page-title">
                  {{ __('Renew Domain') }} {{ domain.name }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
                <div class="card">
                    <div class="card-body">
                        {% if maxYears >= 1 %}<form id="domainRenewForm" action="/domain/renew/{{ domain.name }}" method="post">
                        {{ csrf.field | raw }}{% endif %}
                            <div class="mb-3">
                                <label for="domainName" class="form-label">{{ __('Domain Name') }}</label>
                                <div class="form-control-plaintext">{{ domain.name }}</div>
                            </div>

                            {% if maxYears >= 1 %}
                            <div class="mb-3">
                                <label for="renewalYears" class="form-label">{{ 'Renewal Years' }}</label>
                                <input type="range" class="form-range" min="1" max="{{ maxYears }}" step="1" id="renewalYears" name="renewalYears" value="1">
                                <span id="yearValue">1 Year</span>
                            </div>
                            <div class="mb-3" id="domainPriceDisplay" style="display:none;">
                                <strong>{{ __('Estimated Price') }}: </strong><span id="domainPrice">{{ currency }} 0.00</span>
                            </div>
                            {% else %}
                            <div class="mb-3">
                                <label for="renewalYears" class="form-label">{{ 'Renewal Years' }}</label>
                                <div class="form-control-plaintext">{{ __('Your domain is currently renewed to its maximum term. At this time, no additional renewal is possible.') }}</div>
                            </div>
                            {% endif %}
                    </div>
                {% if maxYears >= 1 %}
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Renew Domain') }}</button>
                    </div>
                  </div>
                </div>
                </form>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener("DOMContentLoaded", function() {

    document.getElementById('renewalYears').addEventListener('input', function() {
        document.getElementById('yearValue').textContent = this.value + ' Year' + (this.value > 1 ? 's' : '');
    });

    window.currencySymbol = "{{ currencySymbol }}";
    window.currencyPosition = "{{ currencyPosition }}";

    const yearSlider = document.getElementById('renewalYears');
    const yearValueDisplay = document.getElementById('yearValue');
    const domainValue = "{{ domain.name }}"; // Get domain from Twig directly
    const yearInput = document.getElementById('renewalYears');
    const priceDisplay = document.getElementById('domainPriceDisplay');
    const priceValue = document.getElementById('domainPrice');
    
    // Display year value from slider
    yearSlider.addEventListener('input', function() {
        yearValueDisplay.textContent = `${yearSlider.value} Year${yearSlider.value > 1 ? 's' : ''}`;
        updatePrice(); // Call updatePrice() directly when slider moves
    });
    
    function getDomainPrice(domain, years, registrarId) {
        const currency = "{{ currency }}";
        const apiUrl = `/dapi/domain/price?domain_name=${encodeURIComponent(domain)}&date_add=${years * 12}&command=renew&registrar_id=${encodeURIComponent(registrarId)}&currency=${encodeURIComponent(currency)}`;

        return fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                // If the response is a raw number (e.g., 0.5), wrap it in an object
                if (typeof data === "number") {
                    data = { price: data };
                }

                if (!data || typeof data !== "object" || !("price" in data)) {
                    console.error("Invalid API response structure:", data);
                    return Promise.reject("Invalid API response structure");
                }

                // Convert price to float safely
                const price = parseFloat(data.price);
                if (isNaN(price)) {
                    console.error("Invalid price received:", data.price);
                    return Promise.reject("Invalid price received");
                }

                return { price, type: data.type || "regular" };
            })
            .catch(error => {
                console.error("Error fetching domain price:", error);
                return Promise.reject("Error fetching domain price");
            });
    }

    function formatPrice(price) {
        switch(window.currencyPosition) {
            case 'before':
                return `${"{{ currency }}"} ${price.toFixed(2)}`;
            case 'after':
                return `${price.toFixed(2)} ${"{{ currency }}"} `;
            default:
                return price.toFixed(2);
        }
    }

    function updatePrice() {
        const domainValue = "{{ domain.name }}";
        const registrarId = document.getElementById('registrarDropdown')?.value || "";
        const years = parseInt(document.getElementById('renewalYears')?.value, 10) || 1;

        if (domainValue) {
            getDomainPrice(domainValue, years, registrarId).then(({ price, type }) => {
                if (isNaN(price)) {
                    console.error("Invalid price received:", price);
                    priceValue.innerText = formatPrice(0.00);
                    return;
                }

                // Multiply price by years
                const totalPrice = price * years;

                priceValue.innerText = formatPrice(totalPrice);
                priceDisplay.style.display = 'block';

                // Remove existing color classes
                priceValue.classList.remove('text-red', 'text-green', 'text-blue');

                // Apply appropriate colors based on type
                if (type === "promotion") {
                    priceValue.classList.add('text-green'); // Mark as promotion
                    priceDisplay.title = "Promotional Price";
                } else if (type === "premium") {
                    priceValue.classList.add('text-red'); // Mark as premium
                    priceDisplay.title = "Premium Price";
                } else {
                    priceValue.classList.add('text-blue'); // Default regular price
                    priceDisplay.title = "Regular Price";
                }

            }).catch(error => {
                console.error("Error fetching price:", error);
                priceDisplay.style.display = 'none';
            });
        } else {
            priceDisplay.style.display = 'none';
        }
    }

    yearInput.addEventListener('input', updatePrice);
    
    updatePrice();
});
</script>
{% endblock %}