From 0f06c11bf4181b74dd8e88ac9fb1c47dd46bc530 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 12 Sep 2024 18:29:16 -0700
Subject: [PATCH 1/5] Add card component and use default buttons

---
 .../Tool/Import/Csv/CsvHeaders.test.tsx       | 11 ++--
 src/components/Tool/Import/Csv/CsvHeaders.tsx | 58 ++++++++++---------
 src/components/Tool/Import/Csv/CsvPreview.tsx | 46 ++++++---------
 src/components/Tool/Import/Csv/CsvUpload.tsx  | 33 ++++++-----
 src/components/Tool/Import/Csv/CsvValues.tsx  | 37 +++++-------
 5 files changed, 88 insertions(+), 97 deletions(-)

diff --git a/src/components/Tool/Import/Csv/CsvHeaders.test.tsx b/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
index 272e2998d..e21d0e78b 100644
--- a/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
+++ b/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
@@ -118,7 +118,10 @@ describe('CsvHeaders', () => {
     });
 
     it('should allow the user to map every header', async () => {
-      uploadData.fileHeaders = { first_name: 'Test1', custom_header: 'Wee' };
+      uploadData.fileHeaders = {
+        first_name: 'First Name',
+        custom_header: 'Wee',
+      };
 
       const { findByRole } = render(
         <CsvHeadersMockComponent
@@ -128,11 +131,9 @@ describe('CsvHeaders', () => {
       );
 
       expect(
-        await findByRole('cell', { name: 'first_name' }),
-      ).toBeInTheDocument();
-      expect(
-        await findByRole('cell', { name: 'custom_header' }),
+        await findByRole('cell', { name: 'First Name' }),
       ).toBeInTheDocument();
+      expect(await findByRole('cell', { name: 'Wee' })).toBeInTheDocument();
     });
   });
 
diff --git a/src/components/Tool/Import/Csv/CsvHeaders.tsx b/src/components/Tool/Import/Csv/CsvHeaders.tsx
index 992f500bf..77ae7f343 100644
--- a/src/components/Tool/Import/Csv/CsvHeaders.tsx
+++ b/src/components/Tool/Import/Csv/CsvHeaders.tsx
@@ -3,6 +3,10 @@ import {
   Alert,
   Box,
   Button,
+  Card,
+  CardHeader,
+  List,
+  ListItem,
   MenuItem,
   Select,
   Table,
@@ -10,20 +14,19 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Typography,
 } from '@mui/material';
 import { cloneDeep } from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import theme from 'src/theme';
 import {
   CsvImportContext,
   CsvImportType,
   CsvImportValue,
   CsvImportViewStepEnum,
 } from './CsvImportContext';
-import { HeaderBox } from './HeaderBox';
 import { get, save } from './csvImportService';
 import { useRequiredHeaders, useSupportedHeaders } from './uploadCsvFile';
 
@@ -208,15 +211,21 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
         </Alert>
       )}
 
-      <Alert severity="info" sx={{ marginBottom: '12px', minWidth: '340px' }}>
-        <ul>
-          <li>
+      <Alert
+        severity="info"
+        icon={false}
+        sx={{ marginBottom: '12px', minWidth: '340px' }}
+      >
+        <List sx={{ listStyleType: 'disc', pl: 2 }}>
+          <ListItem sx={{ display: 'list-item', p: 0 }}>
             {t(
               'Columns with duplicate or empty headers are ignored. Please ensure your CSV does not have any such headers!',
             )}
-          </li>
-          <li>{t('Street is required to import any address information.')}</li>
-        </ul>
+          </ListItem>
+          <ListItem sx={{ display: 'list-item', p: 0 }}>
+            {t('Street is required to import any address information.')}
+          </ListItem>
+        </List>
       </Alert>
 
       {showBackWarningModal && (
@@ -233,10 +242,13 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
         ></Confirmation>
       )}
 
-      <Box sx={{ border: '1px solid', minWidth: '340px' }}>
-        <HeaderBox>
-          <Typography variant="body1">{t('Map your headers')}</Typography>
-        </HeaderBox>
+      <Card sx={{ minWidth: '340px' }}>
+        <CardHeader
+          sx={{
+            backgroundColor: theme.palette.cruGrayLight.main,
+          }}
+          title={t('Map your headers')}
+        />
         <Table>
           <TableHead>
             <TableRow>
