Merged in chore/fix-partner-sas-todos (pull request #2823)

chore: Fix partner-sas todos

* Add onError to TrpcProvider

* Add AdobeSDKScript

* Add GTMScript

* Add adobeDataLayer script

* Add ReactQueryDevtools

* Move components to correct folder


Approved-by: Joakim Jäderberg

apps/partner-sas/components/AdobeSDKScript.tsx

@@ -0,0 +1,13 @@
+import Script from "next/script"
+
+import { env } from "@/env/server"
+
+export default function AdobeSDKScript() {
+  return env.ADOBE_SDK_SCRIPT_SRC ? (
+    <Script
+      data-cookieconsent="statistics"
+      src={env.ADOBE_SDK_SCRIPT_SRC}
+      async
+    />
+  ) : null
+}

apps/partner-sas/components/Footer/Footer.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import Link from "next/link"
+
+import Image from "@scandic-hotels/design-system/Image"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
+
+import styles from "./footer.module.css"
+
+export function Footer() {
+  return (
+    <div className={styles.root}>
+      <div className={styles.top}>
+        <div>
+          <Image
+            alt="SAS logotype"
+            className={styles.sasLogo}
+            src="/_static/img/sas-logotype.svg"
+            height={32}
+            width={90}
+            sizes="100vw"
+          />
+          <PoweredByScandic />
+        </div>
+        <div className={styles.links}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Link href="#" className={styles.link}>
+              Privacy policy
+            </Link>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Link href="#" className={styles.link}>
+              Terms of use
+            </Link>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Link href="#" className={styles.link}>
+              Your privacy choices
+            </Link>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Link href="#" className={styles.link}>
+              Cookie Policy
+            </Link>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Link href="#" className={styles.link}>
+              More links
+            </Link>
+          </Typography>
+        </div>
+      </div>
+      <div className={styles.bottom}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>© 1999 Something something.</p>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            [Place holder text], LP and SAS are not responsible for content on
+            external Web sites.
+          </p>
+        </Typography>
+      </div>
+    </div>
+  )
+}

apps/partner-sas/components/Footer/footer.module.css

@@ -0,0 +1,48 @@
+.root {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.sasLogo {
+  height: auto;
+  width: 90px;
+}
+
+.top {
+  padding: 40px 16px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media screen and (min-width: 768px) {
+    padding: 40px;
+  }
+}
+
+.bottom {
+  background-color: var(--TEMP-sas-default);
+  color: white;
+  padding: 32px 16px 40px;
+
+  @media screen and (min-width: 768px) {
+    padding: 32px 40px 40px;
+  }
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+
+.link {
+  text-decoration: none;
+  color: var(--TEMP-sas-40);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

apps/partner-sas/components/GTMScript.tsx

@@ -0,0 +1,31 @@
+import Script from "next/script"
+
+import { env } from "@/env/server"
+
+export default function GTMScript() {
+  return env.ENABLE_GTMSCRIPT ? (
+    <Script
+      id="gtm-script-tag"
+      data-cookieconsent="statistics"
+      dangerouslySetInnerHTML={{
+        __html: `
+              try {
+                (function(w,d,s,l,i){
+                  w[l]=w[l]||[];
+                  w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
+                  var f = d.getElementsByTagName(s)[0],
+                      j = d.createElement(s),
+                      dl = l != 'dataLayer' ? '&l=' + l : '';
+                  j.async = true;
+                  j.src = 'https://analytics.scandichotels.com/gtm.js?id=' + i + dl;
+                  f.parentNode.insertBefore(j, f);
+                })(window,document,'script','dataLayer','GTM-KNJCW67W');
+              } catch (e) {
+                console.error('Failed to load GTM script', e);
+              }
+            `,
+      }}
+      async
+    />
+  ) : null
+}

apps/partner-sas/components/Header/Header.tsx

@@ -0,0 +1,25 @@
+import Image from "@scandic-hotels/design-system/Image"
+
+import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
+
+import styles from "./header.module.css"
+
+export function Header() {
+  return (
+    <>
+      <header className={styles.header}>
+        <Image
+          alt="SAS logotype"
+          className={styles.logo}
+          src="/_static/img/sas-logotype-white.svg"
+          height={32}
+          width={90}
+          sizes="100vw"
+        />
+      </header>
+      <div className={styles.poweredBy}>
+        <PoweredByScandic />
+      </div>
+    </>
+  )
+}

apps/partner-sas/components/Header/header.module.css

@@ -0,0 +1,25 @@
+.header {
+  background-color: var(--TEMP-sas-default);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+
+  @media screen and (min-width: 768px) {
+    padding: 20px 40px;
+  }
+}
+
+.logo {
+  height: auto;
+  width: 90px;
+}
+
+.poweredBy {
+  padding: 6px 16px;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+
+  @media screen and (min-width: 768px) {
+    padding: 8px 40px;
+  }
+}

apps/partner-sas/components/PoweredByScandic/PoweredByScandic.tsx

@@ -0,0 +1,25 @@
+import Image from "@scandic-hotels/design-system/Image"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./poweredByScandic.module.css"
+
+export function PoweredByScandic() {
+  return (
+    <div className={styles.root}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+        <p>Powered by</p>
+      </Typography>
+      <div>
+        <Image
+          alt="Scandic"
+          className={styles.logo}
+          src="/_static/img/scandic-logotype.svg"
+          height={14}
+          width={65}
+          sizes="100vw"
+        />
+      </div>
+    </div>
+  )
+}

apps/partner-sas/components/PoweredByScandic/poweredByScandic.module.css

@@ -0,0 +1,13 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--TEMP-sas-20);
+}
+
+.logo {
+  max-height: 14px;
+  max-width: 65px;
+  height: auto;
+  width: 100%;
+}

apps/partner-sas/components/TrpcProvider.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { TRPCClientError } from "@trpc/client"
+
+import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
+import { logger } from "@scandic-hotels/common/logger"
+import { SessionExpiredError } from "@scandic-hotels/trpc/errors"
+import { TrpcProvider as InternalTrpcProvider } from "@scandic-hotels/trpc/Provider"
+
+import useLang from "@/hooks/useLang"
+
+import type { AnyTRPCRouter } from "@trpc/server"
+
+export default function TrpcProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const lang = useLang()
+
+  return (
+    <InternalTrpcProvider
+      onError={(error) => {
+        if (error instanceof TRPCClientError) {
+          const appError: TRPCClientError<AnyTRPCRouter> = error
+          logger.error("trpc error", { appError })
+          if (appError.data?.code === "UNAUTHORIZED") {
+            if (appError.data?.cause instanceof SessionExpiredError) {
+              // TODO verify login url
+              const loginUrl = login[lang]
+              window.location.assign(loginUrl)
+            }
+          }
+        }
+      }}
+    >
+      {children}
+    </InternalTrpcProvider>
+  )
+}