feat(CustomerCase): project consultants section

varianter · Oct 28, 2024 · 3acce7a · 3acce7a
1 parent a84f711
commit 3acce7a
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 2 deletions.
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -1,6 +1,9 @@
+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 { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
@@ -9,7 +12,17 @@ export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
 }
 
-export default function CustomerCase({ customerCase }: CustomerCaseProps) {
+export default async function CustomerCase({
+  customerCase,
+}: CustomerCaseProps) {
+  const consultantsResult = await Promise.all(
+    customerCase.projectInfo.consultants.map((alias) =>
+      fetchEmployeeByAlias(alias),
+    ),
+  );
+
+  const consultants = consultantsResult.filter((c) => c.ok).map((c) => c.value);
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
@@ -57,7 +70,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
             <div className={styles.projectInfoItem}>
               <Text>Konsulenter</Text>
               <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.consultants.join(", ")}
+                {consultants.map((c) => c.name).join(", ")}
               </Text>
             </div>
           </div>
@@ -91,6 +104,46 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
             </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}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                ),
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
@@ -69,3 +69,64 @@
 .imageBlockImageContent img {
   border-radius: 12px;
 }
+
+.consultantsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 4rem 0;
+}
+
+.consultants {
+  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: 124px;
+  width: 50%;
+  padding: 1rem;
+  position: relative;
+}
+
+.consultantInfo {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  gap: 6px;
+}
+
+.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: 16px;
+  font-weight: 300;
+}
diff --git 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 {
@@ -14,6 +16,12 @@ 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
@@ -1,5 +1,6 @@
 import {
   ChewbaccaEmployee,
+  isChewbaccaEmployeeResponse,
   isChewbaccaEmployeesResponse,
 } from "src/types/employees";
 import { Result, ResultError, ResultOk } from "studio/utils/result";
@@ -23,3 +24,24 @@ 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}`,
+    );
+  }
+  const employeeData = await employeeRes.json();
+  if (!isChewbaccaEmployeeResponse(employeeData)) {
+    return ResultError(
+      `Expected ChewbaccaEmployeeResponse, was ${employeeData}`,
+    );
+  }
+  return ResultOk(employeeData);
+}