Skip to content

Commit

Permalink
Merge pull request #935 from CruGlobal/organization-fixes
Browse files Browse the repository at this point in the history 
MPDX-7892 - Connect Services organization modals referring to incorrect organization
  • Loading branch information
@dr-bizz
dr-bizz authored May 1, 2024
2 parents c189be2 + eb25b86 commit 7827ed9
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 125 deletions.
4 changes: 3 additions & 1 deletion src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
265 changes: 141 additions & 124 deletions src/components/Settings/integrations/Organization/OrganizationAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { OrganizationAddAccountModal } from './Modals/OrganizationAddAccountModa
import { OrganizationEditAccountModal } from './Modals/OrganizationEditAccountModal';
import { OrganizationImportDataSyncModal } from './Modals/OrganizationImportDataSyncModal';
import {
GetUsersOrganizationsAccountsQuery,
useDeleteOrganizationAccountMutation,
useGetUsersOrganizationsAccountsQuery,
useSyncOrganizationAccountMutation,
Expand All @@ -34,6 +35,9 @@ interface OrganizationAccordionProps {
expandedPanel: string;
}

type OrganizationAccountPartial =
GetUsersOrganizationsAccountsQuery['userOrganizationAccounts'][0];

const OrganizationDeleteIconButton = styled(IconButton)(() => ({
color: theme.palette.cruGrayMedium.main,
marginLeft: '10px',
Expand Down Expand Up @@ -87,16 +91,18 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
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<OrganizationAccountPartial | null>(null);
const [deleteOrganizationModal, setDeleteOrganizationModal] =
useState<OrganizationAccountPartial | null>(null);
const [editOrganizationModal, setEditOrganizationModal] =
useState<OrganizationAccountPartial | null>(null);

const {
data,
loading,
Expand Down Expand Up @@ -204,138 +210,121 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({

{!loading && !!organizations?.length && (
<Box style={{ marginTop: '20px' }}>
{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 (
<Card key={organization.id} style={{ marginBottom: '20px' }}>
return (
<Card key={organization.id} style={{ marginBottom: '20px' }}>
<Box
sx={{
p: 1,
pl: 2,
background: theme.palette.cruGrayLight.main,
justifyContent: 'space-between',
display: 'flex',
}}
>
<Box
sx={{
p: 1,
pl: 2,
background: theme.palette.cruGrayLight.main,
justifyContent: 'space-between',
display: 'flex',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
<Typography fontWeight={700}>
{organization.name}
</Typography>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
{type !== OrganizationTypesEnum.OFFLINE && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() => handleSync(id)}
>
{t('Sync')}
</StyledServicesButton>
)}
<Typography fontWeight={700}>
{organization.name}
</Typography>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
}}
>
{type !== OrganizationTypesEnum.OFFLINE && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() => handleSync(id)}
>
{t('Sync')}
</StyledServicesButton>
)}

{type === OrganizationTypesEnum.OFFLINE && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() => setShowImportDataSyncModal(true)}
>
{t('Import TntConnect DataSync file')}
</StyledServicesButton>
)}
{type === OrganizationTypesEnum.OFFLINE && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() =>
setImportDataSyncModal(organizationAccount)
}
>
{t('Import TntConnect DataSync file')}
</StyledServicesButton>
)}

{type === OrganizationTypesEnum.OAUTH && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() => handleReconnect(organization.id)}
>
{t('Reconnect')}
</StyledServicesButton>
)}
{type === OrganizationTypesEnum.LOGIN && (
<OrganizationDeleteIconButton
onClick={() => setShowEditOrganizationModal(true)}
>
<Edit />
</OrganizationDeleteIconButton>
)}
{type === OrganizationTypesEnum.OAUTH && (
<StyledServicesButton
variant="contained"
size="small"
sx={{ m: '0 0 0 10px' }}
onClick={() => handleReconnect(organization.id)}
>
{t('Reconnect')}
</StyledServicesButton>
)}
{type === OrganizationTypesEnum.LOGIN && (
<OrganizationDeleteIconButton
onClick={() => setShowDeleteOrganizationModal(true)}
onClick={() =>
setEditOrganizationModal(organizationAccount)
}
>
<DeleteIcon />
<Edit />
</OrganizationDeleteIconButton>
</Box>
)}
<OrganizationDeleteIconButton
onClick={() =>
setDeleteOrganizationModal(organizationAccount)
}
>
<DeleteIcon />
</OrganizationDeleteIconButton>
</Box>
<Divider />
{lastDownloadedAt && (
<Box sx={{ p: 2, display: 'flex' }}>
<Grid container spacing={2}>
<Grid item xs={6}>
{t('Last Updated')}
</Grid>
<Grid item xs={6}>
{DateTime.fromISO(lastDownloadedAt).toRelative()}
</Grid>
</Box>
<Divider />
{lastDownloadedAt && (
<Box sx={{ p: 2, display: 'flex' }}>
<Grid container spacing={2}>
<Grid item xs={6}>
{t('Last Updated')}
</Grid>
</Box>
)}
{latestDonationDate && (
<Box sx={{ p: 2, display: 'flex' }}>
<Grid container spacing={2}>
<Grid item xs={6}>
{t('Last Gift Date')}
</Grid>
<Grid item xs={6}>
{DateTime.fromISO(latestDonationDate).toRelative()}
</Grid>
<Grid item xs={6}>
{DateTime.fromISO(lastDownloadedAt).toRelative()}
</Grid>
</Box>
)}
<Confirmation
isOpen={showDeleteOrganizationModal}
title={t('Confirm')}
message={t(
'Are you sure you wish to disconnect this organization?',
)}
handleClose={() => setShowDeleteOrganizationModal(false)}
mutation={() => handleDelete(id)}
/>
{showEditOrganizationModal && (
<OrganizationEditAccountModal
handleClose={() => setShowEditOrganizationModal(false)}
organizationId={id}
/>
)}
{showImportDataSyncModal && (
<OrganizationImportDataSyncModal
handleClose={() => setShowImportDataSyncModal(false)}
organizationId={id}
organizationName={organization.name}
accountListId={accountListId ?? ''}
/>
)}
</Card>
);
},
)}
</Grid>
</Box>
)}
{latestDonationDate && (
<Box sx={{ p: 2, display: 'flex' }}>
<Grid container spacing={2}>
<Grid item xs={6}>
{t('Last Gift Date')}
</Grid>
<Grid item xs={6}>
{DateTime.fromISO(latestDonationDate).toRelative()}
</Grid>
</Grid>
</Box>
)}
</Card>
);
})}
</Box>
)}

Expand All @@ -353,6 +342,34 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
refetchOrganizations={refetchOrganizations}
/>
)}

{importDataSyncModal && (
<OrganizationImportDataSyncModal
handleClose={() => setImportDataSyncModal(null)}
organizationId={importDataSyncModal.id}
organizationName={importDataSyncModal.organization.name}
accountListId={accountListId ?? ''}
/>
)}

{editOrganizationModal && (
<OrganizationEditAccountModal
handleClose={() => setEditOrganizationModal(null)}
organizationId={editOrganizationModal.id}
/>
)}

{deleteOrganizationModal && (
<Confirmation
isOpen={true}
title={t('Confirm')}
message={t(
`Are you sure you wish to disconnect the organization "${deleteOrganizationModal.organization.name}"?`,
)}
handleClose={() => setDeleteOrganizationModal(null)}
mutation={() => handleDelete(deleteOrganizationModal.id)}
/>
)}
</AccordionItem>
);
};

0 comments on commit 7827ed9

Please sign in to comment.