add assets

assets/bankily-bpay.js

@@ -0,0 +1,435 @@
+/**
+ * Script JavaScript pour le frontend B-PAY Bankily
+ * Fichier: assets/bankily-bpay.js
+ * Version: 1.0.0
+ */
+
+jQuery(document).ready(function($) {
+    'use strict';
+    
+    // Variables globales
+    var bankily_form = 'form.checkout, form#order_review';
+    var bankily_gateway = '#payment_method_bankily_bpay';
+    
+    // Initialisation
+    initializeBankilyCheckout();
+    
+    function initializeBankilyCheckout() {
+        // Gestion de la sélection de la méthode de paiement
+        $(document).on('change', 'input[name="payment_method"]', function() {
+            toggleBankilyFields();
+            if ($(this).val() === 'bankily_bpay') {
+                // Focus sur le premier champ et pré-remplir en mode test
+                setTimeout(function() {
+                    $('#bankily_phone').focus();
+                    if (bankily_bpay_params.testmode === '1') {
+                        fillTestData();
+                    }
+                }, 100);
+            }
+        });
+        
+        // Validation en temps réel
+        setupRealtimeValidation();
+        
+        // Formatage des champs
+        setupFieldFormatting();
+        
+        // Gestion de la soumission
+        $(bankily_form).on('checkout_place_order_bankily_bpay', function() {
+            return validateBankilyForm();
+        });
+        
+        // Stylisation CSS
+        addBankilyStyles();
+        
+        // État initial
+        toggleBankilyFields();
+    }
+    
+    function setupRealtimeValidation() {
+        // Validation du numéro de téléphone
+        $(document).on('input blur', '#bankily_phone', function() {
+            validatePhoneField($(this));
+        });
+        
+        // Validation du code PIN
+        $(document).on('input blur', '#bankily_passcode', function() {
+            validatePasscodeField($(this));
+        });
+    }
+    
+    function validatePhoneField($field) {
+        var phone = $field.val().replace(/\D/g, ''); // Supprimer tous les caractères non numériques
+        var isValid = /^[0-9]{8}$/.test(phone);
+        
+        // Mettre à jour la valeur avec uniquement les chiffres
+        $field.val(phone);
+        
+        // Validation visuelle
+        updateFieldValidation($field, isValid, phone.length > 0, 
+            'Format requis: 8 chiffres (ex: 22123456)');
+        
+        // Limiter à 8 chiffres
+        if (phone.length > 8) {
+            $field.val(phone.substring(0, 8));
+        }
+    }
+    
+    function validatePasscodeField($field) {
+        var passcode = $field.val();
+        var isValid = passcode.length >= 4 && passcode.length <= 6;
+        
+        updateFieldValidation($field, isValid, passcode.length > 0,
+            'Le code PIN doit contenir entre 4 et 6 caractères');
+    }
+    
+    function updateFieldValidation($field, isValid, hasContent, errorMessage) {
+        $field.removeClass('valid invalid');
+        $field.next('.bankily-field-error').remove();
+        
+        if (hasContent) {
+            if (isValid) {
+                $field.addClass('valid');
+            } else {
+                $field.addClass('invalid');
+                $field.after('<span class="bankily-field-error">' + errorMessage + '</span>');
+            }
+        }
+    }
+    
+    function setupFieldFormatting() {
+        // Permettre uniquement les chiffres pour le téléphone
+        $(document).on('keypress', '#bankily_phone', function(e) {
+            // Permettre uniquement les chiffres, backspace, delete, tab, escape, enter
+            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
+                // Permettre Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
+                (e.keyCode === 65 && e.ctrlKey === true) ||
+                (e.keyCode === 67 && e.ctrlKey === true) ||
+                (e.keyCode === 86 && e.ctrlKey === true) ||
+                (e.keyCode === 88 && e.ctrlKey === true)) {
+                return;
+            }
+            
+            // S'assurer que c'est un chiffre
+            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
+                e.preventDefault();
+            }
+        });
+        
+        // Permettre uniquement les chiffres pour le code PIN
+        $(document).on('keypress', '#bankily_passcode', function(e) {
+            if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
+                (e.keyCode === 65 && e.ctrlKey === true) ||
+                (e.keyCode === 67 && e.ctrlKey === true) ||
+                (e.keyCode === 86 && e.ctrlKey === true) ||
+                (e.keyCode === 88 && e.ctrlKey === true)) {
+                return;
+            }
+            
+            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
+                e.preventDefault();
+            }
+        });
+    }
+    
+    function validateBankilyForm() {
+        if (!$(bankily_gateway).is(':checked')) {
+            return true; // Pas notre méthode de paiement
+        }
+        
+        var isValid = true;
+        var $phone = $('#bankily_phone');
+        var $passcode = $('#bankily_passcode');
+        
+        // Supprimer les anciens messages d'erreur
+        $('.bankily-checkout-error').remove();
+        
+        // Validation du téléphone
+        var phone = $phone.val().replace(/\D/g, '');
+        if (!phone || !/^[0-9]{8}$/.test(phone)) {
+            showCheckoutError($phone, 'Veuillez entrer un numéro de téléphone valide (8 chiffres)');
+            isValid = false;
+        }
+        
+        // Validation du code PIN
+        var passcode = $passcode.val();
+        if (!passcode || passcode.length < 4 || passcode.length > 6) {
+            showCheckoutError($passcode, 'Veuillez entrer votre code PIN B-PAY (4 à 6 chiffres)');
+            isValid = false;
+        }
+        
+        if (!isValid) {
+            // Faire défiler vers le premier champ avec erreur
+            $('html, body').animate({
+                scrollTop: $('.payment_method_bankily_bpay').offset().top - 100
+            }, 500);
+            
+            // Focus sur le premier champ invalide
+            setTimeout(function() {
+                $('.payment_method_bankily_bpay .invalid').first().focus();
+            }, 600);
+        }
+        
+        return isValid;
+    }
+    
+    function showCheckoutError($field, message) {
+        $field.addClass('invalid');
+        if (!$field.next('.bankily-checkout-error').length) {
+            $field.after('<div class="bankily-checkout-error">' + message + '</div>');
+        }
+    }
+    
+    function toggleBankilyFields() {
+        if ($(bankily_gateway).is(':checked')) {
+            $('.payment_method_bankily_bpay').slideDown(300);
+        } else {
+            $('.payment_method_bankily_bpay').slideUp(300);
+        }
+    }
+    
+    function fillTestData() {
+        if (bankily_bpay_params.testmode === '1') {
+            $('#bankily_phone').val('22123456');
+            $('#bankily_passcode').val('1234');
+        }
+    }
+    
+    function addBankilyStyles() {
+        var styles = `
+            <style id="bankily-bpay-frontend-styles">
+                .payment_method_bankily_bpay .form-row input.valid {
+                    border-color: #28a745 !important;
+                    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
+                }
+                
+                .payment_method_bankily_bpay .form-row input.invalid {
+                    border-color: #dc3545 !important;
+                    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+                }
+                
+                .bankily-field-error,
+                .bankily-checkout-error {
+                    color: #dc3545;
+                    font-size: 12px;
+                    margin-top: 5px;
+                    display: block;
+                    animation: slideDown 0.3s ease;
+                }
+                
+                @keyframes slideDown {
+                    from {
+                        opacity: 0;
+                        transform: translateY(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+                
+                .payment_method_bankily_bpay .form-row {
+                    margin-bottom: 15px;
+                }
+                
+                .payment_method_bankily_bpay label {
+                    font-weight: 600;
+                    margin-bottom: 5px;
+                    display: block;
+                }
+                
+                .payment_method_bankily_bpay input[type="tel"],
+                .payment_method_bankily_bpay input[type="password"] {
+                    width: 100%;
+                    padding: 10px 12px;
+                    border: 2px solid #ddd;
+                    border-radius: 4px;
+                    font-size: 14px;
+                    transition: border-color 0.3s, box-shadow 0.3s;
+                    font-family: monospace;
+                }
+                
+                .payment_method_bankily_bpay input[type="tel"]:focus,
+                .payment_method_bankily_bpay input[type="password"]:focus {
+                    outline: none;
+                    border-color: #007cba;
+                    box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
+                }
+                
+                .payment_method_bankily_bpay small {
+                    color: #666;
+                    font-size: 12px;
+                    margin-top: 3px;
+                    display: block;
+                }
+                
+                .bankily-test-notice {
+                    background: #fff3cd !important;
+                    border: 1px solid #ffeaa7 !important;
+                    color: #856404 !important;
+                    padding: 10px !important;
+                    border-radius: 4px !important;
+                    margin-bottom: 15px !important;
+                    border-left: 4px solid #ffc107 !important;
+                }
+                
+                #wc-bankily_bpay-form {
+                    background: #f9f9f9;
+                    padding: 20px;
+                    border-radius: 5px;
+                    margin-top: 10px;
+                    border: 1px solid #e1e1e1;
+                }
+                
+                /* Animation de chargement */
+                .payment_method_bankily_bpay.processing::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(255, 255, 255, 0.8);
+                    z-index: 10;
+                }
+                
+                .payment_method_bankily_bpay.processing::before {
+                    content: '⏳ Traitement en cours...';
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    z-index: 11;
+                    background: #007cba;
+                    color: white;
+                    padding: 8px 15px;
+                    border-radius: 4px;
+                    font-size: 14px;
+                }
+                
+                /* Responsive */
+                @media (max-width: 768px) {
+                    #wc-bankily_bpay-form {
+                        padding: 15px;
+                    }
+                    
+                    .payment_method_bankily_bpay input[type="tel"],
+                    .payment_method_bankily_bpay input[type="password"] {
+                        padding: 12px 14px;
+                        font-size: 16px; /* Évite le zoom sur mobile */
+                    }
+                }
+            </style>
+        `;
+        
+        if (!$('#bankily-bpay-frontend-styles').length) {
+            $('head').append(styles);
+        }
+    }
+    
+    // Gestion du chargement lors de la soumission
+    $(document).on('submit', bankily_form, function() {
+        if ($(bankily_gateway).is(':checked')) {
+            $('.payment_method_bankily_bpay').addClass('processing');
+        }
+    });
+    
+    // Nettoyer l'état de chargement si la soumission échoue
+    $(document).on('checkout_error', function() {
+        $('.payment_method_bankily_bpay').removeClass('processing');
+    });
+    
+    // Écouter les changements de checkout (pour WooCommerce AJAX)
+    $(document).on('updated_checkout', function() {
+        toggleBankilyFields();
+        
+        // Réappliquer la validation sur les champs existants
+        setTimeout(function() {
+            $('#bankily_phone').trigger('blur');
+            $('#bankily_passcode').trigger('blur');
+        }, 100);
+    });
+    
+    // Amélioration UX: Auto-complétion du préfixe
+    $(document).on('focus', '#bankily_phone', function() {
+        var $this = $(this);
+        if ($this.val() === '' && bankily_bpay_params.testmode !== '1') {
+            // Suggestion visuelle pour le format attendu
+            $this.attr('placeholder', '22XXXXXX');
+        }
+    });
+    
+    $(document).on('blur', '#bankily_phone', function() {
+        $(this).attr('placeholder', 'Exemple: 22123456');
+    });
+    
+    // Gestion des raccourcis clavier
+    $(document).on('keydown', '#bankily_phone, #bankily_passcode', function(e) {
+        // Enter pour aller au champ suivant
+        if (e.keyCode === 13) {
+            e.preventDefault();
+            var $current = $(this);
+            var $next = $current.closest('.form-row').next('.form-row').find('input');
+            
+            if ($next.length) {
+                $next.focus();
+            } else {
+                // Si c'est le dernier champ, déclencher la soumission
+                $(bankily_form).find('.place-order').click();
+            }
+        }
+    });
+    
+    // Validation immédiate lors du collage
+    $(document).on('paste', '#bankily_phone', function() {
+        var $this = $(this);
+        setTimeout(function() {
+            validatePhoneField($this);
+        }, 10);
+    });
+    
+    // Messages d'aide contextuelle
+    $(document).on('focus', '#bankily_phone', function() {
+        if (!$(this).next('.bankily-help').length) {
+            $(this).after('<small class="bankily-help" style="color: #007cba;">💡 Saisissez votre numéro sans l\'indicatif (+222)</small>');
+        }
+    });
+    
+    $(document).on('blur', '#bankily_phone', function() {
+        $(this).next('.bankily-help').fadeOut(300, function() {
+            $(this).remove();
+        });
+    });
+    
+    $(document).on('focus', '#bankily_passcode', function() {
+        if (!$(this).next('.bankily-help').length) {
+            $(this).after('<small class="bankily-help" style="color: #007cba;">🔐 Votre code PIN personnel B-PAY</small>');
+        }
+    });
+    
+    $(document).on('blur', '#bankily_passcode', function() {
+        $(this).next('.bankily-help').fadeOut(300, function() {
+            $(this).remove();
+        });
+    });
+    
+    // Fonctions utilitaires
+    function logDebug(message, data) {
+        if (typeof console !== 'undefined' && console.log && bankily_bpay_params.testmode === '1') {
+            console.log('[B-PAY Frontend] ' + message, data || '');
+        }
+    }
+    
+    // Log d'initialisation
+    logDebug('Script B-PAY initialisé', {
+        testmode: bankily_bpay_params.testmode,
+        gateway_selector: bankily_gateway
+    });
+    
+    // Nettoyage lors du changement de page
+    $(window).on('beforeunload', function() {
+        $('.payment_method_bankily_bpay').removeClass('processing');
+        $('.bankily-field-error, .bankily-checkout-error, .bankily-help').remove();
+    });
+});