fixed csv issue

glific · Aug 8, 2024 · 7f40de7 · 7f40de7
1 parent dd6e625
commit 7f40de7
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 119 deletions.
diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx
@@ -7,9 +7,10 @@ export interface ImportButtonProps {
   title: string;
   onImport: any;
   afterImport: any;
+  id?: string;
 }
 
-export const ImportButton = ({ title, onImport, afterImport }: ImportButtonProps) => {
+export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const changeHandler = (event: any) => {
     const media = event.target.files[0];
@@ -29,6 +30,7 @@ export const ImportButton = ({ title, onImport, afterImport }: ImportButtonProps
         name="file"
         onChange={changeHandler}
         data-testid="import"
+        id={id}
       />
       <Button
         onClick={() => {

diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css
@@ -1,11 +1,12 @@
 .Container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  width: 80%;
+  justify-content: space-between;
+  width: 50%;
+  height: 60%;
   background-color: #fff;
   border-radius: 15px;
-  padding: 1.5rem 2rem;
+  padding: 1rem 2rem;
 }
 
 .Instructions {

diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx
@@ -57,62 +57,70 @@ export const AdminContactManagement = () => {
 
   return (
     <div className={styles.Container}>
-      <h1>Move contacts</h1>
+      <div>
+        <h2>Move contacts</h2>
 
-      <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'
-            )}
-
-            <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 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'
+              )}
+
+              <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>
-          ))}
+          {errors &&
+            errors.length > 0 &&
+            errors.map((error: any, index: number) => (
+              <div className={styles.Error} key={error.message}>
+                {index + 1}. {error.message}
+              </div>
+            ))}
+        </div>
       </div>
+
       <div className={styles.Buttons}>
         <Button
-          data-testid="uploadButton"
+          data-testid="moveContactsBtn"
           variant="contained"
           color="primary"
           disabled={fileName === ''}

diff --git a/src/containers/ContactManagement/ContactManagement.module.css b/src/containers/ContactManagement/ContactManagement.module.css
@@ -1,20 +1,24 @@
 .MainContainer {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  row-gap: 1rem;
+  column-gap: 1rem;
   width: 100% !important;
+  height: 100vh !important;
   background-color: #f8faf5;
   padding: 1rem;
   color: #000;
 }
 
+.MainContainer h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
 .Container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  width: 80%;
+  justify-content: space-between;
+  width: 50%;
+  height: 60%;
   background-color: #fff;
   border-radius: 15px;
   padding: 1.5rem 2rem;

diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx
@@ -19,8 +19,10 @@ export const ContactManagement = () => {
       <Heading formTitle="Contact Management" showHeaderHelp={false} />
       <div className={styles.MainContainer}>
         <div className={styles.Container}>
-          <h1>Bulk contacts upload</h1>
-          <Instructions />
+          <div>
+            <h2>Bulk contacts upload</h2>
+            <Instructions />
+          </div>
 
           <div className={styles.Buttons}>
             <Button

diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx
@@ -9,14 +9,12 @@ import { FILTER_COLLECTIONS } from 'graphql/queries/Collection';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
 import { Field, Form, Formik } from 'formik';
-import UploadIcon from 'assets/images/icons/Upload.svg?react';
-import CrossIcon from 'assets/images/icons/Cross.svg?react';
 import { UPLOAD_CONTACTS_SAMPLE } from 'config';
 import { IMPORT_CONTACTS } from 'graphql/mutations/Contact';
 import { getUserSession } from 'services/AuthService';
-import { slicedString } from 'common/utils';
 import { setNotification } from 'common/notification';
 import styles from './UploadContactsDialog.module.css';
+import { ImportButton } from 'components/UI/ImportButton/ImportButton';
 
 export interface UploadContactsDialogProps {
   organizationDetails?: any;
@@ -27,8 +25,8 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
   const [error, setError] = useState<any>(false);
   const [csvContent, setCsvContent] = useState<String | null | ArrayBuffer>('');
   const [uploadingContacts, setUploadingContacts] = useState(false);
-  const [fileName, setFileName] = useState<string>('');
   const orgId = getUserSession('organizationId');
+  const [importing, setImporting] = useState(false);
 
   const { t } = useTranslation();
   const [collection] = useState();
@@ -65,24 +63,6 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
     },
   });
 
-  const addAttachment = (event: any) => {
-    const media = event.target.files[0];
-    const reader = new FileReader();
-    reader.readAsText(media);
-
-    reader.onload = () => {
-      const mediaName = media.name;
-      const extension = mediaName.slice((Math.max(0, mediaName.lastIndexOf('.')) || Infinity) + 1);
-      if (extension !== 'csv') {
-        setError(true);
-      } else {
-        const shortenedName = slicedString(mediaName, 15);
-        setFileName(shortenedName);
-        setCsvContent(reader.result);
-      }
-    };
-  };
-
   const uploadContacts = (details: any) => {
     importContacts({
       variables: {
@@ -153,41 +133,16 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
             </div>
 
             <div className={styles.UploadContainer}>
-              <label
-                className={`${styles.UploadEnabled} ${fileName ? styles.Uploaded : ''}`}
-                htmlFor="uploadFile"
-                data-testid="uploadFile"
-              >
-                <span>
-                  {fileName !== '' ? (
-                    <>
-                      <span>{fileName}</span>
-                      <CrossIcon
-                        className={styles.CrossIcon}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          setFileName('');
-                        }}
-                      />
-                    </>
-                  ) : (
-                    <>
-                      <UploadIcon className={styles.UploadIcon} />
-                      Select .csv
-                    </>
-                  )}
-
-                  <input
-                    type="file"
-                    id="uploadFile"
-                    disabled={fileName !== ''}
-                    onChange={(event) => {
-                      setError(false);
-                      addAttachment(event);
-                    }}
-                  />
-                </span>
-              </label>
+              <ImportButton
+                id={'uploadcontacts'}
+                title={'Upload contacts'}
+                onImport={() => {
+                  setImporting(true);
+                }}
+                afterImport={(result: string) => {
+                  setCsvContent(result);
+                }}
+              />
             </div>
             <div className={styles.Sample}>
               <a href={UPLOAD_CONTACTS_SAMPLE}>Download Sample</a>