diff --git a/package-lock.json b/package-lock.json index 594cdb1..9a08d76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^13.0.1", + "react-microsoft-clarity": "^1.2.0", "react-qr-scanner": "^1.0.0-alpha.11", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", @@ -18687,6 +18688,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-microsoft-clarity": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-microsoft-clarity/-/react-microsoft-clarity-1.2.0.tgz", + "integrity": "sha512-a1bsJR1uN1daWq3cBc7NheEGPXrotMRE0oFeRio7kXvHawzQfqu5iX9BoYFF9zRUL0dn+Mz57h1fNlcv3pqXEg==" + }, "node_modules/react-qr-scanner": { "version": "1.0.0-alpha.11", "resolved": "https://registry.npmjs.org/react-qr-scanner/-/react-qr-scanner-1.0.0-alpha.11.tgz", diff --git a/package.json b/package.json index d57f14a..688fe14 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^13.0.1", + "react-microsoft-clarity": "^1.2.0", "react-qr-scanner": "^1.0.0-alpha.11", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", diff --git a/public/index.html b/public/index.html index 55b861e..1457b1e 100644 --- a/public/index.html +++ b/public/index.html @@ -29,19 +29,4 @@
- - diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 3350525..c826373 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -229,6 +229,8 @@ }, "userProfile": { "title": "Ihr Profil", - "language": "Sprache" + "language": "Sprache", + "analytics": "Analytik", + "analyticsDescription": "Dazu gehören Informationen über die Nutzung unseres Dashboards, wie die besuchten Seiten, die Verweildauer auf den Seiten und die allgemeine Interaktion mit den Seiten. Dies hilft uns, unser Dashboard zu verbessern und es benutzerfreundlicher zu gestalten." } } diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 172844f..c288c66 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -232,6 +232,8 @@ }, "userProfile": { "title": "Your profile", - "language": "Language" + "language": "Language", + "analytics": "Analytics", + "analyticsDescription": "This includes information about the use of our dashboard, such as the visited pages, the length of stay on the pages and the general interaction with the pages. This helps us to improve our dashboard and make it more user-friendly." } } diff --git a/src/App.js b/src/App.js index dce815d..0ef649a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import "antd/dist/reset.css"; import "./App.css"; import Login from "./Pages/Login"; import { Layout, Spin } from "antd"; -import { UseUserSession, myFetch } from "./utils"; +import { Constants, UseUserSession, myFetch } from "./utils"; import DashboardLayout from "./Components/DashboardLayout"; import SideBarProvider from "./Contexts/SideBarContext"; import { AppProvider } from "./Contexts/AppContext"; @@ -11,6 +11,7 @@ import { UsersProvider } from "./Contexts/UsersContext"; import HeaderProvider from "./Contexts/HeaderContext"; import { useEffect, useState } from "react"; import StoresProvider from "./Contexts/StoresContext"; +import { clarity } from "react-microsoft-clarity"; export default function App() { /*const [notificationApi, notificationContextHolder] = @@ -30,6 +31,10 @@ export default function App() { }) .then((data) => { setAppUserData(data); + + if (data.user.analytics_enabled) { + clarity.init(Constants.CLARITY_PROJECT_ID); + } }) .catch(() => { setUserSession(); diff --git a/src/Pages/Store/Settings/index.js b/src/Pages/Store/Settings/index.js index 2c83341..54bc81c 100644 --- a/src/Pages/Store/Settings/index.js +++ b/src/Pages/Store/Settings/index.js @@ -19,7 +19,7 @@ export default function StoreSettings() { const [isRequesting, setIsRequesting] = useState(true); const [requestState, setRequestState] = useState(RequestState.INIT); - const [storeData, setStoreData] = useState({}); + //const [storeData, setStoreData] = useState({}); const delayTimeout = useRef(); const companyName = Form.useWatch("companyName", form); @@ -35,7 +35,7 @@ export default function StoreSettings() { t: t, }) .then((data) => { - setStoreData(data.store); + // setStoreData(data.store); form.setFieldsValue({ companyName: data.store.name, diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js index 9a727f7..8a715b2 100644 --- a/src/Pages/UserProfile/index.js +++ b/src/Pages/UserProfile/index.js @@ -1,14 +1,86 @@ -import { Button, Card, Select, Typography, notification } from "antd"; +import { + Button, + Card, + Checkbox, + Form, + Select, + Skeleton, + Space, + Switch, + Typography, + notification, +} from "antd"; import { myFetch } from "../../utils"; import { useTranslation } from "react-i18next"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; +import { + RequestState, + RequestStateItem, +} from "../../Components/MyRequestStateItem"; export default function UserProfile({ setUserSession }) { const { t, i18n } = useTranslation(); const [notificationApi, notificationContextHolder] = notification.useNotification(); + const [form] = Form.useForm(); + const [requestState, setRequestState] = useState(RequestState.INIT); const [isRequestingLogout, setIsRequestingLogout] = useState(false); + const delayTimeout = useRef(); + + const language = Form.useWatch("language", form); + const analytics = Form.useWatch("analytics", form); + + useEffect(() => { + myFetch({ + url: "/user/profile/settings", + method: "GET", + notificationApi: notificationApi, + t: t, + }) + .then((data) => { + form.setFieldsValue({ + language: data.language, + analytics: data.analytics_enabled, + }); + }) + .catch((errStatus) => { + console.log(errStatus); + }); + }, []); + + useEffect(() => { + if (language === undefined || analytics === undefined) return; + + if (RequestState.INIT === requestState) { + setRequestState(RequestState.NOTHING); + return; + } + + setRequestState(RequestState.REQUESTING); + + if (delayTimeout.current) { + clearTimeout(delayTimeout.current); + } + + delayTimeout.current = setTimeout(() => { + myFetch({ + url: "/user/profile/settings", + method: "POST", + body: { + language: language, + analyticsEnabled: analytics, + }, + notificationApi: notificationApi, + t: t, + }) + .then(() => setRequestState(RequestState.SUCCESS)) + .catch((errStatus) => { + console.log(errStatus); + setRequestState(RequestState.FAILED); + }); + }, 500); + }, [language, analytics]); return ( <> @@ -17,46 +89,71 @@ export default function UserProfile({ setUserSession }) { { - setIsRequestingLogout(true); + + - myFetch({ - url: "/user/auth/logout", - method: "DELETE", - notificationApi: notificationApi, - t: t, - }) - .then(() => { - setUserSession(); - window.location.href = "/"; + + .then(() => { + setUserSession(); + window.location.href = "/"; + }) + .catch(() => setIsRequestingLogout(false)); + }} + > + {t("common.button.logout")} + + } > - {t("userProfile.language")} +
+ + {requestState === RequestState.INIT ? ( + + ) : ( + i18n.changeLanguage(e)} - /> + + {requestState === RequestState.INIT ? ( + + ) : ( + {t("userProfile.analytics")} + )} + +
); diff --git a/src/utils.js b/src/utils.js index 50582a0..52a690c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -70,6 +70,7 @@ export const Constants = { MAX_CALENDAR_EARLIEST_BOOKING_TIME: 60 * 24, // 24 hours in minutes }, DELAY_ACCOUNT_NAME_CHECK: 250, + CLARITY_PROJECT_ID: "kr0pale8uy", }; export const AppStyle = {