var payment = (function($, window) { return { payButton: null, formData: null, /** * API à appeler après un paiement réussi */ paymentSuccessfulPage: 'payment/success', videoPage: 'cours-en-ligne-achat/', distancePage: 'atelier-a-distance/', /** * Initialisation des fonctionnalités de paiement */ init: function() { this.payButton = $('#payButton'); // Adaptez le sélecteur au bouton correct // Gestion de l'événement du checkbox d'accord $('#checkCondition').on('click', (e) => this.handleOnClickAgreementCheckboxEvent(e)); this.handleOnClickAgreementCheckboxEvent(); // Lancer à l'initialisation // Validation champ par champ avec regex $('#civilite').on('input', (e) => this.validateField(e, /^[a-zA-Zéèêàç\s]+$/, 'Veuillez sélectionner une civilité.')); $('#name').on('input', (e) => this.validateField(e, /^[A-Za-z\s\-]{2,50}$/, 'Nom invalide (2-50 caractères).')); $('#fname').on('input', (e) => this.validateField(e, /^[A-Za-z\s\-]{2,50}$/, 'Prénom invalide (2-50 caractères).')); $('#email').on('input', (e) => this.validateField(e, /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/, 'Email invalide.')); $('#address').on('input', (e) => this.validateField(e, /^.{5,100}$/, 'Adresse invalide (5-100 caractères).')); $('#postal').on('input', (e) => this.validateField(e, /^\d{5}$/, 'Code postal invalide (5 chiffres).')); $('#ville').on('input', (e) => this.validateField(e, /^[A-Za-z\s\-]{2,50}$/, 'Ville invalide (2-50 caractères).')); $('#telephone').on('input', (e) => this.validateField(e, /^\+?\d{7,15}$/, 'Numéro de téléphone invalide.')); // Gestion du bouton "PAYER" this.payButton.on('click', (e) => this.handleOnClickPayButtonEvent(e)); }, /** * Gestion de l'événement du checkbox d'accord */ handleOnClickAgreementCheckboxEvent: function(e) { const isChecked = $('#checkCondition').is(':checked'); const formSection = $('.cpay-section'); // Mise à jour de la section // if (isChecked) { // this.payButton.prop('disabled', false); // Réactiver avec l'attribut // this.payButton.removeClass('disabled'); // Supprimer la classe CSS // formSection.removeClass('disabled'); // Réactiver la section // } else { // // this.payButton.prop('disabled', true); // Désactiver avec l'attribut // // this.payButton.addClass('disabled'); // Ajouter la classe CSS // formSection.addClass('disabled'); // Désactiver la section // } }, /** * Validation champ par champ avec regex */ validateField: function(e, regex, errorMessage) { const field = $(e.target); const value = field.val().trim(); const errorSpan = field.closest('.form-row').find('error'); if (!regex.test(value)) { errorSpan.text(errorMessage); field.addClass('has-error'); } else { errorSpan.text(''); field.removeClass('has-error'); } }, /** * Gestion de l'événement du bouton "PAYER" */ handleOnClickPayButtonEvent: async function(e) { // this.payButton.prop('disabled', true); // Préparer formData this.formData = [...new FormData($('#beneficiaryForm')[0])].reduce((obj, [key, val]) => { obj[key] = val.trim() || null; return obj; }, {}); // Validation finale avant soumission // if (!this.preValidation()) return this.payButton.prop('disabled', false); // Soumission try { const response = await $.ajax({ url: 'payment/send_payment', type: 'POST', data: this.formData, dataType: 'json', // Ajout pour assurer le format JSON de la réponse success: function (data) { if (data.status === 'success') { // Deuxième appel AJAX pour l'authentification window.location.href = data.redirect; } else { console.error("Erreur lors de la récupération des informations :", data.message); } }, error: function (xhr, status, error) { console.error("Erreur lors de la requête AJAX :", error); } }); } catch (error) { console.error('Erreur AJAX:', error); } }, /** * Validation finale avant soumission */ preValidation: function() { let isValid = true; $('#beneficiaryForm input, #beneficiaryForm select').each((index, element) => { const field = $(element); if (field.hasClass('has-error') || !field.val().trim()) { field.closest('.form-group').find('.error').text('Ce champ est obligatoire.'); isValid = false; } }); return isValid; }, }; })(jQuery, window); $(document).ready(() => { payment.init(); });