feat: create profileType option view

src/assets/icons/ico/profile.svg

+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
+<circle cx="18.5" cy="13.5" r="5.5" fill="white"/>
+<path d="M8 26C8 22.4735 9.60771 19.4852 13 19C14.3163 20.1296 16.5 21 18.5 21C22 21 22.5 20 24 19C27.3923 19.4852 29 22.4735 29 26V27C29 27 25 28 18.5 28C12 28 8 27 8 27V26Z" fill="white"/>
+</svg>

src/components/Options/OptionsView.tsx

@@ -7,6 +7,7 @@ import ReportOptions from 'components/Options/ReportOptions'
 import FAQLink from 'components/FAQ/FAQLink'
 import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
 import Version from 'components/Version/Version'
+import ProfileTypeOptions from './ProfileTypeOptions'
 
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
@@ -29,6 +30,7 @@ const OptionsView: React.FC = () => {
       <Content height={headerHeight}>
         <KonnectorViewerList isParam={true} />
         <ReportOptions />
+        <ProfileTypeOptions />
         <FAQLink />
         <LegalNoticeLink />
         <div className="parameters-logos">

src/components/Options/ProfileTypeOptions.tsx

+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { NavLink } from 'react-router-dom'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { AppStore } from 'store'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import profileIcon from 'assets/icons/ico/profile.svg'
+import './profileTypeOptions.scss'
+
+const ProfileTypeOptions: React.FC = () => {
+  const profile = useSelector((state: AppStore) => state.ecolyo.profile)
+  const { t } = useI18n()
+  return (
+    <div className="profile-type-root">
+      <div className="profile-type-content">
+        <div className="head text-14-normal-uppercase">
+          {t('profile.title_profile')}
+        </div>
+        <div className="profile-container">
+          <div className="fields">
+            <div className="label">{t('profile.title_housing')}</div>
+            <div className="value">
+              {t(`profile.housing_type.${profile.profileType.housingType}`)}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_construction')}</div>
+            <div className="value">
+              {t(
+                `profile.construction_year.${profile.profileType.constructionYear}`
+              )}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_area')}</div>
+            <div className="value">{profile.profileType.area}</div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_occupants')}</div>
+            <div className="value">{profile.profileType.occupantsNumber}</div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_outsideFacingWalls')}</div>
+            <div className="value">
+              {profile.profileType.outsideFacingWalls}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_floor')}</div>
+            <div className="value">
+              {t(`profile.floor.${profile.profileType.floor}`)}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_heating')}</div>
+            <div className="value">
+              {t(`profile.heating.${profile.profileType.heating}`)}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_insulation_work')}</div>
+            <div className="value">
+              {t(
+                `profile.insulation_work.${profile.profileType.individualInsulationWork}`
+              )}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">
+              {t('profile.title_facilities_installation')}
+            </div>
+            <div className="value">
+              {t(
+                `profile.facilities_installation.${profile.profileType.facilitiesInstallation}`
+              )}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_hotWaterEquipment')}</div>
+            <div className="value">
+              {t(
+                `profile.hotWaterEquipment.${profile.profileType.hotWaterEquipment}`
+              )}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_heating_source')}</div>
+            <div className="value">
+              {t(`profile.fluidType.${profile.profileType.warmingFluid}`)}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_warm_water_source')}</div>
+            <div className="value">
+              {t(`profile.fluidType.${profile.profileType.hotWaterFluid}`)}
+            </div>
+          </div>
+          <div className="fields">
+            <div className="label">{t('profile.title_cooking_source')}</div>
+            <div className="value">
+              {t(`profile.fluidType.${profile.profileType.cookingFluid}`)}
+            </div>
+          </div>
+        </div>
+        <NavLink className="profile-link" to="/profile">
+          <StyledCard>
+            <StyledIcon className="profile-icon" icon={profileIcon} size={50} />
+            <span className="link-label text-16-normal">
+              {t('profile.read_profile')}
+            </span>
+          </StyledCard>
+        </NavLink>
+      </div>
+    </div>
+  )
+}
+
+export default ProfileTypeOptions

src/components/Options/profileTypeOptions.scss

+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.profile-type-root {
+  margin-top: 2rem;
+  padding: 0 1.5rem;
+  .profile-type-content {
+    margin: 0 auto;
+    width: 100%;
+    @media (min-width: $width-large-phone) {
+      width: 45.75rem;
+    }
+  }
+  .value {
+    color: $white;
+  }
+  .head {
+    color: $grey-bright;
+  }
+  .head {
+    margin-bottom: 1.5rem;
+  }
+  .label {
+    color: $soft-grey;
+  }
+  .profile-container {
+    display: flex;
+    flex-wrap: wrap;
+    white-space: nowrap;
+  }
+  .fields {
+    flex-basis: 50%;
+    margin-bottom: 1rem;
+  }
+  .profile-link {
+    color: $grey-bright;
+    text-decoration: none;
+    .profile-icon {
+      vertical-align: middle;
+    }
+    .link-label {
+      margin-left: 1rem;
+    }
+    button {
+      > div {
+        padding: 0.75rem 1rem;
+      }
+    }
+  }
+}

src/locales/fr.json

@@ -404,6 +404,72 @@
   },
   "action": {
     "title_action": "Action",
-    "select_action" : "Je choisis cette action"
+    "select_action": "Je choisis cette action"
+  },
+  "profile": {
+    "title_profile": "Profil de consommation",
+    "read_profile": "Ajuster mon profil",
+    "title_housing": "Logement",
+    "housing_type": {
+      "individual_house": "Maison individuelle",
+      "appartment": "appartement"
+    },
+    "title_construction": "Construction",
+    "construction_year": {
+      "before_1948": "avant 1948",
+      "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"
+    },
+    "title_area": "Surface",
+    "title_occupants": "Nombre d'occupants",
+    "title_outsideFacingWalls": "Mitoyenneté",
+    "title_floor": "Étage",
+    "floor": {
+      "ground_floor": "RDC",
+      "intermediate_floor": "Étage intermédiaire",
+      "last_floor": "Dernier étage",
+      "not_applicable": "Sans objet"
+    },
+    "title_heating": "Chauffage",
+    "heating": {
+      "individual": "Individuel",
+      "collective": "Collectif"
+    },
+    "title_insulation_work": "Travaux",
+    "insulation_work": {
+      "none": "Aucun",
+      "roof_insulation": "Isolation toîture",
+      "window_replacement": "Remplacement fenêtre",
+      "wall_insulation": "Isolation des murs",
+      "window_replacement_and_wall_insulation": "Rempacement fenêtre et isolation des murs",
+      "window_replacement_and_roof_insulation": "Remplacement fenêtre et isolation toîture",
+      "roof_and_wall_insulation": "Isolation toîture et murs",
+      "window_replacement_and_roof_and_wall_insulation": "Rempacement fenêtre et isolation des murs et isolation toîture",
+      "built_after_1998": "construit après 1998"
+    },
+    "title_facilities_installation": "Équipement",
+    "facilities_installation": {
+      "none": "aucun",
+      "collective_heater": "chauffage collectif",
+      "individual_heater": "chauffage individuel",
+      "individual_ventilation": "ventilation double flux individuel",
+      "individual_heater_and_ventilation": "chauffage et ventilation individuel"
+    },
+    "title_hotWaterEquipment": "Eau chaude",
+    "hotWaterEquipment": {
+      "solar": "solaire",
+      "thermodynamic": "Thermodynamique",
+      "other": "Autre"
+    },
+    "title_heating_source": "Source chauffage",
+    "title_warm_water_source": "Source eau chaude",
+    "title_cooking_source": "Source cuisson",
+    "fluidType": {
+      "0": "Électricité",
+      "1": "Eau",
+      "2": "Gaz"
+    }
   }
 }