V3 customercase entry module

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"]
+  "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"],
+  "i18n-ally.keystyle": "nested"
 }

messages/en.json

@@ -1,4 +1,7 @@
 {
+  "linking_words": {
+    "for": "for"
+  },
   "navigation": {
     "home": "Home"
   },
@@ -14,7 +17,12 @@
     "development": "Development",
     "project_management": "Project management",
     "url": "Url",
-    "collaborators": "Collaborators"
+    "collaborators": "Collaborators",
+    "customer_case_entry": {
+      "image": "image",
+      "case": "Case",
+      "field": "Field"
+    }
   },
   "contact_information": {
     "help": "Curious about Variant and want to explore what we offer?",
@@ -46,9 +54,9 @@
     "location": "Location",
     "all": "All",
     "Project Management": "Project Management",
-    "Design": "Design",
-    "Utvikling": "Development",
-    "Administasjon": "Administration",
+    "design": "Design",
+    "development": "Development",
+    "administration": "Administration",
     "field": "Field",
     "showMore": "Show all"
   },

messages/no.json

@@ -1,4 +1,7 @@
 {
+  "linking_words": {
+    "for": "for"
+  },
   "navigation": {
     "home": "Hjem"
   },
@@ -14,7 +17,12 @@
     "development": "Utvikling",
     "project_management": "Prosjektledelse",
     "url": "Link",
-    "collaborators": "Samarbeidspartnere"
+    "collaborators": "Samarbeidspartnere",
+    "customer_case_entry": {
+      "image": "bilde",
+      "case": "Case",
+      "field": "Fag"
+    }
   },
   "contact_information": {
     "help": "Trenger du hjelp med lignende eller noe helt annet?",
@@ -45,9 +53,9 @@
     "location": "Lokasjon",
     "all": "Alle",
     "Project Management": "Prosjektledelse",
-    "Design": "Design",
-    "Utvikling": "Utvikling",
-    "Administasjon": "Administrasjon",
+    "design": "Design",
+    "development": "Utvikling",
+    "administration": "Administrasjon",
     "field": "Fag",
     "showMore": "Vis alle"
   },

messages/se.json

@@ -1,4 +1,7 @@
 {
+  "linking_words": {
+    "for": "för"
+  },
   "navigation": {
     "home": "Hem"
   },
@@ -14,7 +17,12 @@
     "development": "Utveckling",
     "project_management": "Projektledning",
     "url": "Link",
-    "collaborators": "Samarbeidspartnere"
+    "collaborators": "Samarbeidspartnere",
+    "customer_case_entry": {
+      "image": "bild",
+      "case": "Case",
+      "field": "Field"
+    }
   },
   "contact_information": {
     "help": "Nyfiken på Variant och vill utforska vad vi erbjuder?",
@@ -45,9 +53,9 @@
     "location": "Kontor",
     "all": "Alla",
     "Project Management": "Projektledning",
-    "Design": "Design",
-    "Utvikling": "Utveckling",
-    "Administasjon": "Administration",
+    "design": "Design",
+    "development": "Utveckling",
+    "administration": "Administration",
     "field": "Fält",
     "showMore": "Vis alla"
   },

src/components/customerCases/customerCases.module.css

@@ -26,6 +26,8 @@
 .caseImageWrapper {
   min-width: 20rem;
   max-width: 20rem;
+  width: 20rem;
+  height: 14rem;
 }
 
 .caseImageWrapper img {

src/components/employeeCard/employeeCard.module.css

@@ -74,9 +74,6 @@
   color: currentColor;
 }
 
-.employeeRole {
-}
-
 .employeeRoleDot::after {
   content: "·";
   margin: 0 0.25rem;

src/components/image/SanityImage.tsx

@@ -61,8 +61,6 @@ const SanityAssetImage = ({
         objectPosition,
         maxWidth: "100%",
         maxHeight: "100%",
-        height: "auto",
-        width: "auto",
       }}
     />
   );

src/components/navigation/header/Header.tsx

@@ -10,7 +10,6 @@ import { defaultLanguage } from "i18n/supportedLanguages";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
-import Text from "src/components/text/Text";
 import useScrollDirection from "src/utils/hooks/useScrollDirection";
 import { getHref } from "src/utils/link";
 import { Announcement } from "studio/lib/interfaces/announcement";

src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx

