Add message about hotels in the tickets page (#4223)

Author: marcoacierno

frontend/src/components/products-list/index.tsx

@@ -1,4 +1,10 @@
-import { Heading, Section, Spacer } from "@python-italia/pycon-styleguide";
+import {
+  Heading,
+  Link,
+  Section,
+  Spacer,
+  Text,
+} from "@python-italia/pycon-styleguide";
 import { Fragment } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -50,19 +56,39 @@ export const ProductsList = ({
 
   return (
     <Section>
-      {visibleCategories.includes(CheckoutCategory.Tickets) &&
-        tickets.map((ticket) => (
-          <Fragment key={ticket.id}>
-            <TicketRow
-              openByDefault={true}
-              icon="tickets"
-              iconBackground="pink"
-              ticket={ticket}
-              ignoreSoldOut={ignoreSoldOut}
+      {visibleCategories.includes(CheckoutCategory.Tickets) && (
+        <>
+          <Text size={2}>
+            <FormattedMessage
+              id="tickets.description"
+              values={{
+                page: (
+                  <Text size="inherit" decoration="underline">
+                    <Link href="/hotels" target="_blank">
+                      <FormattedMessage id="tickets.description.page" />
+                    </Link>
+                  </Text>
+                ),
+              }}
             />
-            <Spacer size="small" />
-          </Fragment>
-        ))}
+          </Text>
+
+          <Spacer size="small" />
+
+          {tickets.map((ticket) => (
+            <Fragment key={ticket.id}>
+              <TicketRow
+                openByDefault={true}
+                icon="tickets"
+                iconBackground="pink"
+                ticket={ticket}
+                ignoreSoldOut={ignoreSoldOut}
+              />
+              <Spacer size="small" />
+            </Fragment>
+          ))}
+        </>
+      )}
 
       {visibleCategories.includes(CheckoutCategory.Gadgets) && tshirt && (
         <>

frontend/src/components/tickets-page/tickets.tsx

@@ -9,6 +9,8 @@ import type {
   TicketsQueryResult,
 } from "~/types";
 
+import { Text } from "@python-italia/pycon-styleguide";
+import { FormattedMessage } from "react-intl";
 import { ProductsList } from "../products-list";
 import { useLoginState } from "../profile/hooks";
 import { CheckoutBar } from "./checkout-bar";

frontend/src/locale/index.ts

@@ -4,6 +4,11 @@ export const messages = {
     titleTemplate: "%s | PyCon Italia",
     description:
       "Join PyCon Italia May 28th to May 31st 2025 in Bologna, Italy!",
+
+    "tickets.description":
+      "After you have purchased your tickets, you will be able to access the {page} with our discounted codes.",
+    "tickets.description.page": "hotels page",
+
     "input.placeholder": "Type here...",
     "global.accordion.close": "Close",
     "global.accordion.readMore": "Read more",
@@ -2168,6 +2173,10 @@ Clicca sulla casella per cambiare. Se lasciato vuoto, presumeremo che tu sia dis
     "cfp.availability.table.morning.range": "(11:00 - 13:00)",
     "cfp.availability.table.afternoon": "Pomeriggio",
     "cfp.availability.table.afternoon.range": "(15:00 - 18:00)",
+
+    "tickets.description":
+      "Dopo aver acquistato i tuoi biglietti, potrai accedere alla {page} con i nostri codici sconto.",
+    "tickets.description.page": "pagina hotels",
   },
 };
 

frontend/src/pages/tickets/personal.tsx

@@ -1,4 +1,4 @@
-import { Heading, Section } from "@python-italia/pycon-styleguide";
+import { Heading, Section, Text } from "@python-italia/pycon-styleguide";
 import React from "react";
 import { FormattedMessage } from "react-intl";