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.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); +}