connect status

public/locales/de/translation.json

@@ -196,6 +196,20 @@
       "subTitle": "Klicken Sie auf die Schaltfläche unten, um Ihren Google Kalender zu verbinden.",
       "button": "Jetzt verbinden"
     },
+    "googleCalendarPending": {
+      "title": "Vorbereiten von Google Kalender",
+      "subTitle": "Bitte warten Sie, während wir Ihren Google-Kalender vorbereiten. Dies kann einen Moment dauern."
+    },
+    "googleCalendarNoPerm": {
+      "title": "Keine Berechtigungen für Google Calendar",
+      "subTitle": "Bitte erteilen Sie die Berechtigungen für den Zugriff auf den Google-Kalender.",
+      "button": "Erneut verbinden"
+    },
+    "googleCalendarError": {
+      "title": "Fehler beim Verbinden mit Google Calendar",
+      "subTitle": "Bei der Verbindung zu Ihrem Google-Kalender ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
+      "button": "Erneut verbinden"
+    },
     "unlinkGoogleCalendar": {
       "title": "Google Kalender trennen",
       "description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.",

public/locales/en/translation.json

@@ -199,6 +199,20 @@
       "subTitle": "Click on the button below to connect your Google Calendar.",
       "button": "Connect now"
     },
+    "googleCalendarPending": {
+      "title": "Preparing Google Calendar",
+      "subTitle": "Please wait while we prepare your Google Calendar. This may take a moment."
+    },
+    "googleCalendarNoPerm": {
+      "title": "No permissions for Google Calendar",
+      "subTitle": "Please grant the authorisations for access to the Google calendar.",
+      "button": "Connect again"
+    },
+    "googleCalendarError": {
+      "title": "Error when connecting to Google Calendar",
+      "subTitle": "An error occurred while connecting to your Google Calendar. Please try again.",
+      "button": "Connect again"
+    },
     "unlinkGoogleCalendar": {
       "title": "Unlink Google Calendar",
       "description": "For security reasons, you need to enter your password to unlink your Google Calendar.",

src/Pages/Store/Calendar/index.js

@@ -47,6 +47,7 @@ export default function StoreCalendar() {
 
   const [calendarSettings, setCalendarSettings] = useState({});
   const [isRequesting, setIsRequesting] = useState(true);
+  const timer = useRef();
 
   useEffect(() => {
     // delete session cookie
@@ -67,6 +68,31 @@ export default function StoreCalendar() {
       });
   }, []);
 
+  useEffect(() => {
+    // if status is pending, check again after
+
+    if (calendarSettings.status === "PENDING") {
+      timer.current = setTimeout(() => {
+        myFetch({
+          url: "/calendar/settings",
+          method: "GET",
+          notificationApi: notificationApi,
+          t: t,
+        })
+          .then((res) => {
+            setCalendarSettings(res);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }, 2000);
+    }
+
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [calendarSettings]);
+
   if (isRequesting) {
     return (
       <MyCenteredContainer>
@@ -75,56 +101,106 @@ export default function StoreCalendar() {
     );
   }
 
+  const ConnectCalendarButton = ({ text }) => (
+    <Button
+      type="primary"
+      onClick={() => {
+        document.cookie = `session=${getUserSessionFromLocalStorage()}; path=/;`;
+
+        window.location.href = `${Constants.API_ADDRESS}/calendar/auth/google`;
+      }}
+    >
+      {text || t("calendar.googleCalendarNotConnected.button")}
+    </Button>
+  );
+
+  if (calendarSettings.status === "NOT_CONNECTED") {
+    return (
+      <MyCenteredContainer>
+        <Result
+          status="warning"
+          title={t("calendar.googleCalendarNotConnected.title")}
+          subTitle={t("calendar.googleCalendarNotConnected.subTitle")}
+          extra={<ConnectCalendarButton />}
+        />
+      </MyCenteredContainer>
+    );
+  }
+
+  if (calendarSettings.status === "PENDING") {
+    return (
+      <MyCenteredContainer>
+        <Result
+          status="info"
+          title={t("calendar.googleCalendarPending.title")}
+          subTitle={t("calendar.googleCalendarPending.subTitle")}
+          extra={<Spin size="large" />}
+        />
+      </MyCenteredContainer>
+    );
+  }
+
+  if (calendarSettings.status === "NOPERM") {
+    return (
+      <MyCenteredContainer>
+        <Result
+          status="error"
+          title={t("calendar.googleCalendarNoPerm.title")}
+          subTitle={t("calendar.googleCalendarNoPerm.subTitle")}
+          extra={
+            <ConnectCalendarButton
+              text={t("calendar.googleCalendarNoPerm.button")}
+            />
+          }
+        />
+      </MyCenteredContainer>
+    );
+  }
+
+  if (calendarSettings.status === "ERROR") {
+    return (
+      <MyCenteredContainer>
+        <Result
+          status="error"
+          title={t("calendar.googleCalendarError.title")}
+          subTitle={t("calendar.googleCalendarError.subTitle")}
+          extra={
+            <ConnectCalendarButton
+              text={t("calendar.googleCalendarError.button")}
+            />
+          }
+        />
+      </MyCenteredContainer>
+    );
+  }
+
+  // status OK
   return (
     <>
       {notificationContextHolder}
 
-      {calendarSettings.connected === false ? (
+      <h1>{t("calendar.pageTitle")}</h1>
-        <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`;
+      <Row gutter={[16, 16]}>
-                }}
+        <Col xs={24} md={12}>
-              >
+          <CardPersonalCalendarSettings
-                {t("calendar.googleCalendarNotConnected.button")}
+            settings={calendarSettings.userSettings}
-              </Button>
-            }
           />
-        </MyCenteredContainer>
+        </Col>
-      ) : (
+        <Col xs={24} md={12}>
-        <>
+          {calendarSettings.storeSettings && (
-          <h1>{t("calendar.pageTitle")}</h1>
+            <CardStoreCalendarSettings
+              settings={calendarSettings.storeSettings}
+            />
+          )}
+        </Col>
 
-          <Row gutter={[16, 16]}>
+        <Col xs={24}>
-            <Col xs={24} md={12}>
+          <Card title={t("calendar.calendarFrameCustomerView")}>
-              <CardPersonalCalendarSettings
+            <CalendarFrame storeId={storeId} />
-                settings={calendarSettings.userSettings}
+          </Card>
-              />
+        </Col>
-            </Col>
+      </Row>
-            <Col xs={24} md={12}>
-              {calendarSettings.storeSettings && (
-                <CardStoreCalendarSettings
-                  settings={calendarSettings.storeSettings}
-                />
-              )}
-            </Col>
-
-            <Col xs={24}>
-              <Card title={t("calendar.calendarFrameCustomerView")}>
-                <CalendarFrame storeId={storeId} />
-              </Card>
-            </Col>
-          </Row>
-        </>
-      )}
     </>
   );
 }