From 91eeace646c3f3d6f4fbba43df7e3fe3194852e6 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Mon, 9 Mar 2026 16:00:54 +0100
Subject: [PATCH] feat: add Umami event tracking to various buttons across
 components

---
 apps/infoalloggi/src/components/annunci_tutorial.tsx   |  3 +++
 apps/infoalloggi/src/components/expand_guida.tsx       |  6 +++++-
 apps/infoalloggi/src/components/frequent_searches.tsx  |  5 +++++
 .../infoalloggi/src/components/navbar/login-button.tsx |  1 +
 .../src/components/navbar/ricerca_command.tsx          |  1 +
 .../infoalloggi/src/components/navbar/theme-toggle.tsx |  1 +
 apps/infoalloggi/src/components/phone-input.tsx        |  6 +++---
 apps/infoalloggi/src/components/prezzi.tsx             |  5 ++++-
 apps/infoalloggi/src/pages/404.tsx                     |  2 +-
 apps/infoalloggi/src/pages/annuncio/[cod].tsx          |  9 +++++++--
 .../src/pages/auth/nonvalid-password-reset-token.tsx   |  1 +
 apps/infoalloggi/src/pages/contatti.tsx                |  6 +++++-
 apps/infoalloggi/src/pages/proprietari.tsx             | 10 ++++++++--
 13 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/apps/infoalloggi/src/components/annunci_tutorial.tsx b/apps/infoalloggi/src/components/annunci_tutorial.tsx
