Skip to content

Commit 5ff8042

Browse files
bbohecbbohec
committed
add remove agency rights button & modal on AgencyLineRightsCTAs
Signed-off-by: Benjamin Bohec <bbohec.pro@gmail.com>
1 parent 592409d commit 5ff8042

4 files changed

Lines changed: 117 additions & 44 deletions

File tree

‎front/src/app/components/agency/agencies-table/AgenciesTablesSection.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { updateUserOnAgencySlice } from "src/core-logic/domain/agencies/update-u
1313
import { connectedUserSelectors } from "src/core-logic/domain/connected-user/connectedUser.selectors";
1414
import type { FeedbackTopic } from "src/core-logic/domain/feedback/feedback.content";
1515
import { Feedback } from "../../feedback/Feedback";
16+
import { SelfRemoveUserAgencyRightFeedback } from "../removeUserAgencyRights";
1617
import { AgencyRightsTable } from "./AgencyRightsTable";
1718

1819
export const AgenciesTablesSection = ({
@@ -58,6 +59,7 @@ export const AgenciesTablesSection = ({
5859
return (
5960
<>
6061
<Feedback topics={["user"]} closable />
62+
<SelfRemoveUserAgencyRightFeedback />
6163

6264
{toReviewAgencyRights.length > 0 && (
6365
<>

‎front/src/app/components/agency/agencies-table/agency-line/AgencyLineRightsCTAs.tsx‎

Lines changed: 111 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,123 @@
11
import Button from "@codegouvfr/react-dsfr/Button";
2-
import type { ReactNode } from "react";
3-
import { type AgencyRight, domElementIds, frontRoutes } from "shared";
2+
import { createModal } from "@codegouvfr/react-dsfr/Modal";
3+
import { type ReactNode, useMemo } from "react";
4+
import { createPortal } from "react-dom";
5+
import { useDispatch } from "react-redux";
6+
import {
7+
type AgencyRight,
8+
domElementIds,
9+
frontRoutes,
10+
type User,
11+
} from "shared";
12+
import { removeUserFromAgencySlice } from "src/core-logic/domain/agencies/remove-user-from-agency/removeUserFromAgency.slice";
13+
import { feedbackSlice } from "src/core-logic/domain/feedback/feedback.slice";
14+
import {
15+
makeRemoveUserAgencyRightsButtonProps,
16+
makeRemoveUserAgencyRightsModalProps,
17+
} from "../../removeUserAgencyRights";
418

519
export const AgencyLineRightsCTAs = ({
620
agencyRight,
721
isBackofficeAdmin,
822
onUpdateClicked,
923
onRegistrationCancelledClicked,
24+
user,
1025
}: {
1126
agencyRight: AgencyRight;
1227
onUpdateClicked?: (agencyRight: AgencyRight) => void;
1328
onRegistrationCancelledClicked?: (agencyRight: AgencyRight) => void;
14-
isBackofficeAdmin?: boolean | undefined;
15-
}): ReactNode => (
16-
<>
17-
{onUpdateClicked && (
18-
<Button
19-
size="small"
20-
priority="secondary"
21-
id={`${domElementIds.myAccount.editRoleButton}-${agencyRight.agency.id}`}
22-
onClick={() => {
23-
onUpdateClicked(agencyRight);
24-
}}
25-
>
26-
Modifier
27-
</Button>
28-
)}
29-
{isBackofficeAdmin && (
30-
<Button
31-
priority="tertiary no outline"
32-
id={`${domElementIds.myAccount.adminAgencyLink}-${agencyRight.agency.id}`}
33-
size="small"
34-
linkProps={
35-
frontRoutes.adminAgencyDetail({
36-
agencyId: agencyRight.agency.id,
37-
}).link
38-
}
39-
>
40-
Voir l'agence comme admin IF
41-
</Button>
42-
)}
43-
{onRegistrationCancelledClicked && (
29+
isBackofficeAdmin?: boolean;
30+
user: User;
31+
}): ReactNode => {
32+
const removeUserModalId = `${domElementIds.myAccount.removeAgencyRightModal}-${agencyRight.agency.id}-${user.id}`;
33+
const userRightToRemove = {
34+
agencyRight,
35+
userEmail: user.email,
36+
userId: user.id,
37+
isSelfRemoval: true,
38+
};
39+
const dispatch = useDispatch();
40+
const removeUserModal = useMemo(
41+
() =>
42+
createModal({
43+
isOpenedByDefault: false,
44+
id: removeUserModalId,
45+
}),
46+
[removeUserModalId],
47+
);
48+
49+
return (
50+
<>
51+
{onUpdateClicked && (
52+
<Button
53+
size="small"
54+
priority="secondary"
55+
id={`${domElementIds.myAccount.editRoleButton}-${agencyRight.agency.id}`}
56+
onClick={() => {
57+
onUpdateClicked(agencyRight);
58+
}}
59+
>
60+
Modifier
61+
</Button>
62+
)}
4463
<Button
45-
priority="secondary"
46-
id={`${domElementIds.myAccount.cancelRegistrationButton}-${agencyRight.agency.id}`}
47-
size="small"
48-
onClick={() => {
49-
onRegistrationCancelledClicked(agencyRight);
50-
}}
51-
>
52-
Annuler la demande
53-
</Button>
54-
)}
55-
</>
56-
);
64+
{...makeRemoveUserAgencyRightsButtonProps({
65+
onDeleteClicked: () => {
66+
dispatch(feedbackSlice.actions.clearFeedbacksTriggered());
67+
removeUserModal.open();
68+
},
69+
removeUserButtonId: `${domElementIds.myAccount.removeAgencyRightButton}-${agencyRight.agency.id}-${user.id}`,
70+
userRightToRemove,
71+
size: "small",
72+
})}
73+
/>
74+
{isBackofficeAdmin && (
75+
<Button
76+
priority="tertiary no outline"
77+
id={`${domElementIds.myAccount.adminAgencyLink}-${agencyRight.agency.id}`}
78+
size="small"
79+
linkProps={
80+
frontRoutes.adminAgencyDetail({
81+
agencyId: agencyRight.agency.id,
82+
}).link
83+
}
84+
>
85+
Voir l'agence comme admin IF
86+
</Button>
87+
)}
88+
{onRegistrationCancelledClicked && (
89+
<Button
90+
priority="secondary"
91+
id={`${domElementIds.myAccount.cancelRegistrationButton}-${agencyRight.agency.id}`}
92+
size="small"
93+
onClick={() => {
94+
onRegistrationCancelledClicked(agencyRight);
95+
}}
96+
>
97+
Annuler la demande
98+
</Button>
99+
)}
100+
{createPortal(
101+
removeUserModal.Component(
102+
makeRemoveUserAgencyRightsModalProps({
103+
onCancel: () => removeUserModal.close(),
104+
onSubmitted: () => {
105+
dispatch(
106+
removeUserFromAgencySlice.actions.removeUserFromAgencyRequested(
107+
{
108+
userId: userRightToRemove.userId,
109+
agencyId: userRightToRemove.agencyRight.agency.id,
110+
feedbackTopic: "agency-user-right-self",
111+
},
112+
),
113+
);
114+
removeUserModal.close();
115+
},
116+
userRightToRemove,
117+
}),
118+
),
119+
document.body,
120+
)}
121+
</>
122+
);
123+
};

‎front/src/app/pages/agency-dashboard/AgencyDashboardMainTab.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Loader } from "react-design-system";
66
import { useDispatch } from "react-redux";
77
import { type AgencyRight, distinguishAgencyRights } from "shared";
88
import { NoActiveAgencyRights } from "src/app/components/agency/agency-dashboard/NoActiveAgencyRights";
9+
import { SelfRemoveUserAgencyRightFeedback } from "src/app/components/agency/removeUserAgencyRights";
910
import { Feedback } from "src/app/components/feedback/Feedback";
1011
import { useAppSelector } from "src/app/hooks/reduxHooks";
1112
import type { FrontAgencyDashboardRoute } from "src/app/pages/auth/ConnectedPrivateRoutePage";
@@ -43,6 +44,7 @@ export const AgencyDashboardMainTab = ({
4344
<h1>Mon espace prescripteur</h1>
4445
{isLoading && <Loader />}
4546
<Feedback topics={[feedbackTopic]} />
47+
<SelfRemoveUserAgencyRightFeedback />
4648

4749
{match({ currentUser })
4850
.with(

‎shared/src/domElementIds.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -931,6 +931,8 @@ export const domElementIds = {
931931
adminAgencyLink: "im-profile__admin-agency-link",
932932
adminEstablishmentLink: "im-profile__admin-establishment-link",
933933
cancelRegistrationButton: "im-profile__cancel-registration-button",
934+
removeAgencyRightButton: "im-profile__remove-agency-right-button",
935+
removeAgencyRightModal: "im-profile__remove-agency-right-modal",
934936
updateOwnInfosLink: "im-profile__update-own-infos-link",
935937
editAgencyUserEmail: "im-profile-edit-agency-user__email",
936938
editAgencyManageUserCheckbox:

0 commit comments

Comments
 (0)