3. Appeal Header - Move files and allow for editing info

src/components/Tool/Appeal/AppealDetails/AppealHeaderInfo/AppealHeaderInfo.test.tsx

@@ -0,0 +1,86 @@
+import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SnackbarProvider } from 'notistack';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
+import theme from 'src/theme';
+import { appealInfo } from '../../appealMockData';
+import { AppealHeaderInfo, AppealHeaderInfoProps } from './AppealHeaderInfo';
+
+const router = {
+  query: { accountListId: 'aaa' },
+  isReady: true,
+};
+
+const Components = ({ appealInfo, loading }: AppealHeaderInfoProps) => (
+  <LocalizationProvider dateAdapter={AdapterLuxon}>
+    <ThemeProvider theme={theme}>
+      <SnackbarProvider>
+        <TestRouter router={router}>
+          <GqlMockedProvider>
+            <AppealsWrapper>
+              <AppealHeaderInfo appealInfo={appealInfo} loading={loading} />
+            </AppealsWrapper>
+          </GqlMockedProvider>
+        </TestRouter>
+      </SnackbarProvider>
+    </ThemeProvider>
+  </LocalizationProvider>
+);
+
+describe('AppealHeaderInfo', () => {
+  it('renders skeletons when loading', () => {
+    const { getByTestId, getByRole } = render(
+      <Components appealInfo={appealInfo} loading={true} />,
+    );
+
+    expect(getByRole('heading', { name: 'Name:' })).toBeInTheDocument();
+    expect(getByTestId('appeal-name-skeleton')).toBeInTheDocument();
+
+    expect(getByRole('heading', { name: 'Goal:' })).toBeInTheDocument();
+    expect(getByTestId('appeal-goal-skeleton')).toBeInTheDocument();
+  });
+
+  it('renders appeal info', async () => {
+    const { getByText, findByText } = render(
+      <Components appealInfo={appealInfo} loading={false} />,
+    );
+
+    expect(await findByText('Test Appeal')).toBeInTheDocument();
+
+    expect(getByText('$100')).toBeInTheDocument();
+    expect(getByText(/\$50 \(50%\)/i)).toBeInTheDocument();
+    expect(getByText(/\$100 \(100%\)/i)).toBeInTheDocument();
+  });
+
+  it('should allow user to open the edit appeal info modal', async () => {
+    const { findByText, findByRole, getByTestId, getByRole, queryByRole } =
+      render(<Components appealInfo={appealInfo} loading={false} />);
+
+    expect(await findByText('Test Appeal')).toBeInTheDocument();
+
+    userEvent.click(getByTestId('edit-appeal-name'));
+
+    expect(
+      await findByRole('heading', { name: 'Edit Appeal' }),
+    ).toBeInTheDocument();
+
+    userEvent.click(getByTestId('edit-appeal-goal'));
+
+    expect(
+      await findByRole('heading', { name: 'Edit Appeal' }),
+    ).toBeInTheDocument();
+
+    userEvent.click(getByRole('button', { name: 'Close' }));
+
+    await waitFor(() => {
+      expect(
+        queryByRole('heading', { name: 'Edit Appeal' }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/components/Tool/Appeal/AppealDetails/AppealHeaderInfo.tsx → src/components/Tool/Appeal/AppealDetails/AppealHeaderInfo/AppealHeaderInfo.tsx

@@ -7,11 +7,11 @@ import { EditIcon } from 'src/components/Contacts/ContactDetails/ContactDetailsT
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat } from 'src/lib/intlFormat';
 import theme from 'src/theme';
-import AppealProgressBar from '../AppealProgressBar';
 import {
   DynamicEditAppealHeaderInfoModal,
   preloadEditAppealHeaderInfoModal,
-} from './EditAppealHeaderInfoModal/DynamicEditAppealHeaderInfoModal';
+} from '../../Modals/EditAppealHeaderInfoModal/DynamicEditAppealHeaderInfoModal';
+import AppealProgressBar from '../AppealProgressBar/AppealProgressBar';
 
 export const appealHeaderInfoHeight = theme.spacing(9);
 
@@ -95,6 +95,7 @@ export const AppealHeaderInfo: React.FC<AppealHeaderInfoProps> = ({
                       onClick={() => setIsEditAppealModalOpen(true)}
                       onMouseOver={preloadEditAppealHeaderInfoModal}
                       aria-label={t('Edit Icon')}
+                      data-testid="edit-appeal-name"
                     >
                       <EditIcon />
                     </IconButton>
@@ -126,6 +127,7 @@ export const AppealHeaderInfo: React.FC<AppealHeaderInfoProps> = ({
                       onClick={() => setIsEditAppealModalOpen(true)}
                       onMouseOver={preloadEditAppealHeaderInfoModal}
                       aria-label={t('Edit Icon')}
+                      data-testid="edit-appeal-goal"
                     >
                       <EditIcon />
                     </IconButton>

src/components/Tool/Appeal/AppealProgressBar.tsx → src/components/Tool/Appeal/AppealDetails/AppealProgressBar/AppealProgressBar.tsx

@@ -3,7 +3,7 @@ import { Box, Theme, Tooltip, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat } from 'src/lib/intlFormat';
-import theme from '../../../theme';
+import theme from 'src/theme';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   colorYellow: {

src/components/Tool/Appeal/Flow/ContactFlow.tsx

@@ -11,7 +11,7 @@ import { ContactFlowDragLayer } from 'src/components/Contacts/ContactFlow/Contac
 import { ContactFilterSetInput } from 'src/graphql/types.generated';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import { AppealHeaderInfo } from '../AppealDetails/AppealHeaderInfo';
+import { AppealHeaderInfo } from '../AppealDetails/AppealHeaderInfo/AppealHeaderInfo';
 import { AppealQuery } from '../AppealDetails/AppealsMainPanel/AppealInfo.generated';
 import { AppealStatusEnum } from '../AppealsContext/AppealsContext';
 import { ContactFlowColumn } from './ContactFlowColumn/ContactFlowColumn';

src/components/Tool/Appeal/Flow/ContactFlowColumn/ContactFlowColumn.tsx

@@ -27,7 +27,7 @@ import {
   AppealsContext,
   AppealsType,
 } from 'src/components/Tool/Appeal/AppealsContext/AppealsContext';
-import { appealHeaderInfoHeight } from '../../AppealDetails/AppealHeaderInfo';
+import { appealHeaderInfoHeight } from '../../AppealDetails/AppealHeaderInfo/AppealHeaderInfo';
 import { ContactFlowDropZone } from '../ContactFlowDropZone/ContactFlowDropZone';
 import { ContactFlowRow } from '../ContactFlowRow/ContactFlowRow';
 

src/components/Tool/Appeal/InitialPage/Appeal.tsx

@@ -9,7 +9,7 @@ import { AppealFieldsFragment } from 'pages/accountLists/[accountListId]/tools/G
 import { useAccountListId } from '../../../../hooks/useAccountListId';
 import theme from '../../../../theme';
 import AnimatedCard from '../../../AnimatedCard';
-import AppealProgressBar from '../AppealProgressBar';
+import AppealProgressBar from '../AppealDetails/AppealProgressBar/AppealProgressBar';
 
 const useStyles = makeStyles()(() => ({
   cardContent: {

src/components/Tool/Appeal/List/ContactsList/ContactsList.tsx

@@ -11,7 +11,7 @@ import theme from 'src/theme';
 import {
   AppealHeaderInfo,
   appealHeaderInfoHeight,
-} from '../../AppealDetails/AppealHeaderInfo';
+} from '../../AppealDetails/AppealHeaderInfo/AppealHeaderInfo';
 import { AppealQuery } from '../../AppealDetails/AppealsMainPanel/AppealInfo.generated';
 import {
   AppealStatusEnum,

src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.test.tsx

@@ -12,7 +12,7 @@ import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
 import { AppealsContext } from '../../AppealsContext/AppealsContext';
-import { AppealQuery } from '../AddContactToAppealModal/appealInfo.generated';
+import { AppealQuery } from '../AddContactToAppealModal/AppealInfo.generated';
 import { AddExcludedContactModal } from './AddExcludedContactModal';
 
 const accountListId = 'abc';

src/components/Tool/Appeal/Modals/AddExcludedContactModal/AddExcludedContactModal.tsx

@@ -18,7 +18,7 @@ import {
   AppealsContext,
   AppealsType,
 } from '../../AppealsContext/AppealsContext';
-import { useAppealQuery } from '../AddContactToAppealModal/appealInfo.generated';
+import { useAppealQuery } from '../AddContactToAppealModal/AppealInfo.generated';
 import { useAssignContactsToAppealMutation } from './AddExcludedContactModal.generated';
 
 const LoadingIndicator = styled(CircularProgress)(({ theme }) => ({

src/components/Tool/Appeal/Modals/EditAppealHeaderInfoModal/DynamicEditAppealHeaderInfoModal.tsx

@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+import { DynamicModalPlaceholder } from 'src/components/DynamicPlaceholders/DynamicModalPlaceholder';
+
+export const preloadEditAppealHeaderInfoModal = () =>
+  import(
+    /* webpackChunkName: "EditAppealHeaderInfoModal" */ './EditAppealHeaderInfoModal'
+  ).then(({ EditAppealHeaderInfoModal }) => EditAppealHeaderInfoModal);
+
+export const DynamicEditAppealHeaderInfoModal = dynamic(
+  preloadEditAppealHeaderInfoModal,
+  { loading: DynamicModalPlaceholder },
+);

src/components/Tool/Appeal/Modals/EditAppealHeaderInfoModal/EditAppeal.graphql

@@ -0,0 +1,8 @@
+mutation UpdateAppeal($input: AppealUpdateMutationInput!) {
+  updateAppeal(input: $input) {
+    appeal {
+      name
+      amount
+    }
+  }
+}