From f6a05fb1b6fd66473accf7330e0a7e67383ad2d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Burkard?= <burkardjerome@gmail.com>
Date: Fri, 30 Jun 2023 11:55:50 +0200
Subject: [PATCH] Add PE connect button when PE connected

---
 .../sections/beneficiary/BeneficiaryFormSection.tsx |  4 +---
 front/src/app/components/layout/ImmersionHeader.tsx | 13 +++++++++++++
 front/src/core-logic/domain/auth/auth.selectors.ts  |  4 ++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx b/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx
index 16596e4df5..63e727a200 100644
--- a/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx
+++ b/front/src/app/components/forms/convention/sections/beneficiary/BeneficiaryFormSection.tsx
@@ -37,9 +37,7 @@ export const BeneficiaryFormSection = ({
   const hasCurrentEmployer = useAppSelector(
     conventionSelectors.hasCurrentEmployer,
   );
-  const isSuccessfullyPeConnected = useAppSelector(
-    authSelectors.isSuccessfullyPeConnected,
-  );
+  const isSuccessfullyPeConnected = useAppSelector(authSelectors.isPeConnected);
   const connectedUser = useAppSelector(authSelectors.connectedUser);
   const userFieldsAreFilled = isSuccessfullyPeConnected && !!connectedUser;
   const { register, getValues, setValue, formState } =
diff --git a/front/src/app/components/layout/ImmersionHeader.tsx b/front/src/app/components/layout/ImmersionHeader.tsx
index b075a197c7..8517751d87 100644
--- a/front/src/app/components/layout/ImmersionHeader.tsx
+++ b/front/src/app/components/layout/ImmersionHeader.tsx
@@ -14,6 +14,8 @@ import { useAppSelector } from "src/app/hooks/reduxHooks";
 import { routes, useRoute } from "src/app/routes/routes";
 import { adminSelectors } from "src/core-logic/domain/admin/admin.selectors";
 import { adminAuthSlice } from "src/core-logic/domain/admin/adminAuth/adminAuth.slice";
+import { authSelectors } from "src/core-logic/domain/auth/auth.selectors";
+import { authSlice } from "src/core-logic/domain/auth/auth.slice";
 
 import immersionFacileLightLogo from "/assets/img/logo-if.svg";
 import immersionFacileDarkLogo from "/assets/img/logo-if-dark.svg";
@@ -43,6 +45,7 @@ export const ImmersionHeader = () => {
   } = domElementIds.header.navLinks;
 
   const isAdminConnected = useAppSelector(adminSelectors.auth.isAuthenticated);
+  const isPeConnected = useAppSelector(authSelectors.isPeConnected);
   const tools: HeaderProps["quickAccessItems"] = [headerFooterDisplayItem];
   if (isAdminConnected) {
     tools.push({
@@ -53,6 +56,16 @@ export const ImmersionHeader = () => {
       },
     });
   }
+  if (isPeConnected) {
+    tools.push({
+      iconId: "fr-icon-lock-line",
+      text: "Se déconnecter (PE Connect)",
+      buttonProps: {
+        onClick: () =>
+          dispatch(authSlice.actions.federatedIdentityDeletionTriggered),
+      },
+    });
+  }
   const isCandidateRoute =
     currentRoute.name === routes.search().name ||
     currentRoute.name === routes.homeCandidates().name;
diff --git a/front/src/core-logic/domain/auth/auth.selectors.ts b/front/src/core-logic/domain/auth/auth.selectors.ts
index 50150ed863..158ff39bf7 100644
--- a/front/src/core-logic/domain/auth/auth.selectors.ts
+++ b/front/src/core-logic/domain/auth/auth.selectors.ts
@@ -7,7 +7,7 @@ const currentFederatedIdentity = createRootSelector(
   (state) => state.auth.federatedIdentityWithUser,
 );
 
-const isSuccessfullyPeConnected = createSelector(
+const isPeConnected = createSelector(
   currentFederatedIdentity,
   (federatedIdentity) =>
     federatedIdentity?.provider === "peConnect" &&
@@ -45,7 +45,7 @@ const connectedUser = createSelector(
 
 export const authSelectors = {
   federatedIdentity: currentFederatedIdentity,
-  isSuccessfullyPeConnected,
+  isPeConnected,
   isInclusionConnected,
   inclusionConnectToken,
   connectedUser,