Merged in chore/watermark-environments (pull request #3159)

feat: display environment watermark

* feat: display environment watermark

* Merge branch 'master' of bitbucket.org:scandic-swap/web into chore/watermark-environments

* remove unused function


Approved-by: Linus Flood

apps/scandic-web/components/EnvironmentWatermark/index.module.css

@@ -0,0 +1,36 @@
+.environmentWatermark {
+  position: fixed;
+  top: 35%;
+  left: 0px;
+  padding: 4px 8px;
+  z-index: 9999;
+  text-align: center;
+
+  text-transform: uppercase;
+  transform: rotate(-90deg);
+  transform-origin: top left;
+  font-family: var(--Body-Supporting-text-Font-family);
+  font-size: 0.8rem;
+  user-select: none;
+  pointer-events: none;
+
+  &.preprod {
+    color: white;
+    background: red;
+  }
+
+  &.stage {
+    color: white;
+    background: navy;
+  }
+
+  &.test {
+    color: white;
+    background: darkgoldenrod;
+  }
+
+  &.development {
+    color: white;
+    background: green;
+  }
+}

apps/scandic-web/components/EnvironmentWatermark/index.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+
+import { env } from "@/env/client"
+
+import styles from "./index.module.css"
+
+const variants = cva(styles.environmentWatermark, {
+  variants: {
+    environment: {
+      preprod: styles.preprod,
+      stage: styles.stage,
+      test: styles.test,
+      development: styles.development,
+    },
+  },
+})
+const namedEnvironments = ["preprod", "stage", "test", "development"] as const
+
+export function EnvironmentWatermark() {
+  if (
+    !env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ||
+    env.NEXT_PUBLIC_SENTRY_ENVIRONMENT.localeCompare("production") === 0
+  ) {
+    return null
+  }
+
+  const { environment, name } = getEnvironmentName()
+  const displayValue = name === environment ? name : `${name} (${environment})`
+
+  return (
+    <div className={variants({ environment: environment })}>
+      <span>{displayValue}</span>
+    </div>
+  )
+}
+
+function getEnvironmentName(): {
+  name: string
+  environment: (typeof namedEnvironments)[number]
+} {
+  const environment = getEnvironmentType()
+  const hostname =
+    typeof window !== "undefined" ? window.location.hostname : undefined
+
+  if (hostname === "localhost") {
+    return { name: "development", environment }
+  }
+
+  if (hostname?.endsWith("netlify.app")) {
+    const featureBranch = hostname.includes("--")
+      ? hostname.split("--").at(0)
+      : null
+
+    if (featureBranch) {
+      return {
+        name: `${featureBranch.slice(0, 10)}`,
+        environment,
+      }
+    }
+  }
+
+  return { name: environment, environment }
+}
+
+function getEnvironmentType() {
+  const environment =
+    namedEnvironments.find(
+      (e) => e.localeCompare(env.NEXT_PUBLIC_SENTRY_ENVIRONMENT) === 0
+    ) ?? "test"
+
+  return environment
+}