crm_ecosplay/templates/order/payment_processing.html.twig

{% extends 'base.html.twig' %}

{% block title %}Verification du paiement - Association E-Cosplay{% endblock %}

{% block body %}
<main class="max-w-2xl mx-auto px-4 py-16">
    <div class="glass p-10 text-center">

        {# Loader #}
        <div id="payment-loader">
            <div class="mx-auto mb-6 w-20 h-20 bg-indigo-500/20 flex items-center justify-center animate-pulse">
                <svg class="w-10 h-10 text-indigo-600 animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </div>

            <h1 class="text-2xl font-bold heading-page mb-3">Verification du paiement</h1>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Votre paiement est en cours de verification. Merci de patienter...
            </p>

            <div class="glass p-4 text-xs mb-6">
                <div class="flex items-center justify-between">
                    <span class="font-bold uppercase tracking-widest text-gray-400">Avis</span>
                    <span class="font-mono font-bold">{{ advert.orderNumber.numOrder }}</span>
                </div>
                <div class="flex items-center justify-between mt-2">
                    <span class="font-bold uppercase tracking-widest text-gray-400">Montant</span>
                    <span class="font-mono font-bold">{{ tva_enabled ? advert.totalTtc : advert.totalHt }} &euro;</span>
                </div>
            </div>

            <p id="attempt-counter" class="text-[10px] text-gray-400">Verification 1 / 10...</p>
        </div>

        {# Message de succes (cache par defaut) #}
        <div id="payment-success" class="hidden">
            <div class="mx-auto mb-6 w-20 h-20 bg-green-500/20 flex items-center justify-center">
                <svg class="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold heading-page mb-3">Paiement confirme !</h1>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Votre paiement a ete accepte. Un email de confirmation vous a ete envoye.<br>
                Votre facture vous sera envoyee prochainement.
            </p>
        </div>

        {# Message timeout (cache par defaut) #}
        <div id="payment-timeout" class="hidden">
            <div class="mx-auto mb-6 w-20 h-20 bg-yellow-500/20 flex items-center justify-center">
                <svg class="w-10 h-10 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold heading-page mb-3">Traitement supplementaire requis</h1>
            <p class="text-sm text-gray-600 leading-relaxed mb-4">
                Votre paiement necessite un delai de traitement supplementaire.<br>
                Une fois le paiement valide, la facture sera envoyee a votre adresse email.<br>
                Vous pouvez fermer cette page en toute securite.
            </p>
            <div class="glass p-4 text-xs text-left mb-4">
                <p class="font-bold uppercase tracking-widest text-[10px] text-gray-400 mb-2">Delais de traitement estimés</p>
                {% if method == 'sepa' %}
                    <p class="text-gray-600"><strong>Prelevement SEPA :</strong> 2 a 7 jours ouvres</p>
                {% elseif method == 'paypal' %}
                    <p class="text-gray-600"><strong>PayPal :</strong> quelques minutes a quelques heures</p>
                {% else %}
                    <p class="text-gray-600"><strong>Carte bancaire :</strong> quelques secondes a quelques minutes</p>
                {% endif %}
                <p class="text-gray-400 mt-2">Virement bancaire : 24h a 72h ouvrees | Cheque : 48h a 72h apres reception</p>
            </div>
        </div>

        <p class="text-[10px] text-gray-400 uppercase tracking-widest mt-6">
            Une question ? <a href="mailto:client@e-cosplay.fr" class="text-[#fabf04] hover:underline">client@e-cosplay.fr</a>
        </p>
    </div>
</main>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script nonce="{{ csp_nonce('script') }}">
    (function() {
        var checkUrl = '{{ checkUrl|e("js") }}';
        var maxAttempts = 10;
        var interval = 18000; // 18s entre chaque check (~3 minutes total)
        var attempt = 0;

        var loader = document.getElementById('payment-loader');
        var success = document.getElementById('payment-success');
        var timeout = document.getElementById('payment-timeout');
        var counter = document.getElementById('attempt-counter');

        function check() {
            attempt++;
            if (counter) counter.textContent = 'Verification ' + attempt + ' / ' + maxAttempts + '...';

            fetch(checkUrl)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.accepted) {
                        loader.classList.add('hidden');
                        success.classList.remove('hidden');
                        return;
                    }
                    if (attempt >= maxAttempts) {
                        loader.classList.add('hidden');
                        timeout.classList.remove('hidden');
                        return;
                    }
                    setTimeout(check, interval);
                })
                .catch(function() {
                    if (attempt >= maxAttempts) {
                        loader.classList.add('hidden');
                        timeout.classList.remove('hidden');
                        return;
                    }
                    setTimeout(check, interval);
                });
        }

        setTimeout(check, 3000); // Premier check apres 3s
    })();
    </script>
{% endblock %}