fix(feedback-beta): no mostrar éxito si el POST del formulario falla

El handler de envío llamaba a fetch() sin await y sin comprobar
response.ok, con .catch() vacío: el UI mostraba "Gracias" aunque la
petición fallara, así que el feedback público podía no persistir sin
que nadie se enterase. Ahora se encadena la promesa, se exige
response.ok + {ok:true} antes de mostrar éxito y, si falla, se
mantiene la tarjeta abierta con mensaje de error (5 idiomas) y el
botón reactivado para reintentar.

Validado en local con Playwright: caso OK crea exactamente 1 CPT
fea_feedback; caso de fallo de red no crea ninguno y no muestra
éxito.

Refs #192
This commit is contained in:
2026-08-04 09:42:30 -04:00
parent 159080f0c8
commit c5704d7b4a
@@ -151,23 +151,28 @@ function fea_beta_labels(): array {
'es' => ['region'=>'Aviso Beta','intro'=>'Estamos en','help'=>'¿Nos ayudas a mejorar FeAdulta?',
'opinion'=>'Dar mi opinión','collab'=>'Colaborar','dismiss'=>'Cerrar aviso','fbregion'=>'Feedback de la página',
'close'=>'Cerrar','q'=>'¿Se ve bien esta página?','up'=>'Sí, se ve bien','down'=>'No, hay algo mal',
'ph'=>'¿Algo falla o se ve mal? Cuéntanoslo (opcional)','send'=>'Enviar','thanks'=>'¡Gracias por ayudar! 🙏'],
'ph'=>'¿Algo falla o se ve mal? Cuéntanoslo (opcional)','send'=>'Enviar','thanks'=>'¡Gracias por ayudar! 🙏',
'error'=>'No se pudo enviar. Comprueba tu conexión e inténtalo de nuevo.'],
'en' => ['region'=>'Beta notice','intro'=>'We are in','help'=>'Will you help us improve FeAdulta?',
'opinion'=>'Give feedback','collab'=>'Collaborate','dismiss'=>'Close notice','fbregion'=>'Page feedback',
'close'=>'Close','q'=>'Does this page look right?','up'=>'Yes, looks good','down'=>'No, something is wrong',
'ph'=>'Something broken or off? Tell us (optional)','send'=>'Send','thanks'=>'Thanks for helping! 🙏'],
'ph'=>'Something broken or off? Tell us (optional)','send'=>'Send','thanks'=>'Thanks for helping! 🙏',
'error'=>'Could not send. Check your connection and try again.'],
'fr' => ['region'=>'Avis Bêta','intro'=>'Nous sommes en','help'=>'Voulez-vous nous aider à améliorer FeAdulta ?',
'opinion'=>'Donner mon avis','collab'=>'Collaborer','dismiss'=>'Fermer lavis','fbregion'=>'Retour sur la page',
'close'=>'Fermer','q'=>'Cette page saffiche-t-elle bien ?','up'=>'Oui, cest bien','down'=>'Non, il y a un problème',
'ph'=>'Un souci ou un affichage incorrect ? Dites-le-nous (facultatif)','send'=>'Envoyer','thanks'=>'Merci de votre aide ! 🙏'],
'ph'=>'Un souci ou un affichage incorrect ? Dites-le-nous (facultatif)','send'=>'Envoyer','thanks'=>'Merci de votre aide ! 🙏',
'error'=>'Échec de lenvoi. Vérifiez votre connexion et réessayez.'],
'it' => ['region'=>'Avviso Beta','intro'=>'Siamo in','help'=>'Ci aiuti a migliorare FeAdulta?',
'opinion'=>'Dai la tua opinione','collab'=>'Collabora','dismiss'=>'Chiudi avviso','fbregion'=>'Feedback della pagina',
'close'=>'Chiudi','q'=>'Questa pagina si vede bene?','up'=>'Sì, si vede bene','down'=>'No, c’è qualcosa che non va',
'ph'=>'Qualcosa non va o si vede male? Faccelo sapere (facoltativo)','send'=>'Invia','thanks'=>'Grazie per laiuto! 🙏'],
'ph'=>'Qualcosa non va o si vede male? Faccelo sapere (facoltativo)','send'=>'Invia','thanks'=>'Grazie per laiuto! 🙏',
'error'=>'Invio non riuscito. Controlla la connessione e riprova.'],
'pt' => ['region'=>'Aviso Beta','intro'=>'Estamos em','help'=>'Ajuda-nos a melhorar a FeAdulta?',
'opinion'=>'Dar a minha opinião','collab'=>'Colaborar','dismiss'=>'Fechar aviso','fbregion'=>'Feedback da página',
'close'=>'Fechar','q'=>'Esta página vê-se bem?','up'=>'Sim, vê-se bem','down'=>'Não, há algo errado',
'ph'=>'Algo falha ou vê-se mal? Conta-nos (opcional)','send'=>'Enviar','thanks'=>'Obrigado por ajudar! 🙏'],
'ph'=>'Algo falha ou vê-se mal? Conta-nos (opcional)','send'=>'Enviar','thanks'=>'Obrigado por ajudar! 🙏',
'error'=>'Não foi possível enviar. Verifica a ligação e tenta novamente.'],
];
$lang = function_exists('pll_current_language') ? (string) pll_current_language() : 'es';
return $all[$lang] ?? $all['es'];
@@ -211,6 +216,8 @@ add_action('wp_footer', function () {
font:inherit; font-size:.85rem; resize:vertical; min-height:58px; box-sizing:border-box; }
#fea-fb .fea-fb-send { background:#8b1a2e; color:#fff; border:1px solid #8b1a2e; border-radius:8px;
padding:6px 12px; font-size:.85rem; width:100%; cursor:pointer; }
#fea-fb .fea-fb-send:disabled { opacity:.6; cursor:default; }
#fea-fb .fea-fb-error { color:#8b1a2e; font-size:.82rem; margin:0 0 8px; }
#fea-fb .fea-fb-hp { position:absolute; left:-9999px; }
#fea-fb .fea-fb-close { position:absolute; top:4px; right:8px; border:0; background:none; font-size:1rem; cursor:pointer; padding:2px 4px; line-height:1; }
@media (max-width:600px){ #fea-fb{ right:10px; left:10px; max-width:none; } #fea-beta-bar{ font-size:.8rem; } }
@@ -234,6 +241,7 @@ add_action('wp_footer', function () {
<div class="fea-fb-more" hidden>
<input type="text" class="fea-fb-hp" tabindex="-1" autocomplete="off" aria-hidden="true" placeholder="No rellenar">
<textarea placeholder="<?php echo esc_attr($t['ph']); ?>"></textarea>
<p class="fea-fb-error" hidden role="alert"><?php echo esc_html($t['error']); ?></p>
<button type="button" class="fea-fb-send"><?php echo esc_html($t['send']); ?></button>
</div>
<div class="fea-fb-thanks" hidden><?php echo esc_html($t['thanks']); ?></div>
@@ -252,6 +260,8 @@ add_action('wp_footer', function () {
var moreEl = box.querySelector('.fea-fb-more');
var votes = box.querySelectorAll('.fea-fb-vote');
var thanks = box.querySelector('.fea-fb-thanks');
var errorEl = box.querySelector('.fea-fb-error');
var sendBtn = box.querySelector('.fea-fb-send');
// Mostrar la barra salvo que el usuario la haya descartado antes.
try { if (!localStorage.getItem('fea_beta_bar_off')) bar.classList.remove('hidden'); }
@@ -273,17 +283,31 @@ add_action('wp_footer', function () {
moreEl.hidden = false;
});});
box.querySelector('.fea-fb-send').addEventListener('click', function(){
sendBtn.addEventListener('click', function(){
if(!chosen) return;
var hp = box.querySelector('.fea-fb-hp').value;
var comment = box.querySelector('textarea').value;
sendBtn.disabled = true;
errorEl.hidden = true;
fetch(REST, { method:'POST', headers:{'Content-Type':'application/json'},
body: JSON.stringify({ vote:chosen, comment:comment, url:location.href, post_id:pid,
lang:lang, title:document.title, website:hp }) }).catch(function(){});
lang:lang, title:document.title, website:hp }) })
.then(function(res){
if(!res.ok) throw new Error('http_' + res.status);
return res.json();
})
.then(function(data){
if(!data || data.ok !== true) throw new Error('bad_response');
box.querySelector('.fea-fb-btns').hidden = true;
box.querySelector('.fea-fb-q').hidden = true;
moreEl.hidden = true; thanks.hidden = false;
setTimeout(closeCard, 2200);
})
.catch(function(err){
if (window.console && console.warn) console.warn('fea-fb submit failed:', err && err.message);
errorEl.hidden = false;
sendBtn.disabled = false;
});
});
})();
</script>