e-cosplay/assets/class/PaymentPage.js

export class PaymentVirement extends HTMLButtonElement{
    connectedCallback(){
        let element = this;
        element.addEventListener('click', function(e){
            e.preventDefault();
            let displayModal = document.createElement('div');
            displayModal.classList.add('modal-payment');
            let iframeContainer = document.createElement('div');
            iframeContainer.style.height = "fit-content";

            iframeContainer.classList.add(
                'iframe-container',
                'max-w-md',
                'mx-auto',
                'bg-white',
                'dark:bg-gray-900',
                'rounded-xl',
                'shadow-md',
                'overflow-hidden',
                'p-6',
                'space-y-4'
            );

// Message d'invitation au virement
            let infoMsg = document.createElement('div');
            infoMsg.className = 'text-xl text-white-700 dark:text-white-300 mb-2';
            infoMsg.textContent = "Merci d'effectuer le virement sur ce compte, en notant la référence de l'avis de paiement ! Dés réception du règlement une facture vous sera envoyée";
            iframeContainer.appendChild(infoMsg);

            let ibanLabel = document.createElement('div');
            ibanLabel.className = 'text-gray-700 dark:text-gray-300 text-base font-semibold';
            ibanLabel.textContent = 'IBAN';

            let ibanValue = document.createElement('div');
            ibanValue.className = 'text-gray-900 dark:text-white text-lg font-mono break-all';
            ibanValue.textContent = 'FR76 1020 6006 7198 4797 7981 061';

            let bicLabel = document.createElement('div');
            bicLabel.className = 'text-gray-700 dark:text-gray-300 text-base font-semibold';
            bicLabel.textContent = 'BIC';

            let bicValue = document.createElement('div');
            bicValue.className = 'text-gray-900 dark:text-white text-lg font-mono';
            bicValue.textContent = 'AGRIFRPP802';

            let btn = document.createElement('a');
            btn.setAttribute('href', '/paiement?id='+element.getAttribute('id')+"&type=virement");
            btn.classList = "button bg-green-900 w-full text-center text-white p-2";
            btn.innerText = "Je confirme le paiement par virement bancaire"


            iframeContainer.appendChild(ibanLabel);
            iframeContainer.appendChild(ibanValue);
            iframeContainer.appendChild(bicLabel);
            iframeContainer.appendChild(bicValue);
            iframeContainer.appendChild(btn);

            document.body.appendChild(iframeContainer);


            displayModal.appendChild(iframeContainer);
            document.body.appendChild(displayModal);
        })
    }
}

