diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx index e776d9fe1..8100b3f96 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx @@ -364,7 +364,9 @@ describe('OrganizationAccordion', () => { await waitFor(() => { expect( - getByText('Are you sure you wish to disconnect this organization?'), + getByText( + 'Are you sure you wish to disconnect the organization "organizationName"?', + ), ).toBeInTheDocument(); }); userEvent.click(getByText('Yes')); diff --git a/src/components/Settings/integrations/Organization/OrganizationAccordion.tsx b/src/components/Settings/integrations/Organization/OrganizationAccordion.tsx index c218734e8..bd5bff654 100644 --- a/src/components/Settings/integrations/Organization/OrganizationAccordion.tsx +++ b/src/components/Settings/integrations/Organization/OrganizationAccordion.tsx @@ -24,6 +24,7 @@ import { OrganizationAddAccountModal } from './Modals/OrganizationAddAccountModa import { OrganizationEditAccountModal } from './Modals/OrganizationEditAccountModal'; import { OrganizationImportDataSyncModal } from './Modals/OrganizationImportDataSyncModal'; import { + GetUsersOrganizationsAccountsQuery, useDeleteOrganizationAccountMutation, useGetUsersOrganizationsAccountsQuery, useSyncOrganizationAccountMutation, @@ -34,6 +35,9 @@ interface OrganizationAccordionProps { expandedPanel: string; } +type OrganizationAccountPartial = + GetUsersOrganizationsAccountsQuery['userOrganizationAccounts'][0]; + const OrganizationDeleteIconButton = styled(IconButton)(() => ({ color: theme.palette.cruGrayMedium.main, marginLeft: '10px', @@ -87,16 +91,18 @@ export const OrganizationAccordion: React.FC = ({ const accountListId = useAccountListId(); const { enqueueSnackbar } = useSnackbar(); const { appName } = useGetAppSettings(); - const [showAddAccountModal, setShowAddAccountModal] = useState(false); - const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false); - const [showDeleteOrganizationModal, setShowDeleteOrganizationModal] = - useState(false); - const [showEditOrganizationModal, setShowEditOrganizationModal] = - useState(false); const [deleteOrganizationAccount] = useDeleteOrganizationAccountMutation(); const [syncOrganizationAccount] = useSyncOrganizationAccountMutation(); const { getOrganizationOauthUrl: getOauthUrl } = useOauthUrl(); + const [showAddAccountModal, setShowAddAccountModal] = useState(false); + const [importDataSyncModal, setImportDataSyncModal] = + useState(null); + const [deleteOrganizationModal, setDeleteOrganizationModal] = + useState(null); + const [editOrganizationModal, setEditOrganizationModal] = + useState(null); + const { data, loading, @@ -204,138 +210,121 @@ export const OrganizationAccordion: React.FC = ({ {!loading && !!organizations?.length && ( - {organizations.map( - ({ organization, lastDownloadedAt, latestDonationDate, id }) => { - const type = getOrganizationType( - organization.apiClass, - organization.oauth, - ); + {organizations.map((organizationAccount) => { + const { organization, lastDownloadedAt, latestDonationDate, id } = + organizationAccount; + const type = getOrganizationType( + organization.apiClass, + organization.oauth, + ); - return ( - + return ( + + - - - {organization.name} - - - - {type !== OrganizationTypesEnum.OFFLINE && ( - handleSync(id)} - > - {t('Sync')} - - )} + + {organization.name} + + + + {type !== OrganizationTypesEnum.OFFLINE && ( + handleSync(id)} + > + {t('Sync')} + + )} - {type === OrganizationTypesEnum.OFFLINE && ( - setShowImportDataSyncModal(true)} - > - {t('Import TntConnect DataSync file')} - - )} + {type === OrganizationTypesEnum.OFFLINE && ( + + setImportDataSyncModal(organizationAccount) + } + > + {t('Import TntConnect DataSync file')} + + )} - {type === OrganizationTypesEnum.OAUTH && ( - handleReconnect(organization.id)} - > - {t('Reconnect')} - - )} - {type === OrganizationTypesEnum.LOGIN && ( - setShowEditOrganizationModal(true)} - > - - - )} + {type === OrganizationTypesEnum.OAUTH && ( + handleReconnect(organization.id)} + > + {t('Reconnect')} + + )} + {type === OrganizationTypesEnum.LOGIN && ( setShowDeleteOrganizationModal(true)} + onClick={() => + setEditOrganizationModal(organizationAccount) + } > - + - + )} + + setDeleteOrganizationModal(organizationAccount) + } + > + + - - {lastDownloadedAt && ( - - - - {t('Last Updated')} - - - {DateTime.fromISO(lastDownloadedAt).toRelative()} - + + + {lastDownloadedAt && ( + + + + {t('Last Updated')} - - )} - {latestDonationDate && ( - - - - {t('Last Gift Date')} - - - {DateTime.fromISO(latestDonationDate).toRelative()} - + + {DateTime.fromISO(lastDownloadedAt).toRelative()} - - )} - setShowDeleteOrganizationModal(false)} - mutation={() => handleDelete(id)} - /> - {showEditOrganizationModal && ( - setShowEditOrganizationModal(false)} - organizationId={id} - /> - )} - {showImportDataSyncModal && ( - setShowImportDataSyncModal(false)} - organizationId={id} - organizationName={organization.name} - accountListId={accountListId ?? ''} - /> - )} - - ); - }, - )} + + + )} + {latestDonationDate && ( + + + + {t('Last Gift Date')} + + + {DateTime.fromISO(latestDonationDate).toRelative()} + + + + )} + + ); + })} )} @@ -353,6 +342,34 @@ export const OrganizationAccordion: React.FC = ({ refetchOrganizations={refetchOrganizations} /> )} + + {importDataSyncModal && ( + setImportDataSyncModal(null)} + organizationId={importDataSyncModal.id} + organizationName={importDataSyncModal.organization.name} + accountListId={accountListId ?? ''} + /> + )} + + {editOrganizationModal && ( + setEditOrganizationModal(null)} + organizationId={editOrganizationModal.id} + /> + )} + + {deleteOrganizationModal && ( + setDeleteOrganizationModal(null)} + mutation={() => handleDelete(deleteOrganizationModal.id)} + /> + )} ); };