Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-7892 - Connect Services organization modals referring to incorrect organization #935

Merged
merged 2 commits into from
May 1, 2024
Merged

MPDX-7892 - Connect Services organization modals referring to incorrect organization #935

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
719c5eb
Modals are now connected to correct Organization
dr-bizz Apr 30, 2024
eb25b86
fixup! Modals are now connected to correct Organization
dr-bizz May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Settings/integrations/Organization/OrganizationAccordion.test.tsx
View file
Open in desktop
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
283 changes: 161 additions & 122 deletions src/components/Settings/integrations/Organization/OrganizationAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
import { OrganizationEditAccountModal } from './Modals/OrganizationEditAccountModal';
import { OrganizationImportDataSyncModal } from './Modals/OrganizationImportDataSyncModal';
import {
GetUsersOrganizationsAccountsQuery,
useDeleteOrganizationAccountMutation,
useGetUsersOrganizationsAccountsQuery,
useSyncOrganizationAccountMutation,
Expand All @@ -34,6 +35,9 @@
expandedPanel: string;
}

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

const OrganizationDeleteIconButton = styled(IconButton)(() => ({
color: theme.palette.cruGrayMedium.main,
marginLeft: '10px',
Expand Down Expand Up @@ -83,16 +87,19 @@
handleAccordionChange,
expandedPanel,
}) => {
const { t } = useTranslation();
const accountListId = useAccountListId();
const { enqueueSnackbar } = useSnackbar();
const { appName } = useGetAppSettings();
const [selectedOrganization, setSelectedOrganization] =
dr-bizz marked this conversation as resolved.
Show resolved Hide resolved
useState<OrganizationAccountPartial | null>(null);
const [showAddAccountModal, setShowAddAccountModal] = useState(false);
const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false);
const [showDeleteOrganizationModal, setShowDeleteOrganizationModal] =
useState(false);
const [showEditOrganizationModal, setShowEditOrganizationModal] =
useState(false);

dr-bizz marked this conversation as resolved.
Show resolved Hide resolved
const { t } = useTranslation();
const accountListId = useAccountListId();
const { enqueueSnackbar } = useSnackbar();
const { appName } = useGetAppSettings();
const [deleteOrganizationAccount] = useDeleteOrganizationAccountMutation();
const [syncOrganizationAccount] = useSyncOrganizationAccountMutation();
const { getOrganizationOauthUrl: getOauthUrl } = useOauthUrl();
Expand Down Expand Up @@ -171,6 +178,27 @@
});
};

const handleOpenEditOrganizationModal = (
organizationAccount: OrganizationAccountPartial,
) => {
setShowEditOrganizationModal(true);
setSelectedOrganization(organizationAccount);
};

const handleOpenDeleteOrganizationModal = (
organizationAccount: OrganizationAccountPartial,
) => {
setShowDeleteOrganizationModal(true);
setSelectedOrganization(organizationAccount);
};

const handleOpenImportDataSyncModal = (
organizationAccount: OrganizationAccountPartial,
) => {
setShowImportDataSyncModal(true);
setSelectedOrganization(organizationAccount);
};

return (
<AccordionItem
onAccordionChange={handleAccordionChange}
Expand Down Expand Up @@ -204,138 +232,121 @@

{!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={() =>
handleOpenImportDataSyncModal(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={() =>
handleOpenEditOrganizationModal(organizationAccount)
}
>
<DeleteIcon />
<Edit />
</OrganizationDeleteIconButton>
</Box>
)}
<OrganizationDeleteIconButton
onClick={() =>
handleOpenDeleteOrganizationModal(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 +364,34 @@
refetchOrganizations={refetchOrganizations}
/>
)}

{showImportDataSyncModal && selectedOrganization && (
<OrganizationImportDataSyncModal
handleClose={() => setShowImportDataSyncModal(false)}

Check warning on line 370 in src/components/Settings/integrations/Organization/OrganizationAccordion.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Settings/integrations/Organization/OrganizationAccordion.tsx#L370 

Added line #L370 was not covered by tests
organizationId={selectedOrganization.id}
organizationName={selectedOrganization.organization.name}
accountListId={accountListId ?? ''}
/>
)}

{showEditOrganizationModal && selectedOrganization && (
<OrganizationEditAccountModal
handleClose={() => setShowEditOrganizationModal(false)}

Check warning on line 379 in src/components/Settings/integrations/Organization/OrganizationAccordion.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Settings/integrations/Organization/OrganizationAccordion.tsx#L379 

Added line #L379 was not covered by tests
organizationId={selectedOrganization.id}
/>
)}

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