fix(new-plan-selection): ajustes UI, mensajes de plan actual y consistencia visual

[jhoffman-ms]

Resumen

Este PR aplica ajustes funcionales y visuales en NewPlanSelection para mejorar consistencia de UX en Contactos/Envíos, estados comerciales y espaciados de layout.

Contexto

Durante QA de NewPlanSelection se detectaron varios puntos de consistencia visual y de reglas de interacción:

• mensajes y CTA en escenarios especiales (plan actual, downgrade, más de 100k/10m)
• visibilidad de controles cuando el plan no es comprable
• jerarquía de textos en mensajes informativos
• espaciados entre bloques y cards
• claridad del breakdown de prepayment en la card de precio

Cambios implementados

1) Contactos: ocultar controles en escenarios no comprables

En ContactsPlan ahora se ocultan Suscripción y Promocode cuando:

• el usuario selecciona Más de 100.000
• el usuario selecciona un plan menor al actual (downgrade)
• el plan seleccionado coincide con su plan actual

2) Mensaje de plan actual

Se incorporó mensaje de plan actual en formato consistente:

• texto: No puedes seleccionar este Plan porque es el que posees actualmente.
• aplicado en:
  • byContact
  • byEmail
• en ambos escenarios también se oculta el bloque de Promocode

3) Envíos: consistencia de cartel informativo

En el mensaje de Más de 100k Contactos:

• el título pasa a negrita
• se agrega salto de línea debajo del título
• el link CONTÁCTANOS se ubica debajo del texto (no a la derecha)

4) Breakdown de prepayment (trimestral/semestral/anual)

Se mantiene el salto de línea en el texto de ahorro para mostrar:

• primera línea: ahorro
• segunda línea: 1 pago trimestral/semestral/anual de ...

Además se agregó test de cobertura para verificar consistencia de los 3 casos.

5) Ajustes de espaciado/layout

• Más espacio entre calculadora y bloque de funcionalidades.
• Más separación entre cards de Add-ons y FAQ.
• Menor espacio arriba del título de FAQ.
• Más aire interno/externo en cards de Add-ons.
• Más espacio entre el texto de ahorro y el botón CTA del panel derecho.

Archivos modificados

• src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js
• src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js
• src/components/BuyProcess/NewPlanSelection/index.styles.js
• src/components/BuyProcess/NewPlanSelection/index.test.js
• src/i18n/es.js
• src/i18n/en.js

Validaciones ejecutadas

• Formato:
  • ./node_modules/.bin/prettier --check sobre archivos modificados
• Tests relacionados:
  • yarn test:related --runInBand src/components/BuyProcess/NewPlanSelection/ContactsPlan/index.js src/components/BuyProcess/NewPlanSelection/EmailsPlan/index.js src/components/BuyProcess/NewPlanSelection/index.styles.js src/components/BuyProcess/NewPlanSelection/index.test.js src/i18n/es.js src/i18n/en.js

Resultado:

• 181 suites OK
• 688 tests OK (3 skipped)

Referencias visuales

Se aplicaron cambios basados en las capturas compartidas durante esta iteración:

• cartel celeste de referencia para escenarios informativos
• ubicación de CONTÁCTANOS debajo del texto
• espaciados entre secciones y cards
• salto de línea en breakdown de prepayment

Nota: las imágenes adjuntas en el chat no tienen URL pública directa para incrustarlas automáticamente en GitHub. Si las subes al PR (o a docs/assets) las puedo insertar en esta descripción con markdown.