From ba9658f254b4c1f2362438c42d2778fe260daa13 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <24361490+mathiazom@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:18:02 +0000
Subject: [PATCH] v3 - consultants in project (#831)

* fix(CustomerCase): overflowing content width

* feat(CustomerCase): project consultants section

* feat(CustomerCase): add usage note to consultants field in project info

* feat(CustomerCase): fetch employees by email instead of alias

since we don't know if aliases are unique across countries

* feat(CustomerCase): use email type for project consultant identifiers

* refactor(CustomerCase): extract consultants section to own component

* feat(CustomerCaseConsultants): add employee link to customer case consultant card

* feat(CustomerCase): remove nowrap for project info
---
 .../customerCase/CustomerCase.tsx             | 18 +++-
 .../customerCase/customerCase.module.css      |  2 +-
 .../CustomerCaseConsultants.tsx               | 95 +++++++++++++++++++
 .../customerCaseConsulants.module.css         | 60 ++++++++++++
 src/components/link/CustomLink.tsx            | 14 ++-
 src/components/link/link.module.css           | 21 ++++
 src/types/employees.ts                        |  2 +
 src/utils/employees.ts                        | 17 ++++
 .../schemas/fields/customerCaseProjectInfo.ts |  5 +-
 9 files changed, 226 insertions(+), 8 deletions(-)
 create mode 100644 src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
 create mode 100644 src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 0aac97cf5..729afb24e 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -1,5 +1,6 @@
 import { SanitySharedImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
+import { fetchEmployeesByEmails } from "src/utils/employees";
 import {
   CustomerCase as CustomerCaseDocument,
   CustomerCaseSection as CustomerCaseSectionObject,
@@ -8,6 +9,7 @@ import {
 
 import styles from "./customerCase.module.css";
 import FeaturedCases from "./featuredCases/FeaturedCases";
+import CustomerCaseConsultants from "./sections/customerCaseConsultants/CustomerCaseConsultants";
 import ImageSection from "./sections/image/ImageSection";
 import RichTextSection from "./sections/richText/RichTextSection";
 
@@ -38,10 +40,14 @@ export interface CustomerCaseProps {
   customerCasesPagePath: string[];
 }
 
-export default function CustomerCase({
+export default async function CustomerCase({
   customerCase,
   customerCasesPagePath,
 }: CustomerCaseProps) {
+  const consultantsResult = await fetchEmployeesByEmails(
+    customerCase.projectInfo.consultants,
+  );
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
@@ -116,14 +122,14 @@ export default function CustomerCase({
                 )}
               </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>
             )}
@@ -134,6 +140,12 @@ export default function CustomerCase({
             <CustomerCaseSection key={section._key} section={section} />
           ))}
         </div>
+        {consultantsResult.ok && (
+          <CustomerCaseConsultants
+            language={customerCase.language}
+            consultants={consultantsResult.value}
+          />
+        )}
         {customerCase.featuredCases &&
           customerCase.featuredCases.length > 0 && (
             <FeaturedCases
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index 3e494e622..3487658db 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -13,6 +13,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
   max-width: 1400px;
   padding: 0 2rem;
 
@@ -94,7 +95,6 @@
 
 .projectInfoItemValue {
   font-weight: 300 !important;
-  white-space: nowrap;
 }
 
 .projectInfoItemBadge {
diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
new file mode 100644
index 000000000..385872e7d
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
@@ -0,0 +1,95 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import CustomLink from "src/components/link/CustomLink";
+import Text from "src/components/text/Text";
+import { ChewbaccaEmployee } from "src/types/employees";
+import { aliasFromEmail } from "src/utils/employees";
+import { LinkType } from "studio/lib/interfaces/navigation";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+
+import styles from "./customerCaseConsulants.module.css";
+
+export interface CustomerCaseConsultantsProps {
+  language: string;
+  consultants: ChewbaccaEmployee[];
+}
+
+export default async function CustomerCaseConsultants({
+  language,
+  consultants,
+}: CustomerCaseConsultantsProps) {
+  const employeePageSlugRes = await loadStudioQuery<{ slug: string } | null>(
+    EMPLOYEE_PAGE_SLUG_QUERY,
+    {
+      language,
+    },
+  );
+  const employeePageSlug = employeePageSlugRes.data?.slug;
+
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h3"}>Varianter på prosjektet</Text>
+      <div className={styles.content}>
+        {consultants.map((consultant) => {
+          const title = (
+            <p className={styles.consultantName}>{consultant.name}</p>
+          );
+          return (
+            consultant.imageThumbUrl &&
+            consultant.name &&
+            consultant.email && (
+              <div key={consultant.email} className={styles.consultant}>
+                <div className={styles.consultantImage}>
+                  <Image
+                    src={consultant.imageUrl ?? consultant.imageThumbUrl}
+                    alt={consultant.name}
+                    objectFit="cover"
+                    fill={true}
+                  />
+                </div>
+                <div className={styles.consultantInfo}>
+                  {employeePageSlug !== undefined ? (
+                    <Link
+                      href={`/${language}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`}
+                    >
+                      {title}
+                    </Link>
+                  ) : (
+                    title
+                  )}
+                  {consultant.officeName && (
+                    <p className={styles.consultantRole}>
+                      {consultant.officeName}
+                    </p>
+                  )}
+                  {consultant.email && (
+                    <p className={styles.consultantEmail}>{consultant.email}</p>
+                  )}
+                  {consultant.telephone && (
+                    <p className={styles.consultantTelephone}>
+                      {consultant.telephone}
+                    </p>
+                  )}
+                  <CustomLink
+                    size={"small"}
+                    link={{
+                      _key: "go-to-mini-cv",
+                      _type: "link",
+                      linkType: LinkType.Internal,
+                      linkTitle: "Gå til Mini-CV",
+                      internalLink: {
+                        _ref: `${language}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`,
+                      },
+                    }}
+                  />
+                </div>
+              </div>
+            )
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css b/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css
new file mode 100644
index 000000000..09d000704
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/customerCaseConsulants.module.css
@@ -0,0 +1,60 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 4rem 0;
+}
+
+.content {
+  width: 100%;
+  text-wrap: wrap;
+  column-gap: 12px;
+  row-gap: 52px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 350px);
+  justify-content: space-between;
+}
+
+.consultant {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+}
+
+.consultantImage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--primary-black);
+  border-radius: 12px;
+  height: 125px;
+  width: 50%;
+  padding: 1rem;
+  position: relative;
+}
+
+.consultantInfo {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  gap: 0.5rem;
+}
+
+.consultantName {
+  color: var(--primary-black);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.consultantRole {
+  color: var(--primary-black);
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.consultantEmail,
+.consultantTelephone {
+  color: var(--primary-black);
+  font-size: 14px;
+  font-weight: 300;
+}
diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx
index e357caab8..143805384 100644
--- a/src/components/link/CustomLink.tsx
+++ b/src/components/link/CustomLink.tsx
@@ -12,9 +12,15 @@ interface ICustomLink {
   type?: ComponentLinkType;
   link: ILink;
   isSelected?: boolean;
+  size?: "normal" | "small";
 }
 
-const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
+const CustomLink = ({
+  type = "link",
+  link,
+  isSelected,
+  size = "normal",
+}: ICustomLink) => {
   const href = getHref(link);
   const newTab = link.newTab;
   const target = newTab ? "_blank" : undefined;
@@ -27,7 +33,11 @@ const CustomLink = ({ type = "link", link, isSelected }: ICustomLink) => {
   return (
     link.linkTitle &&
     (type === "link" ? (
-      <div className={styles.wrapper}>
+      <div
+        className={
+          styles.wrapper + (size === "small" ? ` ${styles.sizeSmall}` : "")
+        }
+      >
         <Link
           className={styles.link}
           href={href}
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
index 5783bf234..463dd5cf6 100644
--- a/src/components/link/link.module.css
+++ b/src/components/link/link.module.css
@@ -48,10 +48,31 @@
   }
 }
 
+.sizeSmall .link {
+  font-size: 0.95rem;
+  gap: 0.25rem;
+
+  @media (min-width: 1024px) {
+    font-size: 1rem;
+  }
+
+  &:hover {
+    gap: 0.5rem;
+  }
+
+  &::after {
+    transform: scale(0.75);
+  }
+}
+
 .span {
   padding-bottom: 0.125rem;
 }
 
+.sizeSmall .span {
+  padding-bottom: 0;
+}
+
 .headerLink {
   color: var(--primary-white);
   cursor: pointer;
diff --git a/src/types/employees.ts b/src/types/employees.ts
index b1161af96..0fb875b8e 100644
--- a/src/types/employees.ts
+++ b/src/types/employees.ts
@@ -2,6 +2,8 @@ export interface ChewbaccaEmployeesResponse {
   employees: ChewbaccaEmployee[];
 }
 
+export type ChewbaccaEmployeeResponse = ChewbaccaEmployee;
+
 export function isChewbaccaEmployeesResponse(
   value: unknown,
 ): value is ChewbaccaEmployeesResponse {
diff --git a/src/utils/employees.ts b/src/utils/employees.ts
index 0de1217c1..1e0720140 100644
--- a/src/utils/employees.ts
+++ b/src/utils/employees.ts
@@ -56,3 +56,20 @@ export function aliasFromEmail(email: string): string {
 export function domainFromEmail(email: string) {
   return email.split("@")[1];
 }
+
+export async function fetchEmployeesByEmails(
+  emails: string[],
+): Promise<Result<ChewbaccaEmployee[], string>> {
+  const allEmployeesRes = await fetchAllChewbaccaEmployees();
+  if (!allEmployeesRes.ok) {
+    return allEmployeesRes;
+  }
+  return ResultOk(
+    // mapping from input array (instead of filtering all employees) to preserve order
+    emails
+      .map((email) =>
+        allEmployeesRes.value.find((employee) => employee.email === email),
+      )
+      .filter((employee) => employee !== undefined),
+  );
+}
diff --git a/studioShared/schemas/fields/customerCaseProjectInfo.ts b/studioShared/schemas/fields/customerCaseProjectInfo.ts
index a9cfaf539..709c83746 100644
--- a/studioShared/schemas/fields/customerCaseProjectInfo.ts
+++ b/studioShared/schemas/fields/customerCaseProjectInfo.ts
@@ -68,9 +68,10 @@ export const customerCaseProjectInfo = defineField({
     defineField({
       // TODO: We should be able to select the consultants from a list
       name: "consultants",
-      description: "The consultants for the project",
+      description:
+        "The consultants for the project. Use employee emails (e.g. 'oms@variant.no').",
       type: "array",
-      of: [{ type: "string" }],
+      of: [{ type: "email" }],
     }),
   ],
 });