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,32 +46,46 @@ 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=/;`;
 
-      <Button
-        onClick={() => {
-          document.cookie = `session=${getUserSessionFromLocalStorage()}; path=/;`;
-
-          window.location.href = `${Constants.API_ADDRESS}/calendar/auth/google`;
-        }}
-      >
-        LOGIN with GOOGLE
-      </Button>
-
-      <Row gutter={[16, 16]}>
-        <Col xs={24} md={12}>
-          <CardPersonalCalendarSettings
-            settings={calendarSettings.userSettings}
+                  window.location.href = `${Constants.API_ADDRESS}/calendar/auth/google`;
+                }}
+              >
+                {t("calendar.googleCalendarNotConnected.button")}
+              </Button>
+            }
           />
-        </Col>
-        <Col xs={24} md={12}>
-          {calendarSettings.storeSettings && (
-            <CardStoreCalendarSettings
-              settings={calendarSettings.storeSettings}
-            />
-          )}
-        </Col>
-      </Row>
+        </MyCenteredContainer>
+      ) : (
+        <>
+          <h1>{t("calendar.pageTitle")}</h1>
+
+          <Row gutter={[16, 16]}>
+            <Col xs={24} md={12}>
+              <CardPersonalCalendarSettings
+                settings={calendarSettings.userSettings}
+              />
+            </Col>
+            <Col xs={24} md={12}>
+              {calendarSettings.storeSettings && (
+                <CardStoreCalendarSettings
+                  settings={calendarSettings.storeSettings}
+                />
+              )}
+            </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",
       },