calendar frame

src/Pages/Store/Calendar/index.js

@@ -19,7 +19,7 @@ import {
   getUserSessionFromLocalStorage,
   myFetch,
 } from "../../../utils";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import MyCenteredContainer from "../../../Components/MyContainer";
 import {
   MyCalendarMaxFutureBookingDaysFormInput,
@@ -34,9 +34,11 @@ import MyModal, {
   MyModalCloseConfirmButtonFooter,
   MyModalCloseSaveButtonFooter,
 } from "../../../Components/MyModal";
+import { useParams } from "react-router-dom";
 
 export default function StoreCalendar() {
   const { t } = useTranslation();
+  const { storeId } = useParams();
 
   const [calendarSettings, setCalendarSettings] = useState({});
   const [isRequesting, setIsRequesting] = useState(true);
@@ -102,6 +104,10 @@ export default function StoreCalendar() {
                 />
               )}
             </Col>
+
+            <Col xs={24}>
+              <CalendarFrame storeId={storeId} />
+            </Col>
           </Row>
         </>
       )}
@@ -109,6 +115,27 @@ export default function StoreCalendar() {
   );
 }
 
+function CalendarFrame({ storeId }) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <>
+      {isLoading && (
+        <MyCenteredContainer>
+          <Spin size="large" />
+        </MyCenteredContainer>
+      )}
+      <iframe
+        onLoad={() => setIsLoading(false)}
+        style={{ border: 0, borderRadius: 10 }}
+        width="100%"
+        height={600}
+        src={`${Constants.EMBED_CALENDAR_ADDRESS}${storeId}`}
+      />
+    </>
+  );
+}
+
 function CardPersonalCalendarSettings({ settings }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();

src/utils.js

@@ -39,6 +39,7 @@ export const Constants = {
   API_ADDRESS: apiAddress,
   STATIC_CONTENT_ADDRESS: staticContentAddress,
   WS_ADDRESS: wsAddress,
+  EMBED_CALENDAR_ADDRESS: "https://calendar.ex.umbach.dev/embed/?id=",
   ROUTE_PATHS: {
     OVERVIEW: "/",
     WEBSITE_COLOR_PALETTE: "/website/color-palette",