feat(web): Team List - Display email, phone and tags for team members (…

…#15947)

* Add explicit email and phone fields to team member content type

* Display filter tags

* Add missing key prop

* Sort imports

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/Organization/Slice/TeamListSlice/TeamListSlice.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import flatten from 'lodash/flatten'
 import { useLazyQuery } from '@apollo/client'
 
 import { TeamList, type TeamListProps } from '@island.is/island-ui/contentful'
+import { sortAlpha } from '@island.is/shared/utils'
 import { GenericList } from '@island.is/web/components'
 import {
   type GenericTag,
@@ -65,7 +66,44 @@ export const TeamMemberListWrapper = ({
   )
 
   const totalItems = itemsResponse?.total ?? 0
-  const items = itemsResponse?.items ?? []
+
+  const items = useMemo(
+    () =>
+      (itemsResponse?.items ?? []).map((item) => {
+        const tagGroups: { groupLabel: string; tagLabels: string[] }[] = []
+        for (const tag of item.filterTags ?? []) {
+          if (!tag.genericTagGroup?.title || !tag.title) {
+            continue
+          }
+          const index = tagGroups.findIndex(
+            (group) => group.groupLabel === tag.genericTagGroup?.title,
+          )
+          if (index >= 0) {
+            tagGroups[index].tagLabels.push(tag.title)
+          } else {
+            tagGroups.push({
+              groupLabel: tag.genericTagGroup.title,
+              tagLabels: [tag.title],
+            })
+          }
+
+          // Add a colon to the end of group labels if it doesn't have one
+          for (const group of tagGroups) {
+            if (!group.groupLabel.endsWith(':')) {
+              group.groupLabel += ':'
+            }
+          }
+        }
+
+        tagGroups.sort(sortAlpha('groupLabel'))
+
+        return {
+          ...(item as TeamListProps['teamMembers'][number]),
+          tagGroups,
+        }
+      }),
+    [itemsResponse],
+  )
 
   return (
     <GenericList
@@ -94,8 +132,12 @@ export const TeamMemberListWrapper = ({
       tagQueryId={tagQueryId}
     >
       <TeamList
-        teamMembers={items as TeamListProps['teamMembers']}
+        teamMembers={items}
         variant="accordion"
+        prefixes={{
+          email: activeLocale === 'is' ? 'Netfang:' : 'Email:',
+          phone: activeLocale === 'is' ? 'Sími:' : 'Phone:',
+        }}
       />
     </GenericList>
   )

apps/web/screens/queries/TeamList.ts

@@ -14,6 +14,18 @@ export const GET_TEAM_MEMBERS_QUERY = gql`
       items {
         name
         title
+        email
+        phone
+        filterTags {
+          id
+          title
+          slug
+          genericTagGroup {
+            id
+            title
+            slug
+          }
+        }
         image {
           ...ImageFields
         }

libs/cms/src/lib/generated/contentfulTypes.d.ts

@@ -4408,7 +4408,13 @@ export interface ITeamMemberFields {
   /** Filter Tags */
   filterTags?: IGenericTag[] | undefined
 
-  /** Intro */
+  /** Accordion email */
+  email?: string | undefined
+
+  /** Accordion phone */
+  phone?: string | undefined
+
+  /** Accordion free text */
   intro?: Document | undefined
 }
 

libs/cms/src/lib/models/teamMember.model.ts

@@ -13,6 +13,12 @@ export class TeamMember {
   @Field()
   title!: string
 
+  @Field({ nullable: true })
+  email?: string
+
+  @Field({ nullable: true })
+  phone?: string
+
   @CacheField(() => Image)
   image!: Image
 
@@ -33,4 +39,6 @@ export const mapTeamMember = ({ fields, sys }: ITeamMember): TeamMember => ({
   imageOnSelect: fields.imageOnSelect ? mapImage(fields.imageOnSelect) : null,
   filterTags: fields.filterTags ? fields.filterTags.map(mapGenericTag) : [],
   intro: fields.intro ? mapDocument(fields.intro, `${sys.id}:intro`) : [],
+  email: fields.email,
+  phone: fields.phone,
 })

libs/island-ui/contentful/src/lib/TeamList/TeamList.css.ts

@@ -3,3 +3,7 @@ import { style } from '@vanilla-extract/css'
 export const teamMemberImage = style({
   maxHeight: '165px',
 })
+
+export const email = style({
+  wordBreak: 'break-all',
+})

libs/island-ui/contentful/src/lib/TeamList/TeamList.tsx

@@ -6,6 +6,7 @@ import {
   BoxProps,
   GridColumn,
   GridRow,
+  Inline,
   ProfileCard,
   Stack,
   Text,
@@ -17,15 +18,26 @@ import * as styles from './TeamList.css'
 const imagePostfix = '?w=400'
 
 export interface TeamListProps {
+  variant?: 'card' | 'accordion'
+  prefixes?: {
+    email?: string
+    phone?: string
+  }
   teamMembers: {
     title: string
     name: string
     image?: { url: string }
     imageOnSelect?: { url: string } | null
-    /** Field is only visible if variant is set to "accordion" */
+
+    /** Fields below are only visible if variant is set to "accordion" */
     intro?: SliceType[] | null
+    email?: string
+    phone?: string
+    tagGroups?: {
+      groupLabel: string
+      tagLabels: string[]
+    }[]
   }[]
-  variant?: 'card' | 'accordion'
 }
 
 const loadedImageUrls = new Map<string, boolean>()
@@ -128,9 +140,10 @@ export const TeamMemberCardList = ({
 
 const TeamMemberAccordionList = ({
   teamMembers,
-}: Pick<TeamListProps, 'teamMembers'>) => {
+  prefixes,
+}: Pick<TeamListProps, 'teamMembers' | 'prefixes'>) => {
   return (
-    <Accordion>
+    <Accordion singleExpand={false}>
       {teamMembers.map((member) => {
         const id = `${member.name}-${member.title}`
         return (
@@ -159,7 +172,36 @@ const TeamMemberAccordionList = ({
                 />
               </GridColumn>
               <GridColumn span={['1/1', '1/1', '1/1', '1/1', '9/12']}>
-                <Text as="div">{richText(member.intro ?? [])}</Text>
+                <Stack space={1}>
+                  {member.email && (
+                    <Inline space={1} alignY="center">
+                      <Text fontWeight="semiBold">
+                        {prefixes?.email ?? 'Netfang:'}
+                      </Text>
+                      <Text>
+                        <span className={styles.email}>{member.email}</span>
+                      </Text>
+                    </Inline>
+                  )}
+                  {member.phone && (
+                    <Inline space={1} alignY="center">
+                      <Text fontWeight="semiBold">
+                        {prefixes?.phone ?? 'Sími:'}
+                      </Text>
+                      <Text>{member.phone}</Text>
+                    </Inline>
+                  )}
+                  {member.tagGroups?.map((tagGroup) => (
+                    <Inline key={tagGroup.groupLabel} space={1} alignY="center">
+                      <Text fontWeight="semiBold">{tagGroup.groupLabel}</Text>
+                      <Inline space={1}>
+                        <Text>{tagGroup.tagLabels.join(', ')}</Text>
+                      </Inline>
+                    </Inline>
+                  ))}
+
+                  <Text as="div">{richText(member.intro ?? [])}</Text>
+                </Stack>
               </GridColumn>
             </GridRow>
           </AccordionItem>