From 8b8f194ac047638b31235488a4b98bd136a3f633 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Mon, 28 Oct 2024 12:36:49 +0100
Subject: [PATCH] feat(CustomerCase): fetch employees by email instead of alias

since we don't know if aliases are unique across countries
---
 .../customerCase/CustomerCase.tsx             | 102 +++++++++---------
 src/types/employees.ts                        |   6 --
 src/utils/employees.ts                        |  33 +++---
 .../schemas/fields/customerCaseProjectInfo.ts |   2 +-
 4 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index b58ba6905..06ee7afbe 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { SanitySharedImage } from "src/components/image/SanityImage";
 import { RichText } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
-import { fetchEmployeeByAlias } from "src/utils/employees";
+import { fetchEmployeesByEmails } from "src/utils/employees";
 import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
@@ -15,14 +15,10 @@ export interface CustomerCaseProps {
 export default async function CustomerCase({
   customerCase,
 }: CustomerCaseProps) {
-  const consultantsResult = await Promise.all(
-    customerCase.projectInfo.consultants.map((alias) =>
-      fetchEmployeeByAlias(alias),
-    ),
+  const consultantsResult = await fetchEmployeesByEmails(
+    customerCase.projectInfo.consultants,
   );
 
-  const consultants = consultantsResult.filter((c) => c.ok).map((c) => c.value);
-
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
@@ -67,12 +63,14 @@ export default async function CustomerCase({
                 {customerCase.projectInfo.delivery}
               </Text>
             </div>
-            <div className={styles.projectInfoItem}>
-              <Text>Konsulenter</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {consultants.map((c) => c.name).join(", ")}
-              </Text>
-            </div>
+            {consultantsResult.ok && (
+              <div className={styles.projectInfoItem}>
+                <Text>Konsulenter</Text>
+                <Text className={styles.projectInfoItemValue}>
+                  {consultantsResult.value.map((c) => c.name).join(", ")}
+                </Text>
+              </div>
+            )}
           </div>
         </div>
         <div className={styles.sectionsWrapper}>
@@ -104,46 +102,50 @@ export default async function CustomerCase({
             </div>
           ))}
         </div>
-        <div className={styles.consultantsWrapper}>
-          <Text type={"h3"}>Varianter på prosjektet</Text>
-          <div className={styles.consultants}>
-            {consultants.map(
-              (consultant) =>
-                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}>
-                      <p className={styles.consultantName}>{consultant.name}</p>
-                      {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}
+        {consultantsResult.ok && (
+          <div className={styles.consultantsWrapper}>
+            <Text type={"h3"}>Varianter på prosjektet</Text>
+            <div className={styles.consultants}>
+              {consultantsResult.value.map(
+                (consultant) =>
+                  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}>
+                        <p className={styles.consultantName}>
+                          {consultant.name}
                         </p>
-                      )}
+                        {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>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                ),
-            )}
+                  ),
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/types/employees.ts b/src/types/employees.ts
index fff93d9ec..0fb875b8e 100644
--- a/src/types/employees.ts
+++ b/src/types/employees.ts
@@ -16,12 +16,6 @@ export function isChewbaccaEmployeesResponse(
   );
 }
 
-export function isChewbaccaEmployeeResponse(
-  value: unknown,
-): value is ChewbaccaEmployeeResponse {
-  return isChewbaccaEmployee(value);
-}
-
 export interface ChewbaccaEmployee {
   email?: string | null;
   name?: string | null;
diff --git a/src/utils/employees.ts b/src/utils/employees.ts
index 32b11816f..de84cf725 100644
--- a/src/utils/employees.ts
+++ b/src/utils/employees.ts
@@ -1,6 +1,5 @@
 import {
   ChewbaccaEmployee,
-  isChewbaccaEmployeeResponse,
   isChewbaccaEmployeesResponse,
 } from "src/types/employees";
 import { Result, ResultError, ResultOk } from "studio/utils/result";
@@ -25,23 +24,19 @@ export async function fetchAllChewbaccaEmployees(): Promise<
   return ResultOk(employeesData.employees);
 }
 
-export async function fetchEmployeeByAlias(
-  alias: string,
-): Promise<Result<ChewbaccaEmployee, string>> {
-  const country = "no"; // TODO: https://github.com/varianter/chewbacca/issues/132
-  const employeeRes = await fetch(
-    new URL(`employees/${alias}?country=${country}`, CHEWBACCA_URL),
-  );
-  if (!employeeRes.ok) {
-    return ResultError(
-      `Fetch returned status ${employeeRes.status} ${employeeRes.statusText}`,
-    );
+export async function fetchEmployeesByEmails(
+  emails: string[],
+): Promise<Result<ChewbaccaEmployee[], string>> {
+  const allEmployeesRes = await fetchAllChewbaccaEmployees();
+  if (!allEmployeesRes.ok) {
+    return allEmployeesRes;
   }
-  const employeeData = await employeeRes.json();
-  if (!isChewbaccaEmployeeResponse(employeeData)) {
-    return ResultError(
-      `Expected ChewbaccaEmployeeResponse, was ${employeeData}`,
-    );
-  }
-  return ResultOk(employeeData);
+  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 b3208fe5e..8d91f3f28 100644
--- a/studioShared/schemas/fields/customerCaseProjectInfo.ts
+++ b/studioShared/schemas/fields/customerCaseProjectInfo.ts
@@ -37,7 +37,7 @@ export const customerCaseProjectInfo = defineField({
       // TODO: We should be able to select the consultants from a list
       name: "consultants",
       description:
-        "The consultants for the project. Use the identifier before '@' in the employee email (e.g. 'oms' for 'oms@variant.no').",
+        "The consultants for the project. Use employee emails (e.g. 'oms@variant.no').",
       type: "array",
       of: [{ type: "string" }],
     }),