From b6c2b6b3468f0167b6c19fee0d2b422c70e980c4 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Tue, 9 Feb 2021 14:07:08 +0100
Subject: [PATCH] Add unknown property for construction year + add hints in
 form

---
 .../ProfileTypeFormMultiChoice.tsx            |  4 +-
 .../ProfileTypeFormNumberSelection.tsx        |  5 ++
 .../ProfileType/profileTypeForm.scss          | 84 +++++++++++--------
 .../electricSpecific.json                     |  6 +-
 .../consumptionConstants/heating.json         | 16 +++-
 src/enum/profileType.enum.ts                  |  1 +
 src/locales/fr.json                           |  6 +-
 7 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
index 60ff6609c..1924a877d 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice.tsx
@@ -89,7 +89,9 @@ const ProfileTypeFormMultiChoice: React.FC<ProfileTypeFormMultiChoiceProps> = ({
             `profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
           )}
         </div>
-        <span>{t('profile_type.multi_choices')}</span>
+        <span className="profile-question-hint">
+          {t('profile_type.multi_choices')}
+        </span>
         {answerType.choices.map(
           (value: ProfileTypeAnswerChoices, index: number) => {
             return value ? (
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
index a11ea926e..069da4fc1 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection.tsx
@@ -73,6 +73,11 @@ const ProfileTypeFormNumberSelection: React.FC<ProfileTypeFormNumberSelectionPro
             `profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
           )}
         </div>
