Enable contacting volunteers via the schedule app

beverloo · May 5, 2024 · e334866 · e334866
1 parent 75f96de
commit e334866
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/app/api/event/schedule/PublicSchedule.ts b/app/api/event/schedule/PublicSchedule.ts
@@ -359,6 +359,11 @@ export const kPublicSchedule = z.strictObject({
          */
         team: z.string(),
 
+        /**
+         * Phone number of the volunteer. Only available in certain cases.
+         */
+        phoneNumber: z.string().optional(),
+
         /**
          * Unique ID of the shift that the volunteer is currently participating in, if any.
          */

diff --git a/app/api/event/schedule/getSchedule.ts b/app/api/event/schedule/getSchedule.ts
@@ -321,10 +321,11 @@ async function populateVolunteers(
             user: {
                 name: tUsers.name,
                 avatar: storageJoin.fileHash,
-                // TODO: phoneNumber
+                phoneNumber: tUsers.phoneNumber,
                 role: {
                     name: tRoles.roleName,
                     badge: tRoles.roleBadge,
+                    isLeader: tRoles.roleAdminAccess.equals(/* true= */ 1),
                 },
                 team: {
                     id: tTeams.teamId,
@@ -349,13 +350,19 @@ async function populateVolunteers(
             };
         }
 
+        // Phone numbers are included and available in the app when the signed in user is a leader,
+        // or when the displayed volunteer is a leader. Their phone number will be shared with the
+        // other volunteers via the WhatsApp group anyway.
+        const includePhoneNumber = isLeader || volunteer.user.role.isLeader;
+
         schedule.volunteers[volunteerId] = {
             id: volunteerId,
             avatar: getBlobUrl(volunteer.user.avatar),
             name: volunteer.user.name,
             role: volunteer.user.role.name,
             roleBadge: volunteer.user.role.badge,
             team: `${volunteer.user.team.id}`,
+            phoneNumber: includePhoneNumber ? volunteer.user.phoneNumber : undefined,
             // TODO: activeShift
         };
 

diff --git a/app/schedule/[event]/volunteers/[volunteer]/VolunteerPage.tsx b/app/schedule/[event]/volunteers/[volunteer]/VolunteerPage.tsx
@@ -3,12 +3,18 @@
 
 'use client';
 
+import Link from 'next/link';
 import { useCallback, useContext } from 'react';
 import { useRouter } from 'next/navigation';
 
 import AlertTitle from '@mui/material/AlertTitle';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import PhoneIcon from '@mui/icons-material/Phone';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
 
 import { Alert } from '../../components/Alert';
 import { Avatar } from '@app/components/Avatar';
@@ -93,21 +99,46 @@ export function VolunteerPage(props: VolunteerPageProps) {
 
     const volunteer = schedule.volunteers[props.userId];
 
+    let phoneNumber: string | undefined;
+    let whatsAppNumber: string | undefined;
+
+    if (!!volunteer.phoneNumber) {
+        phoneNumber = `tel:${volunteer.phoneNumber}`;
+        whatsAppNumber = `https://wa.me/${volunteer.phoneNumber.replace(/^\+/, '')}`;
+    }
+
     return (
         <>
             <SetTitle title={volunteer.name} />
             <Card>
                 <CardHeader title={volunteer.name}
                             titleTypographyProps={{ variant: 'subtitle2' }}
                             subheader={volunteer.role}
+                            sx={{ '& .MuiCardHeader-action': { alignSelf: 'center' } }}
+                            action={
+                                <Stack direction="row" spacing={1} sx={{ pr: 1 }}>
+                                    { !!phoneNumber &&
+                                        <Tooltip title="Give them a call">
+                                            <IconButton LinkComponent={Link} href={phoneNumber}>
+                                                <PhoneIcon />
+                                            </IconButton>
+                                        </Tooltip> }
+                                    { !!whatsAppNumber &&
+                                        <Tooltip title="Send them a WhatsApp message">
+                                            <IconButton LinkComponent={Link} href={whatsAppNumber}
+                                                        target="_blank">
+                                                <WhatsAppIcon />
+                                            </IconButton>
+                                        </Tooltip> }
+                                </Stack>
+                            }
                             avatar={
                                 <Avatar editable={avatarEditable} src={volunteer.avatar}
                                         onChange={handleAvatarChange}>
                                     {volunteer.name}
                                 </Avatar>
                             } />
             </Card>
-            { /* TODO: Contact information */ }
             { /* TODO: Notes */ }
             { /* TODO: Schedule */ }
         </>