index a714837..c90185a 100644
--- a/apps/infoalloggi/src/components/annunci_tutorial.tsx
+++ b/apps/infoalloggi/src/components/annunci_tutorial.tsx
@@ -80,6 +80,7 @@ export const CTA_TipologiaModal = () => {
 						<Button
 							aria-label={t.tipologia_tutorial.transitorio_cta}
 							className="w-full bg-transitorio"
+							data-umami-event="tipologia_tutorial_transitorio"
 							onClick={async () => await update("Transitorio")}
 						>
 							{t.tipologia_tutorial.transitorio_cta}
@@ -95,6 +96,7 @@ export const CTA_TipologiaModal = () => {
 						<Button
 							aria-label={t.tipologia_tutorial.stabile_cta}
 							className="w-full bg-stabile"
+							data-umami-event="tipologia_tutorial_stabile"
 							onClick={async () => await update("Stabile")}
 						>
 							{t.tipologia_tutorial.stabile_cta}
@@ -106,6 +108,7 @@ export const CTA_TipologiaModal = () => {
 					<Button
 						aria-label={t.tipologia_tutorial.alone}
 						className="w-full"
+						data-umami-event="tipologia_tutorial_alone"
 						onClick={async () => await update(null)}
 						variant="outline"
 					>
diff --git a/apps/infoalloggi/src/components/expand_guida.tsx b/apps/infoalloggi/src/components/expand_guida.tsx
index 43ac395..ca3c9a6 100644
--- a/apps/infoalloggi/src/components/expand_guida.tsx
+++ b/apps/infoalloggi/src/components/expand_guida.tsx
@@ -18,7 +18,11 @@ export const ComeFunziona = () => {
 			triggerRadius="100px"
 		>
 			<ExpandableScreenTrigger className="w-full">
-				<Button className="w-full text-lg md:text-base lg:text-lg" size="xl">
+				<Button
+					className="w-full text-lg md:text-base lg:text-lg"
+					data-umami-event="come_funziona_guida_open"
+					size="xl"
+				>
 					<HelpCircle />
 					<span>{t.come_funziona_guida.title}</span>
 				</Button>
diff --git a/apps/infoalloggi/src/components/frequent_searches.tsx b/apps/infoalloggi/src/components/frequent_searches.tsx
index 9700aec..52301cb 100644
--- a/apps/infoalloggi/src/components/frequent_searches.tsx
+++ b/apps/infoalloggi/src/components/frequent_searches.tsx
@@ -31,6 +31,7 @@ export const FrequentSearches = () => {
 				<Link href={buildRicercaUrl({ tipo: "Transitorio" })}>
 					<Button
 						className="flex items-center gap-1 border-2 border-transitorio bg-transitorio text-lg text-white"
+						data-umami-event="frequent_search_transitorio"
 						size="lg"
 						variant="flat"
 					>
@@ -41,6 +42,7 @@ export const FrequentSearches = () => {
 				<Link href={buildRicercaUrl({ tipo: "Stabile" })}>
 					<Button
 						className="flex items-center gap-1 border-2 border-stabile bg-stabile text-lg text-white"
+						data-umami-event="frequent_search_stabile"
 						size="lg"
 						variant="flat"
 					>
@@ -55,6 +57,7 @@ export const FrequentSearches = () => {
 				>
 					<Button
 						className="flex items-center gap-1 border-2 border-primary text-lg"
+						data-umami-event="frequent_search_bassano"
 						size="lg"
 					>
 						Bassano del Grappa
@@ -70,6 +73,7 @@ export const FrequentSearches = () => {
 				>
 					<Button
 						className="flex items-center gap-1 border-2 border-transitorio bg-transitorio text-lg text-white"
+						data-umami-event="frequent_search_bassano_transitorio"
 						size="lg"
 						variant="flat"
 					>
@@ -85,6 +89,7 @@ export const FrequentSearches = () => {
 				>
 					<Button
 						className="flex items-center gap-1 border-2 border-primary text-lg"
+						data-umami-event="frequent_search_marostica"
 						size="lg"
 					>
 						Marostica
diff --git a/apps/infoalloggi/src/components/navbar/login-button.tsx b/apps/infoalloggi/src/components/navbar/login-button.tsx
index 4ed9268..d8b45de 100644
--- a/apps/infoalloggi/src/components/navbar/login-button.tsx
+++ b/apps/infoalloggi/src/components/navbar/login-button.tsx
@@ -65,6 +65,7 @@ export const UserHeaderSection = ({
 				<Button
 					aria-label="Login Button"
 					className="flex h-11.5 w-full items-center justify-center gap-x-1 rounded-lg p-2"
+					data-umami-event="login_btn"
 					onClick={async () => {
 						await router.push({
 							pathname: "/login",
diff --git a/apps/infoalloggi/src/components/navbar/ricerca_command.tsx b/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
index 48937a1..0150f38 100644
--- a/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
+++ b/apps/infoalloggi/src/components/navbar/ricerca_command.tsx
@@ -29,6 +29,7 @@ export function RicercaCommand() {
 					<Button
 						aria-label="ricercaBtn"
 						className="p-2"
+						data-umami-event="ricerca__btmandn"
 						size="sm"
 						variant="outline"
 					>
diff --git a/apps/infoalloggi/src/components/navbar/theme-toggle.tsx b/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
index 395880f..d47db64 100644
--- a/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
+++ b/apps/infoalloggi/src/components/navbar/theme-toggle.tsx
@@ -91,6 +91,7 @@ const ThemeSwitchContent2 = () => {
 			<DropdownMenuTrigger asChild>
 				<Button
 					className="p-2"
+					data-umami-event="theme_toggle_btn"
 					onClick={() => setTheme(theme === "light" ? "dark" : "light")}
 					size="sm"
 					variant="outline"
diff --git a/apps/infoalloggi/src/components/phone-input.tsx b/apps/infoalloggi/src/components/phone-input.tsx
index a27742b..02ac498 100644
--- a/apps/infoalloggi/src/components/phone-input.tsx
+++ b/apps/infoalloggi/src/components/phone-input.tsx
@@ -38,7 +38,7 @@ const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.memo(
 		return (
 			<RPNInput.default
 				className={cn(
-					"[&_input]:ph-input-fix [&_*]:!h-auto flex h-auto w-full flex-1",
+					"[&_input]:ph-input-fix flex h-auto w-full flex-1 **:h-auto!",
 					className,
 				)}
 				countrySelectComponent={CountrySelect}
@@ -152,7 +152,7 @@ const CountrySelect = React.memo(
 						/>
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent className="w-[300px] p-0">
+				<PopoverContent className="w-75 p-0">
 					<Command shouldFilter={false}>
 						<CommandInput
 							className="border-none ring-0 focus:ring-0 focus-visible:ring-0"
@@ -160,7 +160,7 @@ const CountrySelect = React.memo(
 							placeholder="Search country..."
 						/>
 
-						<ScrollArea className="h-[400px] overflow-auto">
+						<ScrollArea className="h-100 overflow-auto">
 							<CommandEmpty>No countries found</CommandEmpty>
 							<CommandGroup ref={refCallback}>
 								<div
diff --git a/apps/infoalloggi/src/components/prezzi.tsx b/apps/infoalloggi/src/components/prezzi.tsx
index cd01d29..9bf6a13 100644
--- a/apps/infoalloggi/src/components/prezzi.tsx
+++ b/apps/infoalloggi/src/components/prezzi.tsx
@@ -84,7 +84,10 @@ export const PricingChoice = () => {
 			</Tabs>
 
 			<Link aria-label="Link to pricing page" href="/prezzi">
-				<Button className="flex h-12 flex-row gap-2 px-6 py-4 text-2xl hover:underline">
+				<Button
+					className="flex h-12 flex-row gap-2 px-6 py-4 text-2xl hover:underline"
+					data-umami-event="scopri_prezzi_btn"
+				>
 					<span>Scopri di più sui prezzi</span>
 					<ExternalLink />
 				</Button>
diff --git a/apps/infoalloggi/src/pages/404.tsx b/apps/infoalloggi/src/pages/404.tsx
index 09131fa..7150eda 100644
--- a/apps/infoalloggi/src/pages/404.tsx
+++ b/apps/infoalloggi/src/pages/404.tsx
@@ -7,7 +7,7 @@ export default function Custom404() {
 	const { t } = useTranslation();
 	return (
 		<main>
-			<div className="mx-auto flex h-screen max-w-screen-xl items-center justify-start px-4 md:px-8">
+			<div className="mx-auto flex h-screen max-w-7xl items-center justify-start px-4 md:px-8">
 				<div className="mx-auto max-w-lg space-y-3 text-center">
 					<QuestionMarkCircleIcon className="mx-auto size-20 text-indigo-600" />
 					<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
diff --git a/apps/infoalloggi/src/pages/annuncio/[cod].tsx b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
index e964ac8..b4e6587 100644
--- a/apps/infoalloggi/src/pages/annuncio/[cod].tsx
+++ b/apps/infoalloggi/src/pages/annuncio/[cod].tsx
@@ -353,6 +353,7 @@ const Pricing = ({
 							? "bg-transitorio"
 							: "bg-stabile",
 					)}
+					data-umami-event={`pricing_mobile_cta_click`}
 				>
 					<div className="flex items-center gap-2">
 						<BadgeEuro className="size-5" />
@@ -637,7 +638,7 @@ const ShareComponent = () => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button>
+				<Button data-umami-event="share_button_click">
 					<Share2 />
 				</Button>
 			</DialogTrigger>
@@ -740,7 +741,11 @@ const AnnuncioFooter = ({
 				})}
 				target="_blank"
 			>
-				<Button className="my-10 w-full text-xl" variant="secondary">
+				<Button
+					className="my-10 w-full text-xl"
+					data-umami-event="similar_listings_click"
+					variant="secondary"
+				>
 					{t.annunci.find_similar} <ExternalLink className="size-6" />
 				</Button>
 			</Link>
diff --git a/apps/infoalloggi/src/pages/auth/nonvalid-password-reset-token.tsx b/apps/infoalloggi/src/pages/auth/nonvalid-password-reset-token.tsx
index 95202e6..5b50a96 100644
--- a/apps/infoalloggi/src/pages/auth/nonvalid-password-reset-token.tsx
+++ b/apps/infoalloggi/src/pages/auth/nonvalid-password-reset-token.tsx
@@ -17,6 +17,7 @@ const NonValidPasswordResetToken: NextPage = () => {
 				<p>{t.pwReset.notvalid_desc}</p>
 				<Button
 					className="mt-5"
+					data-umami-event="pw_reset_notvalid_cta_btn"
 					onClick={async () => {
 						await router.push("/auth/new-password-reset");
 					}}
diff --git a/apps/infoalloggi/src/pages/contatti.tsx b/apps/infoalloggi/src/pages/contatti.tsx
index d7fe027..10afd2f 100644
--- a/apps/infoalloggi/src/pages/contatti.tsx
+++ b/apps/infoalloggi/src/pages/contatti.tsx
@@ -214,7 +214,11 @@ const Contatto: NextPage = () => {
 											</FormItem>
 										)}
 									/>
-									<Button className="w-full" type="submit">
+									<Button
+										className="w-full"
+										data-umami-event="contact_form_submit"
+										type="submit"
+									>
 										{t.contact_form.invia}
 									</Button>
 								</form>
diff --git a/apps/infoalloggi/src/pages/proprietari.tsx b/apps/infoalloggi/src/pages/proprietari.tsx
index 58b24ee..75d8379 100644
--- a/apps/infoalloggi/src/pages/proprietari.tsx
+++ b/apps/infoalloggi/src/pages/proprietari.tsx
@@ -33,7 +33,10 @@ const Proprietari: NextPage = () => {
 							</h3>
 							<p className="mt-3 leading-relaxed">{t.proprietari.cta1.desc}</p>
 							<Link href="/contatti">
-								<Button className="mt-5">
+								<Button
+									className="mt-5"
+									data-umami-event="proprietari_contattaci_btn"
+								>
 									{t.proprietari.contattaci}
 									<ArrowRight className="ml-1 h-5 w-5 duration-150" />
 								</Button>
@@ -78,7 +81,10 @@ const Proprietari: NextPage = () => {
 								{t.proprietari.cta2.title3}
 							</h3>
 							<p className="mt-3 leading-relaxed">{t.proprietari.cta2.desc}</p>
-							<Link href="/contatti">
+							<Link
+								data-umami-event="proprietari_contattaci_btn_2"
+								href="/contatti"
+							>
 								<Button className="mt-5">
 									{t.proprietari.contattaci}
 									<ArrowRight className="ml-1 h-5 w-5 duration-150" />