export class PaymentChaque extends HTMLButtonElement{
    connectedCallback(){
        let element = this;
        element.addEventListener('click', function(e){
            e.preventDefault();
            let displayModal = document.createElement('div');
            displayModal.classList.add('modal-payment');
            let iframeContainer = document.createElement('div');
            iframeContainer.style.height = "fit-content";

            iframeContainer.classList.add(
                'iframe-container',
                'max-w-md',
                'mx-auto',
                'bg-white',
                'dark:bg-gray-900',
                'rounded-xl',
                'shadow-md',
                'overflow-hidden',
                'p-6',
                'space-y-4'
            );

// Message d'invitation au virement
            let infoMsg = document.createElement('div');
            infoMsg.className = 'text-xl text-white-700 dark:text-white-300 mb-2';
            infoMsg.textContent = "Merci d'envoie le chéque à l'adresse suivant en notant la référence de l'avis de paiement aux dos ! Dés réception du chéque et sont incaisement une facture vous sera envoyée";
            iframeContainer.appendChild(infoMsg);

            let ibanLabel = document.createElement('div');
            ibanLabel.className = 'text-gray-700 dark:text-gray-300 text-base font-semibold';
            ibanLabel.textContent = 'Adresse';

            let ibanValue = document.createElement('div');
            ibanValue.className = 'text-gray-900 dark:text-white text-lg font-mono break-all';
            ibanValue.textContent = '27 rue le Sérurier 02100 Saint-Quentin';

            let bicLabel = document.createElement('div');
            bicLabel.className = 'text-gray-700 dark:text-gray-300 text-base font-semibold';
            bicLabel.textContent = 'A l\'ordre de ';

            let bicValue = document.createElement('div');
            bicValue.className = 'text-gray-900 dark:text-white text-lg font-mono';
            bicValue.textContent = 'SARL SITECONSEIL';

            let btn = document.createElement('a');
            btn.setAttribute('href', '/paiement?id='+element.getAttribute('id')+"&type=bank");
            btn.classList = "button bg-green-900 w-full text-center text-white p-2";
            btn.innerText = "Je confirme le paiement par chéque"


            iframeContainer.appendChild(ibanLabel);
            iframeContainer.appendChild(ibanValue);
            iframeContainer.appendChild(bicLabel);
            iframeContainer.appendChild(bicValue);
            iframeContainer.appendChild(btn);

            document.body.appendChild(iframeContainer);


            displayModal.appendChild(iframeContainer);
            document.body.appendChild(displayModal);
        })
    }
}
export class PaymentPage extends HTMLButtonElement{
    connectedCallback(){
        let element = this;
       element.addEventListener('click', function(){
           let banke = document.querySelector('.banke');
           banke.classList.remove('show');
           let displayModal = document.createElement('div');
           displayModal.classList.add('modal-payment');

           let iframeContainer = document.createElement('div');
           iframeContainer.classList.add('iframe-container');

           window.addEventListener('message', function (event) {
               if (event.origin !== 'https://payment.stancer.com') {
                   return;
               }
               if(event.data.status != undefined) {
                   if(event.data.status != "init" && event.data.status != "pending" && event.data.status != "secure-auth-start" && event.data.status != "secure-auth-end") {
                       if (event.data.status == "paid") {
                           displayModal.remove();
                           location.href = "/paiement/complete?id=" + element.getAttribute('id');
                       } else if (event.data.status == "finished") {
                           displayModal.remove();
                           location.href = event.data.url;
                       } else {
                           fetch("/api-interne/intranet/customer/payment/cancel?id="+element.getAttribute('id'))
                           displayModal.remove();
                           banke.classList.add('show');
                       }
                   }
               }
               console.log(event.data);
           });
           fetch("/api-interne/intranet/customer/payment?id="+element.getAttribute('id'))
               .then(r=>r.json())
               .then(r=>{
                   let iframe = document.createElement('iframe');
                   iframe.src = r.url;
                   iframeContainer.appendChild(iframe);

                   window.frame = iframeContainer;
               })
           displayModal.appendChild(iframeContainer);
           document.body.appendChild(displayModal);
       })
    }
}
export class PaymentSepa extends HTMLButtonElement{
    connectedCallback(){
        let element = this;
       element.addEventListener('click', function(){
           let banke = document.querySelector('.banke');
           banke.classList.remove('show');
           let displayModal = document.createElement('div');
           displayModal.classList.add('modal-payment');

           let iframeContainer = document.createElement('div');
           iframeContainer.classList.add('iframe-container');

           window.addEventListener('message', function (event) {
               if (event.origin !== 'https://payment.stancer.com') {
                   return;
               }
               /*if(event.data.status != undefined) {
                   if(event.data.status != "init" && event.data.status != "pending" && event.data.status != "secure-auth-start" && event.data.status != "secure-auth-end") {
                       if (event.data.status == "paid") {
                           displayModal.remove();
                           location.href = "/paiement/complete?id=" + element.getAttribute('id');
                       } else if (event.data.status == "finished") {
                           displayModal.remove();
                           location.href = event.data.url;
                       } else {
                           fetch("/api-interne/intranet/customer/payment/cancel?id="+element.getAttribute('id'))
                           displayModal.remove();
                           banke.classList.add('show');
                       }
                   }
               }*/
               console.log(event.data);
           });
           fetch("/api-interne/intranet/customer/payment?id="+element.getAttribute('id')+"&type=sepa")
               .then(r=>r.json())
               .then(r=>{
                   let iframe = document.createElement('iframe');
                   iframe.src = r.url;
                   iframeContainer.appendChild(iframe);

                   window.frame = iframeContainer;
               })
           displayModal.appendChild(iframeContainer);
           document.body.appendChild(displayModal);
       })
    }
}