Skip to content

Commit

Permalink
Modals are now connected to correct Organization
Browse files Browse the repository at this point in the history
  • Loading branch information
@dr-bizz
dr-bizz committed Apr 30, 2024
1 parent aad2df0 commit 719c5eb
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 123 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
283 changes: 161 additions & 122 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 @@ -83,16 +87,19 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
handleAccordionChange,
expandedPanel,
}) => {
const { t } = useTranslation();
const accountListId = useAccountListId();
const { enqueueSnackbar } = useSnackbar();
const { appName } = useGetAppSettings();
const [selectedOrganization, setSelectedOrganization] =
useState<OrganizationAccountPartial | null>(null);
const [showAddAccountModal, setShowAddAccountModal] = useState(false);
const [showImportDataSyncModal, setShowImportDataSyncModal] = useState(false);
const [showDeleteOrganizationModal, setShowDeleteOrganizationModal] =
useState(false);
const [showEditOrganizationModal, setShowEditOrganizationModal] =
useState(false);

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 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
});
};

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 @@ 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={() =>
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 @@ export const OrganizationAccordion: React.FC<OrganizationAccordionProps> = ({
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>
);
};

0 comments on commit 719c5eb

Please sign in to comment.