From 87f456445c3992efc7abed890a2ad9f76d31f9a9 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com>
Date: Mon, 7 Oct 2024 07:21:57 +0000
Subject: [PATCH] v3 - language switcher and translated legal links (#719)

* feat(i18n): language switcher + translated legal links

* refactor(queries): deduplicate DEFAULT_LANGUAGE_QUERY

* fix(siteSettings): inline document id in groq query

attempt to fix following error at build:
> The error was caused by importing 'sanity/lib/index.mjs' in './studio/schemas/documents/siteSettings/brandAssets.ts'.

* feat(LanguageSwitcher): include current language
---
 src/app/(main)/{ => [lang]}/layout.module.css |   0
 src/app/(main)/{ => [lang]}/layout.tsx        |   8 +-
 src/app/(main)/[lang]/page.tsx                |   6 +-
 .../languageSwitcher/LanguageSwitcher.tsx     |  52 +++++++++
 .../languageSwitcher.module.css               |  11 ++
 src/components/navigation/footer/Footer.tsx   |   3 +-
 .../navigation/footer/FooterPreview.tsx       |  21 +++-
 src/components/navigation/header/Header.tsx   |   5 +
 .../navigation/header/header.module.css       |   8 ++
 src/middlewares/languageMiddleware.ts         |   2 +-
 src/utils/get.tsx                             |   2 +-
 src/utils/hooks/useLanguage.ts                | 107 ++++++++++++++++++
 studio/lib/interfaces/legalDocuments.ts       |   1 +
 studio/lib/interfaces/navigation.ts           |   1 +
 studio/lib/interfaces/slugTranslations.ts     |  10 +-
 studio/lib/queries/languages.ts               |   5 -
 studio/lib/queries/siteSettings.ts            |   5 +-
 17 files changed, 225 insertions(+), 22 deletions(-)
 rename src/app/(main)/{ => [lang]}/layout.module.css (100%)
 rename src/app/(main)/{ => [lang]}/layout.tsx (95%)
 create mode 100644 src/components/languageSwitcher/LanguageSwitcher.tsx
 create mode 100644 src/components/languageSwitcher/languageSwitcher.module.css
 create mode 100644 src/utils/hooks/useLanguage.ts
 delete mode 100644 studio/lib/queries/languages.ts

diff --git a/src/app/(main)/layout.module.css b/src/app/(main)/[lang]/layout.module.css
similarity index 100%
rename from src/app/(main)/layout.module.css
rename to src/app/(main)/[lang]/layout.module.css
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/[lang]/layout.tsx
similarity index 95%
rename from src/app/(main)/layout.tsx
rename to src/app/(main)/[lang]/layout.tsx
index 1e54246fe..c33decf46 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/[lang]/layout.tsx
@@ -26,8 +26,12 @@ const hasValidData = (data: unknown) => data && Object.keys(data).length > 0;
 
 export default async function Layout({
   children,
+  params,
 }: Readonly<{
   children: React.ReactNode;
+  params: {
+    lang: string;
+  };
 }>) {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
@@ -47,7 +51,7 @@ export default async function Layout({
     ),
     loadStudioQuery<LegalDocument[]>(
       LEGAL_DOCUMENTS_BY_LANG_QUERY,
-      { language: "en" }, //TODO: replace this with selected language for the page
+      { language: params.lang },
       { perspective },
     ),
     loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
@@ -90,6 +94,8 @@ export default async function Layout({
           initialCompanyInfo={initialCompanyInfo}
           initialBrandAssets={initialBrandAssets}
           initialSoMe={initialSoMe}
+          initialLegal={initialLegal}
+          language={params.lang}
         />
       ) : (
         <Footer
diff --git a/src/app/(main)/[lang]/page.tsx b/src/app/(main)/[lang]/page.tsx
index 4ae510129..e63a51439 100644
--- a/src/app/(main)/[lang]/page.tsx
+++ b/src/app/(main)/[lang]/page.tsx
@@ -10,9 +10,11 @@ import { client } from "studio/lib/client";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import { PageBuilder } from "studio/lib/interfaces/pages";
 import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
-import { LANGUAGES_QUERY } from "studio/lib/queries/languages";
 import { PAGE_QUERY, SEO_PAGE_QUERY } from "studio/lib/queries/pages";
-import { LANDING_PAGE_REF_QUERY } from "studio/lib/queries/siteSettings";
+import {
+  LANDING_PAGE_REF_QUERY,
+  LANGUAGES_QUERY,
+} from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
 export async function generateMetadata(): Promise<Metadata> {
diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
new file mode 100644
index 000000000..dfdff5485
--- /dev/null
+++ b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Fragment } from "react";
+
+import Text from "src/components/text/Text";
+import useLanguage from "src/utils/hooks/useLanguage";
+
+import styles from "./languageSwitcher.module.css";
+
+export default function LanguageSwitcher() {
+  const { slugTranslations, language, defaultLanguage } = useLanguage();
+
+  const currentLanguage = language ?? defaultLanguage;
+
+  // make sure the current language is the first item in the languages list
+  const sortedTranslations = slugTranslations?.toSorted((a, b) =>
+    a?.language?.id === currentLanguage?.id
+      ? -1
+      : b?.language?.id === currentLanguage?.id
+        ? 1
+        : 0,
+  );
+
+  return (
+    <ul className={styles.list}>
+      {sortedTranslations?.map((slugTranslation, index) => {
+        if (slugTranslation?.language === undefined) {
+          return null;
+        }
+        const linkText = (
+          <Text type={"small"}>
+            {slugTranslation.language.id.toUpperCase()}
+          </Text>
+        );
+        return (
+          <Fragment key={slugTranslation.language.id}>
+            <li>
+              {currentLanguage === undefined ||
+              slugTranslation.language.id !== currentLanguage.id ? (
+                <Link href={slugTranslation.slug}>{linkText}</Link>
+              ) : (
+                linkText
+              )}
+            </li>
+            {index < sortedTranslations.length - 1 && (
+              <span className={styles.divider}></span>
+            )}
+          </Fragment>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css
new file mode 100644
index 000000000..a5e6b5773
--- /dev/null
+++ b/src/components/languageSwitcher/languageSwitcher.module.css
@@ -0,0 +1,11 @@
+.list {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.divider {
+  border-left: 1px solid var(--primary-black);
+  flex-grow: 1;
+}
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
index 2d227bd8e..6ac67c2fe 100644
--- a/src/components/navigation/footer/Footer.tsx
+++ b/src/components/navigation/footer/Footer.tsx
@@ -52,7 +52,7 @@ const Footer = ({
           </Text>
         </li>
         {legalData?.map((legal) => {
-          const link = {
+          const link: ILink = {
             _key: legal._id,
             _type: legal._type,
             linkTitle: legal.basicTitle,
@@ -60,6 +60,7 @@ const Footer = ({
             internalLink: {
               _ref: legal.slug.current,
             },
+            language: legal.language,
           };
           return (
             <li key={legal._id}>
diff --git a/src/components/navigation/footer/FooterPreview.tsx b/src/components/navigation/footer/FooterPreview.tsx
index a7c38a8bc..9659ef439 100644
--- a/src/components/navigation/footer/FooterPreview.tsx
+++ b/src/components/navigation/footer/FooterPreview.tsx
@@ -3,9 +3,13 @@ import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/admin";
+import {
+  COMPANY_INFO_QUERY,
+  LEGAL_DOCUMENTS_BY_LANG_QUERY,
+} from "studio/lib/queries/admin";
 import {
   BRAND_ASSETS_QUERY,
   NAV_QUERY,
@@ -27,28 +31,37 @@ export default function FooterPreview({
   initialCompanyInfo,
   initialBrandAssets,
   initialSoMe,
+  initialLegal,
+  language,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
   initialBrandAssets: QueryResponseInitial<BrandAssets>;
   initialSoMe: QueryResponseInitial<SocialMediaProfiles | null>;
+  initialLegal: QueryResponseInitial<LegalDocument[] | null>;
+  language: string;
 }) {
   const newNav = useInitialData(NAV_QUERY, initialNav);
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
   const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOME_PROFILES_QUERY, initialSoMe);
-  // TODO: add legal preview
+  const { data: newLegal } = useQuery(
+    LEGAL_DOCUMENTS_BY_LANG_QUERY,
+    { language },
+    { initial: initialLegal },
+  );
   return (
     newNav &&
     newCompanyInfo &&
     newBrandAssets &&
-    newSoMedata && (
+    newSoMedata &&
+    newLegal && (
       <Footer
         navigationData={newNav}
         companyInfo={newCompanyInfo}
         brandAssets={newBrandAssets}
         soMeData={newSoMedata}
-        legalData={[]}
+        legalData={newLegal}
       />
     )
   );
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index 259cf7291..72dd90fcb 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { FocusOn } from "react-focus-on";
 
+import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
 import { getHref } from "src/utils/get";
@@ -85,6 +86,9 @@ export const Header = ({ data, assets }: IHeader) => {
             )}
             {renderPageLinks(links, false, pathname)}
             {renderPageCTAs(ctas, false)}
+            <div className={styles.languageSwitcher}>
+              <LanguageSwitcher />
+            </div>
             <button
               aria-haspopup="true"
               aria-controls={sidebarID}
@@ -102,6 +106,7 @@ export const Header = ({ data, assets }: IHeader) => {
             >
               {renderPageLinks(sidebarLinks, true, pathname)}
               {renderPageCTAs(sidebarCtas, true)}
+              <LanguageSwitcher />
             </div>
           )}
         </nav>
diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
index 181627a8b..78ba3daaf 100644
--- a/src/components/navigation/header/header.module.css
+++ b/src/components/navigation/header/header.module.css
@@ -106,6 +106,14 @@
   justify-content: flex-end;
 }
 
+.languageSwitcher {
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: flex;
+  }
+}
+
 .mobileMenu {
   flex: 1;
 
diff --git a/src/middlewares/languageMiddleware.ts b/src/middlewares/languageMiddleware.ts
index 3fca40f71..f9d4f7f58 100644
--- a/src/middlewares/languageMiddleware.ts
+++ b/src/middlewares/languageMiddleware.ts
@@ -8,7 +8,7 @@ import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
 import {
   DEFAULT_LANGUAGE_QUERY,
   LANGUAGES_QUERY,
-} from "studio/lib/queries/languages";
+} from "studio/lib/queries/siteSettings";
 import {
   SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
   SLUG_TRANSLATIONS_TO_LANGUAGE_QUERY,
diff --git a/src/utils/get.tsx b/src/utils/get.tsx
index 443661d77..b281c4e34 100644
--- a/src/utils/get.tsx
+++ b/src/utils/get.tsx
@@ -7,7 +7,7 @@ export const getHref = (link: ILink): string => {
     case LinkType.Internal:
       if (link.internalLink?._ref) {
         try {
-          return `/${link.internalLink._ref}${link.anchor ? `#${link.anchor}` : ""}`;
+          return `${link.language ? `/${link.language}` : ""}/${link.internalLink._ref}${link.anchor ? `#${link.anchor}` : ""}`;
         } catch (error) {
           console.error("Error fetching page:", error);
           return hash;
diff --git a/src/utils/hooks/useLanguage.ts b/src/utils/hooks/useLanguage.ts
new file mode 100644
index 000000000..ffdeafd38
--- /dev/null
+++ b/src/utils/hooks/useLanguage.ts
@@ -0,0 +1,107 @@
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { fetchWithToken } from "studio/lib/fetchWithToken";
+import { SlugTranslations } from "studio/lib/interfaces/slugTranslations";
+import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
+import { LANGUAGES_QUERY } from "studio/lib/queries/siteSettings";
+import { SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY } from "studio/lib/queries/slugTranslations";
+
+/**
+ * Client hook providing access to the available Sanity translations for the given slug
+ *
+ * Includes the trivial translation for the current language
+ *
+ * @param currentLanguage the language of the given slug
+ * @param slug slug to translate
+ * @param availableLanguages languages with possible slug translation
+ */
+function useSlugTranslations(
+  currentLanguage: LanguageObject | undefined,
+  slug: string,
+  availableLanguages: LanguageObject[] | null,
+) {
+  const [slugTranslationsData, setSlugTranslationsData] =
+    useState<SlugTranslations | null>(null);
+
+  useEffect(() => {
+    if (currentLanguage === undefined) {
+      return;
+    }
+    fetchWithToken<SlugTranslations | null>(
+      SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+      {
+        slug,
+        language: currentLanguage?.id,
+      },
+    ).then(setSlugTranslationsData);
+  }, [currentLanguage, slug]);
+
+  const slugTranslations =
+    slug === ""
+      ? availableLanguages?.map((lang) => ({
+          slug: "",
+          language: lang.id,
+        }))
+      : slugTranslationsData?._translations;
+
+  // include full language object, not just id, in slug translation
+  return slugTranslations?.map(
+    (translation) =>
+      translation && {
+        slug: `/${translation.language}/${translation.slug}`,
+        language: availableLanguages?.find(
+          (lang) => lang.id === translation.language,
+        ),
+      },
+  );
+}
+
+/**
+ * Client hook providing access to:
+ * - the currently selected language from URL
+ * - all enabled languages in Sanity
+ * - default language selected in Sanity
+ * - available translations of the current page slug
+ */
+export default function useLanguage() {
+  const pathname = usePathname();
+
+  const [availableLanguages, setAvailableLanguages] = useState<
+    LanguageObject[] | null
+  >(null);
+
+  const defaultLanguage = availableLanguages?.find(
+    (language) => language.default,
+  );
+
+  const language = availableLanguages?.find(
+    ({ id }) => pathname.startsWith(`/${id}/`) || pathname === `/${id}`,
+  );
+
+  const currentLanguage = language ?? defaultLanguage;
+
+  const slug = pathname
+    .split("/")
+    .slice(language !== undefined ? 2 : 1)
+    .join("/");
+
+  const slugTranslations = useSlugTranslations(
+    currentLanguage,
+    slug,
+    availableLanguages,
+  );
+
+  useEffect(() => {
+    fetchWithToken<LanguageObject[] | null>(LANGUAGES_QUERY).then((data) =>
+      setAvailableLanguages(data),
+    );
+  }, []);
+
+  return {
+    language,
+    defaultLanguage,
+    availableLanguages,
+    slugTranslations,
+  };
+}
diff --git a/studio/lib/interfaces/legalDocuments.ts b/studio/lib/interfaces/legalDocuments.ts
index ac02152e7..2b230a81c 100644
--- a/studio/lib/interfaces/legalDocuments.ts
+++ b/studio/lib/interfaces/legalDocuments.ts
@@ -8,6 +8,7 @@ export interface LegalDocument {
   slug: Slug;
   basicTitle: string;
   richText: PortableTextBlock[];
+  language: string;
   _translations: Translations[];
 }
 
diff --git a/studio/lib/interfaces/navigation.ts b/studio/lib/interfaces/navigation.ts
index 394f3e946..f1cc5e179 100644
--- a/studio/lib/interfaces/navigation.ts
+++ b/studio/lib/interfaces/navigation.ts
@@ -23,6 +23,7 @@ export interface ILink {
   anchor?: string;
   newTab?: boolean;
   ariaLabel?: string;
+  language?: string;
 }
 
 export enum LinkType {
diff --git a/studio/lib/interfaces/slugTranslations.ts b/studio/lib/interfaces/slugTranslations.ts
index 3c68882aa..5dc9f221c 100644
--- a/studio/lib/interfaces/slugTranslations.ts
+++ b/studio/lib/interfaces/slugTranslations.ts
@@ -1,6 +1,8 @@
+export interface SlugTranslation {
+  language: string;
+  slug: string;
+}
+
 export interface SlugTranslations {
-  _translations: ({
-    language: string;
-    slug: string;
-  } | null)[];
+  _translations: (SlugTranslation | null)[];
 }
diff --git a/studio/lib/queries/languages.ts b/studio/lib/queries/languages.ts
deleted file mode 100644
index 9903a54a1..000000000
--- a/studio/lib/queries/languages.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { groq } from "next-sanity";
-
-export const DEFAULT_LANGUAGE_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages[default][0]`;
-
-export const LANGUAGES_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages`;
diff --git a/studio/lib/queries/siteSettings.ts b/studio/lib/queries/siteSettings.ts
index f704416f8..99cab8822 100644
--- a/studio/lib/queries/siteSettings.ts
+++ b/studio/lib/queries/siteSettings.ts
@@ -1,10 +1,8 @@
 import { groq } from "next-sanity";
 
-import { brandAssetsID } from "studio/schemas/documents/siteSettings/brandAssets";
-
 //Brand Assets
 export const BRAND_ASSETS_QUERY = groq`
-  *[_type == "${brandAssetsID}" && _id == "${brandAssetsID}"][0]
+  *[_type == "brandAssets" && _id == "brandAssets"][0]
 `;
 
 //Navigation Manager
@@ -60,6 +58,7 @@ export const SOME_PROFILES_QUERY = groq`
 `;
 
 //Languages
+export const LANGUAGES_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages`;
 export const DEFAULT_LANGUAGE_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages[default][0]`;
 
 //Default SEO