refactor(open-banking): soften replace warning and add support links

- Reword the title to 'This may replace your existing connection' (it's a
  risk, not a certainty).
- Color only the title and icon red; keep the body neutral so the explanation
  and links read as guidance, not an error.
- Add Discord community and email-support links for users who hit connection
  trouble, instead of reusing the account-menu support modal.
This commit is contained in:
Víctor Falcón 2026-06-20 19:05:31 +02:00
parent 1c097734ac
commit 96977e4e1d
3 changed files with 26 additions and 5 deletions

View File

@ -798,6 +798,7 @@
"Health & Wellness (Medical, Pharmacy, Fitness)": "Salud y Bienestar (Médico, Farmacia, Gimnasio)",
"Health and pharmaceuticals": "Salud y farmacia",
"Healthy Pharmacy": "Healthy Pharmacy",
"Having trouble with this connection?": "¿Tienes problemas con esta conexión?",
"Help Me Improve": "Ayúdame a Mejorar",
"Help Us Improve": "Ayúdanos a Mejorar",
"Hey :name, is everything okay?": "Hey :name, ¿está todo bien?",
@ -1563,7 +1564,7 @@
"This password will encrypt all your financial data. Make it strong and memorable — we can't recover it for you.": "Esta contraseña encriptará todos tus datos financieros. Hazla fuerte y memorable: no podemos recuperarla por ti.",
"This setting follows the selected category type and cannot be changed here.": "Esta configuración sigue el tipo de categoría seleccionado y no se puede cambiar aquí.",
"This transaction was imported from a file. The description cannot be modified.": "Esta transacción fue importada de un archivo. La descripción no se puede modificar.",
"This will replace your existing connection": "Esto reemplazará tu conexión actual",
"This may replace your existing connection": "Esto podría reemplazar tu conexión activa",
"This transaction was imported from a\\n file. The description cannot be\\n modified.": "Esta transacción fue importada desde un archivo. La descripción no se puede modificar.",
"This transfer category stays out of the Sankey money flow chart.": "Esta categoría de transferencia queda fuera del gráfico Sankey de flujo de dinero.",
"This transfer category stays out of the cashflow chart.": "Esta categoría de transferencia queda fuera del gráfico de flujo de caja.",

View File

@ -127,7 +127,7 @@ describe('ConnectAccountDialog', () => {
fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
expect(
screen.getByText('This will replace your existing connection'),
screen.getByText('This may replace your existing connection'),
).toBeInTheDocument();
const connect = screen.getByRole('button', { name: 'Connect' });
@ -144,7 +144,7 @@ describe('ConnectAccountDialog', () => {
fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
expect(
screen.queryByText('This will replace your existing connection'),
screen.queryByText('This may replace your existing connection'),
).not.toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Connect' })).toBeEnabled();
});

View File

@ -3,6 +3,9 @@ import { Checkbox } from '@/components/ui/checkbox';
import { __ } from '@/utils/i18n';
import { TriangleAlert } from 'lucide-react';
const DISCORD_URL = 'https://discord.gg/m8hUhx6D9D';
const SUPPORT_MAILTO = 'mailto:support@whisper.money';
interface ReplaceConnectionWarningProps {
acknowledged: boolean;
onAcknowledgedChange: (acknowledged: boolean) => void;
@ -13,16 +16,19 @@ interface ReplaceConnectionWarningProps {
* connection to. Authorizing with the same bank login replaces the existing
* session, so the previous connection stops working. The checkbox gates the
* Connect button to avoid breaking a working connection by accident.
*
* Only the title and icon are red; the body stays neutral so the explanation
* and support links read as guidance rather than an error.
*/
export function ReplaceConnectionWarning({
acknowledged,
onAcknowledgedChange,
}: ReplaceConnectionWarningProps) {
return (
<Alert variant="destructive">
<Alert className="text-destructive">
<TriangleAlert />
<AlertTitle>
{__('This will replace your existing connection')}
{__('This may replace your existing connection')}
</AlertTitle>
<AlertDescription>
<p>
@ -30,6 +36,20 @@ export function ReplaceConnectionWarning({
'You already have an active connection with this bank. If you authorize with the same bank login, the previous connection will stop working. Only continue if you are connecting a different account.',
)}
</p>
<p>{__('Having trouble with this connection?')}</p>
<p className="flex flex-wrap gap-x-4">
<a
href={DISCORD_URL}
target="_blank"
rel="noopener noreferrer"
className="text-primary underline"
>
{__('Join the community')}
</a>
<a href={SUPPORT_MAILTO} className="text-primary underline">
{__('Email support')}
</a>
</p>
<label className="mt-2 flex items-start gap-2 text-foreground">
<Checkbox
checked={acknowledged}