calendar not connected

public/locales/de/translation.json

@@ -161,6 +161,11 @@
     },
     "cardStoreCalendarSettings": {
       "title": "Geschäftskalendereinstellungen"
+    },
+    "googleCalendarNotConnected": {
+      "title": "Google Kalender nicht verbunden",
+      "subTitle": "Klicken Sie auf die Schaltfläche unten, um Ihren Google Kalender zu verbinden.",
+      "button": "Jetzt verbinden"
     }
   },
   "storeSettings": {

public/locales/en/translation.json

@@ -164,6 +164,11 @@
     },
     "cardStoreCalendarSettings": {
       "title": "Store calendar settings"
+    },
+    "googleCalendarNotConnected": {
+      "title": "Google Calendar not connected",
+      "subTitle": "Click on the button below to connect your Google Calendar.",
+      "button": "Connect now"
     }
   },
   "storeSettings": {

src/Components/MyContainer/index.js

@@ -7,7 +7,7 @@ export default function MyCenteredContainer({ children }) {
         justifyContent: "center",
         alignContent: "center",
         alignItems: "center",
-        height: "98.3vh",
+        height: "85.3vh",
       }}
     >
       {children}

src/Pages/Store/Calendar/index.js

@@ -1,4 +1,4 @@
-import { Button, Card, Col, Form, Row, Spin, Switch, Typography } from "antd";
+import { Button, Card, Col, Form, Result, Row, Spin, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import {
   Constants,
@@ -7,7 +7,6 @@ import {
 } from "../../../utils";
 import { useEffect, useRef, useState } from "react";
 import MyCenteredContainer from "../../../Components/MyContainer";
-import { CheckOutlined } from "@ant-design/icons";
 import {
   MyCalendarMaxFutureBookingDaysFormInput,
   MyCalendarMinEarliestBookingTimeFormInput,
@@ -47,17 +46,29 @@ export default function StoreCalendar() {
 
   return (
     <>
-      <h1>{t("calendar.pageTitle")}</h1>
-
+      {calendarSettings.connected === false ? (
+        <MyCenteredContainer>
+          <Result
+            status="warning"
+            title={t("calendar.googleCalendarNotConnected.title")}
+            subTitle={t("calendar.googleCalendarNotConnected.subTitle")}
+            extra={
               <Button
+                type="primary"
                 onClick={() => {
                   document.cookie = `session=${getUserSessionFromLocalStorage()}; path=/;`;
 
                   window.location.href = `${Constants.API_ADDRESS}/calendar/auth/google`;
                 }}
               >
-        LOGIN with GOOGLE
+                {t("calendar.googleCalendarNotConnected.button")}
               </Button>
+            }
+          />
+        </MyCenteredContainer>
+      ) : (
+        <>
+          <h1>{t("calendar.pageTitle")}</h1>
 
           <Row gutter={[16, 16]}>
             <Col xs={24} md={12}>
@@ -74,6 +85,8 @@ export default function StoreCalendar() {
             </Col>
           </Row>
         </>
+      )}
+    </>
   );
 }
 
@@ -175,7 +188,7 @@ function CardStoreCalendarSettings({ settings }) {
   }, []);
 
   useEffect(() => {
-    // undefined on first render+
+    // undefined on first render
     // null when input is empty
     if (
       calendarMaxFutureBookingDays === undefined ||

src/Pages/Store/Employees/index.js

@@ -1,12 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons";
-import {
-  Button,
-  Checkbox,
-  Form,
-  Grid,
-  Popconfirm,
-  Space,
-} from "antd";
+import { Button, Checkbox, Form, Grid, Popconfirm, Space } from "antd";
 import MyModal, {
   MyModalCloseCreateButtonFooter,
   MyModalCloseSaveButtonFooter,
@@ -57,12 +50,12 @@ export default function StoreEmployees() {
         key: "username",
       },
       {
-        title: t("common.maxFutureBookingDays"),
+        title: t("common.calendarMaxFutureBookingDays"),
         dataIndex: "calendarMaxFutureBookingDays",
         key: "calendarMaxFutureBookingDays",
       },
       {
-        title: t("common.minEarliestBookingTime"),
+        title: t("common.calendarMinEarliestBookingTime"),
         dataIndex: "calendarMinEarliestBookingTime",
         key: "calendarMinEarliestBookingTime",
       },