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
2025-11-14 12:27:30 +00:00
parent 42571949bd
commit f8dee7eb7f
3 changed files with 112 additions and 0 deletions
--- a/apps/scandic-web/app/[lang]/(live)/layout.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx
@@ -22,6 +22,7 @@ import { BookingFlowProviders } from "@/components/BookingFlowProviders"
 import CampaignBanner from "@/components/CampaignBanner"
 import ChatbotScript from "@/components/ChatbotScript"
 import CookieBotConsent from "@/components/CookieBot"
+import { EnvironmentWatermark } from "@/components/EnvironmentWatermark"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
 import { RACRouterProvider } from "@/components/RACRouterProvider"
@@ -58,6 +59,7 @@ export default async function RootLayout(props: LayoutProps<"/[lang]">) {
      </head>
      <body className={DEFAULT_THEME}>
        <div className="root">
+          <EnvironmentWatermark />
          <SessionProvider basePath="/api/web/auth">
            <ClientIntlProvider
              defaultLocale={Lang.en}
--- a/apps/scandic-web/components/EnvironmentWatermark/index.module.css
+++ b/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;
+  }
+}
--- a/apps/scandic-web/components/EnvironmentWatermark/index.tsx
+++ b/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
+}