From de22569edf94be3eb9decdec2edbd255dbb36a86 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 12 Sep 2023 13:09:00 +0000
Subject: [PATCH] chore: fix terms view screen

---
 src/components/Terms/TermsView.tsx            | 26 +++++++++++-----
 .../__snapshots__/TermsView.spec.tsx.snap     | 30 ++++++++++---------
 src/components/Terms/termsView.scss           | 16 ++++------
 src/locales/fr.json                           |  2 +-
 4 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index cd192f210..228d645f7 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -86,14 +86,24 @@ const TermsView = () => {
                 onChange={handleGCUValidate}
                 checked={GCUValidation}
               />
-              <span
-                onClick={() => toggleCGUModal()}
-                dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
-              />
-              <span
-                onClick={() => toggleLegalNoticeModal()}
-                dangerouslySetInnerHTML={{ __html: t('dataShare.validLegal') }}
-              />
+              <div>
+                <span
+                  onClick={e => {
+                    e.preventDefault()
+                    toggleCGUModal()
+                  }}
+                  dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
+                />
+                <span
+                  onClick={e => {
+                    e.preventDefault()
+                    toggleLegalNoticeModal()
+                  }}
+                  dangerouslySetInnerHTML={{
+                    __html: t('dataShare.validLegal'),
+                  }}
+                />
+              </div>
             </label>
           </div>
           <div className="terms-footer">
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 375a00d43..3ea648268 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -137,22 +137,24 @@ exports[`TermsView component should be rendered correctly 1`] = `
             onChange={[Function]}
             type="checkbox"
           />
-          <span
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "dataShare.validCGU",
+          <div>
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "dataShare.validCGU",
+                }
               }
-            }
-            onClick={[Function]}
-          />
-          <span
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "dataShare.validLegal",
+              onClick={[Function]}
+            />
+            <span
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "dataShare.validLegal",
+                }
               }
-            }
-            onClick={[Function]}
-          />
+              onClick={[Function]}
+            />
+          </div>
         </label>
       </div>
       <div
diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss
index e7ccf1b16..6e058dad6 100644
--- a/src/components/Terms/termsView.scss
+++ b/src/components/Terms/termsView.scss
@@ -1,6 +1,8 @@
 @import 'src/styles/base/color';
 @import 'src/styles/base/mixins';
 
+@include checkBox();
+
 .terms-wrapper {
   padding: 0rem 1.5rem 0 1.5rem;
   box-sizing: border-box;
@@ -21,12 +23,15 @@
 .terms-content {
   max-width: 45rem;
   margin: auto;
+  .action {
+    cursor: pointer;
+    color: $gold-shadow;
+  }
 }
 .dataShare-content-wrapper,
 .dataShare-content-root {
   width: inherit;
 }
-@include checkBox();
 
 .terms-footer {
   max-width: 45rem;
@@ -43,12 +48,3 @@
     }
   }
 }
-button.action {
-  appearance: none;
-  cursor: pointer;
-  display: contents;
-  background: transparent;
-  border: none;
-  padding: 0;
-  color: $gold-shadow;
-}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index aaae141fb..5d60f9633 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -645,7 +645,7 @@
     "link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
     "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
     "validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ",
-    "validLegal": " du service et ai pris connaissance des <span class=\"action\"> Mentions Légales </span> de celui-ci.",
+    "validLegal": " du service et ai pris connaissance des <span class=\"action\">Mentions Légales</span> de celui-ci.",
     "button_accept": "C'est parti !",
     "accessibility": {
       "button_accept": "Accepter les conditions générales d'utilisation"
-- 
GitLab