@@ -248,15 +260,16 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
           </TableHead>
 
           <TableBody>
-            {Object.keys(importHeaders).map((header) => {
+            {Object.entries(importHeaders).map(([header, headerName]) => {
               return (
                 <TableRow key={header}>
-                  <TableCell>{header}</TableCell>
+                  <TableCell>{headerName}</TableCell>
                   <TableCell>
                     <Select
                       onChange={(e) => handleUpdateHeaders(e, header)}
                       value={fileHeadersMappings[header] || -1}
                       sx={{ minWidth: '210px' }}
+                      size="small"
                     >
                       <MenuItem value={-1} selected={true}>
                         {t('Do Not Import')}
@@ -289,29 +302,18 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
             justifyContent: 'space-between',
           }}
         >
-          <Button
-            sx={{
-              bgcolor: 'cruGrayDark.main',
-              color: 'white',
-              height: '34px',
-            }}
-            onClick={handleBack}
-          >
+          <Button variant="contained" onClick={handleBack}>
             {t('Back')}
           </Button>
           <Button
-            sx={{
-              bgcolor: 'mpdxBlue.main',
-              color: 'white',
-              height: '34px',
-            }}
+            variant="contained"
             onClick={handleSave}
             disabled={!uploadData || unmappedHeaders.length !== 0}
           >
             {t('Next')}
           </Button>
         </Box>
-      </Box>
+      </Card>
     </>
   );
 };
diff --git a/src/components/Tool/Import/Csv/CsvPreview.tsx b/src/components/Tool/Import/Csv/CsvPreview.tsx
index 6108e78c4..6cfc9fe82 100644
--- a/src/components/Tool/Import/Csv/CsvPreview.tsx
+++ b/src/components/Tool/Import/Csv/CsvPreview.tsx
@@ -3,6 +3,8 @@ import {
   Autocomplete,
   Box,
   Button,
+  Card,
+  CardHeader,
   Checkbox,
   FormControlLabel,
   Table,
@@ -19,6 +21,7 @@ import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import { useGetContactTagListQuery } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.generated';
 import { ContactTagIcon, ContactTagInput } from 'src/components/Tags/Tags';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import theme from 'src/theme';
 import {
   CsvImportContext,
   CsvImportType,
@@ -26,7 +29,6 @@ import {
   CsvImportViewStepEnum,
 } from './CsvImportContext';
 import { CsvImportSuccessModal } from './CsvImportSuccessModal';
-import { HeaderBox } from './HeaderBox';
 import { get, save } from './csvImportService';
 import { useSupportedHeaders } from './uploadCsvFile';
 
@@ -162,10 +164,13 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
           </Box>
         </Box>
       </Box>
-      <Box sx={{ border: '1px solid', minWidth: '340px' }}>
-        <HeaderBox>
-          <Typography variant="body1">{t('Preview')}</Typography>
-        </HeaderBox>
+      <Card sx={{ minWidth: '340px' }}>
+        <CardHeader
+          sx={{
+            backgroundColor: theme.palette.cruGrayLight.main,
+          }}
+          title={t('Preview')}
+        />
         <Box sx={{ padding: '10px 15px' }}>
           <Typography variant="body1">
             {t(
@@ -223,7 +228,7 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
                 <TableCell>{t('Church')}</TableCell>
                 <TableCell>{t('Website')}</TableCell>
                 <TableCell>{t('Send Goals?')}</TableCell>
-                <TableCell>{t('Referred By')}</TableCell>
+                <TableCell>{t('Connecting Partner')}</TableCell>
                 <LastColumn>{t('Relationship Code')}</LastColumn>
               </TableRow>
             </TableHead>
@@ -287,9 +292,10 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
                     </LastColumn>
 
                     <TableCell>{contact.notes}</TableCell>
-                    <TableCell>{`${JSON.stringify(
-                      contact.tagList,
-                    )}`}</TableCell>
+                    <TableCell>
+                      {!!contact.tagList?.length &&
+                        `${JSON.stringify(contact.tagList)}`}
+                    </TableCell>
                     <TableCell>{contact.churchName}</TableCell>
                     <TableCell>{contact.website}</TableCell>
                     <TableCell>{`${contact.noAppeals}`}</TableCell>
@@ -312,14 +318,7 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
             flexWrap: 'wrap',
           }}
         >
-          <Button
-            onClick={handleBack}
-            sx={{
-              bgcolor: 'cruGrayDark.main',
-              color: 'white',
-              height: '34px',
-            }}
-          >
+          <Button onClick={handleBack} variant="contained">
             {t('Back')}
           </Button>
           <Box
@@ -335,21 +334,12 @@ const CsvPreview: React.FC<CsvPreviewProps> = ({
                 <Checkbox id="accept" onClick={() => setAccept(!accept)} />
               }
             />
-            <Button
-              onClick={handleSave}
-              disabled={!accept}
-              sx={{
-                bgcolor: 'mpdxBlue.main',
-                color: 'white',
-                height: '34px',
-                marginTop: { xs: '6px', sm: 0 },
-              }}
-            >
+            <Button onClick={handleSave} disabled={!accept} variant="contained">
               {t('Import')}
             </Button>
           </Box>
         </Box>
-      </Box>
+      </Card>
     </>
   );
 };
diff --git a/src/components/Tool/Import/Csv/CsvUpload.tsx b/src/components/Tool/Import/Csv/CsvUpload.tsx
index 06cd42803..45db88ad1 100644
--- a/src/components/Tool/Import/Csv/CsvUpload.tsx
+++ b/src/components/Tool/Import/Csv/CsvUpload.tsx
@@ -1,14 +1,21 @@
 import React, { useMemo, useRef } from 'react';
-import { Box, Button, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Typography,
+} from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import { getErrorMessage } from 'src/lib/getErrorFromCatch';
+import theme from 'src/theme';
 import {
   CsvImportContext,
   CsvImportType,
   CsvImportViewStepEnum,
 } from './CsvImportContext';
-import { HeaderBox } from './HeaderBox';
 import { getMaxFileSize, uploadFile } from './uploadCsvFile';
 
 interface CsvUploadProps {
@@ -75,17 +82,20 @@ const CsvUpload: React.FC<CsvUploadProps> = ({
   };
 
   return (
-    <Box sx={{ border: '1px solid' }}>
-      <HeaderBox>
-        <Typography variant="body1">{t('Upload your CSV File')}</Typography>
-      </HeaderBox>
-      <Box sx={{ padding: '15px' }}>
+    <Card>
+      <CardHeader
+        sx={{
+          backgroundColor: theme.palette.cruGrayLight.main,
+        }}
+        title={t('Upload your CSV File')}
+      />
+      <CardContent>
         <Typography variant="body1">
           {t(
             'A CSV is a comma-seperated spreadsheet format that can be created by many programs such as Excel, Google Sheets, Google Contacts or Numbers.',
           )}
         </Typography>
-      </Box>
+      </CardContent>
       <Box
         sx={{
           backgroundColor: 'cruGrayLight.main',
@@ -103,10 +113,7 @@ const CsvUpload: React.FC<CsvUploadProps> = ({
             type="submit"
             variant="contained"
             sx={{
-              bgcolor: 'mpdxBlue.main',
-              color: 'white',
-              height: '34px',
-              width: '150px',
+              marginLeft: 2,
             }}
             onClick={handleFileClick}
           >
@@ -122,7 +129,7 @@ const CsvUpload: React.FC<CsvUploadProps> = ({
           />
         </form>
       </Box>
-    </Box>
+    </Card>
   );
 };
 
diff --git a/src/components/Tool/Import/Csv/CsvValues.tsx b/src/components/Tool/Import/Csv/CsvValues.tsx
index 3fc9e0898..3f070dd45 100644
--- a/src/components/Tool/Import/Csv/CsvValues.tsx
+++ b/src/components/Tool/Import/Csv/CsvValues.tsx
@@ -2,6 +2,8 @@ import React, { useContext, useEffect } from 'react';
 import {
   Box,
   Button,
+  Card,
+  CardHeader,
   MenuItem,
   Select,
   Table,
@@ -9,7 +11,6 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Typography,
 } from '@mui/material';
 import { invert } from 'lodash';
 import { cloneDeep } from 'lodash/fp';
@@ -17,13 +18,13 @@ import { useTranslation } from 'react-i18next';
 import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { snakeToCamel } from 'src/lib/snakeToCamel';
+import theme from 'src/theme';
 import {
   CsvImportContext,
   CsvImportType,
   CsvImportValue,
   CsvImportViewStepEnum,
 } from './CsvImportContext';
-import { HeaderBox } from './HeaderBox';
 import { get, save } from './csvImportService';
 import { useSupportedHeaders } from './uploadCsvFile';
 
@@ -110,10 +111,13 @@ const CsvValues: React.FC<CsvValuesProps> = ({
   }
 
   return (
-    <Box sx={{ border: '1px solid', minWidth: '340px' }}>
-      <HeaderBox>
-        <Typography variant="body1">{t('Map your values')}</Typography>
-      </HeaderBox>
+    <Card sx={{ minWidth: '340px' }}>
+      <CardHeader
+        sx={{
+          backgroundColor: theme.palette.cruGrayLight.main,
+        }}
+        title={t('Map your values')}
+      />
 
       <Table sx={{ width: '100%', maxWidth: '100%' }}>
         <TableHead>
@@ -152,6 +156,7 @@ const CsvValues: React.FC<CsvValuesProps> = ({
                               </TableCell>
                               <TableCell>
                                 <Select
+                                  size="small"
                                   onChange={(e) =>
                                     handleUpdateValues(e, constantKey, valueKey)
                                   }
@@ -243,28 +248,14 @@ const CsvValues: React.FC<CsvValuesProps> = ({
           justifyContent: 'space-between',
         }}
       >
-        <Button
-          sx={{
-            bgcolor: 'cruGrayDark.main',
-            color: 'white',
-            height: '34px',
-          }}
-          onClick={handleBack}
-        >
+        <Button variant="contained" onClick={handleBack}>
           {t('Back')}
         </Button>
-        <Button
-          sx={{
-            bgcolor: 'mpdxBlue.main',
-            color: 'white',
-            height: '34px',
-          }}
-          onClick={handleSave}
-        >
+        <Button variant="contained" onClick={handleSave}>
           {t('Next')}
         </Button>
       </Box>
-    </Box>
+    </Card>
   );
 };
 

From dabd27b395b0cf592c0a7ed4aadfdcbb9cd1ef2e Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 12 Sep 2024 18:30:01 -0700
Subject: [PATCH 2/5] Use Card on Steps Boxes

---
 .../Tool/Import/Csv/CsvImportWrapper.tsx      | 120 +++++++++---------
 src/components/Tool/Import/Csv/HeaderBox.tsx  |  19 ---
 2 files changed, 57 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/Tool/Import/Csv/HeaderBox.tsx

diff --git a/src/components/Tool/Import/Csv/CsvImportWrapper.tsx b/src/components/Tool/Import/Csv/CsvImportWrapper.tsx
index a7214f934..069062127 100644
--- a/src/components/Tool/Import/Csv/CsvImportWrapper.tsx
+++ b/src/components/Tool/Import/Csv/CsvImportWrapper.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Card, Grid, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { TFunction } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -9,7 +9,6 @@ import { DynamicCsvHeaders } from './DynamicCsvHeaders';
 import { DynamicCsvPreview } from './DynamicCsvPreview';
 import { DynamicCsvUpload } from './DynamicCsvUpload';
 import { DynamicCsvValues } from './DynamicCsvValues';
-import { HeaderBox } from './HeaderBox';
 
 const useStyles = makeStyles()(() => ({
   panelSuccess: {
@@ -19,20 +18,10 @@ const useStyles = makeStyles()(() => ({
   },
 }));
 
-const StepBox = styled(HeaderBox)(({ theme }) => ({
-  border: '1px solid transparent',
+const StepCard = styled(Card)(({ theme }) => ({
   textAlign: 'center',
-  width: '22%',
-  marginLeft: '10px',
-  marginRight: '10px',
-  [theme.breakpoints.down('lg')]: {
-    width: '22%',
-  },
-  [theme.breakpoints.down('md')]: {
-    width: '100%',
-    marginLeft: 0,
-    minWidth: '340px',
-  },
+  backgroundColor: theme.palette.cruGrayLight.main,
+  padding: '10px',
 }));
 
 export interface CsvImportWrapperProps {
@@ -95,58 +84,63 @@ export const CsvImportWrapper: React.FC<CsvImportWrapperProps> = ({
         flexDirection: 'row',
         justifyContent: 'center',
         width: '100%',
+        minWidth: '340px',
       }}
     >
       <ToolsGridContainer container spacing={3}>
         <Grid item xs={12}>
-          <Box>
-            <StepBox
-              m={2}
-              className={
-                currentTab === CsvImportViewStepEnum.Upload
-                  ? classes.panelSuccess
-                  : ''
-              }
-            >
-              <Typography variant="h5">{t('Step 1')}</Typography>
-              <Typography variant="body1">
-                {t('Upload your CSV File')}
-              </Typography>
-            </StepBox>
-            <StepBox
-              m={2}
-              className={
-                currentTab === CsvImportViewStepEnum.Headers
-                  ? classes.panelSuccess
-                  : ''
-              }
-            >
-              <Typography variant="h5">{t('Step 2')}</Typography>
-              <Typography variant="body1">{t('Map your headers')}</Typography>
-            </StepBox>
-            <StepBox
-              m={2}
-              className={
-                currentTab === CsvImportViewStepEnum.Values
-                  ? classes.panelSuccess
-                  : ''
-              }
-            >
-              <Typography variant="h5">{t('Step 3')}</Typography>
-              <Typography variant="body1">{t('Map your values')}</Typography>
-            </StepBox>
-            <StepBox
-              m={2}
-              className={
-                currentTab === CsvImportViewStepEnum.Preview
-                  ? classes.panelSuccess
-                  : ''
-              }
-            >
-              <Typography variant="h5">{t('Step 4')}</Typography>
-              <Typography variant="body1">{t('Preview')}</Typography>
-            </StepBox>
-          </Box>
+          <Grid container spacing={2}>
+            <Grid item xs={12} sm={6} md={3}>
+              <StepCard
+                className={
+                  currentTab === CsvImportViewStepEnum.Upload
+                    ? classes.panelSuccess
+                    : ''
+                }
+              >
+                <Typography variant="h5">{t('Step 1')}</Typography>
+                <Typography variant="body1">
+                  {t('Upload your CSV File')}
+                </Typography>
+              </StepCard>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <StepCard
+                className={
+                  currentTab === CsvImportViewStepEnum.Headers
+                    ? classes.panelSuccess
+                    : ''
+                }
+              >
+                <Typography variant="h5">{t('Step 2')}</Typography>
+                <Typography variant="body1">{t('Map your headers')}</Typography>
+              </StepCard>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <StepCard
+                className={
+                  currentTab === CsvImportViewStepEnum.Values
+                    ? classes.panelSuccess
+                    : ''
+                }
+              >
+                <Typography variant="h5">{t('Step 3')}</Typography>
+                <Typography variant="body1">{t('Map your values')}</Typography>
+              </StepCard>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3}>
+              <StepCard
+                className={
+                  currentTab === CsvImportViewStepEnum.Preview
+                    ? classes.panelSuccess
+                    : ''
+                }
+              >
+                <Typography variant="h5">{t('Step 4')}</Typography>
+                <Typography variant="body1">{t('Preview')}</Typography>
+              </StepCard>
+            </Grid>
+          </Grid>
           <br />
           {renderTab(accountListId)}
         </Grid>
diff --git a/src/components/Tool/Import/Csv/HeaderBox.tsx b/src/components/Tool/Import/Csv/HeaderBox.tsx
deleted file mode 100644
index 79720bd55..000000000
--- a/src/components/Tool/Import/Csv/HeaderBox.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const HeaderBox = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.cruGrayLight.main,
-  borderBottom: '1px solid #bfbfbf',
-  borderRadius: '1px',
-  boxShadow: '0 1px 1px rgba(0, 0, 0, .05)',
-  borderTopLeftRadius: '3px',
-  borderTopRightRadius: '3px',
-  cursor: 'default',
-  display: 'inline-block',
-  lineHeight: '23px',
-  marginBottom: '5px',
-  padding: '10px 15px',
-  transition: 'border-color .5s',
-  userSelect: 'none',
-  width: '100%',
-}));

From bdc968a2a22316e0962846b5ccdadd591077154a Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Thu, 12 Sep 2024 18:30:41 -0700
Subject: [PATCH 3/5] Stop requiring full_name to import

---
 src/components/Tool/Import/Csv/uploadCsvFile.test.ts | 2 +-
 src/components/Tool/Import/Csv/uploadCsvFile.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Tool/Import/Csv/uploadCsvFile.test.ts b/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
index 342dc63fd..156415adf 100644
--- a/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
+++ b/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
@@ -269,7 +269,7 @@ describe('uploadCsvFile', () => {
   describe('useRequiredHeaders', () => {
     it('should bring back headers', () => {
       const { result } = renderHook(() => useRequiredHeaders());
-      expect(result.current).toEqual(['first_name', 'last_name', 'full_name']);
+      expect(result.current).toEqual(['first_name', 'last_name']);
     });
   });
 });
diff --git a/src/components/Tool/Import/Csv/uploadCsvFile.ts b/src/components/Tool/Import/Csv/uploadCsvFile.ts
index f223a3173..8a19c286b 100644
--- a/src/components/Tool/Import/Csv/uploadCsvFile.ts
+++ b/src/components/Tool/Import/Csv/uploadCsvFile.ts
@@ -146,7 +146,7 @@ export const useSupportedHeaders = () => {
     phone_2: 'Phone 2',
     phone_3: 'Phone 3',
     relationship_code: 'Relationship Code',
-    referred_by: 'Referred By',
+    referred_by: 'Connecting Partner',
     region: 'Region',
     send_appeals: 'Send Appeals?',
     spouse_email: 'Spouse Email',
@@ -182,7 +182,7 @@ export const useSupportedHeaders = () => {
 };
 
 export const useRequiredHeaders = () => {
-  const hardCodedRequiredHeaders = ['first_name', 'last_name', 'full_name'];
+  const hardCodedRequiredHeaders = ['first_name', 'last_name'];
 
   const [requiredHeaders, setRequiredHeaders] = useState(
     hardCodedRequiredHeaders,

From 75897deb5889cfb48b9612883f27902761546f43 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 13 Sep 2024 10:17:18 -0700
Subject: [PATCH 4/5] Add full_name back and add empty useEffect dependency
 array

---
 src/components/Tool/Import/Csv/uploadCsvFile.test.ts | 2 +-
 src/components/Tool/Import/Csv/uploadCsvFile.ts      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Tool/Import/Csv/uploadCsvFile.test.ts b/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
index 156415adf..342dc63fd 100644
--- a/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
+++ b/src/components/Tool/Import/Csv/uploadCsvFile.test.ts
@@ -269,7 +269,7 @@ describe('uploadCsvFile', () => {
   describe('useRequiredHeaders', () => {
     it('should bring back headers', () => {
       const { result } = renderHook(() => useRequiredHeaders());
-      expect(result.current).toEqual(['first_name', 'last_name']);
+      expect(result.current).toEqual(['first_name', 'last_name', 'full_name']);
     });
   });
 });
diff --git a/src/components/Tool/Import/Csv/uploadCsvFile.ts b/src/components/Tool/Import/Csv/uploadCsvFile.ts
index 8a19c286b..6c942c9df 100644
--- a/src/components/Tool/Import/Csv/uploadCsvFile.ts
+++ b/src/components/Tool/Import/Csv/uploadCsvFile.ts
@@ -176,13 +176,13 @@ export const useSupportedHeaders = () => {
         determineSupportedHeaders();
       }
     };
-  });
+  }, []);
 
   return supportedHeaders;
 };
 
 export const useRequiredHeaders = () => {
-  const hardCodedRequiredHeaders = ['first_name', 'last_name'];
+  const hardCodedRequiredHeaders = ['first_name', 'last_name', 'full_name'];
 
   const [requiredHeaders, setRequiredHeaders] = useState(
     hardCodedRequiredHeaders,
@@ -199,7 +199,7 @@ export const useRequiredHeaders = () => {
         determineRequiredHeaders();
       }
     };
-  });
+  }, []);
 
   return requiredHeaders;
 };

From f74c6151dc74eb30a6596a28888e46e265a812ba Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 13 Sep 2024 11:06:40 -0700
Subject: [PATCH 5/5] Add first & last OR full name functionality

---
 .../Tool/Import/Csv/CsvHeaders.test.tsx       | 11 ++++----
 src/components/Tool/Import/Csv/CsvHeaders.tsx | 26 ++++++++++++++++---
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/Tool/Import/Csv/CsvHeaders.test.tsx b/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
index e21d0e78b..74524f8ed 100644
--- a/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
+++ b/src/components/Tool/Import/Csv/CsvHeaders.test.tsx
@@ -99,8 +99,9 @@ describe('CsvHeaders', () => {
         ></CsvHeadersMockComponent>,
       );
 
-      expect(queryByText('first_name is required')).toBeInTheDocument();
-      expect(queryByText('last_name is required')).toBeInTheDocument();
+      expect(queryByText('First Name is required')).toBeInTheDocument();
+      expect(queryByText('Last Name is required')).toBeInTheDocument();
+      expect(queryByText('Full Name is required')).toBeInTheDocument();
     });
 
     it('should not show errors if required headers are mapped', async () => {
@@ -112,9 +113,9 @@ describe('CsvHeaders', () => {
         ></CsvHeadersMockComponent>,
       );
 
-      expect(queryByText('first_name is required')).not.toBeInTheDocument();
-      expect(queryByText('last_name is required')).not.toBeInTheDocument();
-      expect(queryByText('full_name is required')).not.toBeInTheDocument();
+      expect(queryByText('First Name is required')).not.toBeInTheDocument();
+      expect(queryByText('Last Name is required')).not.toBeInTheDocument();
+      expect(queryByText('Full Name is required')).not.toBeInTheDocument();
     });
 
     it('should allow the user to map every header', async () => {
diff --git a/src/components/Tool/Import/Csv/CsvHeaders.tsx b/src/components/Tool/Import/Csv/CsvHeaders.tsx
index 77ae7f343..e5f9962e0 100644
--- a/src/components/Tool/Import/Csv/CsvHeaders.tsx
+++ b/src/components/Tool/Import/Csv/CsvHeaders.tsx
@@ -59,8 +59,21 @@ const updateUnmappedHeaders = (
   fileHeadersMappings: object,
   setUnmappedHeaders: React.Dispatch<React.SetStateAction<string[]>>,
 ) => {
-  const unmapped = requiredHeaders.filter((header) => {
-    return !Object.values(fileHeadersMappings).includes(header);
+  const fileHeaderMappingsValues = Object.values(fileHeadersMappings);
+
+  const containsName =
+    (fileHeaderMappingsValues.includes('first_name') &&
+      fileHeaderMappingsValues.includes('last_name')) ||
+    fileHeaderMappingsValues.includes('full_name');
+
+  // If the file's headers contain a name, then remove names from required headers.
+  const newRequiredHeaders = containsName
+    ? requiredHeaders.filter(
+        (header) => !['first_name', 'last_name', 'full_name'].includes(header),
+      )
+    : requiredHeaders;
+  const unmapped = newRequiredHeaders.filter((header) => {
+    return !fileHeaderMappingsValues.includes(header);
   });
   setUnmappedHeaders(unmapped);
 };
@@ -203,11 +216,16 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
           {unmappedHeaders.map((header) => {
             return (
               <p key={header}>
-                {header}
+                {supportedHeaders[header]}
                 {t(' is required')}
               </p>
             );
           })}
+          {unmappedHeaders.includes('full_name') && (
+            <p>
+              {t('* You need to include both First & Last Name OR Full Name')}
+            </p>
+          )}
         </Alert>
       )}
 
@@ -264,7 +282,7 @@ const CsvHeaders: React.FC<CsvHeadersProps> = ({
               return (
                 <TableRow key={header}>
                   <TableCell>{headerName}</TableCell>
-                  <TableCell>
+                  <TableCell sx={{ paddingY: 1 }}>
                     <Select
                       onChange={(e) => handleUpdateHeaders(e, header)}
                       value={fileHeadersMappings[header] || -1}