feat: notify users about new design (#300)

* feat: notify users about new design * feat: applay message only for search page * feat: notify users about new design
SocialGouv · Oct 29, 2023 · c171806 · c171806
1 parent 64e17aa
commit c171806
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 24 deletions.
diff --git a/src/client/src/components/App/App.js b/src/client/src/components/App/App.js
@@ -67,11 +67,17 @@ const App = () => {
                           <Maintenance />
                         ) : (
                           <Switch>
-                            <PrivateRoute exact path="/" component={Search} />
+                            <PrivateRoute
+                              exact
+                              displayMessage
+                              path="/"
+                              component={Search}
+                            />
                             <PrivateRoute
                               exact
                               path="/search"
                               component={Search}
+                              displayMessage
                             />
                             <PrivateRoute
                               exact

diff --git a/src/client/src/components/App/Header/Header.js b/src/client/src/components/App/Header/Header.js
@@ -1,6 +1,10 @@
 import "./header.scss";
 
-import { faChevronLeft, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChevronLeft,
+  faInfoCircle,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import React from "react";
@@ -9,6 +13,7 @@ import { withRouter } from "react-router";
 import { Link } from "react-router-dom";
 
 import logo from "../../../assets/img/logo_gouv-65w38h.png";
+import Config from "../../../services/Config";
 import { resetSearch } from "../../../services/Store/actions";
 
 const Header = ({ resetSearch, location, showBetaMessage }) => {
@@ -59,16 +64,27 @@ const Header = ({ resetSearch, location, showBetaMessage }) => {
       {showBetaMessage && (
         <div className="beta-message">
           <div>
-            <span>Ce site est en beta-test. </span>
+            <span className="beta-message__nouveaute">
+              {" "}
+              <FontAwesomeIcon icon={faInfoCircle} /> Une nouvelle version de
+              notre portail FCE sera déployée le 15 novembre 2023 :{" "}
+            </span>
             {location.pathname !== "/login" && (
               <span>
-                Aidez-nous à l{"'"}améliorer en{" "}
-                <a
-                  className="beta-message__feedback-link"
-                  href="#user-feedback"
-                >
-                  donnant votre avis
-                </a>
+                {`Cette mise à jour est une refonte ergonomique visant à aligner notre site avec la charte graphique de l'État.
+                  Nous tenons à souligner que cette mise à jour n'affectera en rien le contenu actuel de notre portail,
+                  qui restera inchangé. Vous continuerez d'accéder à toutes les informations et fonctionnalités auxquelles
+                   vous êtes habitués. `}
+                <br />
+                <span>
+                  Questions ou préoccupations ➜
+                  <a
+                    className="beta-message__feedback-link"
+                    href={`mailto:${Config.get("contact.mailto")}`}
+                  >
+                    [email protected]
+                  </a>
+                </span>
               </span>
             )}
           </div>

diff --git a/src/client/src/components/App/Header/header.scss b/src/client/src/components/App/Header/header.scss
@@ -70,26 +70,26 @@
 
 .beta-message {
     @extend %flex-center;
-    height: 40px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    text-align: center;
+    font-size: 1rem;
     letter-spacing: 0.04rem;
-    color: $black;
-    background-color: #ffe15b;
+    color: #0063cb;
+    background-color: #e8edff;
+    padding: 1rem;
     box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
-
+    &__nouveaute {
+        font-weight: bold;
+    }
     &__feedback-link {
         margin-left: $spacing-1;
         padding: $spacing-1 $spacing-2;
-        color: $dark-grey;
-        background-color: $white;
+        color: #0063cb !important;
+        transition: background-size 0s;
+        background-color: #b9c7f3;
         border-radius: $border-radius-1;
-        transition: color $duration-2, background-color $duration-2;
 
         &:hover {
             color: $white;
-            background-color: $primary;
+            background-color: #a9bfff;
         }
     }
 }
diff --git a/src/client/src/components/App/Layout.js b/src/client/src/components/App/Layout.js
@@ -12,6 +12,7 @@ const Layout = ({
   hasLandingHeader = false,
   hasSharedButton = false,
   children,
+  displayMessage = false,
 }) => {
   const isActiveMaintenanceMode = Config.get("maintenanceMode");
 
@@ -20,7 +21,7 @@ const Layout = ({
       {hasLandingHeader ? (
         <LandingHeader hasSharedButton={hasSharedButton} />
       ) : (
-        <Header showBetaMessage={!isActiveMaintenanceMode} />
+        <Header showBetaMessage={!isActiveMaintenanceMode && displayMessage} />
       )}
       <div className={classNames("app-container", { ie11: isIE })}>
         {children}
@@ -32,6 +33,7 @@ const Layout = ({
 
 Layout.propTypes = {
   children: PropTypes.node,
+  displayMessage: PropTypes.bool,
   hasLandingHeader: PropTypes.bool,
   hasSharedButton: PropTypes.bool,
 };

diff --git a/src/client/src/services/PrivateRoute/PrivateRoute.js b/src/client/src/services/PrivateRoute/PrivateRoute.js
@@ -5,7 +5,12 @@ import { Redirect, Route, useHistory } from "react-router-dom";
 import Layout from "../../components/App/Layout";
 import Auth from "../Auth";
 
-const PrivateRoute = ({ component: Component, location, ...rest }) => {
+const PrivateRoute = ({
+  component: Component,
+  displayMessage,
+  location,
+  ...rest
+}) => {
   const history = useHistory();
 
   async function getTempAuthAndRedirect(credential, location) {
@@ -46,7 +51,7 @@ const PrivateRoute = ({ component: Component, location, ...rest }) => {
       {...rest}
       render={(props) => {
         return authorization.auth ? (
-          <Layout>
+          <Layout displayMessage={displayMessage}>
             <Component {...props} />
           </Layout>
         ) : (
@@ -64,6 +69,7 @@ const PrivateRoute = ({ component: Component, location, ...rest }) => {
 
 PrivateRoute.propTypes = {
   component: PropTypes.elementType,
+  displayMessage: PropTypes.bool,
   history: PropTypes.shape({
     push: PropTypes.func,
   }),