Add Step 4 (Preview step)

pages/accountLists/[accountListId]/tools/csv.page.tsx

@@ -8,6 +8,7 @@ import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import Loading from 'src/components/Loading';
 import CsvHeaders from 'src/components/Tool/Import/Csv/CsvHeaders';
 import { CsvImportProvider } from 'src/components/Tool/Import/Csv/CsvImportContext';
+import CsvPreview from 'src/components/Tool/Import/Csv/CsvPreview';
 import CsvUpload from 'src/components/Tool/Import/Csv/CsvUpload';
 import CsvValues from 'src/components/Tool/Import/Csv/CsvValues';
 import { HeaderBox } from 'src/components/Tool/Import/Csv/HeaderBox';
@@ -81,6 +82,13 @@ const CsvHome: React.FC = () => {
             setCurrentTab={setCurrentTab}
           />
         );
+      case 'tools.import.csv.preview':
+        return (
+          <CsvPreview
+            accountListId={accountListId}
+            setCurrentTab={setCurrentTab}
+          />
+        );
       default:
         return null;
     }

src/components/Tool/Import/Csv/CsvImportSuccessModal.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Button, Grid, Paper, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import Modal from 'src/components/common/Modal/Modal';
+
+interface CsvImportSuccessModalProps {
+  handleClose: () => void;
+}
+
+export const CsvImportSuccessModal: React.FC<CsvImportSuccessModalProps> = ({
+  handleClose,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      isOpen={true}
+      title={t('Info')}
+      handleClose={handleClose}
+      size={'sm'}
+    >
+      <Box>
+        <Paper
+          elevation={3}
+          variant="outlined"
+          style={{
+            padding: '10px',
+            marginTop: '10px',
+          }}
+        >
+          <Grid
+            container
+            spacing={1}
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Grid item>
+              <Typography variant="body1">
+                {t(
+                  'Your CSV import has started and your contacts will be in MPDX shortly. We will email you when your import is complete.',
+                )}
+              </Typography>
+            </Grid>
+            <Grid item sx={{ width: '100%' }}>
+              <Box
+                sx={{
+                  padding: '10px 15px',
+                  display: 'flex',
+                  justifyContent: 'right',
+                  width: '100%',
+                }}
+              >
+                <Button
+                  onClick={handleClose}
+                  variant="contained"
+                  sx={{
+                    bgcolor: 'mpdxBlue.main',
+                    color: 'white',
+                    height: '34px',
+                  }}
+                >
+                  {t('Ok')}
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Box>
+    </Modal>
+  );
+};