Merge branch 'v3' into v3-customer-case-block-results

src/app/(main)/[lang]/[...path]/page.tsx

@@ -1,15 +1,18 @@
 import { Metadata } from "next";
+import { headers } from "next/headers";
 
 import Compensations from "src/components/compensations/Compensations";
 import CompensationsPreview from "src/components/compensations/CompensationsPreview";
 import CustomerCase from "src/components/customerCases/customerCase/CustomerCase";
 import CustomerCases from "src/components/customerCases/CustomerCases";
 import CustomerCasesPreview from "src/components/customerCases/CustomerCasesPreview";
 import CustomErrorMessage from "src/components/customErrorMessage/CustomErrorMessage";
+import EmployeePage from "src/components/employeePage/EmployeePage";
 import Legal from "src/components/legal/Legal";
 import LegalPreview from "src/components/legal/LegalPreview";
 import PageHeader from "src/components/navigation/header/PageHeader";
 import { homeLink } from "src/components/utils/linkTypes";
+import { ChewbaccaEmployee } from "src/types/employees";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { fetchPageDataFromParams } from "src/utils/pageData";
 import SectionRenderer from "src/utils/renderSection";
@@ -21,6 +24,17 @@ type Props = {
   params: { lang: string; path: string[] };
 };
 
+function seoDataFromChewbaccaEmployee(employee: ChewbaccaEmployee) {
+  return {
+    title: employee.name ?? undefined,
+    description: employee.email ?? undefined,
+    imageUrl: employee.imageThumbUrl ?? undefined,
+    keywords: [employee.name, employee.email, employee.telephone]
+      .filter((d) => d != null)
+      .join(","),
+  };
+}
+
 function seoDataFromPageData(
   data: Awaited<ReturnType<typeof fetchPageDataFromParams>>,
 ): SeoData | null {
@@ -42,6 +56,9 @@ function seoDataFromPageData(
     case "compensations": {
       return data.queryResponse.compensationsPage.data.seo;
     }
+    case "employee": {
+      return seoDataFromChewbaccaEmployee(data.queryResponse);
+    }
   }
 }
 
@@ -52,6 +69,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     language,
     path: params.path,
     perspective: perspective ?? "published",
+    hostname: headers().get("host"),
   });
   return generateMetadataFromSeo(seoDataFromPageData(pageData), language);
 }
