@@ -154,8 +154,8 @@ function calculateTotals() {
154154 const totalConvertedUSD = totalUSD * USD_TO_UYU
155155
156156 // Actualizamos los totales en el DOM
157- document . querySelector ( '.usd-total' ) . textContent = `USD ${ totalUSD }
158- document . querySelector ( '.uyu-total' ) . textContent = `UYU ${ totalUYU }
157+ document . querySelectorAll ( '.usd-total' ) . forEach ( ( element ) => { element . textContent = `USD ${ totalUSD } } )
158+ document . querySelectorAll ( '.uyu-total' ) . forEach ( ( element ) => { element . textContent = `UYU ${ totalUYU } } )
159159
160160 // Calculamos el costo de envío y actualizamos la visualización
161161 calculateShippingCost ( totalConvertedUSD , totalUYU )
@@ -193,7 +193,7 @@ function calculateShippingCost(totalConvertedUSD, totalUYU) {
193193 const grandTotal = totalConvertedUSD + totalUYU + shippingCost
194194
195195 // Actualizamos el DOM con el grandTotal final
196- document . querySelector ( '.grand-total' ) . textContent = `UYU ${ grandTotal . toFixed ( 0 ) }
196+ document . querySelectorAll ( '.grand-total' ) . forEach ( ( element ) => { element . textContent = `UYU ${ grandTotal . toFixed ( 0 ) } } )
197197}
198198
199199// Función para separar la moneda del valor numérico
@@ -217,7 +217,13 @@ document.getElementById('pay-button').addEventListener('click', function () {
217217 text : 'Agrega productos al carrito antes de continuar.'
218218 } )
219219 } else {
220- // Si hay productos, mostramos una alerta con dos opciones
220+
221+ // Verificamos que los campos de pago son válidos
222+ if ( ! validatePaymentFields ( ) ) {
223+ return // si los campos no son válidos, no continuamos la ejecución
224+ }
225+
226+ // Si hay productos y los campos de pago son válidos, mostramos una alerta con dos opciones
221227 Swal . fire ( {
222228 title : 'Confirmar Pago' ,
223229 text : '¿Estás seguro que deseas proceder con el pago?' ,
@@ -358,3 +364,108 @@ function validateAddressAndShipping() {
358364
359365 return true
360366}
367+
368+ // Función para manejar el cambio de los campos de método de pago
369+ document . querySelectorAll ( 'input[name="payment-method"]' ) . forEach ( ( radioButton ) => {
370+ radioButton . addEventListener ( "change" , function ( ) {
371+ const creditCardFields = document . getElementById ( "creditCardFields" )
372+ const bankTransferFields = document . getElementById ( "bankTransferFields" )
373+
374+ if ( this . value === "credit-card" ) {
375+ creditCardFields . style . display = "block"
376+ bankTransferFields . style . display = "none"
377+ } else if ( this . value === "bank-transfer" ) {
378+ creditCardFields . style . display = "none"
379+ bankTransferFields . style . display = "block"
380+ }
381+ } )
382+ } )
383+
384+ // Función para validar los campos de pago
385+ function validatePaymentFields ( ) {
386+ const paymentMethod = document . querySelector ( 'input[name="payment-method"]:checked' ) . value
387+
388+ if ( paymentMethod === 'credit-card' ) {
389+ // Validación para tarjeta de crédito
390+ const cardNumber = document . getElementById ( 'cardNumber' ) . value . trim ( )
391+ const cardName = document . getElementById ( 'cardName' ) . value . trim ( )
392+ const cardExpiry = document . getElementById ( 'cardExpiry' ) . value . trim ( )
393+ const cardCVC = document . getElementById ( 'cardCVC' ) . value . trim ( )
394+
395+ if ( ! cardNumber || ! cardName || ! cardExpiry || ! cardCVC ) {
396+ Swal . fire ( {
397+ icon : 'error' ,
398+ title : 'Campos incompletos' ,
399+ text : 'Por favor completa todos los campos de tarjeta de crédito.'
400+ } )
401+ return false
402+ }
403+
404+ // Validamos el formato de tarjeta
405+ if ( ! / ^ \d { 16 } $ / . test ( cardNumber ) ) {
406+ Swal . fire ( {
407+ icon : 'error' ,
408+ title : 'Número de tarjeta inválido' ,
409+ text : 'El número de tarjeta debe tener 16 dígitos.'
410+ } )
411+ return false
412+ }
413+
414+ // Validamos fecha de expiración (simplemente comprueba el formato MM/AA)
415+ if ( ! / ^ \d { 2 } \/ \d { 2 } $ / . test ( cardExpiry ) ) {
416+ Swal . fire ( {
417+ icon : 'error' ,
418+ title : 'Fecha de expiración inválida' ,
419+ text : 'La fecha de expiración debe tener el formato MM/AA.'
420+ } )
421+ return false
422+ }
423+
424+ // Validamos CVC
425+ if ( ! / ^ \d { 3 } $ / . test ( cardCVC ) ) {
426+ Swal . fire ( {
427+ icon : 'error' ,
428+ title : 'CVC inválido' ,
429+ text : 'El código CVC debe tener 3 dígitos.'
430+ } )
431+ return false
432+ }
433+ } else if ( paymentMethod === 'bank-transfer' ) {
434+ // Validación para transferencia bancaria
435+ const bankName = document . getElementById ( 'bankName' ) . value . trim ( )
436+ const accountNumber = document . getElementById ( 'accountNumber' ) . value . trim ( )
437+ const swiftCode = document . getElementById ( 'swiftCode' ) . value . trim ( )
438+
439+ if ( ! bankName || ! accountNumber || ! swiftCode ) {
440+ Swal . fire ( {
441+ icon : 'error' ,
442+ title : 'Campos incompletos' ,
443+ text : 'Por favor completa todos los campos de transferencia bancaria.'
444+ } )
445+ return false
446+ }
447+
448+ // Validamos el formato de la cuenta bancaria
449+ if ( ! / ^ \d + $ / . test ( accountNumber ) ) {
450+ Swal . fire ( {
451+ icon : 'error' ,
452+ title : 'Número de cuenta inválido' ,
453+ text : 'El número de cuenta debe ser numérico.'
454+ } )
455+ return false
456+ }
457+
458+ // Validamos el formato SWIFT
459+ if ( ! / ^ [ A - Z a - z 0 - 9 ] { 8 , 11 } $ / . test ( swiftCode ) ) {
460+ Swal . fire ( {
461+ icon : 'error' ,
462+ title : 'Código SWIFT inválido' ,
463+ text : 'El código SWIFT debe tener entre 8 y 11 caracteres alfanuméricos.'
464+ } )
465+ return false
466+ }
467+ }
468+
469+ return true // Si todos los campos son válidos
470+ }
471+
0 commit comments