added move contacts

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css

@@ -1,11 +1,15 @@
 .Container {
-  padding-left: 40px;
-  margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 80%;
+  background-color: #fff;
+  border-radius: 15px;
+  padding: 1.5rem 2rem;
 }
 
 .Instructions {
   max-width: 500px;
-  color: #93a29b;
   font-size: 16px;
 }
 
@@ -105,3 +109,17 @@
   position: absolute;
   right: 12px;
 }
+
+.Buttons {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: end;
+  width: 100%;
+}
+
+.Buttons button {
+  border-radius: 8px;
+  width: 30%;
+}

src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx

@@ -4,15 +4,13 @@ import { useMutation } from '@apollo/client';
 
 import { CONTACT_MANAGE_HELP_LINK, UPLOAD_CONTACTS_ADMIN_SAMPLE } from 'config';
 import { Button } from 'components/UI/Form/Button/Button';
-import { Heading } from 'components/UI/Heading/Heading';
 import UploadIcon from 'assets/images/icons/UploadLight.svg?react';
 import FileIcon from 'assets/images/icons/Document/Light.svg?react';
 import CrossIcon from 'assets/images/icons/Cross.svg?react';
 import { MOVE_CONTACTS } from 'graphql/mutations/Contact';
 import { exportCsvFile, slicedString } from 'common/utils';
 import { setNotification } from 'common/notification';
 import styles from './AdminContactManagement.module.css';