@@ -73,6 +91,7 @@ async function Page({ params }: Props) {
     language: lang,
     path,
     perspective: perspective ?? "published",
+    hostname: headers().get("host"),
   });
 
   if (pageData == null) {
@@ -93,6 +112,7 @@ async function Page({ params }: Props) {
                   {queryResponse.data?.sections?.map((section, index) => (
                     <SectionRenderer
                       key={section._key}
+                      language={lang}
                       section={section}
                       isDraftMode={isDraftMode}
                       initialData={queryResponse}
@@ -123,13 +143,20 @@ async function Page({ params }: Props) {
                 <CustomerCases customerCasesPage={queryResponse.data} />
               );
             case "customerCase":
-              return <CustomerCase customerCase={queryResponse.data} />;
+              return (
+                <CustomerCase
+                  customerCase={queryResponse.customerCase.data}
+                  customerCasesPagePath={queryResponse.customerCasesPagePath}
+                />
+              );
             case "legalDocument":
               return isDraftMode ? (
                 <LegalPreview initialDocument={queryResponse} />
               ) : (
                 <Legal document={queryResponse.data} />
               );
+            case "employee":
+              return <EmployeePage employee={queryResponse} />;
           }
           return Page404;
         })()}

src/app/(main)/[lang]/page.tsx

@@ -76,6 +76,7 @@ const Home = async ({ params }: Props) => {
         {initialLandingPage.data.sections.map((section, index) => (
           <SectionRenderer
             key={section._key}
+            language={params.lang}
             section={section}
             isDraftMode={isDraftMode}
             initialData={initialLandingPage}

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -1,18 +1,29 @@
 import { SanitySharedImage } from "src/components/image/SanityImage";
-import { RichText } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
+import { fetchEmployeesByEmails } from "src/utils/employees";
 import {
   CustomerCase as CustomerCaseDocument,
   Delivery,
 } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
+import FeaturedCases from "./featuredCases/FeaturedCases";
+import CustomerCaseConsultants from "./sections/customerCaseConsultants/CustomerCaseConsultants";
+import { CustomerCaseSection } from "./sections/CustomerCaseSection";
 
 export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
+  customerCasesPagePath: string[];
 }
 
-export default function CustomerCase({ customerCase }: CustomerCaseProps) {
+export default async function CustomerCase({
+  customerCase,
+  customerCasesPagePath,
+}: CustomerCaseProps) {
+  const consultantsResult = await fetchEmployeesByEmails(
+    customerCase.projectInfo.consultants,
+  );
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
@@ -87,48 +98,37 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
                 )}
               </div>
             )}
-            {customerCase.projectInfo.consultants && (
+            {consultantsResult.ok && (
               <div className={styles.projectInfoItem}>
                 <Text type={"labelRegular"}>Konsulenter</Text>
                 <Text
                   type={"labelLight"}
                   className={styles.projectInfoItemValue}
                 >
-                  {customerCase.projectInfo.consultants.join(", ")}
+                  {consultantsResult.value.map((c) => c.name).join(", ")}
                 </Text>
               </div>
             )}
           </div>
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (
-            <div key={section._key}>
-              {section._type === "richTextBlock" ? (
-                <RichText value={section.richText} />
-              ) : section._type === "quoteBlock" ? (
-                section.quote && (
-                  <div>
-                    <Text>{section.quote}</Text>
-                    {section.author && <Text>- {section.author}</Text>}
-                  </div>
-                )
-              ) : (
-                <div className={styles.imageBlockWrapper}>
-                  {section.images?.map((image) => (
-                    <div
-                      key={image._key ?? `${section._key}-${image.alt}`}
-                      className={styles.imageBlockImageWrapper}
-                    >
-                      <div className={styles.imageBlockImageContent}>
-                        <SanitySharedImage image={image} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
+            <CustomerCaseSection key={section._key} section={section} />
           ))}
         </div>
+        {consultantsResult.ok && (
+          <CustomerCaseConsultants
+            language={customerCase.language}
+            consultants={consultantsResult.value}
+          />
+        )}
+        {customerCase.featuredCases &&
+          customerCase.featuredCases.length > 0 && (
+            <FeaturedCases
+              featuredCases={customerCase.featuredCases}
+              customerCasesPath={customerCasesPagePath}
+            />
+          )}
       </div>
     </div>
   );

src/components/customerCases/customerCase/customerCase.module.css

@@ -1,18 +1,25 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4rem 0;
+  margin: 4rem 2rem;
   align-items: center;
 
   @media (max-width: 1024px) {
-    margin: 2rem 0;
+    margin: 2rem 1rem;
   }
 }
 
 .content {
+  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
   max-width: 1400px;
+  padding: 0 2rem;
+
+  @media (max-width: 1024px) {
+    padding: 0 1rem;
+  }
 }
 
 .mainTitle {
@@ -24,6 +31,7 @@
   width: 100%;
   height: 36.5rem;
   overflow: hidden;
+  padding-top: 1.5rem;
   padding-bottom: 2rem;
 }
 
@@ -88,7 +96,6 @@
 
 .projectInfoItemValue {
   font-weight: 300 !important;
-  white-space: nowrap;
 }
 
 .projectInfoItemBadge {
@@ -103,23 +110,3 @@
   flex-direction: column;
   gap: 4.5rem;
 }
-
-.imageBlockWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.imageBlockImageWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.imageBlockImageContent {
-  max-width: 800px;
-}
-
-.imageBlockImageContent img {
-  border-radius: 12px;
-}

src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import Text from "src/components/text/Text";
+import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases";
+
+import styles from "./featuredCases.module.css";
+
+export interface FeaturedCasesProps {
+  featuredCases: CustomerCaseBase[];
+  customerCasesPath: string[];
+}
+
+export default function FeaturedCases({
+  featuredCases,
+  customerCasesPath,
+}: FeaturedCasesProps) {
+  return (
+    featuredCases.length > 0 && (
+      <div className={styles.wrapper}>
+        <Text type={"h3"}>Lignende prosjekter</Text>
+        <div className={styles.content}>
+          {featuredCases.map((featuredCase) => (
+            <div key={featuredCase._id} className={styles.caseWrapper}>
+              <div className={styles.caseImageWrapper}>
+                <SanitySharedImage image={featuredCase.image} />
+              </div>
+              <div>
+                <Link
+                  href={`/${[...customerCasesPath, featuredCase.slug].join("/")}`}
+                >
+                  <Text type={"bodyBig"}>{featuredCase.basicTitle}</Text>
+                </Link>
+                <Text type={"bodySmall"}>{featuredCase.description}</Text>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  );
+}

src/components/customerCases/customerCase/featuredCases/featuredCases.module.css

@@ -0,0 +1,34 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 4rem 0;
+}
+
+.content {
+  display: flex;
+  gap: 5rem;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.caseWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.caseImageWrapper {
+  width: 100%;
+  height: 200px;
+}
+
+.caseImageWrapper img {
+  border-radius: 0.75rem;
+  width: 100% !important;
+}

src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx

@@ -0,0 +1,23 @@
+import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/lib/interfaces/customerCases";
+
+import ImageSection from "./image/ImageSection";
+import QuoteBlock from "./quote/QuoteBlock";
+import RichTextSection from "./richText/RichTextSection";
+import SplitSection from "./splitSection/SplitSection";
+
+export function CustomerCaseSection({
+  section,
+}: {
+  section: CustomerCaseSectionObject;
+}) {
+  switch (section._type) {
+    case "splitSection":
+      return <SplitSection section={section} />;
+    case "richTextBlock":
+      return <RichTextSection section={section} />;
+    case "quoteBlock":
+      return <QuoteBlock section={section} />;
+    case "imageBlock":
+      return <ImageSection section={section} />;
+  }
+}