diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index b3e2af0..e2f7ac8 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -24,7 +24,7 @@ "password": "Passwort", "passwordPlaceholder": "Geben Sie Ihr Passwort ein", "noDataFound": "Keine Einträge gefunden", - "inputRules": { + "inputRules": { "usernameRequired": "Anzeigename ist erforderlich", "usernameMinLength": "Anzeigename muss mindestens {{minLength}} Zeichen lang sein", "accountNameRequired": "Benutzername ist erforderlich", @@ -93,7 +93,7 @@ "serviceActivityDurationMinutesPlaceholder": "Geben Sie die Dauer der Tätigkeit in Minuten ein", "serviceActivityDurationMinutesUnit": "Minuten", "serviceActivityResponsible": "Verantwortliche Mitarbeiter", - "inputRules": { + "inputRules": { "serviceNameRequired": "Name der Dienstleistung ist erforderlich", "serviceNameMinLength": "Name der Dienstleistung muss mindestens {{minLength}} Zeichen lang sein", "serviceActivityNameRequired": "Name der Tätigkeit ist erforderlich", @@ -126,6 +126,17 @@ } }, "calendar": { - "pageTitle": "Kalender" + "pageTitle": "Kalender", + "authFinish": { + "title": "Erfolgreich verbunden", + "description": "Die Verbindung mit Ihrem Google-Kalender war erfolgreich.", + "button": "Weiter zum Kalender", + "countDownRedirect": "Sie werden in {{countDown}} Sekunden weitergeleitet." + }, + "authFailed": { + "title": "Verbindung fehlgeschlagen", + "description": "Die Verbindung mit Ihrem Google-Kalender ist fehlgeschlagen.", + "button": "Erneut versuchen" + } } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index f8cc02b..5fbeb70 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -129,6 +129,17 @@ } }, "calendar": { - "pageTitle": "Calendar" + "pageTitle": "Calendar", + "authFinish": { + "title": "Connection successful", + "description": "Connection to your calendar was successful.", + "button": "Continue to calendar", + "countDownRedirect": "Redirecting to calendar in {{countDown}} seconds" + }, + "authFailed": { + "title": "Connection failed", + "description": "Connection to your calendar failed.", + "button": "Try again" + } } } diff --git a/src/Components/AppRoutes/index.js b/src/Components/AppRoutes/index.js index 48c710c..475245a 100644 --- a/src/Components/AppRoutes/index.js +++ b/src/Components/AppRoutes/index.js @@ -1,6 +1,5 @@ import { Route, Routes } from "react-router-dom"; import { Constants } from "../../utils"; -import { useAppContext } from "../../Contexts/AppContext"; import { lazy } from "react"; import { MySupsenseFallback } from "../MySupsenseFallback"; @@ -11,6 +10,7 @@ const StoreSettings = lazy(() => import("../../Pages/Store/Settings")); const StoreEmployees = lazy(() => import("../../Pages/Store/Employees")); const StoreServices = lazy(() => import("../../Pages/Store/Services")); const StoreCalendar = lazy(() => import("../../Pages/Store/Calendar")); +const StoreCalendarAuth = lazy(() => import("../../Pages/Store/Calendar/Auth")); const Support = lazy(() => import("../../Pages/Support")); const Feedback = lazy(() => import("../../Pages/Feedback")); const UserProfile = lazy(() => import("../../Pages/UserProfile")); @@ -65,6 +65,15 @@ export default function AppRoutes({ userSession, setUserSession }) { } /> + + + + } + /> + + {children} + + ); +} diff --git a/src/Components/MySupsenseFallback/index.js b/src/Components/MySupsenseFallback/index.js index 91701c7..b95a85c 100644 --- a/src/Components/MySupsenseFallback/index.js +++ b/src/Components/MySupsenseFallback/index.js @@ -1,23 +1,14 @@ import { Spin } from "antd"; import { Suspense } from "react"; +import MyCenteredContainer from "../MyContainer"; export function MySupsenseFallback({ children }) { return ( + - + } > {children} diff --git a/src/Pages/Store/Calendar/Auth/index.js b/src/Pages/Store/Calendar/Auth/index.js new file mode 100644 index 0000000..241cc52 --- /dev/null +++ b/src/Pages/Store/Calendar/Auth/index.js @@ -0,0 +1,91 @@ +import { Button, Result, Spin } from "antd"; +import { Link, useParams, useNavigate } from "react-router-dom"; +import { Constants, myFetch } from "../../../../utils"; +import { useEffect, useState } from "react"; +import MyCenteredContainer from "../../../../Components/MyContainer"; +import { useTranslation } from "react-i18next"; +import { MySupsenseFallback } from "../../../../Components/MySupsenseFallback"; + +export default function StoreCalendarAuth() { + const { t } = useTranslation(); + const { status } = useParams(); + + const [isRequesting, setIsRequesting] = useState(true); + const [storeId, setStoreId] = useState(""); + + useEffect(() => { + setIsRequesting(true); + + myFetch("/calendar/store", "GET") + .then((res) => { + setIsRequesting(false); + setStoreId(res.storeId); + }) + .catch((err) => { + console.log(err); + }); + }, [status]); + + if (isRequesting) { + return ( + + + + ); + } + + return ( + + + + + + {status === "finish" && } + , + ]} + /> + ); +} + +function CountdownRedirect({ storeId }) { + const { t } = useTranslation(); + const navigate = useNavigate(); + + const [count, setCount] = useState(5); + + useEffect(() => { + if (count > 0) { + const timer = setTimeout(() => { + setCount(count - 1); + }, 1000); + return () => clearTimeout(timer); + } else { + navigate(`${Constants.ROUTE_PATHS.STORE.CALENDAR}/${storeId}`); + } + }, [count, navigate]); + + return ( + <> +

+ {t("calendar.authFinish.countDownRedirect", { countDown: count })} +

+ + ); +} diff --git a/src/utils.js b/src/utils.js index 425bebd..7604c70 100644 --- a/src/utils.js +++ b/src/utils.js @@ -49,6 +49,7 @@ export const Constants = { EMPLOYEES: "/store/employees", SERVICES: "/store/services", CALENDAR: "/store/calendar", + CALENDAR_AUTH: "/store/calendar/auth", }, FEEDBACK: "/feedback", SUPPORT: "/support",