From 4c0e0c80a6ecd6dd209665c359602d67051988d1 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 23 Jul 2024 10:37:26 +0530 Subject: [PATCH 01/30] first stab at contact import ui --- src/components/UI/Heading/Heading.tsx | 2 +- .../ContactManagement.module.css | 42 ++++++++++++++++++ .../ContactManagement/ContactManagement.tsx | 44 +++++++++++++++---- .../Instructions/Instructions.module.css | 16 +++++++ .../Instructions/Instructions.tsx | 35 +++++++++++++++ .../UploadContactsDialog.tsx | 18 ++------ 6 files changed, 133 insertions(+), 24 deletions(-) create mode 100644 src/containers/ContactManagement/ContactManagement.module.css create mode 100644 src/containers/ContactManagement/Instructions/Instructions.module.css create mode 100644 src/containers/ContactManagement/Instructions/Instructions.tsx diff --git a/src/components/UI/Heading/Heading.tsx b/src/components/UI/Heading/Heading.tsx index fd6e65c3d..fbd349871 100644 --- a/src/components/UI/Heading/Heading.tsx +++ b/src/components/UI/Heading/Heading.tsx @@ -21,7 +21,7 @@ export const Heading = ({ formTitle, helpData, showHeaderHelp = true, backLink }
{formTitle}
- {!helpData ? : ''} + {helpData ? : ''}
{showHeaderHelp ? `Please enter below details.` : ''} diff --git a/src/containers/ContactManagement/ContactManagement.module.css b/src/containers/ContactManagement/ContactManagement.module.css new file mode 100644 index 000000000..7ee0cec07 --- /dev/null +++ b/src/containers/ContactManagement/ContactManagement.module.css @@ -0,0 +1,42 @@ +.MainContainer { + display: flex; + justify-content: center; + align-items: start; + height: 100vh !important; + width: 100% !important; + background-color: #f8faf5; + padding: 1rem; +} + +.Container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 50%; + background-color: #fff; + border-radius: 20px; + box-shadow: #959da533 0px 8px 24px; + padding: 1.5rem 2rem; +} + +.Buttons { + margin-top: 1rem; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.Buttons button { + border-radius: 8px; + width: 50%; +} + +.Buttons a { + font-size: 0.8rem; + color: #119656; + text-decoration: underline; + cursor: pointer; + line-height: 1.75rem; +} diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx index 7829bf9b2..fa5090224 100644 --- a/src/containers/ContactManagement/ContactManagement.tsx +++ b/src/containers/ContactManagement/ContactManagement.tsx @@ -1,18 +1,46 @@ -import { getUserRole } from 'context/role'; -import SuperAdminContactManagement from './SuperAdminContactManagement/SuperAdminContactManagement'; +import { Instructions } from './Instructions/Instructions'; +import styles from './ContactManagement.module.css'; import AdminContactManagement from './AdminContactManagement/AdminContactManagement'; +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 SuperAdminContactManagement from './SuperAdminContactManagement/SuperAdminContactManagement'; +import { getUserRole } from 'context/role'; +import { UPLOAD_CONTACTS_SAMPLE } from 'config'; export const ContactManagement = () => { const role = getUserRole(); - if (role.includes('Glific_admin')) { - return ; - } - if (role.includes('Admin')) { - return ; + console.log(role); + + const [showUploadDialog, setShowUploadDialog] = useState(false); + + let dialog; + + if (showUploadDialog) { + dialog = ; } - return
Unauthorized access
; + return ( + <> + +
+
+ + +
+ + Download Sample +
+
+
+ + {dialog} + + ); }; export default ContactManagement; diff --git a/src/containers/ContactManagement/Instructions/Instructions.module.css b/src/containers/ContactManagement/Instructions/Instructions.module.css new file mode 100644 index 000000000..0e297fdf4 --- /dev/null +++ b/src/containers/ContactManagement/Instructions/Instructions.module.css @@ -0,0 +1,16 @@ +.Instructions { +} + +.Instructions h5 { + font-size: 1rem; + line-height: 1rem; + margin: 0; +} + +.Instructions ul { + padding-left: 1rem; +} + +.Instructions ul li { + font-size: 0.8rem; +} diff --git a/src/containers/ContactManagement/Instructions/Instructions.tsx b/src/containers/ContactManagement/Instructions/Instructions.tsx new file mode 100644 index 000000000..f34453742 --- /dev/null +++ b/src/containers/ContactManagement/Instructions/Instructions.tsx @@ -0,0 +1,35 @@ +import styles from './Instructions.module.css'; + +export const Instructions = () => { + return ( +
+
+
Instructions
+
    +
  • Use this to import new contacts in bulk
    • +
  • + Ensure you have prior permission from the contacts to message them through the chatbot +
    • +
  • + Ensure the first message being sent to the newly onboarded contacts is the opt-in + message +
    • +
  • Further detailed instructions here.
    • +
+
+
+
Disclaimer
+
    +
  • + Contacts who block a chatbot number leads to the reduction in quality rating of the + chatbot by Meta. This can reduce the limit of business initiated conversations. +
    • +
  • + Kindly plan to message large number of new contacts in batches to avoid having quality + reduced or having your chatbot blocked by Meta. +
    • +
+
+
+ ); +}; diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index aaa8ef915..dcb949b59 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import * as Yup from 'yup'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; -import { useLazyQuery, useMutation } from '@apollo/client'; +import { useLazyQuery, useMutation, useQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import { GET_ORGANIZATION_COLLECTIONS } from 'graphql/queries/Collection'; @@ -18,7 +18,7 @@ import { setNotification } from 'common/notification'; import styles from './UploadContactsDialog.module.css'; export interface UploadContactsDialogProps { - organizationDetails: any; + organizationDetails?: any; setDialog: Function; } @@ -35,19 +35,7 @@ export const UploadContactsDialog = ({ const [collection] = useState(); const [optedIn] = useState(false); - const [getCollections, { data: collections, loading }] = useLazyQuery( - GET_ORGANIZATION_COLLECTIONS - ); - - useEffect(() => { - if (organizationDetails.id) { - getCollections({ - variables: { - organizationGroupsId: organizationDetails.id, - }, - }); - } - }, [organizationDetails]); + const { data: collections, loading } = useQuery(GET_ORGANIZATION_COLLECTIONS); const [importContacts] = useMutation(IMPORT_CONTACTS, { onCompleted: (data: any) => { From d43bb628fcf94ec38cb777a39a9d76b572f07bb8 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 23 Jul 2024 15:46:15 +0530 Subject: [PATCH 02/30] upload contacts api --- .../ContactManagement.module.css | 2 +- .../Instructions/Instructions.module.css | 10 +++--- .../Instructions/Instructions.tsx | 1 + .../UploadContactsDialog.tsx | 32 ++++++++++++------- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/containers/ContactManagement/ContactManagement.module.css b/src/containers/ContactManagement/ContactManagement.module.css index 7ee0cec07..99712341b 100644 --- a/src/containers/ContactManagement/ContactManagement.module.css +++ b/src/containers/ContactManagement/ContactManagement.module.css @@ -38,5 +38,5 @@ color: #119656; text-decoration: underline; cursor: pointer; - line-height: 1.75rem; + line-height: 2rem; } diff --git a/src/containers/ContactManagement/Instructions/Instructions.module.css b/src/containers/ContactManagement/Instructions/Instructions.module.css index 0e297fdf4..4b6b74ad4 100644 --- a/src/containers/ContactManagement/Instructions/Instructions.module.css +++ b/src/containers/ContactManagement/Instructions/Instructions.module.css @@ -1,14 +1,16 @@ -.Instructions { -} - .Instructions h5 { font-size: 1rem; - line-height: 1rem; + line-height: 2rem; margin: 0; } +.Instructions div { + margin-bottom: 1rem; +} + .Instructions ul { padding-left: 1rem; + margin: 0; } .Instructions ul li { diff --git a/src/containers/ContactManagement/Instructions/Instructions.tsx b/src/containers/ContactManagement/Instructions/Instructions.tsx index f34453742..9c1228da0 100644 --- a/src/containers/ContactManagement/Instructions/Instructions.tsx +++ b/src/containers/ContactManagement/Instructions/Instructions.tsx @@ -17,6 +17,7 @@ export const Instructions = () => {
  • Further detailed instructions here.
    • +
    Disclaimer
      diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index dcb949b59..40398543c 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -1,11 +1,11 @@ -import { useState, useEffect } from 'react'; +import { useState } from 'react'; import * as Yup from 'yup'; import { DialogBox } from 'components/UI/DialogBox/DialogBox'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; -import { useLazyQuery, useMutation, useQuery } from '@apollo/client'; +import { useMutation, useQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; -import { GET_ORGANIZATION_COLLECTIONS } from 'graphql/queries/Collection'; +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'; @@ -13,6 +13,7 @@ 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'; @@ -22,20 +23,29 @@ export interface UploadContactsDialogProps { setDialog: Function; } -export const UploadContactsDialog = ({ - organizationDetails, - setDialog, -}: UploadContactsDialogProps) => { +export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) => { const [error, setError] = useState(false); const [csvContent, setCsvContent] = useState(''); const [uploadingContacts, setUploadingContacts] = useState(false); const [fileName, setFileName] = useState(''); + const orgId = getUserSession('organizationId'); const { t } = useTranslation(); const [collection] = useState(); const [optedIn] = useState(false); - const { data: collections, loading } = useQuery(GET_ORGANIZATION_COLLECTIONS); + const { data: collections, loading } = useQuery(FILTER_COLLECTIONS, { + variables: { + filter: { + groupType: 'WABA', + }, + opts: { + limit: 50, + offset: 0, + order: 'ASC', + }, + }, + }); const [importContacts] = useMutation(IMPORT_CONTACTS, { onCompleted: (data: any) => { @@ -78,7 +88,7 @@ export const UploadContactsDialog = ({ type: 'DATA', data: csvContent, groupLabel: details.collection.label, - importContactsId: organizationDetails.id, + importContactsId: orgId, }, }); }; @@ -96,7 +106,7 @@ export const UploadContactsDialog = ({ component: AutoComplete, name: 'collection', placeholder: t('Select collection'), - options: collections.organizationGroups, + options: collections.groups, multiple: false, optionLabel: 'label', label: t('Collection'), @@ -123,7 +133,7 @@ export const UploadContactsDialog = ({
      { submitForm(); }} From 5ab6226abc98ee60c9aad884d9e49c547d5d386c Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 26 Jul 2024 16:04:59 +0530 Subject: [PATCH 03/30] added status --- src/containers/ContactManagement/ContactManagement.tsx | 4 ---- .../UploadContactsDialog/UploadContactsDialog.tsx | 5 +++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx index fa5090224..48fdd2c4d 100644 --- a/src/containers/ContactManagement/ContactManagement.tsx +++ b/src/containers/ContactManagement/ContactManagement.tsx @@ -1,19 +1,15 @@ import { Instructions } from './Instructions/Instructions'; import styles from './ContactManagement.module.css'; -import AdminContactManagement from './AdminContactManagement/AdminContactManagement'; 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 SuperAdminContactManagement from './SuperAdminContactManagement/SuperAdminContactManagement'; import { getUserRole } from 'context/role'; import { UPLOAD_CONTACTS_SAMPLE } from 'config'; export const ContactManagement = () => { const role = getUserRole(); - console.log(role); - const [showUploadDialog, setShowUploadDialog] = useState(false); let dialog; diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 40398543c..235e9a14a 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -49,11 +49,12 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = const [importContacts] = useMutation(IMPORT_CONTACTS, { onCompleted: (data: any) => { - if (data.errors) { + const { errors, status } = data.importContacts; + if (errors) { setNotification(data.errors[0].message, 'warning'); } else { setUploadingContacts(false); - setNotification(t('Contacts have been uploaded')); + setNotification(status); } setDialog(false); }, From 0f3e3ecc96266bad2d0a242160cd5f7adbea350a Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Thu, 8 Aug 2024 09:15:02 +0530 Subject: [PATCH 04/30] added support for downloading csv --- .../NotificationList/NotificationList.tsx | 27 ++++++++++++++++++- src/graphql/mutations/Contact.ts | 9 +++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/src/containers/NotificationList/NotificationList.tsx b/src/containers/NotificationList/NotificationList.tsx index 54686efb6..725fb4a63 100644 --- a/src/containers/NotificationList/NotificationList.tsx +++ b/src/containers/NotificationList/NotificationList.tsx @@ -12,11 +12,13 @@ import CopyIcon from 'assets/images/icons/Copy.png'; import { List } from 'containers/List/List'; import Menu from 'components/UI/Menu/Menu'; import { Button } from 'components/UI/Form/Button/Button'; -import { copyToClipboard } from 'common/utils'; +import { copyToClipboard, exportCsvFile } from 'common/utils'; import { FILTER_NOTIFICATIONS, GET_NOTIFICATIONS_COUNT } from 'graphql/queries/Notifications'; import MARK_NOTIFICATIONS_AS_READ from 'graphql/mutations/Notifications'; import styles from './NotificationList.module.css'; import { SHORT_DATE_TIME_FORMAT } from 'common/constants'; +import { GET_CONTACT_IMPORT_STATUS } from 'graphql/mutations/Contact'; +import { setErrorMessage, setNotification } from 'common/notification'; const getDot = (isRead: boolean) =>
      {!isRead ?
      : null}
      ; @@ -71,6 +73,21 @@ export const NotificationList = () => { }, }); + const [getStatus] = useMutation(GET_CONTACT_IMPORT_STATUS, { + onCompleted: ({ getContactUploadReport }) => { + const { csvRows, error } = getContactUploadReport; + if (error) { + setNotification(error, 'warning'); + return; + } + exportCsvFile(csvRows, `Contact_Upload_Status`); + setNotification('Downloaded the status of the contact upload', 'success'); + }, + onError: (error) => { + setErrorMessage(error); + }, + }); + useEffect(() => { setTimeout(() => { markNotificationAsRead(); @@ -102,6 +119,14 @@ export const NotificationList = () => { case 'WA Group': destination = `/group/chat/${entity.id}`; break; + case 'Contact Upload': + getStatus({ + variables: { + userJobId: entity?.user_job_id, + }, + }); + break; + default: // Handle unknown category return; diff --git a/src/graphql/mutations/Contact.ts b/src/graphql/mutations/Contact.ts index 547259387..124d3ae31 100644 --- a/src/graphql/mutations/Contact.ts +++ b/src/graphql/mutations/Contact.ts @@ -81,3 +81,12 @@ export const DELETE_CONTACT_PROFILE = gql` } } `; + +export const GET_CONTACT_IMPORT_STATUS = gql` + mutation GetContactUploadReport($userJobId: ID) { + getContactUploadReport(userJobId: $userJobId) { + csvRows + error + } + } +`; From dd6e625eedb1495834ae61981c04e075970e29f3 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Thu, 8 Aug 2024 11:39:43 +0530 Subject: [PATCH 05/30] added move contacts --- .../AdminContactManagement.module.css | 24 +++- .../AdminContactManagement.tsx | 114 ++++++++---------- .../ContactManagement.module.css | 25 ++-- .../ContactManagement/ContactManagement.tsx | 16 +-- .../Instructions/Instructions.module.css | 1 + .../UploadContactsDialog.tsx | 2 +- 6 files changed, 93 insertions(+), 89 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css index b3476b256..1584f8bd1 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css +++ b/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%; +} diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 530cb0c1d..439e54356 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -4,7 +4,6 @@ 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'; @@ -12,7 +11,6 @@ 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(''); @@ -58,69 +56,61 @@ export const AdminContactManagement = () => { }; return ( -
      - -
      -
      - 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   - - detailed instructions. - -
      -
      -
      {dialog} diff --git a/src/containers/ContactManagement/Instructions/Instructions.module.css b/src/containers/ContactManagement/Instructions/Instructions.module.css index 4b6b74ad4..401c1d9cd 100644 --- a/src/containers/ContactManagement/Instructions/Instructions.module.css +++ b/src/containers/ContactManagement/Instructions/Instructions.module.css @@ -2,6 +2,7 @@ font-size: 1rem; line-height: 2rem; margin: 0; + color: #000; } .Instructions div { diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 235e9a14a..4a2bd0820 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -156,6 +156,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
      - + { + setImporting(true); + }} + afterImport={(result: string) => { + setCsvContent(result); + }} + />
      Download Sample From 9fe5f3618c0913cb80a160c264233b768452796e Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Thu, 8 Aug 2024 21:27:24 +0530 Subject: [PATCH 07/30] changed cypress branch --- .github/workflows/cypress-testing.yml | 2 +- .../UploadContactsDialog/UploadContactsDialog.tsx | 11 +++-------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index b85dce6a0..921ae671a 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -96,7 +96,7 @@ jobs: git clone https://github.com/glific/cypress-testing.git echo done. go to dir. cd cypress-testing - git checkout main + git checkout feat/contacts-import cd .. cp -r cypress-testing/cypress cypress yarn add cypress@13.6.2 diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 598893ff9..9d961dcd9 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -22,7 +22,6 @@ export interface UploadContactsDialogProps { } export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) => { - const [error, setError] = useState(false); const [csvContent, setCsvContent] = useState(''); const [uploadingContacts, setUploadingContacts] = useState(false); const orgId = getUserSession('organizationId'); @@ -122,9 +121,10 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setDialog(false); }} skipCancel - buttonOkLoading={uploadingContacts} + buttonOkLoading={uploadingContacts || importing} buttonOk={t('Upload')} alignButtons="left" + disableOk={!csvContent} >
      {formFieldItems.map((field: any) => ( @@ -140,6 +140,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setImporting(true); }} afterImport={(result: string) => { + setImporting(false); setCsvContent(result); }} /> @@ -147,12 +148,6 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = - - {error && ( -
      - 1. Please make sure the file format matches the sample -
      - )} )} From 7bc6d0f50f5099a26da6ad1d53e1de86188e5e2c Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Thu, 8 Aug 2024 21:44:29 +0530 Subject: [PATCH 08/30] fixed test cases --- .../CollectionList/CollectionList.test.tsx | 20 ++++++++++++---- .../AdminContactManagement.tsx | 2 +- .../ContactManagement.test.tsx | 2 +- .../SuperAdminContactManagement.tsx | 2 +- .../UploadContactsDialog.module.css | 10 ++++++++ .../UploadContactsDialog.test.tsx | 23 +++++++++++++++---- .../UploadContactsDialog.tsx | 12 ++++++---- src/i18n/en/en.json | 2 +- src/mocks/Collection.tsx | 16 +++---------- 9 files changed, 58 insertions(+), 31 deletions(-) diff --git a/src/containers/Collection/CollectionList/CollectionList.test.tsx b/src/containers/Collection/CollectionList/CollectionList.test.tsx index e2b23ecd0..cc8a4f107 100644 --- a/src/containers/Collection/CollectionList/CollectionList.test.tsx +++ b/src/containers/Collection/CollectionList/CollectionList.test.tsx @@ -25,16 +25,28 @@ import { updateCollectionWaGroupQuery, } from 'mocks/Groups'; import { setNotification } from 'common/notification'; -import { setVariables } from 'common/constants'; +import { CONTACTS_COLLECTION, setVariables } from 'common/constants'; import { setUserRolePermissions } from 'context/role'; +const variables = { + filter: { + groupType: CONTACTS_COLLECTION, + }, + opts: { + limit: 50, + offset: 0, + order: 'ASC', + orderWith: 'label', + }, +}; + const mocks = [ countCollectionQuery, countCollectionQuery, countCollectionQuery, - filterCollectionQuery, - filterCollectionQuery, - filterCollectionQuery, + filterCollectionQuery(variables), + filterCollectionQuery(variables), + filterCollectionQuery(variables), getPublishedFlowQuery, getPublishedFlowQuery, getCollectionContactsQuery, diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 5ee1fde06..82b88caa2 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -120,7 +120,7 @@ export const AdminContactManagement = () => {
      -
      +
      { setImporting(true); }} - afterImport={(result: string) => { - setImporting(false); + afterImport={(result: string, media: any) => { + setFileName(media.name); setCsvContent(result); + setImporting(false); }} />
      diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json index ec7930c35..09ea81d46 100644 --- a/src/i18n/en/en.json +++ b/src/i18n/en/en.json @@ -155,7 +155,7 @@ "Contact Variables": "Contact Variables", "Back to flows": "Back to flows", "Contacts have been updated": "Contacts have been updated", - "Upload contacts": "Upload contacts", + "Upload Contacts": "Upload Contacts", "Contact management": "Contact management", "Contacts have been uploaded": "Contacts have been uploaded", "Collection is required": "Collection is required", diff --git a/src/mocks/Collection.tsx b/src/mocks/Collection.tsx index 1b7d6402d..f99f918d9 100644 --- a/src/mocks/Collection.tsx +++ b/src/mocks/Collection.tsx @@ -227,20 +227,10 @@ export const countCollectionQuery = { }, }; -export const filterCollectionQuery = { +export const filterCollectionQuery = (variables: any) => ({ request: { query: FILTER_COLLECTIONS, - variables: { - filter: { - groupType: CONTACTS_COLLECTION, - }, - opts: { - limit: 50, - offset: 0, - order: 'ASC', - orderWith: 'label', - }, - }, + variables, }, result: { data: { @@ -257,7 +247,7 @@ export const filterCollectionQuery = { ], }, }, -}; +}); export const filterCollectionQueryWAGroups = { request: { From 51b9eab0a14e8ea3310cd989f748fc47da402134 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 09:07:46 +0530 Subject: [PATCH 09/30] updated backend branch --- .github/workflows/cypress-testing.yml | 1 + .../UploadContactsDialog/UploadContactsDialog.test.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index 921ae671a..73cb8c15c 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -112,6 +112,7 @@ jobs: - name: Run glific backend run: | cd ../glific/ + git checkout feat/contact-upload-report mix phx.server & cd ../glific-frontend/ diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx index a196c4948..d8b8152ec 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx @@ -7,7 +7,7 @@ import { BrowserRouter as Router } from 'react-router-dom'; import { getAllOrganizations } from 'mocks/Organization'; import UploadContactsDialog from './UploadContactsDialog'; -import { filterCollectionQuery, getOrganizationCollections } from 'mocks/Collection'; +import { filterCollectionQuery } from 'mocks/Collection'; import { CONTACTS_COLLECTION } from 'common/constants'; const mocks = [ From fae39729440d14f995d1f79d49b34a9b035a7e00 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 09:44:06 +0530 Subject: [PATCH 10/30] changed cypress branch --- .github/workflows/cypress-testing.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index 73cb8c15c..15f912638 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -86,6 +86,7 @@ jobs: echo start mix setup echo done. start installing inotify-tools sudo apt-get install inotify-tools + git checkout feat/contact-upload-report mix setup cd ../glific-frontend/ @@ -112,7 +113,6 @@ jobs: - name: Run glific backend run: | cd ../glific/ - git checkout feat/contact-upload-report mix phx.server & cd ../glific-frontend/ From 16106d38a80a102f485678f8ecc43102cea27a89 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 09:46:38 +0530 Subject: [PATCH 11/30] updated backend branch --- .github/workflows/cypress-testing.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index 15f912638..2a16c0067 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -86,7 +86,7 @@ jobs: echo start mix setup echo done. start installing inotify-tools sudo apt-get install inotify-tools - git checkout feat/contact-upload-report + git checkout importContact mix setup cd ../glific-frontend/ From e6f6164ff469aa01f5b1e4a5b9168a217e1958b6 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 09:49:05 +0530 Subject: [PATCH 12/30] updated backend branch --- .github/workflows/cypress-testing.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index 2a16c0067..85c9d26b2 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -65,6 +65,7 @@ jobs: git clone https://github.com/glific/glific.git echo done. go to dir. cd glific + git checkout importContact echo done. start dev.secret.exs config cd priv mkdir cert @@ -86,7 +87,6 @@ jobs: echo start mix setup echo done. start installing inotify-tools sudo apt-get install inotify-tools - git checkout importContact mix setup cd ../glific-frontend/ From 4db15a82d3a9b2f098aeaff791b9fcfbb1124998 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 11:15:57 +0530 Subject: [PATCH 13/30] fixed move contacts api --- .../AdminContactManagement.tsx | 10 ++--- .../UploadContactsDialog.module.css | 4 ++ .../UploadContactsDialog.tsx | 44 ++++++++++++++++--- src/graphql/mutations/Contact.ts | 2 +- 4 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 82b88caa2..6fba0a16e 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -20,13 +20,13 @@ export const AdminContactManagement = () => { const { t } = useTranslation(); const [moveContacts] = useMutation(MOVE_CONTACTS, { - onCompleted: (data: any) => { - if (data.errors) { - setErrors(data.errors); + onCompleted: ({ moveContacts }) => { + const { errors, status } = moveContacts; + if (errors) { + setErrors(errors); } else { - exportCsvFile(data.moveContacts.csvRows, 'results'); setUploadingContacts(false); - setNotification(t('Contacts have been updated')); + setNotification(status); } setFileName(''); }, diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.module.css b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.module.css index a6cfa3787..62ee933b8 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.module.css +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.module.css @@ -88,3 +88,7 @@ font-size: 12px; margin: 0; } + +.DialogContent { + text-align: center; +} diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 654942b42..8c762e282 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -15,6 +15,7 @@ import { getUserSession } from 'services/AuthService'; import { setNotification } from 'common/notification'; import styles from './UploadContactsDialog.module.css'; import { ImportButton } from 'components/UI/ImportButton/ImportButton'; +import { useNavigate } from 'react-router'; export interface UploadContactsDialogProps { organizationDetails?: any; @@ -25,8 +26,10 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = const [fileName, setFileName] = useState(''); const [csvContent, setCsvContent] = useState(''); const [uploadingContacts, setUploadingContacts] = useState(false); - const orgId = getUserSession('organizationId'); const [importing, setImporting] = useState(false); + const [showStatus, setShowStatus] = useState(false); + const orgId = getUserSession('organizationId'); + const navigate = useNavigate(); const { t } = useTranslation(); const [collection] = useState(); @@ -52,9 +55,8 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setNotification(data.errors[0].message, 'warning'); } else { setUploadingContacts(false); - setNotification(status); + setShowStatus(true); } - setDialog(false); }, onError: (errors) => { setDialog(false); @@ -80,6 +82,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = const validationSchema = Yup.object().shape({ collection: Yup.object().nullable().required(t('Collection is required')), + optedIn: Yup.boolean().oneOf([true]).required(), }); const formFieldItems: any = [ @@ -110,12 +113,19 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setUploadingContacts(true); }} > - {({ submitForm }) => ( + {({ submitForm, errors }) => ( { + if (errors?.optedIn) { + setNotification( + 'Please obtain prior consent from contacts to message them on WhatsApp', + 'warning' + ); + return; + } submitForm(); }} handleCancel={() => { @@ -156,7 +166,31 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = ); - return form; + const dialog = ( + { + navigate('/notifications'); + setShowStatus(false); + setDialog(false); + }} + skipCancel + buttonOk={'Go to notifications'} + alignButtons="left" + > +
      + Please check notifications to see the status of import. +
      +       + ); + + return ( + <> + {form} + {!showStatus && dialog} + + ); }; export default UploadContactsDialog; diff --git a/src/graphql/mutations/Contact.ts b/src/graphql/mutations/Contact.ts index 124d3ae31..b9c411220 100644 --- a/src/graphql/mutations/Contact.ts +++ b/src/graphql/mutations/Contact.ts @@ -50,7 +50,7 @@ export const MOVE_CONTACTS = gql` message key } - csvRows + status } } `; From 5bfdcf39bdd362c041f2cc993b2ae0d32a269872 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 11:20:01 +0530 Subject: [PATCH 14/30] fixed minor issue --- .../UploadContactsDialog/UploadContactsDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 8c762e282..8841c0c17 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -188,7 +188,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = return ( <> {form} - {!showStatus && dialog} + {showStatus && dialog} ); }; From da01ffe78e4343e658d287ad8713c600e9002d65 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 16:41:57 +0530 Subject: [PATCH 15/30] deepscan fixes and test cases --- .../AdminContactManagement.tsx | 3 +-- .../UploadContactsDialog.test.tsx | 20 +++++++++++++- .../UploadContactsDialog.tsx | 2 +- .../NotificationList.test.tsx | 2 ++ src/mocks/Contact.tsx | 17 +++++++++++- src/mocks/Notifications.tsx | 27 +++++++++++++++++++ 6 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 6fba0a16e..1c7eb3a13 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -8,7 +8,7 @@ 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 { slicedString } from 'common/utils'; import { setNotification } from 'common/notification'; import styles from './AdminContactManagement.module.css'; @@ -17,7 +17,6 @@ export const AdminContactManagement = () => { const [errors, setErrors] = useState([]); const [csvContent, setCsvContent] = useState(''); const [uploadingContacts, setUploadingContacts] = useState(false); - const { t } = useTranslation(); const [moveContacts] = useMutation(MOVE_CONTACTS, { onCompleted: ({ moveContacts }) => { diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx index d8b8152ec..259083075 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor, screen } from '@testing-library/react'; +import { render, waitFor, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { MockedProvider } from '@apollo/client/testing'; @@ -9,6 +9,7 @@ import { getAllOrganizations } from 'mocks/Organization'; import UploadContactsDialog from './UploadContactsDialog'; import { filterCollectionQuery } from 'mocks/Collection'; import { CONTACTS_COLLECTION } from 'common/constants'; +import { importContacts } from 'mocks/Contact'; const mocks = [ ...getAllOrganizations, @@ -22,6 +23,7 @@ const mocks = [ order: 'ASC', }, }), + importContacts, ]; const setDialogMock = vi.fn(); @@ -80,4 +82,20 @@ test('Should be able to upload valid CSV', async () => { // the filename should be visible instead of Select .csv after upload expect(screen.getByText('test.csv')).toBeInTheDocument(); }); + + const autocomplete = screen.getByTestId('autocomplete-element'); + + fireEvent.click(autocomplete); + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }); + fireEvent.click(screen.getByText('Staff group')); + + fireEvent.click(screen.getByTestId('ok-button')); + fireEvent.click(screen.getByText('Are these contacts opted in?')); + fireEvent.click(screen.getByTestId('ok-button')); + + await waitFor(() => { + expect(screen.getByText('Contact import is in progress.')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByText('Go to notifications')); }); diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 8841c0c17..76805cc4b 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -50,7 +50,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = const [importContacts] = useMutation(IMPORT_CONTACTS, { onCompleted: (data: any) => { - const { errors, status } = data.importContacts; + const { errors } = data.importContacts; if (errors) { setNotification(data.errors[0].message, 'warning'); } else { diff --git a/src/containers/NotificationList/NotificationList.test.tsx b/src/containers/NotificationList/NotificationList.test.tsx index 8c0e6b661..3333e5636 100644 --- a/src/containers/NotificationList/NotificationList.test.tsx +++ b/src/containers/NotificationList/NotificationList.test.tsx @@ -10,6 +10,7 @@ import { getCountWithEmptyFilter, markAllNotificationAsRead, getInfoNotificationsQuery, + getStatus, } from 'mocks/Notifications'; import { setUserSession } from 'services/AuthService'; import { NotificationList } from './NotificationList'; @@ -31,6 +32,7 @@ const mocks: any = [ getInfoNotificationsQuery({ severity: 'Critical' }), getInfoNotificationsQuery({ severity: '' }), getInfoNotificationsQuery(), + getStatus, ]; const notifications = ( diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx index 2f6b07969..27fc44e29 100644 --- a/src/mocks/Contact.tsx +++ b/src/mocks/Contact.tsx @@ -12,7 +12,7 @@ import { } from 'graphql/queries/Contact'; import { addFlowToContactQuery } from 'mocks/Flow'; import { getOrganizationLanguagesQuery, getOrganizationQuery } from 'mocks/Organization'; -import { UPDATE_CONTACT, MOVE_CONTACTS } from 'graphql/mutations/Contact'; +import { UPDATE_CONTACT, MOVE_CONTACTS, IMPORT_CONTACTS } from 'graphql/mutations/Contact'; import { UPDATE_CONTACT_COLLECTIONS } from 'graphql/mutations/Collection'; import { CLEAR_MESSAGES } from 'graphql/mutations/Chat'; import { setVariables } from 'common/constants'; @@ -618,3 +618,18 @@ export const getExcludedContactsQuery = (excludeGroups: any) => ({ }, }, }); + +export const importContacts = { + request: { + query: IMPORT_CONTACTS, + }, + result: { + data: { + importContacts: { + errors: null, + status: 'Test Row', + }, + }, + }, + variableMatcher: (variables: any) => true, +}; diff --git a/src/mocks/Notifications.tsx b/src/mocks/Notifications.tsx index e6cb07dc1..6ad914fe7 100644 --- a/src/mocks/Notifications.tsx +++ b/src/mocks/Notifications.tsx @@ -1,5 +1,6 @@ import { FILTER_NOTIFICATIONS, GET_NOTIFICATIONS_COUNT } from 'graphql/queries/Notifications'; import { MARK_NOTIFICATIONS_AS_READ } from 'graphql/mutations/Notifications'; +import { GET_CONTACT_IMPORT_STATUS } from 'graphql/mutations/Contact'; export const getNotificationsQuery = { request: { @@ -70,6 +71,15 @@ export const getNotificationsQuery = { severity: '"Critical"', updatedAt: '2024-03-29T11:14:13Z', }, + { + category: 'Contact Upload', + entity: '{"user_job_id":1}', + id: '60', + isRead: true, + message: 'Contact upload completed', + severity: '"Information"', + updatedAt: '2024-08-09T05:50:00Z', + }, ], }, }, @@ -200,3 +210,20 @@ export const markAllNotificationAsRead = { }, }, }; + +export const getStatus = { + request: { + query: GET_CONTACT_IMPORT_STATUS, + variables: { + userJobId: 1, + }, + }, + result: { + data: { + getContactUploadReport: { + csvRows: '', + error: null, + }, + }, + }, +}; From 17b0e12bec46febfcb1dd5a6715d497b418f40b5 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Fri, 9 Aug 2024 19:44:17 +0530 Subject: [PATCH 16/30] added test cases --- .../AdminContactManagement.tsx | 1 + .../ContactManagement.test.tsx | 34 ++++++++++++++----- .../UploadContactsDialog.test.tsx | 13 ------- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 1c7eb3a13..da586390a 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -79,6 +79,7 @@ export const AdminContactManagement = () => { <> {fileName} { event.preventDefault(); diff --git a/src/containers/ContactManagement/ContactManagement.test.tsx b/src/containers/ContactManagement/ContactManagement.test.tsx index 3657c0773..8f62b1d4c 100644 --- a/src/containers/ContactManagement/ContactManagement.test.tsx +++ b/src/containers/ContactManagement/ContactManagement.test.tsx @@ -1,13 +1,24 @@ -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import { BrowserRouter as Router } from 'react-router-dom'; -import { getAllOrganizations } from 'mocks/Organization'; -import { setUserSession } from 'services/AuthService'; import ContactManagement from './ContactManagement'; +import { filterCollectionQuery } from 'mocks/Collection'; +import { CONTACTS_COLLECTION } from 'common/constants'; -const mocks = getAllOrganizations; +const mocks = [ + filterCollectionQuery({ + filter: { + groupType: CONTACTS_COLLECTION, + }, + opts: { + limit: 50, + offset: 0, + order: 'ASC', + }, + }), +]; const contactManagement = ( @@ -17,9 +28,16 @@ const contactManagement = ( ); -setUserSession(JSON.stringify({ roles: [{ label: 'Staff' }], organization: { id: '1' } })); - -test.skip('Show unauthorized access for staff user', async () => { +test('it opens contact upload dialog', async () => { render(contactManagement); - expect(screen.getByText('Unauthorized access')).toBeInTheDocument(); + + await waitFor(() => { + expect(screen.getByText('Contact Management')).toBeInTheDocument(); + }); + + fireEvent.click(screen.getByTestId('uploadContactsBtn')); + + await waitFor(() => { + expect(screen.getByText('Upload Contacts')).toBeInTheDocument(); + }); }); diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx index 259083075..414999f1d 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx @@ -52,19 +52,6 @@ test('Upload contact dialog renders correctly', async () => { }); }); -test.skip('Files other than .csv should raise a warning message upon upload', async () => { - render(dialogBox); - - const nonCSVFile = new File(['This is not a CSV File'], 'test.pdf', { type: 'application/pdf' }); - await waitFor(() => { - const fileInput = screen.getByTestId('uploadFile'); - userEvent.upload(fileInput, nonCSVFile); - }); - await waitFor(() => { - expect(screen.getByTestId('invalidCsvFormat')).toBeInTheDocument(); - }); -}); - test('Should be able to upload valid CSV', async () => { render(dialogBox); From a11a5ecfc7a4984624f9e2f3157729737c7a1ca2 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Mon, 12 Aug 2024 09:08:50 +0530 Subject: [PATCH 17/30] deepscan fixes and test cases --- .../AdminContactManagement/AdminContactManagement.tsx | 2 -- src/containers/ContactManagement/ContactManagement.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index da586390a..a87355245 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -1,7 +1,5 @@ import { useState } from 'react'; -import { useTranslation } from 'react-i18next'; 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 UploadIcon from 'assets/images/icons/UploadLight.svg?react'; diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx index ce285da7c..31ed754cf 100644 --- a/src/containers/ContactManagement/ContactManagement.tsx +++ b/src/containers/ContactManagement/ContactManagement.tsx @@ -5,6 +5,7 @@ import { useState } from 'react'; import UploadContactsDialog from './UploadContactsDialog/UploadContactsDialog'; import { Button } from 'components/UI/Form/Button/Button'; import AdminContactManagement from './AdminContactManagement/AdminContactManagement'; +import { contactVariablesInfo } from 'common/HelpData'; export const ContactManagement = () => { const [showUploadDialog, setShowUploadDialog] = useState(false); @@ -16,7 +17,11 @@ export const ContactManagement = () => { return ( <> - +
      From c30fc1bb82e854c2ebbc9b0688a2434365b982b3 Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 20 Aug 2024 09:01:53 +0100 Subject: [PATCH 18/30] import screen cleanup --- .../AdminContactManagement.module.css | 9 --------- .../ContactManagement/ContactManagement.module.css | 9 --------- src/containers/ContactManagement/ContactManagement.tsx | 4 ++-- .../ContactManagement/Instructions/Instructions.tsx | 1 - 4 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css index 02820e3eb..bf88e8a91 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css @@ -111,15 +111,6 @@ 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%; diff --git a/src/containers/ContactManagement/ContactManagement.module.css b/src/containers/ContactManagement/ContactManagement.module.css index 7d8de79e7..2cb8505d6 100644 --- a/src/containers/ContactManagement/ContactManagement.module.css +++ b/src/containers/ContactManagement/ContactManagement.module.css @@ -24,15 +24,6 @@ padding: 1.5rem 2rem; } -.Buttons { - margin-top: 1rem; - display: flex; - flex-direction: column; - align-items: end; - justify-content: end; - width: 100%; -} - .Buttons button { border-radius: 8px; width: 30%; diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx index 31ed754cf..be30e9859 100644 --- a/src/containers/ContactManagement/ContactManagement.tsx +++ b/src/containers/ContactManagement/ContactManagement.tsx @@ -25,7 +25,7 @@ export const ContactManagement = () => {
      -

      Bulk contacts upload

      +

      Import contacts

      @@ -35,7 +35,7 @@ export const ContactManagement = () => { variant="contained" onClick={() => setShowUploadDialog(true)} > - Upload Contacts + Continue
      diff --git a/src/containers/ContactManagement/Instructions/Instructions.tsx b/src/containers/ContactManagement/Instructions/Instructions.tsx index 9c1228da0..efabf6ec2 100644 --- a/src/containers/ContactManagement/Instructions/Instructions.tsx +++ b/src/containers/ContactManagement/Instructions/Instructions.tsx @@ -14,7 +14,6 @@ export const Instructions = () => { Ensure the first message being sent to the newly onboarded contacts is the opt-in message -
    • Further detailed instructions here.
    From f9a42c4934ae0064f746158f60c1d58f1f00bd67 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Tue, 20 Aug 2024 14:57:26 +0530 Subject: [PATCH 19/30] worked on feedbacks --- .../UI/Form/Checkbox/Checkbox.module.css | 11 ++- src/components/UI/Form/Checkbox/Checkbox.tsx | 67 ++++++++++--------- .../AdminContactManagement.module.css | 2 +- .../ContactManagement.module.css | 2 +- .../Instructions/Instructions.module.css | 2 +- .../UploadContactsDialog.tsx | 7 +- 6 files changed, 55 insertions(+), 36 deletions(-) diff --git a/src/components/UI/Form/Checkbox/Checkbox.module.css b/src/components/UI/Form/Checkbox/Checkbox.module.css index 0791e8105..e435947d4 100644 --- a/src/components/UI/Form/Checkbox/Checkbox.module.css +++ b/src/components/UI/Form/Checkbox/Checkbox.module.css @@ -5,7 +5,7 @@ .Checkbox { margin-bottom: -10px; display: flex; - align-items: center; + flex-direction: column; } .Label { @@ -33,3 +33,12 @@ .Disabled { opacity: 60%; } + +.DangerText { + margin-left: 30px; + font-size: 12px; + margin-top: -12px; + line-height: 18px; + font-weight: 400; + color: #fb5c5c; +} diff --git a/src/components/UI/Form/Checkbox/Checkbox.tsx b/src/components/UI/Form/Checkbox/Checkbox.tsx index 1fa3c3fbd..747b7e23e 100644 --- a/src/components/UI/Form/Checkbox/Checkbox.tsx +++ b/src/components/UI/Form/Checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import { Checkbox as CheckboxElement, FormControlLabel } from '@mui/material'; +import { Checkbox as CheckboxElement, FormControlLabel, FormHelperText } from '@mui/material'; import InfoIcon from 'assets/images/icons/Info.svg?react'; import Tooltip from 'components/UI/Tooltip/Tooltip'; import styles from './Checkbox.module.css'; @@ -38,37 +38,42 @@ export const Checkbox = ({ return (
    - - } - labelPlacement="end" - label={title} - classes={{ - label: addLabelStyle ? styles.Label : undefined, - root: styles.Root, - }} - /> - {info?.title && infoType === 'tooltip' && ( - - - - )} - {info && infoType === 'dialog' && ( - handleInfoClick()} +
    + + } + labelPlacement="end" + label={title} + classes={{ + label: addLabelStyle ? styles.Label : undefined, + root: styles.Root, + }} /> - )} + {info?.title && infoType === 'tooltip' && ( + + + + )} + {info && infoType === 'dialog' && ( + handleInfoClick()} + /> + )} +
    + {form && form.errors[field.name] && form.touched[field.name] ? ( + {form.errors[field.name]} + ) : null}
    ); }; diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css index bf88e8a91..69a50390b 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css @@ -3,7 +3,7 @@ flex-direction: column; justify-content: space-between; width: 50%; - height: 60%; + max-height: 65%; background-color: #fff; border-radius: 15px; padding: 1rem 2rem; diff --git a/src/containers/ContactManagement/ContactManagement.module.css b/src/containers/ContactManagement/ContactManagement.module.css index 2cb8505d6..f9b6e8b39 100644 --- a/src/containers/ContactManagement/ContactManagement.module.css +++ b/src/containers/ContactManagement/ContactManagement.module.css @@ -18,7 +18,7 @@ flex-direction: column; justify-content: space-between; width: 50%; - height: 60%; + max-height: 65%; background-color: #fff; border-radius: 15px; padding: 1.5rem 2rem; diff --git a/src/containers/ContactManagement/Instructions/Instructions.module.css b/src/containers/ContactManagement/Instructions/Instructions.module.css index 401c1d9cd..3d7a0a607 100644 --- a/src/containers/ContactManagement/Instructions/Instructions.module.css +++ b/src/containers/ContactManagement/Instructions/Instructions.module.css @@ -15,5 +15,5 @@ } .Instructions ul li { - font-size: 0.8rem; + font-size: 1rem; } diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 76805cc4b..af4864f4f 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -82,7 +82,9 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = const validationSchema = Yup.object().shape({ collection: Yup.object().nullable().required(t('Collection is required')), - optedIn: Yup.boolean().oneOf([true]).required(), + optedIn: Yup.boolean() + .oneOf([true], 'Please confirm if contacts are opted in.') + .required('Please confirm if contacts are opted in.'), }); const formFieldItems: any = [ @@ -100,6 +102,9 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = name: 'optedIn', title: t('Are these contacts opted in?'), darkCheckbox: true, + info: { + title: 'Please obtain prior consent from contacts to message them on WhatsApp', + }, }, ]; From dd42e283a1872ae295e5216dd5ed48128bd711c9 Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 27 Aug 2024 22:30:04 +0100 Subject: [PATCH 20/30] fixes to cypress tests --- .github/workflows/cypress-testing.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml index 85c9d26b2..921ae671a 100644 --- a/.github/workflows/cypress-testing.yml +++ b/.github/workflows/cypress-testing.yml @@ -65,7 +65,6 @@ jobs: git clone https://github.com/glific/glific.git echo done. go to dir. cd glific - git checkout importContact echo done. start dev.secret.exs config cd priv mkdir cert From af8733f9583af8778344a0eecfd179ddd2d82a48 Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 27 Aug 2024 23:26:05 +0100 Subject: [PATCH 21/30] update import buttons --- src/components/UI/ImportButton/ImportButton.tsx | 6 +++--- .../UploadContactsDialog/UploadContactsDialog.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx index dc3116645..7fbef781f 100644 --- a/src/components/UI/ImportButton/ImportButton.tsx +++ b/src/components/UI/ImportButton/ImportButton.tsx @@ -1,5 +1,5 @@ import { useRef } from 'react'; -import ImportIcon from 'assets/images/icons/Flow/Import.svg?react'; +import FileIcon from 'assets/images/icons/Document/Light.svg?react'; import { Button } from 'components/UI/Form/Button/Button'; import styles from './ImportButton.module.css'; @@ -37,9 +37,9 @@ export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonP inputRef.current?.click(); }} variant="outlined" - color="primary" + color="secondary" > - + {title} diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index af4864f4f..ea4e91457 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -151,7 +151,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) =
    { setImporting(true); }} From 948ffaedf892d1e68394d92313b62625be1d3dc3 Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 27 Aug 2024 23:30:39 +0100 Subject: [PATCH 22/30] design consistency, remove action button icon --- .../AdminContactManagement/AdminContactManagement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index a87355245..dbdc7ddae 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -133,7 +133,7 @@ export const AdminContactManagement = () => { }); }} > - Upload + Upload
    From a7491c6eb6e2474ab2cd9293a68ac67e30c52cbf Mon Sep 17 00:00:00 2001 From: Kurund Jalmi Date: Tue, 27 Aug 2024 23:36:21 +0100 Subject: [PATCH 23/30] more cleanup --- src/components/UI/ImportButton/ImportButton.module.css | 2 +- src/components/UI/ImportButton/ImportButton.tsx | 2 +- .../AdminContactManagement/AdminContactManagement.module.css | 4 ---- .../AdminContactManagement/AdminContactManagement.tsx | 1 - 4 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/UI/ImportButton/ImportButton.module.css b/src/components/UI/ImportButton/ImportButton.module.css index e0e4cc004..6d4c1cd3f 100644 --- a/src/components/UI/ImportButton/ImportButton.module.css +++ b/src/components/UI/ImportButton/ImportButton.module.css @@ -1,4 +1,4 @@ -.ImportIcon { +.FileIcon { height: 24px; width: 24px; margin-right: 5px; diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx index 7fbef781f..ba10dc494 100644 --- a/src/components/UI/ImportButton/ImportButton.tsx +++ b/src/components/UI/ImportButton/ImportButton.tsx @@ -39,7 +39,7 @@ export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonP variant="outlined" color="secondary" > - + {title} diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css index 69a50390b..1b1494415 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.module.css @@ -72,10 +72,6 @@ cursor: not-allowed; } -.FileIcon { - margin-right: 10px; -} - .WaitUpload { font-size: 14px; margin-left: 16px; diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index dbdc7ddae..1b7f5e278 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -2,7 +2,6 @@ import { useState } from 'react'; 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 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'; From d8f8bd3ced6d1781b289f809c26ebaed7d249304 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 28 Aug 2024 10:38:50 +0530 Subject: [PATCH 24/30] added cancel in dialog --- .../UploadContactsDialog/UploadContactsDialog.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index af4864f4f..19529ce24 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -180,6 +180,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setShowStatus(false); setDialog(false); }} + handleCancel={() => setDialog(false)} skipCancel buttonOk={'Go to notifications'} alignButtons="left" From 8b8e885f3d266ac530d3417f783650148e81839d Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 28 Aug 2024 18:00:26 +0530 Subject: [PATCH 25/30] worked on feedbacks --- .../UI/ImportButton/ImportButton.tsx | 6 +- .../Layout/Navigation/SideMenus/SideMenus.tsx | 1 - src/config/index.ts | 3 +- .../AdminContactManagement.test.tsx | 2 +- .../AdminContactManagement.tsx | 8 +- .../ContactManagement/ContactManagement.tsx | 35 ++++++- .../SuperAdminContactManagement.module.css | 77 --------------- .../SuperAdminContactManagement.test.tsx | 37 ------- .../SuperAdminContactManagement.tsx | 97 ------------------- .../UploadContactsDialog.test.tsx | 1 + .../UploadContactsDialog.tsx | 49 +--------- 11 files changed, 52 insertions(+), 264 deletions(-) delete mode 100644 src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.module.css delete mode 100644 src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.test.tsx delete mode 100644 src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.tsx diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx index ba10dc494..955f10ed0 100644 --- a/src/components/UI/ImportButton/ImportButton.tsx +++ b/src/components/UI/ImportButton/ImportButton.tsx @@ -5,7 +5,7 @@ import styles from './ImportButton.module.css'; export interface ImportButtonProps { title: string; - onImport: any; + onImport?: any; afterImport: any; id?: string; } @@ -18,7 +18,9 @@ export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonP fileReader.onload = function setImport() { afterImport(fileReader.result, media); }; - onImport(); + if (onImport) { + onImport(); + } fileReader.readAsText(media); }; return ( diff --git a/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx b/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx index 6cdba3e82..ed4ceb039 100644 --- a/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx +++ b/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx @@ -71,7 +71,6 @@ const SideMenus = ({ opened }: SideMenusProps) => { variables: { filter: { is_read: false, - severity: 'critical', }, }, fetchPolicy: 'cache-and-network', diff --git a/src/config/index.ts b/src/config/index.ts index 40aedfd3e..a425a6d30 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -55,7 +55,8 @@ export const ONBOARD_URL_UPDATE = `${GLIFIC_API_URL}/v1/onboard/update-registrat export const ONBOARD_URL_REACT_OUT = `${GLIFIC_API_URL}/v1/onboard/reachout`; export const ONBOARD_URL = `${GLIFIC_API_URL}/v1/onboard/setup`; export const RECAPTCHA_CLIENT_KEY = envVariables.VITE_RECAPTCHA_CLIENT_KEY; -export const UPLOAD_CONTACTS_SAMPLE = 'https://storage.googleapis.com/cc-tides/sample_import.csv'; +export const UPLOAD_CONTACTS_SAMPLE = + 'https://storage.googleapis.com/cc-tides/sample_contacts_import.csv'; export const UPLOAD_CONTACTS_ADMIN_SAMPLE = 'https://storage.googleapis.com/cc-tides/sample_import_admin.csv'; export const REGISTRATION_HELP_LINK = diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.test.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.test.tsx index 74debaafd..c2b1aaecc 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.test.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.test.tsx @@ -18,7 +18,7 @@ setUserSession(JSON.stringify({ roles: [{ label: 'Admin' }], organization: { id: const contactManagement = ( - + ); diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 1b7f5e278..74cffbec2 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -9,7 +9,11 @@ import { slicedString } from 'common/utils'; import { setNotification } from 'common/notification'; import styles from './AdminContactManagement.module.css'; -export const AdminContactManagement = () => { +export interface AdminContactManagementProps { + setShowStatus: any; +} + +export const AdminContactManagement = ({ setShowStatus }: AdminContactManagementProps) => { const [fileName, setFileName] = useState(''); const [errors, setErrors] = useState([]); const [csvContent, setCsvContent] = useState(''); @@ -22,7 +26,7 @@ export const AdminContactManagement = () => { setErrors(errors); } else { setUploadingContacts(false); - setNotification(status); + setShowStatus(true); } setFileName(''); }, diff --git a/src/containers/ContactManagement/ContactManagement.tsx b/src/containers/ContactManagement/ContactManagement.tsx index be30e9859..c5ed87b29 100644 --- a/src/containers/ContactManagement/ContactManagement.tsx +++ b/src/containers/ContactManagement/ContactManagement.tsx @@ -6,13 +6,43 @@ import UploadContactsDialog from './UploadContactsDialog/UploadContactsDialog'; import { Button } from 'components/UI/Form/Button/Button'; import AdminContactManagement from './AdminContactManagement/AdminContactManagement'; import { contactVariablesInfo } from 'common/HelpData'; +import { DialogBox } from 'components/UI/DialogBox/DialogBox'; +import { useNavigate } from 'react-router'; export const ContactManagement = () => { const [showUploadDialog, setShowUploadDialog] = useState(false); + const [showStatus, setShowStatus] = useState(false); + const navigate = useNavigate(); let dialog; + let statusDialog; if (showUploadDialog) { - dialog = ; + dialog = ; + } + + if (showStatus) { + statusDialog = ( + { + navigate('/notifications'); + setShowStatus(false); + setShowUploadDialog(false); + }} + handleCancel={() => { + setShowStatus(false); + setShowUploadDialog(false); + }} + skipCancel + buttonOk={'Go to notifications'} + alignButtons="left" + > +
    + Please check notifications to see the status of import. +
    +     + ); } return ( @@ -40,10 +70,11 @@ export const ContactManagement = () => { - + {dialog} + {statusDialog} ); }; diff --git a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.module.css b/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.module.css deleted file mode 100644 index 61ea8bb99..000000000 --- a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.module.css +++ /dev/null @@ -1,77 +0,0 @@ -.OrgIcon { - width: 29px; - height: 29px; -} - -.Label { - width: 40%; -} - -.LabelText { - font-weight: 500; - font-size: 20px; - color: #073f24; - line-height: 1; -} - -.SubLabelText { - font-weight: 500; - font-size: 12px; - margin-top: 4px; - color: #cacaca; - line-height: 1; -} - -.StatusText { - font-weight: 400; - font-size: 16px; - color: #93a29b; - line-height: 1.25; -} - -.LabelContainer { - height: fit-content; - align-items: baseline; - align-content: center; -} - -.Status { - display: flex; - align-content: center; - width: 20%; -} - -.Actions { - width: 20%; - text-align: end; - margin-left: auto; -} - -.additonalButton { - width: 42px; - height: 42px; -} - -.DialogSubText { - font-size: 16px; - line-height: 1.25; - color: #073f24; - margin: 0px !important; -} - -.DialogSubInput { - margin-top: 16px; - margin-bottom: 16px; -} - -.UploadIconIcon { - width: 18px; -} - -.Delete { - color: #dd1f1f; -} - -.Inactive { - color: #93a29b; -} diff --git a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.test.tsx b/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.test.tsx deleted file mode 100644 index 5ab619648..000000000 --- a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { render, cleanup, act, screen } from '@testing-library/react'; -import { MockedProvider } from '@apollo/client/testing'; - -import { BrowserRouter as Router } from 'react-router-dom'; - -import { getAllOrganizations } from 'mocks/Organization'; -import { setUserSession } from 'services/AuthService'; -import { SuperAdminContactManagement } from './SuperAdminContactManagement'; - -afterEach(cleanup); -const mocks = getAllOrganizations; -setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Glific_admin'] })); - -const list = ( - - - - - -); - -test('Super admin contact management list renders correctly', async () => { - render(list); - - expect(screen.getByTestId('loading')).toBeInTheDocument(); - await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 0)); - }); - - const label = await screen.findByText('Contact management'); - const nameLabel = await screen.findByText('Name'); - const actionLabel = await screen.findByText('Actions'); - - expect(label).toBeInTheDocument(); - expect(nameLabel).toBeInTheDocument(); - expect(actionLabel).toBeInTheDocument(); -}); diff --git a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.tsx b/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.tsx deleted file mode 100644 index 3a3e07630..000000000 --- a/src/containers/ContactManagement/SuperAdminContactManagement/SuperAdminContactManagement.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { GET_ORGANIZATION_COUNT, FILTER_ORGANIZATIONS } from 'graphql/queries/Organization'; - -import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react'; -import UploadIcon from 'assets/images/icons/Upload/Dark.svg?react'; - -import { List } from 'containers/List/List'; -import styles from './SuperAdminContactManagement.module.css'; -import UploadContactsDialog from '../UploadContactsDialog/UploadContactsDialog'; - -const queries = { - countQuery: GET_ORGANIZATION_COUNT, - filterItemsQuery: FILTER_ORGANIZATIONS, - deleteItemQuery: null, -}; - -export const listIcon = ; -const extensionIcon = ; - -export const SuperAdminContactManagement = () => { - const { t } = useTranslation(); - - const [showUploadDialog, setShowUploadDialog] = useState(false); - const [organizationDetails, setOrganizationDetails] = useState({}); - - let dialog; - - if (showUploadDialog) { - dialog = ( - - ); - } - - const columnNames = [{ name: 'name', label: t('Name') }, { label: t('Actions') }]; - - const getName = (label: string) => ( -
    -

    {label}

    -
    - ); - - const columnStyles: any = [styles.Label, styles.Actions]; - - const getColumns = ({ name }: any) => ({ - name: getName(name), - }); - - const columnAttributes = { - columnNames, - columns: getColumns, - columnStyles, - }; - - const uploadContacts = (_: any, details: any) => { - setOrganizationDetails(details); - setShowUploadDialog(true); - }; - - const restrictedAction = () => ({ delete: false, edit: false }); - - const additionalActions = () => [ - { - icon: extensionIcon, - parameter: 'id', - label: t('Upload Contacts'), - dialog: uploadContacts, - }, - ]; - const addNewButton = { show: false, label: 'Add New' }; - - return ( - <> - {dialog} - - - ); -}; - -export default SuperAdminContactManagement; diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx index 414999f1d..1a283c88c 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.test.tsx @@ -33,6 +33,7 @@ const props = { name: 'Glific', }, setDialog: setDialogMock, + setShowStatus: vi.fn(), }; const dialogBox = ( diff --git a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx index 963215fd5..53b03ff4c 100644 --- a/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx +++ b/src/containers/ContactManagement/UploadContactsDialog/UploadContactsDialog.tsx @@ -15,21 +15,18 @@ import { getUserSession } from 'services/AuthService'; import { setNotification } from 'common/notification'; import styles from './UploadContactsDialog.module.css'; import { ImportButton } from 'components/UI/ImportButton/ImportButton'; -import { useNavigate } from 'react-router'; export interface UploadContactsDialogProps { organizationDetails?: any; setDialog: Function; + setShowStatus: any; } -export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) => { +export const UploadContactsDialog = ({ setDialog, setShowStatus }: UploadContactsDialogProps) => { const [fileName, setFileName] = useState(''); const [csvContent, setCsvContent] = useState(''); const [uploadingContacts, setUploadingContacts] = useState(false); - const [importing, setImporting] = useState(false); - const [showStatus, setShowStatus] = useState(false); const orgId = getUserSession('organizationId'); - const navigate = useNavigate(); const { t } = useTranslation(); const [collection] = useState(); @@ -118,26 +115,19 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = setUploadingContacts(true); }} > - {({ submitForm, errors }) => ( + {({ submitForm }) => ( { - if (errors?.optedIn) { - setNotification( - 'Please obtain prior consent from contacts to message them on WhatsApp', - 'warning' - ); - return; - } submitForm(); }} handleCancel={() => { setDialog(false); }} skipCancel - buttonOkLoading={uploadingContacts || importing} + buttonOkLoading={uploadingContacts} buttonOk={t('Upload')} alignButtons="left" disableOk={!csvContent} @@ -152,13 +142,9 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = { - setImporting(true); - }} afterImport={(result: string, media: any) => { setFileName(media.name); setCsvContent(result); - setImporting(false); }} /> @@ -171,32 +157,7 @@ export const UploadContactsDialog = ({ setDialog }: UploadContactsDialogProps) = ); - const dialog = ( - { - navigate('/notifications'); - setShowStatus(false); - setDialog(false); - }} - handleCancel={() => setDialog(false)} - skipCancel - buttonOk={'Go to notifications'} - alignButtons="left" - > -
    - Please check notifications to see the status of import. -
    -     - ); - - return ( - <> - {form} - {showStatus && dialog} - - ); + return <>{form}; }; export default UploadContactsDialog; From 640c63632f2317fabea4ffba1c78324c166af392 Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 28 Aug 2024 19:04:19 +0530 Subject: [PATCH 26/30] fixed deepsca issues --- .../AdminContactManagement/AdminContactManagement.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx index 74cffbec2..1ee1604ed 100644 --- a/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx +++ b/src/containers/ContactManagement/AdminContactManagement/AdminContactManagement.tsx @@ -6,7 +6,6 @@ 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 { slicedString } from 'common/utils'; -import { setNotification } from 'common/notification'; import styles from './AdminContactManagement.module.css'; export interface AdminContactManagementProps { @@ -21,7 +20,7 @@ export const AdminContactManagement = ({ setShowStatus }: AdminContactManagement const [moveContacts] = useMutation(MOVE_CONTACTS, { onCompleted: ({ moveContacts }) => { - const { errors, status } = moveContacts; + const { errors } = moveContacts; if (errors) { setErrors(errors); } else { From 9321060f9d1f8eb8b7a097bc9e13aeac55bcf8ff Mon Sep 17 00:00:00 2001 From: Akansha Sakhre Date: Wed, 28 Aug 2024 21:54:12 +0530 Subject: [PATCH 27/30] fixed test cases --- .../UI/ImportButton/ImportButton.tsx | 10 ++- .../AdminContactManagement.test.tsx | 32 +------- .../AdminContactManagement.tsx | 2 +- .../ContactManagement.test.tsx | 80 +++++++++++++++++++ .../UploadContactsDialog.test.tsx | 40 +--------- .../UploadContactsDialog.tsx | 1 + src/mocks/Contact.tsx | 1 + 7 files changed, 95 insertions(+), 71 deletions(-) diff --git a/src/components/UI/ImportButton/ImportButton.tsx b/src/components/UI/ImportButton/ImportButton.tsx index 955f10ed0..08e64ac47 100644 --- a/src/components/UI/ImportButton/ImportButton.tsx +++ b/src/components/UI/ImportButton/ImportButton.tsx @@ -8,9 +8,16 @@ export interface ImportButtonProps { onImport?: any; afterImport: any; id?: string; + fileType?: string; } -export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonProps) => { +export const ImportButton = ({ + title, + onImport, + afterImport, + id, + fileType = '*', +}: ImportButtonProps) => { const inputRef = useRef(null); const changeHandler = (event: any) => { const media = event.target.files[0]; @@ -33,6 +40,7 @@ export const ImportButton = ({ title, onImport, afterImport, id }: ImportButtonP onChange={changeHandler} data-testid="import" id={id} + accept={fileType} />