Merged in feat/sw-3192-no-user (pull request #2680)

feat(SW-3192): Checks if user exists, otherwise logout and show error

* feat(SW-3192): Checks if user exists, otherwise logout and show error

apps/scandic-web/components/UserExists.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { redirect } from "next/navigation"
+import { useSession } from "next-auth/react"
+
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import { userNotFound } from "@/constants/routes/errorPages"
+import { logoutSafely } from "@/constants/routes/handleAuth"
+
+import useLang from "@/hooks/useLang"
+import { isValidClientSession } from "@/utils/clientSession"
+
+export function UserExists() {
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+  const lang = useLang()
+
+  const { data, isLoading: isLoadingUser } = trpc.user.get.useQuery(undefined, {
+    enabled: isUserLoggedIn,
+  })
+
+  if (!isUserLoggedIn) {
+    return null
+  }
+
+  if (isLoadingUser) {
+    return null
+  }
+
+  if (data && "error" in data && data.error) {
+    switch (data.cause) {
+      case "notfound":
+        redirect(
+          `${logoutSafely[lang]}?redirectTo=${encodeURIComponent(userNotFound[lang])}`
+        )
+      default:
+        break
+    }
+  }
+
+  return null
+}

apps/scandic-web/components/UserNotFound/UserNotFound.module.css

@@ -0,0 +1,65 @@
+.container {
+  margin-top: 0;
+  background: var(--Main-Grey-White);
+  position: relative;
+  border-top: 50px solid var(--Main-Grey-White);
+  background-clip: content-box;
+}
+
+.content {
+  position: relative;
+  text-align: center;
+  box-sizing: content-box;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  padding: 70px 30px;
+}
+
+.header {
+  font-family:
+    brandon text,
+    Arial,
+    Helvetica,
+    sans-serif;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #483729;
+}
+
+.pitch {
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+.text {
+  font-family:
+    Helvetica Neue,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-weight: 300;
+  line-height: normal;
+  text-transform: none;
+  font-size: 20px;
+  color: #333;
+}
+
+@media screen and (min-width: 740px) {
+  .content {
+    text-align: left;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .header {
+    font-size: 46px;
+  }
+
+  .text {
+    font-size: 24px;
+  }
+}

apps/scandic-web/components/UserNotFound/UserNotFound.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import styles from "./UserNotFound.module.css"
+
+export function UserNotFound() {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <h1 className={styles.header}>
+          {intl.formatMessage({
+            defaultMessage: "User not found",
+          })}
+        </h1>
+        <div className={styles.pitch}>
+          <p className={styles.text}>
+            {intl.formatMessage({
+              defaultMessage: "Please try again or contact customer service!",
+            })}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}