-import { contactVariablesInfo } from 'common/HelpData';
 
 export const AdminContactManagement = () => {
   const [fileName, setFileName] = useState<string>('');
@@ -58,69 +56,61 @@ export const AdminContactManagement = () => {
   };
 
   return (
-    <div>
-      <Heading
-        formTitle="Contact Management"
-        showHeaderHelp={false}
-        helpData={contactVariablesInfo}
-      />
-      <div className={styles.Container}>
-        <div className={styles.Instructions}>
-          You can move contacts to collections in bulk or update their contact information. Please
-          create csv file that exactly matches the sample. Here are the &nbsp;
-          <a
-            href={CONTACT_MANAGE_HELP_LINK}
-            target="_blank"
-            rel="noreferrer"
-            className={styles.Link}
-          >
-            detailed instructions.
-          </a>
-        </div>
-        <div className={styles.UploadContainer}>
-          <label className={styles.UploadEnabled} htmlFor="uploadFile">
-            <span>
-              <FileIcon className={styles.FileIcon} />
-              {fileName !== '' ? (
-                <>
-                  <span>{fileName}</span>
-                  <CrossIcon
-                    className={styles.CrossIcon}
-                    onClick={(event: any) => {
-                      event.preventDefault();
-                      setFileName('');
-                      setCsvContent('');
-                    }}
-                  />
-                </>
-              ) : (
-                'Select file'
-              )}
+    <div className={styles.Container}>
+      <h1>Move contacts</h1>
 
-              <input
-                type="file"
-                id="uploadFile"
-                disabled={fileName !== ''}
-                data-testid="uploadFile"
-                onChange={(event) => {
-                  setErrors([]);
-                  addAttachment(event);
-                }}
-              />
-            </span>
-          </label>
-          <div className={styles.Sample}>
-            <a href={UPLOAD_CONTACTS_ADMIN_SAMPLE}>Download Sample</a>
-          </div>
+      <div className={styles.Instructions}>
+        You can move contacts to collections in bulk or update their contact information. Please
+        create csv file that exactly matches the sample. Here are the &nbsp;
+        <a href={CONTACT_MANAGE_HELP_LINK} target="_blank" rel="noreferrer" className={styles.Link}>
+          detailed instructions.
+        </a>
+      </div>
+      <div className={styles.UploadContainer}>
+        <label className={styles.UploadEnabled} htmlFor="uploadFile">
+          <span>
+            <FileIcon className={styles.FileIcon} />
+            {fileName !== '' ? (
+              <>
+                <span>{fileName}</span>
+                <CrossIcon
+                  className={styles.CrossIcon}
+                  onClick={(event: any) => {
+                    event.preventDefault();
+                    setFileName('');
+                    setCsvContent('');
+                  }}
+                />
+              </>
+            ) : (
+              'Select file'
+            )}
 
-          {errors &&
-            errors.length > 0 &&
-            errors.map((error: any, index: number) => (
-              <div className={styles.Error} key={error.message}>
-                {index + 1}. {error.message}
-              </div>
-            ))}
+            <input
+              type="file"
+              id="uploadFile"
+              disabled={fileName !== ''}
+              data-testid="uploadFile"
+              onChange={(event) => {
+                setErrors([]);
+                addAttachment(event);
+              }}
+            />
+          </span>
+        </label>
+        <div className={styles.Sample}>
+          <a href={UPLOAD_CONTACTS_ADMIN_SAMPLE}>Download Sample</a>
         </div>
+
+        {errors &&
+          errors.length > 0 &&
+          errors.map((error: any, index: number) => (
+            <div className={styles.Error} key={error.message}>
+              {index + 1}. {error.message}
+            </div>
+          ))}
+      </div>
+      <div className={styles.Buttons}>
         <Button
           data-testid="uploadButton"
           variant="contained"

src/containers/ContactManagement/ContactManagement.module.css

@@ -1,42 +1,35 @@
 .MainContainer {
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  align-items: start;
-  height: 100vh !important;
+  align-items: center;
+  row-gap: 1rem;
   width: 100% !important;
   background-color: #f8faf5;
   padding: 1rem;
+  color: #000;
 }
 
 .Container {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  width: 50%;
+  width: 80%;
   background-color: #fff;
-  border-radius: 20px;
-  box-shadow: #959da533 0px 8px 24px;
+  border-radius: 15px;
   padding: 1.5rem 2rem;
 }
 
 .Buttons {
   margin-top: 1rem;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: end;
+  justify-content: end;
   width: 100%;
 }
 
 .Buttons button {
   border-radius: 8px;
-  width: 50%;
-}
-
-.Buttons a {
-  font-size: 0.8rem;
-  color: #119656;
-  text-decoration: underline;
-  cursor: pointer;
-  line-height: 2rem;
+  width: 30%;
 }

src/containers/ContactManagement/ContactManagement.tsx

@@ -4,14 +4,10 @@ import { Heading } from 'components/UI/Heading/Heading';
 import { useState } from 'react';
 import UploadContactsDialog from './UploadContactsDialog/UploadContactsDialog';
 import { Button } from 'components/UI/Form/Button/Button';
-import { getUserRole } from 'context/role';
-import { UPLOAD_CONTACTS_SAMPLE } from 'config';
+import AdminContactManagement from './AdminContactManagement/AdminContactManagement';
 
 export const ContactManagement = () => {
-  const role = getUserRole();
-
   const [showUploadDialog, setShowUploadDialog] = useState(false);
-
   let dialog;
 
   if (showUploadDialog) {
@@ -23,15 +19,21 @@ export const ContactManagement = () => {
       <Heading formTitle="Contact Management" showHeaderHelp={false} />
       <div className={styles.MainContainer}>
         <div className={styles.Container}>
+          <h1>Bulk contacts upload</h1>
           <Instructions />
 
           <div className={styles.Buttons}>
-            <Button variant="contained" onClick={() => setShowUploadDialog(true)}>
+            <Button
+              data-testid="uploadContactsBtn"
+              variant="contained"
+              onClick={() => setShowUploadDialog(true)}
+            >
               Upload Contacts
             </Button>
-            <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>
           </div>
         </div>
+
+        <AdminContactManagement />
       </div>
 
       {dialog}

src/containers/ContactManagement/Instructions/Instructions.module.css

@@ -2,6 +2,7 @@
   font-size: 1rem;
   line-height: 2rem;
   margin: 0;
+  color: #000;
 }
 
 .Instructions div {

src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx

@@ -156,6 +156,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
               <label
                 className={`${styles.UploadEnabled} ${fileName ? styles.Uploaded : ''}`}
                 htmlFor="uploadFile"
+                data-testid="uploadFile"
               >
                 <span>
                   {fileName !== '' ? (
@@ -180,7 +181,6 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
                     type="file"
                     id="uploadFile"
                     disabled={fileName !== ''}
-                    data-testid="uploadFile"
                     onChange={(event) => {
                       setError(false);
                       addAttachment(event);