Warn about GIRA service issues before feedback/email

src/lib/components/Profile.svelte

@@ -2,11 +2,12 @@
 	import { accountInfo, logOut, user } from '$lib/account';
 	import Metric from '$lib/components/Metric.svelte';
 	import ProfileMenuEntry from '$lib/components/ProfileMenuEntry.svelte';
+	import ServiceWarningDialog from '$lib/components/ServiceWarningDialog.svelte';
 	import Info from '$lib/components/settings/About.svelte';
 	import History from '$lib/components/settings/History.svelte';
 	import Settings from '$lib/components/settings/Settings.svelte';
 	import { getLocale, t } from '$lib/translations';
-	import { safeInsets } from '$lib/ui.svelte';
+	import { enqueueDialog, safeInsets } from '$lib/ui.svelte';
 	import { App } from '@capacitor/app';
 	import { Capacitor, type PluginListenerHandle } from '@capacitor/core';
 	import { IconHeart, IconStar } from '@tabler/icons-svelte';
@@ -41,9 +42,12 @@
 
 		return () => backListener?.remove();
 	});
-
 </script>
 
+{#snippet feedbackWarning(dismiss: () => void)}
+	<ServiceWarningDialog url="https://github.com/rt-evil-inc/gira-mais/issues" {dismiss} />
+{/snippet}
+
 <div transition:fly={{ duration: 150, x: 100 }} class="absolute w-full h-full inset-0 bg-background z-30 grid" >
 	{#if $user}
 		<div class="flex flex-col justify-between items-center h-full gap-10 col-start-1 col-end-2 row-start-1 row-end-2 p-4 overflow-x-hidden"
@@ -73,7 +77,7 @@
 			<div class="flex flex-col grow font-semibold px-2 gap-3 w-full">
 				<ProfileMenuEntry icon={IconHistory} text={$t('history_label')} subtext={$t('history_subtext')} onclick={() => openPage = 'history'} />
 				<ProfileMenuEntry icon={IconTool} text={$t('settings_label')} subtext={$t('settings_subtext')} onclick={() => openPage = 'settings'} />
-				<a href="https://github.com/rt-evil-inc/gira-mais/issues"><ProfileMenuEntry icon={IconMessageReport} text={$t('feedback_label')} subtext={$t('feedback_subtext')} external /></a>
+				<ProfileMenuEntry icon={IconMessageReport} text={$t('feedback_label')} subtext={$t('feedback_subtext')} external onclick={() => enqueueDialog(feedbackWarning)} />
 				<ProfileMenuEntry icon={IconInfoCircle} text={$t('about_label')} subtext={$t('about_subtext')} onclick={() => openPage = 'info'} />
 				{#if Capacitor.getPlatform() === 'ios'}
 					<a href="https://github.com/rt-evil-inc/gira-mais/"><ProfileMenuEntry icon={IconStar} iconClass="stroke-warning" text={$t('star_label')} subtext={$t('star_subtext')} external /></a>

src/lib/components/ServiceWarningDialog.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { t } from '$lib/translations';
+	import IconAlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import IconX from '@tabler/icons-svelte/icons/x';
+
+	let { url, dismiss }: { url: string, dismiss: () => void } = $props();
+
+	const emelEmail = 'gira@emel.pt';
+	const emelEmailLink = `<a href="mailto:${emelEmail}" class="text-primary underline">${emelEmail}</a>`;
+</script>
+
+<div class="w-[340px] max-w-md mx-auto p-6 bg-background rounded-2xl shadow-lg text-left flex flex-col gap-3">
+	<div class="flex justify-between items-start gap-3">
+		<h1 class="text-lg font-semibold text-warning flex items-center gap-2">
+			<IconAlertTriangle size="22" stroke="2" class="shrink-0" />
+			{$t('service_warning_title')}
+		</h1>
+		<IconX class="text-label hover:text-primary cursor-pointer shrink-0" size="24" stroke="1.5" onclick={dismiss} aria-label="Close dialog" />
+	</div>
+	<div class="text-sm text-label whitespace-pre-line">{@html $t('service_warning_message', { email: emelEmailLink })}</div>
+	<div class="flex justify-end gap-5 mt-1 font-bold">
+		<button class="text-label" onclick={dismiss}>{$t('cancel_button')}</button>
+		<a href={url} class="text-primary" onclick={dismiss}>{$t('service_warning_continue')}</a>
+	</div>
+</div>

src/lib/components/settings/About.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { version } from '$app/environment';
-	import { safeInsets } from '$lib/ui.svelte';
+	import { enqueueDialog, safeInsets } from '$lib/ui.svelte';
 	import MenuPage from '$lib/components/MenuPage.svelte';
 	import GitHubStarRequest from '$lib/components/GitHubStarRequest.svelte';
+	import ServiceWarningDialog from '$lib/components/ServiceWarningDialog.svelte';
 	import { t } from '$lib/translations';
 	import { IconMail, IconWorldWww } from '@tabler/icons-svelte';
 	async function wait(ms:number) {
@@ -34,6 +35,10 @@
 	}
 </script>
 
+{#snippet emailWarning(dismiss: () => void)}
+	<ServiceWarningDialog url="mailto:contact@gira-mais.app" {dismiss} />
+{/snippet}
+
 <MenuPage>
 	<div class="flex flex-col p-5 relative grow overflow-hidden" style:padding-bottom="{Math.max($safeInsets.bottom, 20)}px">
 		<div class="text-3xl font-bold text-info pl-2">{$t('about_label')}</div>
@@ -46,9 +51,9 @@
 				<a href="https://gira-mais.app/">
 					<IconWorldWww size={24} stroke={1.7} class="stroke-info" />
 				</a>
-				<a href="mailto:contact@gira-mais.app">
+				<button onclick={() => enqueueDialog(emailWarning)} aria-label={$t('email_label')}>
 					<IconMail size={24} stroke={1.7} class="stroke-info" />
-				</a>
+				</button>
 				<a href="https://gira-mais.app/discord">
 					<svg class="h-6 fill-info" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
 				</a>

src/lib/translations.ts

@@ -489,6 +489,22 @@ const translations = {
 		en: 'Invalid bike ID. It should be a 4-digit number.',
 		pt: 'ID de bicicleta inválido. Deve ser um número de 4 dígitos.',
 	},
+	cancel_button: {
+		en: 'Cancel',
+		pt: 'Cancelar',
+	},
+	service_warning_title: {
+		en: 'Before you continue',
+		pt: 'Antes de continuar',
+	},
+	service_warning_message: {
+		en: 'Gira+ is an unofficial app and is not affiliated with EMEL. We can\'t help with problems related to the GIRA service itself, such as trips that won\'t end, charges, account issues, or bike/dock maintenance.\nFor those, please contact EMEL via {{email}}.\n\nOnly continue if your message is about this app.',
+		pt: 'A Gira+ é uma aplicação não oficial e não está afiliada à EMEL. Não podemos ajudar com problemas relacionados com o serviço GIRA em si, como viagens que não terminam, cobranças, problemas de conta ou manutenção de bicicletas ou docas.\nPara esses casos, contacte a EMEL via {{email}}.\n\nContinue apenas se a sua mensagem for sobre esta aplicação.',
+	},
+	service_warning_continue: {
+		en: 'Continue anyway',
+		pt: 'Continuar mesmo assim',
+	},
 } as const;
 
 export type Translations = typeof translations;