From 08593e63e6a4d90c44dc7924fe8030065ed83957 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <43541032+idamand@users.noreply.github.com>
Date: Wed, 27 Nov 2024 10:34:48 +0100
Subject: [PATCH] V3 add first names to project info (#913)

* Refactor consultants to a list and include first name in Sanity

* Refactor project info to include first names
---
 .../customerCase/CustomerCase.tsx             |  7 +--
 .../projectInfo/CustomerCaseProjectInfo.tsx   | 43 ++++++++++---------
 .../customerCaseProjectInfo.module.css        |  4 +-
 studioShared/lib/interfaces/customerCases.ts  |  8 +++-
 studioShared/lib/queries/customerCases.ts     |  6 ++-
 .../schemas/fields/customerCaseProjectInfo.ts | 23 +++++++++-
 6 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index dba1236ab..1b499ca35 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -20,7 +20,7 @@ export default async function CustomerCase({
   customerCasesPagePath,
 }: CustomerCaseProps) {
   const consultantsResult = await fetchEmployeesByEmails(
-    customerCase.projectInfo.consultants,
+    customerCase.projectInfo.consultants.map((e) => e.employeeEmail),
   );
 
   return (
@@ -32,10 +32,7 @@ export default async function CustomerCase({
         <hr className={styles.divider} />
         {consultantsResult.ok && (
           <div className={styles.projectInfoWrapper}>
-            <CustomerCaseProjectInfo
-              projectInfo={customerCase.projectInfo}
-              consultantsInProject={consultantsResult.value}
-            />
+            <CustomerCaseProjectInfo projectInfo={customerCase.projectInfo} />
           </div>
         )}
         <div className={styles.mainImageWrapper}>
diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
index 08cddba02..3a9561cd3 100644
--- a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
+++ b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
@@ -3,7 +3,6 @@ import { getTranslations } from "next-intl/server";
 import Badge from "src/components/badge/Badge";
 import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
-import { ChewbaccaEmployee } from "src/types/employees";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import {
   CustomerCaseProjectInfo as CustomerCaseCaseProjectInfoObject,
@@ -14,15 +13,17 @@ import styles from "./customerCaseProjectInfo.module.css";
 
 interface CustomerCaseProjectInfoProps {
   projectInfo: CustomerCaseCaseProjectInfoObject;
-  consultantsInProject: ChewbaccaEmployee[];
 }
 
 export default async function CustomerCaseProjectInfo({
   projectInfo,
-  consultantsInProject,
 }: CustomerCaseProjectInfoProps) {
   const t = await getTranslations("customer_case");
 
+  const consultantsFirstNames = projectInfo.consultants.map(
+    (n) => n.employeeFirstName,
+  );
+
   return (
     <>
       <div className={styles.projectInfo}>
@@ -39,24 +40,26 @@ export default async function CustomerCaseProjectInfo({
               </div>
             </div>
           )}
-          <div>
-            <Text className={styles.title} type="labelRegular">
-              {t("variants").toUpperCase()}
-            </Text>
-            <div className={styles.varianter}>
-              <Text className={styles.preFancyCharacter}>【 </Text>
-              {consultantsInProject.map((c) => (
-                <Text
-                  key={c.name}
-                  type="bodyNormal"
-                  className={styles.dotSeperatorVarianter}
-                >
-                  {c.name}
-                </Text>
-              ))}
-              <Text className={styles.afterFancyCharacter}> 】</Text>
+          {consultantsFirstNames && (
+            <div>
+              <Text className={styles.title} type="labelRegular">
+                {t("variants").toUpperCase()}
+              </Text>
+              <div className={styles.varianter}>
+                <Text className={styles.preFancyCharacter}>【 </Text>
+                {consultantsFirstNames.map((name) => (
+                  <Text
+                    key={name}
+                    type="bodyNormal"
+                    className={styles.dotSeperatorVarianter}
+                  >
+                    {name}
+                  </Text>
+                ))}
+                <Text className={styles.afterFancyCharacter}> 】</Text>
+              </div>
             </div>
-          </div>
+          )}
           {projectInfo.collaborators && (
             <div>
               <Text className={styles.title} type="labelRegular">
diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
index 5df05baa3..031cb6108 100644
--- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
+++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
@@ -29,7 +29,7 @@
 
 .dotSeperator::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperator:last-child:after {
@@ -46,7 +46,7 @@
 
 .dotSeperatorVarianter::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperatorVarianter:nth-last-child(2)::after {
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
index bb779c5c8..ec320c9c1 100644
--- a/studioShared/lib/interfaces/customerCases.ts
+++ b/studioShared/lib/interfaces/customerCases.ts
@@ -12,7 +12,13 @@ export interface CustomerCaseProjectInfo {
   sector: string[];
   collaborators: string[];
   deliveries: Deliveries;
-  consultants: string[];
+  consultants: Consultants[];
+}
+
+export interface Consultants {
+  employeeEmail: string;
+  employeeFirstName: string;
+  _key: string;
 }
 
 export interface CustomerSector {
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index fade56c2e..fd9055f6b 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/studioShared/lib/queries/customerCases.ts
@@ -65,7 +65,11 @@ export const CUSTOMER_CASE_QUERY = groq`
         }
       },
       collaborators,
-      consultants
+      "consultants": consultants[] {
+        _key,  
+        employeeEmail,
+        employeeFirstName,
+      }
     },
     "sections": sections[] {
       _key,
diff --git a/studioShared/schemas/fields/customerCaseProjectInfo.ts b/studioShared/schemas/fields/customerCaseProjectInfo.ts
index ab79f06ee..83d806058 100644
--- a/studioShared/schemas/fields/customerCaseProjectInfo.ts
+++ b/studioShared/schemas/fields/customerCaseProjectInfo.ts
@@ -55,9 +55,28 @@ export const customerCaseProjectInfo = defineField({
     defineField({
       name: "consultants",
       description:
-        "The consultants enrolled in the project. Use employee emails (e.g. 'oms@variant.no').",
+        "The consultants enrolled in the project. Use employee emails and first names  (e.g. 'oms@variant.no' and Odd Morten).",
       type: "array",
-      of: [{ type: "email" }],
+      of: [
+        {
+          type: "object",
+          title: "List of employees in project",
+          name: "employeesInProjectList",
+          fields: [
+            {
+              name: "employeeEmail",
+              title: "Add employee email (e.g. oms@variant.no)",
+              type: "email",
+            },
+            {
+              name: "employeeFirstName",
+              title:
+                "Add the first name(s) of the consultant corresponding to the email above. If there are multiple employees with the same name, feel free to include the initials of the last name (e.g. Odd Morten S.)",
+              type: "string",
+            },
+          ],
+        },
+      ],
     }),
     defineField({
       name: "collaborators",