feat: add Umami event tracking to various buttons across components

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"
 					>

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>

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

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",

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"
 					>

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"

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

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>

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">

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>

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");
 					}}

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>

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" />