@@ -0,0 +1,55 @@
+import { headers } from "next/headers";
+
+import { Locale } from "src/i18n/routing";
+import { getDraftModeInfo } from "src/utils/draftmode";
+import { domainFromHostname } from "src/utils/url";
+import { CUSTOMER_CASES_PAGE_SITEMAP_QUERY } from "studio/lib/queries/specialPages";
+import { loadStudioQuery } from "studio/lib/store";
+import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases";
+import { CUSTOMER_CASE_ENTRY_QUERY } from "studioShared/lib/queries/customerCases";
+import { loadSharedQuery } from "studioShared/lib/store";
+
+import CustomerCasesList from "./CustomerCasesList";
+
+interface CustomerCasesProps {
+  language: Locale;
+}
+
+async function CustomerCasesEntry({ language }: CustomerCasesProps) {
+  const { perspective } = getDraftModeInfo();
+  const domain = domainFromHostname(headers().get("host"));
+
+  const customerCaseResult = await loadSharedQuery<CustomerCaseEntry[]>(
+    CUSTOMER_CASE_ENTRY_QUERY,
+    {
+      domain,
+      language,
+    },
+    {
+      perspective,
+    },
+  );
+
+  const customerCasePageSlug = (
+    await loadStudioQuery<{ slug: string } | null>(
+      CUSTOMER_CASES_PAGE_SITEMAP_QUERY,
+      {
+        language,
+      },
+    )
+  ).data?.slug;
+
+  return (
+    customerCaseResult && (
+      <div>
+        <CustomerCasesList
+          customerCases={customerCaseResult.data}
+          language={language}
+          customerCasePageSlug={customerCasePageSlug}
+        />
+      </div>
+    )
+  );
+}
+
+export default CustomerCasesEntry;

src/components/sections/customerCasesEntry/CustomerCasesList.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import { Tag } from "src/components/tag";
+import Text from "src/components/text/Text";
+import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter";
+import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases";
+
+import styles from "./customerCasesEntry.module.css";
+
+interface CustomerCasesProps {
+  customerCases: CustomerCaseEntry[];
+  language: string;
+  customerCasePageSlug?: string;
+}
+
+const CustomerCaseList = ({
+  customerCases,
+  language,
+  customerCasePageSlug,
+}: CustomerCasesProps) => {
+  const [selectedCustomerCase, setSelectedCustomerCase] =
+    useState<CustomerCaseEntry>(customerCases[0] || null);
+
+  const deliveryNames = [
+    selectedCustomerCase.projectInfo.deliveries.projectManagement &&
+      "Project Management",
+    selectedCustomerCase.projectInfo.deliveries.design && "Design",
+    selectedCustomerCase.projectInfo.deliveries.development && "Development",
+  ].filter(Boolean);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <div className={styles.info}>
+          <div className={styles.infoInnerMaxWidth}>
+            <TagRow
+              customerCases={customerCases}
+              selectedCustomerCase={selectedCustomerCase}
+              setSelectedCustomerCase={setSelectedCustomerCase}
+            />
+            <Link
+              className={styles.link}
+              href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+            >
+              <CardInfo
+                selectedCustomerCase={selectedCustomerCase}
+                deliveryNames={deliveryNames}
+              />
+            </Link>
+          </div>
+        </div>
+        <Link
+          tabIndex={-1}
+          className={styles.imageWrapper}
+          href={`/${language}/${customerCasePageSlug}/${selectedCustomerCase.slug}`}
+        >
+          {selectedCustomerCase.image && (
+            <SanitySharedImage image={selectedCustomerCase.image} />
+          )}
+        </Link>
+      </div>
+    </div>
+  );
+};
+export default CustomerCaseList;
+
+function CardInfo({
+  selectedCustomerCase,
+  deliveryNames,
+}: {
+  selectedCustomerCase: CustomerCaseEntry;
+  deliveryNames: string[];
+}) {
+  const t = useTranslations("customer_case");
+
+  return (
+    <div className={styles.cardInfo}>
+      <Text type="h2" className={styles.heading}>
+        {selectedCustomerCase.basicTitle}
+      </Text>
+      <div className={styles.deliveries}>
+        <Text type="labelRegular">{t("customer_case_entry.field")}</Text>
+        <div className={styles.deliveriesList}>
+          {deliveryNames.map((deliveryName, index) => (
+            <Text key={index} type="h5" className={styles.dotSeparator}>
+              {deliveryName}
+            </Text>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TagRow({
+  customerCases,
+  selectedCustomerCase,
+  setSelectedCustomerCase,
+}: {
+  customerCases: CustomerCaseEntry[];
+  selectedCustomerCase: CustomerCaseEntry;
+  setSelectedCustomerCase: (customerCase: CustomerCaseEntry) => void;
+}) {
+  const t = useTranslations("customer_case");
+
+  return (
+    <div className={styles.TagRow}>
+      <Text className={styles.font} type="labelRegular">
+        {t("customer_case_entry.case")}
+      </Text>
+      {customerCases.map(
+        (customerCase: CustomerCaseEntry) =>
+          customerCase && (
+            <div key={customerCase._id}>
+              <Tag
+                active={customerCase._id === selectedCustomerCase._id}
+                type="button"
+                background="dark"
+                onClick={() => setSelectedCustomerCase(customerCase)}
+                text={capitalizeFirstLetter(customerCase.projectInfo.customer)}
+              />
+            </div>
+          ),
+      )}
+    </div>
+  );
+}