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

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

{% block title %}{{ __('Request Domain Transfer') }}{% 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">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Request Domain Transfer') }}
                </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">
                        <form id="domainTransferForm" action="/transfer/request" method="post">
                        {{ csrf.field | raw }}
                            <div class="mb-3">
                                <label for="domainName" class="form-label required">{{ __('Domain Name') }}</label>
                                <input type="text" class="form-control mb-2" placeholder="example.com" name="domainName" id="domainName" required="required" autocapitalize="none">
                            </div>
                            
                            {% if registrars and not registrar %}
                                <div class="form-group mb-3">
                                    <label for="registrarDropdown" class="form-label required">{{ __('Gaining Registrar') }}</label>
                                    <select id="registrarDropdown" name="registrar" class="form-select">
                                        {% for registrar in registrars %}
                                            <option value="{{ registrar.id }}">{{ registrar.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endif %}
                            
                            <!-- AuthInfo -->
                            <div class="mb-3">
                                <label for="authInfo" class="form-label required">{{ __('Auth Info') }}</label>
                                <input type="text" class="form-control" id="authInfo" name="authInfo" required>
                            </div>

                            <!-- Slider for years -->
                            <div class="mb-3">
                                <label for="transferYears" class="form-label">{{ __('Transfer And Renew') }}</label>
                                <input type="range" class="form-range" min="1" max="10" step="1" id="transferYears" name="transferYears" value="1">
                                <span id="yearValue">1 Year</span>
                            </div>
                            
                            <!-- Placeholder for displaying domain price -->
                            <div class="mb-3" id="domainPriceDisplay" style="display:none;">
                                <strong>{{ __('Estimated Price') }}: </strong><span id="domainPrice">{{ currency }} 0.00</span>
                            </div>

                            <div class="mb-3">
                              <label for="token" class="form-label">{{ __('Allocation Token') }}</label>
                              <input type="text" class="form-control" placeholder="{{ __('Allocation token') }}" name="token" autocapitalize="none">
                            </div>

                    </div>
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Request Transfer') }}</button>
                    </div>
                  </div>
                </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener("DOMContentLoaded", function() {

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

    const yearSlider = document.getElementById('transferYears');
    const yearValueDisplay = document.getElementById('yearValue');
    const domainInput = document.getElementById('domainName');
    const yearInput = document.getElementById('transferYears');
    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=transfer&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 = document.getElementById('domainName')?.value.trim() || "";
        const registrarId = document.getElementById('registrarDropdown')?.value || "";
        const years = parseInt(document.getElementById('transferYears')?.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';
        }
    }

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