ux: add hint that an event has to be selected and then continue butto…

…n clicked
mbpictures · Dec 22, 2023 · a4035b9 · a4035b9
1 parent 8e145d1
commit a4035b9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/locale/de/common.json b/locale/de/common.json
@@ -23,5 +23,6 @@
     "time-until": "{{minutes}}:{{seconds}}",
     "number-of-tickets-unavailable": "{{ticketAmount}} Tickets sind nicht mehr verfügbare",
     "view-occupied-tickets": "Nicht verfügbare Tickets anzeigen",
-    "impress": "Impressum"
+    "impress": "Impressum",
+    "choose-continue": "Bitte Event auswählen und weiter (rechts unten) klicken"
 }
diff --git a/locale/en/common.json b/locale/en/common.json
@@ -23,5 +23,6 @@
     "time-until": "{{minutes}}:{{seconds}}",
     "number-of-tickets-unavailable": "{{ticketAmount}} tickets of your order are unavailable",
     "view-occupied-tickets": "Show unavailable tickets",
-    "impress": "Impress"
+    "impress": "Impress",
+    "choose-continue": "Please select an event and press continue (lower right corner)"
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -12,8 +12,10 @@ import loadNamespaces from "next-translate/loadNamespaces";
 import { resetOrder } from "../store/reducers/orderReducer";
 import { eventDateIsBookable } from "../constants/util";
 import { resetPayment } from "../store/reducers/paymentReducer";
+import useTranslation from "next-translate/useTranslation";
 
 export default function Home({ events, direction, title, subtitle }) {
+    const {t} = useTranslation("common");
     const dispatch = useAppDispatch();
 
     useEffect(() => {
@@ -45,6 +47,9 @@ export default function Home({ events, direction, title, subtitle }) {
                     </Typography>
                 )
             }
+            <Typography component={"div"} align={"center"} variant={"caption"}>
+                {t("choose-continue")}
+            </Typography>
             {
                 gallery ? (
                     <GalleryEventSelection events={events} onChange={handleChange} />