Coaching Page - Add person's name

src/components/Coaching/CoachingDetail/CoachingDetail.test.tsx

@@ -59,16 +59,28 @@ const TestComponent: React.FC<TestComponentProps> = ({
         mocks={{
           LoadCoachingDetail: {
             coachingAccountList: {
-              name: 'John Doe',
+              name: 'John Doe Account',
               currency: 'USD',
               monthlyGoal,
+              users: {
+                nodes: [
+                  { firstName: 'John', lastName: 'Doe' },
+                  { firstName: 'Sally', lastName: 'Doe' },
+                ],
+              },
             },
           },
           LoadAccountListCoachingDetail: {
             accountList: {
-              name: 'John Doe',
+              name: 'John Doe Account',
               currency: 'USD',
               monthlyGoal,
+              users: {
+                nodes: [
+                  { firstName: 'John', lastName: 'Doe' },
+                  { firstName: 'Sally', lastName: 'Doe' },
+                ],
+              },
             },
           },
           LoadCoachingCommitments: {
@@ -130,10 +142,13 @@ describe('LoadCoachingDetail', () => {
     { type: AccountListTypeEnum.Own, name: 'own' },
   ])('$name account list', ({ type: accountListType }) => {
     it('view', async () => {
-      const { findByRole, getByText } = render(
+      const { findByRole, getByText, findByText } = render(
         <TestComponent accountListType={accountListType} monthlyGoal={55} />,
       );
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
+      expect(await findByText('John Doe, Sally Doe')).toBeVisible();
       expect(getByText('Monthly $55')).toBeVisible();
       expect(getByText('Monthly Giving')).toBeVisible();
     });
@@ -142,7 +157,9 @@ describe('LoadCoachingDetail', () => {
       const { findByRole, getByText } = render(
         <TestComponent accountListType={accountListType} />,
       );
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(getByText('Monthly $0')).toBeVisible();
       expect(getByText('Monthly Giving')).toBeVisible();
     });
@@ -154,7 +171,9 @@ describe('LoadCoachingDetail', () => {
 
       const { findByRole, getByRole, queryByRole } = render(<TestComponent />);
 
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(getByRole('heading', { name: 'Coaching' })).toBeInTheDocument();
       expect(
         queryByRole('button', {
@@ -169,7 +188,9 @@ describe('LoadCoachingDetail', () => {
 
       const { findByRole, getByRole, queryByRole } = render(<TestComponent />);
 
-      expect(await findByRole('heading', { name: 'John Doe' })).toBeVisible();
+      expect(
+        await findByRole('heading', { name: 'John Doe Account' }),
+      ).toBeVisible();
       expect(
         queryByRole('heading', { name: 'Coaching' }),
       ).not.toBeInTheDocument();

src/components/Coaching/CoachingDetail/CoachingDetail.tsx

@@ -135,6 +135,10 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
 
   const handleCloseDrawer = () => setDrawerVisible(false);
 
+  const usersList = accountListData?.users.nodes
+    .map((user) => user.firstName + ' ' + user.lastName)
+    .join(', ');
+
   const sidebarDrawer = useMediaQuery<Theme>((theme) =>
     theme.breakpoints.down('md'),
   );
@@ -171,7 +175,7 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
           <>
             <CoachingMainTitleContainer>
               <Box style={{ flexGrow: 1 }}>
-                <Typography variant="h5" m={1}>
+                <Typography variant="h5" mx={1}>
                   <Hidden mdUp>
                     <IconButton
                       onClick={() => setDrawerVisible(!drawerVisible)}
@@ -183,6 +187,9 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
                   </Hidden>
                   {accountListData?.name}
                 </Typography>
+                <Typography mx={1} variant="subtitle1">
+                  {usersList}
+                </Typography>
               </Box>
               <Box style={{ flexGrow: 1 }}>
                 <AppealProgress

src/components/Coaching/CoachingList.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
+import { Spa } from '@mui/icons-material';
 import { Box, Divider, Skeleton, Typography } from '@mui/material';
-// TODO: This icon is not defined on @mui/icons-material, find replacement.
-// import { EcoOutlined } from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { CoachingRow } from './CoachingRow/CoachingRow';
@@ -13,7 +12,7 @@ interface CoachingListProps {
 
 const CoachingListWrapper = styled(Box)(({ theme }) => ({
   width: '100%',
-  padding: theme.spacing(1),
+  padding: theme.spacing(0, 1),
 }));
 const CoachingTitleWrapper = styled(Box)(({ theme }) => ({
   width: '100%',
@@ -23,13 +22,13 @@ const CoachingTitleWrapper = styled(Box)(({ theme }) => ({
   alignContent: 'center',
 }));
 
-// const CoachingTitleIcon = styled(EcoOutlined)(({ theme }) => ({
-//   margin: theme.spacing(1),
-// }));
+const CoachingTitleIcon = styled(Spa)(({ theme }) => ({
+  margin: theme.spacing(1),
+}));
 
 const CoachingListTitle = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.primary,
-  margin: theme.spacing(1),
+  margin: 0,
 }));
 
 const CoachingLoading = styled(Skeleton)(() => ({
@@ -47,9 +46,8 @@ export const CoachingList: React.FC<CoachingListProps> = ({
 
   return (
     <CoachingListWrapper>
-      <Divider />
       <CoachingTitleWrapper>
-        {/* <CoachingTitleIcon /> */}
+        <CoachingTitleIcon />
         <CoachingListTitle variant="h6">
           {t('Staff You Coach')}
         </CoachingListTitle>

src/components/Coaching/CoachingRow/CoachingRow.test.tsx

@@ -26,9 +26,16 @@ const TestComponent: React.FC = () => {
     {
       mocks: {
         id: 'coaching-account',
-        name: 'John Doe',
+        name: 'John Doe Account',
         currency: 'USD',
         primaryAppeal: null,
+        balance: 100,
+        users: {
+          nodes: [
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Sally', lastName: 'Doe' },
+          ],
+        },
       },
     },
   );
@@ -49,9 +56,13 @@ const TestComponent: React.FC = () => {
 
 describe('CoachingRow', () => {
   it('renders', async () => {
-    const { getByRole } = render(<TestComponent />);
+    const { getByRole, getByText } = render(<TestComponent />);
 
-    expect(getByRole('heading', { name: 'John Doe' })).toBeInTheDocument();
+    expect(
+      getByRole('heading', { name: 'John Doe Account' }),
+    ).toBeInTheDocument();
+    expect(getByText('John Doe, Sally Doe')).toBeInTheDocument();
+    expect(getByText('Balance: $100')).toBeInTheDocument();
   });
 
   it('deletes coaching account list', async () => {

src/components/Coaching/CoachingRow/CoachingRow.tsx

@@ -1,10 +1,12 @@
 import NextLink from 'next/link';
 import React, { useState } from 'react';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Box, Button, Link, Typography } from '@mui/material';
+import { Box, Button, Link, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { useLocale } from 'src/hooks/useLocale';
 import { useRequiredSession } from 'src/hooks/useRequiredSession';
+import { currencyFormat } from 'src/lib/intlFormat';
 import { Confirmation } from '../../common/Modal/Confirmation/Confirmation';
 import { AppealProgress } from '../AppealProgress/AppealProgress';
 import { CoachedPersonFragment } from '../LoadCoachingList.generated';
@@ -22,12 +24,6 @@ const CoachingRowWrapper = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1),
 }));
 
-const CoachingNameText = styled(Typography)(({ theme }) => ({
-  margin: theme.spacing(2),
-  cursor: 'pointer',
-  display: 'flex',
-}));
-
 export const CoachingRow: React.FC<Props> = ({
   coachingAccount,
   accountListId,
@@ -37,13 +33,16 @@ export const CoachingRow: React.FC<Props> = ({
     id,
     monthlyGoal,
     currency,
+    users,
     name,
+    balance,
     totalPledges,
     receivedPledges,
     primaryAppeal,
   } = coachingAccount;
 
   const { t } = useTranslation();
+  const locale = useLocale();
 
   const calculatedMonthlyGoal = monthlyGoal ?? 0;
   const appealCurrencyCode = primaryAppeal?.amountCurrency ?? 'USD';
@@ -61,31 +60,49 @@ export const CoachingRow: React.FC<Props> = ({
     },
   });
 
+  const usersList = users.nodes
+    .map((user) => user.firstName + ' ' + user.lastName)
+    .join(', ');
+
   return (
     <>
       <CoachingRowWrapper role="listitem">
-        <CoachingNameText variant="h6" color="primary">
-          <NextLink
-            href={{
-              pathname: '/accountLists/[accountListId]/coaching/[coachingId]',
-              query: { accountListId: accountListId, coachingId: id },
-            }}
-            passHref
-          >
-            <Link flex={1} underline="hover">
-              {name}
-            </Link>
-          </NextLink>
-          <Button
-            onClick={(event) => {
-              event.preventDefault();
-              setConfirmingDelete(true);
-            }}
-            aria-label={t('Remove Access')}
-          >
-            <VisibilityOff />
-          </Button>
-        </CoachingNameText>
+        <Box display="flex">
+          <Box flex={1}>
+            <Typography variant="h6" display="inline">
+              <NextLink
+                href={{
+                  pathname:
+                    '/accountLists/[accountListId]/coaching/[coachingId]',
+                  query: { accountListId: accountListId, coachingId: id },
+                }}
+                passHref
+              >
+                <Link underline="hover">{name}</Link>
+              </NextLink>
+            </Typography>
+            <Typography variant="subtitle1">{usersList}</Typography>
+          </Box>
+          <Box>
+            <Typography
+              variant="h6"
+              sx={{ float: 'left', marginInline: '5px' }}
+            >
+              {t('Balance:')} {currencyFormat(balance, currency, locale)}
+            </Typography>
+            <Tooltip title={t('Remove Access')}>
+              <Button
+                onClick={(event) => {
+                  event.preventDefault();
+                  setConfirmingDelete(true);
+                }}
+                aria-label={t('Remove Access')}
+              >
+                <VisibilityOff />
+              </Button>
+            </Tooltip>
+          </Box>
+        </Box>
         <AppealProgress
           currency={currency}
           goal={calculatedMonthlyGoal}

src/components/Coaching/LoadCoachingList.graphql

@@ -27,6 +27,13 @@ fragment CoachedPerson on CoachingAccountList {
     pledgesAmountProcessed
     pledgesAmountTotal
   }
+  users {
+    nodes {
+      firstName
+      lastName
+      id
+    }
+  }
   currency
   monthlyGoal
   balance