V3 add competence to employee (#876)

* Add competences to chewbaccaEmployee

* Add competence/role to employees page

* Add competence/role to consultants on customer case page, and employeepage

* Fix bug

* Fix failed prettier check

* Fix: do not use index as key in map

src/components/consultantCard/ConsultantCard.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 
 import CustomLink from "src/components/link/CustomLink";
+import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
 import { aliasFromEmail } from "src/utils/employees";
@@ -47,6 +48,11 @@ export default function ConsultantCard({
           ) : (
             title
           )}
+          {consultant.competences.map((competence) => (
+            <Text type="labelRegular" key={competence}>
+              {competence}
+            </Text>
+          ))}
           {consultant.officeName && (
             <p className={styles.consultantRole}>{consultant.officeName}</p>
           )}

src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx

@@ -26,7 +26,7 @@ export default function SplitSection({ section }: SplitSectionProps) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
-        {section.sections.map((section) => (
+        {section.sections?.map((section) => (
           <SplitSectionSection key={section._key} section={section} />
         ))}
       </div>

src/components/employeePage/EmployeePage.tsx

@@ -45,6 +45,11 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
                   {employee.officeName}
                 </Text>
               )}
+              {employee.competences.map((competence) => (
+                <Text type="bodyNormal" key={competence}>
+                  {competence}
+                </Text>
+              ))}
             </div>
           </div>
         </div>

src/components/sections/employees/Employees.tsx

@@ -2,6 +2,7 @@ import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 
+import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import {
   aliasFromEmail,
@@ -74,9 +75,15 @@ export default async function Employees({ language, section }: EmployeesProps) {
                 </Link>
                 <div className={styles.employeeInfo}>
                   <p className={styles.employeeName}>{employee.name}</p>
-                  {employee.officeName && (
-                    <p className={styles.employeeRole}>{employee.officeName}</p>
-                  )}
+                  {employee.competences.map((competence) => (
+                    <Text
+                      type="labelRegular"
+                      key={competence}
+                      className={styles.employeeRole}
+                    >
+                      {competence}
+                    </Text>
+                  ))}
                   {employee.email && (
                     <p className={styles.employeeEmail}>{employee.email}</p>
                   )}

src/components/sections/employees/employees.module.css

@@ -70,9 +70,7 @@
 }
 
 .employeeRole {
-  color: var(--primary-black);
-  font-size: 16px;
-  font-weight: 300;
+  color: var(--primary-grey);
 }
 
 .employeeEmail,

src/styles/global.css

@@ -20,6 +20,7 @@ html {
   --primary-white: #faf8f5;
   --primary-black: #2d2d2d;
   --primary-black-darker: #000000;
+  --primary-grey: #5e5e5e;
 
   --secondary-off-white1: #f4efe8;
   --secondary-off-white2: #ece1d3;

src/types/employees.ts

@@ -24,6 +24,7 @@ export interface ChewbaccaEmployee {
   imageThumbUrl?: string | null;
   officeName?: string | null;
   startDate?: string | null;
+  competences: string[];
 }
 
 export function isChewbaccaEmployee(
@@ -52,6 +53,9 @@ export function isChewbaccaEmployee(
       value.officeName === null) &&
     (!("startDate" in value) ||
       typeof value.startDate === "string" ||
-      value.startDate === null)
+      value.startDate === null) &&
+    (!("competences" in value) ||
+      typeof value.competences === "object" ||
+      value.competences === null)
   );
 }