diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 441823ef5..b58ba6905 100644
--- 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 (
@@ -57,7 +70,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
Konsulenter
- {customerCase.projectInfo.consultants.join(", ")}
+ {consultants.map((c) => c.name).join(", ")}
@@ -91,6 +104,46 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
))}
+
+
Varianter på prosjektet
+
+ {consultants.map(
+ (consultant) =>
+ consultant.imageThumbUrl &&
+ consultant.name &&
+ consultant.email && (
+
+
+
+
+
+
{consultant.name}
+ {consultant.officeName && (
+
+ {consultant.officeName}
+
+ )}
+ {consultant.email && (
+
+ {consultant.email}
+
+ )}
+ {consultant.telephone && (
+
+ {consultant.telephone}
+
+ )}
+
+
+ ),
+ )}
+
+
);
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index d26bd842b..c1065bfc8 100644
--- 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
index b1161af96..fff93d9ec 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 {
@@ -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
index 27882430d..32b11816f 100644
--- 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> {
+ 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);
+}