+        {ProfileTypeStepForm[step] === 'OUTSIDE_FACING_WALLS' && (
+          <span className="profile-question-hint">
+            {t('profile_type.outside_facing_walls.hint')}
+          </span>
+        )}
         {answer !== null ? (
           <div className={'number-container'}>
             <button
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index c7a487fad..83344fb69 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -13,19 +13,27 @@
   line-height: 150%;
   padding: 1rem 0;
 }
-
+.profile-question-hint {
+  font-size: 1rem;
+  color: $grey-bright;
+  display: block;
+  margin-bottom: 1rem;
+  font-style: italic;
+}
 .profile-question-answers {
   display: flex;
 }
-.profile-question-answers-radio-long  {
+.profile-question-answers-radio-long {
   flex-wrap: wrap;
 }
 
 .profile-question-answers-other {
   flex-direction: column;
 }
-.radio_short, .radio_long, .checkbox {
-  background: linear-gradient(180deg, #323339 0%, #25262B 100%);
+.radio_short,
+.radio_long,
+.checkbox {
+  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
   margin: 0.5rem 0;
   display: flex;
@@ -52,44 +60,52 @@
     border-radius: 1px;
   }
 }
-.radio_short, .checkbox {
-  padding: 1.2rem;   
-  border-radius: 4px; 
+.radio_short,
+.checkbox {
+  padding: 1.2rem;
+  border-radius: 4px;
 }
 .radio_long {
-  padding: .5rem 1rem;   
-  border-radius: 20px; 
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
   text-align: center;
 }
 .answer-checked {
-  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #F1C017;
+  background: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(226, 137, 4, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #f1c017;
   color: $dark-light-2;
   input {
-    &:before, &:after {
-    content: '';
-    position: absolute;
-    display: inline-block;
-    background: $gold-shadow;
-    border-radius: 0.5rem;
-  }
-  &:before {
-    width: 3px;
-    height: 12px;
-    left: 10px;
-    top: 4px;
-    transform: rotate(41deg);
-  }
-  &:after {
-    width: 3px;
-    height: 6px;
-    left: 5px;
-    top: 8px;
-    transform: rotate(133deg);
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      background: $gold-shadow;
+      border-radius: 0.5rem;
+    }
+    &:before {
+      width: 3px;
+      height: 12px;
+      left: 10px;
+      top: 4px;
+      transform: rotate(41deg);
+    }
+    &:after {
+      width: 3px;
+      height: 6px;
+      left: 5px;
+      top: 8px;
+      transform: rotate(133deg);
+    }
   }
-  }  
 }
 
-.text, .number {
+.text,
+.number {
   font-size: 1.25rem;
   input {
     margin: 0.5rem;
@@ -124,9 +140,9 @@
   margin: 0.5rem;
 
   &:focus {
-    outline:none;
+    outline: none;
   }
 }
 button:disabled {
   opacity: 0.5;
-}
\ No newline at end of file
+}
diff --git a/src/constants/consumptionConstants/electricSpecific.json b/src/constants/consumptionConstants/electricSpecific.json
index 0e5bf5ddf..86968545b 100644
--- a/src/constants/consumptionConstants/electricSpecific.json
+++ b/src/constants/consumptionConstants/electricSpecific.json
@@ -4,13 +4,15 @@
     "between_1948_and_1974": 3130,
     "between_1975_and_1989": 2900,
     "between_1990_and_1998": 3230,
-    "after_1999": 2900
+    "after_1999": 2900,
+    "unknown": 2900
   },
   "appartment": {
     "before_1948": 1120,
     "between_1948_and_1974": 1880,
     "between_1975_and_1989": 1780,
     "between_1990_and_1998": 1670,
-    "after_1999": 2060
+    "after_1999": 2060,
+    "unknown": 1780
   }
 }
diff --git a/src/constants/consumptionConstants/heating.json b/src/constants/consumptionConstants/heating.json
index 1bfd69962..a4c49b014 100644
--- a/src/constants/consumptionConstants/heating.json
+++ b/src/constants/consumptionConstants/heating.json
@@ -5,14 +5,16 @@
       "between_1948_and_1974": 184,
       "between_1975_and_1989": 140,
       "between_1990_and_1998": 129,
-      "after_1999": 106
+      "after_1999": 106,
+      "unknown": 140
     },
     "appartment": {
       "before_1948": 119,
       "between_1948_and_1974": 150,
       "between_1975_and_1989": 105,
       "between_1990_and_1998": 73,
-      "after_1999": 74
+      "after_1999": 74,
+      "unknown": 105
     }
   },
   "adjustment_outisde_facing_walls": {
@@ -87,6 +89,16 @@
       "window_replacement_and_roof_insulation": 0,
       "roof_and_wall_insulation": 0,
       "window_replacement_and_roof_and_wall_insulation": 0
+    },
+    "unknown": {
+      "none": 0,
+      "roof_insulation": 0,
+      "window_replacement": -0.06,
+      "wall_insulation": -0.2,
+      "window_replacement_and_wall_insulation": -0.25,
+      "window_replacement_and_roof_insulation": -0.07,
+      "roof_and_wall_insulation": -0.2,
+      "window_replacement_and_roof_and_wall_insulation": -0.25
     }
   },
   "adjustment_facilities": {
diff --git a/src/enum/profileType.enum.ts b/src/enum/profileType.enum.ts
index be9172417..76b288f42 100644
--- a/src/enum/profileType.enum.ts
+++ b/src/enum/profileType.enum.ts
@@ -22,6 +22,7 @@ export enum ConstructionYear {
   BETWEEN_1975_AND_1989 = 'between_1975_and_1989',
   BETWEEN_1990_AND_1998 = 'between_1990_and_1998',
   AFTER_1999 = 'after_1999',
+  UNKNOWN = 'unknown',
 }
 
 export enum IndividualOrCollective {
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 88a31debe..6ad195319 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -430,7 +430,8 @@
       "between_1948_and_1974": "Entre 1975 et 1989",
       "between_1975_and_1989": "Entre 1975 et 1989",
       "between_1990_and_1998": "Entre 1990 et 1998",
-      "after_1999": "Après 1999"
+      "after_1999": "Après 1999",
+      "unknown": "Je ne sais pas"
     },
     "area": {
       "title": "Surface",
@@ -442,7 +443,8 @@
     },
     "outside_facing_walls": {
       "title": "Murs extérieurs",
-      "question": "Combien de façades donnent sur l'extérieur ?"
+      "question": "Combien de façades de votre logement donnent-elles sur l’extérieur ?",
+      "hint": "Dit autrement, en regardant votre logement du dessus, combien de côtés donnent sur l’extérieur ? Sans compter le toit ni le plafond. La mitoyenneté cela compte dans vos consommations finales !"
     },
     "floor": {
       "title": "Étage",
-- 
GitLab