Merge pull request #105 from SocialGouv/fix-intentions-v2

fix(intentions): retours de démo
SocialGouv · Nov 18, 2022 · 5f6a025 · 5f6a025
2 parents 0ff4c1c + b95246c
commit 5f6a025
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/pages/results.js b/pages/results.js
@@ -84,12 +84,12 @@ export default function Results() {
     <ContentLayout>
       <WidgetHeader title={Labels.titleDPP} locale={localeSelected} />
       <ResultsMood scoreLevel={scoreLevelForMood} />
+      <ContactMamanBlues scoreLevel={scoreLevelForMacaron} />
+      <DescriptionAndConclusion />
       {scoreLevelForMacaron == SCORE_LEVEL_MEDIUM ||
         scoreLevelForMacaron == SCORE_LEVEL_BAD ? (
         <Intentions moodLevel={scoreLevelForMood} />
       ) : null}
-      <DescriptionAndConclusion />
-      <ContactMamanBlues scoreLevel={scoreLevelForMacaron} />
       <GiveOpinion />
       <button
         className="fr-btn fr-btn--secondary result-return-bt"

diff --git a/src/components/results/Intentions.js b/src/components/results/Intentions.js
@@ -12,6 +12,8 @@ export const Intentions = ({ moodLevel }) => {
   const router = useRouter()
 
   const [radioValue, setRadioValue] = useState()
+  const [itemSelected, setItemSelected] = useState(false)
+
   const questionAboutScore = {
     question: "À qui allez-vous parler de votre score ?",
     responses: [
@@ -21,19 +23,23 @@ export const Intentions = ({ moodLevel }) => {
       { name: "Je le garde pour moi", id: 4 },
     ],
   }
+  const DISPLAY_IMAGE_FOR_RESPONSE_ID = 1
 
   useEffect(() => {
     openContact()
   }, [openContact, radioValue])
 
   const openContact = () => {
-    const itemToElise = questionAboutScore.responses.find((item) => item.id == 1)
+    const itemToElise = questionAboutScore.responses.find(
+      (item) => item.id == DISPLAY_IMAGE_FOR_RESPONSE_ID
+    )
     if (itemToElise.name === radioValue)
       router.push({ pathname: "/contact/to-be-contacted" })
   }
 
   const onToggleButon = (value) => {
     setRadioValue(value)
+    setItemSelected(true)
     trackerForIntentions(moodLevel, value)
   }
 
@@ -54,11 +60,14 @@ export const Intentions = ({ moodLevel }) => {
               value={radio.name}
               checked={radioValue === radio.name}
               onChange={(event) => onToggleButon(event.currentTarget.value)}
+              disabled={itemSelected}
             >
               {radio.name}
+              {radio.id == 1 && <img alt="" src="../img/portrait-elise.jpg" />}
             </ToggleButton>
           ))}
         </ButtonGroup>
+        <div>{itemSelected && "Merci pour votre réponse"}</div>
       </div>
     )
   }

diff --git a/styles/results.scss b/styles/results.scss
@@ -196,6 +196,17 @@
     border-radius: 0;
     margin: $xxxs;
     text-align: start;
+    align-items: center;
+
+    img {
+      align-self: center;
+      border-radius: 50%;
+      height: 50px;
+      width: auto;
+      padding: 0;
+      margin-inline: $xxxxxxs;
+      border: 3px solid var(--primaryBlueDark);
+    }
   }
 
   .intentions-button:hover {
@@ -206,6 +217,10 @@
     padding-top: 1rem;
     margin-bottom: 0;
   }
+
+  .btn-primary.disabled {
+    background-color: transparent;
+  }
 }
 
 @media screen and (max-width: 770px) {