From a24153ca709f8714bf6cb78d9fd2768df05ca324 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 24 Feb 2024 23:00:35 +0100
Subject: [PATCH] intro video

---
 env.example                         | 13 ++++++++++++-
 public/locales/de/translation.json  |  3 +++
 public/locales/en/translation.json  |  3 +++
 src/Components/MyContainer/index.js |  8 ++++++--
 src/Pages/Dashboard/index.js        | 27 ++++++++++++++++++++++-----
 5 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/env.example b/env.example
index f1c1d4c..edb7157 100644
--- a/env.example
+++ b/env.example
@@ -1 +1,12 @@
-REACT_APP_RECAPTCHA_SITE_KEY=
\ No newline at end of file
+REACT_APP_RECAPTCHA_SITE_KEY=
+
+REACT_APP_PRIVACY_POLICY_URL=
+
+REACT_APP_EMBED_CALENDAR_ADDRESS=
+REACT_APP_EMBED_CALENDAR_SCRIPT_ADDRESS=
+
+REACT_APP_CLARITY_PROJECT_ID=
+REACT_APP_SUPPORT_EMAIL=
+REACT_APP_ZEITADLER_HOMEPAGE_PRICING=
+
+REACT_APP_DASHBOARD_INTRODUCTION_VIDEO=""
\ No newline at end of file
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 07d937b..f9ffa48 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -130,6 +130,9 @@
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
     "paymentPlanUpgradeButton": "Jetzt upgraden"
   },
+  "dashboard": {
+    "pageTitle": "Einführung"
+  },
   "employees": {
     "pageTitle": "Mitarbeiter",
     "addEmployee": "Mitarbeiter anlegen",
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index d404ba5..0b53703 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -130,6 +130,9 @@
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} left",
     "paymentPlanUpgradeButton": "Upgrade now"
   },
+  "dashboard": {
+    "pageTitle": "Introduction"
+  },
   "employees": {
     "pageTitle": "Employees",
     "addEmployee": "Add employee",
diff --git a/src/Components/MyContainer/index.js b/src/Components/MyContainer/index.js
index b724000..a8cd512 100644
--- a/src/Components/MyContainer/index.js
+++ b/src/Components/MyContainer/index.js
@@ -1,4 +1,8 @@
-export default function MyCenteredContainer({ children, fullHeight = false }) {
+export default function MyCenteredContainer({
+  children,
+  fullHeight = false,
+  height = "100vh",
+}) {
   return (
     <div
       style={{
@@ -7,7 +11,7 @@ export default function MyCenteredContainer({ children, fullHeight = false }) {
         justifyContent: "center",
         alignContent: "center",
         alignItems: "center",
-        height: fullHeight ? "100vh" : "85.3vh",
+        height: fullHeight ? height : "85.3vh",
       }}
     >
       {children}
diff --git a/src/Pages/Dashboard/index.js b/src/Pages/Dashboard/index.js
index b4128ee..9f5f497 100644
--- a/src/Pages/Dashboard/index.js
+++ b/src/Pages/Dashboard/index.js
@@ -1,13 +1,30 @@
-import { Card } from "antd";
+import { Card, Spin } from "antd";
+import { useState } from "react";
+import MyCenteredContainer from "../../Components/MyContainer";
+import { useTranslation } from "react-i18next";
 
 export default function Dashboard() {
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = useState(true);
+
   return (
-    <Card title="Dashboard" style={{ height: "100%" }}>
+    <Card title={t("dashboard.pageTitle")}>
+      {isLoading && (
+        <MyCenteredContainer fullHeight height={616}>
+          <Spin size="large" />
+        </MyCenteredContainer>
+      )}
+
       <iframe
-        src="https://www.youtube.com/watch?v=iSwaz71_YkE"
+        src={process.env.REACT_APP_DASHBOARD_INTRODUCTION_VIDEO}
+        onLoad={() => setIsLoading(false)}
+        width={1096}
+        height={616}
         style={{
-          width: "100%",
-          height: "100%",
+          border: "none",
+          zIndex: 2,
+          display: isLoading ? "none" : "block",
         }}
       />
     </Card>